Microformats Wiki - User contributions [en]

introduction-de

2006-07-13T13:15:20Z

Chucker: initial translation

__NOTOC__

<h1> Einleitung zu Mikroformaten </h1>

Siehe auch: [[press-de|Presse]], [[presentations-de|Vorträge]], [[podcasts-de|Podcasts]], [[suggested-reading-de|Vorgeschlagene Literatur]], [[testimonials-de|Empfehlungen]]

__TOC__

== Was sind Mikroformate? ==

Mikroformate sind "Wörterbücher" von semantischen Inhalten in XHTML. Sie werden verwendet, um gebräuchlich benutzte informationsreiche HTML-Inhalte so mit semantischen Bedeutungen zu ergänzen, dass sie Maschinen-extrahierbar werden. Kurz gesagt, sie sind die einfachst-mögliche Art, Daten (oder Datenformate) für die Weiterverwendung im Web zu gestalten.

== Warum Mikroformate ==

Warum haben wir uns Mikroformate ausgedacht?

Kurz gesagt, sind Mikroformate die Zusammenführung diverser Trends:
# ein logischer nächster Schritt in der Evolution von Web-Design und Informations-Strukturierung
# eine Möglichkeit für Selbstherausgeber, ihre Informationen selbst reicher zu machen, ohne zentralisierte Dienste zu benötigen
# eine Anerkennung, dass "traditionelle" Metadaten-Anstrengungen entweder fehlgeschlagen sind, oder viel zu lange brauchten, um Umsetzung hervorzurufen, und dass ein neuer Ansatz notwendig war
# eine Art, (X)HTML für Daten zu verwenden.

=== Evolution von Web-Design ===

Am Anfang (1990) war [http://www.w3.org/MarkUp/ HTML (englisch)], und es war gut. Es war einfach und minimal, und es wurde verwendet, um semantisch benutzer-sichtbare Daten (Text) auszuzeichnen, und es im World Wide Web zu teilen.

Dann kamen die [http://en.wikipedia.org/wiki/Browser_wars Browser-Kriege (englisch)] (1994-1999), wo die dominanten Browser-Hersteller sich gegenseitig dabei zu überbieten versuchten, "innovative" Darstellungs-Tags einzuführen, was dem typischen Web-Autoren und -Designer genau das gab, was sie wollten: ein Gefühl von Kontrolle über das Aussehen ihrer Web-Seiten. Das Ergebnis: [http://www.w3.org/TR/REC-html32 HTML 3.2 (englisch)] "standardisierte" diese de-facto-Darstellungs-Innovationen.

Die Einführung von [http://www.w3.org/TR/REC-CSS1 CSS1 (englisch)] (1996), und die des semantisch reicheren [http://www.w3.org/TR/REC-html40/ HTML4 (englisch)] (1998) brachte einen Schimmer Hoffnung, doch erst deutlich später (2000-2001), mit der Einführung vollständig (oder beinahe) konformer Implementationen von CSS1/HTML4 (IE5/Mac, IE6/Windows, Netscape 6), wurde es für Web-Designer praktikabel, bei ihren Web-Seiten auf CSS zu setzen. Die führenden Mitglieder der Gemeinde fingen wild an, CSS und die Effizienzen und erweiterte Produktivität das dieses ihnen brachte umzusetzen und zu verbreiten (obwohl es [http://www.tantek.com/log/2004/07.html#ie5macbandpass einen (englisch)] [http://tantek.com/CSS/Examples/boxmodelhack.html Hack (englisch)] [http://www.tantek.com/CSS/Examples/midpass.html oder (englisch)] [http://tantek.com/CSS/Examples/highpass.html zwei (englisch)] brauchte), blieben jedoch eine kleine, wenn auch laute Minderheit.

Die Einführung der Neu-Entwerfung von Wired News in 100% CSS und des wunderschönen [http://csszengarden.com/ CSS Zen Garden (englisch)] (2002-2003) war der Punkt, an dem CSS überschwappte. Mit der klaren, offensichtlichen Darstellung visueller Schönheit und vielfältiger Kreativität "kapierten es" Web-Designer aller Welt, und erkannten, dass dies die Zukunft von Web-Design war. Darstellungs-Markup durch <code><FONT></code>, <code><TABLE></code>, und <code>spacer.gif</code> wurden durch praktisch alle selbstrespektierende Web-Designer zur Seite gelegt, da diese die fast unendliche Flexibilität von <code><div></code>, <code><span></code> und dem 'class'-Attribut entdeckten. Einige in der Gemeinde fingen sogar an, ein paar der semantischeren Elemente in HTML umzusetzen: <code><p></code>, <code><h1></code>...<code><h6></code>, <code><ol></code>, <code><ul></code>, <code><li></code>, <code><em></code>, <code><strong></code>. Führende Persönlichkeiten der Gemeinde brachten striktes HTML 4 an seine semantischen Grenzen (und experimentierten mit XHTML), und dokumentierten [http://www.simplebits.com/publications/solutions/ optimale Verfahren].

Als die Gemeinde rapide fortschritt, fingen die Vorreiter an, auch an die Grenzen semantischen (X)HTMLs zu gelangen. Andere Subkulturen versuchten, die Welt in ihren eigenen Sprachen neu zu schreiben (<abbr title="Resource Description Framework">[http://www.w3.org/RDF/ RDF (englisch)]</abbr>, [[plain-xml|"einfaches" XML (englisch)]], <abbr title="Scalable Vector Graphics">[http://www.w3.org/TR/SVG/ SVG (englisch)]</abbr>), hatten jedoch kaum Einfluss auf das World Wide Web, das menschen-darstellbare Daten brauchte, die mit den Browsern kompatibel waren, die Leute bereits benutzten. [http://en.wikipedia.org/wiki/Social_software Soziale Software (englisch)] und [http://en.wikipedia.org/wiki/Blogs Blogs], von dieser neuen Generation an Web-Designern und -Programmieren, gewannen an Schwung.

Diverse Muster entwickelten sich daraus, wie Leute Blogging-Systeme verwandten, etwa, was das verwalten von Sachen in Listen betrifft, zum Beispiel Listen anderer Blogger (als Blogrolls bekannt), welche mit Informationen versehen werden, die Beziehungen zu diesen repräsentiert — ob man sich getroffen hat, Freunde oder Verwandte sind, etc. Das erste Mikroformat, <abbr title="XHTML Friends Network">[http://gmpg.org/xfn/ XFN (englisch)]</abbr>, wurde entworfen, um diesen Verhalten zu entsprechen, und [http://tantek.com/log/2003/12.html#L20031215t0830 wurde der Blogging-Gemeinde demonstriert (englisch)] (2003-2004), die es binnen Wochen adoptierte. Die [http://gmpg.org GMPG (englisch)] wurde formiert, um als Heim für XFN zu dienen, und dokumentierte einige entscheidende [http://gmpg.org/principles Entwurfs-Prinzipien (englisch)], die später für Mikroformate übernommen wurden. Die definierende Idee, dass semantisches (X)HTML erweitert werden konnte, wurde in der Gemeinde eingeführt und akzeptiert.

Indem sowohl die Bausteine von (X)HTML verstanden, benutzt und kombiniert wurden, als auch begriffen wurde, dass semantisches (X)HTML korrekt erweitert werden konnte, indem neue Werte für rel, meta name und class kreiert wurden, die wiederum in (X)HTML-Profilen im [http://gmpg.org/xmdp XMDP format] definiert werden, fing die Gemeinde an, deutlich mehr Mikroformate zu entwerfen und entwickeln (2004-2005). Weitere Muster entstanden aus der Blogging-Gemeinde, und jedes zusammengefasste menschliche Verhalten führte das Entwerfen einfacher, anpassbarer Mikroformate hervor, die den Gebräuchen der Gemeinde entsprachen. Lizensierung via Creative Commons wurde populär, und [[rel-license]] wurde vorgeschlagen. Strukturen und Listen: [[xoxo|XOXO]]. Kontaktinformationen: [[hcard|hCard]]. Kalender und Ereignisse: [[hcalendar|hCalendar]].

Indem diese neue gefunden Bausteine verwandt wurde, waren die Web-Design- und Informations-Struktur-Gemeinden nicht mehr durch die vordefinierten Semantiken von HTML4 eingeschränkt (ebenfalls mussten sie keine Kompromisse bei menschliche Darstellung oder Einfachheit des Erstellens mehr eingehen, was bei anderen Ansätzen ein Problem war). 2005 könnte durchaus das Jahr sein, in dem Mikroformate der nächste Schritt der Evolution des Webs wurden.

=== Der Anreiz von Einfachheit ===

* Mikroformate sind wenig Aufwand, was für viele mit vorigen komplexeren Ideen Menschen verlockend ist — eine Parallele, die zu REST in der Web-Dienste-Welt gezogen werden kann, siehe diesen [http://www.windley.com/archives/2005/07/microformats.shtml Vergleich von Mikroformaten und REST (englisch)]. Siehe auch das [http://rest.blueoxen.net REST-Wiki (englisch)] für mehr über REST, und mit Bezug: [http://patricklogan.blogspot.com/2006/01/microformat-microprotocol.html Mikroformate und Mikroprotokolle (englisch)].
* Siehe auch: [http://www.justinleavesley.com/journal/2005/7/28/web-services-and-the-innovators-dilemma.html Web-Dienste, und das Dilemme von Innovatoren (englisch)] von Justin Leavesley

== Seiten mit Bezug ==

* Neue [[press-de|Presse]]-Interviews und -Artikel sind ebenfalls ein guter Einstieg.
* Siehe Mikroformat-[[presentations-de|Darstellungen]] für weitere Hintergründe und einführendes Material über [[microformats-de|Mikroformate]].
* Hören Sie sich [[podcasts-de|Podcasts]] über Mikroformate an.
* Weitere [[suggested-reading-de|vorgeschlagene Literatur]]
* [[implement-de|Sie wollen als Mikroformate implementieren?]]

== Artikel ==
* [http://www.digital-web.com/articles/microformats_primer/ Digital Web Magazine: Microformats Primer (englisch)] von Garrett Dimon
* [http://www.gr0w.com/articles/design/an_extra_side_to_web_standards_based_design/ An Extra SIDE to Web Standards Based Design (englisch)] — Wie Semantic Information Design Ethics (SIDE) und einige direkt verfügbare Techniken das Web mitunter heilen können, von Jon Tan. Siehe auch seinen [http://www.csszengarden.com/?cssfile=/193/193.css&page=0 CSS Zen Garden "Leggo my ego"-Eintrag (englisch)].
* [http://thedredge.org/ Andrew D. Hume (englisch)] hat einen Blog-Eintrag [http://thedredge.org/2005/07/introducing-microformats/ introducing microformats (englisch)] geschrieben, und einen weiteren über [http://usabletype.com/articles/2005/usable-microformats/ usable microformats (englisch)].
* [http://24ways.org/advent/practical-microformats-with-hcard Practical Microformats with hCard (englisch)] von Drew McLellan
* [http://www.thefutureoftheweb.com/blog/2006/1/hcard Jesse Skinner's introduction to hCard (englisch)]
* [http://blog.usweb.com/ Shaun Shulls (englisch)] klasse Beitrag darüber, [http://blog.usweb.com/archives/how-microformats-affect-search-engine-optimization-seo How Microformats Affect Seearch Engine Optimization (englisch)]
* [http://blogbusinesssummit.com/2006/04/microformats_in.htm Blog Business Summit: Microformats in Plain English: the Promise of Simple Business to Business Data Exchange (englisch)] von Steve Broback

== Verschiedene Referenzen (englisch) ==

Diese sind diverse einführende Verweise und Artikel, bei denen ich noch nicht weiss, wie ich sie einbinden soll. Sie könnten sie für interessant befinden. — [http://tantek.com/log/ Tantek]

* [http://www.betaversion.org/~stefano/linotype/news/93/ Data First vs. Structure First]
** [http://tantek.com/log/ Tantek] says: In many ways it is actually *far* worse than that post conveys. The "typical" programmer literally loves spending far more time worrying about and designing the structure for structure's sake, than data, and even less so, "real world" data (current behaviors etc.). Hence we have taken the directly opposite tack with microformats when looking to solve a problem.
*** Zeroeth, define the real-world problem. If you can't do this, then stop.
*** First, look at real-world usage (data).
*** Second, what previous standards are people actually using today? If there is more than one, then lean towards those with the better adoption.
***And only after those first two do we bother to pay attention to theoretical standards, those that have been invented (whether by individuals, committees), but haven't seen much if any actual adoption.
* [http://lists.w3.org/Archives/Public/www-rdf-interest/2000Mar/0103 2000-03-21 Dan Connolly on human-consumable information]: ('''strong emphasis''' added)
** I believe that one of the best ways to transition into RDF, if not a long-term deployment strategy for RDF, is to '''manage the information in human-consumable form (XHTML) annotated with just enough info to extract''' the RDF statements that the human info is intended to convey. In other words: using a relational database or some sort of native RDF data store, and spitting out HTML dynamically, is a lot of infrastructure to operate and probably not worth it for lots of interesting cases. '''We all know that we have to produce a human-readable version of the thing... why not use that as the primary source?'''

Main Page-de

2006-07-13T12:22:22Z

Chucker: /* Erkundende Diskussionen */ couple of minor oversights

__NOTOC__
= Mikroformate-Wiki =

'''Bitte lesen Sie [[how-to-play-de|wie man mitmacht]], bevor Sie etwas bearbeiten.'''

'''Bitte lesen Sie [[process-de|Vorgang]], bevor Sie neue Mikroformate vorschlagen.'''

== Einleitung ==

[[what-are-microformats-de|Was sind Mikroformate]]? Und [[what-can-you-do-with-microformats-de|was können Sie mit ihnen anfangen]]? Schauen Sie sich [http://microformats.org/about/ Über (englisch)] für einen Überblick an, und die [[introduction-de|Einführungs]]-Seite für weitere Informationen. Kürzliche [[press-de|Medienberichte]], [[presentations-de|Vorträge]], [[podcasts-de|Podcasts]] und [[screencasts-de|Screencasts]] sind ebenfalls gut, um weitere Hintergründe zu lesen, oder ihnen zuzuhören. Häufig gestellte Fragen werden im [[faq-de|FAQ]] beantwortet. Möchten Sie etwas vorschlagen oder beitragen? Helfen Sie mit Dingen, die es [[to-do-de|zu tun gibt]]. Möchten Sie persönlich Weiteres lernen? Schauen Sie nach [[events-de|Ereignissen rund um Mikroformate]].

Eine beliebte Definition aus unserer [http://microformats.org/discuss/ englischen Mailing-Liste] (siehe auch: [[mailing-lists-de|Mailing-Listen]]) ist "einfache Konventionen, um Semantik in HTML zu integrieren, was dezentralisierte Entwicklungen ermöglicht." Genauer gesagt, können Mikroformate wie folgt definiert werden:
:einfache Konventionen
:um semantisches Markup zu integrieren
::für ein spezifisches Problem-Umfeld
:in menschenlesbaren (X)HTML/XML-Dokumenten, Atom-/RSS-Feeds und "einfachem"-XML
::was bestehende Inhalts-Verwendungsmuster normalisiert
::indem man einfache, selbsterklärende Klassen-Namen verwendet
::häufig auf Basis bestehender, offener, kompatibler Normen
:um dezentralisierte Entwicklung zu ermöglichen
::und zwar von Ressourcen, Werkzeugen und Diensten

"Oder verwenden Sie Ihren Browser etwa nur, um zu Browsen? Das ist doch völlig aus dem 20. Jahrhundert." -- [http://diveintomark.org Mark Pilgrim]

== Spezifikationen ==
Offene Norm-Spezifikationen für [[microformats-de|Mikroformate]] (siehe auch: [[implementations-de|Implementierungen]])
* [[hcalendar-de|hCalendar]]
* [[hcard-de|hCard]]
* [[rel-license-de|rel-license]]
* [[rel-nofollow-de|rel-nofollow]]
* [[rel-tag-de|rel-tag]]
* [[vote-links-de|VoteLinks]]
* [http://gmpg.org/xfn/ XFN] (siehe auch: [[xfn-implementations-de]])
* [http://gmpg.org/xmdp/ XMDP]
* [[xoxo-de|XOXO]]

== Entwürfe ==
* [[adr-de|adr]]
* [[geo-de|geo]]
* [[hatom-de|hAtom]] {{NewMarker}}
* [[hresume-de|hResume]] {{NewMarker}}
* [[hreview-de|hReview]]
* [[rel-directory-de|rel-directory]]
* [[rel-enclosure-de|rel-enclosure]]
* [[rel-home-de|rel-home]]
* [[relpayment-research-de | rel-payment]]
* [[robots-exclusion-de|Robots-Ausschluss]]
* [[xfolk-de|xFolk]]

== Entwicklungsmuster ==

Entwicklungsmuster geben Mikroformat-Autoren einen Wortschatz, um ihre Ideen einheitlich mit dem auszudrücken, was bereits getan wurde. ''Falls es verlockt, es selbst auszuprobieren, ein Mikroformat zu schreiben, '''[[process-de|lesen Sie zunächst dies]]'''!''

* [[abbr-design-pattern-de|Abkürzungs-Entwicklungsmuster]]
* [[class-design-pattern-de|Klassen-Entwicklungsmuster]]
* [[datetime-design-pattern-de|Datum-/Uhrzeit-Entwicklungsmuster]]
* [[existing-classes-de|Klassennamen, die über alle Mikroformate hinweg definiert sind]]
* [[include-pattern-de|Einschlussmuster]] {{NewMarker}}
** [[include-pattern-feedback-de|Rückfragen zu Einschlussmustern]]
* [[rel-design-pattern-de|Beziehungs-Entwicklungsmuster]]

== Erkundende Diskussionen ==

Forschung und Analyse realer [[examples-de|Beispiele]] und bestehender Formate, und Brainstorming, um das jeweilige Mikroformat anzuregen.

* Ahnenforschung: [[genealogy-formats-de|Beispiele]]
* Anweisung: [[directions-examples-de|Beispiele]] {{NewMarker}}
* [[attention-de|Beachtung]]
* Blog-Beschreibung: [[blog-description-examples-de|Beispiele]]
* Blog-Infos: [[blog-info-examples-de|Beispiele]]
* Blog-Eintrag: [[blog-post-examples-de|Beispiele]], [[blog-post-formats-de|Formate]] und [[blog-post-brainstorming-de|Brainstorming]] (woraus der [[hatom-de|hAtom]]-Entwurf resultierte)
* Buch: [[book-examples-de|Beispiele]], [[book-formats-de|Formate]] und [[book-brainstorming-de|Brainstorming]]
* Chat: [[chat-examples-de|Beispiele]], [[chat-formats-de|Formate]], and [[chat-brainstorming-de|Brainstorming]]
* Formulare: [[forms-examples-de|Beispiele]]
* hash: [[hash-examples-de|Beispiele]]
* hListing: [[hlisting-proposal-de|Vorschlag]] und [[hlisting-feedback-de|Rückmeldungen]] {{NewMarker}}
** Ebenfalls, Listung: [[listing-examples-de|Beispiele]], [[listing-formats-de|Formate]] und [[listing-brainstorming-de|Brainstorming]]
* Kommentar: [[comment-problem-de|Problem]], [[comment-examples-de|Beispiele]] und [[comments-formats-de|Formate]] (einiges muss aus [[comments-formats-de]] extrahiert werden)
* Kunstwerk: [[work-of-art-de|Überblick]], [[workofart-examples-de|Beispiele]], [[workofart-formats-de|Formate]] und [[workofart-brainstorming-de|Brainstorming]] {{NewMarker}}
* Lebenslauf [[resume-brainstorming-de|Brainstorming]] und [[resume-formats-de|Formate]]
* Medieninfos: [[media-info-examples-de|Beispiele]]
* Meeting-Minuten: [[meeting-minutes-examples-de|Beispiele]], [[meeting-minutes-formats-de|Formate]] und [[meeting-minutes-brainstorming-de|Brainstorming]]
* [[mfo-examples-de|MFO-Beispiele]]
* Musik: [[music-examples-de|Beispiele]]
* Ort: [[location-formats-de|Formate]]. (siehe auch [[adr-de|adr]] und [[geo-de|geo]])
* Photonotiz: [[photo-note-examples-de|Beispiele]]
* rel-product: [[rel-product-brainstorming-de|Brainstorming]]
* [[rest-examples-de|REST-Beispiele]]
* Rezension: [[review-examples-de|Beispiele]] und [[review-formats-de|Formate]] (woraus der [[hreview-de|hReview]]-Entwurf resultierte)
* Rezept: [[recipe-examples-de|Beispiele]]
* Show: [[show-brainstorming-de|Brainstorming]]
* Show-Liste: [[showroll-brainstorming-de|Brainstorming]]
* Suchergebnis: [[search-results-example-de|Beispiel]]
* Tabelle: [[table-examples-de|Beispiele]]
* Tagspeak: [[tagspeak-examples-de|Beispiele]]
* Übermittlungs-Tabelle: [[transit-table-examples-de|Beispiele]]
* [[uid-de|UID]]
* Verteilte Unterhaltung: [[distributed-conversation-de|Überblick]], [[distributed-conversation-brainstorming-de|Brainstorming]], [[distributed-conversation-examples-de|Beispiele]] und [[distributed-conversation-formats-de|Formate]]
* Verzeichnis-Integration: [[directory-inclusion-examples-de|Beispiele]], [[directory-inclusion-formats-de|Formate]]. (siehe auch [[rel-directory-de|rel-directory]])
* Vorraussetzungs-Test: [[requirements-testing-de|Überblick]] und [[requirements-testing-examples-de|Beispiele]]
* Widget: [[widget-examples-de|Beispiele]] und [[widget-brainstorming-de|Brainstorming]]
* [[wiki-formats-de|Wiki-Formate]]
* [[xmdp-brainstorming-de|XMDP-Brainstorming]] (siehe auch [[xmdp-faq-de|XMDP-FAQ]])
* Zitierung [[citation-de|Bestrebung]], [[citation-examples-de|Beispiele]], [[citation-formats-de|Formate]], [[citation-brainstorming-de|Brainstorming]] und [[citation-faq-de|FAQ]]
* Zuletzt geändert: [[last-modified-examples-de|Beispiele]], [[last-modified-formats-de|Formate]] und [[last-modified-brainstorming-de|Brainstorming]]

== Beispiele ==
* [[examples-de|Beispiele]]
* [[zen-garden-de|Zen-Garten]]

== Beispiele, Testfälle, Weitere Forschung ==

Der erste Ort, um nach Beispielen, Code und Testfällen zu suchen, ist in den Seiten jedes individuellen Mikroformats. Es gibt nur einige besondere Werkzeuge und Dienste, die mehr als ein Mikroformat verarbeiten müssen. Dieser Bereich ist für Texteditoren, Parser, Validierer, Testfälle und andere Informationen, die über mehrere Mikroformate hinweg relevant sind.

*[[parsing-microformats-de|Mikroformate parsen]]
*[[selected-test-cases-from-the-web-de|Ausgewählte Testfälle aus dem Web]]
*[http://hg.microformats.org/ Source-Code-Repository]
*[[vcard-implementations-de|vCard-Implementationen]], [[vcard-errata-de|vCard-Irrtümer]]
*[[icalendar-implementations-de|iCalendar-Implementationen]]
*[[faqs-for-rdf-de|FAQs für RDF]]
*[[why-are-content-standards-hard-de|Warum Inhaltsnormen schwierig sind]]

== Geteilte Arbeitsbereiche ==
* [[buttons-de|Buttons]] {{NewMarker}}
* [[demo-de|Demo]] - eine Seite mit Verweisen, um schnell zu demonstrieren, wie Mikroformate in der Praxis funktionieren.
* [[events-de|Ereignisse]] {{NewMarker}}
* [[to-do-de|Zu erledigen]]
* [[user-interface-de|Benutzerschnittstelle]]
* [[marked-for-deletion-de|Zum Löschen markiert]]

== Das Mikroformate-Wiki in anderen Sprachen ==

Sie können Mikroformate-Artikel in vielen weiteren Sprachen lesen:

* Sprachen mit über 50 Artikeln
** [[Main_Page-fr|Français (Französisch)]] {{NewMarker-fr}}
* Sprachen mit über 2 Artikeln
** [[Main_Page-ja|日本語 (Japanisch)]]
** [[Main_Page-es|Español (Spanisch)]]

==== Mikroformate-Übersetzungen an anderen Orten ====

Diese sind Seiten oder Websites mit Übersetzungen über Mikroformate, die sich außerhalb dieser Site befinden. Falls Sie an einer davon arbeiten, ziehen Sie es bitte in Betracht, die Haupt-Mikroformate-Website zu übersetzen!

* [http://mikroformate.pbwiki.com/ mikroformate.pbwiki.com (deutsch)] {{NewMarker}}

=== Fangen Sie ein Mikroformate-Wiki in einer anderen Sprache an ===

Sehen Sie die Sprache, die Sie möchten, nicht? Helfen Sie, das Mikroformate-Wiki in eine andere Sprache zu übersetzen!

Wir sind noch dabei, dies zu organisieren.

Bis auf weiteres: schauen Sie sich [http://en.wikipedia.org/wiki/Wikipedia:Multilingual_coordination Wikipedias Seite über multilinguale Koordination (englisch)] an, und [http://meta.wikimedia.org/wiki/How_to_start_a_new_Wikipedia Wie man eine neue Wikipedia startet (englisch)] für einige gute allgemeine Hinweise, Ratschläge und gemeinschaftliche Konventionen.

Vielleicht wollen Sie mit der Liste [[stable-pages|stabiler Seiten (englisch)]] anfangen; das sind Seiten, die relativ stabil sind und nur minimale/redaktionelle Änderungen haben. Das macht es deutlich einfacher, sie mit ihren englischen Originalen synchron zu halten, indem man das [[Special:Watchlist|My Watchlist (englisch)]]-Feature verwendet (um die Seiten, die Sie übersetzt haben, auf Veränderungen zu überwachen).

Seitenbenennung: verwenden Sie für die übersetzte Version einer Seite denselben Namen, und fügen Sie einfach den RFC 3066-Sprachidentifizierungscode mit Bindestrich an. Z.B. wird für die deutsche Version aus, [[Main_Page]] [[Main_Page-de]], und [[how-to-play]] wird zu [[how-to-play-de]].

==== Mehr Sprachen, die Leute gerne sehen würden ====

* Chinesisch: 微格式 (Mikroformate) (siehe [http://msittig.blogspot.com/2005/11/since-i-translated-schedule-of.html Übersetzungsquelle (englisch)])

Main Page-de

2006-07-13T12:08:22Z

Chucker: Initial German main page

__NOTOC__
= Mikroformate-Wiki =

'''Bitte lesen Sie [[how-to-play-de|wie man mitmacht]], bevor Sie etwas bearbeiten.'''

'''Bitte lesen Sie [[process-de|Vorgang]], bevor Sie neue Mikroformate vorschlagen.'''

== Einleitung ==

[[what-are-microformats-de|Was sind Mikroformate]]? Und [[what-can-you-do-with-microformats-de|was können Sie mit ihnen anfangen]]? Schauen Sie sich [http://microformats.org/about/ Über (englisch)] für einen Überblick an, und die [[introduction-de|Einführungs]]-Seite für weitere Informationen. Kürzliche [[press-de|Medienberichte]], [[presentations-de|Vorträge]], [[podcasts-de|Podcasts]] und [[screencasts-de|Screencasts]] sind ebenfalls gut, um weitere Hintergründe zu lesen, oder ihnen zuzuhören. Häufig gestellte Fragen werden im [[faq-de|FAQ]] beantwortet. Möchten Sie etwas vorschlagen oder beitragen? Helfen Sie mit Dingen, die es [[to-do-de|zu tun gibt]]. Möchten Sie persönlich Weiteres lernen? Schauen Sie nach [[events-de|Ereignissen rund um Mikroformate]].

Eine beliebte Definition aus unserer [http://microformats.org/discuss/ englischen Mailing-Liste] (siehe auch: [[mailing-lists-de|Mailing-Listen]]) ist "einfache Konventionen, um Semantik in HTML zu integrieren, was dezentralisierte Entwicklungen ermöglicht." Genauer gesagt, können Mikroformate wie folgt definiert werden:
:einfache Konventionen
:um semantisches Markup zu integrieren
::für ein spezifisches Problem-Umfeld
:in menschenlesbaren (X)HTML/XML-Dokumenten, Atom-/RSS-Feeds und "einfachem"-XML
::was bestehende Inhalts-Verwendungsmuster normalisiert
::indem man einfache, selbsterklärende Klassen-Namen verwendet
::häufig auf Basis bestehender, offener, kompatibler Normen
:um dezentralisierte Entwicklung zu ermöglichen
::und zwar von Ressourcen, Werkzeugen und Diensten

"Oder verwenden Sie Ihren Browser etwa nur, um zu Browsen? Das ist doch völlig aus dem 20. Jahrhundert." -- [http://diveintomark.org Mark Pilgrim]

== Spezifikationen ==
Offene Norm-Spezifikationen für [[microformats-de|Mikroformate]] (siehe auch: [[implementations-de|Implementierungen]])
* [[hcalendar-de|hCalendar]]
* [[hcard-de|hCard]]
* [[rel-license-de|rel-license]]
* [[rel-nofollow-de|rel-nofollow]]
* [[rel-tag-de|rel-tag]]
* [[vote-links-de|VoteLinks]]
* [http://gmpg.org/xfn/ XFN] (siehe auch: [[xfn-implementations-de]])
* [http://gmpg.org/xmdp/ XMDP]
* [[xoxo-de|XOXO]]

== Entwürfe ==
* [[adr-de|adr]]
* [[geo-de|geo]]
* [[hatom-de|hAtom]] {{NewMarker}}
* [[hresume-de|hResume]] {{NewMarker}}
* [[hreview-de|hReview]]
* [[rel-directory-de|rel-directory]]
* [[rel-enclosure-de|rel-enclosure]]
* [[rel-home-de|rel-home]]
* [[relpayment-research-de | rel-payment]]
* [[robots-exclusion-de|Robots-Ausschluss]]
* [[xfolk-de|xFolk]]

== Entwicklungsmuster ==

Entwicklungsmuster geben Mikroformat-Autoren einen Wortschatz, um ihre Ideen einheitlich mit dem auszudrücken, was bereits getan wurde. ''Falls es verlockt, es selbst auszuprobieren, ein Mikroformat zu schreiben, '''[[process-de|lesen Sie zunächst dies]]'''!''

* [[abbr-design-pattern-de|Abkürzungs-Entwicklungsmuster]]
* [[class-design-pattern-de|Klassen-Entwicklungsmuster]]
* [[datetime-design-pattern-de|Datum-/Uhrzeit-Entwicklungsmuster]]
* [[existing-classes-de|Klassennamen, die über alle Mikroformate hinweg definiert sind]]
* [[include-pattern-de|Einschlussmuster]] {{NewMarker}}
** [[include-pattern-feedback-de|Rückfragen zu Einschlussmustern]]
* [[rel-design-pattern-de|Beziehungs-Entwicklungsmuster]]

== Erkundende Diskussionen ==

Forschung und Analyse realer [[examples-de|Beispiele]] und bestehender Formate, und Brainstorming, um das jeweilige Mikroformat anzuregen.

* Ahnenforschung: [[genealogy-formats-de|Beispiele]]
* Anweisung: [[directions-examples-de|Beispiele]] {{NewMarker}}
* [[attention-de|Beachtung]]
* Blog-Beschreibung: [[blog-description-examples-de|Beispiele]]
* Blog-Infos: [[blog-info-examples-de|Beispiele]]
* Blog-Eintrag: [[blog-post-examples-de|Beispiele]], [[blog-post-formats-de|Formate]] und [[blog-post-brainstorming-de|Brainstorming]] (woraus der [[hatom-de|hAtom]]-Entwurf resultierte)
* Buch: [[book-examples-de|Beispiele]], [[book-formats-de|Formate]] und [[book-brainstorming-de|Brainstorming]]
* Chat: [[chat-examples-de|Beispiele]], [[chat-formats-de|Formate]], and [[chat-brainstorming-de|Brainstorming]]
* Formulare: [[forms-examples-de|Beispiele]]
* hash: [[hash-examples|examples]]
* hListing: [[hlisting-proposal-de|Vorschlag]] und [[hlisting-feedback-de|Rückmeldungen]] {{NewMarker}}
** Ebenfalls, Listung: [[listing-examples-de|Beispiele]], [[listing-formats-de|Formate]] und [[listing-brainstorming-de|Brainstorming]]
* Kommentar: [[comment-problem-de|Problem]], [[comment-examples-de|Beispiele]] und [[comments-formats-de|Formate]] (einiges muss aus [[comments-formats-de]] extrahiert werden)
* Kunstwerk: [[work-of-art-de|Überblick]], [[workofart-examples-de|Beispiele]], [[workofart-formats-de|Formate]] und [[workofart-brainstorming-de|Brainstorming]] {{NewMarker}}
* Lebenslauf [[resume-brainstorming-de|Brainstorming]] und [[resume-formats-de|Formate]]
* Medieninfos: [[media-info-examples-de|Beispiele]]
* Meeting-Minuten: [[meeting-minutes-examples-de|Beispiele]], [[meeting-minutes-formats-de|Formate]] und [[meeting-minutes-brainstorming-de|Brainstorming]]
* [[mfo-examples-de|MFO-Beispiele]]
* Musik: [[music-examples-de|Beispiele]]
* Ort: [[location-formats-de|Formate]]. (siehe auch [[adr-de|adr]] und [[geo-de|geo]])
* Photonotiz: [[photo-note-examples-de|Beispiele]]
* rel-product: [[rel-product-brainstorming-de|Brainstorming]]
* [[rest-examples-de|REST-Beispiele]]
* Rezension: [[review-examples-de|Beispiele]] und [[review-formats-de|Formate]] (woraus der [[hreview-de|hReview]]-Entwurf resultierte)
* Rezept: [[recipe-examples-de|Beispiele]]
* Show: [[show-brainstorming-de|Brainstorming]]
* Show-Liste: [[showroll-brainstorming-de|Brainstorming]]
* Suchergebnisse: [[search-results-example-de|Beispiel]]
* Tabelle: [[table-examples-de|Beispiele]]
* Tagspeak: [[tagspeak-examples-de|Beispiele]]
* Übermittlungs-Tabelle: [[transit-table-examples-de|Beispiele]]
* [[uid-de|UID]]
* Verteilte Unterhaltung: [[distributed-conversation-de|Überblick]], [[distributed-conversation-brainstorming-de|Brainstorming]], [[distributed-conversation-examples-de|Beispiele]] und [[distributed-conversation-formats-de|Formate]]
* Verzeichnis-Integration: [[directory-inclusion-examples-de|Beispiele]], [[directory-inclusion-formats-de|Formate]]. (siehe auch [[rel-directory-de|rel-directory]])
* Vorraussetzungs-Tests: [[requirements-testing-de|Überblick]] und [[requirements-testing-examples-de|Beispiele]]
* Widget: [[widget-examples|Beispiele]] und [[widget-brainstorming|Brainstorming]]
* [[wiki-formats-de|Wiki-Formate]]
* [[xmdp-brainstorming-de|XMDP-Brainstorming]] (siehe auch [[xmdp-faq-de|XMDP-FAQ]])
* Zitierung [[citation-de|Bestrebung]], [[citation-examples-de|Beispiele]], [[citation-formats-de|Formate]], [[citation-brainstorming-de|Brainstorming]] und [[citation-faq-de|FAQ]]
* Zuletzt geändert: [[last-modified-examples-de|Beispiele]], [[last-modified-formats-de|Formate]] und [[last-modified-brainstorming-de|Brainstorming]]

== Beispiele ==
* [[examples-de|Beispiele]]
* [[zen-garden-de|Zen-Garten]]

== Beispiele, Testfälle, Weitere Forschung ==

Der erste Ort, um nach Beispielen, Code und Testfällen zu suchen, ist in den Seiten jedes individuellen Mikroformats. Es gibt nur einige besondere Werkzeuge und Dienste, die mehr als ein Mikroformat verarbeiten müssen. Dieser Bereich ist für Texteditoren, Parser, Validierer, Testfälle und andere Informationen, die über mehrere Mikroformate hinweg relevant sind.

*[[parsing-microformats-de|Mikroformate parsen]]
*[[selected-test-cases-from-the-web-de|Ausgewählte Testfälle aus dem Web]]
*[http://hg.microformats.org/ Source-Code-Repository]
*[[vcard-implementations-de|vCard-Implementationen]], [[vcard-errata-de|vCard-Irrtümer]]
*[[icalendar-implementations-de|iCalendar-Implementationen]]
*[[faqs-for-rdf-de|FAQs für RDF]]
*[[why-are-content-standards-hard-de|Warum Inhaltsnormen schwierig sind]]

== Geteilte Arbeitsbereiche ==
* [[buttons-de|Buttons]] {{NewMarker}}
* [[demo-de|Demo]] - eine Seite mit Verweisen, um schnell zu demonstrieren, wie Mikroformate in der Praxis funktionieren.
* [[events-de|Ereignisse]] {{NewMarker}}
* [[to-do-de|Zu erledigen]]
* [[user-interface-de|Benutzerschnittstelle]]
* [[marked-for-deletion-de|Zum Löschen markiert]]

== Das Mikroformate-Wiki in anderen Sprachen ==

Sie können Mikroformate-Artikel in vielen weiteren Sprachen lesen:

* Sprachen mit über 50 Artikeln
** [[Main_Page-fr|Français (Französisch)]] {{NewMarker-fr}}
* Sprachen mit über 2 Artikeln
** [[Main_Page-ja|日本語 (Japanisch)]]
** [[Main_Page-es|Español (Spanisch)]]

==== Mikroformate-Übersetzungen an anderen Orten ====

Diese sind Seiten oder Websites mit Übersetzungen über Mikroformate, die sich außerhalb dieser Site befinden. Falls Sie an einer davon arbeiten, ziehen Sie es bitte in Betracht, die Haupt-Mikroformate-Website zu übersetzen!

* [http://mikroformate.pbwiki.com/ mikroformate.pbwiki.com (deutsch)] {{NewMarker}}

=== Fangen Sie ein Mikroformate-Wiki in einer anderen Sprache an ===

Sehen Sie die Sprache, die Sie möchten, nicht? Helfen Sie, das Mikroformate-Wiki in eine andere Sprache zu übersetzen!

Wir sind noch dabei, dies zu organisieren.

Bis auf weiteres: schauen Sie sich [http://en.wikipedia.org/wiki/Wikipedia:Multilingual_coordination Wikipedias Seite über multilinguale Koordination (englisch)] an, und [http://meta.wikimedia.org/wiki/How_to_start_a_new_Wikipedia Wie man eine neue Wikipedia startet (englisch)] für einige gute allgemeine Hinweise, Ratschläge und gemeinschaftliche Konventionen.

Vielleicht wollen Sie mit der Liste [[stable-pages|stabiler Seiten (englisch)]] anfangen; das sind Seiten, die relativ stabil sind und nur minimale/redaktionelle Änderungen haben. Das macht es deutlich einfacher, sie mit ihren englischen Originalen synchron zu halten, indem man das [[Special:Watchlist|My Watchlist (englisch)]]-Feature verwendet (um die Seiten, die Sie übersetzt haben, auf Veränderungen zu überwachen).

Seitenbenennung: verwenden Sie für die übersetzte Version einer Seite denselben Namen, und fügen Sie einfach den RFC 3066-Sprachidentifizierungscode mit Bindestrich an. Z.B. wird für die deutsche Version aus, [[Main_Page]] [[Main_Page-de]], und [[how-to-play]] wird zu [[how-to-play-de]].

==== Mehr Sprachen, die Leute gerne sehen würden ====

* Chinesisch: 微格式 (Mikroformate) (siehe [http://msittig.blogspot.com/2005/11/since-i-translated-schedule-of.html Übersetzungsquelle (englisch)])

Main Page

2006-07-13T12:03:31Z

Chucker: /* Exploratory discussions */ Typo fix

__NOTOC__
= Microformats Wiki =

'''Please read [[how-to-play]] before making any edits.'''

'''Please read [[process]] before proposing any new microformats.'''

== Introduction ==

[[what-are-microformats|What are microformats]]? And [[what-can-you-do-with-microformats|what can you do with them]]? See the [http://microformats.org/about/ about page] for an overview, and the [[introduction]] page for more info. Recent [[press]], [[presentations]], [[podcasts]], and [[screencasts]] are also a good place for some background reading/listening. Frequently asked questions are answered in the [[faq]]. Want something or want to contribute? Help with things [[to-do]]. Want to learn more in person? Check out microformats [[events]].

One popular definition from our [http://microformats.org/discuss/ mailing list] (see also: [[mailing-lists]]) is "simple conventions for embedding semantics in HTML to enable decentralized development." More precisely, microformats can be defined as:
:simple conventions
:for embedding semantic markup
::for a specific problem domain
:in human-readable (X)HTML/XML documents, Atom/RSS feeds, and "plain" XML
::that normalize existing content usage patterns
::using brief, descriptive class names
::often based on existing interoperable standards
:to enable decentralized development
::of resources, tools, and services

"Or do you just use your browser to browse? That's so 20th century." -- [http://diveintomark.org Mark Pilgrim]

== Specifications ==
[[microformats|Microformats]] open standards specifications (see also: [[implementations]])
* [[hcalendar|hCalendar]]
* [[hcard|hCard]]
* [[rel-license]]
* [[rel-nofollow]]
* [[rel-tag]]
* [[vote-links|VoteLinks]]
* [http://gmpg.org/xfn/ XFN] (see also: [[xfn-implementations]])
* [http://gmpg.org/xmdp/ XMDP]
* [[xoxo|XOXO]]

== Drafts ==
* [[adr|adr]]
* [[geo|geo]]
* [[hatom|hAtom]] {{NewMarker}}
* [[hresume|hResume]] {{NewMarker}}
* [[hreview|hReview]]
* [[rel-directory]]
* [[rel-enclosure]]
* [[rel-home]]
* [[relpayment-research | rel-payment]]
* [[robots-exclusion|Robots Exclusion]]
* [[xfolk|xFolk]]

== Design Patterns ==

Design patterns give microformat authors a vocabulary for expressing their ideas consistently with what has already been done. ''If you're tempted to try your hand at writing a microformat '''[[process|read this first]]'''!''

* [[abbr-design-pattern]]
* [[class-design-pattern]]
* [[datetime-design-pattern]]
* [[existing-classes|class names defined across all microformats]]
* [[include-pattern]] {{NewMarker}}
** [[include-pattern-feedback]]
* [[rel-design-pattern]]

== Exploratory discussions ==
Research and analysis of real-world [[examples]], existing formats, and brainstorming to motivate the microformat.
*[[attention]]
* blog description [[blog-description-examples|examples]]
* blog info [[blog-info-examples|examples]]
* blog post [[blog-post-examples|examples]], [[blog-post-formats|formats]], and [[blog-post-brainstorming|brainstorming]] (yielded the [[hatom|hAtom]] draft)
* book [[book-examples|examples]], [[book-formats|formats]], and [[book-brainstorming|brainstorming]]
* chat [[chat-examples|examples]], [[chat-formats|formats]], and [[chat-brainstorming|brainstorming]]
* citation [[citation|effort]], [[citation-examples|examples]], [[citation-formats|formats]], [[citation-brainstorming|brainstorming]], and [[citation-faq|FAQ]]
* comment [[comment-problem|problem]], [[comment-examples|examples]], and [[comments-formats|formats]] (Some stuff needs to be extracted from [[comments-formats]])
* directions [[directions-examples|examples]] {{NewMarker}}
* directory inclusion [[directory-inclusion-examples|examples]], [[directory-inclusion-formats|formats]]. (see also [[rel-directory]])
* distributed conversation [[distributed-conversation|overview]], [[distributed-conversation-brainstorming|brainstorming]], [[distributed-conversation-examples|examples]], and [[distributed-conversation-formats|formats]]
* forms [[forms-examples|examples]]
* genealogy [[genealogy-formats|examples]]
* hash [[hash-examples|examples]]
* last modified [[last-modified-examples|examples]], [[last-modified-formats|formats]], and [[last-modified-brainstorming|brainstorming]]
* hListing [[hlisting-proposal|proposal]], and [[hlisting-feedback|feedback]] {{NewMarker}}
** Also, listing [[listing-examples|examples]], [[listing-formats|formats]], and [[listing-brainstorming|brainstorming]]
* location [[location-formats|formats]]. (see also [[adr]] and [[geo]])
* media info [[media-info-examples|examples]]
* meeting minutes [[meeting-minutes-examples|examples]], [[meeting-minutes-formats|formats]], and [[meeting-minutes-brainstorming|brainstorming]]
* [[mfo-examples|MFO examples]]
* music [[music-examples|examples]]
* photo note [[photo-note-examples|examples]]
* recipe [[recipe-examples|examples]]
* rel-product [[rel-product-brainstorming|brainstorming]]
* requirements testing [[requirements-testing|overview]], and [[requirements-testing-examples|examples]]
* [[rest-examples|REST examples]]
* resume [[resume-brainstorming|brainstorming]], and [[resume-formats|formats]]
* review [[review-examples|examples]], and [[review-formats|formats]] (yielded the [[hreview|hReview]] draft)
* search results [[search-results-example|example]]
* show [[show-brainstorming|brainstorming]]
* showroll [[showroll-brainstorming|brainstorming]]
* table [[table-examples|examples]]
* tagspeak [[tagspeak-examples|examples]]
* transit table [[transit-table-examples|examples]]
* [[uid]]
* widget [[widget-examples|examples]], and [[widget-brainstorming|brainstorming]]
* [[wiki-formats|wiki formats]]
* work of art [[work-of-art|overview]], [[workofart-examples|examples]], [[workofart-formats|formats]], and [[workofart-brainstorming|brainstorming]] {{NewMarker}}
*[[xmdp-brainstorming|XMDP brainstorming]] (see also [[xmdp-faq]])

== Examples ==
* [[examples]]
* [[zen-garden]]

== Tools & Test Cases & Additional Research ==

The first place to look for examples, code, and test cases is in the pages for each individual microformat. There are only a few cross-cutting tools and services that need to process more than one microformat. This section is intended for editors, parsers, validators, test cases, and other information relevant across multiple microformats.

*[[parsing-microformats]]
*[[selected-test-cases-from-the-web]]
*[http://hg.microformats.org/ Source code repository]
*[[vcard-implementations]], [[vcard-errata]]
*[[icalendar-implementations]]
*[[faqs-for-rdf]]
*[[why-are-content-standards-hard]]

== shared work areas ==
* [[buttons]] {{NewMarker}}
* [[demo]] - a page with links for quickly demonstrating microformats working in practice.
* [[events]] {{NewMarker}}
* [[to-do]]
* [[user-interface]]
* [[marked-for-deletion]]

== microformats wiki in other languages ==

You may read and edit microformats articles in many other languages:

* languages with over 50 articles
** [[Main_Page-fr|Français (French)]] {{NewMarker-fr}}
* languages with over 2 articles
** [[Main_Page-ja|日本語 (Japanese)]]
** [[Main_Page-es|Español (Spanish)]]

==== microformats translations elsewhere ====
These are offsite pages/sites with translations about microformats. If you are working on one of these, please consider translating the main microformats website!
* [http://mikroformate.pbwiki.com/ Deutsch (German) mikroformate.pbwiki.com] {{NewMarker}}

=== Start a microformats wiki in another language ===

Don't see the language you want? Help translate the microformats wiki into another language!

We're still figuring this out.

For now, see the [http://en.wikipedia.org/wiki/Wikipedia:Multilingual_coordination Wikipedia page on Multilingual coordination], and [http://meta.wikimedia.org/wiki/How_to_start_a_new_Wikipedia How to start a new Wikipedia] for some good general tips, advice, and community conventions.

You may want to start with the list of [[stable-pages]], which are pages that are relatively stable, and have only minimal/editorial changes, which makes them much easier to keep in sync with the English versions, by using the [[Special:Watchlist|my watchlist]] feature (use it to watch the pages you've translated for changes).

Page naming: for the translated version of a page, use the same name for the page, and simply add the RFC 3066 language identifier code as a dash suffix. E.g. for the French version, [[Main_Page]] becomes [[Main_Page-fr]], and [[how-to-play]] becomes [[how-to-play-fr]].

==== more languages folks want to see ====

* Chinese: 微格式 (Microformats) (see [http://msittig.blogspot.com/2005/11/since-i-translated-schedule-of.html source of translation])

hcard-examples-rfc2426

2006-06-29T18:33:40Z

Chucker: msnim: reference

<h1>hCard examples</h1>

Example [[hcard|hCards]].

== Authors ==
* [http://tantek.com/log Tantek Çelik]
* Brian Suda

== Instructive Examples ==

=== Authors of Pages and Posts ===
[http://www.w3.org/TR/html401/struct/global.html#h-7.5.6 Per the HTML4.01 specification], authors should be using the <code><address></code> element to indicate the "contact information for a document or a major part of a document." E.g.

<pre><nowiki>
<address>
<a href="http://tantek.com/">Tantek Çelik</a>
</address>
</nowiki></pre>

By adding [[hcard|hCard]] to such existing semantic XHTML, you can explicitly indicate the name of the person, their URL, etc.:

<pre><nowiki>
<address class="vcard">
<a class="fn url" href="http://tantek.com/">Tantek Çelik</a>
</address>
</nowiki></pre>

This could be displayed as:

[http://tantek.com/ Tantek Çelik]

This works not only for whole pages, but also for "major part[s]" of pages, e.g. blog posts.

See the [http://microformats.org/blog/ microformats.org blog] (view the source) for a live example. The author of every blog post on the microformats.org blog is marked up as an <code><address class="vcard"></code> element like the example shown above.

=== References to People and Organizations ===

A common pattern in blog posts is to link mentions of people's names to their blogs, and/or organizations to their home pages. E.g.:

<pre><nowiki>
<cite><a href="http://meyerweb.com/">Eric Meyer</a></cite> wrote a post
(<cite><a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/">Tax Relief</a></cite>)
about an unintentionally humorous letter he received from the
<a href="http://irs.gov/">Internal Revenue Service</a>.
</nowiki></pre>

By adding hCard to such markup, you can explicitly indicate both the person and the organization by name and URL:

<pre><nowiki>
<cite class="vcard"><a class="fn url" href="http://meyerweb.com/">Eric Meyer</a></cite> wrote a post
(<cite><a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/">Tax Relief</a></cite>)
about an unintentionally humorous letter he received from the
<span class="vcard"><a class="fn org url" href="http://irs.gov/">Internal Revenue Service</a>.
</nowiki></pre>

Note the class names "fn org url" on the hyperlink surrounding the IRS. Using the same value (or element for that matter) for "fn" and "org" indicates that the hCard describes an organization rather than a person.

This could be displayed as:

''[http://meyerweb.com/ Eric Meyer]'' wrote a post (''[http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/ Tax Relief]'') about an unintentionally humorous letter
he received from the [http://irs.gov/ Internal Revenue Service].

=== hCard and XFN ===
==== References to People in Blog Posts ====

In the above example, one person (the blogger) is referring to another person (Eric Meyer). In addition to using hCard to explicitly mark up the reference as a person, the blogger can use [http://gmpg.org/xfn/ XFN] (the XHTML Friends Network) to indicate their relationship to Eric Meyer, e.g.:

<pre><nowiki>
<cite class="vcard"><a class="fn url" rel="friend colleague met" href="http://meyerweb.com/">Eric Meyer</a></cite> wrote a post
(<cite><a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/">Tax Relief</a></cite>)
about an unintentionally humorous letter he received from the
<span class="vcard"><a class="fn org url" href="http://irs.gov/">Internal Revenue Service</a></span>.
</nowiki></pre>

It would be displayed the same as the previous example.

==== References to People in Blogrolls ====

Many bloggers are using XFN (often using an easy user interface like that built into [http://wordpress.org WordPress]) to explicitly indicate their relationships to the people in their blogrolls:

<pre><nowiki>
<ul>
<li><a href="http://meyerweb.com" rel="friend colleague met">Eric Meyer</a></li>
<li><a href="http://photomatt.net" rel="friend colleague met">Matt Mullenweg</a></li>
</ul>
</nowiki></pre>

By adding hCard markup to an XFN Friendly blogroll, you can explicitly indicate the name and URL of the person in addition to their relationship:

<pre><nowiki>
<ul>
<li class="vcard"><a class="fn url" href="http://meyerweb.com" rel="friend colleague met">Eric Meyer</a></li>
<li class="vcard"><a class="fn url" href="http://photomatt.net" rel="friend colleague met">Matt Mullenweg</a></li>
</ul>
</nowiki></pre>

This could be displayed as:
* [http://meyerweb.com Eric Meyer]
* [http://photomatt.net Matt Mullenweg]

For more information on XFN, see the [http://gmpg.org/xfn/ XFN home page], [http://gmpg.org/xfn/join joining XFN], and [http://gmpg.org/xfn/background background on XFN].

=== New Types of Contact Info ===

Since vCard was designed, there have been numerous other services that provide individuals with addresses or other means of contact, e.g. instant messaging, voip, etc.

Does this mean that vCard (and hence hCard) must be extended to represent these?

Thanks to the flexibility of the URL property, the answer is no, no extensions are necessary. Instead, we use the proper URL for the service which identifies the service (protocol, machine, and/or path), and place the individual's address inside that.

==== AOL Instant Messenger (AIM) ====

AOL Instant Messenger (AIM) ids can be represented using the <code>aim:</code> protocol. Many who publish their AIM ids do so with clickable URLs e.g.:

<pre><nowiki>
<a href="aim:goim?screenname=ShoppingBuddy">IM with the AIM ShoppingBuddy</a>
</nowiki></pre>

Thus for hCard, we will adopt this existing content publisher behavior, and simply capture it as another URL for the hCard:

<pre><nowiki>
<a class="url" href="aim:goim?screenname=ShoppingBuddy">IM with the AIM ShoppingBuddy</a>
</nowiki></pre>

==== Yahoo Messenger ====

Similarly, Yahoo Instant Messenger (YIM) ids can be represented using the <code>ymsgr:</code> protocol. And similarly many publish their YIM ids as clickable URLs e.g.:

<pre><nowiki>
<a href="ymsgr:sendIM?SomeYahooFriend">IM with SomeYahooFriend</a>
</nowiki></pre>

Again, for hCard, we will adopt this existing content publisher behavior, and simply capture it as another URL for the hCard:

<pre><nowiki>
<a class="url" href="ymsgr:sendIM?SomeYahooFriend">IM with SomeYahooFriend</a>
</nowiki></pre>

==== MSN Messenger ====

<strike>Unfortunately, AFAIK, there is no hacked up defacto protocol for opening an MSN IM session with an MSN userid (which themselves are just email addresses). Thus we must simply resort to marking them up as email addresses, and expect that consumers may use some heuristic, such as "hotmail.com email addresses are also MSN IM ids". -Tantek</strike>

MSN Messenger (MSNIM) ids can be represented using the <code>msnim:</code> protocol. And similarly many publish their MSNIM ids as clickable URLs e.g.:

<pre><nowiki>
<a href="msnim:chat?contact=joebob@hotmail.com">IM with joebob@hotmail.com</a>
</nowiki></pre>

For hCard, we will adopt this existing content publisher behavior, and simply capture it as another URL for the hCard:

<pre><nowiki>
<a class="url" href="msnim:chat?contact=joebob@hotmail.com">IM with joebob@hotmail.com</a>
</nowiki></pre>

Updated 14 May 2006 - [http://www.wackomenace.co.uk/ Ruben]

Ruben, I tried this, and "msnim:" is an unrecognized protocol on MacOSX.4 (this is with the latest MSN Messenger for Mac installed and running and logged int). Could you provide links to documentation about "msnim:" and links to actual pages that publish their MSNIM ids this way? I don't know of any - [http://tantek.com/ Tantek]

: Tantek, Wikipedia's [http://en.wikipedia.org/wiki/History_of_Windows_Live_Messenger History of Windows Live Messenger] states that MSN Messenger 7.5 for Windows, among other things, introduced: "the msnim protocol handler, allowing Web sites to provide links which automatically add a contact or start conversations (for example clicking on link msnim:chat?contact=login@passport.net will start chat conversation with user login@passport.net).". The Mac version is notoriously lagging behind, sadly. --''[[User:Chucker|chucker]] 11:33, 29 Jun 2006 (PDT)''

==== Site profiles ====
Bloggers often indicate their identity on content hosting services using the URL to their home page, feed or profile on those services. By labeling them as URL properties, these additional facets of identity can be publish in an hCard as well.

* [http://del.icio.us delicious]:
** <code><a class="url" href="http://del.icio.us/rbach">Robert Bachmann's links</a></code>
* [http://flickr.com Flickr]:
** <code><a class="url" href="http://flickr.com/photos/tantek/">See my photos</a></code>
** <code><a class="url" href="http://flickr.com/people/tantek/">Flickr profile</a></code>
* [http://technorati.com/ Technorati]:
** <code><a class="url" href="http://technorati.com/profile/tantek/">Technorati profile</a></code>
* Add more here...
** ....

=== Organizations and Departments ===

Departments are marked up using the "organization-unit" class name inside the "org" element, with the "organization-name" specifically marked up to distinguish it from the department:

<pre><nowiki>
<div class="vcard">
<div class="org fn">
<div class="organization-name">Sprinkler Fitters U.A. Local 483</div>
<div class="organization-unit">Apprenticeship Training Center</div>
</div>
</div>
</nowiki></pre>

The department may also be part of the address, in which case, you may want to explicitly mark it up as the "extended-address" in addition to the "organization-unit".

<pre><nowiki>
<div class="vcard">
<div class="adr">
<div class="org fn">
<div class="organization-name">Sprinkler Fitters U.A. Local 483</div>
<div class="organization-unit extended-address">Apprenticeship Training Center</div>
</div>
<div class="street-address">2531 Barrington Court</div>
<span class="locality">Hayward</span>,
<abbr title="California" class="region">CA</abbr>
<span class="postal-code">94545</span>
</div>
</div>
</nowiki></pre>

Note that by nesting the org inside the address we avoided having to duplicate the department name.

== RFC 2426 examples in hCard ==

These are 1:1 hCard examples for each example in [http://www.ietf.org/rfc/rfc2426.txt RFC 2426].

Mark Pilgrim has made these hCard examples available as separate files:
* http://diveintomark.org/projects/greasemonkey/hcard/tests/

=== 2.4.2 VCARD ===

<pre><nowiki>
AGENT:BEGIN:VCARD\nFN:Joe Friday\nTEL:+1-919-555-7878\n
TITLE:Area Administrator\, Assistant\n EMAIL\;TYPE=INTERNET:\n
jfriday@host.com\nEND:VCARD\n
</nowiki></pre>

This vCard fragment has one property whose value is another vCard, and could be represented as an hCard fragment with an embedded hCard, literally (with the unnecessary type=internet default omitted, and the implied n optimization):

<pre><nowiki>
<div class="agent vcard">
<a class="email fn" href="mailto:jfriday@host.com">Joe Friday</a>
<div class="tel">+1-919-555-7878</div>
<div class="title">Area Administrator, Assistant</div>
</div>
</nowiki></pre>

this hCard could be displayed as:

[mailto:jfriday@host.com Joe Friday]<br />
+1-919-555-7878<br />
Area Administrator, Assistant

=== 3.1.1 FN Type Definition ===

<pre><nowiki>
FN:Mr. John Q. Public\, Esq.
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<span class="fn">Mr. John Q. Public, Esq.</span>
</nowiki></pre>

this hCard fragment could be displayed as:

Mr. John Q. Public, Esq.

=== 3.1.2 N Type Definition ===

==== Example 1 ====

<pre><nowiki>
N:Public;John;Quinlan;Mr.;Esq.
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<span class="n">
<span class="honorific-prefix">Mr.</span>
<span class="given-name">John</span>
<span class="additional-name">Quinlan</span>
<span class="family-name">Public</span>,
<span class="honorific-suffix">Esq.</span>
</span>
</nowiki></pre>

this hCard fragment could be displayed as:

Mr. John Quinlan Public, Esq.

==== Example 2 ====

<pre><nowiki>
N:Stevenson;John;Philip,Paul;Dr.;Jr.,M.D.,A.C.P.
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<span class="n">
<span class="honorific-prefix">Dr.</span>
<span class="given-name">John</span>
<span class="additional-name">Philip</span>
<span class="additional-name">Paul</span>
<span class="family-name">Stevenson</span>,
<span class="honorific-suffix">Jr.</span>,
<span class="honorific-suffix">M.D.</span>,
<span class="honorific-suffix">A.C.P.</span>
</span>
</nowiki></pre>

this hCard fragment would be displayed as:

Dr. John Philip Paul Stevenson, Jr., M.D., A.C.P.

=== 3.1.3 NICKNAME Type Definition ===

==== Example 1 ====

<pre><nowiki>
NICKNAME:Robbie
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<span class="nickname">Robbie</span>
</nowiki></pre>

this hCard fragment could be displayed as:

Robbie

==== Example 2 ====

<pre><nowiki>
NICKNAME:Jim,Jimmie
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<span class="nickname">Jim</span>,
<span class="nickname">Jimmie</span>
</nowiki></pre>

this hCard fragment would be displayed as:

Jim, Jimmie

=== 3.1.4 PHOTO Type Definition ===

==== Example 1 ====
<pre><nowiki>
PHOTO;VALUE=uri:http://www.abc.com/pub/photos/jqpublic.gif
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<img class="photo" src="http://www.abc.com/pub/photos/jqpublic.gif" alt="" />
</nowiki></pre>

==== Example 2 ====
<pre><nowiki>
PHOTO;ENCODING=b;TYPE=JPEG:MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
<...remainder of "B" encoded binary data...>
</nowiki></pre>

this vCard fragment as an hCard fragment (line breaks inserted into src value for readability):

<pre><nowiki>
<img class="photo" src="data:image/jpeg;base64,MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
...remainder of B encoded binary data..." alt="" />
</nowiki></pre>

=== 3.1.5 BDAY Type Definition ===

==== Example 1 ====

<pre><nowiki>
BDAY:1996-04-15
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<abbr class="bday" title="1996-04-15">April 15, 1996</abbr>
</nowiki></pre>

this hCard fragment could be displayed as:

<abbr class="bday" title="1996-04-15">April 15, 1996</abbr>

==== Example 2 ====

<pre><nowiki>
BDAY:1953-10-15T23:10:00Z
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<abbr class="bday" title="1953-10-15T23:10:00Z">Oct 15, 1953</abbr>
</nowiki></pre>

this hCard fragment could be displayed as:

<abbr class="bday" title="1953-10-15T23:10:00Z">Oct 15, 1953</abbr>

==== Example 3 ====

<pre><nowiki>
BDAY:1987-09-27T08:30:00-06:00
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<abbr class="bday" title="1987-09-27T08:30:00-06:00">Sept 9, 1987</abbr>
</nowiki></pre>

this hCard fragment could be displayed as:

<abbr class="bday" title="1987-09-27T08:30:00-06:00">Sept 9, 1987</abbr>

=== 3.2.1 ADR Type Definition ===

<pre><nowiki>
ADR;TYPE=dom,home,postal,parcel:;;123 Main
Street;Any Town;CA;91921-1234
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<div class="adr">
<abbr class="type" title="dom">US</abbr>
<span class="type">home</span> address, for
<abbr class="type" title="postal">mail</abbr> and
<abbr class="type" title="parcel">shipments</abbr>:
<div class="street-address">123 Main Street</div>
<span class="locality">Any Town</span>, <span class="region">CA</span>,
<span class="postal-code">91921-1234</span>
</div>
</nowiki></pre>

this hCard fragment could be displayed as:

<div class="adr">
<abbr class="type" title="dom">US</abbr>
<span class="type">home</span> address, for
<abbr class="type" title="postal">mail</abbr> and
<abbr class="type" title="parcel">shipments</abbr>:
<div class="street-address">123 Main Street</div>
<span class="locality">Any Town</span>, <span class="region">CA</span>,
<span class="postal-code">91921-1234</span>
</div>

=== 3.2.2 LABEL Type Definition ===

<pre><nowiki>
LABEL;TYPE=dom,home,postal,parcel:Mr.John Q. Public\, Esq.\n
Mail Drop: TNE QB\n123 Main Street\nAny Town\, CA 91921-1234
\nU.S.A.
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
Please use the following address label for
<div class="label">
<abbr class="type" title="dom">local delivery</abbr>
<abbr class="type" title="home">to my home</abbr>
<abbr class="type" title="postal">of mail</abbr>
<abbr class="type" title="parcel">and packages:</abbr>
<pre>
Mr.John Q. Public, Esq.
Mail Drop: TNE QB
123 Main Street
Any Town, CA 91921-1234
U.S.A.
</pre>
</div>
</nowiki></pre>

'''Note:''' the above hCard fragment uses a <pre> tag inside a property value to capture/represent explicit carriage returns ("\n" characters) from the vCard fragment.

this hCard fragment could be displayed as:

Please use the following address label for
<abbr class="type" title="dom">local delivery</abbr>
<abbr class="type" title="home">to my home</abbr>
<abbr class="type" title="postal">of mail</abbr>
<abbr class="type" title="parcel">and packages:</abbr>
<pre>
Mr.John Q. Public, Esq.
Mail Drop: TNE QB
123 Main Street
Any Town, CA 91921-1234
U.S.A.
</pre>

=== 3.3.1 TEL Type Definition ===

<pre><nowiki>
TEL;TYPE=work,voice,pref,msg:+1-213-555-1234
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<span class="tel">
<abbr class="type" title="pref">my</abbr>
<span class="type">work</span>
<abbr class="type" title="voice">phone</abbr>, with
<abbr class="type" title="msg">voicemail</abbr>:
<span class="value">+1-213-555-1234</span>
</span>
</nowiki></pre>

this hCard fragment could be displayed as:

my work phone, with voicemail: +1-213-555-1234

=== 3.3.2 EMAIL Type Definition ===

==== Example 1 ====

<pre><nowiki>
EMAIL;TYPE=internet:jqpublic@xyz.dom1.com
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<a class="email" href="mailto:jqpublic@xyz.dom1.com">email jqpublic</a>
</nowiki></pre>

this hCard fragment could be displayed as:

[mailto:jqpublic@xyz.dom1.com email jqpublic]

==== Example 2 ====

<pre><nowiki>
EMAIL;TYPE=internet:jdoe@isp.net
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<a class="email" href="mailto:jdoe@isp.net">email jdoe</a>
</nowiki></pre>

this hCard fragment could be displayed as:

[mailto:jdoe@isp.net email jdoe]

==== Example 3 ====

<pre><nowiki>
EMAIL;TYPE=internet,pref:jane_doe@abc.com
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<a class="email" href="mailto:jane_doe@abc.com">
<abbr class="type" title="pref">preferred</abbr>
email for jane_doe
</a>
</nowiki></pre>

this hCard fragment could be displayed as:

[mailto:jane_doe@abc.com preferred email for jane_doe]

=== 3.3.3 MAILER Type Definition ===

<pre><nowiki>
MAILER:PigeonMail 2.1
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
Jane Doe uses <span class="mailer">PigeonMail 2.1</span> for email.
</nowiki></pre>

this hCard fragment could be displayed as:

Jane Doe uses <span class="mailer">PigeonMail 2.1</span> for email.

=== 3.4.1 TZ Type Definition ===

==== Example 1 ====

<pre><nowiki>
TZ:-05:00
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<span class="tz">-05:00</span>
</nowiki></pre>

this hCard fragment could be displayed as:

-05:00
==== Example 2 ====

<pre><nowiki>
TZ;VALUE=text:-05:00; EST; Raleigh/North America
;This example has a single value, not a structure text value.
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<abbr class="tz"
title="-05:00; EST; Raleigh/North America;This example has a single value, not a structure text value.">
EST
</abbr>
</nowiki></pre>

this hCard fragment could be displayed as:

<abbr class="tz" title="-05:00; EST; Raleigh/North America;This example has a single value, not a structure text value.">EST</abbr>

=== 3.4.2 GEO Type Definition ===

<pre><nowiki>
GEO:37.386013;-122.082932
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<span class="geo">
<span class="latitude">37.386013</span>,
<span class="longitude">-122.082932</span>
</span>
</nowiki></pre>

this hCard fragment could be displayed as:

37.386013, -122.082932

=== 3.5.1 TITLE Type Definition ===

<pre><nowiki>
TITLE:Director\, Research and Development
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<span class="title">Director, Research and Development</span>
</nowiki></pre>

this hCard fragment could be displayed as:

Director, Research and Development

=== 3.5.2 ROLE Type Definition ===

<pre><nowiki>
ROLE:Programmer
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<span class="role">Programmer</span>
</nowiki></pre>

this hCard fragment could be displayed as:

Programmer

=== 3.5.3 LOGO Type Definition ===

==== Example 1 ====

<pre><nowiki>
LOGO;VALUE=uri:http://www.abc.com/pub/logos/abccorp.jpg
</nowiki></pre>

this vCard fragment as an hCard fragment

<pre><nowiki>
<img class="logo" src="http://www.abc.com/pub/logos/abccorp.jpg" alt="my logo" />
</nowiki></pre>

this hCard fragment could be displayed as (note: I used a real URL for the image):

http://microformats.org/img/mf-lg-ora.gif

==== Example 2 ====

<pre><nowiki>
LOGO;ENCODING=b;TYPE=JPEG:MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
<...the remainder of "B" encoded binary data...>
</nowiki></pre>

this vCard fragment as an hCard fragment

<pre><nowiki>
<img class="logo" src="data:image/jpeg;base64,MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
...remainder of B encoded binary data..." alt="" />
</nowiki></pre>

no display equivalent given, since data: URL from original example is incomplete.

=== 3.5.4 AGENT Type Definition ===

==== Example 1 ====

<pre><nowiki>
AGENT;VALUE=uri:
CID:JQPUBLIC.part3.960129T083020.xyzMail@host3.com
</nowiki></pre>

this vCard fragment as an hCard fragment

<pre><nowiki>
<a class="agent" href="CID:JQPUBLIC.part3.960129T083020.xyzMail@host3.com">JQPUBLIC</a>
</nowiki></pre>

this hCard fragment could be displayed as:

JQPUBLIC

==== Example 2 ====

<pre><nowiki>
AGENT:BEGIN:VCARD\nFN:Susan Thomas\nTEL:+1-919-555-
1234\nEMAIL\;INTERNET:sthomas@host.com\nEND:VCARD\n
</nowiki></pre>

this vCard fragment as an hCard fragment

<pre><nowiki>
<span class="agent vcard">
<a class="email fn n" href="mailto:sthomas@host.com">Susan Thomas</a>,
<span class="tel">+1-919-555-1234</span>
</span>
</nowiki></pre>

this hCard fragment could be displayed as:

[mailto:sthomas@host.com Susan Thomas], +1-919-555-1234

Note: the vCard in the AGENT property vCard fragment is actually invalid since it lacks an "N" property. However, the hCard version *is* valid, since I added the "n" class name to the example.

=== 3.5.5 ORG Type Definition ===

<pre><nowiki>
ORG:ABC\, Inc.;North American Division;Marketing
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<span class="org">
<span class="organization-name">ABC, Inc.</span>,
<span class="organization-unit">North American Division</span>,
<span class="organization-unit">Marketing</span>,
</span>
</nowiki></pre>

this hCard fragment could be displayed as:

ABC, Inc., North American Division, Marketing

=== 3.6.1 CATEGORIES Type Definition ===

==== Example 1 ====

<pre><nowiki>
CATEGORIES:TRAVEL AGENT
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<span class="category">TRAVEL AGENT</span>
</nowiki></pre>

this hCard fragment could be displayed as:

TRAVEL AGENT

==== Example 2 ====

<pre><nowiki>
CATEGORIES:INTERNET,IETF,INDUSTRY,INFORMATION TECHNOLOGY
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<span class="category">INTERNET</span>,
<span class="category">IETF</span>,
<span class="category">INDUSTRY</span>,
<span class="category">INFORMATION TECHNOLOGY</span>
</nowiki></pre>

this hCard fragment would be displayed as:

INTERNET, IETF, INDUSTRY, INFORMATION TECHNOLOGY

=== 3.6.2 NOTE Type Definition ===

<pre><nowiki>
NOTE:This fax number is operational 0800 to 1715
EST\, Mon-Fri.
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<p class="note">This fax number is operational 0800 to 1715 EST, Mon-Fri.</p>
</nowiki></pre>

this hCard fragment could be displayed as:

This fax number is operational 0800 to 1715 EST, Mon-Fri.

=== 3.6.3 PRODID Type Definition ===

<pre><nowiki>
PRODID:-//ONLINE DIRECTORY//NONSGML Version 1//EN
</nowiki></pre>

Note, this vCard property actually doesn't make sense as a hCard property, since it really should be filled in by whatever code transforms the hCard into a vCard, e.g. Brian Suda's X2V.

=== 3.6.4 REV Type Definition ===

==== Example 1 ====

<pre><nowiki>
REV:1995-10-31T22:27:10Z
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<abbr class="rev" title="1995-10-31T22:27:10Z">Updated: 10/31 10:27p</abbr>
</nowiki></pre>

this hCard fragment could be displayed as:

<abbr class="rev" title="1995-10-31T22:27:10Z">Updated: 10/31 10:27p</abbr>

==== Example 2 ====

<pre><nowiki>
REV:1997-11-15
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<abbr class="rev" title="1997-11-15">Updated: November 15</abbr>
</nowiki></pre>

this hCard fragment could be displayed as:

<abbr class="rev" title="1997-11-15">Updated: November 15</abbr>

=== 3.6.5 SORT-STRING Type Definition ===

==== Example 1 ====

<pre><nowiki>
FN:Rene van der Harten
N:van der Harten;Rene;J.;Sir;R.D.O.N.
SORT-STRING:Harten
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<span class="n"
<span class="honorific-prefix">Sir</span>
<span class="fn">
<span class="given-name">Rene</span>
<span class="family-name">
van der <span class="sort-string">Harten</span>
</span>
</span>
(<span class="additional-name">J.</span>),
<span class="honorific-suffix">R.D.O.N.</span>
</span>
</nowiki></pre>

Note: The string "Harten" was NOT repeated in the hCard, even though it WAS repeated in the vCard (3 times! In N, FN, and SORT-STRING). The "SORT-STRING" property provides another good demonstration of how hCard enables better adherence to the [http://microformats.org/wiki/hcard-example1-steps#hCard_example_iteration_1:_DRY DRY principle] than vCard.

this hCard fragment could be displayed as:

Sir Rene van der Harten (J.), R.D.O.N.

==== Example 2 ====

<pre><nowiki>
FN:Robert Pau Shou Chang
N:Pau;Shou Chang;Robert
SORT-STRING:Pau
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<span class="fn n">
<span class="additional-name">Robert</span>
<span class="family-name sort-string">Pau</span>
<span class="given-name">Shou Chang</span>
</span>
</nowiki></pre>

Note: Not only was the string "Pau" was NOT repeated in the hCard (better [http://microformats.org/wiki/hcard-example1-steps#hCard_example_iteration_1:_DRY DRY principle] adherence again), even though it WAS repeated in the vCard, but in this case since the "family-name" and "sort-string" are the same, we were able to use [http://microformats.org/wiki/hcard-example1-steps#hCard_example_iteration_2:_element_conservation element conservation] and use only one element for both properties.

this hCard fragment could be displayed as:

Robert Pau Shou Chang

==== Example 3 ====

<pre><nowiki>
FN:Osamu Koura
N:Koura;Osamu
SORT-STRING:Koura
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<span class="fn">
Osamu <span class="sort-string">Koura</span>
</span>
</nowiki></pre>

Note: This example, in addition to illustrating better support for the [http://microformats.org/wiki/hcard-example1-steps#hCard_example_iteration_1:_DRY DRY principle], also makes use of the [http://microformats.org/wiki/hcard#Implied_.22N.22_Optimization Implied "N" Optimization].

this hCard fragment could be displayed as:

Osamu Koura

==== Example 4 ====

<pre><nowiki>
FN:Oscar del Pozo
N:del Pozo Triscon;Oscar
SORT-STRING:Pozo
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<span class="n">
<span class="fn">
<span class="given-name">Oscar</span>
del <span class="sort-string">Pozo</span>
</span>
<span class="family-name" style="display:none">
del Pozo Triscon
</span>
</span>
</nowiki></pre>

Note: This example unfortunately could not completely adhere to the DRY principle due to the "FN" using a *substring* of the family-name, and in addition thus had to hide the extra "family-name" string value using CSS display:none, which in general should be avoided. Suggestion welcome for improvements on this hCard fragement.

this hCard fragment could be displayed as:

Oscar del Pozo

==== Example 5 ====

<pre><nowiki>
FN:Christine d'Aboville
N:d'Aboville;Christine
SORT-STRING:Aboville
</nowiki></pre>

this vCard fragment as an hCard fragment:

<pre><nowiki>
<span class="fn">
Christine d'<span class="sort-string">Aboville</span>
</span>
</nowiki></pre>

Note: This example re-demonstrates the same hCard advantages/efficiencies demonstrated in [http://microformats.org/wiki/hcard-examples#Example_3_3 example 3] above.

this hCard fragment could be displayed as:

Christine d'Aboville

=== 3.6.6 SOUND Type Definition ===

==== Example 1 ====

<pre><nowiki>
SOUND;TYPE=BASIC;VALUE=uri:CID:JOHNQPUBLIC.part8.
19960229T080000.xyzMail@host1.com
</nowiki></pre>

this vCard fragment as an hCard fragment

<pre><nowiki>
<object class="sound" type="audio/basic"
data="CID:JOHNQPUBLIC.part8.19960229T080000.xyzMail@host1.com">
pronounciation of "JOHN Q PUBLIC"
</object>
</nowiki></pre>

this hCard fragment would probably be displayed as

pronounciation of "JOHN Q PUBLIC"

unless your browser supports the MIME type "audio/basic" (defined in [http://www.rfc-editor.org/rfc/rfc2046.txt RFC2046 section 4.3]) and has some way of retrieving "CID:" urls.

==== Example 2 ====
<pre><nowiki>
SOUND;TYPE=BASIC;ENCODING=b:MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
<...the remainder of "B" encoded binary data...>
</nowiki></pre>

this vCard fragment as an hCard fragment

<pre><nowiki>
<object class="sound"
data="data:audio/basic;base64,MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
...the remainder of "B" encoded binary data...">
pronounciation
</object>
</nowiki></pre>

no display equivalent given, since data: URL from original example is incomplete.

=== 3.6.7 UID Type Definition ===

<pre><nowiki>
UID:19950401-080045-40000F192713-0052
</nowiki></pre>

this vCard fragment as an hCard fragment

<pre><nowiki>
Unique id:
<span class="uid">19950401-080045-40000F192713-0052</span>
</nowiki></pre>

this hCard fragment could be displayed as

Unique id:19950401-080045-40000F192713-0052

Note: in practice I don't think I've seen globally unique IDs for "contact info" records published on the web, but perhaps I am not considering enough examples.

=== 3.6.8 URL Type Definition ===

<pre><nowiki>
URL:http://www.swbyps.restaurant.french/~chezchic.html
</nowiki></pre>

this vCard fragment as an hCard fragment

<pre><nowiki>
<a class="url" href="http://www.swbyps.restaurant.french/~chezchic.html">Chez Chic</a>
</nowiki></pre>

this hCard fragment could be displayed as

[http://www.swbyps.restaurant.french/~chezchic.html Chez Chic]

=== 3.7.1 CLASS Type Definition ===

==== Example 1 ====

<pre><nowiki>
CLASS:PUBLIC
</nowiki></pre>

this vCard fragment as an hCard fragment

<pre><nowiki>
<span class="class">PUBLIC</span>
</nowiki></pre>

this hCard fragment could be displayed as

PUBLIC

==== Example 2 ====

<pre><nowiki>
CLASS:PRIVATE
</nowiki></pre>

this vCard fragment as an hCard fragment

<pre><nowiki>
<span class="class">PRIVATE</span>
</nowiki></pre>

this hCard fragment could be displayed as

PRIVATE

==== Example 3 ====

<pre><nowiki>
CLASS:CONFIDENTIAL
</nowiki></pre>

this vCard fragment as an hCard fragment

<pre><nowiki>
<span class="class">CONFIDENTIAL</span>
</nowiki></pre>

this hCard fragment could be displayed as

CONFIDENTIAL

=== 3.7.2 KEY Type Definition ===

<pre><nowiki>
KEY;ENCODING=b:MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcNAQEEBQA
wdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENbW11bmljYX
Rpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
ZW1zMRwwGgYDVQQDExNyb290Y2EubmV0c2NhcGUuY29tMB4XDTk3MDYwNj
E5NDc1OVoXDTk3MTIwMzE5NDc1OVowgYkxCzAJBgNVBAYTAlVTMSYwJAYD
VQQKEx1OZXRzY2FwZSBDb21tdW5pY2F0aW9ucyBDb3JwLjEYMBYGA1UEAx
MPVGltb3RoeSBBIEhvd2VzMSEwHwYJKoZIhvcNAQkBFhJob3dlc0BuZXRz
Y2FwZS5jb20xFTATBgoJkiaJk/IsZAEBEwVob3dlczBcMA0GCSqGSIb3DQ
EBAQUAA0sAMEgCQQC0JZf6wkg8pLMXHHCUvMfL5H6zjSk4vTTXZpYyrdN2
dXcoX49LKiOmgeJSzoiFKHtLOIboyludF90CgqcxtwKnAgMBAAGjNjA0MB
EGCWCGSAGG+EIBAQQEAwIAoDAfBgNVHSMEGDAWgBT84FToB/GV3jr3mcau
+hUMbsQukjANBgkqhkiG9w0BAQQFAAOBgQBexv7o7mi3PLXadkmNP9LcIP
mx93HGp0Kgyx1jIVMyNgsemeAwBM+MSlhMfcpbTrONwNjZYW8vJDSoi//y
rZlVt9bJbs7MNYZVsyF1unsqaln4/vy6Uawfg8VUMk1U7jt8LYpo4YULU7
UZHPYVUaSgVttImOHZIKi4hlPXBOhcUQ==
</nowiki></pre>

this vCard fragment as an hCard fragment

<pre><nowiki>
<object class="key" type="application/octet-stream"
data="data:application/octet-stream;base64,MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcNAQEEBQA
wdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENbW11bmljYX
Rpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
ZW1zMRwwGgYDVQQDExNyb290Y2EubmV0c2NhcGUuY29tMB4XDTk3MDYwNj
E5NDc1OVoXDTk3MTIwMzE5NDc1OVowgYkxCzAJBgNVBAYTAlVTMSYwJAYD
VQQKEx1OZXRzY2FwZSBDb21tdW5pY2F0aW9ucyBDb3JwLjEYMBYGA1UEAx
MPVGltb3RoeSBBIEhvd2VzMSEwHwYJKoZIhvcNAQkBFhJob3dlc0BuZXRz
Y2FwZS5jb20xFTATBgoJkiaJk/IsZAEBEwVob3dlczBcMA0GCSqGSIb3DQ
EBAQUAA0sAMEgCQQC0JZf6wkg8pLMXHHCUvMfL5H6zjSk4vTTXZpYyrdN2
dXcoX49LKiOmgeJSzoiFKHtLOIboyludF90CgqcxtwKnAgMBAAGjNjA0MB
EGCWCGSAGG+EIBAQQEAwIAoDAfBgNVHSMEGDAWgBT84FToB/GV3jr3mcau
+hUMbsQukjANBgkqhkiG9w0BAQQFAAOBgQBexv7o7mi3PLXadkmNP9LcIP
mx93HGp0Kgyx1jIVMyNgsemeAwBM+MSlhMfcpbTrONwNjZYW8vJDSoi//y
rZlVt9bJbs7MNYZVsyF1unsqaln4/vy6Uawfg8VUMk1U7jt8LYpo4YULU7
UZHPYVUaSgVttImOHZIKi4hlPXBOhcUQ==">
Key
</object>

</nowiki></pre>

this hCard fragment could be displayed as

Key

Note: Because of the lack of a TYPE value in the RFC2426 example, I substituted application/octet-stream. Clearly for it to be of some use, the type specified must be some sort of key or certificate mime type.

=== 7. Authors' Addresses ===

<pre><nowiki>
BEGIN:vCard
VERSION:3.0
FN:Frank Dawson
ORG:Lotus Development Corporation
ADR;TYPE=WORK,POSTAL,PARCEL:;;6544 Battleford Drive
;Raleigh;NC;27613-3502;U.S.A.
TEL;TYPE=VOICE,MSG,WORK:+1-919-676-9515
TEL;TYPE=FAX,WORK:+1-919-676-9564
EMAIL;TYPE=INTERNET,PREF:Frank_Dawson@Lotus.com
EMAIL;TYPE=INTERNET:fdawson@earthlink.net
URL:http://home.earthlink.net/~fdawson
END:vCard

BEGIN:vCard
VERSION:3.0
FN:Tim Howes
ORG:Netscape Communications Corp.
ADR;TYPE=WORK:;;501 E. Middlefield Rd.;Mountain View;
CA; 94043;U.S.A.
TEL;TYPE=VOICE,MSG,WORK:+1-415-937-3419
TEL;TYPE=FAX,WORK:+1-415-528-4164
EMAIL;TYPE=INTERNET:howes@netscape.com
END:vCard
</nowiki></pre>

Note that both of these vCards are invalid since they lack the REQUIRED "N" property which is quite ironic, since these are the vCards of the authors themselves.

Nonetheless, these vCards can be represented by the following hCards:

<pre><nowiki>
<div class="vcard">
<a class="url fn" href="http://home.earthlink.net/~fdawson">Frank Dawson</a>
<div class="org">Lotus Development Corporation</div>
<div class="adr">
<span class="type">work</span> address
(<abbr class="type" title="postal">mail</abbr> and
<abbr class="type" title="parcel">packages</abbr>):
<div class="street-address">6544 Battleford Drive</div>
<span class="locality">Raleigh</span>
<span class="region">NC</span>
<span class="postal-code">27613-3502</span>
<div class="country-name">U.S.A.</div>
</div>
<div class="tel">
<span class="value">+1-919-676-9515</span>
(<abbr class="type" title="WORK">w</abbr>,
<abbr class="type" title="VOICE">v</abbr><abbr class="type" title="MSG">m</abbr>)
</div>
<div class="tel">
<span class="value">+1-919-676-9564</span>
(<abbr class="type" title="WORK">w</abbr><abbr class="type" title="FAX">f</abbr>)
</div>
<a class="email" href="mailto:Frank_Dawson@Lotus.com">
<span class="type">pref<span>erred</span> email</span>
</a>,
<a class="email" href="mailto:fdawson@earthlink.net">
alternate email
</a>
</div>
<div class="vcard">
<a class="email fn" href="mailto:howes@netscape.com">Tim Howes</a>
<div class="org">Netscape Communications Corp.</div>
<div class="adr">
<span class="type">work</span> address:
<div class="street-address">501 E. Middlefield Rd.</div>
<span class="locality">Mountain View</span>,
<span class="region">CA</span>
<span class="postal-code">94043</span>
<div class="country-name">U.S.A.</div>
</div>
<div class="tel">
<span class="value">+1-415-937-3419</span>
(<abbr class="type" title="WORK">w</abbr>,
<abbr class="type" title="VOICE">v</abbr><abbr class="type" title="MSG">m</abbr>)
</div>
<div class="tel">
<span class="value">+1-415-528-4164</span>
(<abbr class="type" title="WORK">w</abbr><abbr class="type" title="FAX">f</abbr>)
</div>
</div>
</nowiki></pre>

this hCards could be displayed as

<div class="vcard">
[http://home.earthlink.net/~fdawson Frank Dawson]
<div class="org">Lotus Development Corporation</div>
<div class="adr">
<span class="type">work</span> address
(<abbr class="type" title="postal">mail</abbr> and
<abbr class="type" title="parcel">packages</abbr>):
<div class="street-address">6544 Battleford Drive</div>
<span class="locality">Raleigh</span>
<span class="region">NC</span>
<span class="postal-code">27613-3502</span>
<div class="country-name">U.S.A.</div>
</div>
<div class="tel">
<span class="value">+1-919-676-9515</span>
(<abbr class="type" title="WORK">w</abbr>,
<abbr class="type" title="VOICE">v</abbr><abbr class="type" title="MSG">m</abbr>)
</div>
<div class="tel">
<span class="value">+1-919-676-9564</span>
(<abbr class="type" title="WORK">w</abbr><abbr class="type" title="FAX">f</abbr>)
</div>
[mailto:Frank_Dawson@Lotus.com preferred email],
[mailto:fdawson@earthlink.net alternate email]
</div>

<div class="vcard">
[mailto:howes@netscape.com Tim Howes]
<div class="org">Netscape Communications Corp.</div>
<div class="adr">
<span class="type">work</span> address:
<div class="street-address">501 E. Middlefield Rd.</div>
<span class="locality">Mountain View</span>,
<span class="region">CA</span>
<span class="postal-code">94043</span>
<div class="country-name">U.S.A.</div>
</div>
<div class="tel">
<span class="value">+1-415-937-3419</span>
(<abbr class="type" title="WORK">w</abbr>,
<abbr class="type" title="VOICE">v</abbr><abbr class="type" title="MSG">m</abbr>)
</div>
<div class="tel">
<span class="value">+1-415-528-4164</span>
(<abbr class="type" title="WORK">w</abbr><abbr class="type" title="FAX">f</abbr>)
</div>
</div>

== Test Cases ==

These are [[hcard|hCard]] examples which have been found to be particularly useful in finding bugs in hCard parsers (e.g. X2V).

=== Problem with BDAY Information ===

this example:

<pre>

<div class="bday">
<dt>Birthday</dt>
<dd>
<abbr class="value" title="1985-10-27T00:00:00Z">October 27, 1985</abbr>
</dd>
</div>
</pre>

ought to produce "BDAY:1985-10-27T00:00:00Z" but it produces "BDAY:Birthday October 27\, 1985". interesting is that the apple addressbook is still willing to accept it in this way.

=== case-INSENSITIVITY of type values ===

* "home" vs. "Home"

this example works with X2V:

<pre>
<div class="tel">
<dt>Phone (<span class="type">home</span>)</dt>
<dd><span class="value">+438123418</span></dd>
</div>
</pre>

this does not, but should. but instead it becomes just TEL without a type in the vcard

<pre>
<div class="tel">
<dt>Phone (<span class="type">Home</span>)</dt>
<dd><span class="value">+438123418</span></dd>
</div>
</pre>

=== GEO parsing ===
The following hCard:

<pre><nowiki>
<div class="vcard">
<span class="n">
<a class="url" href="http://t37.net">
<span class="given-name">Fréderic</span>
<span class="family-name">de Villamil</span>
</a>
</span>
<span class="nickname">neuro</span>
<a class="email" href="mailto:neuroNOSPAM@t37.net">
<span class="type">pref<span>erred</span> email</span>
</a>
<span class="org">Omatis</span>
<span class="adr">
<abbr class="type" title="dom">France</abbr>
<span class="type">home</span> address
<abbr class="type" title="postal">mail</abbr> and
<abbr class="type" title="parcel">shipments</abbr>:
<span class="street-address">12 rue Danton</span>
<span class="locality">Le Kremlin-Bicetre</span>
<span class="postal-code">94270</span>
<span class="country-name">France</span>
</span>
<span class="geo">
<abbr class="latitude" title="48.816667">N 48° 81.6667</abbr>
<abbr class="longitude" title="2.366667">E 2° 36.6667</abbr>
</span>
</div>
</nowiki>
</pre>

Should be translated into the following vCard:

<pre><nowiki>
BEGIN:VCARD
VERSION:3.0
URL:http://t37.net
ORG:Omatis;;
NICKNAME:neuro
N:de Villamil;Frederic;;Mr.;
EMAIL;TYPE=INTERNET,PREF:neuroNOSPAM@t37.net
ADR;TYPE=HOME:;;12 rue danton;le Kremlin-Bicetre;;94270;France
GEO:48.816667;2.366667
END:VCARD
</nowiki></pre>

X2V currently (2005-12-18) fails to parse/export the GEO property at all.

== Other ==

* See [[hcard-brainstorming]] for more examples (which may eventually be moved here) and analysis.