HTML5 and friends overview

HTML5 and friends
Patrick H. Lauke / JISC CETIS Conference 2010 / Nottingham / 15 November 2010
CONTEXTUALISING THE NEW TECHNOLOGIES

www.textfiles.com/underconstruction

"there is already a lot of excitement for HTML5,
but it’s a little too early to deploy it because
we’re running into interoperability issues."
Philippe Le Hegaret, W3C interaction domain leader
blogs.techrepublic.com.com/hiner/?p=6369

http://www.flickr.com/photos/24374884@N08/4603715307/

A brief history of HTML5
1999 HTML 4.01
2000 XHTML 1.0

2004 W3C focus on XHTML 2.0
…the future is XML-based!
http://www.flickr.com/photos/craiga/17071467/

WHATWGWeb Hypertext Application Technology Working Group

“...extending the language to better support
Web applications [...] This puts HTML in
direct competition with other
technologies[...] , in particular Flash and
Silverlight.”
Ian Hickson, Editor of HTML5
http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html

HTML5 does not replace HTML 4.01 / XHTML 1.0

HTML5 specification for
browser developers
(how to interpret markup/code – no more reverse engineering)
for authors: HTML5 differences from HTML4
http://www.w3.org/TR/html5-diff/

1. syntax/semantic
2. forms
3. multimedia

HTML5 standardises
current browser behaviour
(e.g. “relaxed” coding rules)

the dirty secret of the
doctype

XHTML 1.0<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!doctype html>
<title>Minimal HTML5</title>

new elemente for more accurate semantics

Top 20 class names
1. footer 11. button
2. menu 12. main
3. style1 13. style3
4. msonormal 14. small
5. text 15. nav
6. content 16. clear
7. title 17. search
8. style2 18. style4
9. header 19. logo
10. copyright 20. body
http://devfiles.myopera.com/articles/572/classlist-url.htm

Top 20 id names
1. footer 11. search
2. content 12. nav
3. header 13. wrapper
4. logo 14. top
5. container 15. table2
6. main 16. layer2
7. table1 17. sidebar
8. menu 18. image1
9. layer1 19. banner
10. autonumber1 20. navigation
http://devfiles.myopera.com/articles/572/idlist-url.htm

unambiguous and machine readable
...e.g. screenreaders?

new and old browsers “support” these
(although some need a little extra help)
header, footer, … { display: block; }

Internet Explorer <9 needs extra training wheels
document.createElement('header');
document.createElement('footer');
…
http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2

1. syntax/semantics
2. forms
3. multimedia

improved form elements
because the web is more interactive

rich form elements – without faking them in JS
<input type=”date”>
<input type=”time”>
<input type=”month”>
<input type=”week”>
<input type=”datetime” … >
<input type=”range”>
<input type=”number”>
<input type=”file” multiple>
<input … autofocus>
<input … autocomplete>

types und attributes with
built-in validation
<input … required>
<input type=”tel”>
<input type=”email”>
<input type=”url”>
<input … pattern="[a-z]{3}[0-9]{3}">

making your site Fonzie compliant...

Adobe Flash currently most common
video delivery mechanism

<video src="video.webm"
controls
autoplay
loop
preload
poster="poster.jpg"
width="320" height="240">
<a href="video.webm">Download movie</a>
</video>

video as native object
●
behaves like any other HTML element
●
keyboard accessibility out-of-the-box

www.w3.org/TR/html5/video.html#media-elements

controlling <video> with JavaScript
var v = document.getElementById('player');
v.play();
v.pause();
v.volume = … ;
v.currentTime = … ;
…

events fired by <video>
var v = document.getElementById('player');
v.addEventListener('loadeddata', function() { … }, true)
v.addEventListener('play', function() { … }, true)
v.addEventListener('pause', function() { … }, true)
v.addEventListener('timeupdate', function() { … }, true)
v.addEventListener('ended', function() { … }, true)
…

HTML5 does not specify
video container/codec
(same as with images in HTML 4?)

MP4 / H.264
ubiquitous, patent encumbered, licensing/royalties

Ogg Theora
free and open, no licensing fees
not many tools for it, not web optimised

WebM / VP8
open and royalty-free, web-optimised
support by hardware and software vendors

providing multiple sources
<video controls autoplay poster="…" width="…" height="…">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
<source src="movie.ogv" type="video/ogg" />

</video>

flash fallback for older browsers
http://camendesign.com/code/video_for_everybody

audio...exactly the same as video
<audio src=”music.mp3” controls autoplay … ></audio>
<audio controls autoplay>
<source src="music.mp3" type="audio/mpeg" />
<source src="music.oga" type="audio/ogg" />
</audio>
formats: MP3 vs Ogg Vorbis (vs WAV)

canvas = “scriptable images”
<canvas width="…" height="…"></canvas>

canvas has standard API methods for drawing
ctx = canvas.getContext("2d");
ctx.fillRect(x, y, width, height);
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y);
ctx.bezierCurveTo(x1, y1, x2, y2, c1, c2);
ctx.drawImage(…);

video, audio and canvas
on all devices without plugins
(Java / Flash / Silverlight not ubiquitous)

HTML5 (and friends) has
lots more APIs for developers
(for powerful client-side apps)

geolocation
navigator.geolocation.getCurrentPosition(success, error);
navigator.geolocation.watchCurrentPosition(success, error);
function success(position) {
/* where's Wally? */
var lat = position.coords.latitude;
var long = position.coords.longitude;
...
}

offline detection...
window.addEventListener('online', function(){ … }, true);
window.addEventListener('offline', function(){ … }, true);
and application cache
<html manifest=”blah.manifest”>
CACHE MANIFEST
# send this with correct text/cache-manifest MIME
images/sprites.png
scripts/common.js
scripts/jquery.js
styles/global.css
data.xml
and much more...

is it all safe to use, right now?

don't do browser sniffing
http://www.flickr.com/photos/timdorr/2096272747/

feature-detection
progressive enhancement, graceful degradation
http://diveintohtml5.org/everything.html

feature-detection for audio/video
if (!!document.createElement('video').canPlayType;) { … }
if (!!document.createElement('audio').canPlayType;) { … }

patching older browsers
github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

www.happyworm.com/jquery/jplayer

not a question of
HTML5 replacing Flash...

“The future is already here – it's
just not very evenly distributed”
William Gibson

www.opera.com/developer
people.opera.com/patrickl/presentations/cetis_15.11.2010/cetis_15.11.2010.pdf
patrick.lauke@opera.com

HTML5 and friends overview

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (13)

Ähnlich wie HTML5 and friends overview

Ähnlich wie HTML5 and friends overview (20)

Mehr von Patrick Lauke

Mehr von Patrick Lauke (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

HTML5 and friends overview