Building great mobile apps: Somethings you might want to know

  • 1,204 views
Uploaded on

My presentation slides for jsFoo in Bangalore in October 2011.

My presentation slides for jsFoo in Bangalore in October 2011.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,204
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
3

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. Building great mobile webapps: Some things youmight want to know 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. “All the pieces matter...” - Lester Freemon, The Wire
  • 4. We’re (mainly) going totalk about slick web appson full featured mobilebrowsers
  • 5. But first spare a thoughtfor the low powereddevices which can’t run afull featured browser
  • 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. The most important thingto know about the mobileweb...
  • 8. Just one Web
  • 9. Smartphone browsers != Webkit
  • 10. Furthermore, which webkitare you talking about? READ PPK’S ARTICLE TITLED “THERE IS NO WEBKIT ON MOBILE”
  • 11. It’s ok if the same sitelooks different in differentdevicesAs long as they are optimized for it.
  • 12. But if you do have adifferent mobile site...ALWAYS provide a link to switch back to thedesktop version.
  • 13. W3C Mobile Web BestPractices guidelinesRTFG
  • 14. Offline webappswith html5
  • 15. Offline Apps: Storing thefiles need to run offline
  • 16. CACHE MANIFEST #this is a comment. style.css script.js index.htmcontents of the manifest file.
  • 17. <html manifest=”demo.manifest”>Linking the manifest file to the html page.
  • 18. CACHE MANIFEST #this is a comment. style.css script.js index.htm NETWORK: dynamicpage.phpThe NETWORK: section header bypasses the cache
  • 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
  • 20. ALWAYS KEEPING AN UPDATED CACHE ��
  • 21. Offline Apps: Storing thedata for offline use
  • 22. Storage: Web Storage
  • 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. Web StorageSession Storage and Local Storage
  • 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. You can store images (andmore) with localStorage ....BUT DON”T.
  • 27. Automatically save enteredform info locallyin case page crashes or closes, person canresume from where he left off
  • 28. STORE USER DATA OFFLINE PERIODICALLY��
  • 29. Or...You could save only when you detect a newkeystroke (or a minimum number of them)
  • 30. GotchaTwo tabs updating the same value
  • 31. Storage eventsKnow if some other page has changed thevalue or not
  • 32. GET NEW VALUE IF ITS BEEN CHANGED IN PARALLEL TAB���
  • 33. 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
  • 34. Other storageoptions- IndexedDB (Limited browser support currently)- WebSQL (Standard in impasse. Limited desktop browsersupport but nice mobile browser support.)
  • 35. 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/
  • 36. Media queries
  • 37. �Provide different styles to differentresolutions using media queries
  • 38. Traditionally, mobile browsers provide a‘zoomed out’ view, and then you can tap in
  • 39. Viewport meta tagAllows you to set the zooming level
  • 40. Scaling constraints<meta name="viewport"content="width=device-width,maximum-scale=2, minimum-scale=0.5">
  • 41. Disable user scaling<meta name="viewport"content="width=device-width,user-scalable=no">
  • 42. In Opera, you can use CSSto control viewportFor example...@-o-viewport { width: device-width; max-zoom: 2; min-zoom: 0.5;}
  • 43. GeolocationFind yourself
  • 44. “These are my thoughts ina well published format”-The early web
  • 45. “Here is what we can alldo together”- “Web 2.0”
  • 46. “This is what I’m thinking”- Facebook, twitter and other social tools
  • 47. “This is where I’m at”- The next step
  • 48. Think of the possibilitiesAugmented realityGeofencinglocation aware advertising...more
  • 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. 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. 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. watchPosition()Same as getCurrentPosition() but fireswhenever there is a change in location.Sometimes its better to use this than theformer.
  • 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. The Geolocation SpecMay be up for a bit of a change in the future
  • 55. 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
  • 56. A sneak peak
  • 57. Device OrientationAccess to gyroscope, accelerometer info etc
  • 58. Access gyroscope infowindow.addEventListener("deviceorientation", function(event) { // process event.alpha, event.beta andevent.gamma }, true);
  • 59. Access accelerometer infowindow.addEventListener("devicemotion",function(event) { // Process event.acceleration }, true);
  • 60. Another sneak peak
  • 61. Check for accessif (navigator.getUserMedia){ navigator.getUserMedia(video, v_success,v_error); }else{ not_supported(); }
  • 62. Check for accessvar video_element = document.querySelector(video);......function v_success(stream){ video_element.src = stream;}
  • 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. Keep in mindWebRTC spec (containing getUserMedia) isstill in flux. Not a mature standard yet.
  • 65. Download the OperaMobile labs build withdevice orientation andgetUserMedia supportDownload from here: http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview
  • 66. Read up onDev.opera.com
  • 67. Cheers!More questions? Ask me now or contact meat:shwetankd@opera.comor, twitter.com/shwetank