1. HTML5 Programming
Nam Ho
KMS Technology

2. HTML5 won’t be ready until 2022!

3. Do I need to wait for
the specifications are complete?

4. Real-world browser support is what
matters!

5. A desktop example
http://www.pirateslovedaisies.com/

6. A mobile example
http://m.microsoft.com/windowsphone/en-us/demo/index.html

7. The current state of HTML5 support
http://caniuse.com/

9. Why programming?

10. This presentation doesn’t cover
• Semantics & Markups
• HTML5 Forms
• Web Workers
• WebGL
• CSS3
• SVG
• …

11. This presentation covers
• Video
• Canvas
• WebSocket
• Data Storage
• Offline
• FileSystem
• Geolocation

12. Multimedia
These specifications defines the video/audio elements with all the available
methods, attributes and events. Through the new APIs you can access, control
and manipulate timeline data and network states of the files. With the coming
additions to the APIs you will be able to read and write raw data to audio files
(Audio Data API) or manipulate captions in videos (Timed Track API).

13. Video
• Native video
• Video tag
– <video src=“light.ogv” controls autoplay />
• Formats
– .mp4 = H.264 + AAC
– .ogg/.ogv = Theora + Vorbis
– .webm = VP8 + Vorbis
• Legacy browser fallback

14. Audio
• Native audio
• Audio tag
– <audio src=“hello.ogg” controls />
• Formats
– .ogg/.oga
– .mp3
– .wav
– .aac (Advanced Audio Coding)
• Legacy browser fallback

15. MIME types
Format Attribute type MIME type
.ogg video/ogg application/ogg
.mp4 video/mp4 video/mpeg
.webm video/webm video/webm
.mp3 audio/mp3 audio/mpeg
.wav audio/wav audio/wav
.aac audio/aac audio/aac
.mp4 audio/mp4 audio/mp4

16. Canvas
The canvas element provides scripts with a resolution-dependent bitmap
canvas, which can be used for rendering graphs, game graphics, or other visual
images on the fly.

17. Canvas
• Native drawing surface
• Canvas tag
– <canvas id=“square” width=“10” height=“10” />
• JavaScript API for 2D drawing

18. WebSocket
To enable Web applications to maintain bidirectional communications with
server-side processes, this specification introduces the WebSocket interface.

19. WebSocket
• WebSocket object
• New protocol
– ws://html5rocks.websocket.org/echo
• Establishing an open connection
– Client and server can send data at any time
– Realtime web application

20. WebSocket example

21. Web Storage
This specification introduces two related mechanisms, similar to HTTP session
cookies, for storing structured data on the client side.

22. Web storage
• Avoiding HTTP overhead of cookies
• Key-value pairs
• Local storage
• Session storage
• Quota
– Needing user confirmation if exceeding storage
capability

23. Indexed Database
This specification defines APIs for a database of records holding simple values
and hierarchical objects. Each record consists of a key and some value.
Moreover, the database maintains indexes over records it stores. An application
developer directly uses an API to locate records either by their key or by using an
index. A query language can be layered on this API. An indexed database can be
implemented using a persistent B-tree data structure.

24. Indexed database
• Object based data store
• Asynchronous API
• Execute commands and open cursor inside
transactions

25. Opening indexed database

26. Creating an Object Store

27. Storing data into Object Store

28. Querying data by cursor

29. Offline
In order to enable users to continue interacting with Web applications and
documents even when their network connection is unavailable — for
instance, because they are traveling outside of their ISP's coverage area —
authors can provide a manifest which lists the files that are needed for the Web
application to work offline and which causes the user's browser to keep a copy
of the files for use offline.

30. Application cache
• Cache resources locally
– HTML, CSS, JavaScript, images, etc.
• Use a manifest file to specify resources in order to
cache
• Download caching resources in a transaction
• window.applicationCache
• Add manifest attribute to html tag
– manifest=“example.appcache”
• MIME type
– text/cache-manifest appcache
• Clear cache: chrome://appcache-internals/

31. Manifest file
CACHE MANIFEST
#v1.0.0
CACHE
index.html
style.css
Scripts/main.js
images/logo.png
FALLBACK
time.js fallback_time.js

32. Updating to new version

33. FileSystem
This specification defines an API to navigate file system hierarchies, and defines
a means by which a browser may expose sandboxed sections of a user's local
file system to web applications.

34. File system
• Sandboxed environment
• Allow create/edit/delete files and directories

35. Geolocation
The Geolocation API defines a high-level interface to location information
associated only with the device hosting the implementation, such as latitude
and longitude. The API itself is agnostic of the underlying location information
sources. Common sources of location information include Global Positioning
System (GPS) and location inferred from network signals such as IP address,
RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs, as well as
user input. No guarantee is given that the API returns the device's actual
location.

36. Geolocation
• Allow users to share their location for location-aware services
– Application >> Browser >> 3rd services such as Skyhook or Google
• Privacy
– Users are asked to share their location
• navigator.geolocation
– getCurrentPosition
– watchPosition
• Location metadata
– latitude/longtitude/altitude
– accuracy/altitudeAccuracy
– heading/speed

37. Resources
• HTML5 rocks
– http://www.html5rocks.com/en/
• Modernizr
– http://www.modernizr.com/
• Mobile HTML5
– http://mobilehtml5.org/
• Source code
– http://bit.ly/tZ6eBn

38. Q & A
Email: namho@kms-technology.com
Twitter: @hotrannam

39. Thank you for joining!