13. Palm
Microsoft
RIM RIM
Android
Apple
Apple Microsoft
Palm
Android Top U.S. Smartphone Platforms,
3 Month Average Ending December 2010
comScore MobiLens 2010
14. JS
C# Palm J2ME
Microsoft
RIM RIM
Android
Apple
Apple Air Microsoft
Palm
Obj-C
Java
Android
C++
Top U.S. Smartphone Platforms,
3 Month Average Ending December 2010
comScore MobiLens 2010
15. J2ME
C# RIM C/C++
Microsoft Nokia
Python Apple
Java Android
Android Nokia Microsoft
C++ RIM
Lua
Obj-C
Apple ... Top EU5 Smartphone Platforms,
3 Month Average Ending December 2010
comScore MobiLens 2010
16. J2ME
C# RIM C/C++
Microsoft Nokia
Python Apple
Java Android
Android Nokia Microsoft
C++ RIM
Lua
Obj-C
Apple ... Top EU5 Smartphone Platforms,
3 Month Average Ending December 2010
comScore MobiLens 2010
http://www.cloudfour.com/a-comprehensive-guide-to-mobile-statistics/
33. The Web is Evolving...
Documents Applications
Declarative HTML Programmatic DOM
34. The Web is Evolving...
Documents Applications
Declarative HTML Programmatic DOM
Templates APIs
35. The Web is Evolving...
Documents Applications
Declarative HTML Programmatic DOM
Templates APIs
URLs Arguments
36. The Web is Evolving...
Documents Applications
Declarative HTML Programmatic DOM
Templates APIs
URLs Arguments
Request/Response Synchronization
37. The Web is Evolving...
Documents Applications
Declarative HTML Programmatic DOM
Templates APIs
URLs Arguments
Request/Response Synchronization
Thin client Thick client
38.
39. "If you write Web-based applications, I
would be interested in hearing about what
your needs are. Please let me know"
Ian Hickson 2004
WhatWG “Founding Post”
43. A New Mobile App
Stack
CSS Styling & Layout
Javascript
Semantic HTML
44. A New Mobile App
Stack
WebFont Video Audio Graphics
CSS Styling & Layout
Javascript
Semantic HTML
45. A New Mobile App
Stack
WebFont Video Audio Graphics
CSS Styling & Layout
Javascript
Semantic HTML
File Systems
DBs
App Cache
46. A New Mobile App
Stack
WebFont Video Audio Graphics
CSS Styling & Layout
Javascript
Semantic HTML
File Systems Worker
DBs Parallel
App Cache Processing
47. A New Mobile App
Stack
WebFont Video Audio Graphics
CSS Styling & Layout
Javascript
Semantic HTML
File Systems Worker
x-App
DBs Parallel
Messaging
App Cache Processing
48. A New Mobile App
Stack
WebFont Video Audio Graphics
Device Access
Camera CSS Styling & Layout
Location
Javascript
Contacts
SMS Semantic HTML
Orientation
File Systems Worker
x-App
Gyro DBs Parallel
Messaging
App Cache Processing
49. A New Mobile App
Stack
WebFont Video Audio Graphics
Device Access Server &
Services
Camera CSS Styling & Layout HTTP
Location AJAX
Javascript
Contacts Events
SMS Semantic HTML Sockets
Orientation SSL
File Systems Worker
x-App
Gyro DBs Parallel More...
Messaging
App Cache Processing
50. Rich Media & Styling
Full Resource Access
Parallel Processing
Inter-App
Communication Full
Offline Capability
51. Rich Media & Styling R M
F O
A T
Full Resource Access P L
A PP
Parallel ProcessingRN
D E
Inter-App
M O
T E
Communication Full
P LE
M
O Offline Capability
C
66. HTML5 Support: Edge IE 10 PR Chrome 10 Safari 5 Firefox 4 iOS4.31 Playbook Honeycomb
@font-face
Canvas
HTML5 Audio & Video
rgba(), hsla()
border-image:
border-radius:
box-shadow:
text-shadow:
opacity:
Multiple backgrounds
Flexible Box Model
CSS Animations
CSS Columns
CSS Gradients
CSS Reflections
CSS 2D Transforms
CSS 3D Transforms
CSS Transitions
Geolocation API
local/sessionStorage
SVG/SVG Clipping
SMIL
Inline SVG
Drag and Drop
hashchange
X-window Messaging
History Management
applicationCache
Web Sockets
Web Workers
Web SQL Database
WebGL
IndexedDB
67. Stay on top of diversity
Can I Use?
http://caniuse.com
Modernizr
http://modernizr.com
DeviceAtlas
http://deviceatlas.com
Wikipedia
Comparison of Layout
Engines
69. Why use a framework?
Provide user interface components
Smooth browser inconsistencies
Mimic native or server paradigms
Create consistent application
architectures
...and more
70. Strokes for folks
Sites & Documents Applications
Declarative HTML Programmatic DOM
Templates APIs
URLs Arguments
Request/Response Synchronization
Thin client Thick client
71. Strokes for folks
Sites & Documents Applications
Declarative HTML Programmatic DOM
Templates APIs
URLs Arguments
Request/Response Synchronization
Thin client Thick client
72. jQTouch
UI layer on top of jQuery
Declarative HTML
Library progressively
enhances
Browsers:
iOS (iPhone/iPod)
Android
BlackBerry v6
Most WebKit-based
browsers
http://jQTouch.com
111. Full API list:
Accelerometer File
Camera Geolocation
Compass Media
Contacts Network
Device Notification
Events Storage
http://docs.phonegap.com
112. Full API list:
Accelerometer File
Camera Geolocation
Compass Media
Contacts Network
Device Notification
Events Storage
http://docs.phonegap.com
http://www.sencha.com/learn/
Tutorial:Sencha_Touch_PhoneGap
115. Doing mobile right
Everyone loves apps - but native diversity sucks
This is the year of the mobile web - but caveats
apply
116. Doing mobile right
Everyone loves apps - but native diversity sucks
This is the year of the mobile web - but caveats
apply
HTML5 makes web tech a viable alternative to native
apps