Tomorrow's profitability is created by today's technology ...
Building tomorrow's web with today's tools
-
Upload
james-pearce -
Category
Technology
-
view
2.002 -
download
7
description
Transcript of Building tomorrow's web with today's tools
![Page 1: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/1.jpg)
![Page 2: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/2.jpg)
James Pearce Director, Developer Relations @ jamespearce [email protected]
![Page 3: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/3.jpg)
BuildingTomorrow’s Web
With Today’s Tools
![Page 4: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/4.jpg)
1941
![Page 5: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/5.jpg)
An Experience Designed for the Medium
![Page 6: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/6.jpg)
1995
![Page 7: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/7.jpg)
An Experience Designed for the Medium
![Page 8: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/8.jpg)
2007
![Page 9: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/9.jpg)
An Experience Designed for the Medium
![Page 10: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/10.jpg)
History has taught usto embrace change
![Page 11: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/11.jpg)
History has taught usto question assumptions
![Page 12: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/12.jpg)
History has taught usto have high expectations
![Page 13: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/13.jpg)
How Mobileis Changing The Web
How The Webis Changing Mobile
![Page 14: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/14.jpg)
2008
We must have aniPhone App!
![Page 15: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/15.jpg)
2009
We must have anAndroid App!
![Page 16: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/16.jpg)
2010
We must have aniPad App!
![Page 17: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/17.jpg)
2011
We must have a...
![Page 18: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/18.jpg)
![Page 19: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/19.jpg)
omfg
![Page 20: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/20.jpg)
![Page 21: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/21.jpg)
![Page 22: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/22.jpg)
PalmMicrosoft
Apple
Android
RIM RIMAndroidAppleMicrosoftPalm
Top U.S. Smartphone Platforms,3 Month Average Ending December 2010comScore MobiLens 2010
Java
J2ME
Air
C++
C#
Obj-C
JS
![Page 23: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/23.jpg)
Cross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood technologies
The Mobile Web
But what does this word even mean?
![Page 24: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/24.jpg)
A perfect storm
![Page 25: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/25.jpg)
ApplicationsDocuments
Programmatic DOMDeclarative HTML
JSON APIsThemes & templates
Arguments & signalsURLs
SynchronizationRequest/Response
Thick clientThin client
![Page 26: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/26.jpg)
![Page 27: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/27.jpg)
A New Web Stack
Worker Parallel
Processing
File SystemsDBs
App Cache
JavaScript
Semantic HTML
CSS Styling & Layout
WebFonts Video Audio Graphics
x-AppMessaging
Device Access
Camera
Location
Contacts
SMS
Orientation
Gyro
Server & Services
HTTP
AJAX
Events
Sockets
SSL
More...
![Page 28: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/28.jpg)
![Page 29: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/29.jpg)
Web technologiesare a
viable alternativeto native development
![Page 30: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/30.jpg)
Apps vs Web technologybuilt with
![Page 31: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/31.jpg)
ApplicationsDocuments
Programmatic DOMDeclarative HTML
JSON APIsThemes & templates
Arguments & signalsURLs
SynchronizationRequest/Response
Thick clientThin client
Mobile userSedentary user
This is what it means
![Page 32: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/32.jpg)
Mobile isan adjective not a noun
![Page 33: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/33.jpg)
@media screen and (max-w
idth: 480px) {
#logo {
background-image: ur
l(mobile.png);
}}
![Page 34: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/34.jpg)
Mobile devices are di!erent
Phone
GPS device
Camera
Music player
![Page 35: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/35.jpg)
Content-Type: applicatio
n/msword
![Page 36: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/36.jpg)
The Mobile Webis not a
320px Web
![Page 37: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/37.jpg)
![Page 38: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/38.jpg)
![Page 39: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/39.jpg)
![Page 40: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/40.jpg)
How did those assortedtank tops work out for you?
![Page 41: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/41.jpg)
Techniques
![Page 42: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/42.jpg)
adaptationad·ap·ta·tion
noun /ˌadapˈtāSHəәn/ /ˌadəәp-/
1. The action or process of adapting
or being adapted
2. A movie, television drama, or stage play
that has been adapted from a written work
3. A change by which an organism or species
becomes better suited to its environment
![Page 43: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/43.jpg)
Mobile adaptation
Presentational
Prioritizational
Permutational
![Page 44: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/44.jpg)
Presentational adaptation
Layout
![Page 45: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/45.jpg)
Prioritizational adaptation
Navigation and IA
![Page 46: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/46.jpg)
Permutational adaptation
Functionality
![Page 47: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/47.jpg)
The topology of adaptation
Client Proxy Server
![Page 48: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/48.jpg)
Permutational
Prioritizational
Presentational
Client Proxy Server
![Page 49: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/49.jpg)
‘Passive’ client adaptation
<a href="tel:/
/555">555</a>
![Page 50: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/50.jpg)
Proxy adaptation
There’s a bad sort
There’s a good sort
![Page 51: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/51.jpg)
HTML, CSS...
Models
Controllers
Views
Server adaptation
![Page 52: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/52.jpg)
Models
Controllers
Mobile
DesktopSw
itch
er HTML, CSS...
Server adaptation
![Page 53: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/53.jpg)
WordPress Mobile Packhttp://wordpress.org/extend/plugins/wordpress-mobile-pack
Device detection with plugins
WPTouchhttp://wordpress.org/extend/plugins/wptouch
Drupal Mobile Pluginhttp://drupal.org/project/mobileplugin
![Page 54: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/54.jpg)
Brand consistency
![Page 55: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/55.jpg)
if (isset($_SERVER['HTTP_X_WAP_PROFILE']) { ...
if (in_array(substr($user_agent, 0, 4), $prefixes)) { ...
if (strpos($accept, 'wap') !== false) { ...
if (preg_match("/(" . $keywords . ")/i", $user_agent)) { ...
https://github.com/jamesgpearce/mobiledetect
Device detection with PHP
![Page 56: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/56.jpg)
class ApplicationController < ActionController::Base has_mobile_fuend
*.mobile.erb
is_mobile_device?in_mobile_view?
https://github.com/brendanlim/mobile-fu
Device detection with Rails
![Page 57: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/57.jpg)
var Connect = require("connect"), Monomi = require("monomi");
Connect.createServer(
Monomi.detectBrowserType(),
function(request, response, next) { response.writeHead(200, {'Content-Type': 'text/plain'}); response.write('Hello World: '); response.end('you are using a ' + request.monomi.browserType); }
).listen(8080);
https://github.com/jamesgpearce/monomi
Device detection with node.js
![Page 58: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/58.jpg)
Detection & user choice“Switch to our desktop site”
![Page 59: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/59.jpg)
![Page 60: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/60.jpg)
Thematic consistency
w3c-speak
http://mysite.com/posts/123
http://m.mysite.com/posts/123
![Page 61: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/61.jpg)
Using di!erent URLscan preserve
the integrity of‘One Web’
![Page 62: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/62.jpg)
Can I Use?http://caniuse.com
Modernizrhttp://modernizr.com
DeviceAtlashttp://deviceatlas.com
Device diversity
![Page 63: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/63.jpg)
Permutational
Prioritizational
Presentational
Client Proxy Server
Passive client adaptation
Responsive Web Design
Proxy adaptation
Device detection
Mobile site
![Page 64: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/64.jpg)
Permutational
Prioritizational
Presentational
Client Proxy Server
Passive client adaptation
Responsive Web Design
Proxy adaptation
Device detection
Mobile site
![Page 65: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/65.jpg)
A dedicated mobile app
JSON
Models
Controllers
Mobile
DesktopSw
itch
ers
RESTonce
![Page 66: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/66.jpg)
The stack of the present
Storage
Business logic
User interfacereq/res
Rendering
![Page 67: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/67.jpg)
The stack of the future
Storage
Security Business logic
User interfacesync
Storage
The return of the thick client
![Page 68: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/68.jpg)
![Page 69: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/69.jpg)
Do we have time for some code?
![Page 70: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/70.jpg)
Progressive enhancement
![Page 71: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/71.jpg)
JSCS
S
apppr
ogre
ssiv
een
hanc
emen
t
HTM
L
doc
assu
mpt
ion
vs
HTM
LJS
CSS
app
assu
mpt
ion
+/- featuredetection
![Page 72: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/72.jpg)
Thick client, thin server
The shortfall in the cloud
![Page 73: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/73.jpg)
http://mysite.com/myimage.png
http://i.tinysrc.mobi/http://mysite.com/myimage.png
![Page 74: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/74.jpg)
Permutational
Prioritizational
Presentational
Client Proxy Server
Mobile app
Passive client adaptation
Responsive Web Design
Proxy adaptation
Device detection
Mobile site
Cloud support
![Page 75: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/75.jpg)
![Page 76: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/76.jpg)
Mobile isan adjective not a noun
![Page 77: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/77.jpg)
The Mobile Webis not a
320px Web
![Page 78: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/78.jpg)
History has taught usto embrace change
![Page 79: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/79.jpg)
History has taught usto question assumptions
![Page 80: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/80.jpg)
History has taught usto have high expectations
![Page 81: Building tomorrow's web with today's tools](https://reader038.fdocuments.in/reader038/viewer/2022103110/547d6592b4af9fa0238b467f/html5/thumbnails/81.jpg)
James Pearce Director, Developer Relations @ jamespearce [email protected]