0
brucel@opera.com, http://dev.opera.com

www.brucelawson.co.uk twitter.com/brucel
●
Evolution of HTML: monkey on
left becomes human in 4 stages
th
Evolution of HTML: 5 monkey
(HTML5) is human but dressed
       in pimp clothing
HTML5
“... extending the language to better support Web
  applications, since that is one of the directions the Web
  is g...
More semantics for structure
Styling HTML 5
Good browsers just work, with a
hint or two:
header
{display:block;}
Naughty browsers
IE – needs JavaScript
 document.createElement('header')



http://html5doctor.com/how-to-get-html5-workin...
<section>
<h1>I'm a heading</h1>

<section>
<h1>And I'm a heading</h1>
   <section>
     <h1>I'm a heading too</h1>
      ...
<figure>
●   “ to annotate illustrations, diagrams, photos, code listings, etc, that
    are referred to from the main con...
Example of <figure>




     Bruce Lawson in summer dress
             Photo copyright Bruce's mum

•
HTML5 forms (“Webforms 2”)

Do what people want to do without scripting, so

●   Easier to write
●   Controls look the sam...
Canvas

Immediate graphics mode without plugins

Retro-specced, hence accessibility concerns

Native support in Opera, Saf...
What does this code do?
<object width="425" height="344">
<param name="movie"
  value="http://www.example.com/v/LtfQg4KkR8...
Video (future)

<video src=video.ogv>
    <p>You've got a legacy browser, so
      <a href="video.ogv">Download movie</a>
...
Advantages of native <video>
●   Keyboard accessible out of the box (potentially)
●   Is part of the page – can be styled ...
Video (accessibility)
●   Captions/ subtitles – no standardised way (yet).
●   Bruce hack:
    <video></video>
    <div cl...
Video (accessibility)
<div class=”transcript”>
  <p><span>Hello, Good Evening</span>
   <span> and Welcome.</span></p>
  <...
Video (accessibility)
<p>
  <span data-begin=1 data-end=2.4>Hello, Good
  Evening</span>
 <span data-begin=3 data-end=3.6>...
Video (accessibility)

function timeupdate() {
 var v = document.querySelector('video');
 var now = v.currentTime; …}

<vi...
Disadvantage with video: codecs

<video width=320 height=240 controls>
  <source src="../videos/turkish.ogv" type="video/o...
Nastiest slide in the world
1 <video width="640" height="360" poster="__POSTER__.jpg" controls="controls">
2 <source src="...
HTML5 goodies
●   Drag and drop
●   Cross-window, Cross-domain messaging
●   Web workers
●   Adding toolbars <menu>, <comm...
Mwah! mwah!
  brucel@opera.com, http://dev.opera.com

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

www.html5doctor.com, www...
Speak The Web: The HTML5 Experiments
Speak The Web: The HTML5 Experiments
Speak The Web: The HTML5 Experiments
Upcoming SlideShare
Loading in...5
×

Speak The Web: The HTML5 Experiments

2,003

Published on

Bruce Lawson demos HTML5, especially forms and video element at Sheffield Speak The Web, 8 February 2010

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

No Downloads
Views
Total Views
2,003
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
28
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Speak The Web: The HTML5 Experiments"

  1. 1. brucel@opera.com, http://dev.opera.com www.brucelawson.co.uk twitter.com/brucel
  2. 2.
  3. 3. Evolution of HTML: monkey on left becomes human in 4 stages
  4. 4. th Evolution of HTML: 5 monkey (HTML5) is human but dressed in pimp clothing
  5. 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
  6. 6. More semantics for structure
  7. 7. Styling HTML 5 Good browsers just work, with a hint or two: header {display:block;}
  8. 8. Naughty browsers IE – needs JavaScript document.createElement('header') http://html5doctor.com/how-to-get-html5-working-in-ie-and- firefox-2/
  9. 9. <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>
  10. 10. <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>
  11. 11. Example of <figure> Bruce Lawson in summer dress Photo copyright Bruce's mum •
  12. 12. 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
  13. 13. Canvas Immediate graphics mode without plugins Retro-specced, hence accessibility concerns Native support in Opera, Safari, Firefox and Chrome Demonstration
  14. 14. 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>
  15. 15. Video (future) <video src=video.ogv> <p>You've got a legacy browser, so <a href="video.ogv">Download movie</a> </p> </video> •
  16. 16. 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)
  17. 17. 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>
  18. 18. Video (accessibility) <div class=”transcript”> <p><span>Hello, Good Evening</span> <span> and Welcome.</span></p> <p><span>Tonight on the Jeremy Kyle show … </span> </p> .... </div>
  19. 19. 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>
  20. 20. 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
  21. 21. Disadvantage with video: codecs <video width=320 height=240 controls> <source src="../videos/turkish.ogv" type="video/ogg"> <source src="../videos/turkish.mp4" type="video/mp4"> <p> Download the <a href=turkish.ogv>Turkish dancing masterclass video</a></p> </video>
  22. 22. Nastiest slide in the world 1 <video width="640" height="360" poster="__POSTER__.jpg" controls="controls"> 2 <source src="__VIDEO__.ogv" type="video/ogg" /> 3 <source src="__VIDEO__.mp4" type="video/mp4" /><!--[if gt IE 6]> 4 <object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><! 5 [endif]--><!--[if !IE]><!--> 6 <object width="640" height="375" type="video/quicktime" data="__VIDEO__.mp4"><!--<![endif]--> 7 <param name="src" value="__VIDEO__.mp4" /> 8 <param name="autoplay" value="false" /> 9 <param name="showlogo" value="false" /> 10 <object width="640" height="380" type="application/x-shockwave-flash" 11 data="__FLASH__.swf?image=__POSTER__.jpg&amp;file=__VIDEO__.mp4"> 12 <param name="movie" value="__FLASH__.swf?image=__POSTER__.jpg&amp;file=__VIDEO__.mp4" /> 13 <img src="__POSTER__.jpg" width="640" height="360" /> 14 <p> 15 <strong>No video playback capabilities detected.</strong> 16 Why not try to download the file instead?<br /> 17 <a href="__VIDEO__.mp4">MPEG4 / H.264 “.mp4” (Windows / Mac)</a> | 18 <a href="__VIDEO__.ogv">Ogg Theora &amp; Vorbis “.ogv” (Linux)</a> 19 </p> 20 </object><!--[if gt IE 6]><!--> 21 </object><!--<![endif]--> 22 </video>
  23. 23. HTML5 goodies ● Drag and drop ● Cross-window, Cross-domain messaging ● Web workers ● Adding toolbars <menu>, <command> ● WebStorage ● Register protocol handler, content type handlers ● Server-sent events <eventsource> ● (Geolocation)
  24. 24. Mwah! mwah! 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.

×