Mobile Web Development with HTML5

Mobile Web Development with HTML5

Roy Clarkson and Josh Long
SpringSource, a division of VMware

@royclarkson & @starbuxman

© 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.

Agenda

• Introduction
• Deﬁne 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

Support across browsers
• Compatibility tables for support of HTML5, CSS3, SVG and more in desktop
and mobile browsers. -caniuse.com

8

Support across browsers
• Compatibility tables for support of HTML5, CSS3, SVG and more in desktop
and mobile browsers. -caniuse.com

9

Hardware Concerns

• Screen resolution
• Network connectivity
• Hardware acceleration
• Cache size
• Processor speed
• Memory

10

Simulators and Emulators

11


12


13


14

HTML5

Semantics
Ofﬂine Storage
Device Access
Connectivity
Multimedia
3D, Graphics & Effects
Performance & Integration
CSS3 Styling

15

Semantics

• Rich set of tags
• Microdata
• Microformats

16

Rich set of Tags

<!DOCTYPE html>
<html>
<body>
<header>HEADER</header>
<section>
<hgroup>
<h1>title</h1>
</hgroup>
<article>some text</article>
</section>
<footer>FOOTER</footer>
</body>
</html>

17

Ofﬂine Storage

• Application Cache
• Local Storage
• Web SQL
• Online/Ofﬂine Events

19

Application Cache

• Specify a cache

<html manifest="myCustomCache.appcache">
...
</html>

• List out cacheable assets
CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js

21

window.sessionStorage and window.localStorage
• 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
22

Online and Ofﬂine Events
document.body.addEventListener("ofﬂine", function () {
...
       }, false);

document.body.addEventListener("online", function () {
...
       }, false);

23

Online and Ofﬂine Events (jQuery)

$(window).bind("ofﬂine", function() {

...

});

24

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);

}) ;

25

Multimedia

• Audio
• Video

26

Audio Tags

<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 WAV
Android X X
Opera Mobile X
Firefox Mobile X X
iOS Safari X X

27

Video Tags

<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>

Browser MP4/H.264 3GP/MPEG4
iOS X
Android X X
Blackberry X X
Older devices X

28

Device Access
• Geolocation*
• Camera
• Microphone
• Contacts

29

Geolocation

navigator.geolocation.getCurrentPosition(
function(position){

var longitude = position.coords.longitude,
latitude = position.coords.latitude ;

...

}, errorHandler);

32

(PhoneGap) Camera API

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 });

33

(PhoneGap) Microphone API
// capture callback
var 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 ﬁle
}
};

// capture error callback
var captureError = function(error) {
navigator.notiﬁcation.alert('Error code: ' + error.code, null, 'Capture Error');
};

// start audio capture
navigator.device.capture.captureAudio(captureSuccess, captureError, {limit:
2});

34

(PhoneGap) Find Contact API
function onSuccess(contacts) {
alert('Found ' + contacts.length + ' contacts.');
};

function onError(contactError) {
alert('onError!');
};

// find all contacts with 'Bob' in any name field
var options = new ContactFindOptions();
options.filter="Bob";
var fields = ["displayName", "name"];
navigator.contacts.find(fields, onSuccess, onError, options);

35

Connectivity

• Web Sockets *
• Server-Sent Events (don’t bother)

36

Web Sockets

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...");
};
}

37

3D, Graphics, & Effects

• Canvas
• CSS3 3D features
• WebGL *
• SVG *

38

Performance & Integration

• XMLHttpRequest 2

40

Styling

• CSS3
• 2D/3D Transformations
• Transitions
• WebFonts

41

CSS3 Media Queries

@media only screen and (max-device-width: 480px) {
...

div#header h1 {
font-size: 140%;
}

...
}

42

CSS3 Transformations

#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;
}

44

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

Mobile Web Development with HTML5

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Mobile Web Development with HTML5

Similar to Mobile Web Development with HTML5 (20)

Recently uploaded

Recently uploaded (20)

Mobile Web Development with HTML5