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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Mobile Web Development with HTML5

Similar a Mobile Web Development with HTML5 (20)

Último

Último (20)

Mobile Web Development with HTML5