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