Mobile Web App Development (Becoming native)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Mobile Web App Development (Becoming native)

on

  • 1,187 views

 

Statistics

Views

Total Views
1,187
Views on SlideShare
1,185
Embed Views
2

Actions

Likes
0
Downloads
16
Comments
0

2 Embeds 2

http://paper.li 1
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • How did you do?\n
  • \n
  • \n

Mobile Web App Development (Becoming native) Presentation Transcript

  • 1. MOBILE WEB APPDEVELOPMENT(BECOMING NATIVE)DMD12 BSc17th March 2011Syd Lawrence SIT BACK / SIT BACK LISTEN UP LISTEN UPslideshare.net/sydlawrence
  • 2. NO RELOAD SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/barjack/135263802/
  • 3. A SINGLEHTML PAGE SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/ewanrayment/1250049249/
  • 4. HIDE UNNEEDEDELEMENTS SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/rsms/1320004520/
  • 5. RETREIVE THE DATA SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/29503348@N03/4915763648/
  • 6. FROM REMOTE API SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/29503348@N03/4915763648/
  • 7. JSONP SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/sabeth718/4975388271/
  • 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. CACHE THE DATA SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/kurtz433/242712215/
  • 10. LOCAL STORAGE SIT BACK / SIT BACK LISTEN UP LISTEN UP
  • 11. DISPLAY THE DATA SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/drp/14437926/
  • 12. MODIFY THEDISPLAYED DATA SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/familymwr/4930275692/
  • 13. REPLACE THEDISPLAYED DATA SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/zephyrance/2865451246/
  • 14. JAVASCRIPTFRAMEWORKS SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/29503348@N03/4915763648/
  • 15. DO NOTOVERUSE! SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/bayat/296445681/
  • 16. THINKBANDWIDTH SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/pdxdj/253103371/
  • 17. THINK SPEED SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/johnkay/5070219963/
  • 18. SENCHA TOUCHsydl.me/fPd02C SIT BACK / SIT BACK LISTEN UP LISTEN UP
  • 19. JQUERY MOBILEsydl.me/eGzOcE SIT BACK / SIT BACK LISTEN UP LISTEN UP
  • 20. IWEBKITsydl.me/eNt5uU SIT BACK / SIT BACK LISTEN UP LISTEN UP
  • 21. NEXT STEP SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/stuckincustoms/219819675/
  • 22. PHONEGAPsydl.me/hLUJz3 SIT BACK / SIT BACK LISTEN UP LISTEN UP
  • 23. APPCELERATORsydl.me/gYXZIC SIT BACK / SIT BACK LISTEN UP LISTEN UP
  • 24. APPMOBIsydl.me/eAp2oA SIT BACK / SIT BACK LISTEN UP LISTEN UP
  • 25. WHY THIS STEP? SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/benterrett/191625180/
  • 26. APP STORES SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/agizienski/3778956583/
  • 27. CAMERAS SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/captkodak/271872436/
  • 28. COMPASS SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/curious_gregor/5062538980/
  • 29. FILES SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/davemorris/4400953131/
  • 30. NOTIFICATIONS SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/funtik/1175522045/
  • 31. RECORD MEDIA SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/adambowie/544200097/
  • 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. 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. HOW DIDYOU DO? SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/annagaycoan/3750144703/
  • 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. CODE SAMPLESAND CONCEPTSMobile websites tips & tricks (@fakedarren)Cache ManifestlocalStorage SIT BACK / SIT BACKOnline / Offline Events LISTEN UP LISTEN UPJSONP