Embed Size (px)
DESCRIPTION
Citation preview
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.
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
Yowsers - browsers!
Google Chrome
Internet Explorer
Mozilla Firefox
Opera
Safari
Iron
Source: http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
This is the Internet
http://en.wikipedia.org/wiki/Internet
The browsing experience
This is you.
The browsing experience
The browsing experience
The browsing experience
The browsing experience
The address bar
http://subdom.domain.us/path/to/stuff?param1=xx&p2=yy
Hack 1: Craigslist Address Bar
A website is not a static image!
- Different size screens
- Different browsers
- Different user settings
- Different site functionalities
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?
HTML: the DOM (Document Object Model)
What's on a page?
- Divs - Paragraphs - Lists - Images - Buttons - Tables
http://www.flickr.com/photos/starttheday
CSS
- What the page elements should look like
- Where they should go on the page.
http://www.flickr.com/photos/ariville
Hack 2: Very Simple Page
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
Hack 3: Reformatting in JavaScript
Hack 4: free unlimited NYT
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
