Web tech 101

962 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
962
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web tech 101

  1. 1. Web Tech 101 ITP Camp • June 6, 2010 Dan Phiffer • phiffer.org
  2. 2. Hi! • I’m Dan, ITP alum 2007 • Projects I’ve worked on: ShiftSpace, You Are Not Here, Atlas Gloves • More recently: MoMA.org, Future Archaeology, photography
  3. 3. Agenda • Big picture stuff • Client-side • Server-side • Data storage • AJAX & Comet
  4. 4. Big picture • The web is about clients talking to servers • The language is HTTP • Invented by (Sir) Tim Berners-Lee • Mosaic browser released in 1993 • Graphical-based web is a teenager
  5. 5. Web client • Being a client is all about asking for stuff • Clients make HTTP requests, get back data • Data is turned into webpages, podcasts, iPhone apps, etc.
  6. 6. Web server • Being a server is all about giving stuff out • Servers get an HTTP request, send data • Once data is sent, job is done (mostly)
  7. 7. How does it work? ...
  8. 8. Miracles!
  9. 9. How you get stuff GET / HTTP/1.1 Host: www.google.com User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US;... Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Cookie: PREF=ID=1b1e370406541f31:U=cbfc7563400e91be:LD=en:NR=10:TM=12546... HTTP/1.x 200 OK Date: Sun, 18 Oct 2009 23:43:31 GMT Expires: -1 Cache-Control: private, max-age=0 Content-Type: text/html; charset=UTF-8 Content-Encoding: gzip Server: gws Content-Length: 3533 X-XSS-Protection: 0
  10. 10. The request GET / HTTP/1.1 Host: www.google.com User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US;... Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Cookie: PREF=ID=1b1e370406541f31:U=cbfc7563400e91be:LD=en:NR=10:TM=12546... HTTP/1.x 200 OK Initiated by a browser, the web client Date: Sun, 18 Oct 2009 23:43:31 GMT Expires: -1 Cache-Control: private, max-age=0 Content-Type: text/html; charset=UTF-8 Content-Encoding: gzip Server: gws Content-Length: 3533 X-XSS-Protection: 0
  11. 11. The response GET / HTTP/1.1 Host: www.google.com User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US;... Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Cookie: PREF=ID=1b1e370406541f31:U=cbfc7563400e91be:LD=en:NR=10:TM=12546... HTTP/1.x 200 OK Date: Sun, 18 Oct 2009 23:43:31 GMT Expires: -1 Cache-Control: private, max-age=0 Content-Type: text/html; charset=UTF-8 Content-Encoding: gzip Server: gws Content-Length: 3533 X-XSS-Protection: 0 The site’s web server decides how to treat the request
  12. 12. Headers GET / HTTP/1.1 Host: www.google.com User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US;... Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Cookie: PREF=ID=1b1e370406541f31:U=cbfc7563400e91be:LD=en:NR=10:TM=12546... HTTP/1.x 200 OK Date: Sun, 18 Oct 2009 23:43:31 GMT Expires: -1 Cache-Control: private, max-age=0 Content-Type: text/html; charset=UTF-8 Content-Encoding: gzip Server: gws Content-Length: 3533 X-XSS-Protection: 0 Both the request and response include headers of the form key: value¬
  13. 13. Request method GET / HTTP/1.1 Host: www.google.com User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US;... Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Cookie: PREF=ID=1b1e370406541f31:U=cbfc7563400e91be:LD=en:NR=10:TM=12546... HTTP/1.x 200 OK Date: Sun, 18 Oct 2009 23:43:31 GMT Expires: -1 Cache-Control: private, max-age=0 Content-Type: text/html; charset=UTF-8 Content-Encoding: gzip Server: gws Content-Length: 3533 X-XSS-Protection: 0
  14. 14. Request method GET / HTTP/1.1 Host: www.google.com User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US;... Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Cookie: PREF=ID=1b1e370406541f31:U=cbfc7563400e91be:LD=en:NR=10:TM=12546... HTTP/1.x 200 OK Date: Sun, 18 Oct 2009 23:43:31 GMT Expires: -1 GET + POST are the request Cache-Control: private, max-age=0 methods we care about Content-Type: text/html; charset=UTF-8 Content-Encoding: gzip Server: gws GET HEAD Content-Length: 3533 POST TRACE X-XSS-Protection: 0 PUT OPTIONS DELETE CONNECT
  15. 15. Request path GET / HTTP/1.1 Host: www.google.com User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US;... Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Cookie: PREF=ID=1b1e370406541f31:U=cbfc7563400e91be:LD=en:NR=10:TM=12546... HTTP/1.x 200 OK Date: Sun, 18 Oct 2009 23:43:31 GMT Expires: -1 Cache-Control: private, max-age=0 Content-Type: text/html; charset=UTF-8 Content-Encoding: gzip Server: gws Content-Length: 3533 X-XSS-Protection: 0
  16. 16. Request path GET / HTTP/1.1 Host: www.google.com User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US;... Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Cookie: PREF=ID=1b1e370406541f31:U=cbfc7563400e91be:LD=en:NR=10:TM=12546... HTTP/1.x 200 OK Date: Sun, 18 Oct 2009 23:43:31 GMT Expires: -1 Other path examples Cache-Control: private, max-age=0 Content-Type: text/html; charset=UTF-8 /page.html Content-Encoding: gzip /?q=cat%20pictures&btn=... Server: gws /images/title.png Content-Length: 3533 X-XSS-Protection: 0 /2009/10/19/naval-gazing
  17. 17. Status code GET / HTTP/1.1 Host: www.google.com User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US;... Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Cookie: PREF=ID=1b1e370406541f31:U=cbfc7563400e91be:LD=en:NR=10:TM=12546... HTTP/1.x 200 OK Date: Sun, 18 Oct 2009 23:43:31 GMT Expires: -1 Cache-Control: private, max-age=0 Content-Type: text/html; charset=UTF-8 Content-Encoding: gzip Server: gws Content-Length: 3533 X-XSS-Protection: 0
  18. 18. Status code GET / HTTP/1.1 Host: www.google.com User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US;... Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Cookie: PREF=ID=1b1e370406541f31:U=cbfc7563400e91be:LD=en:NR=10:TM=12546... HTTP/1.x 200 OK Date: Sun, 18 Oct 2009 23:43:31 GMT Expires: -1 Common status codes Cache-Control: private, max-age=0 Content-Type: text/html; charset=UTF-8 200 OK Content-Encoding: gzip 302 Found Server: gws 304 Not modified Content-Length: 3533 X-XSS-Protection: 0 404 Not found 500 Server error
  19. 19. The page HTML GET / HTTP/1.1 Host: www.google.com User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US;... Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Cookie: PREF=ID=1b1e370406541f31:U=cbfc7563400e91be:LD=en:NR=10:TM=12546... HTTP/1.x 200 OK Date: Sun, 18 Oct 2009 23:43:31 GMT Expires: -1 Cache-Control: private, max-age=0 Content-Type: text/html; charset=UTF-8 Content-Encoding: gzip Server: gws Content-Length: 3533 X-XSS-Protection: 0 <!doctype html><html><head><meta http-equiv="content-type" content="text/ html; charset=UTF-8"><title>Google</title>...
  20. 20. The page HTML GET / HTTP/1.1 Host: www.google.com User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US;... Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Cookie: PREF=ID=1b1e370406541f31:U=cbfc7563400e91be:LD=en:NR=10:TM=12546... HTTP/1.x 200 OK Date: Sun, 18 Oct 2009 23:43:31 GMT Expires: -1 Cache-Control: private, max-age=0 Content-Type: text/html; charset=UTF-8 Content-Encoding: gzip Server: gws Content-Length: 3533 X-XSS-Protection: 0 <!doctype html><html><head><meta http-equiv="content-type" content="text/ html; charset=UTF-8"><title>Google</title>...
  21. 21. Repeat for each file The same HTTP request, response process is repeated for each of the six files that compose this Google page view
  22. 22. Client-side • Required Firefox add-on, Firebug • HTML • Element <div id="bar">...</div> • Attribute <div id="bar">...</div> • CSS • Selector #bar { font-weight: bold; } • Property #bar { font-weight: bold; }
  23. 23. JavaScript • Simple, flexible, and slightly weird • C-like syntax, inspired by Self and Lisp • See also: Ecmascript, Dynamic-HTML (DHTML), AJAX, Comet • Uses the Document Object Model (DOM) API • Frameworks (Prototype, jQuery, Dojo, MooTools, etc.) abstract the DOM away
  24. 24. Hello, world! <script type="text/javascript"> alert('yo'); </script>
  25. 25. External .js files <script src="yo.js" type="text/javascript"> </script>
  26. 26. JavaScript links • O’Reilly Rhino book • Mozilla’s JavaScript Reference • Eloquent JavaScript tutorial • jQuery tutorials • MooTools “mootorial”
  27. 27. Flash • First: Animated movies! On the internets! • Then: interactive swishy things! Fun! • Now: Videos! On the internets!
  28. 28. Flash is essential for... • Sound (stream an MP3 file) • Full screen • Brochure-ware (a’la nike.com) • sIFR (use any font, consistently) • Various other things (multi-file uploads, quasi-WebSockets, annoying advertising)
  29. 29. Flash <embeds> • Popular way to embed videos • Embeds are over-complicated and often don’t pass validation • I like the SWFObject library, or Swiff utility in MooTools
  30. 30. HTML5 • Not really a “Flash-killer” • Collection of new HTML standards • <canvas> for graphics • <video> and <audio> for media • Plus a whole lot of other stuff
  31. 31. Why HTML5 is good • Vendor-driven instead of standards-driven • Open process with a single guiding vision (Ian Hickson from Google) • See: Dive Into HTML5
  32. 32. Server-side • Languages: PHP, Ruby, Python, Java, C# • Frameworks: Ruby on Rails, Django, CakePHP, Symfony, .NET, WordPress • Some crazy people even write JavaScript on the server-side
  33. 33. PHP • Quick & dirty workhorse • Upload a .php file, load it in a browser, done! • Good for small websites
  34. 34. Ruby on Rails • More “fussy” and “magical” • Relies on Model/View/Controller pattern • The Passenger/mod_rails project makes it work nicely on the Apache web server • Good for medium-sized projects
  35. 35. Java • I don’t know much about Java • More enterprise-y • Good for big sites
  36. 36. Data storage • Data stores keep data & code separate • MySQL, PostgreSQL, SQL Server are relational databases (RDBMS) and use SQL • CouchDB and others known as “no-SQL” are gaining traction • SQL is more established, but not as simple to learn
  37. 37. AJAX • Stands for: Asynchronous JavaScript & XML • Invented by Microsoft, popularized by Adaptive Path • Synonymous with interactive JavaScript • Put more stuff onto the page without reloading the whole page
  38. 38. Comet • Used for things like GMail & Facebook chat • Allows the server to send you data • Still mostly faking it with long polling • New standard called WebSockets is in the works
  39. 39. Thanks! • Send me email: dan@phiffer.org • Catch me on Twitter: @dphiffer • Talk to me in the lounge!

×