Mobile Web App Development (Becoming native)
Download as KEY, PDF1 like688 views
This document discusses developing mobile web apps that behave like native apps. It covers techniques like using a single HTML page and hiding/showing elements, retrieving data from remote APIs using JSONP, caching data locally using local storage, modifying and replacing displayed data, and frameworks like Sencha Touch, jQuery Mobile, and PhoneGap. It also discusses why developing native wrappers is important for accessing device features like the camera, files, notifications and more.
![http://api.com/get.php?user=2
<code/>
___
callback({"id":2,"first_name":"Syd","last_name":”Lawrence”})
___
** local javascript
function callback(data) {
// do something
}
var url = “http://api.com/get.php?user=2”; // URL of the external script
var script = document.createElement('script');
script.setAttribute('src', url);
// load the script
document.getElementsByTagName('head')[0].appendChild(script);
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
MORE INFO: http://sydl.me/evqQVJ](https://image.slidesharecdn.com/becomingnative-110316192204-phpapp02/85/Mobile-Web-App-Development-Becoming-native-8-320.jpg)
Mobile Web App Development (Becoming native)
- 1. MOBILE WEB APP DEVELOPMENT (BECOMING NATIVE) DMD12 BSc 17th March 2011 Syd Lawrence SIT BACK / SIT BACK LISTEN UP LISTEN UP slideshare.net/sydlawrence
- 2. NO RELOAD SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/barjack/135263802/
- 3. A SINGLE HTML PAGE SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/ewanrayment/1250049249/
- 4. HIDE UNNEEDED ELEMENTS SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/rsms/1320004520/
- 5. RETREIVE THE DATA SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/29503348@N03/4915763648/
- 6. FROM REMOTE API SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/29503348@N03/4915763648/
- 7. JSONP SIT BACK / SIT BACK LISTEN UP LISTEN UP http://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 javascript function callback(data) { // do something } var url = “http://api.com/get.php?user=2”; // URL of the external script var script = document.createElement('script'); script.setAttribute('src', url); // load the script document.getElementsByTagName('head')[0].appendChild(script); SIT BACK / SIT BACK LISTEN UP LISTEN UP MORE INFO: http://sydl.me/evqQVJ
- 9. CACHE THE DATA SIT BACK / SIT BACK LISTEN UP LISTEN UP http://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 UP http://www.flickr.com/photos/drp/14437926/
- 12. MODIFY THE DISPLAYED DATA SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/familymwr/4930275692/
- 13. REPLACE THE DISPLAYED DATA SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/zephyrance/2865451246/
- 14. JAVASCRIPT FRAMEWORKS SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/29503348@N03/4915763648/
- 15. DO NOT OVERUSE! SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/bayat/296445681/
- 16. THINK BANDWIDTH SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/pdxdj/253103371/
- 17. THINK SPEED SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/johnkay/5070219963/
- 18. SENCHA TOUCH sydl.me/fPd02C SIT BACK / SIT BACK LISTEN UP LISTEN UP
- 19. JQUERY MOBILE sydl.me/eGzOcE SIT BACK / SIT BACK LISTEN UP LISTEN UP
- 20. IWEBKIT sydl.me/eNt5uU SIT BACK / SIT BACK LISTEN UP LISTEN UP
- 21. NEXT STEP SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/stuckincustoms/219819675/
- 22. PHONEGAP sydl.me/hLUJz3 SIT BACK / SIT BACK LISTEN UP LISTEN UP
- 23. APPCELERATOR sydl.me/gYXZIC SIT BACK / SIT BACK LISTEN UP LISTEN UP
- 24. APPMOBI sydl.me/eAp2oA SIT BACK / SIT BACK LISTEN UP LISTEN UP
- 25. WHY THIS STEP? SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/benterrett/191625180/
- 26. APP STORES SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/agizienski/3778956583/
- 27. CAMERAS SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/captkodak/271872436/
- 28. COMPASS SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/curious_gregor/5062538980/
- 29. FILES SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/davemorris/4400953131/
- 30. NOTIFICATIONS SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/funtik/1175522045/
- 31. RECORD MEDIA SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/adambowie/544200097/
- 32. WANT TO KNOW MORE http://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 BACK http://www.easyapns.com/ LISTEN UP LISTEN UP http://js-html5.com/tagged/mobile
- 33. A LITTLE TASK DUE TODAY (NOT REALLY THAT OPTIONAL, BUT UP TO YOU IF YOU WANT TO DO IT) Create your API Setup your database Populate with sample data SIT BACK / SIT BACK Create your getters and setters LISTEN UP LISTEN UP Test
- 34. HOW DID YOU DO? SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/annagaycoan/3750144703/
- 35. A LITTLE TASK DUE NEXT WEEK (GROUP WORK) In your groups 1 person sort out the HTML & CSS view 1 person play around with the web -> native apps SIT BACK / SIT BACK Get some kind of application onto a mobile device LISTEN UP LISTEN UP 1 person project manage and work out what is left to do
- 36. CODE SAMPLES AND CONCEPTS Mobile websites tips & tricks (@fakedarren) Cache Manifest localStorage SIT BACK / SIT BACK Online / Offline Events LISTEN UP LISTEN UP JSONP