HTML 5 BOOTCAMP
NEW BAMBOOLaurie Young   Ismael Celis@wildfalcon      @ismasan
PROCESS - HANDLED     with a sword!
www.flickr.com/photos/sprengben
TIMETABLEQuick Summary - Why HTML 5  What is HTML 5 - A Tour     Write Some Code
WEB DEVELOPERS?
WEB DEVELOPERS? www.flickr.com/ivanwalsh
WEB DEVELOPERS?
WEB DEVELOPERS?
WHAT ABOUT FLASH          Flash has some issues:      •     Vendor Specific      •      Licence Costs      •    Mobile Perf...
WHAT IS HTML 5
NEW TAGS (BORING)     <section>     <article>      <header>        <nav>       <audio>       <video>
NEW JAVASCRIPT APIS• Cross-document messaging     • Directories and Filesystem• Web workers                  • Web Sockets...
http://daftpunk.themaninblue.com/
http://slides.html5rocks.com/#indexed-db
http://olivernn.github.com/flipper/
https://github.com/wildfalcon/Photo-Pinboard
http://eyas.local:4000/foo/pinboard
NOW WRITE SOME CODE
SET UP TEAMS
DRAG AND DROP FILES
To Drag and Drop Filesvar stopPropagation = function(event){  event.stopPropagation();  event.preventDefault();}document.a...
LOCAL STORAGE
LOCAL STORAGE • Key-Value store • String data • Effective 5mb limit
LOCAL STORAGE API          To save a value   localStorage.setItem(key, value)         To read a valuevar value = localStor...
WEB SOCKETS
Web Socket ServerWeb Browsers
To Open a Web Socketsocket = new WebSocket("ws://10.21.6.87:8080/channel");                     To React to a Message     ...
PUSHER         http://pusher.com
CODE STRUCTURE
http://bit.ly/mjc1mG
DISCUSSION
THE END               Code can be found athttps://github.com/ismasan/websockets_examples            http://diveintohtml5.o...
Html 5 boot camp
Html 5 boot camp
Html 5 boot camp
Upcoming SlideShare
Loading in …5
×

Html 5 boot camp

1,846 views

Published on

HTML5 Bootcamp - A presentation at Spa 2011 Conference in London

Published in: Technology
  • Be the first to comment

Html 5 boot camp

  1. 1. HTML 5 BOOTCAMP
  2. 2. NEW BAMBOOLaurie Young Ismael Celis@wildfalcon @ismasan
  3. 3. PROCESS - HANDLED with a sword!
  4. 4. www.flickr.com/photos/sprengben
  5. 5. TIMETABLEQuick Summary - Why HTML 5 What is HTML 5 - A Tour Write Some Code
  6. 6. WEB DEVELOPERS?
  7. 7. WEB DEVELOPERS? www.flickr.com/ivanwalsh
  8. 8. WEB DEVELOPERS?
  9. 9. WEB DEVELOPERS?
  10. 10. WHAT ABOUT FLASH Flash has some issues: • Vendor Specific • Licence Costs • Mobile Performance • No iOS
  11. 11. WHAT IS HTML 5
  12. 12. NEW TAGS (BORING) <section> <article> <header> <nav> <audio> <video>
  13. 13. NEW JAVASCRIPT APIS• Cross-document messaging • Directories and Filesystem• Web workers • Web Sockets• Canvas • Browser history• LocalStorage management• Web SQL Database • Geolocation• Indexed Database API • Drag-and-drop• Directories and Filesystem • File API• Web Sockets • File Writer• Device Orientation • Desktop Notifications
  14. 14. http://daftpunk.themaninblue.com/
  15. 15. http://slides.html5rocks.com/#indexed-db
  16. 16. http://olivernn.github.com/flipper/
  17. 17. https://github.com/wildfalcon/Photo-Pinboard
  18. 18. http://eyas.local:4000/foo/pinboard
  19. 19. NOW WRITE SOME CODE
  20. 20. SET UP TEAMS
  21. 21. DRAG AND DROP FILES
  22. 22. To Drag and Drop Filesvar stopPropagation = function(event){ event.stopPropagation(); event.preventDefault();}document.addEventListener(dragenter, stopPropagation, false);document.addEventListener(dragexit, stopPropagation, false);document.addEventListener(dragover, stopPropagation, false);document.addEventListener(drop, function (event) { // your code here // files available as event.dataTransfer.files}); To Read Files (Asynchronously) var fileReader = new FileReader(); fileReader.onloadend = function(event){ // Your code // (file data is in event.target.result) } fileReader.readAsDataURL(file); http://bit.ly/jxtJWh
  23. 23. LOCAL STORAGE
  24. 24. LOCAL STORAGE • Key-Value store • String data • Effective 5mb limit
  25. 25. LOCAL STORAGE API To save a value localStorage.setItem(key, value) To read a valuevar value = localStorage.getItem(key) To count items var count = localStorage.length http://bit.ly/mlW8sk
  26. 26. WEB SOCKETS
  27. 27. Web Socket ServerWeb Browsers
  28. 28. To Open a Web Socketsocket = new WebSocket("ws://10.21.6.87:8080/channel"); To React to a Message socket.onmessage = function(event) { // your code event.data ... } To Send a Message socket.send("a string") http://bit.ly/mMerem
  29. 29. PUSHER http://pusher.com
  30. 30. CODE STRUCTURE
  31. 31. http://bit.ly/mjc1mG
  32. 32. DISCUSSION
  33. 33. THE END Code can be found athttps://github.com/ismasan/websockets_examples http://diveintohtml5.org http://slides.html5rocks.com http://www.pusher.com https://gist.github.com/299789

×