Your SlideShare is downloading. ×
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,888

Published on

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,888
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
43
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Schöne neue Welt von HTML5NEUE TECHNOLOGIEN IM KONTEXTPatrick H. Lauke / MultimediaTreff 28 / Köln / 3 Dezember 2011
  • 2. Web Evangelist bei Opera
  • 3. ...ist HTML5 heute schon nutzbar?
  • 4. www.textfiles.com/underconstruction
  • 5. "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
  • 6. http://www.flickr.com/photos/24374884@N08/4603715307/
  • 7. HTML5…ohne Hype?
  • 8. Geschichte von HTML51999 HTML 4.012000 XHTML 1.0
  • 9. 2004 W3C Fokus auf XHTML 2.0 …die Zukunft ist XML! http://www.flickr.com/photos/craiga/17071467/
  • 10. WHATWGWeb Hypertext Application Technology Working Group
  • 11. 2007 W3C HTML5 WG
  • 12. “...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
  • 13. HTML5 ersetzt nicht HTML 4.01
  • 14. HTML5 hat mehr Bling!
  • 15. 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/
  • 16. 1. Syntax/Semantik2. Formulare3. Multimedia
  • 17. 1. Syntax/Semantik2. Formulare3. Multimedia
  • 18. HTML5 standardisiertderzeitiges Browserverhalten (e.g. “relaxed” coding rules)
  • 19. <b><i>Yo!</b></i>
  • 20. software.hixie.ch/utilities/js/live-dom-viewer/
  • 21. das schmutzige Geheimniss der Doctype
  • 22. HTML5<!DOCTYPE html>
  • 23. <meta charset=”utf-8” /><meta charset=utf-8><MeTa CHarSet=utf-8>
  • 24. <style type=”text/css”></style><script type=”text/javascript”></script>
  • 25. <style type=”text/css”></style><script type=”text/javascript”></script>
  • 26. <!doctype html><title>Minimales HTML5</title>
  • 27. neue Elemente für bessere Semantik
  • 28. 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
  • 29. 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
  • 30. explizit und maschinenlesbar ...z.B. Screenreaders?
  • 31. neue und alte Browser “unterstützen” die Elemente(obwohl einige etwas Hilfe brauchen)header, footer, … { display: block; }
  • 32. 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
  • 33. 1. Syntax/Semantik2. Formulare3. Multimedia
  • 34. bessere Formelemente weil das Web interaktiver ist
  • 35. jqueryui.com
  • 36. 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>
  • 37. Typen und Attribute miteingebauter Validierung<input … required><input type=”tel”><input type=”email”><input type=”url”><input … pattern="[a-z]{3}[0-9]{3}">
  • 38. people.opera.com/patrickl/experiments/forms/newtypes.html
  • 39. people.opera.com/patrickl/experiments/forms/validation.html
  • 40. 1. Syntax/Semantik2. Formulare3. Multimedia
  • 41. making your site Fonzie compliant...
  • 42. <video>
  • 43. Adobe Flash derzeit meistbenutztes Art, Videos zu übermitteln
  • 44. <object width="425" height="344"> <param name="movie"value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en&fs=1&"></param> <param name="allowFullScreen"value="true"></param> <param name="allowscriptaccess"value="always"></param> <embedsrc="http://www.youtube.com/v/9sEI1AUFJKw&hl=en&fs=1&" type="application/x-shockwave-flash"allowscriptaccess="always" allowfullscreen="true"width="425" height="344"></embed></object>
  • 45. <video src="video.webm" controls autoplay loop preload poster="poster.jpg" width="320" height="240"> <a href="video.webm">Download movie</a></video>
  • 46. Video als natives object● verhält sich wie jedes andere HTML Element● keyboard accessibility von Haus aus
  • 47. people.opera.com/patrickl/experiments/video/hover+transition
  • 48. mächtige (einfache) API
  • 49. icant.co.uk/easy-youtube
  • 50. <video> per JavaScript ansteuernvar v = document.getElementById(player);v.play();v.pause();v.volume = … ;v.currentTime = … ;…
  • 51. 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)…
  • 52. people.opera.com/patrickl/experiments/webm/basic-controls
  • 53. people.opera.com/patrickl/experiments/webm/fancy-controls
  • 54. people.opera.com/patrickl/experiments/webm/fancy-swap
  • 55. Video Formate die grosse Debatte
  • 56. MP4 / H.264weitverbreitet, Lizenzen/Royalties
  • 57. Ogg Theora“free and open”, keine Lizengebührenwenige Tools, nicht fürs Web optimiert
  • 58. WebM von Google, aber “open and royalty-free” Web-optimiertSupport von Software- und Hardware-Herstellern
  • 59. Video mit multiple sources<video controls autoplay poster="…" width="…" height="…"> <source src="movie.webm" type="video/webm" /> <source src="movie.mp4" type="video/mp4" /> <!-- fallback content --></video>
  • 60. Flash fallback für ältere browsers http://camendesign.com/code/video_for_everybody
  • 61. <video controls autoplay poster="…" width="…" height="…"> <source src="movie.webm" type="video/webm" /> <source src="movie.mp4" type="video/mp4" /> <object width="…" height="…" type="application/x-shockwave-flash" data="player.swf"> <param name="movie" value="player.swf" /> <param name="flashvars" value=" … file=movie.mp4" /> <!-- fallback content --> </object></video>
  • 62. <audio>
  • 63. 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" /> <!-- fallback content --></audio>Formate: MP3 vs Ogg Vorbis (vs WAV)
  • 64. <canvas>
  • 65. canvas = “scriptable images”<canvas width="…" height="…"></canvas>
  • 66. 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(…);
  • 67. people.opera.com/patrickl/experiments/canvas/particle/3
  • 68. mariuswatz.com/works/abstract01js
  • 69. 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);
  • 70. www.splintered.co.uk/experiments/archives/paranoid_0.3
  • 71. 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, … ]
  • 72. www.splintered.co.uk/experiments/archives/canvas-ambilight
  • 73. github.com/mezzoblue/PaintbrushJS
  • 74. canvas und videoctx = canvas.getContext("2d");v = document.getElementById(player);ctx.drawImage(v,x1,y1,w1,h2,x2,y2,w2,h2);
  • 75. html5doctor.com/video-canvas-magic
  • 76. media.chikuyonok.ru/ambilight
  • 77. canvas accessibility?
  • 78. video, audio und canvas auch auf Devices ohne “Steck-eins” (plugins) (nicht jeder hat Java / Flash / Silverlight)
  • 79. HTML5 (und Freunde) hatviele APIs für Developer (für mächtige client-side Apps)
  • 80. is it all safe to use, right now?
  • 81. www.youtube.com/html5
  • 82. vorsicht: browser sniffing http://www.flickr.com/photos/timdorr/2096272747/
  • 83. caniuse.com
  • 84. feature-detectionprogressive enhancement, graceful degradation – or use shims http://diveintohtml5.org/everything.html
  • 85. modernizr.com
  • 86. yepnopejs.com
  • 87. alten Browser patchengithub.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  • 88. HTML5 als Flashkiller?
  • 89. nicht die Frage obHTML5 als Ersatz für Flash gut ist...
  • 90. giving developers a choice!
  • 91. ...ist HTML5 heute schon nutzbar?
  • 92. “The future is already here – itsjust not very evenly distributed”William Gibson
  • 93. www.opera.com/developer patrick.lauke@opera.com

×