The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?!...
Transcript of The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?!...
![Page 1: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/1.jpg)
The Internet...How Does THAT work?!
Today's Topic: Viewing A Webpage
Optoro 2015
Brock [email protected]
![Page 2: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/2.jpg)
"Glossing over things"
This thing is glossySo that we can see a truthReflected in lies
![Page 3: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/3.jpg)
Brief highlightsof Web History
![Page 4: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/4.jpg)
FTP (1972)
Archie (1991)
![Page 5: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/5.jpg)
Gopher (1991)
![Page 6: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/6.jpg)
WorldWideWeb (1990)
![Page 7: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/7.jpg)
WorldWideWeb
![Page 8: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/8.jpg)
ViolaWWW
![Page 9: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/9.jpg)
Mosaic
![Page 10: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/10.jpg)
![Page 11: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/11.jpg)
"Worse is Better"(VHS vs Betamax)
Surviveable Chaos → Evolution
![Page 12: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/12.jpg)
Key elements of the Web Browser:
• Embed navigation into documents (hyperlinks)• Allow for experimental features (ignore stuff)• Separate content from style (css)• Provide client storage (cookies)• Allow for dynamic interaction (javascript)• Allow for dynamic server interaction (AJAX)
![Page 13: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/13.jpg)
Web Browser (aka Web Client)
• Download a document• Display ("render") the document• Execute the document (javascript)
![Page 14: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/14.jpg)
(that was the most important slide)
![Page 15: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/15.jpg)
Now the "details"
![Page 16: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/16.jpg)
You → Your Friend
You: "Hey! You should checkout optoro.com!"
Friend: "OK."
![Page 17: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/17.jpg)
Friend → Browser
Friend: "Uh... go to optoro.com" (in location)
Browser: "OK. Gimme a sec..."
![Page 18: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/18.jpg)
Browser → DNS Server
Request: "What is the IP address for optoro.com?"
Response: 23.20.80.43
![Page 19: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/19.jpg)
'host' demo
![Page 20: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/20.jpg)
Browser → 23.20.80.43 (aka optoro.com)
Request: "Give me /"
23.20.80.43: Gives file "<html><head>........."
![Page 21: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/21.jpg)
'curl' demo
![Page 22: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/22.jpg)
Browser starts "rendering"aka "drawing" on your screen.
![Page 23: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/23.jpg)
<h1>blah</h1>
Becomes a big header "blah"
![Page 24: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/24.jpg)
<p>I've got a lovely bunch of coconuts</p>
Becomes a paragraph
![Page 25: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/25.jpg)
Sometimes stuff wraps to fit,adjust for different fonts/sizes,margins get shifted, etc.
![Page 26: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/26.jpg)
This is very tedious work!
![Page 27: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/27.jpg)
Browser gets to: <img src='/assets/optoro-logo--grey.svg'>
or something like that.
![Page 28: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/28.jpg)
Now to fetch this image file from the server!
Browser → 23.20.80.43 (aka optoro.com)
Request: "Give me /assets/optoro-logo--grey.svg"
23.20.80.43: Gives file
![Page 29: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/29.jpg)
And so on, asking the server for any bitsneeded to render the site.
![Page 30: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/30.jpg)
Network Debugger Demo
![Page 31: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/31.jpg)
First bit of trickery:
Server-side dynamic content
![Page 32: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/32.jpg)
Next bit of trickery:
Client-side dynamic content
![Page 33: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/33.jpg)
In summary...
![Page 34: The Internet How Does THAT work?! Optoro How Webpages... · The Internet... How Does THAT work?! Today's Topic: Viewing A Webpage Optoro 2015 Brock Wilcox bwilcox@optoro.com "Glossing](https://reader035.fdocuments.in/reader035/viewer/2022081408/605c7b8f66bc805e5a229911/html5/thumbnails/34.jpg)
• Type in a location (aka URL, address, or website) -- Parts: protocol, server, path, params, "anchor"
• Translate server name → IP Address -- DNS
• Connect to server -- AKA "computer"
• Request document -- Just one to start with -- Might secretly be dynamically generated!
• Render document -- Document Object Model, CSS -- ... do more requests for pieces (images, css)
• Execute Javascript -- DYNAMIC!
• Background requests (AJAX/XHR) -- MOAR DYNAMIC!!!