Speak The Web: The HTML5 Experiments
-
Upload
guestd427df -
Category
Technology
-
view
2.895 -
download
0
description
Transcript of Speak The Web: The HTML5 Experiments
![Page 2: Speak The Web: The HTML5 Experiments](https://reader034.fdocuments.us/reader034/viewer/2022051322/545904a6b1af9f33608b5329/html5/thumbnails/2.jpg)
●
![Page 3: Speak The Web: The HTML5 Experiments](https://reader034.fdocuments.us/reader034/viewer/2022051322/545904a6b1af9f33608b5329/html5/thumbnails/3.jpg)
Evolution of HTML: monkey on left becomes human in 4 stages
![Page 4: Speak The Web: The HTML5 Experiments](https://reader034.fdocuments.us/reader034/viewer/2022051322/545904a6b1af9f33608b5329/html5/thumbnails/4.jpg)
Evolution of HTML: 5 th monkey (HTML5) is human but dressed
in pimp clothing
![Page 5: Speak The Web: The HTML5 Experiments](https://reader034.fdocuments.us/reader034/viewer/2022051322/545904a6b1af9f33608b5329/html5/thumbnails/5.jpg)
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
![Page 6: Speak The Web: The HTML5 Experiments](https://reader034.fdocuments.us/reader034/viewer/2022051322/545904a6b1af9f33608b5329/html5/thumbnails/6.jpg)
More semantics for structure
![Page 7: Speak The Web: The HTML5 Experiments](https://reader034.fdocuments.us/reader034/viewer/2022051322/545904a6b1af9f33608b5329/html5/thumbnails/7.jpg)
Styling HTML 5
Good browsers just work, with a hint or two:
header {display:block;}
![Page 8: Speak The Web: The HTML5 Experiments](https://reader034.fdocuments.us/reader034/viewer/2022051322/545904a6b1af9f33608b5329/html5/thumbnails/8.jpg)
![Page 9: Speak The Web: The HTML5 Experiments](https://reader034.fdocuments.us/reader034/viewer/2022051322/545904a6b1af9f33608b5329/html5/thumbnails/9.jpg)
Naughty browsers
IE – needs JavaScript
document.createElement('header')
http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/
![Page 10: Speak The Web: The HTML5 Experiments](https://reader034.fdocuments.us/reader034/viewer/2022051322/545904a6b1af9f33608b5329/html5/thumbnails/10.jpg)
![Page 11: Speak The Web: The HTML5 Experiments](https://reader034.fdocuments.us/reader034/viewer/2022051322/545904a6b1af9f33608b5329/html5/thumbnails/11.jpg)
<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>
![Page 12: Speak The Web: The HTML5 Experiments](https://reader034.fdocuments.us/reader034/viewer/2022051322/545904a6b1af9f33608b5329/html5/thumbnails/12.jpg)
<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>
![Page 13: Speak The Web: The HTML5 Experiments](https://reader034.fdocuments.us/reader034/viewer/2022051322/545904a6b1af9f33608b5329/html5/thumbnails/13.jpg)
Example of <figure>
Bruce Lawson in summer dress Photo copyright Bruce's mum
•
![Page 14: Speak The Web: The HTML5 Experiments](https://reader034.fdocuments.us/reader034/viewer/2022051322/545904a6b1af9f33608b5329/html5/thumbnails/14.jpg)
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
![Page 15: Speak The Web: The HTML5 Experiments](https://reader034.fdocuments.us/reader034/viewer/2022051322/545904a6b1af9f33608b5329/html5/thumbnails/15.jpg)
Canvas
Immediate graphics mode without plugins
Retro-specced, hence accessibility concerns
Native support in Opera, Safari, Firefox and Chrome
Demonstration
![Page 16: Speak The Web: The HTML5 Experiments](https://reader034.fdocuments.us/reader034/viewer/2022051322/545904a6b1af9f33608b5329/html5/thumbnails/16.jpg)
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&fs=1" type="application/x-shockwave-flash"
allowfullscreen="true" width="425" height="344"></embed>
</object>
![Page 17: Speak The Web: The HTML5 Experiments](https://reader034.fdocuments.us/reader034/viewer/2022051322/545904a6b1af9f33608b5329/html5/thumbnails/17.jpg)
Video (future)
<video src=video.ogv> <p>You've got a legacy browser, so <a href="video.ogv">Download movie</a> </p></video>
•
![Page 18: Speak The Web: The HTML5 Experiments](https://reader034.fdocuments.us/reader034/viewer/2022051322/545904a6b1af9f33608b5329/html5/thumbnails/18.jpg)
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)
![Page 19: Speak The Web: The HTML5 Experiments](https://reader034.fdocuments.us/reader034/viewer/2022051322/545904a6b1af9f33608b5329/html5/thumbnails/19.jpg)
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>
![Page 20: Speak The Web: The HTML5 Experiments](https://reader034.fdocuments.us/reader034/viewer/2022051322/545904a6b1af9f33608b5329/html5/thumbnails/20.jpg)
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>
![Page 21: Speak The Web: The HTML5 Experiments](https://reader034.fdocuments.us/reader034/viewer/2022051322/545904a6b1af9f33608b5329/html5/thumbnails/21.jpg)
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>
![Page 22: Speak The Web: The HTML5 Experiments](https://reader034.fdocuments.us/reader034/viewer/2022051322/545904a6b1af9f33608b5329/html5/thumbnails/22.jpg)
Video (accessibility)
function timeupdate() { var v = document.querySelector('video'); var now = v.currentTime; …}
<video width=600 src=synergy.ogv ontimeupdate=timeupdate()>
Demonstrate captionsDemonstrate simultaneous translation
![Page 23: Speak The Web: The HTML5 Experiments](https://reader034.fdocuments.us/reader034/viewer/2022051322/545904a6b1af9f33608b5329/html5/thumbnails/23.jpg)
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>
![Page 24: Speak The Web: The HTML5 Experiments](https://reader034.fdocuments.us/reader034/viewer/2022051322/545904a6b1af9f33608b5329/html5/thumbnails/24.jpg)
Nastiest slide in the world1 <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&file=__VIDEO__.mp4">12 <param name="movie" value="__FLASH__.swf?image=__POSTER__.jpg&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 & Vorbis “.ogv” (Linux)</a>19 </p>20 </object><!--[if gt IE 6]><!-->21 </object><!--<![endif]-->22 </video>
![Page 25: Speak The Web: The HTML5 Experiments](https://reader034.fdocuments.us/reader034/viewer/2022051322/545904a6b1af9f33608b5329/html5/thumbnails/25.jpg)
![Page 26: Speak The Web: The HTML5 Experiments](https://reader034.fdocuments.us/reader034/viewer/2022051322/545904a6b1af9f33608b5329/html5/thumbnails/26.jpg)
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)
![Page 27: Speak The Web: The HTML5 Experiments](https://reader034.fdocuments.us/reader034/viewer/2022051322/545904a6b1af9f33608b5329/html5/thumbnails/27.jpg)
Mwah! [email protected], http://dev.opera.com
www.brucelawson.co.uk, twitter.com/brucel
www.html5doctor.com, www.html5demos.com