Stanford Html5talk

Opera Software
The best browsing experience on any device

The best Internet experience on any device

Bruce Lawson

Open Web Standards Evangelist, Opera
Tech lead Solicitors Regulation Authority 2004-08
Co-author, editor “Web Accessibility: Web Standards and
Regulatory Compliance” 2006
Web Standards Project: accessibility task force
W3C: Mobile Best Practices Working Group
B.A., English Language and Literature with Drama
Limey

Hello tag soup, goodbye XML

5434298386770700

Can't use it until [insert date]

Styling HTML 5
Good browsers just work, with a
hint or two:
header
{display:block;}
http://www.whatwg.org/specs/web-apps/current-work/multipage/
rendering.html

Naughty browsers
IE – needs JavaScript
document.createElement('header')

Firefox 2, Camino 1.x
Content-Type: application/xhtml+xml;

http://html5doctor.com/how-to-get-html5-working-in-ie-and-
firefox-2/

HTML 5/ ARIA overlaps
<header> sometimes = role=”banner”
<footer> is sometimes role=”contentinfo”
<nav> is usually role=”menu”
In forms (next slide) required is aria-required=”true”
Draggable attribute matches aria-draggable
Validator.nu validates ARIA and HTML 5

Hixie: “When there’s a built-in way to do something, using that
is the simplest and most reliable solution.”

Me: “Do both, for now”

HTML 5/ ARIA: future
“ the plan is to make sure ARIA and HTML 5 work well together.
Right now I’m waiting for ARIA to be complete ... and for the
ARIA implementation rules to be clearer (it’s not yet obvious as
I understand it what should happen when ARIA says a
checkbox is a radio button, for instance).

Once that is cleared up, I expect HTML 5 will give a list of
conformance criteria saying where ARIA attributes can be used
and saying how they should be implemented in browsers.”
http://www.webstandards.org/2009/05/13/interview-with-ian-hickson-editor-of-the-html-5-
specification/

Structural HTML 5: <section>

The section element represents a generic document or application
section. A section, in this context, is a thematic grouping of
content, typically with a header, possibly with a footer.

Examples of sections would be chapters, the various tabbed pages
in a tabbed dialog box, or the numbered sections of a thesis.

A Web site's home page could be split into sections for an
introduction, news items, contact information.

Why not use <section> for main
content?

<section>
<h1>I'm a heading</h1>

<section>
<h1>And I'm a heading</h1>
<section>
<h1>I'm a heading too</h1>
<article>
<h1>And me! And me!</h1>
</article>
</section>
</section>

<section> rule of thumb

Bruce's rule of thumb:
Before a heading, use the most appropriate
of <article>, <nav>, <aside>, <header>. If
none are appropriate, use <section>
Don't go mad with the sectioning elements.

<aside>

The aside element represents a section of a page that consists
of content that is tangentially related to the content around the
aside element, and which could be considered separate from
that content. Such sections are often represented as sidebars in
printed typography.

The element can also be used for typographical effects like pull
quotes.

<figure>
“The figure element represents some flow content, optionally with a
caption ... used to annotate illustrations, diagrams, photos, code
listings, etc, that are referred to from the main content of the
document”
<figure>
<img src=”bruce.png” alt=””>
<legend>Bruce Lawson in summer balldress
<small>Photo copyright Bruce's mum</small>
</legend>
</figure>

Example of <figure>

Bruce Lawson in summer balldress
Photo copyright Bruce's mum

<time>
Microformats mis-used <abbr> for times:
<abbr title="20070312T1700-06">
March 12, 2007 at 5 PM, Central Standard Time
</abbr>

JAWS: “Twenty million seventy-thousand three-hundred twelve
tee seventeen-hundred dash zero six”
http://www.webstandards.org/2007/04/27/haccessibility/

<time datetime=”2007-03-12T17:00-06”> March 12,
2007 at 5 PM, Central Standard Time</time>

HTML 5- forms
Do what people really need to do without scripting, so ...

easier to write
controls look the same across web sites
less to download
built-in validation

(demo http://people.opera.com/brucel/demo/html5-forms-
demo.html)

Video (currently)
<object width="425" height="344">
<param name="movie"
value="http://www.youtube.com/v/LtfQg4KkR88&hl=en
&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<embed
src="http://www.youtube.com/v/LtfQg4KkR88&hl=en&f
s=1" type="application/x-shockwave-flash"
allowfullscreen="true" width="425"
height="344"></embed>
</object>

Video (future)
<video src="video.ogv"
controls
autoplay
poster="poster.jpg"
width="320" height="240">
<a href="video.ogv">Download movie</a>
</video>

Demos http://people.opera.com/brucel/demo/video-demos.html

Video politics
Accessibility
Most Video is not free to make or use
Ogg/Theora is (but unsupported by Apple, IE)
OMS video
http://blogs.sun.com/openmediacommons/entry/oms_video_a_project_of
Video impasse:
http://www.brucelawson.co.uk/2009/impasse-on-html-5-video/

HTML 5 - <canvas>
Dynamic graphics using scripting (usually JavaScript)
First implemented by Apple, now in most browsers
Accessibility!

Demo http://people.opera.com/brucel/demo/canvas/index.html

Importance
(diagram: Steve Faulkner, The Paciello Group)

Where the action has been
alt

.. and more
Datagrid
Drag and drop API
Local storage API
Offline apps (manifest)
Cross-window messaging
Cross-site messaging

Thank you!
brucel@opera.com, http://dev.opera.com

www.brucelawson.co.uk, twitter.com/brucel

www.html5doctor.com, www.html5demos.com

Stanford Html5talk

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Stanford Html5talk (20)

Recently uploaded (20)

Stanford Html5talk