Advantages of Hiring UIUX Design Service Providers for Your Business
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/
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