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

Schöne neue Welt von HTML5NEUE TECHNOLOGIEN IM KONTEXTPatrick H. Lauke / MultimediaTreff 28 / Köln / 3 Dezember 2011

Web Evangelist bei Opera

...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 becausewe’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/

HTML5…ohne Hype?

Geschichte von HTML51999 HTML 4.012000 XHTML 1.0

2004 W3C Fokus auf XHTML 2.0 …die Zukunft ist XML! http://www.flickr.com/photos/craiga/17071467/

WHATWGWeb Hypertext Application Technology Working Group

2007 W3C HTML5 WG

“...extending the language to better supportWeb applications [...] This puts HTML indirect competition with othertechnologies[...] , in particular Flash andSilverlight.”Ian Hickson, Editor of HTML5http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html

HTML5 ersetzt nicht HTML 4.01

HTML5 hat mehr Bling!

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/Semantik2. Formulare3. Multimedia

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

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

das schmutzige Geheimniss der Doctype

HTML5<!DOCTYPE html>

<!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. style34. msonormal 14. small 5. text 15. nav 6. content 16. clear 7. title 17. search 8. style2 18. style4 9. header 19. logo10. 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. banner10. 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äderdocument.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

jqueryui.com

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 miteingebauter 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...

<video>

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

mächtige (einfache) API

icant.co.uk/easy-youtube

<video> per JavaScript ansteuernvar v = document.getElementById(player);v.play();v.pause();v.volume = … ;v.currentTime = … ;…

events vom <video> abfangenvar 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.264weitverbreitet, Lizenzen/Royalties

Ogg Theora“free and open”, keine Lizengebührenwenige Tools, nicht fürs Web optimiert

WebM von Google, aber “open and royalty-free” Web-optimiertSupport 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>

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 drawingctx = 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 Bildformatectx = canvas.getContext("2d");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 Bilddatenctx = canvas.getContext("2d");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 videoctx = canvas.getContext("2d");v = document.getElementById(player);ctx.drawImage(v,x1,y1,w1,h2,x2,y2,w2,h2);

html5doctor.com/video-canvas-magic

media.chikuyonok.ru/ambilight

canvas accessibility?

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

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

is it all safe to use, right now?

www.youtube.com/html5

vorsicht: browser sniffing http://www.flickr.com/photos/timdorr/2096272747/

caniuse.com

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

modernizr.com

yepnopejs.com

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

HTML5 als Flashkiller?

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

giving developers a choice!

...ist HTML5 heute schon nutzbar?

“The future is already here – itsjust not very evenly distributed”William Gibson

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

http://www.multimediatreff.de	201
http://multimediatreff.de	12
http://archiv.multimediatreff.de	10
http://paper.li	1

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

by Patrick Lauke

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 224

Statistics

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