Nochmal genau erklärt: CC-Markup mit HTML 5
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.
<figure item="work">
<img src="http://example.org/kraut.png" itemprop="about"/>
<legend>
<span itemprop="title">Sauerkraut</span>
<a itemprop="author" href="http://example.org/">Bernd Liefert</a>
<small>
<a itemprop="license" href="http://creativecommons.org/licenses/by/3.0/de/">
<abbr title="Creative Commons Namensnennung">CC-BY</abbr>
</a>
</small>
</legend>
</figure>
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.
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.
<div style="background-image: url(/wp-content/imagemagic/bad361f52671c79d858591b22df789f3.jpg); width: 499px; height: 273px;" class="imageWorks2_divBox imgfull cc">
<a href="http://www.flickr.com/photos/hamburgerjung/119336525/" class="license cc">
<span class="icon">cc</span>
<span class="text">HamburgerJung</span>
</a>
</div>