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/
Endoskelett einer Website Quelle: http://www.kunstlinks.de/material/vtuempling/skelettiert/
<body> <header> <div id=&quot;logo&quot;>Logo</div> <div id=&quot;search&quot;>Suche</div> <nav> Hauptmenü </nav> </header...
 
Elemente mit Beschriftung
Elemente mit Beschriftung <figure> <img src=&quot;/macaque.jpg&quot; alt=&quot;Macaque in the trees&quot;> <figcaption> A ...
 
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=&quot;2011-...
 
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=&quot;0&quot; max=&quot;10&quot; value=&quot;8.7&quot;></meter>
Formulare Quelle: http://www.badische-zeitung.de/wirtschaft-3/steuererklaerung-einfach-gemacht-fragen-und-antworten--40369...
 
 
Auf Pflichtfelder hinweisen <input type=&quot;text&quot; size=&quot;30&quot;  required=&quot;required&quot;  autofocus=&qu...
E-Mail-Adressen <input  type=&quot;email&quot;  size=&quot;30&quot; required=&quot;required&quot; />
Datumsangaben <input  type=&quot;date&quot;  required=&quot;required&quot; />
Zeitangaben <input  type=&quot;time&quot;  required=&quot;required&quot;   min=&quot;12:00&quot; max=&quot;23:30&quot; ste...
Liste mit Vorschlägen <input list=&quot;personslist&quot; required=&quot;required&quot; /> <datalist id=&quot;personslist&...
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=&quot;clsid:d27cdb6e-ae6d-11cf-96b8-444553540000&quot; width=&quot;425&quot; height=&...
HTML audio und video <video src=&quot;http://www.youtube.com/demo/google_main.mp4&quot; width=&quot;640&quot; height=&quot...
 
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=&quot;text/javascript&quot;> // Die Canvas-Funktion beim Laden der Seite aufrufen if(window.addE...
 
HTML5 Application Cache
Quelle: http://everytimezone.com/
HTML5 Drag and Drop API
HTML5 Drag and Drop API Quelle: http://html5demos.com/drag
HTML5 Drag and Drop API Quelle: http://html5demos.com/drag
HTML5 Drag and Drop API Quelle: http://html5demos.com/drag
HTML5 Drag and Drop API Quelle: http://html5demos.com/drag
HTML5 GeoLocation API
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=&quot;http://www.youtube.com/demo/google_main.mp4&quot; width=&quot;640&quot; height=&quo...
HTML5 audio und video <video id=&quot;movie&quot; width=&quot;640&quot; height=&quot;360&quot; controls=&quot;controls&quo...
»Nur wenig von dem, was in der ersten Auflage steht, hat im Jahr 2011 noch uneingeschränkte Gültigkeit. Fast alles hat sic...
Warum müssen wir mit unfertigen Techniken arbeiten? Quelle:  http://baufotos.steffi-und-lutz.de/20080730%20Innenwaende%20O...
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
Quelle:  http://www.joeld.net/snowcruiser/snowhist.html
Quelle:  http://www.joeld.net/snowcruiser/snowhist.html
Quelle:  http://www.joeld.net/snowcruiser/snowhist.html
Quelle:  http://www.joeld.net/snowcruiser/snowhist.html
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_address] 0151 10860470 0231 9860-173
Nächste SlideShare
Wird geladen in …5
×

HTML5: Einblick, Überblick, Ausblick

3.666 Aufrufe

Veröffentlicht am

HTML5 ist heute das, was Web 2.0 vor etwa drei Jah­ren war: die Ge­gen­wart und Zu­kunft des In­ter­nets, ein Buz­zword für alles und nichts, das heiße Eisen über­haupt. HTML5 ver­spricht eine Viel­zahl von neuen Mög­lich­kei­ten, mul­ti­me­dia­le In­hal­te ohne Plug­ins ein­zu­bin­den und leis­tungs­star­ke desk­to­pähn­li­che Web­ap­pli­ka­tio­nen zu er­stel­len.

HTML5 soll die Se­man­tik von Web­sei­ten er­hö­hen und die Mög­lich­kei­ten der Be­nut­zer­inter­ak­ti­on ver­bes­sern, zum Bei­spiel im Um­gang mit For­mu­la­ren. Was genau ge­hört alles zum neuen Stan­dard HTML5? Und han­delt es sich dabei über­haupt um einen Stan­dard? Kann ich die neuen Tech­no­lo­gi­en be­reits ein­set­zen oder ist alles noch Zu­kunfts­mu­sik? Und wel­che Brow­ser un­ter­stüt­zen wel­che Teile von HTML5? Die­ser Vor­trag be­ant­wor­tet diese Fra­gen und ver­sucht, ein wenig Ord­nung ins Chaos zu brin­gen.

Veröffentlicht in: Technologie
1 Kommentar
6 Gefällt mir
Statistik
Notizen
Keine Downloads
Aufrufe
Aufrufe insgesamt
3.666
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
924
Aktionen
Geteilt
0
Downloads
80
Kommentare
1
Gefällt mir
6
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

HTML5: Einblick, Überblick, Ausblick

  1. 1. Michael Jendryschik, itemis AG <markupforum/>, 01. März 2011
  2. 3. itemis Stuttgart Quelle: unbekannt
  3. 4. itemis Stuttgart Stuttgarter Engineering Park Quelle: unbekannt
  4. 6. HTML5? Quelle: http://download.chip.eu/de/Superman-Wallpaper_1263715.html
  5. 7. HTML5? Quelle: http://cassis9.deviantart.com/art/eierlegende-Wollmilchsau-153969060
  6. 8. Quelle: http://www.peterkroener.de/was-ist-html5-und-was-nicht-und-was-haette-der-kaiser-dazu-gesagt/
  7. 9. Quelle: http://www.hiphopstore.ch/CD/Rap-Schweizerdeutsch/Semantik-Willkomme-Diheime-CD.html
  8. 10. Quelle: http://joshduck.com/periodic-table.html
  9. 13. Endoskelett einer Website Quelle: http://www.kunstlinks.de/material/vtuempling/skelettiert/
  10. 14. Endoskelett einer Website Quelle: http://www.kunstlinks.de/material/vtuempling/skelettiert/
  11. 15. <body> <header> <div id=&quot;logo&quot;>Logo</div> <div id=&quot;search&quot;>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>
  12. 17. Elemente mit Beschriftung
  13. 18. Elemente mit Beschriftung <figure> <img src=&quot;/macaque.jpg&quot; alt=&quot;Macaque in the trees&quot;> <figcaption> A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href=&quot;http://www.flickr.com/photos/rclark/&quot;>Richard Clark</a> </figcaption> </figure>
  14. 20. Datum und Uhrzeit Quelle: http://filomaniac.blogspot.com/2010/03/filofax-die-geschichte_25.html
  15. 21. Datum und Uhrzeit Quelle: http://filomaniac.blogspot.com/2010/03/filofax-die-geschichte_25.html <time datetime=&quot;2011-12-28T08:25+01:00&quot;> 28. Dezember 2010, 09:25 Uhr <time>
  16. 23. Markierungen Quelle: http://www.baypa.de/baypa/storefront/package.html?id=2274503
  17. 25. <h1>Draw attention with <mark> mark </mark> </h1>
  18. 27. Sollumbruchstelle Donau<wbr>dampf<wbr> schifffahrts<wbr>kapitän
  19. 30. Begrenztes Maß <meter min=&quot;0&quot; max=&quot;10&quot; value=&quot;8.7&quot;></meter>
  20. 31. Formulare Quelle: http://www.badische-zeitung.de/wirtschaft-3/steuererklaerung-einfach-gemacht-fragen-und-antworten--40369436.html
  21. 34. Auf Pflichtfelder hinweisen <input type=&quot;text&quot; size=&quot;30&quot; required=&quot;required&quot; autofocus=&quot;autofocus&quot; /> input:invalid { border: 1px solid #9F0F00; }
  22. 35. E-Mail-Adressen <input type=&quot;email&quot; size=&quot;30&quot; required=&quot;required&quot; />
  23. 36. Datumsangaben <input type=&quot;date&quot; required=&quot;required&quot; />
  24. 37. Zeitangaben <input type=&quot;time&quot; required=&quot;required&quot; min=&quot;12:00&quot; max=&quot;23:30&quot; step=&quot;1800&quot; />
  25. 38. Liste mit Vorschlägen <input list=&quot;personslist&quot; required=&quot;required&quot; /> <datalist id=&quot;personslist&quot;> <option value=&quot;1–2&quot; /> <option value=&quot;3–5&quot; /> <option value=&quot;6–10&quot; /> <option value=&quot;10–15&quot; /> <option value=&quot;mehr als 15&quot; /> </datalist>
  26. 39. HTML5 ist mehr als nur schöne neue Semantik! HTML5 bietet einige Überraschungen! Quelle: http://www.fotostar.de/?p=173
  27. 42. HTML audio und video <object classid=&quot;clsid:d27cdb6e-ae6d-11cf-96b8-444553540000&quot; width=&quot;425&quot; height=&quot;344&quot; codebase=&quot;http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0&quot;> <param name=&quot;allowFullScreen&quot; value=&quot;true&quot; /> <param name=&quot;allowscriptaccess&quot; value=&quot;always&quot; /> <param name=&quot;src&quot; value=&quot;http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&&quot; /> <param name=&quot;allowfullscreen&quot; value=&quot;true&quot; /> <embed type=&quot;application/x-shockwave-flash&quot; width=&quot;425&quot; height=&quot;344&quot; src=&quot;http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&&quot; allowscriptaccess=&quot;always&quot; allowfullscreen=&quot;true&quot;></embed> </object>
  28. 43. HTML audio und video <video src=&quot;http://www.youtube.com/demo/google_main.mp4&quot; width=&quot;640&quot; height=&quot;360&quot; controls=&quot;controls&quot;> <p><a href=&quot;http://www.youtube.com/demo/google_main.mp4&quot;>Video herunterladen</a></p> </video> <object classid=&quot;clsid:d27cdb6e-ae6d-11cf-96b8-444553540000&quot; width=&quot;425&quot; height=&quot;344&quot; codebase=&quot;http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0&quot;> <param name=&quot;allowFullScreen&quot; value=&quot;true&quot; /> <param name=&quot;allowscriptaccess&quot; value=&quot;always&quot; /> <param name=&quot;src&quot; value=&quot;http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&&quot; /> <param name=&quot;allowfullscreen&quot; value=&quot;true&quot; /> <embed type=&quot;application/x-shockwave-flash&quot; width=&quot;425&quot; height=&quot;344&quot; src=&quot;http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&&quot; allowscriptaccess=&quot;always&quot; allowfullscreen=&quot;true&quot;></embed> </object>
  29. 45. Quelle: http://www.hongkiat.com/blog/48-excellent-html5-demos/ HTML5 canvas
  30. 46. Quelle: http://www.rgraph.net/ HTML5 canvas
  31. 47. HTML5 canvas
  32. 48. HTML5 canvas <script type=&quot;text/javascript&quot;> // Die Canvas-Funktion beim Laden der Seite aufrufen if(window.addEventListener) { addEventListener(&quot;load&quot;, drawCanvas, false); } else { attachEvent(&quot;onload&quot;, drawCanvas); } //Canvas zeichnen function drawCanvas() { var canvas = document.getElementById('testcanvas'); if(canvas.getContext) { var context = canvas.getContext('2d'); context.fillStyle = &quot;rgb(0, 70, 124)&quot;; context.fillRect(0, 0, canvas.width, canvas.height); } } </script> <canvas id=&quot;testcanvas&quot; width=&quot;300&quot; height=&quot;200&quot;> <p>Dein Browser kann diese Grafik nicht darstellen.</p> </canvas>
  33. 50. HTML5 Application Cache
  34. 51. Quelle: http://everytimezone.com/
  35. 52. HTML5 Drag and Drop API
  36. 53. HTML5 Drag and Drop API Quelle: http://html5demos.com/drag
  37. 54. HTML5 Drag and Drop API Quelle: http://html5demos.com/drag
  38. 55. HTML5 Drag and Drop API Quelle: http://html5demos.com/drag
  39. 56. HTML5 Drag and Drop API Quelle: http://html5demos.com/drag
  40. 57. HTML5 GeoLocation API
  41. 58. GeoLocation API
  42. 59. GeoLocation API
  43. 60. Browserkompatibilität Quelle: http://www.vladstudio.com/wallpaper/?how_internet_works
  44. 66. IE9 RC: 116 Punkte
  45. 67. Quelle: http://www.slideshare.net/cheilmann/using-html5-sensibl
  46. 68. HTML5 audio und video <video src=&quot;http://www.youtube.com/demo/google_main.mp4&quot; width=&quot;640&quot; height=&quot;360&quot; controls=&quot;controls&quot;> <p><a href=&quot;http://www.youtube.com/demo/google_main.mp4&quot;>Video herunterladen</a></p> </video>
  47. 69. HTML5 audio und video <video id=&quot;movie&quot; width=&quot;640&quot; height=&quot;360&quot; controls=&quot;controls&quot;> <source src=&quot;&quot;http://www.youtube.com/demo/google_main.webm&quot; type='video/webm; codecs=&quot;vp8, vorbis&quot;' /> <source src=&quot;http://www.youtube.com/demo/google_main.ogv&quot; type='video/ogg; codecs=&quot;theora, vorbis&quot;' /> <source src=&quot;http://www.youtube.com/demo/google_main.mp4&quot; /> <object width=&quot;640&quot; height=&quot;360&quot; type=&quot;application/x-shockwave-flash&quot; data=&quot;flowplayer-3.2.1.swf&quot;> <param name=&quot;movie&quot; value=&quot;flowplayer-3.2.1.swf&quot; /> <param name=&quot;allowfullscreen&quot; value=&quot;true&quot; /> <param name=&quot;flashvars&quot; value='config={&quot;clip&quot;: {&quot;url&quot;: &quot;http://www.youtube.com/demo/google_main.mp4&quot;, &quot;autoPlay&quot;:false, &quot;autoBuffering&quot;:true}}' /> <p>Video herunterladen als <a href=&quot;http://www.youtube.com/demo/google_main.mp4&quot;>MP4</a>, <a href=&quot;http://www.youtube.com/demo/google_main.webm&quot;>WebM</a> oder <a href=&quot;http://www.youtube.com/demo/google_main.ogv&quot;>Ogg</a>.</p> </object> </video> <script> var v = document.getElementById(&quot;movie&quot;); v.onclick = function() { if (v.paused) { v.play(); } else { v.pause(); } }; </script>
  48. 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
  49. 71. Warum müssen wir mit unfertigen Techniken arbeiten? Quelle: http://baufotos.steffi-und-lutz.de/20080730%20Innenwaende%20OG/index.htm
  50. 72. Snow Cruiser Dr. Thomas C. Poulter 1939, Antarktis Quelle: http://www.joeld.net/snowcruiser/snowhist.html
  51. 73. Quelle: http://blog.hemmings.com/index.php/tag/snow-cruiser/
  52. 74. Quelle: http://www.joeld.net/snowcruiser/snowhist.html
  53. 75. Quelle: http://blog.modernmechanix.com/2007/08/26/planting-the-stars-and-stripes-in-the-antarctic/
  54. 76. Quelle: http://blog.hemmings.com/index.php/tag/snow-cruiser/
  55. 77. Quelle: http://www.joeld.net/snowcruiser/snowhist.html
  56. 78. Quelle: http://www.joeld.net/snowcruiser/snowhist.html
  57. 79. Quelle: http://www.joeld.net/snowcruiser/snowhist.html
  58. 80. Quelle: http://www.joeld.net/snowcruiser/snowhist.html
  59. 81. Quelle: http://www.joeld.net/snowcruiser/snowhist.html
  60. 82. Quelle: http://www.joeld.net/snowcruiser/snowhist.html
  61. 83. Technische Machbarkeit im Vordergrund Niemals unter echten Einsatzbedingungen getestet Spekulativer medialer Hype
  62. 85. Weiterentwicklung des Webs als Ziel »Paving the Cowpath« Standardisieren, was schon da ist Reeller medialer Hype
  63. 86. Quelle: http://www.flickr.com/photos/chisa/1349759901/ Es gibt Hacks und Lösungen, auch für den Internet Explorer
  64. 87. http://code.google.com/p/html5shim/
  65. 88. http://www.modernizr.com/
  66. 89. http://de.html5boilerplate.com/
  67. 90. HTML5 jetzt einsetzen!
  68. 91. Welche Fragen haben Sie? Michael Jendryschik, itemis AG <markupforum/>, 01. März 2011
  69. 92. Vielen Dank! Michael Jendryschik, itemis AG <markupforum/>, 01. März 2011 [email_address] 0151 10860470 0231 9860-173

×