html5 and beyond the next generation of mobile web applications - touch tour chennai
DESCRIPTION
TRANSCRIPT
HTML5 and beyond: The next generation of mobile web applications
By Shwetank Dixit, Opera Software
about meWeb Evangelist, Opera Developer Relations Team
Member, W3C Mobile Web for Social Development Group
Member, W3C Web Education Community Group
twitter.com/shwetankemail: [email protected]
The most important thing to know about the mobile web...
Just one Web
Smartphone browsers != Webkit
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 devicesAs long as they are optimized for it.
It’s ok if the same site looks different in different devicesAs 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 guidelinesRTFG
Offline webappswith html5
Offline Apps: Storing the files need to run offline
CACHE MANIFEST#this is a comment.
style.cssscript.js
index.htm
contents of the manifest file.
<html manifest=”demo.manifest”>
Linking the manifest file to the html page.
CACHE MANIFEST#this is a comment.
style.cssscript.js
index.htm
NETWORK:dynamicpage.php
The NETWORK: section header bypasses the cache
CACHE MANIFEST#this is a comment.
style.cssscript.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
setInterval(function () { window.applicationCache.update(); }, 3600000);
...
...
window.applicationCache.addEventListener('updateready', function(){ �
� window.applicationCache.swapCache();
}, false);
ALWAYS KEEPING AN UPDATED CACHE
Offline Apps: Storing the data for offline use
Storage: Web Storage
The problem with cookiesUnreliableNo programmatic APIs to manipulate itNot structured
Most of important of all ...Small file size, so very limited data can be stored.
Web StorageSession 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 storageWith 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 locallyin case page crashes or closes, person can resume from where he left off
<textarea id="draft" rows="10" cols="30"></textarea>
...
...
function saveMessage(){
� var message = document.getElementById("draft");
� localStorage.setItem("message", message.value)
}
setInterval(saveMessage, 500);
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 eventsKnow if some other page has changed the value or not
addEventListener('storage', function(event){
� if (e.oldValue){
� alert('changed from \''+event.oldValue+'\' to \''+event.newValue+'\'');
� }
}, false);
GET NEW VALUE IF ITS BEEN CHANGED IN PARALLEL TAB
GotchaUsing 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 readingRun 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
FormsHTML5 incorporates web forms 2, which makes forms fun again!
Lets see an example!
<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
Media queries
/*Between 480px and 800px*/@media all and (min-width: 480px) and (max-width: 800px) {#container {width: auto; max-width: 800px;}#main {width: 70%; float: left;}#sidebar {width: 29%; float: left; margin-bottom: 10px;}#pub {width: 29%; margin-left: 70%; float: none;}�}
/*From 480px and lower*/@media all and (max-width: 480px) {#container, #main, #sidebar {width: 100%; font-size: 0.9em;}#pub {display: none;}#sidebar ul li {display: inline;}*{clear: both; border-left: 0 !important; border-right: 0 !important;}}
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 tagAllows 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 viewportFor example...
@-o-viewport { width: device-width; max-zoom: 2; min-zoom: 0.5;}
GeolocationFind yourself
“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 possibilitiesAugmented realityGeofencinglocation aware advertising...more
//Check if browser supports W3C Geolocation APIif (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 errorsSEE FULL LIST OF ERRORS ON THE SPEC
watchPosition()Same as getCurrentPosition() but fires whenever there is a change in location.
Sometimes its better to use this than the former.
AccuracyScarily 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 SpecMay be up for a bit of a change in the future
Further readingHow 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
A sneak peak
Device OrientationAccess to gyroscope, accelerometer info etc
Access gyroscope info
window.addEventListener("deviceorientation", function(event) {
// process event.alpha, event.beta and event.gamma
}, true);
Access accelerometer infowindow.addEventListener("devicemotion", function(event) {
// Process event.acceleration
}, true);
Another sneak peak
Check for accessif (navigator.getUserMedia){ navigator.getUserMedia('video', v_success, v_error); }
else{ not_supported(); }
Check for accessvar video_element = document.querySelector('video');......function v_success(stream){ video_element.src = stream; }
Use camera + <video> + <canvas> for new tricksvar 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 mindWebRTC spec (containing getUserMedia) is still in flux. Not a mature standard yet.
Download the Opera Mobile labs build with device orientation and getUserMedia supportDownload from here: http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview
Read up on
Dev.opera.com
Cheers!More questions? Ask me now or contact me at:[email protected] or, twitter.com/shwetank