More Related Content Similar to HTML5 and the dawn of rich mobile web applications pt 1 Similar to HTML5 and the dawn of rich mobile web applications pt 1 (20) More from James Pearce (13) 1. HTML5 and the dawn of rich
mobile web applications
@ jamespearce
4. Three Laws of Motion
(the universe works as we might expect it to)
6. Light Travels at a
Constant Speed
(the universe doesn’t work as we thought it would)
11. Mobile Context?
One Web?
Responsive Design?
Apps or Sites?
(an inability to answer these questions does
not constitute an excuse not to innovate)
14. @media screen and (max-width: 480px) {
#logo {
background-image: url(mobile.png);
}
}
15. Mobile devices are di erent
Telephone
Messaging
Camera
Compass
Mobile users are di erent
25. Single device Multi device
Sedentary user Mobile user
*
Declarative Imperative
Thin client Thick client
Documents Applications
* or supine, or sedentary, or passive, or...
27. HTML5 is a new version of HTML4,
XHTML1, and DOM Level 2 HTML
addressing many of the issues of
those specifications while at the
same time enhancing (X)HTML
to more adequately address Web
applications.
- WHATWG Wiki
41. WebFont Video Audio Graphics
Device Access
Camera CSS Styling & Layout Network
Location HTTP
JavaScript
Contacts AJAX
SMS Semantic HTML Events
Orientation Sockets
File Systems Workers &
Cross-App
Gyro Databases Parallel SSL
Messaging
App Caches Processing
(all the elements of a modern application platform)
42. The web is now as much
a stack
as it is a medium
45. MS
RIM
Symbian
Apple
Android
Top European Smartphone Platforms
July 2011, comScore MobiLens
46. .NET
J2ME
C++
Obj-C
Java
Native programming languages you’ll need
July 2011
47. IE
WebKit
WebKit
WebKit
WebKit
Browser platforms to target
July 2011
49. But at least we are using
one language,
one markup,
one style system
50. 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
51. Stay on top of diversity
Can I Use?
http://caniuse.com
Modernizr
http://modernizr.com
DeviceAtlas
http://deviceatlas.com
53. 100%
Support
Browsers Polyfills Frameworks
Capabilities & specifications
55. <!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile</title>
<script src="jq.js"></script><script src="jqm.js"></script>
<link rel="stylesheet" href="jqm.css" />
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Hello World</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Continents</li>
<li><a href="na.html">North America</a></li>
<li><a href="sa.html">South America</a></li>
<li><a href="eu.html">Europe</a></li>
</ul>
</div>
</div>
</body>
</html>
57. <!DOCTYPE html>
<html>
<head>
<title>Sencha Touch</title>
<script src="st.js"></script>
<link rel="stylesheet" href="st.css" />
<script type="text/javascript" charset="utf-8">
new Ext.Application({
launch: function() {
var continents = new Ext.data.Store({
model: Ext.regModel('', {fields: ['name', 'link']}),
data: [
{name: 'North America', link:'na'},
{name: 'South America', link:'sa'},
{name: 'Europe', link:'eu'}
]
});
new Ext.Panel({
fullscreen: true,
dockedItems: [{
xtype: 'toolbar', title: 'Hello World',
}],
items: [{
xtype: 'list', store: continents, itemTpl: '{name}'
}]
});
}
});
</script>
</head><body></body>
</html>
60. Evolving the web for mobile
Desktop
Switcher
HTML, CSS...
Mobile
Controllers
Models
61. Evolving the web for mobile
Desktop
Switchers
Mobile
REST
JSO on
Controllers N
ce
Models
62. The classic web stack
req/res
User interface Rendering
Business logic
Storage
63. A new web stack
User interface
sync
Security Business logic
Storage Storage
67. Views Views
Controllers
Models
Stores
Proxies
n
jso
70. Location Services
Adaptation Analytics
Web Fonts Data Sync
Video Serving Ad Serving
$
Image Serving Commerce
Network APIs
78. HTML5 apps are more
e cient to develop
(yes, in theory, but diversity remains)
80. 24 dev-months
for iOS
http://blog.cohen-rose.org/2011/10/over-air-2011-ft-web-app-weve-got.html
84. Camera WebFont Video Audio Graphics
HTTP
Location
CSS Styling & Layout AJAX
Contacts
Events
SMS JavaScript
Sockets
Orientation
Semantic HTML SSL
Gyro
File Systems Workers &
Cross-App
Databases Parallel
Messaging
App Caches Processing
85. WebView
Camera WebFont Video Audio Graphics
HTTP
Location
CSS Styling & Layout AJAX
Contacts
Events
SMS JavaScript
Sockets
Orientation
Semantic HTML SSL
Gyro
File Systems Workers &
Cross-App
Databases Parallel
Messaging
App Caches Processing
86. Native Wrapper
WebView
Camera WebFont Video Audio Graphics
HTTP
Location
CSS Styling & Layout AJAX
Contacts
Events
SMS JavaScript
Sockets
Orientation
Semantic HTML SSL
Gyro
File Systems Workers &
Cross-App
Databases Parallel
Messaging
App Caches Processing
