Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
How Web Pages Work
and other ghost stories
Disclaimer
no math
no programming
no problem
How do computers talk?
How do computers talk?
How do computers talk?
How do computers talk?
How do computers talk?
How do computers talk?
Great, so how do they become friends?
Domain Name System
DNS translates domains into something computers understand
google...
Who do they talk to?
Who do they talk to?
IP address gets traffic to the computer
Ports get the traffic to the application
ex. 1.1.1.1:80
ex. f...
What do they talk about?
Hyper Text Transfer Protocol (HTTP)
Transfers HTML (Hyper Text Markup Language)
Usually on port 80
HTTP Format
Verb and info
Headers, one per line
[blank line]
Optional body
HTTP Verbs
GET
POST
The other guys: PUT / PATCH / DELETE / HEAD
HTTP Headers
Host - name of the website we’re talking to
User agent - browser version
Cache - remember this, not gonna ans...
HTTP GET Requests
GET / HTTP/1.1
Host: oneis.us
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X) Firefox/44.0
Accept: t...
Request sent!
Server gets request
Forwards it to the web server program
Web server gets the file requested
Sends response ...
HTTP Responses
HTTP/1.1 200 OK
Content-Length: 1241
Date: Mon, 01 Feb 2016 17:54:16 GMT
Content-Type: text/html;charset=ut...
HTML (and CSS and JS and images and…)
HTTP Get Requests
GET /users.php?page=2 HTTP/1.1
Host: oneis.us
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X) Firefo...
HTTP Responses
HTTP/1.1 404 Not Found
Content-Length: 28
Date: Mon, 01 Feb 2016 17:58:02 GMT
Content-Type: text/html;chars...
HTTP Status Codes
1xx - info
2xx - success
3xx - redirect
4xx - client error
5xx - server error
HTTP Post Request
HTTP Post Request
POST /api/set HTTP/1.1
Host: oneis.us
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X) Firefox/44.0
A...
HTTP Responses
HTTP/1.1 302 Found
Location: https://oneis.us/goaway
Date: Mon, 01 Feb 2016 18:02:39 GMT
Server: WEBrick/1....
So what the hell are JS and PHP?
PHP runs “server side” (read: on the server)
Never sent to you, generates the HTML
JS run...
JavaScript included in response
TL;DR
DNS Lookup
Sends request
Server gets reads or runs requested file
Server sends response back
Browser draws response ...
TL;DR
What didn’t we cover?
HTTPS
AJAX
Cookies
Caching
More learnins
You can watch this stuff IRL in your browser’s dev tools
Wikipedia’s HTTP page has some examples
Upcoming SlideShare
Loading in …5
×

How Web Pages Work

4,501 views

Published on

Senior Software Engineer, Andy Giannini discuses the process of how your URL address manifests into a web page.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

How Web Pages Work

  1. 1. How Web Pages Work and other ghost stories
  2. 2. Disclaimer no math no programming no problem
  3. 3. How do computers talk?
  4. 4. How do computers talk?
  5. 5. How do computers talk?
  6. 6. How do computers talk?
  7. 7. How do computers talk?
  8. 8. How do computers talk?
  9. 9. Great, so how do they become friends? Domain Name System DNS translates domains into something computers understand google.com means nothing 1.1.1.1 means something
  10. 10. Who do they talk to?
  11. 11. Who do they talk to? IP address gets traffic to the computer Ports get the traffic to the application ex. 1.1.1.1:80 ex. fakewebpage.com:8080
  12. 12. What do they talk about? Hyper Text Transfer Protocol (HTTP) Transfers HTML (Hyper Text Markup Language) Usually on port 80
  13. 13. HTTP Format Verb and info Headers, one per line [blank line] Optional body
  14. 14. HTTP Verbs GET POST The other guys: PUT / PATCH / DELETE / HEAD
  15. 15. HTTP Headers Host - name of the website we’re talking to User agent - browser version Cache - remember this, not gonna answer again Cookies - magic
  16. 16. HTTP GET Requests GET / HTTP/1.1 Host: oneis.us User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X) Firefox/44.0 Accept: text/html,application/xml Accept-Language: en-US,en,es-MX Accept-Encoding: gzip, deflate Cookie: _ga=GA1.2.229765080.1436819046
  17. 17. Request sent! Server gets request Forwards it to the web server program Web server gets the file requested Sends response with requested file contents
  18. 18. HTTP Responses HTTP/1.1 200 OK Content-Length: 1241 Date: Mon, 01 Feb 2016 17:54:16 GMT Content-Type: text/html;charset=utf-8 Server: WEBrick/1.3.1 (Ruby/1.8.7/2014-01-28) [HTML body that’s 1241 characters long]
  19. 19. HTML (and CSS and JS and images and…)
  20. 20. HTTP Get Requests GET /users.php?page=2 HTTP/1.1 Host: oneis.us User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X) Firefox/44.0 Accept: text/html,application/xml Accept-Language: en-US,en,es-MX Accept-Encoding: gzip, deflate Cookie: _ga=GA1.2.229765080.1436819046
  21. 21. HTTP Responses HTTP/1.1 404 Not Found Content-Length: 28 Date: Mon, 01 Feb 2016 17:58:02 GMT Content-Type: text/html;charset=utf-8 Server: WEBrick/1.3.1 (Ruby/1.8.7/2014-01-28) Sorry, that code is unknown.
  22. 22. HTTP Status Codes 1xx - info 2xx - success 3xx - redirect 4xx - client error 5xx - server error
  23. 23. HTTP Post Request
  24. 24. HTTP Post Request POST /api/set HTTP/1.1 Host: oneis.us User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X) Firefox/44.0 Accept: text/html,application/xml Accept-Language: en-US,en,es-MX api_key=lolidunno&submit=submit
  25. 25. HTTP Responses HTTP/1.1 302 Found Location: https://oneis.us/goaway Date: Mon, 01 Feb 2016 18:02:39 GMT Server: WEBrick/1.3.1 (Ruby/1.8.7/2014-01-28)
  26. 26. So what the hell are JS and PHP? PHP runs “server side” (read: on the server) Never sent to you, generates the HTML JS runs “client side” (read: in your browser) Included in HTTP response, manipulates HTML
  27. 27. JavaScript included in response
  28. 28. TL;DR DNS Lookup Sends request Server gets reads or runs requested file Server sends response back Browser draws response from HTML Browser requests any other needed files, runs JS
  29. 29. TL;DR
  30. 30. What didn’t we cover? HTTPS AJAX Cookies Caching
  31. 31. More learnins You can watch this stuff IRL in your browser’s dev tools Wikipedia’s HTTP page has some examples

×