Mobile web app development

1,919 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

×