Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai

HTML5 and beyond: The
next generation of mobile
web applications
By Shwetank Dixit, Opera Software

about me
Web Evangelist, Opera Developer
Relations Team

Member, W3C Mobile Web for Social
Development Group

Member, W3C Web Education
Community Group

twitter.com/shwetank
email: shwetankd@opera.com

The most important thing
to know about the mobile
web...

Furthermore, which webkit
are you talking about?
READ PPK’S ARTICLE TITLED “THERE IS NO WEBKIT ON MOBILE”

It’s ok if the same site
looks different in different
devices
As long as they are optimized for it.

It’s ok if the same site
looks different in different
devices
As long as they are optimized for it.
AND THINK WHETHER IT IS REALLY WORTH IT

But if you do have a
different mobile site...
ALWAYS provide a link to switch back to the
desktop version.

W3C Mobile Web Best
Practices guidelines
RTFG

Offline Apps: Storing the
files need to run offline

CACHE MANIFEST
#this is a comment.

style.css
script.js
index.htm

contents of the manifest ﬁle.

<html manifest=”demo.manifest”>

Linking the manifest ﬁle to the html page.

CACHE MANIFEST
#this is a comment.

style.css
script.js
index.htm

NETWORK:
dynamicpage.php

The NETWORK: section header bypasses the cache

CACHE MANIFEST
#this is a comment.

style.css
script.js
index.htm

FALLBACK:
original.jpg backup.jpg

If a file can’t load, then the FALLBACK: section header
specifies which files to load as a backup in their place

ALWAYS KEEPING AN UPDATED CACHE

�
�

Ofﬂine Apps: Storing the
data for ofﬂine use

The problem with cookies
Unreliable
No programmatic APIs to manipulate it
Not structured

Most of important of all ...
Small ﬁle size, so very limited data can be
stored.

Web Storage
Session Storage and Local Storage

localStorage.setItem(yourkey,
yourvalue); // Store the value

var item = localStorage.getItem
(yourkey); // Retrieve the value and assign
it to a variable
Example of using Web Storage to store and
retrieve values in the browser’s local storage
With this, even if you close the browser and re-open the page again, the values should
still load properly.

You can store images (and
more) with localStorage
....BUT DON”T.

Automatically save entered
form info locally
in case page crashes or closes, person can
resume from where he left off

STORE USER DATA OFFLINE
PERIODICALLY

�
�

Or...
You could save only when you detect a new
keystroke (or a minimum number of them)

Gotcha
Two tabs updating the same value

Storage events
Know if some other page has changed the
value or not

GET NEW VALUE IF ITS BEEN CHANGED
IN PARALLEL TAB
�
�
�

Gotcha
Using a free hosting service - Don’t use local
storage with it if they store users accounts
on different directories.

e.g, freehosting.com/user1
and freehosting.com/user2

Other storage
options
- IndexedDB (Limited browser support currently)
- WebSQL (Standard in impasse. Limited desktop browser
support but nice mobile browser support.)

Further reading
Run your web apps offline with HTML5 Application Cache: http://dev.opera.com/
articles/view/offline-applications-html5-appcache/

Web Storage: easier, more powerful client-side data storage: http://dev.opera.com/
articles/view/web-storage/

Taking your web apps offline: A tale of Web Storage, Application Cache and WebSQL:
http://dev.opera.com/articles/view/taking-your-web-apps-offline-web-storage-
appcache-websql/

SVG - Scalable Vector
Graphics

Forms
HTML5 incorporates web forms 2, which
makes forms fun again!

<input name="age" type="number" min="18" max="25">

<input name="email" type="email" required>

<input name="url" type="uri" list="mylist">

<datalist id="mylist">`
<option label="google" value="http://google.com">
<option label="yahoo" value="http://yahoo.com">
<option label="personal" value="http://shwetankdixit.com">
</datalist>

<input name="dob" type="date">

<input id="slider" name="a" type="range" mix="1" max="10" value="0"> </
input>
<output name="result" value="5" onforminput="value=a.value" >0</output>

Some of the code in the example page

�

Provide different styles to different
resolutions using media queries

Traditionally, mobile browsers provide a
‘zoomed out’ view, and then you can tap in

Viewport meta tag
Allows you to set the zooming level

Scaling constraints
<meta name="viewport"
content="width=device-width,
maximum-scale=2, minimum-scale=0.5">

Disable user scaling
<meta name="viewport"
content="width=device-width,
user-scalable=no">

In Opera, you can use CSS
to control viewport
For example...

@-o-viewport {
width: device-width;
max-zoom: 2;
min-zoom: 0.5;
}

“These are my thoughts in
a well published format”
-The early web

“Here is what we can all
do together”
- “Web 2.0”

“This is what I’m thinking”
- Facebook, twitter and other social tools

“This is where I’m at”
- The next step

Think of the possibilities
Augmented reality
Geofencing
location aware advertising
...more

//Check if browser supports W3C Geolocation API
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition
(successFunction, errorFunction);
} else {
alert('Geolocation not supported.');
}
Sample code for running geolocation, if
available

function successFunction(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
alert('Your latitude is :'+lat+' and longitude is '+long);
}

Determining the position

function errorFunction(position){
if (pos.PositionError == 1){
alert('It seems you have decided not to share your
location');
}
if (pos.PositionError == 2){
alert('The location could not be determined by the
browser. Try to reload the page to try again');
}

Handling errors
SEE FULL LIST OF ERRORS ON THE SPEC

watchPosition()
Same as getCurrentPosition() but ﬁres
whenever there is a change in location.

Sometimes its better to use this than the
former.

Accuracy
Scarily accurate in some places,
amusingly inaccurate in others.

DO NOT rely on it.
Provide fallbacks, and ways to enter location
info manually (like zipcode)

The Geolocation Spec
May be up for a bit of a change in the future

Further reading
How to use the W3C Geolocation API: http://dev.opera.com/articles/view/how-to-use-
the-w3c-geolocation-api/

Use the Geolocation API in Webapps: http://goo.gl/EBVYt

Device Orientation
Access to gyroscope, accelerometer info etc

Access gyroscope info
window.addEventListener
("deviceorientation", function(event) {

// process event.alpha, event.beta and
event.gamma

}, true);

Access accelerometer info
window.addEventListener("devicemotion",
function(event) {

// Process event.acceleration

}, true);

Check for access
if (navigator.getUserMedia){
navigator.getUserMedia('video', v_success,
v_error);
}

else{
not_supported();
}

Check for access
var video_element = document.querySelector('video');
...
...
function v_success(stream){
video_element.src = stream;
}

Use camera + <video> +
<canvas> for new tricks
var button = document.querySelector('#button');
button.addEventListener('click',snapshot, false);
...
...
function snapshot(){
var c = document.querySelector('canvas');
var ctx = c.getContext('2d');
var cw = c.clientWidth;
var ch = c.clientHeight;
ctx.drawImage(video_element, 0, 0, cw, ch);
}

Keep in mind
WebRTC spec (containing getUserMedia) is
still in ﬂux. Not a mature standard yet.

Download the Opera
Mobile labs build with
device orientation and
getUserMedia support
Download from here: http://my.opera.com/core/blog/2011/03/23/webcam-
orientation-preview

Cheers!
More questions? Ask me now or contact me
at:
shwetankd@opera.com
or, twitter.com/shwetank

Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai

Similaire à Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai (20)

Plus de RIA RUI Society

Plus de RIA RUI Society (20)

Dernier

Dernier (20)

Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai