HTML5: Einblick, Überblick, Ausblick
•Télécharger en tant que ODP, PDF•
6 j'aime•1,270 vues
HTML5 ist heute das, was Web 2.0 vor etwa drei Jahren war: die Gegenwart und Zukunft des Internets, ein Buzzword für alles und nichts, das heiße Eisen überhaupt. HTML5 verspricht eine Vielzahl von neuen Möglichkeiten, multimediale Inhalte ohne Plugins einzubinden und leistungsstarke desktopähnliche Webapplikationen zu erstellen. HTML5 soll die Semantik von Webseiten erhöhen und die Möglichkeiten der Benutzerinteraktion verbessern, zum Beispiel im Umgang mit Formularen. Was genau gehört alles zum neuen Standard HTML5? Und handelt es sich dabei überhaupt um einen Standard? Kann ich die neuen Technologien bereits einsetzen oder ist alles noch Zukunftsmusik? Und welche Browser unterstützen welche Teile von HTML5? Dieser Vortrag beantwortet diese Fragen und versucht, ein wenig Ordnung ins Chaos zu bringen.
Recommandé
Contenu connexe
En vedette
En vedette (20)
Similaire à HTML5: Einblick, Überblick, Ausblick
Similaire à HTML5: Einblick, Überblick, Ausblick (20)
HTML5: Einblick, Überblick, Ausblick
- 1. Michael Jendryschik, itemis AG <markupforum/>, 01. März 2011
- 3. itemis Stuttgart Quelle: unbekannt
- 4. itemis Stuttgart Stuttgarter Engineering Park Quelle: unbekannt
- 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>
- 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>
- 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>
- 25. <h1>Draw attention with <mark> mark </mark> </h1>
- 30. Begrenztes Maß <meter min="0" max="10" value="8.7"></meter>
- 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
- 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>
- 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>
- 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
- 58. GeoLocation API
- 59. GeoLocation API
- 66. IE9 RC: 116 Punkte
- 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
- 75. Quelle: http://blog.modernmechanix.com/2007/08/26/planting-the-stars-and-stripes-in-the-antarctic/
- 83. Technische Machbarkeit im Vordergrund Niemals unter echten Einsatzbedingungen getestet Spekulativer medialer Hype
- 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
- 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 [email_address] 0151 10860470 0231 9860-173