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. Agenda
• Big picture stuff
• Client-side
• Server-side
• Data storage
• AJAX & Comet
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. 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. 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)
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Repeat for each file
The same HTTP request, response process is repeated for each of the six
files that compose this Google page view
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
27. Flash
• First: Animated movies! On the internets!
• Then: interactive swishy things! Fun!
• Now: Videos! On the internets!
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. 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. 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. 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. 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. PHP
• Quick & dirty workhorse
• Upload a .php file, load it in a browser, done!
• Good for small websites
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. Java
• I don’t know much about Java
• More enterprise-y
• Good for big sites
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. 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. 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. Thanks!
• Send me email: dan@phiffer.org
• Catch me on Twitter: @dphiffer
• Talk to me in the lounge!