HTML5: Einblick, Überblick, Ausblick

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

itemis Stuttgart Quelle: unbekannt

itemis Stuttgart Stuttgarter Engineering Park Quelle: unbekannt

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

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

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

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

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

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

<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>  </section> <section> <h2>Sektion</h2>  </section> </article> <aside> <nav>Bereichsmenü</nav> </aside> <footer>Footer</footer> </body>

Elemente mit Beschriftung

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>

Datum und Uhrzeit Quelle: http://filomaniac.blogspot.com/2010/03/filofax-die-geschichte_25.html

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>

Markierungen Quelle: http://www.baypa.de/baypa/storefront/package.html?id=2274503

<h1>Draw attention with <mark>mark</mark></h1>

Sollumbruchstelle Donau<wbr>dampf<wbr> schifffahrts<wbr>kapitän

Begrenztes Maß <meter min="0" max="10" value="8.7"></meter>

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

Auf Pflichtfelder hinweisen <input type="text" size="30" required="required" autofocus="autofocus" /> input:invalid
{ border: 1px solid #9F0F00; }

E-Mail-Adressen <input type="email" size="30" required="required" />

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

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

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>

HTML5 ist mehr als nur schöne neue Semantik! HTML5 bietet
einige Überraschungen! Quelle: http://www.fotostar.de/?p=173

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>

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>

Quelle: http://www.hongkiat.com/blog/48-excellent-html5-demos/ HTML5 canvas

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

HTML5 canvas

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>

HTML5 Application Cache

Quelle: http://everytimezone.com/

HTML5 Drag and Drop API

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

HTML5 GeoLocation API

GeoLocation API

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

IE9 RC: 116 Punkte

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

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>

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>

»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

Warum müssen wir mit unfertigen Techniken arbeiten? Quelle: http://baufotos.steffi-und-lutz.de/20080730%20Innenwaende%20OG/index.htm

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

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

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

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

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

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

Technische Machbarkeit im Vordergrund Niemals unter echten Einsatzbedingungen getestet Spekulativer
medialer Hype

Weiterentwicklung des Webs als Ziel »Paving the Cowpath« Standardisieren, was
schon da ist Reeller medialer Hype

Quelle: http://www.flickr.com/photos/chisa/1349759901/ Es gibt Hacks und Lösungen, auch für den
Internet Explorer

http://code.google.com/p/html5shim/

http://www.modernizr.com/

http://de.html5boilerplate.com/

HTML5 jetzt einsetzen!

Welche Fragen haben Sie? Michael Jendryschik, itemis AG <markupforum/>, 01.
März 2011

Vielen Dank! Michael Jendryschik, itemis AG <markupforum/>, 01. März 2011
[email protected] 0151 10860470 0231 9860-173

HTML5: Einblick, Überblick, Ausblick

HTML5: Einblick, Überblick, Ausblick

More Decks by Michael Jendryschik

Other Decks in Technology

Featured

Transcript