Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building great mobile apps: Somethings you might want to know


Published on

My presentation slides for jsFoo in Bangalore in October 2011.

Published in: Technology, Design
  • Be the first to comment

Building great mobile apps: Somethings you might want to know

  1. 1. Building great mobile webapps: Some things youmight want to know By Shwetank Dixit, Opera Software
  2. 2. about meWeb Evangelist, Opera DeveloperRelations TeamMember, W3C Mobile Web for SocialDevelopment GroupMember, W3C Web EducationCommunity
  3. 3. “All the pieces matter...” - Lester Freemon, The Wire
  4. 4. We’re (mainly) going totalk about slick web appson full featured mobilebrowsers
  5. 5. But first spare a thoughtfor the low powereddevices which can’t run afull featured browser
  6. 6. But first spare a thoughtfor the low powereddevices which can’t run afull featured browser IT CONSTITUTES A MAJORITY OF THE MOBILE WEB (AS OF RIGHT NOW AND THE NEAR TERM)
  7. 7. The most important thingto know about the mobileweb...
  8. 8. Just one Web
  9. 9. Smartphone browsers != Webkit
  10. 10. Furthermore, which webkitare you talking about? READ PPK’S ARTICLE TITLED “THERE IS NO WEBKIT ON MOBILE”
  11. 11. It’s ok if the same sitelooks different in differentdevicesAs long as they are optimized for it.
  12. 12. But if you do have adifferent mobile site...ALWAYS provide a link to switch back to thedesktop version.
  13. 13. W3C Mobile Web BestPractices guidelinesRTFG
  14. 14. Offline webappswith html5
  15. 15. Offline Apps: Storing thefiles need to run offline
  16. 16. CACHE MANIFEST #this is a comment. style.css script.js index.htmcontents of the manifest file.
  17. 17. <html manifest=”demo.manifest”>Linking the manifest file to the html page.
  18. 18. CACHE MANIFEST #this is a comment. style.css script.js index.htm NETWORK: dynamicpage.phpThe NETWORK: section header bypasses the cache
  19. 19. 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
  21. 21. Offline Apps: Storing thedata for offline use
  22. 22. Storage: Web Storage
  23. 23. The problem with cookiesUnreliableNo programmatic APIs to manipulate itNot structuredMost of important of all ...Small file size, so very limited data can bestored.
  24. 24. Web StorageSession Storage and Local Storage
  25. 25. 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.
  26. 26. You can store images (andmore) with localStorage ....BUT DON”T.
  27. 27. Automatically save enteredform info locallyin case page crashes or closes, person canresume from where he left off
  29. 29. Or...You could save only when you detect a newkeystroke (or a minimum number of them)
  30. 30. GotchaTwo tabs updating the same value
  31. 31. Storage eventsKnow if some other page has changed thevalue or not
  33. 33. GotchaUsing a free hosting service - Don’t use localstorage with it if they store users accountson different directories.e.g,
  34. 34. Other storageoptions- IndexedDB (Limited browser support currently)- WebSQL (Standard in impasse. Limited desktop browsersupport but nice mobile browser support.)
  35. 35. 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:
  36. 36. Media queries
  37. 37. �Provide different styles to differentresolutions using media queries
  38. 38. Traditionally, mobile browsers provide a‘zoomed out’ view, and then you can tap in
  39. 39. Viewport meta tagAllows you to set the zooming level
  40. 40. Scaling constraints<meta name="viewport"content="width=device-width,maximum-scale=2, minimum-scale=0.5">
  41. 41. Disable user scaling<meta name="viewport"content="width=device-width,user-scalable=no">
  42. 42. In Opera, you can use CSSto control viewportFor example...@-o-viewport { width: device-width; max-zoom: 2; min-zoom: 0.5;}
  43. 43. GeolocationFind yourself
  44. 44. “These are my thoughts ina well published format”-The early web
  45. 45. “Here is what we can alldo together”- “Web 2.0”
  46. 46. “This is what I’m thinking”- Facebook, twitter and other social tools
  47. 47. “This is where I’m at”- The next step
  48. 48. Think of the possibilitiesAugmented realityGeofencinglocation aware advertising...more
  49. 49. //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
  50. 50. 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
  51. 51. 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
  52. 52. watchPosition()Same as getCurrentPosition() but fireswhenever there is a change in location.Sometimes its better to use this than theformer.
  53. 53. AccuracyScarily accurate in some places,amusingly inaccurate in others.DO NOT rely on it.Provide fallbacks, and ways to enter locationinfo manually (like zipcode)
  54. 54. The Geolocation SpecMay be up for a bit of a change in the future
  55. 55. Further readingHow to use the W3C Geolocation API: the Geolocation API in Webapps:
  56. 56. A sneak peak
  57. 57. Device OrientationAccess to gyroscope, accelerometer info etc
  58. 58. Access gyroscope infowindow.addEventListener("deviceorientation", function(event) { // process event.alpha, event.beta andevent.gamma }, true);
  59. 59. Access accelerometer infowindow.addEventListener("devicemotion",function(event) { // Process event.acceleration }, true);
  60. 60. Another sneak peak
  61. 61. Check for accessif (navigator.getUserMedia){ navigator.getUserMedia(video, v_success,v_error); }else{ not_supported(); }
  62. 62. Check for accessvar video_element = document.querySelector(video);......function v_success(stream){ video_element.src = stream;}
  63. 63. 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); }
  64. 64. Keep in mindWebRTC spec (containing getUserMedia) isstill in flux. Not a mature standard yet.
  65. 65. Download the OperaMobile labs build withdevice orientation andgetUserMedia supportDownload from here:
  66. 66. Read up
  67. 67. Cheers!More questions? Ask me now or contact meat:shwetankd@opera.comor,