HTML5 ~= HTML + CSS + JS APIs<br />HTML5<br />Web Development to the next level<br />
Rough Timeline of Web Technologies<br />
JS APIs<br /><ul><li>Client Side Storage (Web SQL Database, App Cache, Web Storage)
Communication (Web Socket, Worker Workers)
Desktop Experience (Notification, Drag and Drop API)</li></li></ul><li>Client Side Storage <br />Web Storage<br />New meth...
sessionStorage – stores data for one session</li></li></ul><li>Client Side Storage <br />App Cache<br />Web application th...
Communication<br />Web Socket<br />Bi-directional, full duplex communications channels, over a singel Transmission Control...
Client Side Storage <br />Web SQL Database<br />Bring SQL to the client side.<br />
Communication<br />Worker Workers<br />Possibility to load a JS file dynamically and then have it process code in a backgr...
Desktop Experience<br />Notification<br />Pop up notification desktop app-style.<br />
Desktop Experience<br />Drag and Drop API<br />Simply drag and drop object.<br />
Geolocation<br />Detect where you are now.<br />
HTML<br /><ul><li>Semantics (New tags, Link relation, Microdata)
Accessibility (ARIA – Accessibility Rich Internet Applications)
Web Form 2.0 (Input fields)
Multimedia (Audio Tag, Video Tag)
2D and 3D Drawing (Canvas, Web GL, SVG)</li></li></ul><li>Semantics<br />New tags<br />
New tags<br />
Semantics<br />Link relations<br />- A way to explain why you’re pointing to another page.<br />- <a href=“somelink.html” ...
Link relations<br />
Semantics<br />Microdata<br />
Microdata<br />
Accessibility <br />ARIA (Accessible Rich Internet Application)<br />- Defines a way to make web content and web applicati...
Web Form 2.0<br />New form field types<br /><ul><li>Slider
Color field
Search text field
Email field
Digit (number) field
Telephone field
etc</li></li></ul><li>Multimedia<br />Video tag and Audio tag<br /><ul><li>Playing video or audio without plugin.</li></li...
Upcoming SlideShare
Loading in...5
×

Google Dev Fest HTML5 Presentation

2,680

Published on

The slide presentation about HTML5 that I created inspired by GoogleDevFest Singapore 2010.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

Google Dev Fest HTML5 Presentation

  1. 1. HTML5 ~= HTML + CSS + JS APIs<br />HTML5<br />Web Development to the next level<br />
  2. 2. Rough Timeline of Web Technologies<br />
  3. 3. JS APIs<br /><ul><li>Client Side Storage (Web SQL Database, App Cache, Web Storage)
  4. 4. Communication (Web Socket, Worker Workers)
  5. 5. Desktop Experience (Notification, Drag and Drop API)</li></li></ul><li>Client Side Storage <br />Web Storage<br />New methods for storing data on the client<br /><ul><li>localStorage – storages data with no limit
  6. 6. sessionStorage – stores data for one session</li></li></ul><li>Client Side Storage <br />App Cache<br />Web application that work offline.<br />
  7. 7. Communication<br />Web Socket<br />Bi-directional, full duplex communications channels, over a singel Transmission Control Protocol (TCP) socket, designed to be implemented in web browsers and web servers.<br />
  8. 8.
  9. 9. Client Side Storage <br />Web SQL Database<br />Bring SQL to the client side.<br />
  10. 10. Communication<br />Worker Workers<br />Possibility to load a JS file dynamically and then have it process code in a background process, not affecting the user interface and it’s response level.<br />
  11. 11. Desktop Experience<br />Notification<br />Pop up notification desktop app-style.<br />
  12. 12. Desktop Experience<br />Drag and Drop API<br />Simply drag and drop object.<br />
  13. 13. Geolocation<br />Detect where you are now.<br />
  14. 14. HTML<br /><ul><li>Semantics (New tags, Link relation, Microdata)
  15. 15. Accessibility (ARIA – Accessibility Rich Internet Applications)
  16. 16. Web Form 2.0 (Input fields)
  17. 17. Multimedia (Audio Tag, Video Tag)
  18. 18. 2D and 3D Drawing (Canvas, Web GL, SVG)</li></li></ul><li>Semantics<br />New tags<br />
  19. 19. New tags<br />
  20. 20. Semantics<br />Link relations<br />- A way to explain why you’re pointing to another page.<br />- <a href=“somelink.html” rel=“nofollow” >some text</a><br />
  21. 21. Link relations<br />
  22. 22. Semantics<br />Microdata<br />
  23. 23. Microdata<br />
  24. 24. Accessibility <br />ARIA (Accessible Rich Internet Application)<br />- Defines a way to make web content and web applications more accessible to people with disabilities.<br />
  25. 25. Web Form 2.0<br />New form field types<br /><ul><li>Slider
  26. 26. Color field
  27. 27. Search text field
  28. 28. Email field
  29. 29. Digit (number) field
  30. 30. Telephone field
  31. 31. etc</li></li></ul><li>Multimedia<br />Video tag and Audio tag<br /><ul><li>Playing video or audio without plugin.</li></li></ul><li>2D and 3D Drawing<br />Canvas<br />- Allows for dynamic, scriptable rendering of 2D shapes and bitmap images.<br />
  32. 32. 2D and 3D Drawing<br />Canvas 3D (WebGL)<br />- Allows for dynamic, scriptable rendering of 3D shapes and bitmap images.<br />
  33. 33. 2D and 3D Drawing<br />SVG (Scalable Vector Graphic)<br />- Specification of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic.<br />
  34. 34. CSS<br /><ul><li>New selectors
  35. 35. Typography
  36. 36. Visuals</li></ul> - Text wrapping <br /> - Columns <br /> - Text Stroke <br /> - Opacity<br /> - HSL<br /> - Rounded Corners<br /> - Gradients<br /> - Shadow<br /> - Transitions, Transforms and Animations <br />
  37. 37. New selector<br />
  38. 38. Typography<br />New font support<br />
  39. 39. Visuals<br /><ul><li>Text wrapping
  40. 40. Columns
  41. 41. Text Stroke
  42. 42. Opacity
  43. 43. HSL
  44. 44. Rounded Corners
  45. 45. Gradients
  46. 46. Shadow</li></li></ul><li>And the rest…<br /><ul><li>Transitions
  47. 47. Transforms
  48. 48. Animations</li></li></ul><li>Thank you<br />May the force be with you…<br />
  1. A particular slide catching your eye?

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

×