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.

Mobile Web App Development (Becoming native)

1,420 views

Published on

Published in: Technology
  • Be the first to comment

Mobile Web App Development (Becoming native)

  1. 1. MOBILE WEB APPDEVELOPMENT(BECOMING NATIVE)DMD12 BSc17th March 2011Syd Lawrence SIT BACK / SIT BACK LISTEN UP LISTEN UPslideshare.net/sydlawrence
  2. 2. NO RELOAD SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/barjack/135263802/
  3. 3. A SINGLEHTML PAGE SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/ewanrayment/1250049249/
  4. 4. HIDE UNNEEDEDELEMENTS SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/rsms/1320004520/
  5. 5. RETREIVE THE DATA SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/29503348@N03/4915763648/
  6. 6. FROM REMOTE API SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/29503348@N03/4915763648/
  7. 7. JSONP SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/sabeth718/4975388271/
  8. 8. http://api.com/get.php?user=2 <code/>___callback({"id":2,"first_name":"Syd","last_name":”Lawrence”})___** local javascriptfunction callback(data) { // do something}var url = “http://api.com/get.php?user=2”; // URL of the external scriptvar script = document.createElement(script);script.setAttribute(src, url);// load the scriptdocument.getElementsByTagName(head)[0].appendChild(script); SIT BACK / SIT BACK LISTEN UP LISTEN UPMORE INFO: http://sydl.me/evqQVJ
  9. 9. CACHE THE DATA SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/kurtz433/242712215/
  10. 10. LOCAL STORAGE SIT BACK / SIT BACK LISTEN UP LISTEN UP
  11. 11. DISPLAY THE DATA SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/drp/14437926/
  12. 12. MODIFY THEDISPLAYED DATA SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/familymwr/4930275692/
  13. 13. REPLACE THEDISPLAYED DATA SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/zephyrance/2865451246/
  14. 14. JAVASCRIPTFRAMEWORKS SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/29503348@N03/4915763648/
  15. 15. DO NOTOVERUSE! SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/bayat/296445681/
  16. 16. THINKBANDWIDTH SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/pdxdj/253103371/
  17. 17. THINK SPEED SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/johnkay/5070219963/
  18. 18. SENCHA TOUCHsydl.me/fPd02C SIT BACK / SIT BACK LISTEN UP LISTEN UP
  19. 19. JQUERY MOBILEsydl.me/eGzOcE SIT BACK / SIT BACK LISTEN UP LISTEN UP
  20. 20. IWEBKITsydl.me/eNt5uU SIT BACK / SIT BACK LISTEN UP LISTEN UP
  21. 21. NEXT STEP SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/stuckincustoms/219819675/
  22. 22. PHONEGAPsydl.me/hLUJz3 SIT BACK / SIT BACK LISTEN UP LISTEN UP
  23. 23. APPCELERATORsydl.me/gYXZIC SIT BACK / SIT BACK LISTEN UP LISTEN UP
  24. 24. APPMOBIsydl.me/eAp2oA SIT BACK / SIT BACK LISTEN UP LISTEN UP
  25. 25. WHY THIS STEP? SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/benterrett/191625180/
  26. 26. APP STORES SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/agizienski/3778956583/
  27. 27. CAMERAS SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/captkodak/271872436/
  28. 28. COMPASS SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/curious_gregor/5062538980/
  29. 29. FILES SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/davemorris/4400953131/
  30. 30. NOTIFICATIONS SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/funtik/1175522045/
  31. 31. RECORD MEDIA SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/adambowie/544200097/
  32. 32. WANT TOKNOW MOREhttp://www.ibm.com/developerworks/library/wa-aj-jsonp1/http://sixrevisions.com/web-development/html5-iphone-app/http://ofps.oreilly.com/titles/9780596805784/ SIT BACK / SIT BACKhttp://www.easyapns.com/ LISTEN UP LISTEN UPhttp://js-html5.com/tagged/mobile
  33. 33. A LITTLETASK DUETODAY(NOT REALLY THAT OPTIONAL, BUT UP TO YOU IF YOU WANT TO DO IT)Create your APISetup your databasePopulate with sample data SIT BACK / SIT BACKCreate your getters and setters LISTEN UP LISTEN UPTest
  34. 34. HOW DIDYOU DO? SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/annagaycoan/3750144703/
  35. 35. A LITTLETASK DUENEXT WEEK(GROUP WORK)In your groups1 person sort out the HTML & CSS view1 person play around with the web -> native apps SIT BACK / SIT BACK Get some kind of application onto a mobile device LISTEN UP LISTEN UP1 person project manage and work out what is left to do
  36. 36. CODE SAMPLESAND CONCEPTSMobile websites tips & tricks (@fakedarren)Cache ManifestlocalStorage SIT BACK / SIT BACKOnline / Offline Events LISTEN UP LISTEN UPJSONP

×