In letzter Zeit spielt HTML5 eine immer zentralere Rolle. Noch aber steckt die Technologie in der Entwicklung und es ist unklar, ob es je ein „fertiges HTML5“ geben wird. In dieser Sendung werfen wir daher einen sehr genauen Blick auf den aktuellen Stand und klären auf, welche Teile davon schon heute wie eingesetzt werden können.

Diese Folge jetzt anhören

HTML 5 – Grundsätzliches

  • Was bedeutet “HTML5?” (HTML5-Spezifikationen versus diverse Technologien, die unter HTML5 zusammengefasst werden, damit aber nichts zu tun haben wie Geolocation etc)
    • Pro/Contra der Sprachregelung
  • Woher kommt HTML5?
    • XHTML1/2-Fehlschlag
    • WHATWG vs. W3C
  • Was gibt es neues, was bleibt beim Alten?
    • Ein paar neue Elemente, viel wie bisher
    • Einige Vereinheitlichungen
    • DOM-orientierte Spezifikationen
    • Spezifikationen für die technische Infrastruktur

Praktischer Nutzen von HTML5

  • Semantisches HTML5 und die Anwendung
    • header, footer, section, article, aside, nav, etc
    • Outline-Algorithmus
    • IE-Gehacke
  • HTML5 vs. XHTML5 vs. HTML5 das wie XHTML aussieht
    • XHTML5 ist echtes XHTML
    • Freie Syntaxwahl
  • HTML5-Formulare
    • Neue Eingabetypen
    • Eingebaute Validierung
    • CSS-Pseudoklassen :invalid und :valid
  • Audio & Video
    • Neue Elemente und deren Möglichkeiten
    • Was spricht eigentlich gegen Flash
    • Codec-Krieg H.264 versus Theora versus WebM
  • Canvas
    • 2D-Zeichenfunktionen
    • 3D und WebGL
    • … nicht im IE9!
  • WebWorkers
    • Hintergrundprozesse in JS
    • Nichtblockierende, lang laufende Scripts
    • Verteiltes Rechnen
    • Kann man IE halbwegs gut faken
  • Drag & Drop
    • Interoperable Websites
    • IE > Safari
  • Offline-Webapps
    • Application Caches
    • DOM-Storage
    • IE-Hacks
    • Web SQL Database
  • Geolocation

Fazit und Ausblick

  • Was kann man heute schon mit HTML5 anfangen?
    • Canvas
    • Formale Möglichkeiten
    • Progressive Enhancement
  • Was bedeutet HTML5 für die Zukunft des Webs? Wann kommt HTML6?
    • Wird HTML5 je offizielle W3C-Recommendation?

Links zur Sendung

Gewinne das nagelneue HTML5-Buch von Peter Kröner oder einen 30-EUR-iTunes-Gutschein

Wir verlosen zwei Exemplare des Buches und einen iTunes-Gutschein im Wert von 30 Euro. So nehmt ihr an der Verlosung teil:
Folgt bei Twitter den Accounts @technikwuerze, @macx, @73inches und @sir_pepe und twittere über diese Sendung. Verwende dabei bitte des Hashtags #html5tw.

Unser Vorschlag: Alles über HTML5, in der Technikwürze 169 http://bit.ly/html5tw #html5tw

Der Rechtsweg ist wie immer ausgeschlossen. Die Verlosung endet am 10. Juni 2010 um genau 15 Uhr.

Diese Folge jetzt anhören

Tags: , ,

Dieser Beitrag wurde am Sonntag, 30. Mai 2010 um 14:00 Uhr in der Kategorie Podcast, Technikwürze Total veröffentlicht.
Du kannst einen Kommentar hinterlassen, oder einen Trackback von deiner Seite aus senden.

Kommentare

  • Avatarbild von Chris Chris
    am 30. Mai 2010, 16:13 Uhr

    Hallöchen Ihr.

    Schöner Beitrag!
    Es wird gesagt, dass “em” und “strong” in Vorlesebrowser betohnt werden.

    Das stimmt so nicht.

    Kein aktueller Vorlesebrowser betont diese 2 Tags.
    Es sind leider immernoch nur semantische Tags welche “sehr wichtige” und “wichtige” Worte / Abschnitte auszeichnen sollten, aber letzenendes nichts anderes wie ein “span” in Vorlesebrowsern sind.

    Gruß
    Chris

  • Avatarbild von Peter Peter
    am 30. Mai 2010, 18:47 Uhr

    Gemeint war natürlich, dass die Spezifikationen von HTML 4 die Elemente em und strong für betonte bzw. stark betonte Texte vorsehen. Was die Browser aus HTML machen, das ist dann ja bekanntermaßen dann wieder ein ganz eigenes Biest ;)

  • Avatarbild von Chris Chris
    am 31. Mai 2010, 07:56 Uhr

    Ok, damit bin ich einverstanden. :-)

    was ich aber schon seit längerem mal sagen wollte..euer Player auf der Seite hängt ziemlich bei mir (Arbeit ebenso wie daheim).

  • Avatarbild von macx macx
    am 31. Mai 2010, 09:41 Uhr

    Das ist nicht nur bei dir so. Ich mag diesen Flash-Player da eh irgendwie nicht. Wir lassen uns was einfallen.
    Bisweilen empfehle ich weiterhin das Abo über RSS oder iTunes.

  • Avatarbild von Chris Chris
    am 31. Mai 2010, 09:47 Uhr

    Ich kanns mir nicht verkneifen, endschuldigt:

    http://www.bestviewed.de/

    Bin gespannt, was für ein Player kommen wird ;)

  • Avatarbild von Frank Frank
    am 31. Mai 2010, 14:56 Uhr

    Ich arbeite recht oft mit HTML5 und schon lange an einer Vorlage für Themes mit WordPress und html5; schon um die neuen Elemente zu verstehen und zu nutzen. Wer mag, kann sich den Aufbau des Blogs damit gern ansehen und ich bin immer dankbar für Hinweise und Mitarbeit.
    Als Hinweis gedacht, da man in der Sendung quasi ein Bloglayout als Beispiel nimmt.
    Auch ich danke Peter für die Hilfe dabei und den Link zum Ouliner, der alles in eine erste Logik bringt und das Verständnis schult.
    In der Projektsite gibt es einen Hinweis zur html5-Version; es liegt ein Stylesheet bei, welches das Verständnis der Elemente unterstützt. Ebenso habe ich einen Artikel dazu hinterlassen.
    Im übrigen sieht es aus wie xhtml, ist aber html5 und keine XML. Aber ich mag die saubere Schreibweise von öffnenden und schließenden Tags.

    Danke für die Sendung und den Podcast im ganzen.

  • Avatarbild von Thomas Weise Thomas Weise
    am 31. Mai 2010, 15:24 Uhr

    Ich muss das einfach wieder einmal sagen.
    Auch von mir Danke für die Sendung und den Podcast im ganzen.

  • Avatarbild von Frank Frank
    am 31. Mai 2010, 16:03 Uhr

    Da die Links im 6. Kommentar nicht da sind, warum auch immer, hier per Text
    Projektseite: http://wpbasis.de/readme-de_DE.php
    Artikel: http://bueltge.de/wp-basis-theme-in-xhtml5/984/

  • Avatarbild von macx macx
    am 31. Mai 2010, 16:05 Uhr

    Im WordPress ist nichts angekommen und Textile nutzen wir ja erst bei der Ausgabe. Dennoch, danke für den Nachtrag.

  • Avatarbild von Frank Frank
    am 31. Mai 2010, 16:17 Uhr

    Eventuell finden sich ja Helfer, daher waren mir die Links hier wichtig. ich habe HTML genutzt, vermutlich habt ihr das zu Gunsten Textile deaktiviert und ich habe den Hinweis überlesen; Macht der Gewohnheit.

  • Avatarbild von Tobias Tobias
    am 31. Mai 2010, 19:52 Uhr

    Danke für die Informationen.
    Die “Änderung” der h* Elemente kann ich nicht nachvollziehen. Vielleicht kann mir jemand auf die Sprünge helfen.

  • Avatarbild von Chris Chris
    am 31. Mai 2010, 19:57 Uhr

    Bzgl des HTML5-WP-Template.
    Ich finde das comment-template nicht so toll. Ein Kommentar ist für mich ein Zitat, was in ein blockquote gehört. Nicht in 100 (un)geordneten Listen.

    Ebenso die Kommentar-Navigation (wenn mehrere Seiten) mit div’s, ist nicht optimal gelöst.

    Gruß
    Chris

  • Avatarbild von Peter Peter
    am 31. Mai 2010, 20:17 Uhr

    @Tobias Die h*-Elemente selbst haben sich nicht geändert, nur wirken sie jetzt eben im Zusammenspiel mit Section, Article, Aside und Nav anders. Früher ergab sich die Ordnung der Überschriften allein durch die Zahl hinter dem H, jetzt spielt es auch eine Rolle, wie tief das Element in Section, Article etc verschachtelt steht. Aber wie schon in der Sendung gesagt, am ehesten versteht man das, wenn man ein wenig mit dem Outliner herumspielt: http://gsnedders.html5.org/outliner/

  • Avatarbild von Frank Frank
    am 31. Mai 2010, 21:03 Uhr

    @Chris: Danke für deine Rückmeldung. Aktuell bin ich mir da noch unsicher – sind Kommentare wirklich Zitate, sind es nicht Aussagen der Kommentierenden, cite für den Kommentierenden ja, aber der Text ist kein Zitat. Man kann zitieren, dies ist dann wieder blockquote.
    Warum ist die Kommentarnavi nicht im div, ein blockelement. Nav ist hier eher falsch, da keine Relvanz dieser Navi für die Kommentare.

    Bitte gern Input dazu!

  • Avatarbild von Chris Chris
    am 1. Juni 2010, 07:01 Uhr

    @Frank
    Hm..das ist ein schmaler Grad auf dem man sich da bewegt. Ich finde schon, dass ein blockquote da hin gehört. Aber ich denke du hast mit deiner Argumentation auch recht. Ist wohl Geschmackssache – oder Auslegungssache – und nicht so klar geregelt.

    Ja aber ein div-Element ist ein aussageloses Tag. Das es ein Blockelement ist, stimmt. Aber wie der Name “block” schon sagt, hatt dies was mit CSS zu tun und nichts mit einer Auszeichnungssprache. Du transportierst keinerlei Semantik in den Text, wenn du nur ein div außenrum hast.

    Da es ja eine Seitennavigation ist, also “Seite vor” und “Seite zurück”, würde ich schon eine ungeordnete Liste verwenden. Ob dort ein nav außenrumgehört, dadrüber gehen wohl – ähnlich wie bei dem blockquote – die Meinungen auseinander. Ist es eine Navigation? Wenn ja -> nav.

    Zitat W3C:
    “The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.”

    Gruß
    Chris

  • Avatarbild von Marcel Marcel
    am 1. Juni 2010, 10:57 Uhr

    Ich habe es mir zwar noch nicht im Internet Explorer angesehen, ansonsten macht das HTML5 Starter Pack aber recht soliden Eindruck.

  • Avatarbild von Frank Frank
    am 1. Juni 2010, 12:15 Uhr

    @Chris: natürlich ist es immer in einer gewissen Diskussion, aber die Kommentare sind von einem Autor, im Grunde also in sich geschlossene Artikel und damit article, was ich auch über die Kommentarfunktion fb_theme_comment() so steuere.

    Zu der Navi der Kommentar-Pages: hier schwimme ich, ich stimme in jedem Fall deiner Meinung zu div zu, lediglich ein geschlossener Block, der via CSS nutzbar ist. Daher ist der div in dem Fall auch nur dafür da. Den Abschluss übergibt das section-Element. Das nav sehe ich noch nicht in der Verwendung hier, da nicht wirklich auf andere Seiten verwiesen wird. Die Seite bleibt im Sinne des Content, es werden lediglich andere Kommentare zum Artikel, zur Seite dargestellt.

  • Avatarbild von Chris Chris
    am 1. Juni 2010, 20:16 Uhr

    Danke für die ausführliche Antwort. ES hört sich selbstverständlich alles logisch an, was du geschrieben hast.

    Bzgl der Navigation der Kommentareinträge scheiden sich die Geister. Ich bleibe bei meiner Behauptung stehen, dass dies eine Navigation ist (selbst wenn es nur die Kommentare navigiert). ;-)

    Solltest du weiterhin Unterstützung suchen, kannst du dich ja gerne einmal bei mir via E-Mail melden.

    Besten Dank u Gruß
    Chris

  • Avatarbild von Frank Frank
    am 1. Juni 2010, 20:21 Uhr

    @Chris: ich kann immer Unterstützung gebrauchen, Hilfe ist willkommen. Ich komme ja hier nicht an die Mails, dein Name hat auch keine URL-Verknüpfung. Vermutlich ist es daher einfacher, wenn du dich mal bei mir meldest.

  • Avatarbild von Bert Bert
    am 1. Juni 2010, 20:52 Uhr

    Vielen Dank für die ausführliche Sendung! Damit habt ihr den Termin, ab dem ich HTML5 mal ernsthaft einsetzen werde, um gut drei Jahre vorverlegt. ;-)

  • Avatarbild von Yannick Yannick
    am 2. Juni 2010, 21:37 Uhr

    Also erst einmal ein fettes Lob an euch. Die Technikwürze ist klasse! Peter Kröner hat sich da ja echt im HTML5-Wald durchgearbeitet. Deine html5-buch.de-Seite gefällt mir ebenfalls.

    Zu CSS3 fällt mir auch was interessantes ein: Letztens wurde auf twitter gesagt, dass font-face seit 2000 vorhanden ist, aber erst jetzt von den Browsern implementiert wird.

    Apropos Player, ich würde einen HTML5 Player verwenden. Mein absoluter Favorit ist der OSM Player von MediaFront (http://mediafront.org/).

    h264 für alle würde ich mal sagen ;)

    Kann mir jemand einen Link schicken, damit ich mir das mit dem “Outernet” – also das offline Surufen – noch einmal in Ruhe durchlesen kann?

    Liebe Grüße und weiterhin kuhle Sendungen

    Yannick

  • Avatarbild von Dirk Dirk
    am 4. Juni 2010, 07:45 Uhr

    Klasse HTML5-Podcast. Ziemlich lang, aber keine Minute zu lang! Weiter so.

    Das Buch zum Thema werde ich mir wohl kaufen, Peter hat wirklich gut vermittelt, dass er das Thema voll drauf hat ;)

    Viele Grüße, Dirk

  • Avatarbild von Micha Micha
    am 4. Juni 2010, 10:03 Uhr

    Sehr schöne Sendung mit vielen neuen Informationen. Danke dafür.

    Auch Apple hat mittlerweile einen HTML5 Schaukasten online gestellt: http://www.apple.com/html5/

  • Avatarbild von Schepp Schepp
    am 6. Juni 2010, 11:42 Uhr

    @Yannick:

    Du hast recht, das font-face hat es tatsächlich schon einmal in einen CSS-Standard geschafft, nämlich in die Version 2.0, allerdings führte die traurige Realität (Verweigerungshaltung der Schriften- und der Browserhersteller) ziemlich bald zur korrigierten Fassung 2.1, in der @font-face wieder aus dem Standard herausflog. Wie auch noch ein paar andere Dinge, siehe u.a. die CSS-Tabelle von Jens Meiert.

  • Avatarbild von Nico Nico
    am 10. Juni 2010, 15:29 Uhr

    Bin durch mit der Sendung und muss sagen, dass ich viele neue Aspekte von HTML5 mitgenommen habe, die mir so bisher noch nicht klar gewesen sind. Mit Peter Kröner habt ihr euch ja ganz offensichtlich jemanden an Land gezogen, der wirklich weiß, wovon er spricht.

    Die Sendung hat auf jeden Fall dazu geführt, dass ich meine Meinung, was die momentane Einsetzbarkeit angeht, noch ein mal gründlich überdenken werde.

    Vielen Dank für den umfassenden Überblick!

    Nico

  • Avatarbild von David David
    am 11. Juni 2010, 14:10 Uhr

    Echt gute TW Folge.
    Hab es leider verabsäumt beim Gewinnspiel mitzumachen. Umsomehr war ich heute erfreut das dass Buch schon bei meinem lokalen Buchhandel erhältlich ist und somit jetzt in meiner Hand liegt.

    Übrigens die Outtakes waren diesmal echt spitze.

  • Avatarbild von Chris Chris
    am 17. Juni 2010, 10:34 Uhr

    Wann werden denn die Gewinner des Buchs ausgelost bzw. bekanntgegeben? Bin schon ganz heiß (;

    Liebe Grüße,
    Chris

  • Avatarbild von macx macx
    am 17. Juni 2010, 10:37 Uhr

    Am Freitag nehmen wir die neue Folge auf und losen aus. Technikwürze 170 erscheint dann auch dieses Wochenende.

  • Avatarbild von Francesco Francesco
    am 21. Juni 2010, 18:46 Uhr

    Dass man das Aussehen eines input[type=”search”] nicht seinen eigenen Bedürfnissen anpassen kann – wie von Peter behauptet –, stimmt nicht. -webkit-appearance: none; löscht das Standardaussehen, zwar nicht die Lupe, aber wenigstens den Rest. :)

  • Avatarbild von Peter Peter
    am 21. Juni 2010, 22:23 Uhr

    Man muss wohl Mac-User sein um das als “Anpassungsmöglichkeit” hinzunehmen ;)

  • Avatarbild von IE hat jetzt auch Canvas IE hat jetzt auch Canvas
    am 24. Juni 2010, 19:33 Uhr

    Die neuste Preview hat wohl tatsächlich Canvas gegönnt bekommen. Nur schade, dass ich seit Stunden versuche die Preview zu laden und der Installer dies nicht schafft. Da herrscht wohl noch eine gewisse überlastung auf Seiten Microsofts.

  • Avatarbild von Schepp Schepp
    am 26. Juni 2010, 16:15 Uhr

    @Kommentator 31

    Womöglich versuchst Du die IE Preview unter einem 64-bittigen Windows zu installieren? Dann scheitert er bei der automatischen Installation der benötigten Patches (Error 2739). Einfach Patches KB2120976, KB2028560, KB2028551 in x64-Geschmacksrichtung direkt von der Microsoft-Seite downloaden und manuell installieren. Danach ist die IE Installation willig.

  • Avatarbild von Francesco Francesco
    am 26. Juni 2010, 18:42 Uhr

    @Peter: Ich weiß nicht, was das mit Mac-Usern zu tun haben soll, aber die Unterschiede sind schon erheblich.

  • Avatarbild von Francesco Francesco
    am 26. Juni 2010, 18:45 Uhr

    Oops, den Link hat’s verschluckt. Eigentlich sollte es heissen: … schon erheblich

  • Avatarbild von Schepp Schepp
    am 26. Juni 2010, 20:09 Uhr

    @Francesco

    Ich denke, Peter will damit eher sagen, dass man erst dann von einer allgemeinen Anpassbarkeit sprechen kann und sollte, wenn es die Mehrheit der Browser am Markt unterstützt. Irgendein Alleingang zählt da erstmal wenig.

    Du kämst schließlich auch nicht auf die Idee zu behaupten, man könne Browser-Scrollleisten anpassen, wo es doch nur im IE funktioniert.

  • Avatarbild von Francesco Francesco
    am 26. Juni 2010, 23:47 Uhr

    @Schepp

    Da hast du vollkommen Recht.

    Im Moment verändern nur WebKit-Browser das Aussehen eines input[type=“search”] und nur für diejenigen Browser habe ich obigen CSS-Code gepostet.

    Von einer »allgemeinen Anpassbarkeit« habe ich nichts geschrieben, deswegen verstehe ich Peters Einwand auch nicht.

  • Avatarbild von Sascha Tasche Sascha Tasche
    am 30. Juni 2010, 18:16 Uhr

    Wird in dem Buch auch das Thema Metadata angesprochen?

  • Avatarbild von rockpianist rockpianist
    am 10. Juli 2010, 17:27 Uhr

    Die Sendung hat mir die Fahrten zu den Klavierstunden verkürzt. Die Moderation war unterhaltsam und professionell, danke!
    Meine Erkenntnis war dann aber doch: Ich halte mich mit dem Einsatz zurück, bis W3C, WhatWG und Browserhersteller einigermaßen die Richtung vorgegeben haben. Am Ende setzt sich doch eine ganz andere Technologie (bis 2022 ;-) ) durch!

  • Avatarbild von Dörthe Dörthe
    am 22. Juli 2010, 19:48 Uhr

    Ich kann nur ca. 8 Minuten des Podcasts anhören.
    Wo liegt der Fehler?

    Danke und Gruß

  • Avatarbild von Marcel Marcel
    am 22. Juli 2010, 20:06 Uhr

    Hallo Dörthe,

    über welchen Weg (Abo, Flashplayer, Direktdownload) hörst du uns denn?

    Gruß, Marcel

  • Avatarbild von Dörthe Dörthe
    am 22. Juli 2010, 20:30 Uhr

    Wow so schnell Antwort. Super.
    Also ich habe die Folge über “direkt anhören” angehört. Jetzt gerade nochmal probiert, dann ist der Flashplayer abgestürzt. (FF 3.6.6)
    Kurz vorher habe ich den Podcast runtergeladen. Das geht und ist auch eine lange Version.
    Mmh. Ansonsten hatte ich hier keine Probleme. Vielleicht liegt es an der Zeit und viel los im Netz?!
    Ich werde morgen zu einer anderen Zeit mal probieren und kurz berichten.
    Danke.

  • Avatarbild von Dörthe Dörthe
    am 23. Juli 2010, 12:03 Uhr

    Also nochmal kurz zum Absturz vom Flash-Player:
    Lag wohl am PlugIn und der FF Version (3.6.6.) PlugIn deaktiviert und wieder aktiviert brachte erstmal den Erfolg. Ob bleibend wird sich herausstellen.
    Danke für den interessanten und sehr gut gemachten Podcast.

Und was hast du zum Thema zu sagen?

Fülle bitte alle mit *-gekennzeichneten Felder aus.


Du darfst Textile verwenden, um deinen Beitrag auszuzeichen.