HTML5 Update

1,964 views

Published on

An update on the state of HTML5, given to web414, a web developer's group.

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
1,964
On SlideShare
0
From Embeds
0
Number of Embeds
183
Actions
Shares
0
Downloads
45
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide
































































































  • HTML5 Update

    1. 1. HTML5 The State of the Dis-Union
    2. 2. Reliable Sources
    3. 3. HTML5 For Designers Jeremy Keith
    4. 4. The Spec Ian Hickson, editor http://www.w3.org/ TR/html5/
    5. 5. The Authoring Spec Ian Hickson, editor http://www.w3.org/ TR/html5/author
    6. 6. Dive Into HTML5 Mark Pilgrim http:// diveintohtml5.org/
    7. 7. HTML5 Doctor Rich Clark, Bruce Lawson, Tom Leadbetter, Jack Osborne, Mike Robinson, Remy Sharp, Oli Studholme http://html5doctor.com/
    8. 8. HTML5 Gallery Showcase of HTML5- based sites http:// html5gallery.com/
    9. 9. Progress What’s the frequency, Kenneth?
    10. 10. Current state Spec is in Last Call phase Next step is call for implementations and review Arguments still exist, but their targets are smaller
    11. 11. HTML5 Mythbusting Let’s Play!
    12. 12. HTML5 won’t be complete for 10 years!
    13. 13. HTML5 won’t be complete for 10 years! Definition of complete is different
    14. 14. HTML5 won’t be complete for 10 years! Definition of complete is different According to this definition, CSS2 isn’t complete
    15. 15. HTML5 won’t be complete for 10 years! Definition of complete is different According to this definition, CSS2 isn’t complete Is curently in final comment stage
    16. 16. HTML5 won’t be complete for 10 years! Definition of complete is different According to this definition, CSS2 isn’t complete Busted! Is curently in final comment stage
    17. 17. HTML5 isn’t suported by most browsers!
    18. 18. HTML5 isn’t suported by most browsers! New structure tags can be enabled with a few lines of javascript
    19. 19. HTML5 isn’t suported by most browsers! New structure tags can be enabled with a few lines of javascript Can use <div class=xxx> also
    20. 20. HTML5 isn’t suported by most browsers! New structure tags can be enabled with a few lines of javascript Can use <div class=xxx> also HTML4 is part of HTML5
    21. 21. HTML5 isn’t suported by most browsers! New structure tags can be enabled with a few lines of javascript Can use <div class=xxx> also HTML4 is part of HTML5 Little else
    22. 22. HTML5 isn’t suported by most browsers! New structure tags can be enabled with a few lines of javascript Can use <div class=xxx> also Plausible! HTML4 is part of HTML5 Little else
    23. 23. HTML5 means XHTML is Dead!
    24. 24. HTML5 means XHTML is Dead! HTML5 includes an XHTML-compatible version
    25. 25. HTML5 means XHTML is Dead! HTML5 includes an XHTML-compatible version XHTML implementations will continue to work
    26. 26. HTML5 means XHTML is Dead! HTML5 includes an XHTML-compatible version XHTML Busted! implementations will continue to work
    27. 27. HTML5 Makes Flash Irrelevant!
    28. 28. HTML5 Makes Flash Irrelevant! Video H.264 Theora VP8
    29. 29. HTML5 Makes Flash Irrelevant! Video H.264 Theora VP8 Interaction Canvas
    30. 30. HTML5 Makes Flash Irrelevant! Video H.264 Theora VP8 Plausible! Interaction Canvas
    31. 31. What About WebM?
    32. 32. What About WebM? WebM uses VP8 for video, Vorbis for audio, wrapped in a Matroska (MKV) container
    33. 33. What About WebM? WebM uses VP8 for video, Vorbis for audio, wrapped in a Matroska (MKV) container Opera 10.6 supports it, also FF and Chrome nightlies
    34. 34. What About WebM? WebM uses VP8 for video, Vorbis for audio, wrapped in a Matroska (MKV) container Opera 10.6 supports it, also FF and Chrome nightlies Flash will soon ship with VP8 codec, but not WebM
    35. 35. What About WebM? WebM uses VP8 for video, Vorbis for audio, wrapped in a Matroska (MKV) container Opera 10.6 supports it, also FF and Chrome nightlies Flash will soon ship with VP8 codec, but not WebM IE will support VP8 codec if installed separately
    36. 36. What About WebM? WebM uses VP8 for video, Vorbis for audio, wrapped in a Matroska (MKV) container Opera 10.6 supports it, also FF and Chrome nightlies Flash will soon ship with VP8 codec, but not WebM IE will support VP8 codec if installed separately Good analysis at http://x264dev.multimedia.cx/?p=377
    37. 37. What About WebM? WebM uses VP8 for video, Vorbis for audio, wrapped in a Matroska (MKV) container Opera 10.6 supports it, also FF and Chrome nightlies Flash will soon ship with VP8 codec, but not WebM IE will support VP8 codec if installed separately Good analysis at http://x264dev.multimedia.cx/?p=377 License prohibits Apple and MS from using it
    38. 38. Thinking in HTML5
    39. 39. Thinking in HTML5 Outline your document Map document sections to sections of your outline Use sectioning elements to reflect that structure http://gsnedders.html5.org/outliner/
    40. 40. Thinking in HTML5 Outline your document Map document sections to sections of your outline Use sectioning elements to reflect that structure http://gsnedders.html5.org/outliner/ Expand to more complete site outline Aids document processing
    41. 41. Using the New Structure Elements
    42. 42. Using the New Structure Elements They’re not just <div>’s with a new name
    43. 43. Using the New Structure Elements They’re not just <div>’s with a new name They have semantic meanings which can be used by assistive technologies Can locate navigation links more easily Locate page’s main content easily Pages can be meaningfully processed (SEO, etc.)
    44. 44. Using Sectioning Elements
    45. 45. Using Sectioning Elements There are far more in HTML5 than just <div>
    46. 46. Using Sectioning Elements There are far more in HTML5 than just <div> To avoid confusion, ask yourself a series of questions about the content of the section to help clarify your choice
    47. 47. Is it introductory info?
    48. 48. Is it introductory info? This info could also include a ToC or other nav aids, such as search forms.
    49. 49. Is it introductory info? This info could also include a ToC or other nav aids, such as search forms. If yes, mark it up as <header>
    50. 50. Does it contain summary information?
    51. 51. Does it contain summary information? This sort of information would include info such as copyright date, author information, links to related documents, etc.
    52. 52. Does it contain summary information? This sort of information would include info such as copyright date, author information, links to related documents, etc. If yes, mark it up as <footer>
    53. 53. Is it a major navigation block?
    54. 54. Is it a major navigation block? If yes, use the <nav> element to mark it up
    55. 55. Does it make sense as a standalone item?
    56. 56. Does it make sense as a standalone item? If yes, mark it up as <article>
    57. 57. Is it directly related to the main content?
    58. 58. Is it directly related to the main content? If yes, it’s either <aside> or <figure>
    59. 59. Is it directly related to the main content? If yes, it’s either <aside> or <figure> Is it required in order to understand the content?
    60. 60. Is it directly related to the main content? If yes, it’s either <aside> or <figure> Is it required in order to understand the content? If no, mark it up as <aside>
    61. 61. Is it directly related to the main content? If yes, it’s either <aside> or <figure> Is it required in order to understand the content? If no, mark it up as <aside> If yes, could it also be an appendix?
    62. 62. Is it directly related to the main content? If yes, it’s either <aside> or <figure> Is it required in order to understand the content? If no, mark it up as <aside> If yes, could it also be an appendix? If yes, mark it up as <figure>
    63. 63. Is it directly related to the main content? If yes, it’s either <aside> or <figure> Is it required in order to understand the content? If no, mark it up as <aside> If yes, could it also be an appendix? If yes, mark it up as <figure> If no, it’s really part of the main content (see next question)
    64. 64. Might it logically have its own heading?
    65. 65. Might it logically have its own heading? If yes, mark it up as a <section>
    66. 66. Does it have semantic meaning?
    67. 67. Does it have semantic meaning? If yes, mark it up with the element that reflects its semantic value
    68. 68. Does it have semantic meaning? If yes, mark it up with the element that reflects its semantic value If no, then use a <div>
    69. 69. <audio> Browser mp3 Vorbis wav AAC Firefox x x Opera x x Safari x x x Chrome x x IE9 x ? x
    70. 70. <audio> Browser mp3 Vorbis wav AAC Problematic, due to lack of unified suport Firefox x x Opera x x Safari x x x Chrome x x IE9 x ? x
    71. 71. <audio> Browser mp3 Vorbis wav AAC Problematic, due to lack of unified suport Firefox x x Element allows fallback Opera x x sources Safari x x x Chrome x x IE9 x ? x
    72. 72. <audio> Browser mp3 Vorbis wav AAC Problematic, due to lack of unified suport Firefox x x Element allows fallback Opera x x sources Safari x x x http://dev.opera.com/ Chrome x x articles/view/html5- audio-radio-player/ IE9 x ? x
    73. 73. <video> Browser Theora H.264 WebM Chrome x x * Firefox x * IE9 * Opera x x Safari x
    74. 74. <video> Browser Theora H.264 WebM Lacks universal support Chrome x x * Firefox x * IE9 * Opera x x Safari x
    75. 75. <video> Browser Theora H.264 WebM Lacks universal support Chrome x x * Firefox x * Allows for fallback sources IE9 * Opera x x Safari x
    76. 76. <video> Browser Theora H.264 WebM Lacks universal support Chrome x x * Firefox x * Allows for fallback sources IE9 * IE9 will support VP8 Opera x x codec with separate Safari x install, but not WebM
    77. 77. Flash as fallback
    78. 78. Flash as fallback Currently supports H.264 video on all supported platforms
    79. 79. Flash as fallback Currently supports H.264 video on all supported platforms Announced support for VP8, not WebM, and so far no working examples.
    80. 80. Video Delivery
    81. 81. Video Delivery http://camendesign.com/code/video_for_everybody
    82. 82. Video Delivery http://camendesign.com/code/video_for_everybody HTML solution which uses multiple sources to support video delivery, falling back to Flash, and even to .wmv files
    83. 83. Video Delivery http://camendesign.com/code/video_for_everybody HTML solution which uses multiple sources to support video delivery, falling back to Flash, and even to .wmv files http://www.html5video.org/
    84. 84. Video Delivery http://camendesign.com/code/video_for_everybody HTML solution which uses multiple sources to support video delivery, falling back to Flash, and even to .wmv files http://www.html5video.org/ Aggregation of many javascript-based solutions
    85. 85. <details>
    86. 86. <details> Expandable box containing further information
    87. 87. <details> Expandable box containing further information Contains <summary> element (title of details box) followed by flow content
    88. 88. <details> Expandable box containing further information Contains <summary> element (title of details box) followed by flow content Enables authors to implant further details in a page without resorting to javascript
    89. 89. Forms
    90. 90. Forms Most <form> improvements mimic current javascript practice
    91. 91. Forms Most <form> improvements mimic current javascript practice Support for them is currently spotty and idiosyncratic
    92. 92. Forms Most <form> improvements mimic current javascript practice Support for them is currently spotty and idiosyncratic Best practice is to set up a fallback to javascript for dumb browsers to use.
    93. 93. New Form Field Attributes
    94. 94. New Form Field Attributes autofocus Focus will automatically start on this field
    95. 95. New Form Field Attributes autofocus Focus will automatically start on this field placeholder Placeholder text
    96. 96. New Form Field Attributes autofocus Focus will automatically start on this field placeholder Placeholder text use javascript fallback if (!("autofocus" in document.createElement("input")))
    97. 97. New <input> types
    98. 98. New <input> types Email, URL, Search, Color
    99. 99. New <input> types Email, URL, Search, Color Number, Range min, max, step, value stepUp, stepDown, valueAsNumber
    100. 100. New <input> types Email, URL, Search, Color Number, Range min, max, step, value stepUp, stepDown, valueAsNumber Date
    101. 101. Why use them?
    102. 102. Why use them? If not supported, no effect on browser
    103. 103. Why use them? If not supported, no effect on browser Some user agents can modify behavior accordingly
    104. 104. Why use them? If not supported, no effect on browser Some user agents can modify behavior accordingly If supported, built-in-browser validation will check them for you
    105. 105. Why use them? If not supported, no effect on browser Some user agents can modify behavior accordingly If supported, built-in-browser validation will check them for you pattern attribute supplies regex for “normal” fields
    106. 106. Why use them? If not supported, no effect on browser Some user agents can modify behavior accordingly If supported, built-in-browser validation will check them for you pattern attribute supplies regex for “normal” fields If not supported, use a js fallback
    107. 107. But they don’t work everywhere!!
    108. 108. A simple fix
    109. 109. A simple fix HTML5Shiv (Fixes IE to recognize new structure elements)
    110. 110. A simple fix HTML5Shiv (Fixes IE to recognize new structure elements) proposed by John Resig, coded by Remy Sharp
    111. 111. A simple fix HTML5Shiv (Fixes IE to recognize new structure elements) proposed by John Resig, coded by Remy Sharp http://html5shiv.googlecode.com/svn/trunk/html5.js
    112. 112. A simple fix HTML5Shiv (Fixes IE to recognize new structure elements) proposed by John Resig, coded by Remy Sharp http://html5shiv.googlecode.com/svn/trunk/html5.js Include <script src="http:// html5shiv.googlecode.com/svn/trunk/html5.js"></ script> with a conditional comment
    113. 113. Say “Hello” to my little friend
    114. 114. Say “Hello” to my little friend Modernizr.js
    115. 115. Say “Hello” to my little friend Modernizr.js incorporates HTML5 shiv idea
    116. 116. Say “Hello” to my little friend Modernizr.js incorporates HTML5 shiv idea detects support for new field attributes and types
    117. 117. Say “Hello” to my little friend Modernizr.js incorporates HTML5 shiv idea detects support for new field attributes and types detects CSS3 support
    118. 118. Modernizr
    119. 119. Modernizr Modernizr.input.attribute to test for presence of new attribute
    120. 120. Modernizr Modernizr.input.attribute to test for presence of new attribute Modernizr.inputtypes[inputtype] to test for presence of new input types
    121. 121. Modernizr Modernizr.input.attribute to test for presence of new attribute Modernizr.inputtypes[inputtype] to test for presence of new input types Modernizr.audio[format] for audio format support
    122. 122. Modernizr Modernizr.input.attribute to test for presence of new attribute Modernizr.inputtypes[inputtype] to test for presence of new input types Modernizr.audio[format] for audio format support CSS3 features indicated by classes attached to <html>
    123. 123. Modernizr Modernizr.input.attribute to test for presence of new attribute Modernizr.inputtypes[inputtype] to test for presence of new input types Modernizr.audio[format] for audio format support CSS3 features indicated by classes attached to <html> http://www.modernizr.com/ (11K unzipped, minimized)

    ×