Die Browser-Integration funktioniert im Moment nur in Firefox 15 und neuer, und die Selektion innerhalb des Audio-Tags funktioniert nicht, und außerdem haben auch noch Ogg Vorbis und Ogg Opus den gleichen MIME-Type, daher sah ich mich gezwungen, eine stinkende Javascript-Browserweiche für Firefox 15 einzubauen.

Da hat wohl jemand das Memo die Doku nicht gelesen! Laut HTML-Standard und RFC 4281 kann man hier nämlich durchaus unterscheiden – in diesem Fall gehört ins type-Attribut der <source>-Elemente audio/ogg; codecs=vorbis (RFC 5334) oder audio/ogg; codecs=opus (Opus-IETF-Draft). Hier ist die Demo.

Bei Alternativlos 27 sieht das übrigens so aus:

<script> var codec="ogg" if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent) && RegExp.$1>=15) codec="opus" </script> <audio controls preload=none style="padding-top:70px"> <script> document.write('<source src="http://alternativlos.cdn.as250.net/alternativlos-27.',codec,'" type="audio/ogg">') </script> <noscript> <source src="http://alternativlos.cdn.as250.net/alternativlos-27.ogg" type="audio/ogg"> </noscript> <source src="http://alternativlos.cdn.as250.net/alternativlos-27.mp3" type="audio/mp3"> [Browser zu antik] </audio>

Mit den Worten von Jamie Zawinski:

Some people, when confronted with a problem, think “I know, I’ll use regular expressions.” Now they have two problems.

Dabei geht es optisch durchaus besser: heise online etwa umklammert Textänderungen und stellt längeren Hinzufügungen die Anmerkung „Update:“ voran – bei mehreren Überarbeitungen sogar durchnummeriert. Ein Beispiel hierfür ist die Berichterstattung zum datenschutzschonendenfreundlichen Facebook-Button.

Heise online erledigt dies serverseitig und gibt entsprechend verändertes HTML zurück. Machbar ist die Dekoration jedoch auch ohne zusätzliche Programmlogik — unter Nutzung der CSS-Pseudo-Elemente ::before und ::after sowie des content-Attributs. Mit diesen ist es nämlich möglich, dem Seitenlayout vollkommen neue Elemente hinzuzufügen.

Befinden sich etwa innerhalb eines <article>-Elements mehrere Absätze (<p>), fügt die CSS-Anweisung article > ins > p:first-child::before { content: "Nachtrag: " } vor dem ersten Absatz jeder eingefügten Textstelle einen entsprechender Hinweis ein. Auf ähnliche Weise lassen sich Änderungen innerhalb von Absätzen und mehrere Absätze umfassende Einfügungen mit (halben) eckige Klammern umgeben.

Die noch fehlende Nummerierung der Änderungen erfolgt mit CSS-Zählern; Peter Kröner hat das schon einmal erklärt. Am Ende steht eine wesentlich hübscheres und nützlicheres Dekoration für Änderungen in HTML-Dokumenten.

Hier ist die Demo.

Ebenfalls interessant ist diese Javascript-Technik zum dynamischen Anzeigen von Textänderungen.

Da ich als Internet-Experte freien Eintritt erhalte, möchte ich nun mein Ticket (Blogger, early bird, 55 Nazigold) zeitnah verkaufen; Anfragen in den Kommentaren oder per Email (du solltest hier klicken), ernstgemeinte Zuschriften bevorzugt.

• Mit Vorbis enkodierte Android-Klingeltöne werden lag-frei abgespielt — im Gegensatz zu MP3-Dateien
• Advance Wars 2 Soundtrack zum Download
• In einer Diskussion auf der WHATWG-Mailingliste erwähnt: HTML Overlays, ein Analog zu XUL Overlays
• Dämmerung des demokratischen Rechtsstaates ? Eine Radiosendung über Carl Schmitt und Otto Depenheuer als Philosophen des konservativ-autoritären Staates und Franz Josef Jung und Wolfgang Schäuble als dessen Praktiker. Letzterer referiert übrigens heute Abend an der FU Berlin zum Thema Was ist Freiheit ohne Sicherheit ?.

Bisher erforderte dies ein Patchen von WordPress nach dem Installieren jeder neuen Version. Um das Problem dauerhaft aus dem Weg zu bekommen, habe ich nun ein kleines WordPress-Plugin geschrieben, dass alle Vorkommen von « und » durch die ensprechenden Zeichen „«“ und „»“ ersetzt. Aus Gründen der Vollständigkeit kümmert es sich ebenfalls um ‹ und › („‹“ und „›“) — an dieser Stelle ein Gruß an das Quo-Netzwerk.

wpquo ist freie Software unter der WTF Public License. Zur Installation einfach die heruntergeladene Datei wpquo.php in das Verzeichnis /wp-content/plugins/ hochladen und das Plugin im WordPress-Admin-Interface aktivieren.

Die hier vorgestellte Vorgehensweise ist aufgrund von Änderungen an der HTML5-Spezifikation nicht mehr aktuell; u.A. wurde <legend> als Kindelement von <figure> entfernt und die Mikrodatasyntax geändert. Bevor ihr also Ähnliches versucht, schaut auch die aktuellen Abschnitte zu den entsprechenden Markup-Techniken an.

In den letzten Tagen bastelte ich eine verbesserte Version des CC-HTML-5-Markup-Generators. Kurz gesagt handelt es sich hier um ein Webanwendung, die das Präsentieren von CC-Inhalten vereinfacht. Hierzu wird aus Eingaben etwa zu Urheber und Lizenz passendes (X)HTML generiert. Dieses kann dann einfach auf einer Webseite, etwa dem eigenen Blog eingefügt und mit ein bisschen CSS ansprechend präsentiert werden; ein Beispiel findet sich im vorigen Blogeintrag.

Nachdem der zugehörige URL bereits in der schnelllebigen Twitterwelt verbreitet wird, halte ich es für eine gute Idee, das Markup zu erklären. Denn während einige der verwendeten Elemente und Attribute sicherlich bekannt sind, stellt der Kern des Konstrukts ein Novum dar und wird erst durch die neuen Features von (X)HTML 5 ermöglicht. Zukunftsmusik ist es damit allerdings nicht: Das Markup wird in allen einigermaßen aktuellen Browsern korrekt geparst.

Wer sich für die technischen Details nicht interessiert, kann an dieser Stelle aufhören zu lesen und sich sofort passendes Markup generieren lassen. Für alle anderen geht es gleich weiter, direkt nach dem Klick.

Fangen wird mit dem Offensichtlichen an: Das generierte (X)HTML-Fragment besteht aus einem <figure>-Element, welches als Kindelemente multimedialen Inhalt — Bild, Ton oder Video — und ein <legend>-Element enthält. <figure> ist ein mit HTML 5 neu eingeführtes Element zum Gruppieren von Inhalten, die die mit <legend> beschriftet werden. Hierbei ist es egal, ob die Beschriftung an erster oder letzter Stelle steht; genauer erklärt ist das Ganze natürlich in der Spezifikation.

Was innerhalb des <legend>-Elements statt findet, sieht zunächst reichlich konventionell aus: Kindelemente sind ein <span>, ein Link und ein <small>, die jeweils Titel, Autor, und Lizenzinformationen zum mit <legend> beschrifteten Werk angeben; in Letzterem wird der Name der Lizenz angeben und auf diese verlinkt. Wichtig und neu sind hier vor allem zwei Punkte: Einmal die Verwendung von <small>, das laut Spezifikation für rechtliche Informationen verwendet werden sollte, zweitens die Nutzung der Microdata-Annotationsmöglichkeiten von HTML 5, welche es einem Parser ermöglichen, die Semantik der präsentierten Informationen aufzuschlüsseln — die Vorteile maschinenlesbaren Markups müssen wohl kaum mehr erläutert werden in einer Welt, in der man bei Flickr, Google und Yahoo nach CC-lizenzierten Bildern suchen kann.

Abstrakt betrachtet funktionieren Microdata-Annotationen ähnlich wie das von Creative Commons genutzte RDFa: Objekten können maschinenlesbare Name-Wert-Paare zugewiesen werden, etwa „Dieses Bild hat den Titel ‚Sauerkraut‘.“. HTML5 stellt hierzu die beiden Attribute item und itemprop und ein vordefiniertes Vokabular für Urheber- und Lizenzinformationen bereit. Das beschriebene Objekt ist hier das mit itemprop="about" gekennzeichnete erste Kindelement der eingangs beschriebenen <figure>-Gruppierung, die ihrerseits mit item="work" die Kategorie der Metadaten konkretisiert.

Dass das so generierte Markup sich auf verschiedene Weisen dekorieren lässt, ist einfach zu zeigen: Der Wetter-Stil (Stylesheet) demonstriert, wie anhand der verlinkten Lizenz unterschiedliche Icons präsentiert werden können. Einfacher gehalten ist der Spreeblick-Stil (Stylesheet), der in der unteren linken Bildecke ein simples CC-Icon darstellt, bei dessen Überfahren mit der Maus der Urheber des Werkes angezeigt wird.

CC-Bildunterschrift nach einer Idee von Matthias „Wetter“ Mehldau

CC-Notiz wie auf Spreeblick.com

Apropos Spreeblick — deren Markup sieht im direkten Vergleich eher arm aus: Nicht nur, dass vor Allem generische Elemente wie <div> und <span> verwendet werden — CSS wird hier genutzt, um Inhalte zu präsentieren. Und während ersteres durch die mangelnden Möglichkeiten von HTML 4 bedingt und somit verzeihlich ist, zeigt letzteres, dass der verantwortliche Webfrickler die Philosophie hinter der HTML und CSS zu Grunde liegenden Trennung von Inhalt und Präsentation ganz offensichtlich kaum verstanden hat. Schade eigentlich, semantisch ist derartiges Markup so nämlich garantiert nicht.

Browser, die zwar <audio> unterstützen, aber kein Vorbis, sind doof. Aber echt.

Dieser Artikel ist obsolet. Neue und bessere Informationen gibt es in einem aktuelleren Beitrag auf diesem Blog.

Basierend auf der bereits erwähnten Anregung von wetter, einer Mail auf der WHATWG-Mailingliste und einigen Stunden Arbeit, präsentiert Die Welt ist gar nicht so, Deutschlands flauschigstes Weblog, nun eine Möglichkeit, einzelne Inhalte auf Webseiten mit Creative-Commons-Lizenzen auszuzeichnen. Und das funktioniert so:

In HTML5 / XHTML5 ist eine Kombination der Elemente <figure> und <legend> vorgesehen, um Inhalten eine Beschriftung zuzuordnen. Zudem ist die Semantik des <small>-Elementes derart umdefiniert worden, dass es guten Gewissens für Urheberrechtshinweise genutzt werden kann. Das daraus abgeleitete Gerüst zur Anheftung einer Creative-Commons-Lizenz an bestimmte Inhalte (hier: ein Bild) hat also in etwa folgende Struktur:

<figure> <img src="http://images.example.org/lavalampe.png"> <legend> <span class="title"> Shaky und seine Lavalampe </span> <a href="http://example.org/quelle"> Bernd Lieferts </a> <small> <a href="http://creativecommons.org/licenses/by/3.0/de/"> <abbr title="Creative Commons Namensnennung"> CC-BY </abbr> </a> </small> </legend> </figure>

Mit ein bisschen CSS sieht das Ganze eigentlich ganz nett aus (Beweis). Alle, die zu faul zum selber Tippen sind, können sich per Javascript entsprechendes Markup generieren lassen — wobei sie natürlich entsprechende Stylesheets in der Hinterhand halten sollten (schaut doch einfach mal, wie Max Winde das bei Spreeblick gelöst hat).

Doch obwohl aktuelle Blog- bzw. Content-Management-Systeme das Einfügen entsprechender Tags recht einfach machen, scheint sich zumindest in Bezug auf das <ins>-Element ein anderer präsentationaler Ansatz etabliert zu haben. Oft werden Updates nämlich einfach in einem neuen Absatz eingefügt, der mit entsprechendem, oft fett formatierten, Präfix präsentiert vorkommt. (Beispiele: Heise, Netzpolitik, Spreeblick).

Ich vermute, dass dieses unsemantische Markup hauptsächlich verwendet wird, um Änderungen deutlicher kenntlich zu machen – ganz nebenbei bemerkt sehen unterstrichene Absätze auch nicht gerade gut aus. Es liegt also nahe, zu versuchen, beide Lösungen mittels CSS zu vereinen.

Wichtig ist hierbei die, Sonderstellung der beiden Elemente <del> und <ins> zu beachten: Kommen diese innerhalb von Block-Elementen vor, fungieren sie als Inline-Elemente, andererseits können sie als Block-Elemente selber Block-Elemente enthalten. Inline-Änderungsmarkierungen bestehen meistens nur aus wenigen Wörtern, deswegen kann bei ihnen auf eine prominente Auszeichnung verzichtet werden.

Zunächst entledigt man sich also des Standard-Stils für das <ins>-Element, um ihn gleich danach für Elemente, die innerhalb eines Absatzes vorkommen, wieder einzuführen: ins {text-decoration:none;} p ins {text-decoration:underline;}

Nun erhält das erste (Selektor :first-child) unmittelbare (Selektor >) Kindelement eines <ins>-Elements das Update-Präfix. Für inline (d.h. innerhalb eines Absatzes) vorkommende Elemente wird diese Regel dann aufgehoben: ins > :first-child:before {content:"Update: ";font-weight:bold;} p ins > :first-child:before {content:none;}

Die hier vorgestellte, semantisch saubere Lösung setze ich übrigens auch auf diesem Blog ein. Verbesserungsvorschläge in den Kommentaren sind natürlich immer erwünscht.

Die Opera University Tour wird in den nächsten Tagen noch in München, Lübeck und Hannover Halt machen; ich kann jedem am Web Interessierten empfehlen, die Chance zu nutzen. Seid ihr jedoch in einer anderen Stadt oder habt keine Zeit, ist das auch nicht schlimm – der mitreisende Praktikant versicherte mir nämlich, dass eine Videoaufnahme des Vortrags bald auf dem zugehörigen Blog erscheinen würde.

Mikroformate bieten eine Einbettungsmöglichkeit semantischer Inhalte in (X)HTML; über die Attribute class, rel und ref werden die entsprechenden Informationen maschinenlesbar markiert. Die Nutzung von XML-Namensräumen wäre wohl der sauberere Ansatz, verträgt sich jedoch nicht mit Tagsoup-Apologeten wie Garvin Hicking, der leider nicht viel von validem Markup hält.

Die hCard-Spezifikation basiert auf dem bekannten und verbreiteten Standard vCard (RFC 2426) und besteht aus einem Stück (X)HTML-Code, das man einfach nur in das eigene Blog einfügen muss. Und diesen muss man natürlich auch nicht unbedingt selbst schreiben, sondern kann ihn sich vom hCard Creator generieren lassen.

Und nun zum Nutzen des Ganzen: Mit der Firefox-Erweiterung Operator lassen sich hCards (und weitere Mikroformate) einfach exportieren oder als Mini-Mashup (Kontakt / Ort / Tag in Google Maps / bei Amazon / Flickr finden) nutzen – eine ausführliche Erklärung findet sich im Blog von Alex Faaborg. Und für den Blogosphärenkrebs WordPress existiert ein Plugin, das die Avatare aus hCards ausliest und wider Erwarten offenbar funktioniert.

Mein Avatar ist übrigens ein Hackergotchi und das macht man so.

Bis HTML 5 spezifiziert und implementiert ist, kann man für standardkonformes Einbetten von Videos das in (X)HTML enthaltene Object-Element verwenden. Bei dieser Vorgehensweise wird das Video allerdings üblicherweise sofort abgespielt; dies ist nicht immer erwünscht. Durch den Einsatz von Javascript lässt sich dieser Mangel beheben.

Zunächst wird innerhalb des Body-Elementes der Website ein Object-Element erstellt. Dieses erhält ein Id-Attribut, um es identifizierbar zu machen. Zudem erhält es Fallback-Inhalt, der auf das Fehlen eines passenden Mediaplayer-Plugins hinweist. Als Film wird hier die 480p-Version von Big Buck Bunny verwendet.

<object id="video" type="application/ogg" width="720" height="400" data="movie.ogg" > <p> <strong>Dein Browser unterstützt das Abspielen von <em>Ogg-Theora</em>-Videos nicht.</strong> </p> <p> Um dieses Video anzuschauen, installiere <a href="http://www.videolan.org/vlc/">VLC</a>, <a href="http://www.mplayerhq.hu/design7/dload.html">mplayer</a> or <a href="http://wiki.xiph.org/index.php/TheoraSoftwarePlayers">einen anderen Mmediaplayer</a>, der <a href="http://theora.org/faq/#what">Ogg-Theora</a>-Videos abspielen kann. </p> <p> For installation instructions, see the <a href="http://en.wikipedia.org/wiki/Wikipedia:Media_help_(Ogg)">Wikipedia Media Help</a>. </p> </object>

Damit das Object-Element nicht sofort angezeigt wird, fügt man zwei Javascript-Funktionen hinzu: Eine, die das Video versteckt, und eine zweite, die es für die Dauer des Filmchens anzeigt und dann die “Versteck-Funktion” aufruft:

<script type="text/javascript"><![CDATA[ function hide_movie() { document.getElementById('video').style.display = 'none'; document.getElementById('preview').style.display = 'block'; } function show_movie() { document.getElementById('video').style.display = 'block'; document.getElementById('preview').style.display = 'none'; window.setTimeout("hide_movie()",36000); } ]]></script>

Vorschaubild und Button – zum Aufrufen des Javascripts – sind auch fein ! Zugterletzt bekommt das Body Object-Element ein Attribut onload="hide_movie()" style="display:none;", um das Video zu verstecken; zu beachten ist, dass dieses – zumindest im Firefox 3.0 – nur ausgelöst wird, sofern das im Object-Element referenzierte Video pufferfrei ladbar ist Nutzer ohne Javascript das Nachsehen haben.

<div id="preview"> <img src="preview.jpg" alt="Vorschaubild" height="400" width="720"/> <button name="playback" type="button" onclick="show_movie()" value="Plackback"> <img src="media-playback-start.png" alt="Plackback" height="128" width="128" /> </button> </div>

Wer Spaß daran hat, darf gerne den Playback-Button per CSS auf das Vorschaubild legen und einen Download-Button hinzufügen. Die vorliegende Methode ist übrigens XHTML-konform, funktioniert auch ohne Javascript, und wurde ursprünglich als Teil des (noch unfertigen) Video-CMS Yolanda entwickelt. In diesem Sinne: Friede den Webstandards, Krieg den proprietären Palästen !

Update: Demo; blöderweise wird onload="hide_movie()" zumindest im Firefox 3 erst nach vollständigem Puffern des Videos ausgelöst. Ideen ?

Update: Neue Demo. Aber ohne Javascript ist der Button funktionslos.