$30 off During Our Annual Pro Sale. View Details »

HTML5: Einblick, Überblick, Ausblick

HTML5: Einblick, Überblick, Ausblick

Michael Jendryschik

March 01, 2011
Tweet

More Decks by Michael Jendryschik

Other Decks in Technology

Transcript

  1. Michael Jendryschik, itemis AG <markupforum/>, 01. März 2011

  2. None
  3. itemis Stuttgart Quelle: unbekannt

  4. itemis Stuttgart Stuttgarter Engineering Park Quelle: unbekannt

  5. None
  6. HTML5? Quelle: http://download.chip.eu/de/Superman-Wallpaper_1263715.html

  7. HTML5? Quelle: http://cassis9.deviantart.com/art/eierlegende-Wollmilchsau-153969060

  8. Quelle: http://www.peterkroener.de/was-ist-html5-und-was-nicht-und-was-haette-der-kaiser-dazu-gesagt/

  9. Quelle: http://www.hiphopstore.ch/CD/Rap-Schweizerdeutsch/Semantik-Willkomme-Diheime-CD.html

  10. Quelle: http://joshduck.com/periodic-table.html

  11. None
  12. None
  13. Endoskelett einer Website Quelle: http://www.kunstlinks.de/material/vtuempling/skelettiert/

  14. Endoskelett einer Website Quelle: http://www.kunstlinks.de/material/vtuempling/skelettiert/

  15. <body> <header> <div id="logo">Logo</div> <div id="search">Suche</div> <nav>Hauptmenü</nav> </header> <article> <h1>Hauptbereich</h1>

    <section> <h2>Sektion</h2> <h3>Abschnitt</h3> <!-- Content --> </section> <section> <h2>Sektion</h2> <!-- Content --> </section> </article> <aside> <nav>Bereichsmenü</nav> </aside> <footer>Footer</footer> </body>
  16. None
  17. Elemente mit Beschriftung

  18. Elemente mit Beschriftung <figure> <img src="/macaque.jpg" alt="Macaque in the trees">

    <figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption> </figure>
  19. None
  20. Datum und Uhrzeit Quelle: http://filomaniac.blogspot.com/2010/03/filofax-die-geschichte_25.html

  21. Datum und Uhrzeit Quelle: http://filomaniac.blogspot.com/2010/03/filofax-die-geschichte_25.html <time datetime="2011-12-28T08:25+01:00"> 28. Dezember 2010,

    09:25 Uhr<time>
  22. None
  23. Markierungen Quelle: http://www.baypa.de/baypa/storefront/package.html?id=2274503

  24. None
  25. <h1>Draw attention with <mark>mark</mark></h1>

  26. None
  27. Sollumbruchstelle Donau<wbr>dampf<wbr> schifffahrts<wbr>kapitän

  28. None
  29. None
  30. Begrenztes Maß <meter min="0" max="10" value="8.7"></meter>

  31. Formulare Quelle: http://www.badische-zeitung.de/wirtschaft-3/steuererklaerung-einfach-gemacht-fragen-und-antworten--40369436.html

  32. None
  33. None
  34. Auf Pflichtfelder hinweisen <input type="text" size="30" required="required" autofocus="autofocus" /> input:invalid

    { border: 1px solid #9F0F00; }
  35. E-Mail-Adressen <input type="email" size="30" required="required" />

  36. Datumsangaben <input type="date" required="required" />

  37. Zeitangaben <input type="time" required="required" min="12:00" max="23:30" step="1800" />

  38. Liste mit Vorschlägen <input list="personslist" required="required" /> <datalist id="personslist"> <option

    value="1–2" /> <option value="3–5" /> <option value="6–10" /> <option value="10–15" /> <option value="mehr als 15" /> </datalist>
  39. HTML5 ist mehr als nur schöne neue Semantik! HTML5 bietet

    einige Überraschungen! Quelle: http://www.fotostar.de/?p=173
  40. None
  41. None
  42. HTML audio und video <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param

    name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"></embed> </object>
  43. HTML audio und video <video src="http://www.youtube.com/demo/google_main.mp4" width="640" height="360" controls="controls"> <p><a

    href="http://www.youtube.com/demo/google_main.mp4">Video herunterladen</a></p> </video> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"></embed> </object>
  44. None
  45. Quelle: http://www.hongkiat.com/blog/48-excellent-html5-demos/ HTML5 canvas

  46. Quelle: http://www.rgraph.net/ HTML5 canvas

  47. HTML5 canvas

  48. HTML5 canvas <script type="text/javascript"> // Die Canvas-Funktion beim Laden der

    Seite aufrufen if(window.addEventListener) { addEventListener("load", drawCanvas, false); } else { attachEvent("onload", drawCanvas); } //Canvas zeichnen function drawCanvas() { var canvas = document.getElementById('testcanvas'); if(canvas.getContext) { var context = canvas.getContext('2d'); context.fillStyle = "rgb(0, 70, 124)"; context.fillRect(0, 0, canvas.width, canvas.height); } } </script> <canvas id="testcanvas" width="300" height="200"> <p>Dein Browser kann diese Grafik nicht darstellen.</p> </canvas>
  49. None
  50. HTML5 Application Cache

  51. Quelle: http://everytimezone.com/

  52. HTML5 Drag and Drop API

  53. HTML5 Drag and Drop API Quelle: http://html5demos.com/drag

  54. HTML5 Drag and Drop API Quelle: http://html5demos.com/drag

  55. HTML5 Drag and Drop API Quelle: http://html5demos.com/drag

  56. HTML5 Drag and Drop API Quelle: http://html5demos.com/drag

  57. HTML5 GeoLocation API

  58. GeoLocation API

  59. GeoLocation API

  60. Browserkompatibilität Quelle: http://www.vladstudio.com/wallpaper/?how_internet_works

  61. None
  62. None
  63. None
  64. None
  65. None
  66. IE9 RC: 116 Punkte

  67. Quelle: http://www.slideshare.net/cheilmann/using-html5-sensibl

  68. HTML5 audio und video <video src="http://www.youtube.com/demo/google_main.mp4" width="640" height="360" controls="controls"> <p><a

    href="http://www.youtube.com/demo/google_main.mp4">Video herunterladen</a></p> </video>
  69. HTML5 audio und video <video id="movie" width="640" height="360" controls="controls"> <source

    src=""http://www.youtube.com/demo/google_main.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="http://www.youtube.com/demo/google_main.ogv" type='video/ogg; codecs="theora, vorbis"' /> <source src="http://www.youtube.com/demo/google_main.mp4" /> <object width="640" height="360" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf"> <param name="movie" value="flowplayer-3.2.1.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value='config={"clip": {"url": "http://www.youtube.com/demo/google_main.mp4", "autoPlay":false, "autoBuffering":true}}' /> <p>Video herunterladen als <a href="http://www.youtube.com/demo/google_main.mp4">MP4</a>, <a href="http://www.youtube.com/demo/google_main.webm">WebM</a> oder <a href="http://www.youtube.com/demo/google_main.ogv">Ogg</a>.</p> </object> </video> <script> var v = document.getElementById("movie"); v.onclick = function() { if (v.paused) { v.play(); } else { v.pause(); } }; </script>
  70. »Nur wenig von dem, was in der ersten Auflage steht,

    hat im Jahr 2011 noch uneingeschränkte Gültigkeit. Fast alles hat sich in irgendwelchen Details geändert (…). Ich würde die erste Auflage echt nur noch mit größter Vorsicht aufschlagen, denn das Teil ist einfach veraltet.« (Peter Kröner) 2011 2010
  71. Warum müssen wir mit unfertigen Techniken arbeiten? Quelle: http://baufotos.steffi-und-lutz.de/20080730%20Innenwaende%20OG/index.htm

  72. Snow Cruiser Dr. Thomas C. Poulter 1939, Antarktis Quelle: http://www.joeld.net/snowcruiser/snowhist.html

  73. Quelle: http://blog.hemmings.com/index.php/tag/snow-cruiser/

  74. Quelle: http://www.joeld.net/snowcruiser/snowhist.html

  75. Quelle: http://blog.modernmechanix.com/2007/08/26/planting-the-stars-and-stripes-in-the-antarctic/

  76. Quelle: http://blog.hemmings.com/index.php/tag/snow-cruiser/

  77. Quelle: http://www.joeld.net/snowcruiser/snowhist.html

  78. Quelle: http://www.joeld.net/snowcruiser/snowhist.html

  79. Quelle: http://www.joeld.net/snowcruiser/snowhist.html

  80. Quelle: http://www.joeld.net/snowcruiser/snowhist.html

  81. Quelle: http://www.joeld.net/snowcruiser/snowhist.html

  82. Quelle: http://www.joeld.net/snowcruiser/snowhist.html

  83. Technische Machbarkeit im Vordergrund Niemals unter echten Einsatzbedingungen getestet Spekulativer

    medialer Hype
  84. None
  85. Weiterentwicklung des Webs als Ziel »Paving the Cowpath« Standardisieren, was

    schon da ist Reeller medialer Hype
  86. Quelle: http://www.flickr.com/photos/chisa/1349759901/ Es gibt Hacks und Lösungen, auch für den

    Internet Explorer
  87. http://code.google.com/p/html5shim/

  88. http://www.modernizr.com/

  89. http://de.html5boilerplate.com/

  90. HTML5 jetzt einsetzen!

  91. Welche Fragen haben Sie? Michael Jendryschik, itemis AG <markupforum/>, 01.

    März 2011
  92. Vielen Dank! Michael Jendryschik, itemis AG <markupforum/>, 01. März 2011

    michael.jendryschik@itemis.de 0151 10860470 0231 9860-173