Mikroformate: vCard (digitale Visitenkarte) für die Homepage

Mikroformate sind ein Set von einfachen Datenformaten. Digitale Visitenkarten - sogenannte hCards - sind ein Beispiel für diese Art von simplem HTML-Code, den sie erstellen und in die Homepage einbinden können.

hCard ist von vCard abgeleitet, welches ein Format bezeichnet, um Kontaktdaten für z.B. Adressbücher zu formatieren. Der Ersteller der vote-links-Webseite hat beispielsweise solche eine hCard auf seiner Hompage - @rtWeb Design Sven Fuchs - eingebunden. Sie finden die hCard-Datei, wenn Sie ganz nach unten scrollen und in die rechte Ecke sehen. Dort steht ein Link namens "download vCard".Wenn Sie auf das hCard-Icon klicken, wird eine vCard-Datei heruntergeladen, die Sie in Ihr Adressbuch aufnehmen können.

Das Pfiffige daran ist, daß es auf dieser Webseite keine entsprechende vCard Datei gibt, sondern nur ein hCard Microformat im HTML eingebettet ist. Der Link "download vCard" ruft einen Technorati Service auf. Dieser scannt die Webseite, von der aus der Service angefordert wurde. Technorati findet die hCard Informationen und generiert daraus eine vCard Datei, die dann zum Browser zum Download geschickt wird. Denkbar einfach!

Alles, was es auf der eigenen Homepage braucht, ist ein entsprechend formatiertes HTML. Sie müssen keine extra vCard Datei pflegen.

Das nötige HTML sieht beispielhaft so aus:

<div id="address" class="vcard">
  <p>
    <span class="org">artweb design</span><br />
    <span class="fn">Sven Fuchs</span><br />
    <span class="adr">
      <span class="street-address">Grünberger Str. 65</span><br />
      <span class="postal-code">10245</span>
      <span class="locality">Berlin</span>,
      <span class="country-name">Germany</span>                          
    </span>
  </p>
  <p>
    <a class="email" href="mailto:svenfuchs@artweb-design.de">
      svenfuchs@artweb-design.de</a><br />
    <a class="url" href="http://www.artweb-design.de">
      http://www.artweb-design.de</a>
  </p>
  <p>
    Fon <span class="tel">+49 (30) 47 98 69 96</span><br />
    Fax <span class="fax">+49 (30) 47 98 69 97</span><br />
  </p>
</div>
<div>
  <a class="hcard-download" href="http://feeds.technorati.com/contacts/referrer">
    download vCard</a>
</div>

Alternativ hat microformats.org auch eine hCard Creator, der den entsprechenden Code automatisch nach Ihren Vorgaben erzeugen kann. Außerdem ist in deren Wiki die hCard ausführlich vorgestellt: Wiki - Microformate.

Das Icon können Sie hier herunterladen und per CSS-Style einbinden:

.hcard-download {
  background:transparent url(/images/hcard.mini.png) no-repeat scroll left top;
  padding-left:18px;
}

Den Icon-Pfad passen Sie bitte an Ihre Webseite an.

Das Mikroformat hCard ist von vCard abgeleitet. Und vCard ist eine digitale Visitenkarte. Visitenkarten geben Sie normalerweise per Hand weiter, die hCard kann sich jeder Benutzer Ihrer Webseite downloaden und per Mausklick in sein Adressbuch einfügen.

Bei Outlook können Sie dies über "Adressbuch" -> "Datei" -> "Importieren" -> "Visitenkarte (vCard)" machen. Leider übernimmt Outlook nicht alle Adressdaten und zeigt Umlaute als Sonderzeichen (Bsp. als utf-8-Code) an. Das Programm Microsoft Office ist von Windows vorgesehen, um diese hCard-contacts.vcf zu öffnen.

Wenn Sie Mac OSX verwenden startet nach dem Download das Adressbuch und Sie werden gefragt, ob Sie die Visitenkarte hinzufügen wollen. Wenn Sie das bestätigen, haben Sie sie in Ihrem Adressbuch.

Viel Erfolg beim Gestalten Ihrer digitalen Visitenkarte!