Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai
•
0 gefällt mir•1,095 views
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai
Ähnlich wie Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai (20)
Mehr von RIA RUI Society
Mehr von RIA RUI Society (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai
- 1. HTML5 and beyond: The next generation of mobile web applications By Shwetank Dixit, Opera Software
- 2. 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
- 3. The most important thing to know about the mobile web...
- 7. Just one Web
- 8. Smartphone browsers != Webkit
- 9. Furthermore, which webkit are you talking about? READ PPK’S ARTICLE TITLED “THERE IS NO WEBKIT ON MOBILE”
- 10. It’s ok if the same site looks different in different devices As long as they are optimized for it.
- 11. 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
- 12. But if you do have a different mobile site... ALWAYS provide a link to switch back to the desktop version.
- 14. W3C Mobile Web Best Practices guidelines RTFG
- 16. Offline Apps: Storing the files need to run offline
- 17. CACHE MANIFEST #this is a comment. style.css script.js index.htm contents of the manifest file.
- 18. <html manifest=”demo.manifest”> Linking the manifest file to the html page.
- 19. CACHE MANIFEST #this is a comment. style.css script.js index.htm NETWORK: dynamicpage.php The NETWORK: section header bypasses the cache
- 20. 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
- 21. ALWAYS KEEPING AN UPDATED CACHE � �
- 22. Offline Apps: Storing the data for offline use
- 24. The problem with cookies Unreliable No programmatic APIs to manipulate it Not structured Most of important of all ... Small file size, so very limited data can be stored.
- 25. Web Storage Session Storage and Local Storage
- 26. 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.
- 27. You can store images (and more) with localStorage ....BUT DON”T.
- 28. Automatically save entered form info locally in case page crashes or closes, person can resume from where he left off
- 29. STORE USER DATA OFFLINE PERIODICALLY � �
- 30. Or... You could save only when you detect a new keystroke (or a minimum number of them)
- 31. Gotcha Two tabs updating the same value
- 32. Storage events Know if some other page has changed the value or not
- 33. GET NEW VALUE IF ITS BEEN CHANGED IN PARALLEL TAB � � �
- 34. 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
- 35. Other storage options - IndexedDB (Limited browser support currently) - WebSQL (Standard in impasse. Limited desktop browser support but nice mobile browser support.)
- 36. 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/
- 37. SVG - Scalable Vector Graphics
- 38. Forms HTML5 incorporates web forms 2, which makes forms fun again!
- 39. Lets see an example!
- 40. <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
- 41. Media queries
- 42. � Provide different styles to different resolutions using media queries
- 43. Traditionally, mobile browsers provide a ‘zoomed out’ view, and then you can tap in
- 44. Viewport meta tag Allows you to set the zooming level
- 46. Scaling constraints <meta name="viewport" content="width=device-width, maximum-scale=2, minimum-scale=0.5">
- 47. Disable user scaling <meta name="viewport" content="width=device-width, user-scalable=no">
- 48. In Opera, you can use CSS to control viewport For example... @-o-viewport { width: device-width; max-zoom: 2; min-zoom: 0.5; }
- 50. “These are my thoughts in a well published format” -The early web
- 51. “Here is what we can all do together” - “Web 2.0”
- 52. “This is what I’m thinking” - Facebook, twitter and other social tools
- 53. “This is where I’m at” - The next step
- 54. Think of the possibilities Augmented reality Geofencing location aware advertising ...more
- 55. //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
- 56. 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
- 57. 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
- 58. watchPosition() Same as getCurrentPosition() but fires whenever there is a change in location. Sometimes its better to use this than the former.
- 59. 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)
- 60. The Geolocation Spec May be up for a bit of a change in the future
- 61. 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
- 62. A sneak peak
- 63. Device Orientation Access to gyroscope, accelerometer info etc
- 64. Access gyroscope info window.addEventListener ("deviceorientation", function(event) { // process event.alpha, event.beta and event.gamma }, true);
- 65. Access accelerometer info window.addEventListener("devicemotion", function(event) { // Process event.acceleration }, true);
- 67. Check for access if (navigator.getUserMedia){ navigator.getUserMedia('video', v_success, v_error); } else{ not_supported(); }
- 68. Check for access var video_element = document.querySelector('video'); ... ... function v_success(stream){ video_element.src = stream; }
- 69. 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); }
- 70. Keep in mind WebRTC spec (containing getUserMedia) is still in flux. Not a mature standard yet.
- 71. 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
- 73. Cheers! More questions? Ask me now or contact me at: shwetankd@opera.com or, twitter.com/shwetank