Je du faire sa pour me calmer Maker Party: Your first hack, Pt 2 img {max-width: 100%; max-height: 100%; height: auto; width: auto;} Activity Maker Party: Your first hack, Pt 2 Wouldnt it be cool if you could hack websites like google, facebook, you name it? Well you can. This tutorial will explain some of the very basics and hopefully inspire you to dig deeper. Made by Tobias Leingruber Lets dig deeper! Looking back: In part 1 of this tutorial weve learned how-to run JavaScript on any website with bookmarklets. We also learned how-to make the website speak and how-to change its background color.Now lets do something even more fun: Add background images to any website. Find direct link to the image youd like to use. This is our code: javascript:void(document.getElementsByTagName(body)[0].style.background=url(tobi-x/mozilla/led.gif)); Feel free to skip this paragraph if you dont care how the code works: This line requires some understanding of the JavaScript DOM model, syntax and standard functions. What the code is doing in English is that it looks for the first body element in the HTML code to add a new style setting (background image). Replace the URL tobi-x/mozilla/led.gif with the link to Your image in the code line. Then paste everything into your bookmarklet, save it. (Read how this works in part 1 of the tutorial) Go to a website of your choice and see if your new bookmarklet works. Et voilà: A fun tool: Inspector Next-up we are going to use one of the tools that web designers use to tinker with their code. Well use an inspector to find the logo (or any other graphic) on a website in order to replace it with something else - Just by clicking on it. Note: Most modern web browsers come with such a tool by default. For simplicity our example will be on the latest Firefox on Mac OS X, but other browsers (Opera, Chrome) have very similar functionalities. Open Web Developer Tools (via Extras) Find this little button and click it. Now you can hover over any element on the webpage and click it to see it highlighted in the developer tool bar After selecting an element, for example Mark Zuckerbergs profile picture on Facebook, you will see a web address highlighted in the tool bar. Replace it with something else! (In this example tobi-x/mozilla/maker-party-logo.jpg) Lets just delete something... Ads!Open the web developer tools, click the inspector icon, hover over the outer box of the ads, click, hit delete. Gone. Now apply your new skills further! Play around. Hack. Tinker. Become a maker of the web. Stay tuned for part 3! Outro The World wide web is essentially a big network of documents that are shared via the same technology - The HTTP protocol. HTTP transports code that is interpreted by a browser (Firefox, Opera, Google Chrome...) and the result is what you see on your computer screen. The code which tells the browser how-to display a website is being transported in formats (HTML, CSS, Javascript) that are open and anyone can read them. Well not just read! With several different techniques you can hack, remix, manipulate anything on the web. Tags #makerparty #coding #beginners Materials Webbrowser Developer Tools Text Editor Web Access
Posted on: Wed, 07 Jan 2015 23:07:20 +0000
Trending Topics
Recently Viewed Topics
© 2015