Post on 16-Nov-2014
description
transcript
HI.
TEXT
FROM ZERO
1. Launch Without Code
2. Working with a Dev
3. How the Web Works
THREE SESSIONS
HOW THE
WEB WORKS
CSSHTML Javascript
AJAX
ServerRuby on Rails
API
SQLResponsive
Cloud
Mobile Frontend Client
STEAKHOUSE
OR GAYBAR
.COM
SCREENSHOT
THE
HARDEST
CONCEPT
Gimme info!
Okay!
Gimme info!
Okay!
Gimme info!
Okay!
Gimme info!
Okay!
Gimme info!
Okay!
HTTP
Request
Response
Details about what you want
What you asked for
[wwweb map]
STATIC PAGE
df
HTML
Gimme a page!
Html document!
<html>This is an html page
</html>
<html><p>Welcome to Apple</p>
</html>
<html><p>This is an html page</p><img src=”cat.jpg” />
</html>
HTML is content without style or action
CSS
Gimme a page!
Html document!Here’s CSS too!
body {background-color:#d0e4fe;
}h1 {
color:orange;text-align:center;
}p {
font-family:"Times New Roman";font-size:20px;
}
CSS is style
JAVASCRIPT
Gimme a page!
Html document!Here’s CSS too!
And Javascript!
Javascript is interactivity and action(beyond links and forms)
All together:
www.airbnb.com
Text
DYNAMIC SITE
Different experience for different people
df
df
df
Gimme a page!
Code
Database
Here’s your page
I’m Tal! Gimme a page!
Code
Database
Here’s your page, Tal!
MOBILE APP
Gimme data!
Here’s data
Content, Style, & Interactions
Pre- downloaded
Gimme data!
Here’s data
Content, Style, & Interactions
Pre- downloaded
AJAX
Content, Style, & Interactions Downloaded as
a page Do something small!
Here’s a small change!
Facebook mobile app
vs
Facebook mobile website
API
df
df
df
“Frontend” = Client
“Backend” = Server
THINGS THEY CAN DO WITHOUT A SERVER
CLIENTS
RESPONSIVE WEB
Adapts to screen size
http://strikingly.com/
http://amazon.com
All done with CSS
CLIENT SIDE FRAMEWORKS
1. JQuery
2. BackboneJS, AngularJS
CLIENT SIDE LIBRARIES
1. Bootstrap
2. JQuery UI
MOBILE CROSS-PLATFORM
1. PhoneGap
2. Appcelerator Titanium
WHAT HAPPENS INSIDE
SERVERS
RESPOND TO REQUESTS
Gimme a page!
Code
Database
Here’s your page
INSIDE
1. Process a request
2. Gather data from database, do some logic
3. Prepare a response (HTML document, data snippet)
INSIDE
This can get really messy
FRAMEWORKS
1. Model, View, Controller
2. Any language
3. Opinionated framework that saves time
FRAMEWORKS
SAME FROM THE OUTSIDE
INFRASTRUCTURE PROGRESS
1. Frequently same infrastructure pattern
2. Focus on your app
3. Infrastructure in one click (“Cloud”)
INFRASTRUCTURE AS A SERVICE
CODE PROGRESS
1. Frequently same backend pattern
2. Focus on your client
3. Backend in one click
BACKEND AS A SERVICE
SCREENSHOT
LEARN TO CODE
• Fun project
• Mentor/Guided program
• Appreciation, communication
Ask anything
• Browser extensions?
• CMS?
• Console?
• HTML5/CSS3?
More