Jeremy beschreibt in seinem Weblog wie man mit Hilfe des abbr Tags eine vollständige hCard für Links erstellen kann.

Sein Problem:

I would still make his name a hyperlink but what can I do about making this text into an hCard? Should I change my writing style and refer to everyone by their full formated name even if the context and writing style would favour just using their first name?

Will man eine hCard erstellen bei der nur der Vorname angezeigt wird, wird natürlich auch nur der Vorname ins Adressbuch übernommen:

<span class="vcard">
  <a class="fn url" href="http://example.com/">
    Max
  </a>
</span>

Die Lösung des Problems ist die Nutzung des abbr Tags:

<span class="vcard">
  <a class="url" rel="friend met" href="http://example.com/">
    <abbr class="fn" title="Max Mustermann">
      Max
    </abbr>
  </a>
</span>

Schicke Idee, fragt sich nur ob der Vorname als Abbreviate (Abkürzung) durch geht und die Nutzung von <abbr> gerechtfertigt ist.

Ich hab ja schon mal versucht die XFN-Links mit CSS und den Icons von Wolfgang Bartelme und Chris Messina zu verbinden, da es jetzt immer mehr Microformat Icons gibt, habe ich mich mal hingesetzt und ein kleines Custom Theme für K2 (ist aber auch einfach in jedes andere CSS integrierbar) erstellt.
Is wirklich nichts wildes, aber falls ihr Interesse habt probiert’s einfach mal aus: MicroK2.

Beispiele:

Als nächstes versuche ich mal noch hCal und hCard ein wenig schöner aufzubereiten, für Tags gibt es ja leider noch kein schönes Icon.

Seit ich mich mehr mit Microformats beschäftige, lese ich auch immer öfter von den HTML Attributen rel und rev unter die Augen, eines der Bekanntesten ist wohl <a href="..." rel="licence">...</a> für z.B. die Creative Commons.

Aber für was genau stehen die HTML Attribute rel und rev genau?

SelfHTML meint dazu:

Mit dem Attribut rel bestimmen Sie eine logische Vorwärtsbeziehung zum Verweisziel, mit rev eine logische Rückwärtsbeziehung (rel = relation = Bezug, rev = reverse = Umkehr). Beide Angaben sind nur in Verbindung mit dem Attribut href sinnvoll – dort geben Sie wie üblich das eigentliche Verweisziel an.

Betrachtet man es am Beispiel der XFN Microformats wird definiert, in welcher Beziehung man zu der verlinkten Person steht, man hätte das ganze auch als rev="friend met" definieren, da der andere auch die gleiche Beziehung zu mir hat.

Im Microformats Wiki sind einige dieser Attribute definiert.

rel:

  • XFN: Zeigt die Beziehung zur verlinkten Person, Bsp.: <a href="..." rel="friend met">...
  • rel-tag: Gibt an, dass es sich um einen Tag handelt, Bsp.: <a href="http://technorati.com/tag/notizblog" rel="tag">...
  • rel-licence: Attribut für Lizenzen, Bsp.: <a href="http://creativecommons.org/licenses/by/2.0/" rel="license">...
  • vote-links: Zeigt an ob man für oder gegen den Verlinkten stimmen soll, Bsp.: <a rev="vote-for" href="http://notizblog.org"
    title="vote for">...
  • rel-paymant, rel-nofollow und rel-directory

Mehr zu den rel Attributen im Microformats Wiki.

Twitter-Logo

Gestern habe ich bei Sebastian gelesen, das Twitter seit kurzem Microformats unterstützt und zwar hCard für die Kontaktdaten, hAtom für die einzelnen Einträge und anscheinend auch XFN, das hab ich jedoch noch nicht gefunden, vielleicht kann mir ja jemand auf die Sprünge helfen.
Ein Screenshot, wie das ganze mit Operator der Tails Firefox Extension aussieht findet ihr bei flickr.

Außerdem habe ich bei Manuela einen Post über ein sehr schickes Twitter WordPress Plugin gefunden. Das Plugin ist recht mächtig und unterstützt unter anderem Twittern über das WordPress Admin Menü, eine Tägliche Zusammenfassung aller Twitter-Einträge als Blogpost ähnlich wie bei del.icio.us’ daily blog posting, uvm.

Da mir die neuen XFN Icons von Wolfgang Bartelme und Chris Messina recht gut gefallen, hab ich sie mal in mein CSS eingebaut. Das schwierige daran war, kombinationen von XFN Beziehungen mit CSS abzubilden. Ein Beispiel:

<a href=”http://notizblog.org” rel=”friend met colleague”>…</a>

Deshalb hab ich für mich die Hierarchie festgelegt:

  • me
  • professional: co-worker, colleague
  • friendship (at most one): friend, acquaintance, contact
  • romantic: muse crush date sweetheart

Das heißt im Klartext: Wenn ich einen rel-tag wie z.B. rel="friend met colleague" wird nur friend und met berücksichtigt weil das für mich höherwertig is. Wenn ihr ne andere Reihenfolge wollt, könnt ihr das ganze einfach in der CSS Datei umstellen (das Wichtigste unten).

Ich habe das ganze mit den in CSS 2.1 definierten Selectors realisiert und mit Firefox 2.0 und IE7 getestet.

Beispiel CSS Code:

a:hover[rel~="me"] {
	background: url(images/xfn-me.png) 
no-repeat right;
	padding-right: 25px;
	}

a:hover[rel~="co-worker"], 
a:hover[rel~="colleague"] {
	background: url(images/xfn-colleague.png) 
no-repeat right;
	padding-right: 25px;
	}
	
a:hover[rel~="co-worker"][rel~="met"], 
a:hover[rel~="colleague"][rel~="met"] {
	background: url(images/xfn-colleague.png) 
no-repeat right;
	padding-right: 25px;
	}

Komplette CSS Datei runterladen

Beispiele: ME, FRIEND COLLEAGUE, COLLEAGUE, COLLEAGUE MET, FRIEND MUSE, FRIEND MUSE MET.

Würde mich sehr über Kommentare und Anregungen freuen…

Wer zu faul ist seine Blog-Posts im richtigen Microformat zu formatieren oder es in sein Theme zu implementieren, der bekommt hier ein paar Erleichterungen.

Plugins

hReview WordPress Plugin ist ein simples Plugin um hReviews in normalen Einträgen zu erstellen. Nach dem aktivieren erscheint in “Write Posts” ein neuer Butten über dem Textfeld. Also zuerst den normalen Text schreiben, dann hReview Knopf drücken Formular ausfüllen und ab damit. Andrew E. Scott hatte gerne Rückmeldung ob alles sauber funktioniert, also macht ihm doch den gefallen.

WP Microformatted Blogroll 0.2 lässt euch Linklisten (Blogrollen), gekennzeichnet durch XOXO, hCard und XFN erstellen.

MicroID Plugin for WordPress Von MicroID hatte ich bisher noch nicht gehört, aber es ist ziemlich simpel. Es erstellt einen Hash-Wert aus der E-Mail Adresse und der eigenen URL, welchen man zur Identifizierung verwenden kann. Also im Prinzip so ähnlich wie die Gravatare. Meiner z.B. ist 9198c94d942fa09454fa84b2ce447362d70abc1a. Das Plugin, schreibt diesen Wert in die Metatags von WordPress

<meta name=”microid” content=”9198c94d942fa09454fa84b2ce447362d70abc1a” />

zum Kennzeichnen des Blogs oder von Autoren eines einzelnen Eintrags.

Und zu GEO-Informationen gibt es ne ganze Menge Plugins.

Themes

Folgende Themes unterstützen hAtom:

Das K2 Theme von Michael Heilemann zeigt die Autoren aller Einträge im hCard Format an und das Datum in Form der abbr-design-pattern.

Oder für die, die ihre Microformats mit einem StyleSheet selbst formatieren wollen gibt es unter mindgarden.de ein schönes CSS Template.

Abschließend noch: Die Technorati Microformats-Suche funktioniert mittlerweile einwandfrei.

microformats.jpgNachdem ich mich die letzte Zeit etwas mehr mit Microformats beschäftigt habe, ist mir aufgefallen wie weit verbreitet das ganze schon ist. Die einfachste Methode um zu testen auf welcher Seite sich solche Formate befinden, ist die Test-Suche von Technorati, welche aber noch nicht ganz so einwandfrei funktioniert.
Benutzt man z.B. www.notizblog.org erhält man Ergebniss, lässt man dass “www” weg, ist die Suche ergebnislos. Bei diesem Versuch habe ich entdeckt dass das WordPress Theme “K2“, welches ich benutze, die Autoren im hCard Format angiebt und das Datum in Form der Abbr design pattern.
Aber auch große Firmen wie Apple und Yahoo benutzen solche für Formate wie man in der Folgenden Liste sieht:

Komplette Liste unter http://microformats.org/wiki/implementations

Man sieht es steckt ne menge Potential dahinter und was die ganz Großen benutzen kann ja nicht falsch sein ;)

microformats.jpgWenn man in letzter Zeit durchs Internet surft, stolpert man immer häufiger über den Begriff “Microformats” oder sieht das grüne Symbol auf Kontaktseiten. Aber was genau sind Microformats und für was sind sie gut?

Wikipedia meint dazu:

Ein Mikroformat ist ein Markup-Format zur semantischen Annotation von HTML oder XHTML. Mikroformat-Annotationen können leicht aus Webseiten extrahiert werden und machen weiteren Programmen (etwa Suchmaschinen) die Bedeutung des Seiteninhalts verständlich.

Weiterlesen…