Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011

Schöne neue Welt von HTML5
NEUE TECHNOLOGIEN IM KONTEXT

Patrick H. Lauke / MultimediaTreff 28 / Köln / 3 Dezember 2011

...ist HTML5 heute schon nutzbar?

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/

Geschichte von HTML5

1999 HTML 4.01
2000 XHTML 1.0

2004 W3C Fokus auf XHTML 2.0
…die Zukunft ist XML!

http://www.flickr.com/photos/craiga/17071467/

WHATWG
Web 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 Spezifikation für
Browserhersteller
(wie interpretieren Browser Markup/Code – kein “reverse engineering”)

für Autoren: HTML5 differences from HTML4
http://www.w3.org/TR/html5-diff/

1. Syntax/Semantik
2. Formulare
3. Multimedia

HTML5 standardisiert
derzeitiges Browserverhalten
(e.g. “relaxed” coding rules)

software.hixie.ch/utilities/js/live-dom-viewer/

das schmutzige Geheimniss der
Doctype

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

neue Elemente für bessere Semantik

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

explizit und maschinenlesbar
...z.B. Screenreaders?

neue und alte Browser “unterstützen” die Elemente
(obwohl einige etwas Hilfe brauchen)

header, footer, … { display: block; }

Internet Explorer <9 braucht Stützräder
document.createElement('header');
document.createElement('footer');
…

http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2

bessere Formelemente
weil das Web interaktiver ist

rich form elements – ganz ohne JavaScript
<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>

Typen und Attribute mit
eingebauter Validierung
<input … required>
<input type=”tel”>
<input type=”email”>
<input type=”url”>
<input … pattern="[a-z]{3}[0-9]{3}">

people.opera.com/patrickl/experiments/forms/newtypes.html

people.opera.com/patrickl/experiments/forms/validation.html

making your site Fonzie compliant...

Adobe Flash derzeit meistbenutztes Art,
Videos zu übermitteln

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

Video als natives object
●
verhält sich wie jedes andere HTML Element
●
keyboard accessibility von Haus aus

people.opera.com/patrickl/experiments/video/hover+transition

<video> per JavaScript ansteuern
var v = document.getElementById('player');

v.play();
v.pause();
v.volume = … ;
v.currentTime = … ;
…

events vom <video> abfangen
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)
…

people.opera.com/patrickl/experiments/webm/basic-controls

people.opera.com/patrickl/experiments/webm/fancy-controls

people.opera.com/patrickl/experiments/webm/fancy-swap

Video Formate
die grosse Debatte

MP4 / H.264

weitverbreitet, Lizenzen/Royalties

Ogg Theora

“free and open”, keine Lizengebühren
wenige Tools, nicht für's Web optimiert

WebM

von Google, aber “open and royalty-free”
Web-optimiert
Support von Software- und Hardware-Herstellern

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

</video>

Flash fallback für ältere browsers
http://camendesign.com/code/video_for_everybody

Audio...genau das gleiche
<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>

Formate: 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(…);

people.opera.com/patrickl/experiments/canvas/particle/3

mariuswatz.com/works/abstract01js

canvas und externe Bildformate

var logo = new Image();
logo.src = 'logo.png';

ctx.drawImage(logo,x1,y1,w1,h1,x2,y2,w2,h2);

www.splintered.co.uk/experiments/archives/paranoid_0.3

canvas zugriff auf Bilddaten
canvasData = ctx.getImageData(x,y,w,h);

[R,G,B,A,R,G,B,A,R,G,B,A,R,G,B,A, … ]

www.splintered.co.uk/experiments/archives/canvas-ambilight

github.com/mezzoblue/PaintbrushJS

canvas und video
v = document.getElementById('player');

ctx.drawImage(v,x1,y1,w1,h2,x2,y2,w2,h2);

html5doctor.com/video-canvas-magic

video, audio und canvas auch auf Devices
ohne “Steck-eins” (plugins)
(nicht jeder hat Java / Flash / Silverlight)

HTML5 (und Freunde) hat
viele APIs für Developer
(für mächtige client-side Apps)

is it all safe to use, right now?

vorsicht: browser sniffing

http://www.flickr.com/photos/timdorr/2096272747/

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

alten Browser patchen
github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

nicht die Frage ob
HTML5 als Ersatz für Flash gut ist...

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

www.opera.com/developer
patrick.lauke@opera.com

Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011

Similaire à Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011 (20)

Plus de Patrick Lauke

Plus de Patrick Lauke (20)

Dernier

Dernier (20)

Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011