Your SlideShare is downloading. ×
Building great mobile apps: Somethings you might want to know
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

Building great mobile apps: Somethings you might want to know

1,246
views

Published on

My presentation slides for jsFoo in Bangalore in October 2011.

My presentation slides for jsFoo in Bangalore in October 2011.

Published in: Technology, Design

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,246
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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