HTML5 Update

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! Deﬁnition of complete is different

HTML5 won’t be complete for 10 years! Deﬁnition of complete is different According to this deﬁnition, 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 reﬂect 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 reﬂect 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 <ﬁgure>

Is it directly related to the main content? If yes, it’s either <aside> or <ﬁgure> Is it required in order to understand the content?

Is it directly related to the main content? If yes, it’s either <aside> or <ﬁgure> 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 <ﬁgure> 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 <ﬁgure> 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 <ﬁgure>

Is it directly related to the main content? If yes, it’s either <aside> or <ﬁgure> 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 <ﬁgure> 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 reﬂects its semantic value

Does it have semantic meaning? If yes, mark it up with the element that reﬂects 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 uniﬁed 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 uniﬁed 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 uniﬁed 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 ﬁles

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 ﬁles 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 ﬁles http://www.html5video.org/ Aggregation of many javascript-based solutions

<details> Expandable box containing further information

<details> Expandable box containing further information Contains <summary> element (title of details box) followed by ﬂow content

<details> Expandable box containing further information Contains <summary> element (title of details box) followed by ﬂow content Enables authors to implant further details in a page without resorting to javascript

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 ﬁeld

New Form Field Attributes autofocus Focus will automatically start on this ﬁeld placeholder Placeholder text

New Form Field Attributes autofocus Focus will automatically start on this ﬁeld 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” ﬁelds

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” ﬁelds If not supported, use a js fallback

But they don’t work everywhere!!

A simple ﬁx

A simple ﬁx HTML5Shiv (Fixes IE to recognize new structure elements)

A simple ﬁx HTML5Shiv (Fixes IE to recognize new structure elements) proposed by John Resig, coded by Remy Sharp

A simple ﬁx 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 ﬁx 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 ﬁeld attributes and types

Say “Hello” to my little friend Modernizr.js incorporates HTML5 shiv idea detects support for new ﬁeld 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)

http://metaverse.wordpress.com	145
http://web414.com	13
http://www.web414.com	3

HTML5 Update

by Paladin Web Services

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 161

Statistics

HTML5 Update Presentation Transcript