Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Google Dev Fest HTML5 Presentation

3,007 views

Published on

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

Published in: Technology
  • Be the first to comment

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 />

×