Als ODP, PPTX herunterladen
![Vielen Dank! Michael Jendryschik, itemis AG <markupforum/>, 01. März 2011 [email_address] 0151 10860470 0231 9860-173](https://image.slidesharecdn.com/html5-michaeljendryschik-itemisag-110303180013-phpapp01/85/HTML5-Einblick-Uberblick-Ausblick-92-320.jpg)
Hochgeladen vonMichael Jendryschik
HTML5: Einblick, Überblick, Ausblick
Das Dokument behandelt verschiedene Aspekte von HTML5, einschließlich neuer semantischer Elemente, Audio- und Video-Integration sowie Canvas-Funktionalitäten. Es wird darauf hingewiesen, dass viele Informationen in älteren Ausgaben möglicherweise veraltet sind und dass HTML5 zahlreiche neue Möglichkeiten bietet, die sowohl Entwickler als auch Benutzer ansprechen. Zudem wird auf technische Machbarkeit und Entwicklungsprozesse im Web eingegangen.
HTML5: Einblick, Überblick, Ausblick
- 1. Michael Jendryschik, itemisAG <markupforum/>, 01. März 2011
- 2.
- 3. itemis Stuttgart Quelle:unbekannt
- 4. itemis Stuttgart StuttgarterEngineering Park Quelle: unbekannt
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13. Endoskelett einer WebsiteQuelle: http://www.kunstlinks.de/material/vtuempling/skelettiert/
- 14. Endoskelett einer WebsiteQuelle: http://www.kunstlinks.de/material/vtuempling/skelettiert/
- 15. <body> <header> <divid="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.
- 17.
- 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.
- 20. Datum und UhrzeitQuelle: http://filomaniac.blogspot.com/2010/03/filofax-die-geschichte_25.html
- 21. Datum und UhrzeitQuelle: 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.
- 23.
- 24.
- 25. <h1>Draw attention with <mark> mark </mark> </h1>
- 26.
- 27.
- 28.
- 29.
- 30. Begrenztes Maß <metermin="0" max="10" value="8.7"></meter>
- 31.
- 32.
- 33.
- 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 mehrals nur schöne neue Semantik! HTML5 bietet einige Überraschungen! Quelle: http://www.fotostar.de/?p=173
- 40.
- 41.
- 42. HTML audio undvideo <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 undvideo <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.
- 45.
- 46.
- 47.
- 48. HTML5 canvas <scripttype="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.
- 50.
- 51.
- 52. HTML5 Drag andDrop API
- 53. HTML5 Drag andDrop API Quelle: http://html5demos.com/drag
- 54. HTML5 Drag andDrop API Quelle: http://html5demos.com/drag
- 55. HTML5 Drag andDrop API Quelle: http://html5demos.com/drag
- 56. HTML5 Drag andDrop API Quelle: http://html5demos.com/drag
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66. IE9 RC: 116Punkte
- 67.
- 68. HTML5 audio undvideo <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 undvideo <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 vondem, 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 wirmit 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.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83. Technische Machbarkeit imVordergrund Niemals unter echten Einsatzbedingungen getestet Spekulativer medialer Hype
- 84.
- 85. Weiterentwicklung des Websals 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.
- 88.
- 89.
- 90.
- 91. Welche Fragen habenSie? Michael Jendryschik, itemis AG <markupforum/>, 01. März 2011
- 92. Vielen Dank! MichaelJendryschik, itemis AG <markupforum/>, 01. März 2011 [email_address] 0151 10860470 0231 9860-173