Der neue Button Nils Dagsson Moskopp CC-BY

Das Plugin fügt in der HTML-Editoransicht einen Button mit der Aufschrift „CC Figure“ hinzu. Klickt man auf diesen, öffnet sich ein neues Fenster bzw. Tab, in das man die Metadaten (z.B. Titel, Alternativtext, Autor) einer Bild-, Audio-, oder Video-Datei einträgt. Hat man alle Felder ausgefüllt, kann das Markup eingefügt werden; so einfach ist das.

So einfach ist das. Nils Dagsson Moskopp CC-BY

Das so generierte (X)HTML kann natürlich per CSS dekoriert werden — mitgeliefert sind drei verschiedene Stylesheets. Auf eines bin ich besonders stolz; es formatiert die Lizenznotizen im Stil des Blogs Spreeblick. Zudem lässt sich im Admin-Interface (Screenshot) der verwendete Metadaten-Standard umstellen — zur Auswahl stehen Microdata-Markup und RDFa.

Mein Dank geht an folgende Personen (gelistet in der zeitlichen Reihenfolge, in der sie zum Gelingen beitrugen):

• Matthias wetterfrosch Mehldau für einen Blogpost zum Thema „Markup für Creative-Commons-Inhalte“
• Julia zeitrafferin Seeliger für einen verwandten Artikel nach dem Motto „man könnte doch mal“, das inspirierende Moment für mich.
• Johnny Häusler für einen Screenshot des Spreeblick-Plugin-Interfaces
• Ian Hickson, ohne den es das Microdata-Markup wohl nicht gäbe
• Michelle Thorne für das Vermitteln eines Metadaten-Experten
• Nathan Yergler, ebenjenen. Ich habe nicht auf seinen Rat gehört.

Ja, ich weiß, dass die ausschließliche Nutzung der deutschen Sprache nicht besonders förderlich für die Reichweite dieses Plugins ist. Ich hatte nunmal weder Zeit noch Lust, es zu übersetzen. Aber wenn jemand möchte … nur zu ! Und was die konfuse Qualität des Codes angeht: Er funktioniert soweit.

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.

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).