Your SlideShare is downloading. ×
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
Html5 and beyond   the next generation of mobile web applications - Touch Tour Chennai
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

1,555

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,555
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 Grouptwitter.com/shwetankemail: shwetankd@opera.com
  • 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
  • 17. ALWAYS KEEPING AN UPDATED CACHE ��
  • 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
  • 25. STORE USER DATA OFFLINE PERIODICALLY��
  • 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
  • 29. GET NEW VALUE IF ITS BEEN CHANGED IN PARALLEL TAB���
  • 30. GotchaUsing a free hosting service - Don’t use localstorage with it if they store users accountson different directories.e.g, freehosting.com/user1and freehosting.com/user2
  • 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: 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/
  • 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="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
  • 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: http://dev.opera.com/articles/view/how-to-use-the-w3c-geolocation-api/Use the Geolocation API in Webapps: http://goo.gl/EBVYt
  • 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: http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview
  • 67. Read up onDev.opera.com
  • 68. Cheers!More questions? Ask me now or contact meat:shwetankd@opera.comor, twitter.com/shwetank

×