HTML5 Update
Upcoming SlideShare
Loading in...5
×
 

HTML5 Update

on

  • 2,051 views

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

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

Statistics

Views

Total Views
2,051
Views on SlideShare
1,882
Embed Views
169

Actions

Likes
2
Downloads
31
Comments
1

3 Embeds 169

http://metaverse.wordpress.com 151
http://web414.com 15
http://www.web414.com 3

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

HTML5 Update HTML5 Update Presentation Transcript

  • HTML5 The State of the Dis-Union
  • Reliable Sources
  • HTML5 For Designers Jeremy Keith
  • The Spec Ian Hickson, editor http://www.w3.org/ TR/html5/
  • The Authoring Spec Ian Hickson, editor http://www.w3.org/ TR/html5/author
  • Dive Into HTML5 Mark Pilgrim http:// diveintohtml5.org/
  • HTML5 Doctor Rich Clark, Bruce Lawson, Tom Leadbetter, Jack Osborne, Mike Robinson, Remy Sharp, Oli Studholme http://html5doctor.com/
  • HTML5 Gallery Showcase of HTML5- based sites http:// html5gallery.com/
  • Progress What’s the frequency, Kenneth?
  • Current state Spec is in Last Call phase Next step is call for implementations and review Arguments still exist, but their targets are smaller
  • HTML5 Mythbusting Let’s Play!
  • HTML5 won’t be complete for 10 years!
  • HTML5 won’t be complete for 10 years! Definition of complete is different
  • HTML5 won’t be complete for 10 years! Definition of complete is different According to this definition, CSS2 isn’t complete
  • 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
  • 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
  • HTML5 isn’t suported by most browsers!
  • HTML5 isn’t suported by most browsers! New structure tags can be enabled with a few lines of javascript
  • 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
  • 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
  • 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
  • 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
  • HTML5 means XHTML is Dead!
  • HTML5 means XHTML is Dead! HTML5 includes an XHTML-compatible version
  • HTML5 means XHTML is Dead! HTML5 includes an XHTML-compatible version XHTML implementations will continue to work
  • HTML5 means XHTML is Dead! HTML5 includes an XHTML-compatible version XHTML Busted! implementations will continue to work
  • HTML5 Makes Flash Irrelevant!
  • HTML5 Makes Flash Irrelevant! Video H.264 Theora VP8
  • HTML5 Makes Flash Irrelevant! Video H.264 Theora VP8 Interaction Canvas
  • HTML5 Makes Flash Irrelevant! Video H.264 Theora VP8 Plausible! Interaction Canvas
  • What About WebM?
  • What About WebM? WebM uses VP8 for video, Vorbis for audio, wrapped in a Matroska (MKV) container
  • 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
  • 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
  • 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
  • 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
  • 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
  • Thinking in HTML5
  • 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/
  • 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
  • Using the New Structure Elements
  • Using the New Structure Elements They’re not just <div>’s with a new name
  • 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.)
  • Using Sectioning Elements
  • Using Sectioning Elements There are far more in HTML5 than just <div>
  • 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
  • Is it introductory info?
  • Is it introductory info? This info could also include a ToC or other nav aids, such as search forms.
  • 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>
  • Does it contain summary information?
  • Does it contain summary information? This sort of information would include info such as copyright date, author information, links to related documents, etc.
  • 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>
  • Is it a major navigation block?
  • Is it a major navigation block? If yes, use the <nav> element to mark it up
  • Does it make sense as a standalone item?
  • Does it make sense as a standalone item? If yes, mark it up as <article>
  • Is it directly related to the main content?
  • Is it directly related to the main content? If yes, it’s either <aside> or <figure>
  • 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?
  • 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>
  • 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?
  • 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>
  • 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)
  • Might it logically have its own heading?
  • Might it logically have its own heading? If yes, mark it up as a <section>
  • Does it have semantic meaning?
  • Does it have semantic meaning? If yes, mark it up with the element that reflects its semantic value
  • Does it have semantic meaning? If yes, mark it up with the element that reflects its semantic value If no, then use a <div>
  • <audio> Browser mp3 Vorbis wav AAC Firefox x x Opera x x Safari x x x Chrome x x IE9 x ? x
  • <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
  • <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
  • <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
  • <video> Browser Theora H.264 WebM Chrome x x * Firefox x * IE9 * Opera x x Safari x
  • <video> Browser Theora H.264 WebM Lacks universal support Chrome x x * Firefox x * IE9 * Opera x x Safari x
  • <video> Browser Theora H.264 WebM Lacks universal support Chrome x x * Firefox x * Allows for fallback sources IE9 * Opera x x Safari x
  • <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
  • Flash as fallback
  • Flash as fallback Currently supports H.264 video on all supported platforms
  • Flash as fallback Currently supports H.264 video on all supported platforms Announced support for VP8, not WebM, and so far no working examples.
  • Video Delivery
  • Video Delivery http://camendesign.com/code/video_for_everybody
  • 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
  • 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/
  • 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
  • <details>
  • <details> Expandable box containing further information
  • <details> Expandable box containing further information Contains <summary> element (title of details box) followed by flow content
  • <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
  • Forms
  • Forms Most <form> improvements mimic current javascript practice
  • Forms Most <form> improvements mimic current javascript practice Support for them is currently spotty and idiosyncratic
  • 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.
  • New Form Field Attributes
  • New Form Field Attributes autofocus Focus will automatically start on this field
  • New Form Field Attributes autofocus Focus will automatically start on this field placeholder Placeholder text
  • New Form Field Attributes autofocus Focus will automatically start on this field placeholder Placeholder text use javascript fallback if (!("autofocus" in document.createElement("input")))
  • New <input> types
  • New <input> types Email, URL, Search, Color
  • New <input> types Email, URL, Search, Color Number, Range min, max, step, value stepUp, stepDown, valueAsNumber
  • New <input> types Email, URL, Search, Color Number, Range min, max, step, value stepUp, stepDown, valueAsNumber Date
  • Why use them?
  • Why use them? If not supported, no effect on browser
  • Why use them? If not supported, no effect on browser Some user agents can modify behavior accordingly
  • 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
  • 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
  • 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
  • But they don’t work everywhere!!
  • A simple fix
  • A simple fix HTML5Shiv (Fixes IE to recognize new structure elements)
  • A simple fix HTML5Shiv (Fixes IE to recognize new structure elements) proposed by John Resig, coded by Remy Sharp
  • 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
  • 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
  • Say “Hello” to my little friend
  • Say “Hello” to my little friend Modernizr.js
  • Say “Hello” to my little friend Modernizr.js incorporates HTML5 shiv idea
  • Say “Hello” to my little friend Modernizr.js incorporates HTML5 shiv idea detects support for new field attributes and types
  • Say “Hello” to my little friend Modernizr.js incorporates HTML5 shiv idea detects support for new field attributes and types detects CSS3 support
  • Modernizr
  • Modernizr Modernizr.input.attribute to test for presence of new attribute
  • Modernizr Modernizr.input.attribute to test for presence of new attribute Modernizr.inputtypes[inputtype] to test for presence of new input types
  • 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
  • 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>
  • 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)