1. Web Tech 101
ITP Camp • June 6, 2010
Dan Phiffer • phiffer.org

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)

7. How does it work?
...

8. Miracles!

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

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. 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. Hello, world!
<script type="text/javascript">
alert('yo');
</script>

25. External .js files
<script src="yo.js" type="text/javascript">
</script>

26. JavaScript links
• O’Reilly Rhino book
• Mozilla’s JavaScript Reference
• Eloquent JavaScript tutorial
• jQuery tutorials
• MooTools “mootorial”

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!