how the web works
DESCRIPTION
TRANSCRIPT
![Page 1: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/1.jpg)
HI.
![Page 2: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/2.jpg)
TEXT
![Page 3: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/3.jpg)
![Page 4: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/4.jpg)
FROM ZERO
![Page 5: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/5.jpg)
1. Launch Without Code
2. Working with a Dev
3. How the Web Works
THREE SESSIONS
![Page 6: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/6.jpg)
HOW THE
WEB WORKS
![Page 7: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/7.jpg)
CSSHTML Javascript
AJAX
ServerRuby on Rails
API
SQLResponsive
Cloud
Mobile Frontend Client
![Page 8: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/8.jpg)
STEAKHOUSE
OR GAYBAR
.COM
![Page 9: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/9.jpg)
SCREENSHOT
![Page 10: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/10.jpg)
THE
HARDEST
CONCEPT
![Page 11: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/11.jpg)
Gimme info!
Okay!
![Page 12: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/12.jpg)
Gimme info!
Okay!
![Page 13: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/13.jpg)
Gimme info!
Okay!
![Page 14: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/14.jpg)
Gimme info!
Okay!
![Page 15: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/15.jpg)
Gimme info!
Okay!
![Page 16: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/16.jpg)
![Page 17: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/17.jpg)
HTTP
![Page 18: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/18.jpg)
Request
Response
![Page 19: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/19.jpg)
Details about what you want
What you asked for
![Page 20: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/20.jpg)
[wwweb map]
![Page 21: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/21.jpg)
![Page 22: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/22.jpg)
STATIC PAGE
![Page 23: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/23.jpg)
df
![Page 24: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/24.jpg)
HTML
![Page 25: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/25.jpg)
Gimme a page!
Html document!
![Page 26: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/26.jpg)
<html>This is an html page
</html>
![Page 27: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/27.jpg)
<html><p>Welcome to Apple</p>
</html>
![Page 28: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/28.jpg)
<html><p>This is an html page</p><img src=”cat.jpg” />
</html>
![Page 29: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/29.jpg)
HTML is content without style or action
![Page 30: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/30.jpg)
CSS
![Page 31: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/31.jpg)
Gimme a page!
Html document!Here’s CSS too!
![Page 32: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/32.jpg)
body {background-color:#d0e4fe;
}h1 {
color:orange;text-align:center;
}p {
font-family:"Times New Roman";font-size:20px;
}
![Page 33: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/33.jpg)
CSS is style
![Page 34: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/34.jpg)
JAVASCRIPT
![Page 35: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/35.jpg)
Gimme a page!
Html document!Here’s CSS too!
And Javascript!
![Page 36: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/36.jpg)
Javascript is interactivity and action(beyond links and forms)
![Page 37: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/37.jpg)
All together:
www.airbnb.com
![Page 38: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/38.jpg)
Text
![Page 39: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/39.jpg)
DYNAMIC SITE
![Page 40: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/40.jpg)
Different experience for different people
![Page 41: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/41.jpg)
df
![Page 42: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/42.jpg)
df
![Page 43: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/43.jpg)
df
![Page 44: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/44.jpg)
Gimme a page!
Code
Database
Here’s your page
![Page 45: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/45.jpg)
I’m Tal! Gimme a page!
Code
Database
Here’s your page, Tal!
![Page 46: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/46.jpg)
MOBILE APP
![Page 47: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/47.jpg)
Gimme data!
Here’s data
Content, Style, & Interactions
Pre- downloaded
![Page 48: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/48.jpg)
Gimme data!
Here’s data
Content, Style, & Interactions
Pre- downloaded
![Page 49: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/49.jpg)
AJAX
![Page 50: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/50.jpg)
![Page 51: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/51.jpg)
![Page 52: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/52.jpg)
![Page 53: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/53.jpg)
Content, Style, & Interactions Downloaded as
a page Do something small!
Here’s a small change!
![Page 54: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/54.jpg)
Facebook mobile app
vs
Facebook mobile website
![Page 55: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/55.jpg)
API
![Page 56: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/56.jpg)
![Page 57: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/57.jpg)
![Page 58: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/58.jpg)
![Page 59: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/59.jpg)
![Page 61: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/61.jpg)
df
![Page 62: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/62.jpg)
df
![Page 63: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/63.jpg)
df
![Page 64: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/64.jpg)
“Frontend” = Client
“Backend” = Server
![Page 65: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/65.jpg)
THINGS THEY CAN DO WITHOUT A SERVER
CLIENTS
![Page 66: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/66.jpg)
RESPONSIVE WEB
Adapts to screen size
![Page 67: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/67.jpg)
![Page 68: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/68.jpg)
![Page 69: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/69.jpg)
![Page 70: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/70.jpg)
http://strikingly.com/
http://amazon.com
All done with CSS
![Page 71: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/71.jpg)
CLIENT SIDE FRAMEWORKS
1. JQuery
2. BackboneJS, AngularJS
![Page 72: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/72.jpg)
CLIENT SIDE LIBRARIES
1. Bootstrap
2. JQuery UI
![Page 73: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/73.jpg)
MOBILE CROSS-PLATFORM
1. PhoneGap
2. Appcelerator Titanium
![Page 74: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/74.jpg)
WHAT HAPPENS INSIDE
SERVERS
![Page 75: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/75.jpg)
RESPOND TO REQUESTS
![Page 76: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/76.jpg)
Gimme a page!
Code
Database
Here’s your page
![Page 77: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/77.jpg)
INSIDE
1. Process a request
2. Gather data from database, do some logic
3. Prepare a response (HTML document, data snippet)
![Page 78: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/78.jpg)
INSIDE
This can get really messy
![Page 79: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/79.jpg)
FRAMEWORKS
1. Model, View, Controller
2. Any language
3. Opinionated framework that saves time
![Page 80: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/80.jpg)
FRAMEWORKS
![Page 81: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/81.jpg)
SAME FROM THE OUTSIDE
![Page 82: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/82.jpg)
INFRASTRUCTURE PROGRESS
1. Frequently same infrastructure pattern
2. Focus on your app
3. Infrastructure in one click (“Cloud”)
![Page 83: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/83.jpg)
INFRASTRUCTURE AS A SERVICE
![Page 84: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/84.jpg)
CODE PROGRESS
1. Frequently same backend pattern
2. Focus on your client
3. Backend in one click
![Page 85: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/85.jpg)
BACKEND AS A SERVICE
![Page 86: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/86.jpg)
SCREENSHOT
![Page 87: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/87.jpg)
LEARN TO CODE
• Fun project
• Mentor/Guided program
• Appreciation, communication
![Page 88: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/88.jpg)
![Page 89: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/89.jpg)
Ask anything
![Page 90: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/90.jpg)
![Page 91: How the web works](https://reader038.vdocuments.us/reader038/viewer/2022110114/5468d081af7959a75e8b5e79/html5/thumbnails/91.jpg)
• Browser extensions?
• CMS?
• Console?
• HTML5/CSS3?
More