Open Source im professionellen Einsatz
Linux-Magazin 03/2012
750

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>

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 6 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

Linux-Magazin kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • Kostenloses Lesefutter: Datenbanken, Embedded, Energiesparen und Plotten

    Mit Erscheinen der aktuellen Ausgabe 02/13 rückt das Linux-Magazin 04/12 in den kostenlosen Bereich, denn auf Linux-Magazin Online sind alle Ausgaben zum Nulltarif zu lesen, die älter als 10 Monate sind.

  • Perl-Snapshot

    Mikroformate zeichnen HTML-Seiten mit allgemein anerkannten Tags aus, zum Beispiel Verbindungen zu sozialen Netzwerken oder Geokoordinaten. Das erlaubt automatischen Auswertern, sie zu sammeln und grafisch aufzubereiten. Nützlich ist das zum Beispiel bei Geodaten zur Routenplanung.

  • W3C holt Feedback zu HTML 5 ein

    Das World Wide Web Consortium (W3C) steht vor der Verabschiedung der Spezifikation für HTML 5 und verwandte Technologien. In dieser Phase ist die Öffentlichkeit zum Kommentieren eingeladen.

  • Verkaufstalent

    In traditionellen Wirtschaftsbereichen wie dem Einzelhandel hat Linux ein großes Potenzial. Der Erfolg der Handelskette Globus beim Einsatz von Debian GNU/Linux auf Kassensystemen lässt für künftige Projekte Optimismus aufkommen.

  • Perl-Snapshot Linux-Magazin 2012/10

    Perlmeister Michael Schilli hat seinen Snapshot verfilmt.

comments powered by Disqus

Ausgabe 07/2017

Digitale Ausgabe: Preis € 6,40
(inkl. 19% MwSt.)

Artikelserien und interessante Workshops aus dem Magazin können Sie hier als Bundle erwerben.