© Patricia Hofmeester, 123RF
Viele Webseiten präsentieren Informationen zwar augenfällig formatiert, aber nicht sinnvoll strukturiert. Wer seine HTML-Dokumente dagegen mit Mikroformaten und Mikrodaten anrichtet, macht Adressen, Termine und vieles mehr zum Appetithappen für Suchmaschinen und andere Software.
HTML ist eine seitenbezogene Auszeichnungssprache. Mit ihr lassen sich Textbestandteile als Überschrift, Textabschnitt, Hyperlink oder Ähnliches definieren. Die Bedeutung der Daten bleibt jedoch im Unklaren: Beschreibt der Text eine Person, Organisation, ein Produkt oder eine Veranstaltung? Mikroformate [1] und deren Nachfahren, die Mikrodaten [2] aus HTML 5, sorgen für mehr Klarheit, indem sie Visitenkarten, Produktbeschreibungen, Angebote sowie Veranstaltungsdaten maschinenlesbar ausweisen.
Mikroformate
Dieser Artikel beschreibt wichtige Mikroformate wie Hcard, Hcal, Hproduct, Hreview und Geo am Beispiel einer Homepage. Daneben gibt er eine Einführung in Mikrodaten, zeigt deren Einsatz im World Wide Web und wie sich diese Daten mit Open-Source-Tools verarbeiten lassen.
Listing 1
HTML-5-Dokument mit Visitenkarte
01 <!DOCTYPE html> 02 <html lang="es"> 03 <head></head> 04 <body> 05 <h1>Pedro Miguel Díaz - el Arte Guitarra Flamenca</h1> 06 <div> 07 <img alt="" src="images/el-fumador.jpg"/> 08 <a href="http://el-fumador.info">Pedro Miguel Díaz</a> - el Fumador<br/> 09 Flamenco Artist<br/> 10 C/ Peral 43<br/> 11 E-41002 Sevilla<br/> 12 España<br/> 13 pedro@fumador.info<br/> 14 +34 954 88 24 37 15 </div> 16 </body> 17 </html>
Was finden die Programme in der Regel vor? Listing 1 zeigt einen Auszug aus dem HTML-Quellcode der Webseite in Abbildung 1 – ein HTML-5-Dokument mit einer Visitenkarte. Der Textbaustein Überschrift ist mit dem Element »h1« ausgezeichnet. Den Text der Visitenkarte umgibt das Container-Element »div« , und »<br/>« bewirkt einen Zeilenumbruch.
Abbildung 1: Ein HTML-Dokument mit Adresse, Konzertterminen und anderen wichtigen Angaben zu einem Musiker – Hoster nennen so etwas auch Web-Visitenkarte.
Ein Mensch kann darin zwar eine Visitenkarte mit Eigenschaften wie Name, Titel und Adresse erkennen, ein Programm kann das nicht. Dafür sind zusätzliche Markierungen erforderlich. Mikroformate benutzen zu diesem Zweck vorwiegend das Class-Attribut aus dem Vokabular von HTML (Listing 2).
Listing 2
Vistenkarte mit Hcard auszeichnen
01 <!DOCTYPE html> 02 <html> 03 <head><link rel="profile" href="http://microformats.org/profile/hcard"/></head> 04 <body> 05 <h1>Pedro Miguel Díaz - el Arte Guitarra Flamenca</h1> 06 <div id="me" class="vcard"> 07 <img alt="" class="photo" src="images/el-fumador.jpg"/> 08 <a class="url fn" href="http://el-fumador.info">Pedro Miguel Díaz</a> 09 - <span class="nickname">el Fumador</span><br/> 10 <span class="title">Flamenco Artist</span> 11 <div class="adr"> 12 <span class="type">Home</span> 13 <span class="street-address">C/ Peral 43</span><br/> 14 <span class="postal-code">E-41002</span> 15 <span class="locality">Sevilla</span><br/> 16 <span class="country-name">España</span> 17 </div> 18 <span class="email">pedro@fumador.info </span><br/> 19 <div class="tel"> 20 <span class="type">Home </span> 21 <span class="value">+34 954 88 24 37 </span> 22 </div> 23 </div> 24 </body> 25 </html>
Fast jede Eigenschaft ist hier von dem Element »span« umgeben und durch das universelle Class-Attribut beschrieben. So bezeichnet »class=”vcard”« in Zeile 6 das Objekt Visitenkarte. Die Angabe »class=”fn url”« weist den Inhalt des Hyperlinks, Pedro Miguel Díaz, als Namen (»fn« , full name) und die URL im »href« -Attribut als zugehörige Homepage (»url« ) aus.
Das Adress-Objekt »class=”adr”« in Zeile 11 setzt sich aus mehreren Eigenschaften zusammen. Es enthält Typ (»type« ), Straße (»street-address« ), Postleitzahl (»postal-code« ), Ort (»locality« ) und Land (»country« ) der Adresse. Die Auszeichnung der Visitenkarte folgt dem Mikroformat Hcard [3], das die Vcard-Spezifikation [4] mit den Mitteln von HTML umsetzt. Vcard speichert pro Textzeile ein Schlüssel-Wert-Paar und zusätzliche Optionen. Das Mikroformat Hcard portiert dieses Vokabular auf HTML, indem es die Schlüssel auf Werte des Attributs Class sowie die Werte in andere Attribute desselben Elements oder in den nachfolgenden Textknoten überträgt.
Zeit, Ort und Bewertung
Neben Visitenkarten gibt es weitere Mikroformate für verschiedene Anwendungen. So lassen sich Veranstaltungen mittels Hcalendar, Ortsangaben mit Geo, Produkte mit Hproduct sowie Rezensionen mit Hreview und Hreview-aggregate markieren. Einen Überblick über Mikroformate gibt das Wiki des Projekts Microformats.org [5].
Listing 3 verwendet Hcalendar, das sich von Icalendar [6] ableitet. Ein Termin wird durch das Attribut-Wert-Paar »class=”vevent”« ausgedrückt. Beschreibung (»summary« ) und Beginn (»dtstart« ) müssen pflichtgemäß vorhanden sein. Die Angabe des Ortes (»location« ) hingegen ist optional. Dabei gilt folgende Regel für alle Mikroformate: Soll ein Datum auch in maschinenlesbarem Format angegeben werden, so steht es im »title« -Attribut des Elements »abbr« (Zeile 3).
Listing 3
Event mit Hcalendar auszeichnen
01 <div class="vevent"> 02 <h3 class="summary">Feria de Abril</h3> 03 <abbr class="dtstart" title="2012-03-23T21:00:00Z">el 23 de marzo de 2012, 21:00</abbr> 04 en <span class="location">Sevilla </span> 05 <div class="geo"> 06 <abbr class="latitude" title="37.3844">37° 38′ N</abbr> 07 <abbr class="longitude" title="-5.9888">5° 98′ W</abbr> 08 </div> 09 </div>
Neben Grammatikregeln zeichnen sich Mikroformate auch durch ihre Wiederverwendbarkeit aus. Listing 3 benutzt für die Ortsangabe der Veranstaltung das Mikroformat Geo. Es enthält eine Eigenschaft für den Breitengrad (»latitude« ) und eine für den Längengrad (»longitude« ). Auch in diesem Fall steht die maschinenlesbare Variante im Titel-Attribut des Abbr-Elements.
Ein weiteres Beispiel für die Wiederverwendbarkeit von Mikroformaten gibt Listing 4. Zeile 1 zeichnet die Zusammenfassung einer Produktbesprechung mit dem Mikroformat Hreview-aggregate aus. Die erforderliche Angabe des Produkts als »item« geschieht mittels Hproduct, »rating« beschreibt die Gesamtnote und »votes« nennt die Anzahl der Rezensionen.
Listing 4
Produkt mit Hproduct auszeichnen
01 <li class="hreview-aggregate"> 02 <span class="item"> 03 <span class="hproduct"> 04 <a class="fn url" href="www.reseller.com?isbn=9-874-444-333-85-1">El Arte Flamenco</a> 05 <span class="price">33.90€</span> 06 <span class="identifier"> 07 <span class="type">ISBN</span> 08 <span class="value">9-874-444-333-85-1</span> 09 </span> 10 </span> 11 </span> 12 <abbr class="rating" title="4.9"><sup>☆☆☆☆☆</sup></abbr> 13 <span class="votes">200</span> 14 </li>
Neben Class verwenden Mikroformate in Hyperlinks noch das Attribut »rel« , das die Beziehung zur Zielressource ausdrückt, etwa in folgendem Code:
<a rel="met friend colleague" href="http://esoleares.es">Estrella Soleares - la Pinta</a>
Er verweist auf die Homepage von Estrella Soleares. Die Liste im Rel-Attribut weist Estrella als Freundin und Kollegin aus, die der Linkgeber auch persönlich getroffen hat (»met« ). Eine Übersicht über die Werte für das Rel-Attribut findet sich im Microformats-Wiki unter [7]. HTML 5 möchte verständlicher sein als seine Vorgänger, weshalb es eine Reihe von semantischen (bedeutungstragenden) Elementen enthält. Das Element »time« dient der Auszeichnung von Datum und Uhrzeit, das Element »meter« zur Angabe von Messwerten.
Um die Verständlichkeit für Programme zu erhöhen, kultiviert HTML 5 die Mikroformate in der Form so genannter Mikrodaten [8]. Dazu definiert HTML 5 einen Satz von Attributen: »itemscope« , »itemtype« , »itemprop« und »itemref« . Diese übernehmen nicht nur die Aufgaben des Class-Attributs in Mikroformaten, sondern gehen noch darüber hinaus.
HTML-5-Visitenkarte
Listing 5 zeigt die aus Listing 2 bekannte Visitenkarte unter Verwendung von HTML-5-Mikrodaten. Anstelle des Class-Attributs benutzen Mikrodaten das »itemprop« -Attribut, um Eigenschaften auszudrücken. Zum Eingrenzen von Einheiten, etwa von Zeile 10 bis Zeile 17, dient das Attribut »itemscope« .
Listing 5
Visitenkarte mit Mikrodaten
01 <!DOCTYPE html> 02 <html> 03 <head><title>vCard</title></head> 04 <body> 05 <div id="me" itemscope itemtype="http://microformats.org/profile/hcard"> 06 <img alt="" itemprop="photo" src="images/el-fumador.jpg"/> 07 <a rel="me" itemprop="url fn" href="http://el-fumador.info">Pedro Miguel Díaz</a> 08 - el Fumador<br/> 09 Flamenco Artist 10 <div itemscope itemprop="adr"> 11 Home 12 C/ Peral 43<br/> 13 E-41002 14 Sevilla<br/> 15 Andalucía<br/> 16 España 17 </div> 18 pedro@fumador.info<br/> 19 <div class="tel" itemscope> 20 Home 21 +34 954 88 24 37 22 </div> 23 </div> 24 </body> 25 </html>
Das Attribut »itemtype« (Zeile 5) bezeichnet das für den beginnenden Abschnitt verwendete Vokabular. Die Vokabulare für Vcard und Vevent hat der HTML-5-Standard aufgenommen. Auch weitere Mikroformate haben eine Übertragung in Mikrodaten erfahren, eine Sammlung findet sich bei Schema.org [9]. Das Attribut »itemref« dient der Gruppierung von Eigenschaften jenseits von Container-Logik. Zu diesem Zweck verweist es über das universelle ID-Attribut auf andere Elemente.
Mikroformate haben sich mittlerweile im WWW etabliert. So verwendet beispielsweise Xing die Formate Hcard und Vevent zur Beschreibung von Benutzerprofilen, und Openstreetmap nutzt Geo zur Positionsbestimmung beschriebener Orte. Auch der HTML-Validator des World Wide Web Consortium [10] berücksichtigt Mikroformate. Abbildung 2 zeigt das Überprüfen eines HTML-Dokuments mit einer Meldung über einen irregulären Wert für ein Rel-Attribut und dem Verweis auf die Vorgaben.
Abbildung 2: Der HTML-Validator des World Wide Web Consortium bezieht auch Mikroformate in seine Auswertung ein.
Die Bedeutung der Mikroformate wird erst beim Betrachten der verarbeiteten Daten begreiflich. Beispielsweise lassen sie sich für die Optimierung der Ergebnisse von Websuchmaschinen verwenden. Abbildung 3 zeigt die Wirkung des Mikroformats Hcard auf die Google-Suchmaschine unter Verwendung des Tools Rich Snippets [11]. Das Onlinewerkzeug entnimmt der Seite die Mikroformate und zeigt, welche dieser Informationen die Suchmaschine verwertet. Für die Beispiel-Webseite werden der Wohnort (Sevilla) und die Berufsbezeichnung (Flamenco Artist) von Pedro Miguel hervorgehoben. Auch Rezensionen per Hreview oder Hreview-aggregate werden in den Suchergebnissen hervorgehoben
Abbildung 3: Googles Rich-Snippets-Tool zeigt, welche Informationen die Suchmaschine den Mikroformaten und Mikrodaten entnimmt.
Es ist schwierig die Verbreitung der neueren Mikrodaten gegenüber den Mikroformaten abzuschätzen, jedoch legt die Vielzahl der dafür verfügbaren Open-Source-Tools eine zunehmende Verbreitung nahe. Wie das Rich-Snippets-Tool andeutet, liest beispielsweise Google Mikrodaten ebenso wie Mikroformate.
Open-Source-Tools
Programme für Mikroformate oder Mikrodaten lassen sich in zwei Klassen einteilen: Die einen erzeugen solche Markierungen, die anderen lesen sie. Beispielsweise bietet das Contentmanagement-System WordPress eine Erweiterung zum Erzeugen [12] von Mikrodaten. Das Plugin Operator [13] für den Firefox-Browser vereinfacht das Erkennen und Verarbeiten von Mikroformaten in Webseiten. Nach Installation der Erweiterung und Neustart des Browsers zeigt sich Operator als Werkzeugleiste unterhalb der Adresszeile (Abbildung 4).
Abbildung 4: Anwendern bietet das Firefox-Plugin Operator komfortablen Zugriff auf die Informationen aus Mikroformaten.
In der derzeitigen Version 0.9.5.6 erkennt Operator Kontakte, Termine, Orte, Tags sowie Lesezeichen und bietet die Weiterverarbeitung der Daten an. Kontakte lassen sich im Vcard-Format, Termine im Icalendar-Format exportieren oder in Webdienste wie Yahoo Contacts oder Google Calendar einpflegen. Geo-Koordinaten gibt das Plugin auf Wunsch an Kartendienste weiter. Operator ist für MPL, GPL und LGPL lizenziert.
Für den programmgesteuerten Zugriff auf Mikrodaten gibt es ein ganze Reihe freier Bibliotheken in mehreren Sprachen. Das das Jquery-Plugin Microdata JS [14] etwa setzt eine Programmierschnittstelle ähnlich dem DOM-API [15] für Mikrodaten aus der HTML-5-Spezifikation um.
Listing 6 bindet Microdata JS im Head-Bereich eines HTML-Dokuments ein. Neben der Datei mit dem anwendungsspezifischen Code in Zeile 2 ist in der darauf folgenden Zeile das Jquery-Framework eingebunden. Abschließend integrieren die Zeilen 4 und 5 die beiden Jquery-Plugins Microdata JS und Microdata-Vcard.
Listing 6
Microdata JS in HTML einbinden
01 <head> 02 <script src="js/fumador.js"></script> 03 <script src="js/jquery-1.7.1.min.js"></script> 04 <script src="js/jquery.microdata.js"></script> 05 <script src="js/jquery.microdata.vcard.js"></script> 06 </head>
Javascript extrahiert Visitenkarte
Listing 7 zeigt Microdata JS im Einsatz. Dieses Beispiel extrahiert mittels Javascript die Mikrodaten für Visitenkarten und hebt sie im Vcard-Format hervor. Nach dem Laden des HTML-Dokuments führt es die Funktion aus, die in Zeile 1 dem Ereignis »onload« zugewiesen ist. Die »$« -Funktion in Zeile 2 enthält einen CSS-Selector-Ausdruck. Sie sucht nach Elementen, die das Attribut »itemtype« mit der Angabe des Hcard-Vokabulars enthalten. Die Elemente der Ergebnismenge übergibt »each()« an die darauf folgende Funktion.
Listing 7
Programmieren mit Microdata JS
01 window.onload = function() {
02 $('[itemtype="http://microformats.org/profile/hcard"]').each(function(index) {
03 var item = $(this);
04 item.append('<a class="microlink">microdata</a>');
05 item.find("a.microlink").click(
06 function() {
07 $(this).parent().prepend('<div class="microdata">
<a class="microlink close">close</a><textarea >'
+jQuery.microdata.vcard(item)+'</textarea></div>');
08 item.find('.close').click(
09 function() {
10 item.find('.microdata').remove()
11 }
12 );
13 }
14 );
15 });
16 }
Die Variable »item« in Zeile 3 nimmt eine Referenz auf das aktuelle Element aus der Sondervariablen »this« auf. Dieser Wert ist im Folgenden in allen Ausdrücken, auch in der Funktionsdefinition ab Zeile 6, sichtbar (lexikalischer Scope). Führt der User später die Funktion ab Zeile 6 durch Klicken auf einen Hyperlink mit der Eigenschaft »class=”microlink”« aus, erinnert sich Javascript an den Wert von »item« . Zuvor fügt Zeile 4 aber mit der Append-Funktion jedem in Zeile 2 ausgewählten Element einen Hyperlink mit der Eigenschaft »class=”microlink”« hinzu. Zeile 5 belegt das Klick-Event dieses Hyperlinks mit der ab Zeile 6 definierten Funktion. Auch der Ausdruck »$(this).parent()« in Zeile 7 verweist auf den Wert der Variablen »item« . Im Kontext der Find-Methode aus Zeile 5 verweist »this« ab Zeile 6 nicht mehr auf Elemente mit dem Itemtype-Attribut, sondern auf die mit Find ausgewählten Hyperlinks. Erst der Aufruf der Methode Parent wählt das Objekt aus Item wieder aus.
Einfacher ist es, wie in den folgenden Codezeilen die Variable Item zu verwenden. Die Prepend-Funktion in Zeile 7 fügt nach erfolgtem Klick das Item-Element einem Eingabebereich hinzu, der mit den Daten im Vcard-Format gefüllt ist. Dazu kommt die Methode »vcard« aus Microdata JS zum Einsatz, auch in Zeile 7. Für den ebenfalls hinzugefügten Hyperlink der Klasse »close« definiert Zeile 9 auch einen Eventhandler. Ein weiterer Klick schließt den geöffneten Bereich wieder. Abbildung 5 zeigt die extrahierten Mikrodaten in der geöffneten Detailansicht. Microdata JS kann eingelesene Mikrodaten mit Hilfe passender Plugins auch in den Formaten Json oder Vevent ausgeben. Es bietet viele Funktion zum Arbeiten mit Mikrodaten, die jedoch leider nicht über den Quelltext hinaus dokumentiert sind. Außerdem bietet Microdata JS ein Frontend namens Live zum Extrahieren von Mikrodaten im Browser.
Abbildung 5: Von Mikrodaten zur Visitenkarte fürs Adressbuch: Ein wenig Javascript und die Bibliothek Microdata JS haben die benötigten Informationen aus der Beispiel-Webseite extrahiert.
Die Programmiersprache Python bietet mit der Bibliothek Microdata [16] einen Parser für Mikrodaten in HTML-5-Dokumenten. Sie erscheint ohne nähere Lizenzangaben als Public Domain. Listing 8 zeigt zunächst die Installation von Microdata 0.3.0 unter Ubuntu 11.10. Dabei wird die Python-Bibliothek »html5lib« gegebenenfalls nachinstalliert. Listing 9 demonstriert die Arbeit mit Microdata in einer interaktiven Python-Sitzung. Dazu ruft Zeile 1 zunächst Python über die Kommandozeile auf, Zeile 2 importiert das Modul Microdata.
Listing 9
Microdata interaktiv
01 $ python
02 >>> import microdata
03 >>> items = microdata.get_items(open("microdata.html"))
04 >>> print items[1].json()
05 {
06 "geo": [
07 {
08 "latitude": [
09 "37\u00b0 38\u2032 N"
10 ],
11 "longitude": [
12 "5\u00b0 98\u2032 W"
13 ]
14 }
15 ],
16 "dtstart": [
17 "2012-03-23T21:00:00Z"
18 ],
19 "type": "http://www.data-vocabulary.org/Event",
20 "location": [
21 "Sevilla"
22 ],
23 "summary": [
24 "Feria de Abril"
25 ]
26 }
Listing 8
Installation von Python Microdata
01 wget http://pypi.python.org/packages/source/m/microdata/microdata-0.3.0.tar.gz 02 tar xzvf microdata-0.3.0.tar.gz 03 cd microdata-0.3.0/ 04 sudo python setup.py install
Durch Anwendung der Methode »get_items()« auf das geöffnete Dateihandle von »microdata.html« extrahiert anschließend Zeile 3 alle Mikrodaten aus dem HTML-5-Dokument und speichert sie im Feld »items« . Der Aufruf der Methode »json()« in Zeile 4 konvertiert die Mikrodaten in das Json-Datenformat. Alternativ könnte die Methode »dict()« die Mikrodaten in ein Python-Dictionary überführen.
Auch andere Sprachen bieten Open-Source-Parser für Mikrodaten, beispielsweise Ruby mit Mida [17], Perl mit dem Modul HTML::Microdata [18], PHP mit PHP Microdata [19] oder Java mit Any23 [20]. Das letztere Tool parst nicht nur Mikrodaten, sondern konvertiert eine Vielzahl von Meta-Angaben zwischen verschiedenen Formaten. Mögliche Eingabeformate sind: RDF, Mikrodaten oder Mikroformate in (X)HTML 5, Turtle, N-Triples, N-Quads, RDF in XML oder CSV. Die Ausgabe erfolgt wahlweise in Turtle, N-Triples, N-Quads, RDF/XML oder Json.
Fundgrube WWW
Mikroformate machen die Inhalte von Webseiten fit für die programmgesteuerte Weiterverarbeitung, beispielsweise durch Suchmaschinen oder Konverter. Zu diesem Zweck ergänzen sie die Texte in HTML-Dokumenten nach einfachen Regeln. Dieses Prinzip hat HTML 5 in Form der Mikrodaten übernommen. Mit Mikroformaten und Mikrodaten gelingt es, Informationen so aufzubereiten, dass sie sich automatisiert extrahieren und weiterverarbeiten lassen, wozu verschiedene Open-Source-Tools und Bibliotheken bereitstehen.
Schon ein wenig Spielerei mit dem Firefox-Plugin Operator lässt ahnen, was sich mit diesen Datenformaten machen lässt. Je mehr Webseiten-Anbieter künftig auf Mikroformate und -daten setzen, umso einfacher wird es, die gewünschten Informationen aus dem bisher unübersichtlichen WWW zu bergen. (mhu)
Infos
- Mikroformate: http://microformats.org
- Mikrodaten: http://www.whatwg.org/specs/web-apps/current-work/multipage/microdata.html
- Hcard-Format http://microformats.org/wiki/hcard
- Vcard-Format: http://www.ietf.org/rfc/rfc2426.txt
- Microformats-Wiki: http://microformats.org/wiki/Main_Page
- Icalendar-Format: http://www.ietf.org/rfc/rfc2445.txt
- Rel-Attribut: http://microformats.org/wiki/existing-rel-values
- Mikrodaten: http://www.whatwg.org/specs/web-apps/current-work/multipage/microdata.html
- Sammlung von Mikrodaten-Schemata: http://schema.org
- W3C Markup Validation Service: http://validator.w3.org
- Google Rich Snippets: http://www.google.com/webmasters/tools/richsnippets
- WordPress-Plugin für Mikrodaten:http://wordpress.org/extend/plugins/microdata-for-seo-by-optimum7com/screenshots/
- Firefox-Plugin Operator: https://addons.mozilla.org/de/firefox/addon/operator/
- Javascript-Bibliothek Microdata JS: https://gitorious.org/microdatajs/
- DOM-API für Mikrodaten: http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata-dom-api
- Python-Bibliothek Microdata http://pypi.python.org/pypi/microdata/0.3.0
- Ruby-Bibliothek Mida: http://lawrencewoodman.github.com/mida/
- Perl-Modul HTML::Microdata: http://search.cpan.org/~satoh/HTML-Microdata-0.02/lib/HTML/Microdata.pm
- PHP Microdata: https://github.com/soyrex/PHP-Microdata
- Any23, Bibliothek und RDF-Parser: http://developers.any23.org
