Webdesign

Referenzen

Kontaktseiten mit Microformat: vCard

vcard-symbol auf Mac

In E-Mail-Anhängen kann man inzwischen oft auf das angehängte .vcf klicken um die Visitenkarte des Absenders mit einem Click ins eigene Adressverzeichnis zu übernehmen. Diese .vcf-Importdateien für Outlook oder fürs Adressbuch (Mac) lassen sich praktischerweise auch in die eigene Website integrieren.

Mit Microformaten wird z. B. die Adresse auf der Kontaktseite so programmiert, dass eine Browsererweiterung die vCard auslesen und exportieren kann. Im Firefox Browser ist eine der geeigneten Erweiterungen zum Auslesen von Microformaten das Add on „Operator“. Nach erfolgreicher Aktivierung des Add ons wird in der Adresszeile ein + angezeigt, das leuchtend grün + Seiten mit auslesbaren Microformaten markiert. Auch für die Suchmaschinenoptimierung ist diese im allgemeinen unsichtbare HTML-Programmierung interessant, google hebt mittlerweile einige ausgezeichnete Einträge in den Suchergebnissen hervor.

Im folgenden möchte ich an einem Beispiel zeigen, wie eine vCard mit HTML erstellt und mit CSS gestaltet werden kann.

Für die Microformate werden Klassen vergeben, an die man sich für das korrekte Ausgeben im „Operator“ halten sollte.

HTML

<address id="hcard-Mo-Huebener" class="vcard">
<img class="photo" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/372306_100001770005279_654408478_n.jpg">
<span class="n">
<span class="family-name">Hübener</span>
<span class="given-name">Mo</span>
<span class="honorific-prefix">Dipl.</span>
</span>
<span class="fn">Mo Hübener</span>
<span class="org">mo-ment | design</span>
<span class="adr"><span class="type">work</span>
<span class="street-address">Hagenauer Stra&szlig;e Nr. 18 </span>
<span class="postal-code">10435&nbsp;</span><span class="locality">Berlin </span>
<span class="country-name">Deutschland</span>
</span>
<span class="tel"><span class="type">cell</span><span>+49 / (0)160 / 92 95 97 16</span></span>
<span class="tel fax"><span class="type">fax</span><span>0049 3222 93 21 882 </span></span>
<span class="email"><a href="mailto:design@mo-ment.de">design@mo-ment.de</a></span>
<span class="url uid">www.mo-ment.de </span></address>

Erläuterung

Mit der Klasse „vcard“ wird das Add-on zum Auslesen aufgerufen.
„photo“ wird in der vCard auf dem Mac bei mir noch nicht ausgegeben.
„n“ ist der Name des Eintrags im Adressbuch und kann als Kurzform Nachname;Vorname geschrieben werden. Wird allerdings ein Suffix und/oder Prefix am Namen gebraucht muss „n“ weiter gegliedert werden, nur dann wird in der importierten Datei im Adressbuch auch der Name korrekt ausgegeben. (Siehe im Bsp. Dipl.)
„fn“ ist der Name der Importdatei.vcf und wird bei Klick auf das GRÜNE KREUZ zum Export angezeigt.
„adr“ steht für die Postadresse und kann mit work oder home typisiert werden.
Die Adresse wird gegliedert: „street-address“, „postal-code“, „locality“ und „country-name“ sind selbsterklärend.

Auch die Telefon-, Mobil- und Faxnummern sollte man exakt für Adressbucheinträge formatieren. Mit der Klasse „tel“ werden alle Nummern erfasst, mit der Klasse „type“ werden die Telefonnummern richtig verteilt und mit der Klasse „value“ dann der Wert – also die Nummer – zugewiesen. Type kann dabei die Werte work, home, cell, fax … bekommen.

„email“ kann auch innerhalb der Kontaktseite mit href=“mailto: …“  verlinkt sein, für die vcard reicht die einfache Angabe der E-Mail-Adresse ohne die Verlinkung. Das gleiche gilt für die Angabe der Website-„url“.

Gestaltung mit CSS für die Website

Hier sind den Gestaltungsmöglichkeiten kaum Grenzen gesetzt. Die vCard selbst wird durch die Styles nicht beeinflusst. Auch zusätzliche Klassen lassen sich im HTML einfügen (z. B. class=“tel fax“). Einige Eigenheiten der vCard möchte man wahrscheinlich nicht sehen, so blende ich immer die englischen Type-Werte aus und dafür passende Symbole oder Bezeichnungen ein.

/* KONTAKT Adresse vCard vorbereitet */

#hcard-mo-huebener { position: relative; }
.photo { float: left; margin: 5px 20px; width: 100px; height: auto; }
.type, .n { display: none; }
.fn, .org, .adr, .tel, .email, .url, .fax { margin: 4px 0;}
#hcard-mo-huebener span.adr { display: inherit; }
.street-address:after, .locality:after { content: " * "; }
.fn, .org, .tel, .email, .url { display: block; }
.tel:before { content: "Tel: "; }
.fax:before { content: "Fax: "; }
.email:before  { content: "E-Mail: "; }
.email { text-decoration: none; }
.url:before { content: "Website: "; }

Weitere Informationen: http://microformats.org/

 

Datum: 5. Januar 2012
Kategorie: Webdesign
Tags:


1 Kommentar

Eine Antwort zu “Kontaktseiten mit Microformat: vCard”

  1. Mo sagt:

    In WordPress installiert man für vCards und hCards ein plugin, dass die Daten dann direkt aus dem Benutzerprofil bezieht. So lassen sich die Adressdaten auch nachträglich einfach anpassen.

(Moderierter Blog)