Your SlideShare is downloading. ×
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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


Published on

Published in: Technology, Design

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. HTML5 and beyond: Thenext generation of mobileweb applications By Shwetank Dixit, Opera Software
  • 2. about meWeb Evangelist, Opera DeveloperRelations TeamMember, W3C Mobile Web for SocialDevelopment GroupMember, W3C Web EducationCommunity
  • 3. The most important thingto know about the mobileweb...
  • 4. Just one Web
  • 5. Smartphone browsers != Webkit
  • 6. Furthermore, which webkitare you talking about? READ PPK’S ARTICLE TITLED “THERE IS NO WEBKIT ON MOBILE”
  • 7. It’s ok if the same sitelooks different in differentdevicesAs long as they are optimized for it.
  • 8. It’s ok if the same sitelooks different in differentdevicesAs long as they are optimized for it.AND THINK WHETHER IT IS REALLY WORTH IT
  • 9. But if you do have adifferent mobile site...ALWAYS provide a link to switch back to thedesktop version.
  • 10. W3C Mobile Web BestPractices guidelinesRTFG
  • 11. Offline webappswith html5
  • 12. Offline Apps: Storing thefiles need to run offline
  • 13. CACHE MANIFEST #this is a comment. style.css script.js index.htmcontents of the manifest file.
  • 14. <html manifest=”demo.manifest”>Linking the manifest file to the html page.
  • 15. CACHE MANIFEST #this is a comment. style.css script.js index.htm NETWORK: dynamicpage.phpThe NETWORK: section header bypasses the cache
  • 16. CACHE MANIFEST #this is a comment. style.css script.js index.htm FALLBACK: original.jpg backup.jpgIf a file can’t load, then the FALLBACK: section headerspecifies which files to load as a backup in their place
  • 18. Offline Apps: Storing thedata for offline use
  • 19. Storage: Web Storage
  • 20. The problem with cookiesUnreliableNo programmatic APIs to manipulate itNot structuredMost of important of all ...Small file size, so very limited data can bestored.
  • 21. Web StorageSession Storage and Local Storage
  • 22. localStorage.setItem(yourkey,yourvalue); // Store the valuevar item = localStorage.getItem(yourkey); // Retrieve the value and assignit to a variableExample of using Web Storage to store andretrieve values in the browser’s local storageWith this, even if you close the browser and re-open the page again, the values shouldstill load properly.
  • 23. You can store images (andmore) with localStorage ....BUT DON”T.
  • 24. Automatically save enteredform info locallyin case page crashes or closes, person canresume from where he left off
  • 26. Or...You could save only when you detect a newkeystroke (or a minimum number of them)
  • 27. GotchaTwo tabs updating the same value
  • 28. Storage eventsKnow if some other page has changed thevalue or not
  • 30. GotchaUsing a free hosting service - Don’t use localstorage with it if they store users accountson different directories.e.g,
  • 31. Other storageoptions- IndexedDB (Limited browser support currently)- WebSQL (Standard in impasse. Limited desktop browsersupport but nice mobile browser support.)
  • 32. Further readingRun your web apps offline with HTML5 Application Cache: Storage: easier, more powerful client-side data storage: your web apps offline: A tale of Web Storage, Application Cache and WebSQL:
  • 33. SVG - Scalable VectorGraphics
  • 34. FormsHTML5 incorporates web forms 2, whichmakes forms fun again!
  • 35. Lets see an example!
  • 36. <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=""><option label="yahoo" value=""><option label="personal" value=""></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
  • 37. Media queries
  • 38. �Provide different styles to differentresolutions using media queries
  • 39. Traditionally, mobile browsers provide a‘zoomed out’ view, and then you can tap in
  • 40. Viewport meta tagAllows you to set the zooming level
  • 41. Scaling constraints<meta name="viewport"content="width=device-width,maximum-scale=2, minimum-scale=0.5">
  • 42. Disable user scaling<meta name="viewport"content="width=device-width,user-scalable=no">
  • 43. In Opera, you can use CSSto control viewportFor example...@-o-viewport { width: device-width; max-zoom: 2; min-zoom: 0.5;}
  • 44. GeolocationFind yourself
  • 45. “These are my thoughts ina well published format”-The early web
  • 46. “Here is what we can alldo together”- “Web 2.0”
  • 47. “This is what I’m thinking”- Facebook, twitter and other social tools
  • 48. “This is where I’m at”- The next step
  • 49. Think of the possibilitiesAugmented realityGeofencinglocation aware advertising...more
  • 50. //Check if browser supports W3C Geolocation APIif (navigator.geolocation) { navigator.geolocation.getCurrentPosition(successFunction, errorFunction);} else { alert(Geolocation not supported.);}Sample code for running geolocation, ifavailable
  • 51. 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
  • 52. function errorFunction(position){ if (pos.PositionError == 1){ alert(It seems you have decided not to share yourlocation); } if (pos.PositionError == 2){ alert(The location could not be determined by thebrowser. Try to reload the page to try again); }Handling errorsSEE FULL LIST OF ERRORS ON THE SPEC
  • 53. watchPosition()Same as getCurrentPosition() but fireswhenever there is a change in location.Sometimes its better to use this than theformer.
  • 54. AccuracyScarily accurate in some places,amusingly inaccurate in others.DO NOT rely on it.Provide fallbacks, and ways to enter locationinfo manually (like zipcode)
  • 55. The Geolocation SpecMay be up for a bit of a change in the future
  • 56. Further readingHow to use the W3C Geolocation API: the Geolocation API in Webapps:
  • 57. A sneak peak
  • 58. Device OrientationAccess to gyroscope, accelerometer info etc
  • 59. Access gyroscope infowindow.addEventListener("deviceorientation", function(event) { // process event.alpha, event.beta andevent.gamma }, true);
  • 60. Access accelerometer infowindow.addEventListener("devicemotion",function(event) { // Process event.acceleration }, true);
  • 61. Another sneak peak
  • 62. Check for accessif (navigator.getUserMedia){ navigator.getUserMedia(video, v_success,v_error); }else{ not_supported(); }
  • 63. Check for accessvar video_element = document.querySelector(video);......function v_success(stream){ video_element.src = stream;}
  • 64. 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); }
  • 65. Keep in mindWebRTC spec (containing getUserMedia) isstill in flux. Not a mature standard yet.
  • 66. Download the OperaMobile labs build withdevice orientation andgetUserMedia supportDownload from here:
  • 67. Read up
  • 68. Cheers!More questions? Ask me now or contact meat:shwetankd@opera.comor,