HTML5 Presentation

7,836 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
7,836
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
276
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 Presentation

  1. 1. buzz<br />buzz<br />buzz<br />buzz<br />buzz<br />buzz<br />buzz<br />buzz<br />buzz<br />buzz<br />HTML5???<br />buzz<br />buzz<br />buzz<br />buzz<br />buzz<br />buzz<br />buzz<br />buzz<br />
  2. 2. Now HTML5…<br />What is that?<br />
  3. 3. HTML5 ~= HTML + CSS3 + JavaScript APIs <br />
  4. 4. HTML<br /><ul><li>Draft Specification of the next iteration of HTML
  5. 5. HTML 4 (1997) and XHTML 1 (2000)
  6. 6. Clearer separation of data and layout/style
  7. 7. Makes what you would already do in HTML easier
  8. 8. New Content Tags
  9. 9. <nav>, <section>, <header>, <article>, <aside>, <summary>
  10. 10. New Media Tags
  11. 11. <video>, <audio>, <figure>
  12. 12. New Dynamic drawing <canvas> graphic tag
  13. 13. A tag that allows programmatic drawing via JavaScript
  14. 14. Inline metadata to help search engines identify content
  15. 15. <span itemprop=“agency”>Moxie Interactive</span></li></li></ul><li>CSS3<br /><ul><li>Specification currently under active development since 2005
  16. 16. Improved selectors for determining which content to effect
  17. 17. (good support across modern browsers)
  18. 18. Embeddable font support (TTF, OTF)
  19. 19. Improved text layout with column support
  20. 20. Rounded corners, Reflections (WebKit)
  21. 21. Multiple backgrounds, transforms (rotation, scale, etc), animations (WebKit)</li></li></ul><li>JavaScript APIs<br /><ul><li>Local data storage
  22. 22. Application Cache (offline access)
  23. 23. Multitasking (Worker processes)
  24. 24. Sockets (real-time server communication: chat, games, etc.)
  25. 25. Native Drag and Drop events
  26. 26. GeoLocation
  27. 27. Lots of active 3rd party libraries (Prototype, jQuery, etc)</li></li></ul><li>The Good News!<br /><ul><li>Good support on modern mobile devices (iOS, Android)
  28. 28. Simpler, more intuitive syntax
  29. 29. Video and Audio without requiring a plugin
  30. 30. Incremental improvements to previous HTML challenges
  31. 31. Much needed next step in HTML evolution
  32. 32. Creative enhancements: Rounded corners, gradients, text layout
  33. 33. Emergence of more advanced technologies such as O3D (WebGL)
  34. 34. Easier SEO than plugin technologies
  35. 35. Promising Mobile JS Frameworks (Sencha, jQTouch)</li></li></ul><li>The Bad News<br /><ul><li>The HTML5 spec is DRAFT and is in ongoing development (change)
  36. 36. Video support is not standardized
  37. 37. Not currently a single codec that all browsers will support
  38. 38. Google WebM (VP 8) (open sourced by Google)
  39. 39. OggTheora (open source)
  40. 40. h.264/MP4 (potential licensing issues)
  41. 41. No supported DRM for video or audio
  42. 42. Currently no support for cue points or alpha (transparent) video</li></li></ul><li>The Bad News…Continued<br /><ul><li>Limited desktop browser support
  43. 43. Only the newest and best have reasonable support
  44. 44. Internet Explorer will not have decent support until IE9
  45. 45. Challenges getting consistent page display across browsers
  46. 46. Graceful page degradation is potentially complex
  47. 47. Currently no designer tools for creating HTML5 animation or interactivity (all must be implemented by a developer)
  48. 48. Limited developer debugging tools</li></li></ul><li>What HTML5 is NOT<br /><ul><li>A magic bullet for all your mobile and desktop-to-mobile woes
  49. 49. A replacement for technologies such as Flash or Silverlight
  50. 50. Immersive RLP’s would be much more time consuming
  51. 51. Certain functionality would not be possible or cost-prohibitive
  52. 52. While HTML5 quickly fixes some small-scale HTML issues (video, audio, layout and fonts), it does not instantly solve architectural needs for large-scale immersive cross-platform applications</li></li></ul><li>Summary<br />Good<br />HTML5 has new standards and features that are long overdue<br />Allows display of multimedia content without need of a plugin<br />Good and rapidly progressing mobile support<br />Bad<br />Spotty desktop browser support<br />Complexity creating consistent experiences across platforms<br />Technical limitations on what can creatively be done<br />
  53. 53. Recommendations<br /><ul><li>Still consider separate desktop and mobile experiences
  54. 54. For HTML-based desktop experiences, consider simplified modular layout for streamlined restyling on mobile platforms
  55. 55. Don’t expect what has been traditionally executed in Flash or Silverlight to be cost-effective or even possible in HTML
  56. 56. Clearly understand the target USER and their needs before recommending a technology
  57. 57. Design for the chosen technology</li></li></ul><li>Related Links<br /><ul><li>http://www.pcworld.com/article/196670/google_announces_webm_video_format_the_future_of_html5_video.html
  58. 58. http://en.wikipedia.org/wiki/HTML5
  59. 59. http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/
  60. 60. http://www.html5test.com/
  61. 61. http://newteevee.com/2010/05/13/hulu-html5-isnt-ready-for-prime-time/
  62. 62. http://www.htmlgoodies.com/daily_news/article.php/386914/Is-HTML-5-the-Flash-Killer-Its-sure-got-the-potential.htm
  63. 63. http://slides.html5rocks.com/
  64. 64. http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/
  65. 65. http://www.sencha.com/products/touch/</li>

×