5. HTML5
“... extending the language to better support Web
applications, since that is one of the directions the Web
is going in and is one of the areas least well served by
HTML so far.
This puts HTML in direct competition with other
technologies intended for applications deployed over the
Web, in particular Flash and Silverlight” - Ian Hickson
http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
12. <figure>
● “ 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=””>
<figcaption>
Bruce Lawson in summer dress
<small>Photo copyright Bruce's mum</small>
</figcaption>
</figure>
13. Example of <figure>
Bruce Lawson in summer dress
Photo copyright Bruce's mum
•
14. HTML5 forms (“Webforms 2”)
Do what people want to do without scripting, so
● Easier to write
● Controls look the same across sites, so better UX
● Built-in validation
● Less to download
Demonstration
15. Canvas
Immediate graphics mode without plugins
Retro-specced, hence accessibility concerns
Native support in Opera, Safari, Firefox and Chrome
Demonstration
16. What does this code do?
<object width="425" height="344">
<param name="movie"
value="http://www.example.com/v/LtfQg4KkR88&hl=en
&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<embed
src="http://www.example.com/v/LtfQg4KkR88&hl=en&f
s=1" type="application/x-shockwave-flash"
allowfullscreen="true" width="425"
height="344"></embed>
</object>
18. Advantages of native <video>
● Keyboard accessible out of the box (potentially)
● Is part of the page – can be styled by CSS
● Can script own controls (show code!)
● Can draw on the video
● Can manipulate video data (SVG/ copy to canvas)
19. Video (accessibility)
● Captions/ subtitles – no standardised way (yet).
● Bruce hack:
<video></video>
<div class=transcript>
<p>Hello, Good Evening and Welcome</p>
<p>Tonight on the Jeremy Kyle show ...</p>
....
</div>
21. Video (accessibility)
<p>
<span data-begin=1 data-end=2.4>Hello, Good
Evening</span>
<span data-begin=3 data-end=3.6> and Welcome.</span>
</p>
22. Video (accessibility)
function timeupdate() {
var v = document.querySelector('video');
var now = v.currentTime; …}
<video width=600 src=synergy.ogv
ontimeupdate=timeupdate()>
Demonstrate captions
Demonstrate simultaneous translation