dyingeyes weblog: das persönliche Weblog von Boris Stumpf aus Frankfurt am Main

Ich hatte vor längerer Zeit schon einmal ein paar Lesezeichen zu Mikroformaten angelegt, weil mich das Thema interessiert. Gestern kam ich endlich einmal dazu, einen kleinen Blick hinter die Kulissen dieser »Formate zur ›Feinstrukturierung‹ von Webseiten« zu wagen und mir zunächst eine spezielle Formatklasse genauer anzuschauen:

• hCard ist das Mikroformat zur Auszeichnung von Kontakt- bzw. Adressinformationen

Mein Ziel bei der erstmaligen Anwendung war, meine vorhandenen Kontaktdaten so mit den entsprechenden Stylesheet-Klassen auszuzeichnen, dass sie als hCard maschinenlesbar werden – genauer: dass sie z.B. mittels einer geeigneten XSLT-Transformation (per Fremd-Skript) in nutzbare Kontaktdaten für Adressbücher (in eine vCard *.vcf) übersetzt werden können.

Ab in den Quelltext …

Liegen die Kontaktangaben auf einer Webseite schon in geeigneter Rohform vor, also in sauberem Markup per HTML und Auszeichnung per Stylesheet, so ist die zusätzliche Auszeichnung mit den erforderlichen hCard-Klassen nicht weiter problematisch.

Am Beispiel meiner Kontaktangaben benötigt man nur einen kleinen Ausschnitt an Klassen:

class="fn" für den Namen, bestehend aus Vorname und Nachname. Falls ein Mittelname vorhanden ist, muss man etwas detaillierter auszeichnen, mit je einem HTML-Element und der Zuweisung von:

class="given-name" für den Vornamen
class="additional-name" für den zweiten Vornamen
class="family-name" für den Nachnamen

Den Namen kann man zusätzlich als Link zur Homepage ausführen und mit der Klasse class="url" auszeichnen.

In der nächsten Zeile verwende ich für die E-Mailadresse die Klasse class="email". Auch diese kann man natürlich als mailto:-Link ausführen.

Anschließend folgt ein div-Block, der die Postadresse umschließt und mit der Klasse class="adr" ausgezeichnet ist. Darin je eine Zeile für die Straße (class="street-address") und eine für die Postleitzahl (class="postal-code") und den Wohnort (class="locality").

Abschließend folgt die Telefonnummer, die mit class="tel" ausgezeichnet ist. Ich habe mich gestern für eine ›unformatierte‹ internationale Schreibweise entscheiden, was aber sicher nicht erforderlich ist.

Der umgebende Rahmen

Damit der ganze eben behandelte Block von Kontaktangaben als zusammengehörige hCard-Informationen lesbar wird, ist er in einen umgebenden Block (hier: div) eingeschlossen, der über seine ID (id="hcard-Boris-Stumpf") und die kennzeichnende Klasse (class="vcard") als hCard erkannt und gelesen werden kann.

Wie nutze ich diese Daten?

Um die jetzt als hCard vorliegenden Kontaktangaben für den Seitenbesucher nutzbar zu machen, kann ich ein Skript einbinden, welches daraus eine elektronische Visitenkarte (vCard) erstellt, die man herunterladen und ins eigene Adressverwaltungsprogramm (Outlook, Evolution und andere, die *.vcf importieren können) importieren kann.

Ich muss aber tatsächlich nichts selbst entwickeln, denn zu diesem Zweck bietet z.B. der Blog-Tagging-Dienstleister Technorati eine Möglichkeit an. Man baut einfach auf der Kontaktseite einen Link nach dem folgenden Muster ein:

Kontaktinformationen als vCard herunterladen

Bei Klick auf diesen Link erhält man die entsprechende *.vcf-Datei zum Herunterladen.

Browser-Komfort

Ich bin schließlich beim gestrigen Stöbern auf eine interessante Möglichkeit für mehrere Webbrowser gestoßen, wie man mit einem lokalen Stylesheet hCard-Informationen auf Webseiten erkennbar auszeichnen kann.

Links zusammengefasst

Original-Projekt und andere Ressourcen (englisch):

• microformate.org
• microformats.org/wiki
• microformats.org/wiki/hcards
• microformats.org/wiki/hcards-authoring
• microformats.org/wiki/hcards-parsing
• Microformats: What They Are and How To Use Them

Deutsche Ressourcen:

• mikroformate.de
• microformate.org-Blog
• Mikroformate-Artikel bei den Webkrauts
• Mikroformate im lokalen Browser sichtbar machen

Dieser Inhalt (Textbeitrag und Fotos) ist unter einer Creative-Commons-Lizenz BY-NC-ND lizenziert.

Kategorie(n): Webdesign
Tags: CSS, hcard, HTML, Mikroformate, vcard, Webstandards

Kommentare und Pings geschlossen.

Kommentar-Feed (RSS) zu diesem Artikel