SlideShare a Scribd company logo

Web tech 101

•
•
Dan Phiffer
Dan Phiffer

The document provides an overview of web technologies, including: - The basic client-server model of the web where clients (browsers) make HTTP requests to servers, which return data like web pages. - Key aspects of HTTP requests and responses like headers, status codes, and encoding of returned HTML content. - How the client-server communication is repeated for each file that makes up a full web page.

Related slideshows

HTTP/2 (2017)
HTTP/2 (2017)HTTP/2 (2017)
HTTP/2 (2017)
 
DEF CON 27- ALBINOWAX - http desync attacks
DEF CON 27- ALBINOWAX - http desync attacksDEF CON 27- ALBINOWAX - http desync attacks
DEF CON 27- ALBINOWAX - http desync attacks
 
Pushing the web — WebSockets
Pushing the web — WebSocketsPushing the web — WebSockets
Pushing the web — WebSockets
 
1 of 39
Download to read offline
Web Tech 101 ITP Camp • June 6, 2010 Dan Phiffer • phiffer.org
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
Agenda • Big picture stuff • Client-side • Server-side • Data storage • AJAX & Comet
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
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.
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)
How does it work? ...
Miracles!
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
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
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
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¬
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
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
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
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
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
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
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>...
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>...
Repeat for each file The same HTTP request, response process is repeated for each of the six files that compose this Google page view
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; }
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
Hello, world! <script type="text/javascript"> alert('yo'); </script>
External .js files <script src="yo.js" type="text/javascript"> </script>
JavaScript links • O’Reilly Rhino book • Mozilla’s JavaScript Reference • Eloquent JavaScript tutorial • jQuery tutorials • MooTools “mootorial”
Flash • First: Animated movies! On the internets! • Then: interactive swishy things! Fun! • Now: Videos! On the internets!
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)
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
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
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
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
PHP • Quick & dirty workhorse • Upload a .php file, load it in a browser, done! • Good for small websites
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
Java • I don’t know much about Java • More enterprise-y • Good for big sites
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
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
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
Thanks! • Send me email: dan@phiffer.org • Catch me on Twitter: @dphiffer • Talk to me in the lounge!

More Related Content

Web tech 101

  • 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? ...
  • 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
  • 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!