2. Agenda
• Introduction
• Define the Problem
• Mobile Browsers
• Hardware Concerns
• Simulators and Emulators
• HTML5
• JavaScript Frameworks
2
3. 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
4. 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
5. What is the solution?
• Most HTML5 features are available on all modern smart
phones and tablet devices.
5
6. Why does it matter?
• More people are consuming web sites through their mobile
devices than through traditional desktop browsers
6
21. 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
22. 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
23. Online and Offline Events
document.body.addEventListener("offline", function () {
...
}, false);
document.body.addEventListener("online", function () {
...
}, false);
23
27. 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
28. 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
33. (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
34. (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 file
}
};
// capture error callback
var captureError = function(error) {
navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
};
// start audio capture
navigator.device.capture.captureAudio(captureSuccess, captureError, {limit:
2});
34
35. (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
37. 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
38. 3D, Graphics, & Effects
• Canvas
• CSS3 3D features
• WebGL *
• SVG *
38
44. 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
45. JavaScript Frameworks
• jQuery Mobile
• Sencha Touch
• Jo
• jQTouch
• xui
• Lawnchair
• EmbedJS
45
46. 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
47. 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
48. Jo
• Designed for apps, not web sites.
• Supports iOS, Android, webOS, Blackberry, Chrome OS
• Version 0.4.1
48