0
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 interop...
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 othertechnolog...
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...
1. Syntax/Semantik2. Formulare3. Multimedia
1. Syntax/Semantik2. Formulare3. Multimedia
HTML5 standardisiertderzeitiges Browserverhalten       (e.g. “relaxed” coding rules)
<b><i>Yo!</b></i>
software.hixie.ch/utilities/js/live-dom-viewer/
das schmutzige Geheimniss der         Doctype
HTML5<!DOCTYPE html>
<meta charset=”utf-8” /><meta charset=utf-8><MeTa CHarSet=utf-8>
<style type=”text/css”></style><script type=”text/javascript”></script>
<style type=”text/css”></style><script type=”text/javascript”></script>
<!doctype html><title>Minimales HTML5</title>
neue Elemente für bessere Semantik
Top 20 class names   1. footer                                          11. button   2. menu                              ...
Top 20 id names    1. footer                                          11. search   2. content                             ...
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.c...
1. Syntax/Semantik2. Formulare3. Multimedia
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=”we...
Typen und Attribute miteingebauter Validierung<input   … required><input   type=”tel”><input   type=”email”><input   type=...
people.opera.com/patrickl/experiments/forms/newtypes.html
people.opera.com/patrickl/experiments/forms/validation.html
1. Syntax/Semantik2. Formulare3. Multimedia
making your site Fonzie compliant...
<video>
Adobe Flash derzeit meistbenutztes Art,        Videos zu übermitteln
<object width="425" height="344">  <param name="movie"value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en&fs=1&"></param>  <...
<video src="video.webm"  controls  autoplay  loop  preload  poster="poster.jpg"  width="320" height="240">    <a href="vid...
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...
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...
Flash fallback für ältere browsers http://camendesign.com/code/video_for_everybody
<video controls autoplay poster="…" width="…" height="…">   <source src="movie.webm" type="video/webm" />   <source src="m...
<audio>
Audio...genau das gleiche<audio src=”music.mp3” controls autoplay … ></audio><audio controls autoplay>   <source src="musi...
<canvas>
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()...
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,...
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,...
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 / Silver...
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/...
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
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
×

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

2,934

Published on

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

No Downloads
Views
Total Views
2,934
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
44
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

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

    Clipping is a handy way to collect important slides you want to go back to later.

×