Web tech 101
Upcoming SlideShare
Loading in...5
×
 

Web tech 101

on

  • 957 views

 

Statistics

Views

Total Views
957
Views on SlideShare
948
Embed Views
9

Actions

Likes
1
Downloads
8
Comments
0

1 Embed 9

http://www.slideshare.net 9

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web tech 101 Web tech 101 Presentation Transcript

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