Rob Crowther hat für IBM developerWorks eine großartige Anleitung (mit Beispiel-Code) geschrieben, wie man die Microformats API in Firefox3 Extensions nutzen kann.

The upcoming Firefox 3.0 release has built-in support for microformats in the form of an API that you can access from a Firefox extension. In this tip, you follow a simple example of how to use this API from within your extension code. You take a skeleton Hello World extension and give it the ability to store an hCard from any Web page and then use that stored hCard to populate a Web form.

Die Beispiel-Erweiterung von Crowther nutzt hCard-Informationen um ein (im Beispiel beiliegendes) Profil-Formular auszufüllen.

hcardformfiller.jpg

Ablauf: Zuerst auf ne Seite mit hCard, linken Knopf drücken, dann auf das Fromular und rechten Knopf drücken.

hCardFormFiller für WordPress

Um dem Beispiel etwas mehr Nutzen zu geben, habe ich es testweise für das WordPress Kommentarformular umgeschrieben. Die Einzige notwendige Änderung ist, folgenden Code in der overlay.js:

onToolbarButtonPasteCommand: function(e) {
 if (this.uF.fn) {
   content.document.getElementById('name').value = this.uF.fn;
   content.document.getElementById('email').value = this.uF.email[0].value;
   content.document.getElementById('homepage').value = this.uF.url[0];
   content.document.getElementById('address1').value = this.uF.adr[0]['street-address'];
   content.document.getElementById('address2').value = this.uF.adr[0].locality;
   content.document.getElementById('city').value = this.uF.adr[0].region;
   content.document.getElementById('postcode').value = this.uF.adr[0]['postal-code'];
 }
}

durch folgenden Code:

onToolbarButtonPasteCommand: function(e) {
 if (this.uF.fn) {
   content.document.getElementById('author').value = this.uF.fn;
   content.document.getElementById('email').value = this.uF.email[0].value;
   content.document.getElementById('url').value = this.uF.url[0];
 }
}

zu ersetzen und das war’s. Jetzt könnt ihr mit einer hCard bewaffnet losziehen und WordPress Blogs zuspammen 🙂

Wer das Addon mal ausprobieren möchte kann sich den angepassten hCardFormFiller for WordPress runterladen… den original Code findet man hier.

Nachdem die Microformats kein UI spendiert bekommen haben, gibt es vielleicht demnächst einige Addons die diese Lücke füllen werden.

Interessante Links:

Wie in meinem letzten Post über den hCardMapper beschrieben, war es in der Tat nicht möglich den Microformats-Parser/Proxy ohne weitere Probleme auszutauschen. Die generierten JSON Formate der einzelnen Parser (ufXtract, hKit, mofo) unterscheiden sich an einigen Stellen zu sehr um sie alle gleich behandeln zu können. Soweit zur schlechten Nachricht…

Die gute Nachricht ist, dass sich Gordon Oheim (der Macher des hCardMappers) nochmal alle JSON Formate vorgenommen und eine neue Version gebastelt hat:

v0.94 – Added better support for JSON returned by Optimus, ufXtract and hKit.

Der Mapper sollte also mit mofo, Optimus, ufXtract and hKit problemlos funktionieren.

Die nächste tolle Nachricht ist, dass Gordon auch auf einen kleinen Änderungswunsch von mir sofort eingegangen ist, so dass wir euch jetzt eine hCardMapper Edition von dem WordPress hCard-Commenting Plugin anbieten können :).

Download: hCardMapper for WordPress v0.1 hCardMapper bei WordPress.org

Wenn ihr immer die aktuelle Version haben wollt, hier ist der Link zum SVN.

Ich hab das Plugin auch mal auf notizBlog aktiviert und würde mich über euer Feedback freuen. Macht es Sinn über das Admin-Menü zwischen beiden Versionen (hCard-Commenting und hCardMapper-Commenting) zu wechseln?

Ein dickes Danke nochmal an Gordon für seine tolle und schnelle Arbeit… tolles Script.

Wer schonmal versucht hat hCard Profile zu importieren wird sicherlich auf ein Problem stoßen: Welche hCard ist die richtige?

Vor ein paar Tagen habe ich ein Gespräch zwischen Dirk Olbertz und Tantek Çelik via Twitter verfolgt, bei dem es genau um dieses Problem ging…

Das Problem der representative hCard kann auf zwei verschiedene Weisen gelöst werden:

…in short 1. url==uid==source. 2. url has rel-me

url==uid==source

Die einfachste Möglichkeit ist, zu überprüfen ob eine der (unter der angegebenen Source-URL) gefundenen hCards als URL die die Source-URL enthält. Wenn man sicher gehen will, sollte man die URL zusätzlich noch als UID (RFC2426) auszeichnen.

Ein Beispiel für eine representative hCard für http://notsorelevant.com wäre:

<span class="vcard">
	<span class="fn">Carsten Pötter</span>
	<span class="url uid">http://notsorelevant.com</span>
</span>

rel-me

Die zweite Möglichkeit ist, nach hCards mit rel="me" URLs zu suchen.

Diese Variante lässt sich natürlich auch mit der Ersten verbinden:

<span class="vcard">
	<span class="fn">Carsten Pötter</span>
	<span class="url uid" rel="me">http://notsorelevant.com</span>
</span>

Wer also ganz sicher gehen möchte sollte das letzte Beispiel nutzen 🙂

Für Web-Seiten die gar keine Profile oder zumindest keine Profile auf der Startseite haben, könnte rel="me" auch als Delegation zu einer (anderen) Seite mit einer representative hCard genutzt werden.

Beispiel: <link rel="me" href="http://www.notsorelevant.com/ueber/" />

Da es für PHP (meines Wissens) noch keinen XFN-Parser gibt, habe ich mich beim hCard-Commenting WordPress Plugin für die erste Variante (url==uid==source) entschieden… Ich hoffe es funktioniert 🙂

Weitere Informationen zu representative hCards im Microformats-Wiki:

Bild von Chris MessinaIch habe heute morgen bei Keasone schon den ersten (deutschsprachigen) Bericht über den Internet Explorer 8 (beta) gelesen. In den Genuss, ihn selber zu testen, bin ich leider noch nicht gekommen, habe aber gerade ein paar interessanten Artikel über ein neues IE8 Feature gelesen.

Mit dem neuen Internet Explorer ist es möglich Teile einer Webseite direkt zu abonnieren, um über Änderungen dieser Bereiche Informiert zu werden, ohne den Umweg über einen RSS-Feed gehen zu müssen. Das Besondere an den so genannten „WebSlices“ ist, dass sie dem hAtom Microformat bis auf ein paar kleine Unterschiede gleichen.

WebSlices are enabled by adding HTML annotations directly to the Web page. WebSlices use a combination of the hAtom Microformat and the WebSlice format to describe a subscribable portion of a Web page. This section covers the primary, expiration, and bandwidth properties of a WebSlice.

Das heißt, Microsoft hat weitestgehend die Attribute des hAtom Formats verwendet und einen eigenen „Container“ darum gesetzt. Statt class="hfeed hentry" heißt es in der WebSlices-Definition class="hslice"

Der Aufbau eines WebSlices sieht folgendermassen aus:

<div class="hslice" id="1"> 
 <p class="entry-title">Item - $66.00</p> 
  <div class="entry-content">high bidder: buyer1 
  ...
 </div> 
</div>

Das hAtom Format im Vergleich:

<div class="hfeed hentry" id="1"> 
 <p class="entry-title">Item - $66.00</p> 
  <div class="entry-content">high bidder: buyer1 
  ...
 </div> 
</div>

Prinzipiell ist die Idee hinter WebSlices, Teile einer Webseite abonnieren zu können, super… schade ist nur, dass sie nicht auf bestehende/etablierte Formate wie hAtom zurückgreifen, sondern wieder ein eigenes proprietäres Format schaffen müssen.
Ich verstehe auch nicht ganz den Sinn hinter diesem Schritt… hAtom ist mittlerweile ein relativ weit verbreiteter Standard (einige Beispiele) und würde dem WebSlices-System sofort einen Anwendungsfall bieten. Durch das Schaffen eines eigenen Formates dauert es seine Zeit, bis Webseiten-Betreiber dieses auch umsetzen (wenn sie es überhaupt umsetzen).

Ich hoffe dass Microsoft seinen Kurs ändern wird oder zumindest das hAtom Format als alternative zu ihrem hSlice ermöglicht.

Weiterführende Links:

Die hAudio – Spezifikation (seit ein paar Tagen in der Version 0.9) bietet Bloggern und Podcastern die Möglichkeit Audio Daten semantischen darzustellen. Das schöne an hAudio ist, dass man nicht nur einzelne Files sondern ganze Playlists erstellen kann. Über das position Attribut kann genau festgelegt werden an welcher Stelle der Playlist es stehen soll.

The position is used to describe the position of the hAudio item in a list. Examples of hAudio lists can include album track listings, music top 10 lists, playlists, and podcast chapters.

Ein Beispiel für ein simples hAudio – File:

<div class="haudio">
   <span class="title">Houston</span> by 
   <span class="contributor">Dean Martin</span>
</div>

Mit ein bisschen Arbeit, lässt sich aus mehreren hAudio Dateien auch ein hAudio RSS Feed erstellen, der sogar mit iTunes abonniert werden klann.

Mehr zu dem Thema hAudio RSS findet man auf WebOrganics oder beim ESW Wiki des W3C.

Gestern vor vier Jahren hielten Tantek Çelik and Kevin Marks eine Präsentation über „real world semantics“. Die Präsentation machte an Beispielen wie XFN und einigen rel-Design-Pattern klar, wie es Designern und Entwicklern möglich ist, mit bestehenden Formaten wie X/HTML semantisch zu arbeiten.

Mittlerweile hat sich aus ein paar HTML Design Pattern eine große Open-Standards-Bewegung entwickelt, aus der noch mind. ein Duzent neuer (sog.) Mikroformate heraus entstanden sind. Microformats wie z.B. die hCard oder XFN sind heute Basis von weiteren Open-Standard-Groups wie z.B. Data- oder Social-Network-Portability und große Unternehmen wie Google, Yahoo, Apple oder Mozilla setzen auf ein breites Spektrum dieser „real world semantics“.

Wahrscheinlich haben Microformats gerade durch ihren pragmatischen Ansatz die Semantic Web Idee einen ganzen Schritt voran getrieben und gezeigt, dass Semantiken nicht nur mit RDF oder OWL sondern auch mit simplen HTML class– und rel-Attributen möglich ist.

Vielen Dank an alle Entwickler und Designer die die Microformats Idee voran getrieben haben und vor allem an Tantek…

via zeldman

OpenID Delegation ermöglicht es den OpenID Nutzern eine beliebige URL als OpenID zu verwenden. Für die „Delegation“ sind zwei <link /> Einträge im HTML-Header notwendig:

<link rel="openid.server" href="http://example.com" />
<link rel="openid.delegate me" href="http://id.example.com/" />

Der erste Eintrag (openid.server) gibt den Server an, der den eigentlichen OpenID Service anbietet, der zweite Eintrag (openid.delegate) gibt an, welches die eigentliche OpenID URL ist.

Bei den Arbeiten an hCard-Commenting kam mir die Idee, diese Art der „Delegation“ auch für Microformats, speziell hCards, zu verwenden.

<link rel="hcard.delegate me" href="http://example.com/hcard/" />

Der Vorteil dieser Variante wäre, dass man schon bestehende hCards wie z.B. die Profilseite von flickr (http://flickr.com/people/<username>) oder das Public-Profile von myOpenID (http://<username>.myopenid.com) wiederverwenden könnte, ohne sie nochmals im eigenen Blog veröffentlichen zu müssen.

<link rel="hcard.delegate me" href="http://www.flickr.com/people/pfefferle" />

Ein weiterer Vorteil der „Delegation“ ist, dass die Weblog URL meistens kürzer und viel einfacher zu merken ist, als ein Community Profil:

Weblog URL: https://notiz.blog
flickr URL: http://www.flickr.com/people/pfefferle

Einige WordPress Plugins wie z.B. das oben erwähnte hCard-Commenting oder hAvatar nutzen das Website Feld eines Blogs, um die URL einer hCard anzugeben und widersprechen dabei eigentlich ein wenig der Idee des „adapting to current behaviors“1 der Microformats Community. Wenn ich einen Weblog Eintrag kommentiere gebe ich eigentlich meine normale Blog-URL in das Website Feld ein, das heißt ich müsste eigentlich ein Verhalten ändern, was ich mit hCard-Delegation beibehalten könnte 😉

Aber der eigentliche Vorteil der „Delegation“ liegt in der zentralen Nutzung der hCard. Ich müsste im besten Fall also nur noch eine hCard anlegen und pflegen.