html5 in practice
TRANSCRIPT
![Page 1: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/1.jpg)
HTML5 in Practice
An HTML5 Report Card
![Page 3: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/3.jpg)
This talk is about HTML5 in practice, given in the format of a report card.
with letter grades.
![Page 4: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/4.jpg)
Evaluating HTML5
•HTML5 ancillary materials
• HTML5 tools support
•HTML5 features spec’ed
•HTML5 features implemented
![Page 5: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/5.jpg)
HTML5 ancillary materials:grade: B -
![Page 6: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/6.jpg)
Ancillary materials are complements to the spec.
![Page 7: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/7.jpg)
Ancillary materials are the materials that most of us learn from directly (rather
than the spec itself).
![Page 8: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/8.jpg)
HTML5 differences from HTML4
http://w3.org/TR/html5-diff/
![Page 9: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/9.jpg)
http://html5rocks.com/
Hands-on/one-stop shopping
![Page 10: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/10.jpg)
Tutorials/how-to guides for authors
![Page 11: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/11.jpg)
Several print books from Jeremy Keith, Bruce
Lawson & Remy Sharp, Mark Pilgrim, more
![Page 12: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/12.jpg)
Dive into HTML5
http://diveintohtml5.org/
![Page 13: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/13.jpg)
The HTML5 Doctors
http://html5doctor.com/
![Page 14: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/14.jpg)
Alternative authoring references
![Page 15: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/15.jpg)
HTML5: The Markup Language Reference
http://dev.w3.org/html5/markup
![Page 16: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/16.jpg)
HTML5: The Markup Language Reference is an alternative
front-end to the HTML5 spec
![Page 17: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/17.jpg)
HTML5:Edition for Web Authors
http://dev.w3.org/html5/spec-author-view
![Page 18: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/18.jpg)
HTML5: Edition for Web Authors is an author-friendly
subset of the spec thatomits implementation details
![Page 19: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/19.jpg)
Fork me!
http://github.com/benschwarz/html5forAuthorshttp://github.com/sideshowbarker/html5forAuthors
![Page 20: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/20.jpg)
Bonus: Annotated JavaScript/
EcmaScript 5 spec in HTML*
http://sideshowbarker.github.com/es5-spec/
![Page 21: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/21.jpg)
Get expert guidanceon addressing
accessibility needs
![Page 22: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/22.jpg)
http://html5accessibility.com/
New!
![Page 23: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/23.jpg)
…from Steven Faulkner@stevefaulkner
![Page 24: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/24.jpg)
HTML5accessibility.com gives info about which HTML5 user interface features are usable by people who rely upon assistive technology (AT) to use the Web.
![Page 25: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/25.jpg)
Check current browser implementation support
for specific features
![Page 26: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/26.jpg)
HTML5Accessibility workarounds
http://html5accessibility.com/index-aria.html
![Page 27: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/27.jpg)
HTML5 Readiness
http://html5readiness.com
![Page 28: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/28.jpg)
When can I use…
http://caniuse.com/
![Page 29: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/29.jpg)
HTML5 tools support:grade: C+
![Page 30: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/30.jpg)
HTML5 Validator(stable)
http://validator.nu
![Page 31: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/31.jpg)
HTML5 Validator(unstable)
http://w3.org/html/check
![Page 32: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/32.jpg)
HTML5, CSS3, etc., feature detection
http://modernizr.com/
![Page 33: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/33.jpg)
http://html5boilerplate.com/
The professional badass’s base HTML/CSS/JS template for a
fast, robust and future-proof site!
![Page 34: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/34.jpg)
Adobe Dreamweaver & Illustrator CS5HTML5 Packs
![Page 35: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/35.jpg)
HTML5: The Good Parts
• Syntax simplifications: A+•HTML5 parsing algorithm: A+• MathML & SVG integration: A+•New elements/attributes: A+• New APIs for scripting: A+
![Page 36: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/36.jpg)
HTML5: More Good Parts
•HTML5 design principles: ?•maintain XHTML support: ?
![Page 37: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/37.jpg)
Syntax simplifications
![Page 38: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/38.jpg)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
![Page 39: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/39.jpg)
<!doctype html>
![Page 40: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/40.jpg)
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
![Page 41: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/41.jpg)
<meta charset="UTF-8">
![Page 42: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/42.jpg)
New elements
• <video> & <audio> (no plugins)
• <canvas> (2D/3D image scripting)
• <article>, <section>, <header>
• <details>, <progress>, <meter>...
• <ruby> (annotations)
• all SVG elements (MathML too)
![Page 43: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/43.jpg)
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)
![Page 44: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/44.jpg)
Crap removal
•<frame>, <frameset>
•<a name>
•more...
![Page 45: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/45.jpg)
New APIs for scripting
•API for <video> & <audio>
• 2D drawing API for <canvas>
•3D <canvas> API: WebGL*
• getElementsByClassName()
• innerHTML and more…
![Page 46: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/46.jpg)
New APIs for scripting
•Web Storage (local + session)
• Indexed Database (non-SQL)
• Web Messaging (cross-doc/postmg+)
• Web Workers
• WebSocket API + Protocol
![Page 47: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/47.jpg)
“Friends of HTML5” APIs
•Geolocation
•Device Orientation/Motion
•File API (w/ HTML5 Drag & Drop)
•Selectors API
•Audio API* (sampling+synthesis)
![Page 48: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/48.jpg)
“HTML5” has becomeshorthand for “The
Open Web Platform”.
![Page 49: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/49.jpg)
Web-Platform formats:HTML5, CSS3, SVG,
ARIA, and… JavaScript
![Page 50: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/50.jpg)
HTML design principles
http://w3.org/TR/html-design-principles/
![Page 51: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/51.jpg)
HTML design principles
• Support existing content• Ensure interoperability• Precisely define UA behavior•Handle errors (non-draconian)
• Evolution not revolution• “Priority of constituencies”
![Page 52: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/52.jpg)
Important point:HTML5 includes XHTML
![Page 53: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/53.jpg)
Even more important point:IE9+ fully supports XHTML
![Page 54: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/54.jpg)
Grading some specific HTML5 features
![Page 55: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/55.jpg)
Two ways to gradespec 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?
![Page 56: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/56.jpg)
Let’s start by grading some features on howwell they meet market/user/developer needs
![Page 57: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/57.jpg)
getElementsByClassNamespec grade: A+
![Page 58: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/58.jpg)
Interactive & UI elements<details>,
<progress>, <meter>
spec grade: B+
![Page 59: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/59.jpg)
New structural elements<article>, <section>
grade: B ?
![Page 60: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/60.jpg)
<canvas> 2D
spec grade: B-/D- ?
![Page 61: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/61.jpg)
<canvas> 3D
spec grade: B+/D- ?
![Page 62: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/62.jpg)
<video>
spec grade: B+/C- ?
![Page 63: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/63.jpg)
Let’s now grade some features on How well
they are currently supported in browsers
![Page 64: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/64.jpg)
HTML5 canvasin all major browsers
current support: B+
![Page 65: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/65.jpg)
SVGstatic SVG supported,
animations less supported
current support: C+
![Page 66: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/66.jpg)
HTML5 videoin all major browsers
BUT… codec problem :(
current support: B+
![Page 67: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/67.jpg)
Query selector APIuse CSS selector syntax
instead of DOM methods
current support: A-
![Page 68: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/68.jpg)
Downloadable fonts@font-face
current support: B+
![Page 69: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/69.jpg)
HTML5 formsOpera already, in progress
in other browsers
current support: D+
![Page 70: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/70.jpg)
HTML5 local storageBetter solution than
cookies for saving data/state
current support: B+
![Page 71: HTML5 in Practice](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d0e3a736caf36b758c91f/html5/thumbnails/71.jpg)
drag & dropinteroperability problems
current support: C-