kulturbanause blog

vCards sind elektronische Visitenkarten die per Mausklick ins Adressbuch (lokal, online, mobil, pda, etc.) importiert werden können. Mikroformate sind Markup Auszeichnungen die es dem Programm (z.B. Browser) ermöglichen den semantischen Zusammenhang von Zeichenfolgen zu verstehen. Im Klartext heiß das: Der Computer stellt nicht nur eine Reihenfolge von Zeichen dar, sondern er versteht auch in was für einem Zusammenhang die Daten stehen und was sie bedeuten. Im Folgenden erkläre ich wie vCards mittels Mikroformaten in Internetseiten integriert werden können.

XHTML mit Microformat auszeichnen

Im folgenden seht Ihr den gewöhnlichen XHTML-Code zur Darstellung einer Adresse. In diesem Fall meine.

Jonas Hellwig
  Fürstenwall 122
  40217 Düsseldorf
  Deutschland

  Fon: +49 (0)211 - 165 10 65
  E-Mail: <a href="mailto:jonas.hellwig@gmail.com">jonas.hellwig@gmail.com</a>
  Web: <a href="http://www.kulturbanause.de">www.kulturbanause.de</a>

Um nun diesen gewöhnlichen XHTML-Code als ein Mikroformat auszuzeichnen, müssen einige (vordefinierte und feststehende) Klassen eingefügt werden. Danach sieht das ganz wie folgt aus:

<div id="hcard-Jonas-Hellwig" class="vcard">
<div class="adr">
      <span class="fn">Jonas Hellwig</span>
      <span class="street-address">Fürstenwall 122</span>
      <span class="postal-code">40217</span> <span class="locality">Düsseldorf</span>
      <span class="country-name">Deutschland</span></div>
Fon: <span class="tel">+49 (0)211 - 165 10 65</span>
    E-Mail: <a class="email" href="mailto:jonas.hellwig@gmail.com">jonas.hellwig@gmail.com</a>
    Web: <a class="url" href="http://www.kulturbanause.de">www.kulturbanause.de</a></div>

Die Klassen habe ich in diesem Fall in SPAN-Elemente geschrieben, sie können selbstverständlich auch auf andere Tags angewendet werden.

Zur Erklärung

• "vcard" umschließt die gesamte vCard.
• "adr" umschließt alle Daten die zur Adresse gehören.
• "title" Zeichnet einen Titel (Dr., Prof., etc) aus.
• "fn" Zeichnet Vor- und Nachnamen aus.
• "org" Zeichnet Firma oder Organisation aus.
• "street-address" Zeichnet die Straße aus.
• "postal-code" Zeichnet die Postleitzahl aus.
• "locality" Zeichnet die Stadt aus.
• "country-name" Zeichnet das Land aus.
• "tel" Zeichnet eine Telefonnummer aus.
• "fax" Zeichnet eine Faxnummer aus.
• "email" Zeichnet eine E-Mail-Adresse aus.
• "url" Zeichnet eine URL (Internetadresse) aus.
• "bday" Zeichnet ein Geburtsdatum aus.

Weitere Infos zum Thema:

Hier erfahrt Ihr wie Ihr Mikroformate komfortabel mittels Browser Plugin nutzen könnt. Artikel lesen »