Post on 13-Jan-2015
description
© 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
Roy Clarkson and Josh LongSpringSource, a division of VMware
@royclarkson & @starbuxman
Mobile Web Development with HTML5
Agenda
• Introduction• Define the Problem• Mobile Browsers• Hardware Concerns• Simulators and Emulators• HTML5• JavaScript Frameworks
2
Introduction
The mobile web refers to the use of web sites or web based applications by non-traditional devices or appliances that may not have the same capabilities as a modern desktop browser.
3
What problem are we trying to solve?
• Mobile devices have become ubiquitous in our every day lives.
• Many people are spending more time on mobile devices than on traditional computers.
• How do we present our web sites in a manner that is accessible to as many of these different devices as possible?
4
What is the solution?
• Most HTML5 features are available on all modern smart phones and tablet devices.
5
Why does it matter?
• More people are consuming web sites through their mobile devices than through traditional desktop browsers
6
Mobile Browsers
7
Support across browsers
8
• Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers. -caniuse.com
Support across browsers
9
• Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers. -caniuse.com
Hardware Concerns
• Screen resolution• Network connectivity• Hardware acceleration• Cache size• Processor speed• Memory
10
Simulators and Emulators
11
Simulators and Emulators
12
Simulators and Emulators
13
Simulators and Emulators
14
HTML5
SemanticsOffline StorageDevice AccessConnectivityMultimedia3D, Graphics & EffectsPerformance & IntegrationCSS3 Styling
15
Semantics
• Rich set of tags• Microdata• Microformats
16
Rich set of Tags
17
<!DOCTYPE html><html><body> <header>HEADER</header> <section> <hgroup> <h1>title</h1> </hgroup> <article>some text</article> </section> <footer>FOOTER</footer></body></html>
18
Microformats
Offline Storage
• Application Cache• Local Storage• Web SQL• Online/Offline Events
19
Application Cache
20
Application Cache
21
• Specify a cache
• List out cacheable assets
<html manifest="myCustomCache.appcache"> ...</html>
CACHE MANIFESTindex.htmlstylesheet.cssimages/logo.pngscripts/main.js
window.sessionStorage and window.localStorage
22
• setItem(string name, string value) add or update a value in the store
• getItem(string name)get a named value from the store
• removeItem(string name) remove a named value from the store
• length number of values stored
• key(long index) name of the key at the index
• clear() clear the store
Online and Offline Events
23
document.body.addEventListener("offline", function () { ... }, false);
document.body.addEventListener("online", function () { ... }, false);
Online and Offline Events (jQuery)
24
$(window).bind("offline", function() {
...
});
25
Web SQL
var db = window.openDatabase( "Spring Test", "1.0", "HTML5 Database API example", 200000);
db.transaction(function (transaction) { var sql = ... ; transaction.executeSql( sql , [], nullDataHandler, errorHandler);
}) ;
Multimedia
• Audio• Video
26
Audio Tags
27
<audio controls preload="auto" autobuffer> <source src="le_long_de_la_route.mp3" /> <source src="le_long_de_la_route.ogg" /></audio>
<audio controls preload="auto" autobuffer> <source src="le_long_de_la_route.mp3" /> <source src="le_long_de_la_route.ogg" /></audio>
<audio controls preload="auto" autobuffer> <source src="le_long_de_la_route.mp3" /> <source src="le_long_de_la_route.ogg" /></audio>
Browser Ogg Vorbis MP3 WAVAndroid X XOpera Mobile XFirefox Mobile X XiOS Safari X X
Video Tags
28
<audio controls preload="auto" autobuffer> <source src="le_long_de_la_route.mp3" /> <source src="le_long_de_la_route.ogg" /></audio>
<audio controls preload="auto" autobuffer> <source src="le_long_de_la_route.mp3" /> <source src="le_long_de_la_route.ogg" /></audio>
Browser MP4/H.264 3GP/MPEG4iOS XAndroid X XBlackberry X XOlder devices X
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> Your browser does not support the video tag.</video>
Device Access
• Geolocation*• Camera• Microphone• Contacts
29
Geolocation
30
Geolocation
31
Geolocation
32
navigator.geolocation.getCurrentPosition( function(position){
var longitude = position.coords.longitude, latitude = position.coords.latitude ; ...
}, errorHandler);
(PhoneGap) Camera API
33
function onSuccess(imageURI) { var image = document.getElementById('myImage'); image.src = imageURI;}
function onFail(message) { alert('Failed because: ' + message);}
navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI });
(PhoneGap) Microphone API
34
// capture callbackvar captureSuccess = function(mediaFiles) { var i, path, len; for (i = 0, len = mediaFiles.length; i < len; i += 1) { path = mediaFiles[i].fullPath; // do something interesting with the file }};
// capture error callbackvar captureError = function(error) { navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');};
// start audio capturenavigator.device.capture.captureAudio(captureSuccess, captureError, {limit:2});
(PhoneGap) Find Contact API
35
function onSuccess(contacts) { alert('Found ' + contacts.length + ' contacts.');};
function onError(contactError) { alert('onError!');};
// find all contacts with 'Bob' in any name fieldvar options = new ContactFindOptions();options.filter="Bob"; var fields = ["displayName", "name"];navigator.contacts.find(fields, onSuccess, onError, options);
Connectivity
• Web Sockets *• Server-Sent Events (don’t bother)
36
Web Sockets
37
if ("WebSocket" in window) {
var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function() { ws.send("Message to send"); };
ws.onmessage = function (evt) { var receivedMessage = evt.data; }; ws.onclose = function(){ alert("Connection is closed..."); }; }
3D, Graphics, & Effects
• Canvas• CSS3 3D features• WebGL *• SVG *
38
Canvas
39
Performance & Integration
• XMLHttpRequest 2
40
Styling
• CSS3• 2D/3D Transformations• Transitions• WebFonts
41
CSS3 Media Queries
42
@media only screen and (max-device-width: 480px) {...
div#header h1 { font-size: 140%; }
...}
CSS3 Transformations
43
CSS3 Transformations
44
#id_of_element { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}
JavaScript Frameworks
• jQuery Mobile• Sencha Touch• Jo• jQTouch• xui• Lawnchair• EmbedJS
45
jQuery Mobile
• Touch-optimized web framework for smart phones and tablets
• Built on jQuery• Supports iOS, Android, Blackberry, Windows Phone,
webOS, symbian, bada, and MeeGo• 1.0 RC1 released September 29• jquerymobile.com
46
Sencha Touch
• HTML5 Mobile Web App Framework• Supports iPhone, Android, and Blackberry• Version 1.1.1 released October 12• 2.0.0 Preview Release 1 released on October 11• sencha.com/products/touch
47
Jo
• Designed for apps, not web sites.• Supports iOS, Android, webOS, Blackberry, Chrome OS• Version 0.4.1
48
Additional Resources
• http://www.w3.org/Mobile• http://www.html5rocks.com• http://www.mobilexweb.com/emulators
49
© 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
Q&A
50