HTML5 Programming             Nam Ho      KMS Technology
HTML5 won’t be ready until 2022!
Do I need to wait forthe specifications are complete?
Real-world browser support is what             matters!
A desktop example    http://www.pirateslovedaisies.com/
A mobile examplehttp://m.microsoft.com/windowsphone/en-us/demo/index.html
The current state of HTML5 support      http://caniuse.com/
Why programming?
This presentation doesn’t cover•   Semantics & Markups•   HTML5 Forms•   Web Workers•   WebGL•   CSS3•   SVG•   …
This presentation covers•   Video•   Canvas•   WebSocket•   Data Storage•   Offline•   FileSystem•   Geolocation
MultimediaThese specifications defines the video/audio elements with all the availablemethods, attributes and events. Thro...
Video• Native video• Video tag  – <video src=“light.ogv” controls autoplay />• Formats  – .mp4 = H.264 + AAC  – .ogg/.ogv ...
Audio• Native audio• Audio tag  – <audio src=“hello.ogg” controls />• Formats  – .ogg/.oga  – .mp3  – .wav  – .aac (Advanc...
MIME typesFormat   Attribute type   MIME type.ogg     video/ogg        application/ogg.mp4     video/mp4        video/mpeg...
CanvasThe canvas element provides scripts with a resolution-dependent bitmapcanvas, which can be used for rendering graphs...
Canvas• Native drawing surface• Canvas tag  – <canvas id=“square” width=“10” height=“10” />• JavaScript API for 2D drawing
WebSocketTo enable Web applications to maintain bidirectional communications withserver-side processes, this specification...
WebSocket• WebSocket object• New protocol  – ws://html5rocks.websocket.org/echo• Establishing an open connection  – Client...
WebSocket example
Web StorageThis specification introduces two related mechanisms, similar to HTTP sessioncookies, for storing structured da...
Web storage•   Avoiding HTTP overhead of cookies•   Key-value pairs•   Local storage•   Session storage•   Quota    – Need...
Indexed DatabaseThis specification defines APIs for a database of records holding simple valuesand hierarchical objects. E...
Indexed database• Object based data store• Asynchronous API• Execute commands and open cursor inside  transactions
Opening indexed database
Creating an Object Store
Storing data into Object Store
Querying data by cursor
OfflineIn order to enable users to continue interacting with Web applications anddocuments even when their network connect...
Application cache• Cache resources locally   – HTML, CSS, JavaScript, images, etc.• Use a manifest file to specify resourc...
Manifest fileCACHE MANIFEST#v1.0.0CACHEindex.htmlstyle.cssScripts/main.jsimages/logo.pngFALLBACKtime.js fallback_time.js
Updating to new version
FileSystemThis specification defines an API to navigate file system hierarchies, and definesa means by which a browser may...
File system• Sandboxed environment• Allow create/edit/delete files and directories
GeolocationThe Geolocation API defines a high-level interface to location informationassociated only with the device hosti...
Geolocation• Allow users to share their location for location-aware services    – Application >> Browser >> 3rd services s...
Resources• HTML5 rocks  – http://www.html5rocks.com/en/• Modernizr  – http://www.modernizr.com/• Mobile HTML5  – http://mo...
Q & AEmail: namho@kms-technology.comTwitter: @hotrannam
Thank you for joining!
HTML5 Programming
Upcoming SlideShare
Loading in...5
×

HTML5 Programming

1,045

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,045
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • http://introducinghtml5.com/examples/ch07/time/http://ie.microsoft.com/testdrive/HTML5/KidsBook/
  • HTML5 Programming

    1. 1. HTML5 Programming Nam Ho KMS Technology
    2. 2. HTML5 won’t be ready until 2022!
    3. 3. Do I need to wait forthe specifications are complete?
    4. 4. Real-world browser support is what matters!
    5. 5. A desktop example http://www.pirateslovedaisies.com/
    6. 6. A mobile examplehttp://m.microsoft.com/windowsphone/en-us/demo/index.html
    7. 7. The current state of HTML5 support http://caniuse.com/
    8. 8. Why programming?
    9. 9. This presentation doesn’t cover• Semantics & Markups• HTML5 Forms• Web Workers• WebGL• CSS3• SVG• …
    10. 10. This presentation covers• Video• Canvas• WebSocket• Data Storage• Offline• FileSystem• Geolocation
    11. 11. MultimediaThese specifications defines the video/audio elements with all the availablemethods, attributes and events. Through the new APIs you can access, controland manipulate timeline data and network states of the files. With the comingadditions 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).
    12. 12. 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
    13. 13. Audio• Native audio• Audio tag – <audio src=“hello.ogg” controls />• Formats – .ogg/.oga – .mp3 – .wav – .aac (Advanced Audio Coding)• Legacy browser fallback
    14. 14. MIME typesFormat 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
    15. 15. CanvasThe canvas element provides scripts with a resolution-dependent bitmapcanvas, which can be used for rendering graphs, game graphics, or other visualimages on the fly.
    16. 16. Canvas• Native drawing surface• Canvas tag – <canvas id=“square” width=“10” height=“10” />• JavaScript API for 2D drawing
    17. 17. WebSocketTo enable Web applications to maintain bidirectional communications withserver-side processes, this specification introduces the WebSocket interface.
    18. 18. 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
    19. 19. WebSocket example
    20. 20. Web StorageThis specification introduces two related mechanisms, similar to HTTP sessioncookies, for storing structured data on the client side.
    21. 21. Web storage• Avoiding HTTP overhead of cookies• Key-value pairs• Local storage• Session storage• Quota – Needing user confirmation if exceeding storage capability
    22. 22. Indexed DatabaseThis specification defines APIs for a database of records holding simple valuesand hierarchical objects. Each record consists of a key and some value.Moreover, the database maintains indexes over records it stores. An applicationdeveloper directly uses an API to locate records either by their key or by using anindex. A query language can be layered on this API. An indexed database can beimplemented using a persistent B-tree data structure.
    23. 23. Indexed database• Object based data store• Asynchronous API• Execute commands and open cursor inside transactions
    24. 24. Opening indexed database
    25. 25. Creating an Object Store
    26. 26. Storing data into Object Store
    27. 27. Querying data by cursor
    28. 28. OfflineIn order to enable users to continue interacting with Web applications anddocuments even when their network connection is unavailable — forinstance, because they are traveling outside of their ISPs coverage area —authors can provide a manifest which lists the files that are needed for the Webapplication to work offline and which causes the users browser to keep a copyof the files for use offline.
    29. 29. 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/
    30. 30. Manifest fileCACHE MANIFEST#v1.0.0CACHEindex.htmlstyle.cssScripts/main.jsimages/logo.pngFALLBACKtime.js fallback_time.js
    31. 31. Updating to new version
    32. 32. FileSystemThis specification defines an API to navigate file system hierarchies, and definesa means by which a browser may expose sandboxed sections of a users localfile system to web applications.
    33. 33. File system• Sandboxed environment• Allow create/edit/delete files and directories
    34. 34. GeolocationThe Geolocation API defines a high-level interface to location informationassociated only with the device hosting the implementation, such as latitudeand longitude. The API itself is agnostic of the underlying location informationsources. Common sources of location information include Global PositioningSystem (GPS) and location inferred from network signals such as IP address,RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs, as well asuser input. No guarantee is given that the API returns the devices actuallocation.
    35. 35. 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
    36. 36. Resources• HTML5 rocks – http://www.html5rocks.com/en/• Modernizr – http://www.modernizr.com/• Mobile HTML5 – http://mobilehtml5.org/• Source code – http://bit.ly/tZ6eBn
    37. 37. Q & AEmail: namho@kms-technology.comTwitter: @hotrannam
    38. 38. Thank you for joining!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×