kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

HTML vCard mittels Mikroformat erstellen

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. Der Computer stellt folglich nicht nur eine Reihenfolge von Zeichen dar, sondern er versteht auch in was für einem Zusammenhang die Daten stehen und was sie bedeuten. In diesem Beitrag erklären wir wie vCards mittels Mikroformaten in Internetseiten integriert werden können.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

HTML mit Microformat auszeichnen

Im folgenden seht Ihr den gewöhnlichen HTML-Code zur Darstellung einer Adresse.

<address>
  Jonas Hellwig
  Fürstenwall 122
  40217 Düsseldorf
  Deutschland
</address>
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 HTML-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">
  <address class="adr">
     <div class="fn">Jonas Hellwig</div>
     <div class="street-address">Fürstenwall 122</div>
     <div class="postal-code">40217</div>
     <div class="locality">Düsseldorf</div>
     <div class="country-name">Deutschland</div>
  </address>
  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 <div>- bzw- <span>-Elemente geschrieben, sie können selbstverständlich auch auf andere Tags angewendet werden.

Übersicht vCard Mikroformate

  • "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.

 

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

17 Kommentare

  1. holger

    Verfasst am 4. April 2008 um 8:01 Uhr.

    vCard – immer mal wieder gehört und gesehen. nach der erklärung und installation des plug-in für ff der aha-effekt: welcher webdesigner, der unternehmenswebseiten betreut, könnte jetzt noch darauf verzichten.
    danke für den sehr hilfreichen (und leider notwendigen ) anschubser …

  2. Moritz

    Verfasst am 13. April 2008 um 11:21 Uhr.

    Hallo,
    kann ich die vcard auch einbinden, ohne die eigentlichen Informationen auszugeben? Quasi als Anhängsel, wie bei RSS-Feeds?
    lg

  3. Jonas

    Verfasst am 13. April 2008 um 11:32 Uhr.

    @ Moritz:
    Du kannst natürlich die vCard auf visibility:hidden; setzen. Dann sollte das Microformat für den User nutzbar sein, ohne, dass die Adresse optisch auf der Seite erscheinen muss.
    Ich kann allerdings grad nicht abschätzen wie Google & Co. dann dieses Element behandeln. Da hat sich doch vor kurzem was getan was die display:none / visibility:hidden – Politik angeht oder?

    Edit: Ich habs grad mal ausprobiert. Es funktioniert nur mit visibility:hidden; wenn display:none; verwendet wird kann das Microformat nicht genutzt werden. Ich hab es in meiner Sidebar eingebaut. Rechts unter „More Infos“. Somit ist mein Kontakt nun auf allen Seiten zu nutzen.

  4. Andre

    Verfasst am 16. April 2008 um 10:54 Uhr.

    Hi Jonas!

    Mal ne kleine Frage:
    Du umschließt die vCard mit einem ist das zwingend erforderlich oder reichen die einzelnen Klassen aus?

    Grüße
    André

  5. Jonas

    Verfasst am 16. April 2008 um 12:12 Uhr.

    Soweit ich weiß, reicht es, wenn du alles mit einem DIV der Classe „vCard“ umschließt.

  6. evelyn

    Verfasst am 7. November 2008 um 0:03 Uhr.

    Hallöle,

    ich habe versucht eine vCard in eine Webseite zu integrieren mittels normalen Link, leider wird mir der Code nur angezeigt und nicht die Datei als Download angeboten.
    Woran könnte das liegen?
    Was mache ich falsch?

    MfG
    Evelyn

  7. Jonas

    Verfasst am 7. November 2008 um 9:46 Uhr.

    @ Evelyn: Was du mit dem hier gezeigten Code erstellst, ist eine vCard als Mikroformat. Diese ermöglicht verbesserte Funktionalität in neuen Browsern oder auf Smartphones.
    Wenn du eine vCard als Download anbieten möchtest (die dann ins lokale Adressbuch übernommen werden kann) so musst du lediglich eine erstellen (Export-Funktion in Outlook oder Mail) und dann wie einen gewöhnlichen Download verlinken.
    Zu beachten ist jedoch, dass der Browser meist versucht die vCard zu öffnen anstatt sie herunterzuladen. Ich habe das Problem bisher immer mit einer „ForceDownload.php“ gelöst, die den Browser dazu zwingt die Datei zu speichern anstatt sie anzuzeigen.

  8. Eva

    Verfasst am 17. April 2009 um 12:19 Uhr.

    Ich finde diese Vcard super, nur werden deutsche Umlaute und Sonderzeichen wie zB: é nicht richtig dargestellt. Was kann man dagegen machen?

    LG, Eva

    • Jonas

      Verfasst am 24. April 2009 um 18:58 Uhr.

      @ Eva: Ich habe lediglich eine Lösung für die „echten“ vCards, die du aus Outlook oder Mail exportieren kannst. Hier werden für deutsche Sonderzeichen unsichtbare Bits hinzugefügt die zu fehlerhaften Darstellungen führen können. Abhilfe schafft hier das umkodieren der Datei in UTF8, z.B. mit Notepad++.
      Über eine Info zu oben angesprochenem Problem wäre ich selbst sehr dankbar.

  9. Klaus

    Verfasst am 19. September 2012 um 22:26 Uhr.

    uuund Jahre später führt mich Google noch immer hier hin. Danke für den Beitrag. Anstatt eine vcard nochmal als Download einzubinden, kann man diese auch automatisch aus dem Mikroformat generieren lassen. Siehe hier: http://www.philognosie.net/index.php/article/articleview/631/

  10. Yevgen

    Verfasst am 13. November 2012 um 19:21 Uhr.

    Danke sehr hilfreicher Artikel!

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.