Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. <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>
  2. 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>
  3. 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>
  4. HTML5 ist mehr als nur schöne neue Semantik! HTML5 bietet

    einige Überraschungen! Quelle: http://www.fotostar.de/?p=173
  5. 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>
  6. 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>
  7. 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>
  8. 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>
  9. 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>
  10. »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