hack your browser!
DESCRIPTION
TRANSCRIPT
![Page 2: Hack your browser!](https://reader033.vdocuments.site/reader033/viewer/2022051514/5497dbc1ac7959092e8b549c/html5/thumbnails/2.jpg)
Logistical announcements
- I use the Google Chrome browser throughout. There are alternatives. The leading alternative is Mozilla's Firefox browser with the Firebug plugin.
- The internet is a jungle. Hack websites = deal with people's code. Most people write crappy code.
- These slides will be posted on the NerdNite website.
![Page 3: Hack your browser!](https://reader033.vdocuments.site/reader033/viewer/2022051514/5497dbc1ac7959092e8b549c/html5/thumbnails/3.jpg)
Browsers, Servers, InternetsHack 1: The address bar
Websites are complexHack 2: Relatively simple website
More on JavascriptHack 3: Reformatting in Javascript
Hack 4: Free Unlimited NYT
Today's agenda
![Page 4: Hack your browser!](https://reader033.vdocuments.site/reader033/viewer/2022051514/5497dbc1ac7959092e8b549c/html5/thumbnails/4.jpg)
Yowsers - browsers!
Google Chrome
Internet Explorer
Mozilla Firefox
Opera
Safari
Iron
Source: http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
![Page 5: Hack your browser!](https://reader033.vdocuments.site/reader033/viewer/2022051514/5497dbc1ac7959092e8b549c/html5/thumbnails/5.jpg)
This is the Internet
http://en.wikipedia.org/wiki/Internet
![Page 6: Hack your browser!](https://reader033.vdocuments.site/reader033/viewer/2022051514/5497dbc1ac7959092e8b549c/html5/thumbnails/6.jpg)
The browsing experience
This is you.
![Page 7: Hack your browser!](https://reader033.vdocuments.site/reader033/viewer/2022051514/5497dbc1ac7959092e8b549c/html5/thumbnails/7.jpg)
The browsing experience
![Page 8: Hack your browser!](https://reader033.vdocuments.site/reader033/viewer/2022051514/5497dbc1ac7959092e8b549c/html5/thumbnails/8.jpg)
The browsing experience
![Page 9: Hack your browser!](https://reader033.vdocuments.site/reader033/viewer/2022051514/5497dbc1ac7959092e8b549c/html5/thumbnails/9.jpg)
The browsing experience
![Page 10: Hack your browser!](https://reader033.vdocuments.site/reader033/viewer/2022051514/5497dbc1ac7959092e8b549c/html5/thumbnails/10.jpg)
The browsing experience
![Page 11: Hack your browser!](https://reader033.vdocuments.site/reader033/viewer/2022051514/5497dbc1ac7959092e8b549c/html5/thumbnails/11.jpg)
The address bar
http://subdom.domain.us/path/to/stuff?param1=xx&p2=yy
![Page 12: Hack your browser!](https://reader033.vdocuments.site/reader033/viewer/2022051514/5497dbc1ac7959092e8b549c/html5/thumbnails/12.jpg)
Hack 1: Craigslist Address Bar
![Page 13: Hack your browser!](https://reader033.vdocuments.site/reader033/viewer/2022051514/5497dbc1ac7959092e8b549c/html5/thumbnails/13.jpg)
A website is not a static image!
- Different size screens
- Different browsers
- Different user settings
- Different site functionalities
![Page 14: Hack your browser!](https://reader033.vdocuments.site/reader033/viewer/2022051514/5497dbc1ac7959092e8b549c/html5/thumbnails/14.jpg)
What's in a website?
• HTML (HyperText Markup Language)What are the objects on the page?
• CSS (Cascading Style Sheets)What should they look like?
• JS (JavaScript)What should they do?
![Page 15: Hack your browser!](https://reader033.vdocuments.site/reader033/viewer/2022051514/5497dbc1ac7959092e8b549c/html5/thumbnails/15.jpg)
HTML: the DOM (Document Object Model)
What's on a page?
- Divs - Paragraphs - Lists - Images - Buttons - Tables
http://www.flickr.com/photos/starttheday
![Page 16: Hack your browser!](https://reader033.vdocuments.site/reader033/viewer/2022051514/5497dbc1ac7959092e8b549c/html5/thumbnails/16.jpg)
CSS
- What the page elements should look like
- Where they should go on the page.
http://www.flickr.com/photos/ariville
![Page 17: Hack your browser!](https://reader033.vdocuments.site/reader033/viewer/2022051514/5497dbc1ac7959092e8b549c/html5/thumbnails/17.jpg)
Hack 2: Very Simple Page
![Page 18: Hack your browser!](https://reader033.vdocuments.site/reader033/viewer/2022051514/5497dbc1ac7959092e8b549c/html5/thumbnails/18.jpg)
Javascript
Directly control what your browser does:
- Any moving effects (like mouseovers, popups, etc)
- Calls to the server
... and so much more
http://www.t-online.de/regionales/id_42087044/laatzener-stellt-wm-spiele-mit-lego-steinen-nach.html
![Page 19: Hack your browser!](https://reader033.vdocuments.site/reader033/viewer/2022051514/5497dbc1ac7959092e8b549c/html5/thumbnails/19.jpg)
Hack 3: Reformatting in JavaScript
![Page 20: Hack your browser!](https://reader033.vdocuments.site/reader033/viewer/2022051514/5497dbc1ac7959092e8b549c/html5/thumbnails/20.jpg)
Hack 4: free unlimited NYT
![Page 21: Hack your browser!](https://reader033.vdocuments.site/reader033/viewer/2022051514/5497dbc1ac7959092e8b549c/html5/thumbnails/21.jpg)
Thank you!
Resources:
www.google.com (seriously!)http://www.stackoverflow.comhttp://en.wikipedia.org/wiki/JavaScripthttp://www.w3schools.com/js/http://dev.opera.com/articles/view/12-the-basics-of-html/http://www.dontfeartheinternet.com/http://www.netmagazine.com/tutorials