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

1,959 views

Published on

My lecture to Winchester Uni students, 3rd March 2011

Published in: Technology, Sports
  • Be the first to comment

  • Be the first to like this

Mobile web app development

  1. 1. MOBILE WEB APPDEVELOPMENTDMD12 BSc3rd March 2011Syd Lawrence SIT BACK / SIT BACK LISTEN UP LISTEN UPslideshare.net/sydlawrence
  2. 2. WHAT TO SUPPORT? SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/ladamaris70/4202034430/
  3. 3. NATIVE OR WEB SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/kingofmonks/22988490/
  4. 4. NATIVE ISFASTER SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/pdxdj/253103371/
  5. 5. THE WEB ISNOT OFFLINE SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/gabrielfigueiredo/4333239008/
  6. 6. HTML5& RELATED TECH SIT BACK / SIT BACK LISTENUP LISTEN UP
  7. 7. NATIVE ISFASTER SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/pdxdj/253103371/
  8. 8. THE WEB ISNOT OFFLINE SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/kingofmonks/22988490/
  9. 9. SERVERDATA STORE SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/kurtz433/242712215/
  10. 10. HTML & JSVIEW SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/ewanrayment/1250049249/
  11. 11. MAKE AN API SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/thomashawk/2671536366/
  12. 12. XML SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/vlashton/1116629113/
  13. 13. JSON SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/sabeth718/4975388271/
  14. 14. GET SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/29503348@N03/4915763648/
  15. 15. SET SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/deniscollette/5454729294/
  16. 16. PLAN YOUR API SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/jingleslenobel/4326713557/
  17. 17. A LITTLETASK DUETODAY(TOTALLY OPTIONAL)Create an HTML page with an image.Create a custom eventCreate a button which when clicked dispatches the custom eventListen out for the custom event, and 1 second after the event, manipulate the image insome way. SIT BACK / SIT BACK LISTEN UP LISTEN UPYou may choose how the image changes
  18. 18. // include EventTarget (http://sydl.me/fMQbZ0) <code/>var target = new EventTarget();document.body.onload = function() { document.getElementById(button).addEventListener(click,function() { target.dispatch(custom_event); });}doSomething = function() { // wait 1 second (1000 milliseconds) setTimeout(switchImage,1000);}switchImage = function() { document.getElementById(hover_image).src = "http://farm3.static.flickr.com/2181/2358714455_34201aaf45_m.jpg";}target.addListener(custom_event,doSomething); SIT BACK / SIT BACK LISTEN UP LISTEN UPMORE INFO: http://sydl.me/gcI2iQ
  19. 19. HOW DIDYOU DO? SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/annagaycoan/3750144703/
  20. 20. A LITTLETASK DUENEXT WEEK(OPTIONAL BUT PRETTY MUCH ESSENTIAL)With regards to your project. SIT BACK / SIT BACKPlan what API methods you need. LISTEN UP LISTEN UPPlan your database for the server side of the application
  21. 21. CODE SAMPLESAND CONCEPTSMobile websites tips & tricks (@fakedarren)Cache ManifestlocalStorage SIT BACK / SIT BACKOnline / Offline Events LISTEN UP LISTEN UPJSONP

×