This document provides an overview of HTML5 and introduces several new HTML5 features including new tags, JavaScript APIs, and how to implement drag and drop files, local storage, and web sockets. It includes code examples and links to resources for implementing these new features. The document concludes with a discussion and links to code examples.

1. HTML 5 BOOTCAMP

2. NEW BAMBOO
Laurie Young Ismael Celis
@wildfalcon @ismasan

3. PROCESS - HANDLED
with a sword!

4. www.flickr.com/photos/sprengben

5. TIMETABLE
Quick Summary - Why HTML 5
What is HTML 5 - A Tour
Write Some Code

6. WEB DEVELOPERS?

7. WEB DEVELOPERS?
www.flickr.com/ivanwalsh

8. WEB DEVELOPERS?

9. WEB DEVELOPERS?

11. WHAT ABOUT FLASH
Flash has some issues:
• Vendor Specific
• Licence Costs
• Mobile Performance
• No iOS

14. WHAT IS HTML 5

15. NEW TAGS (BORING)
<section>
<article>
<header>
<nav>
<audio>
<video>

16. 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

17. http://daftpunk.themaninblue.com/

18. http://slides.html5rocks.com/#indexed-db

19. http://olivernn.github.com/flipper/

20. https://github.com/wildfalcon/Photo-Pinboard

21. http://eyas.local:4000/foo/pinboard

22. NOW WRITE SOME CODE

23. SET UP TEAMS

24. DRAG AND DROP FILES

25. To Drag and Drop Files
var 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

26. LOCAL STORAGE

27. LOCAL STORAGE
• Key-Value store
• String data
• Effective 5mb limit

28. LOCAL STORAGE API
To save a value
localStorage.setItem(key, value)
To read a value
var value = localStorage.getItem(key)
To count items
var count = localStorage.length
http://bit.ly/mlW8sk

29. WEB SOCKETS

30. Web Socket Server
Web Browsers

31. To Open a Web Socket
socket = 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

32. PUSHER
http://pusher.com

33. CODE STRUCTURE

34. http://bit.ly/mjc1mG

35. DISCUSSION

36. THE END
Code can be found at
https://github.com/ismasan/websockets_examples
http://diveintohtml5.org
http://slides.html5rocks.com
http://www.pusher.com
https://gist.github.com/299789