- 1. Web Tech 101 ITP Camp June 6, 2010 Dan Phiffer
phiffer.org
2. Hi! Im Dan, ITP alum 2007 Projects Ive 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 OKInitiated 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: 0The sites 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: 0Both 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: -1GET + POST
are the request Cache-Control: private, max-age=0methods we care
about Content-Type: text/html; charset=UTF-8 Content-Encoding: gzip
Server: gwsGET HEAD Content-Length: 3533 POSTTRACE
X-XSS-Protection: 0PUT OPTIONSDELETECONNECT 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: -1Common status
codes Cache-Control: private, max-age=0 Content-Type: text/html;
charset=UTF-8 200 OK Content-Encoding: gzip 302 Found Server:
gws304 Not modified Content-Length: 3533 X-XSS-Protection: 0404 Not
found500 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: 0Google... 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: 0Google... 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
...
Attribute
...
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! 25.
External .js files 26. JavaScript links OReilly Rhino book Mozillas
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 (ala nike.com) sIFR (use any font,
consistently) Various other things (multi-file uploads,
quasi-WebSockets, annoying advertising) 29. Flash Popular way to
embed videos Embeds are over-complicated and often dont pass
validation I like the SWFObject library, or Swiff utility in
MooTools 30. HTML5 Not really a Flash-killer Collection of new HTML
standards for graphics and 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 dont 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: [email protected] Catch me on
Twitter: @dphiffer Talk to me in the lounge!
