Opera Software
The best browsing experience on any device




                        The best Internet experience on any ...
Bruce Lawson

Open Web Standards Evangelist, Opera
Tech lead Solicitors Regulation Authority 2004-08
Co-author, editor “We...
Evil browser vendors dominate
Hello tag soup, goodbye XML




          5434298386770700
Kills Flash/ Silverlight/ JS
It will break the intertubes
It hates accessibility
Can't use it until [insert date]
More semantics for structure
Styling HTML 5
Good browsers just work, with a
hint or two:
header
{display:block;}
http://www.whatwg.org/specs/web-apps/c...
Naughty browsers
IE – needs JavaScript
 document.createElement('header')

Firefox 2, Camino 1.x
 Content-Type: application...
After
HTML 5/ ARIA overlaps
<header> sometimes = role=”banner”
<footer> is sometimes role=”contentinfo”
<nav> is usually role=”m...
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 c...
Structural HTML 5: <section>

The section element represents a generic document or application
 section. A section, in thi...
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>
      ...
Use <section> before headings
<section> rule of thumb


Bruce's rule of thumb:
Before a heading, use the most appropriate
 of <article>, <nav>, <aside>,...
<aside>

The aside element represents a section of a page that consists
of content that is tangentially related to the con...
<figure>
“The figure element represents some flow content, optionally with a
caption ... used to annotate illustrations, d...
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 T...
HTML 5- forms
Do what people really need to do without scripting, so ...

easier to write
controls look the same across we...
Video (currently)
<object width="425" height="344">
<param name="movie"
  value="http://www.youtube.com/v/LtfQg4KkR88&hl=e...
Video (future)
<video src="video.ogv"
  controls
  autoplay
  poster="poster.jpg"
  width="320" height="240">
    <a href=...
Video politics
Accessibility
Most Video is not free to make or use
Ogg/Theora is (but unsupported by Apple, IE)
OMS video
...
HTML 5 - <canvas>
Dynamic graphics using scripting (usually JavaScript)
First implemented by Apple, now in most browsers
A...
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 messagi...
Thank you!
  brucel@opera.com, http://dev.opera.com

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

www.html5doctor.com, www....
Stanford Html5talk
Stanford Html5talk
Stanford Html5talk
Upcoming SlideShare
Loading in...5
×

Stanford Html5talk

1,018

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,018
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Stanford Html5talk

  1. 1. Opera Software The best browsing experience on any device The best Internet experience on any device
  2. 2. 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
  3. 3. Evil browser vendors dominate
  4. 4. Hello tag soup, goodbye XML 5434298386770700
  5. 5. Kills Flash/ Silverlight/ JS
  6. 6. It will break the intertubes
  7. 7. It hates accessibility
  8. 8. Can't use it until [insert date]
  9. 9. More semantics for structure
  10. 10. 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
  11. 11. 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/
  12. 12. After
  13. 13. 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”
  14. 14. 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/
  15. 15. 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.
  16. 16. Why not use <section> for main content?
  17. 17. <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>
  18. 18. Use <section> before headings
  19. 19. <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.
  20. 20. <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.
  21. 21. <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>
  22. 22. Example of <figure> Bruce Lawson in summer balldress Photo copyright Bruce's mum
  23. 23. <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>
  24. 24. 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)
  25. 25. 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>
  26. 26. 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
  27. 27. 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/
  28. 28. 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
  29. 29. Importance (diagram: Steve Faulkner, The Paciello Group)
  30. 30. Where the action has been alt
  31. 31. .. and more Datagrid Drag and drop API Local storage API Offline apps (manifest) Cross-window messaging Cross-site messaging
  32. 32. Thank you! brucel@opera.com, http://dev.opera.com www.brucelawson.co.uk, twitter.com/brucel www.html5doctor.com, www.html5demos.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×