SlideShare a Scribd company logo

Web tech 101

•
Dan Phiffer, profile picture
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.

Technology
1 of 39
Downloaded 10 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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

What's hot (20)

PDF
HTTP/2 (2017)
Christian Mäder
 
PDF
DEF CON 27- ALBINOWAX - http desync attacks
Felipe Prado
 
KEY
Pushing the web — WebSockets
Roland M
 
PDF
Scrip queue tree
Marco Arias
 
ODP
HAProxy scale out using open source
Ingo Walz
 
PDF
Krzysztof Kotowicz - Hacking HTML5
DefconRussia
 
PDF
Developing cacheable PHP applications - PHPLimburgBE 2018
Thijs Feryn
 
PPTX
Websockets in Node.js - Making them reliable and scalable
Gareth Marland
 
PDF
Server-Side JavaScript Developement - Node.JS Quick Tour
q3boy
 
PPTX
SPDY - or maybe HTTP2.0
Andreas Bjärlestam
 
PDF
Rooting your internals - Exploiting Internal Network Vulns via the Browser Us...
Michele Orru
 
ODP
WebSockets with PHP: Mission impossible
Yoan-Alexander Grigorov
 
PPTX
Socket programming with php
Elizabeth Smith
 
PDF
Node JS
Ynon Perek
 
PDF
Php Inside - confoo 2011 - Derick Rethans
Bachkoutou Toutou
 
PDF
Introduction to WebSockets
Gunnar Hillert
 
PDF
OWASP Top 10 - Checkmarx Presentation at Polytechnic Institute of Cávado and Ave
Checkmarx
 
PPTX
Php push notifications
Mohammed Shurrab
 
KEY
Hosting Client Websites on a WordPress Multisite Network
peterwilsoncc
 
PPTX
Elastic stack
Minsoo Jun
 
HTTP/2 (2017)
Christian Mäder
 
DEF CON 27- ALBINOWAX - http desync attacks
Felipe Prado
 
Pushing the web — WebSockets
Roland M
 
Scrip queue tree
Marco Arias
 
HAProxy scale out using open source
Ingo Walz
 
Krzysztof Kotowicz - Hacking HTML5
DefconRussia
 
Developing cacheable PHP applications - PHPLimburgBE 2018
Thijs Feryn
 
Websockets in Node.js - Making them reliable and scalable
Gareth Marland
 
Server-Side JavaScript Developement - Node.JS Quick Tour
q3boy
 
SPDY - or maybe HTTP2.0
Andreas Bjärlestam
 
Rooting your internals - Exploiting Internal Network Vulns via the Browser Us...
Michele Orru
 
WebSockets with PHP: Mission impossible
Yoan-Alexander Grigorov
 
Socket programming with php
Elizabeth Smith
 
Node JS
Ynon Perek
 
Php Inside - confoo 2011 - Derick Rethans
Bachkoutou Toutou
 
Introduction to WebSockets
Gunnar Hillert
 
OWASP Top 10 - Checkmarx Presentation at Polytechnic Institute of Cávado and Ave
Checkmarx
 
Php push notifications
Mohammed Shurrab
 
Hosting Client Websites on a WordPress Multisite Network
peterwilsoncc
 
Elastic stack
Minsoo Jun
 

Viewers also liked (8)

PDF
Static layouts with css
Dan Phiffer
 
PDF
Word press templates
Dan Phiffer
 
PDF
Intro to word press
Dan Phiffer
 
PDF
The web context
Dan Phiffer
 
PDF
Occupy.here
Dan Phiffer
 
PDF
Intro to JavaScript
Dan Phiffer
 
PDF
Diving into php
Dan Phiffer
 
PDF
The Outcome Economy
Helge Tennø
 
Static layouts with css
Dan Phiffer
 
Word press templates
Dan Phiffer
 
Intro to word press
Dan Phiffer
 
The web context
Dan Phiffer
 
Occupy.here
Dan Phiffer
 
Intro to JavaScript
Dan Phiffer
 
Diving into php
Dan Phiffer
 
The Outcome Economy
Helge Tennø
 
Ad

Similar to Web tech 101 (20)

PPTX
Metodologias de Programação IV - Aula 4, Secção 2 - Suporte para sessões no p...
Leonel Morgado
 
PDF
Web Application Security 101 - 02 The Basics
Websecurify
 
PDF
IBM dwLive, "Internet & HTTP - 잃어버린 패킷을 찾아서..."
Dongwook Lee
 
PDF
Client–server model
Vladimir Doroshenko
 
ODP
Http
NEATS
 
PDF
20190516 web security-basic
MksYi
 
PDF
Cgi
AkramWaseem
 
PDF
HTTP
Daniel Kummer
 
PPTX
Cache is king
edrone
 
PPTX
Cache is the king
Kasia Przybylska
 
PPTX
WebSockets Everywhere: the Future Transport Protocol for Everything (Almost)
Ericom Software
 
PDF
Introduction HTTP via cURL
Kyosuke MOROHASHI
 
PDF
REST and JAX-RS
Guy Nir
 
PPTX
Type URL, Enter, and Then …
Jinglun Li
 
PDF
Computer network (10)
NYversity
 
PDF
How HTTP/2 will change the web as we know it
Woorank
 
PDF
How HTTP/2 will change the web as we know it
Nils De Moor
 
PDF
2. [Daily hack] Citrix_waf_bypass
defconmoscow
 
ODP
HTTP Basic - PHP
Sulaeman .
 
PPT
Under the Covers with the Web
Trevor Lohrbeer
 
Metodologias de Programação IV - Aula 4, Secção 2 - Suporte para sessões no p...
Leonel Morgado
 
Web Application Security 101 - 02 The Basics
Websecurify
 
IBM dwLive, "Internet & HTTP - 잃어버린 패킷을 찾아서..."
Dongwook Lee
 
Client–server model
Vladimir Doroshenko
 
Http
NEATS
 
20190516 web security-basic
MksYi
 
Cgi
AkramWaseem
 
HTTP
Daniel Kummer
 
Cache is king
edrone
 
Cache is the king
Kasia Przybylska
 
WebSockets Everywhere: the Future Transport Protocol for Everything (Almost)
Ericom Software
 
Introduction HTTP via cURL
Kyosuke MOROHASHI
 
REST and JAX-RS
Guy Nir
 
Type URL, Enter, and Then …
Jinglun Li
 
Computer network (10)
NYversity
 
How HTTP/2 will change the web as we know it
Woorank
 
How HTTP/2 will change the web as we know it
Nils De Moor
 
2. [Daily hack] Citrix_waf_bypass
defconmoscow
 
HTTP Basic - PHP
Sulaeman .
 
Under the Covers with the Web
Trevor Lohrbeer
 
Ad

Recently uploaded (20)

PPTX
Agile Chennai 18-19 July 2025 | Workshop - Enhancing Agile Collaboration with...
AgileNetwork
 
PPTX
Simple and concise overview about Quantum computing..pptx
mughal641
 
PDF
Tea4chat - another LLM Project by Kerem Atam
a0m0rajab1
 
PDF
The Future of Mobile Is Context-Aware—Are You Ready?
iProgrammer Solutions Private Limited
 
PDF
Brief History of Internet - Early Days of Internet
sutharharshit158
 
PDF
Google I/O Extended 2025 Baku - all ppts
HusseinMalikMammadli
 
PDF
Trying to figure out MCP by actually building an app from scratch with open s...
Julien SIMON
 
PDF
How Open Source Changed My Career by abdelrahman ismail
a0m0rajab1
 
PDF
CIFDAQ's Market Wrap : Bears Back in Control?
CIFDAQ
 
PPTX
Applied-Statistics-Mastering-Data-Driven-Decisions.pptx
parmaryashparmaryash
 
PDF
introduction to computer hardware and sofeware
chauhanshraddha2007
 
PDF
Generative AI vs Predictive AI-The Ultimate Comparison Guide
Lily Clark
 
PDF
Researching The Best Chat SDK Providers in 2025
Ray Fields
 
PDF
RAT Builders - How to Catch Them All [DeepSec 2024]
malmoeb
 
PPTX
AI in Daily Life: How Artificial Intelligence Helps Us Every Day
vanshrpatil7
 
PPTX
AVL ( audio, visuals or led ), technology.
Rajeshwri Panchal
 
PPTX
AI and Robotics for Human Well-being.pptx
JAYMIN SUTHAR
 
PDF
A Strategic Analysis of the MVNO Wave in Emerging Markets.pdf
IPLOOK Networks
 
PDF
NewMind AI Weekly Chronicles – July’25, Week III
NewMind AI
 
PDF
Responsible AI and AI Ethics - By Sylvester Ebhonu
Sylvester Ebhonu
 
Agile Chennai 18-19 July 2025 | Workshop - Enhancing Agile Collaboration with...
AgileNetwork
 
Simple and concise overview about Quantum computing..pptx
mughal641
 
Tea4chat - another LLM Project by Kerem Atam
a0m0rajab1
 
The Future of Mobile Is Context-Aware—Are You Ready?
iProgrammer Solutions Private Limited
 
Brief History of Internet - Early Days of Internet
sutharharshit158
 
Google I/O Extended 2025 Baku - all ppts
HusseinMalikMammadli
 
Trying to figure out MCP by actually building an app from scratch with open s...
Julien SIMON
 
How Open Source Changed My Career by abdelrahman ismail
a0m0rajab1
 
CIFDAQ's Market Wrap : Bears Back in Control?
CIFDAQ
 
Applied-Statistics-Mastering-Data-Driven-Decisions.pptx
parmaryashparmaryash
 
introduction to computer hardware and sofeware
chauhanshraddha2007
 
Generative AI vs Predictive AI-The Ultimate Comparison Guide
Lily Clark
 
Researching The Best Chat SDK Providers in 2025
Ray Fields
 
RAT Builders - How to Catch Them All [DeepSec 2024]
malmoeb
 
AI in Daily Life: How Artificial Intelligence Helps Us Every Day
vanshrpatil7
 
AVL ( audio, visuals or led ), technology.
Rajeshwri Panchal
 
AI and Robotics for Human Well-being.pptx
JAYMIN SUTHAR
 
A Strategic Analysis of the MVNO Wave in Emerging Markets.pdf
IPLOOK Networks
 
NewMind AI Weekly Chronicles – July’25, Week III
NewMind AI
 
Responsible AI and AI Ethics - By Sylvester Ebhonu
Sylvester Ebhonu
 

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: [email protected] • Catch me on Twitter: @dphiffer • Talk to me in the lounge!