Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai
-
Upload
ria-rui-society -
Category
Technology
-
view
1.514 -
download
1
description
Transcript of Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai
![Page 1: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/1.jpg)
HTML5 and beyond: The next generation of mobile web applications
By Shwetank Dixit, Opera Software
![Page 2: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/2.jpg)
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]
![Page 3: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/3.jpg)
The most important thing to know about the mobile web...
![Page 4: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/4.jpg)
![Page 5: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/5.jpg)
![Page 6: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/6.jpg)
![Page 7: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/7.jpg)
Just one Web
![Page 8: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/8.jpg)
Smartphone browsers != Webkit
![Page 9: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/9.jpg)
Furthermore, which webkit are you talking about?
READ PPK’S ARTICLE TITLED “THERE IS NO WEBKIT ON MOBILE”
![Page 10: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/10.jpg)
It’s ok if the same site looks different in different devicesAs long as they are optimized for it.
![Page 11: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/11.jpg)
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
![Page 12: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/12.jpg)
But if you do have a different mobile site...ALWAYS provide a link to switch back to the desktop version.
![Page 13: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/13.jpg)
![Page 14: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/14.jpg)
W3C Mobile Web Best Practices guidelinesRTFG
![Page 15: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/15.jpg)
Offline webappswith html5
![Page 16: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/16.jpg)
Offline Apps: Storing the files need to run offline
![Page 17: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/17.jpg)
CACHE MANIFEST#this is a comment.
style.cssscript.js
index.htm
contents of the manifest file.
![Page 18: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/18.jpg)
<html manifest=”demo.manifest”>
Linking the manifest file to the html page.
![Page 19: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/19.jpg)
CACHE MANIFEST#this is a comment.
style.cssscript.js
index.htm
NETWORK:dynamicpage.php
The NETWORK: section header bypasses the cache
![Page 20: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/20.jpg)
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
![Page 21: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/21.jpg)
setInterval(function () { window.applicationCache.update(); }, 3600000);
...
...
window.applicationCache.addEventListener('updateready', function(){ �
� window.applicationCache.swapCache();
}, false);
ALWAYS KEEPING AN UPDATED CACHE
![Page 22: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/22.jpg)
Offline Apps: Storing the data for offline use
![Page 23: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/23.jpg)
Storage: Web Storage
![Page 24: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/24.jpg)
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.
![Page 25: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/25.jpg)
Web StorageSession Storage and Local Storage
![Page 26: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/26.jpg)
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.
![Page 27: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/27.jpg)
You can store images (and more) with localStorage
....BUT DON”T.
![Page 28: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/28.jpg)
Automatically save entered form info locallyin case page crashes or closes, person can resume from where he left off
![Page 29: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/29.jpg)
<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
![Page 30: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/30.jpg)
Or...You could save only when you detect a new keystroke (or a minimum number of them)
![Page 31: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/31.jpg)
Gotcha Two tabs updating the same value
![Page 32: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/32.jpg)
Storage eventsKnow if some other page has changed the value or not
![Page 33: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/33.jpg)
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
![Page 34: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/34.jpg)
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
![Page 35: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/35.jpg)
Other storage options- IndexedDB (Limited browser support currently)- WebSQL (Standard in impasse. Limited desktop browser support but nice mobile browser support.)
![Page 36: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/36.jpg)
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/
![Page 37: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/37.jpg)
SVG - Scalable Vector Graphics
![Page 38: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/38.jpg)
FormsHTML5 incorporates web forms 2, which makes forms fun again!
![Page 39: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/39.jpg)
Lets see an example!
![Page 40: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/40.jpg)
<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
![Page 41: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/41.jpg)
Media queries
![Page 42: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/42.jpg)
/*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
![Page 43: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/43.jpg)
Traditionally, mobile browsers provide a ‘zoomed out’ view, and then you can tap in
![Page 44: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/44.jpg)
Viewport meta tagAllows you to set the zooming level
![Page 45: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/45.jpg)
![Page 46: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/46.jpg)
Scaling constraints<meta name="viewport" content="width=device-width,maximum-scale=2, minimum-scale=0.5">
![Page 47: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/47.jpg)
Disable user scaling<meta name="viewport" content="width=device-width,user-scalable=no">
![Page 48: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/48.jpg)
In Opera, you can use CSS to control viewportFor example...
@-o-viewport { width: device-width; max-zoom: 2; min-zoom: 0.5;}
![Page 49: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/49.jpg)
GeolocationFind yourself
![Page 50: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/50.jpg)
“These are my thoughts in a well published format”-The early web
![Page 51: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/51.jpg)
“Here is what we can all do together”- “Web 2.0”
![Page 52: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/52.jpg)
“This is what I’m thinking”- Facebook, twitter and other social tools
![Page 53: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/53.jpg)
“This is where I’m at”- The next step
![Page 54: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/54.jpg)
Think of the possibilitiesAugmented realityGeofencinglocation aware advertising...more
![Page 55: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/55.jpg)
//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
![Page 56: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/56.jpg)
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
![Page 57: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/57.jpg)
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
![Page 58: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/58.jpg)
watchPosition()Same as getCurrentPosition() but fires whenever there is a change in location.
Sometimes its better to use this than the former.
![Page 59: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/59.jpg)
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)
![Page 60: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/60.jpg)
The Geolocation SpecMay be up for a bit of a change in the future
![Page 61: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/61.jpg)
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
![Page 62: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/62.jpg)
A sneak peak
![Page 63: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/63.jpg)
Device OrientationAccess to gyroscope, accelerometer info etc
![Page 64: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/64.jpg)
Access gyroscope info
window.addEventListener("deviceorientation", function(event) {
// process event.alpha, event.beta and event.gamma
}, true);
![Page 65: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/65.jpg)
Access accelerometer infowindow.addEventListener("devicemotion", function(event) {
// Process event.acceleration
}, true);
![Page 66: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/66.jpg)
Another sneak peak
![Page 67: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/67.jpg)
Check for accessif (navigator.getUserMedia){ navigator.getUserMedia('video', v_success, v_error); }
else{ not_supported(); }
![Page 68: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/68.jpg)
Check for accessvar video_element = document.querySelector('video');......function v_success(stream){ video_element.src = stream; }
![Page 69: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/69.jpg)
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); }
![Page 70: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/70.jpg)
Keep in mindWebRTC spec (containing getUserMedia) is still in flux. Not a mature standard yet.
![Page 71: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/71.jpg)
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
![Page 72: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/72.jpg)
Read up on
Dev.opera.com
![Page 73: Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai](https://reader035.fdocuments.in/reader035/viewer/2022062511/54bdb36d4a7959a4658b462b/html5/thumbnails/73.jpg)
Cheers!More questions? Ask me now or contact me at:[email protected] or, twitter.com/shwetank