HTML5 Report Card
4 likes2,098 views
- HTML5 ancillary materials like tutorials and books provide helpful supplements to the official specification and receive a grade of B. - New HTML5 elements like <video> and <canvas> aim to bring rich media and scripting capabilities to the web in a native way, but browser support varies. - The talk evaluated progress on HTML5 features, tools support, and accessibility, generally finding syntax improvements and new APIs promising but implementation lagging in places.
HTML5 Report Card
- 1. HTML5 Report Card Web Directions South 2010
- 3. Michael(tm) Smith [email protected] http://people.w3.org/mike sideshowbarker …on Twitter*, GitHub, etc.
- 4. I work for the W3C in Japan, based at Keio University near Tokyo
- 5. My official W3C title is: Special Missions Subsection Junior Floor Manager
- 6. I’m here today to try to give a progress update on HTML5, in the form of a report card.
- 7. Evaluating HTML5 • HTML5 ancillary materials • HTML5 tools support • HTML5 features spec’ed • HTML5 features implemented • HTML5 and accessibility
- 8. HTML5 ancillary materials: grade: B -
- 9. Ancillary materials are complements to the spec.
- 10. Ancillary materials are the materials that most of us learn from directly (rather than the spec itself).
- 11. HTML5 differences from HTML4 http://w3.org/TR/html5-diff/
- 12. Hands-on/ one-stop shopping http://html5rocks.com/
- 14. Several print books from Jeremy Keith, Bruce Lawson & Remy Sharp, Mark Pilgrim, more
- 18. HTML5: The Markup Language Reference http://dev.w3.org/html5/ markup
- 19. HTML5: The Markup Language Reference is an alternative front-end to the HTML5 spec
- 20. HTML5: Edition for Web Authors http://dev.w3.org/html5/ spec-author-view
- 21. Breaking news: Significant redesign from Ben Schwarz + Anthony Kolber #html5author
- 22. HTML5: Edition for Web Authors is an author-friendly subset of the spec that omits implementation details
- 24. Bonus: Annotated JavaScript/ EcmaScript 5 spec in HTML* http://sideshowbarker.github.com/ es5-spec/
- 26. …from Steven Faulkner @stevefaulkner
- 27. HTML5accessibility.com gives info about which HTML5 user interface features are usable by people who rely upon assistive technology (AT) to use the Web.
- 29. Any ancillary materials I’m missing and should mention next time?
- 30. HTML5 tools support: grade: C+
- 31. HTML5 Validator (stable) http://validator.nu
- 32. HTML5 Validator (unstable) http://w3.org/html/check
- 33. HTML5, CSS3, etc., feature detection http://modernizr.com/
- 34. The professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site! http://html5boilerplate.com/
- 35. Any HTML5 tool/ library support I’m missing and should mention next time?
- 36. Adobe Dreamweaver & Illustrator CS5 HTML5 Packs
- 37. HTML5: The Good Parts • Syntax simplifications: A+ • HTML5 parsing algorithm: A+ • MathML & SVG integration: A+ • New elements/attributes: A+ • New APIs for scripting: A+
- 38. HTML5: More Good Parts • HTML5 design principles: ? • maintain XHTML support: ?
- 40. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd">
- 41. <!doctype html>
- 42. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- 44. New elements • <video> & <audio> (no plugins) • <canvas> (2D/3D image scripting) • <article>, <section>, <header> • <details>, <progress>, <meter>... • <ruby> (annotations) • all SVG elements (MathML too)
- 45. New attributes • for client-side validation of forms + form controls: date picker, &c. • draggable (drag-and-drop) • marking up context menus • contenteditable (editable pages) • spellcheck (turn off spell checking)
- 46. Crap removal •<frame>, <frameset> • <a name> • more...
- 47. New APIs for scripting • API for <video> & <audio> • 2D drawing API for <canvas> • 3D <canvas> API: WebGL* • getElementsByClassName() • innerHTML and more…
- 48. New APIs for scripting • Web Storage (local + session) • Indexed Database (non-SQL) • Web Messaging (cross-doc/postmg+) • Web Workers • WebSocket API + Protocol
- 49. “Friends of HTML5” APIs •Geolocation • Device Orientation/Motion • File API (w/ HTML5 Drag & Drop) • Selectors API • Audio API* (sampling+synthesis)
- 50. “HTML5” has become shorthand for “The Open Web Platform”.
- 51. Web-Platform formats: HTML5, CSS3, SVG, ARIA, and… JavaScript
- 53. HTML design principles • Support existing content • Ensure interoperability • Precisely define UA behavior • Handle errors (non-draconian) • Evolution not revolution • “Priority of constituencies”
- 54. Important point: HTML5 includes XHTML
- 55. Even more important point: IE9+ fully supports XHTML
- 56. Grading some specific HTML5 features
- 57. Two ways to grade spec features • Does the feature meet market needs and user and developer needs well or not? • Is the feature currently well- supported in browsers or not?
- 58. Let’s start by grading some features on how well they meet market/ user/developer needs
- 59. getElementsByClassName spec grade: A+
- 60. Interactive & UI elements <details>, <progress>, <meter> spec grade: B+
- 61. New structural elements <article>, <section> grade: B ?
- 62. <canvas> 2D spec grade: B-/D- ?
- 63. <canvas> 3D spec grade: B+/D- ?
- 64. <video> spec grade: B+/C- ?
- 65. Let’s grade some features on how well they are currently supported in browsers
- 66. Example: drag & drop interopability: D- ?
- 67. That’s it.
- 68. Thank you.
- 69. Michael(tm) Smith [email protected] http://people.w3.org/mike sideshowbarker …on Twitter*, GitHub, etc.
- 71. Steven Faulkner and Bruce Lawson a.k.a. The A-Team: Australia Tour 2010
- 72. 19 November to 1 December
- 73. Sydney, Canberra, Melbourne, Brisbane, Perth(!)
- 74. Buy these men beers!
- 76. More: Steve Faulkner & Hans Hillen talk at Fronteers http://slideshare.net/ stevefaulkner/html5- accessibility-is-it-ready-yet
- 77. “Accessibility is always bolted on… the earlier it is bolted on, the more robust.”