Endlich denkt beim Thema “Usability” auch mal jemand an die Entwickler

Google hat über die letzten Wochen eine Usability-Studie zu Microdata durchgeführt und die Spezifikation wurde auch gleich entsprechend der Ergebnisse angepasst.

<address itemscope itemtype="http://microformats.org/profile/hcard">
 <strong itemprop="fn">Alfred Person</strong>
 <span itemprop="adr" itemscope>
  <span itemprop="street-address">1600 Amphitheatre Parkway</span> <br>
  <span itemprop="street-address">Building 43, Second Floor</span> <br>
  <span itemprop="locality">Mountain View</span>,
  <span itemprop="region">CA</span> <span itemprop="postal-code">94043</span>
 </span>
</address>

Die Änderungen:

• Aus item wird itemscope.
• Der Typ wird über itemtype und nicht mehr über item bzw. itemscope angegeben.
• Das Attribut itemid wurde eingeführt, um z.B. auf ISBN-Nummer zu verweisen itemid="urn:isbn:0-330-34032-8".

Über den neuen HTML-Tag <itemref /> (alternativ: <itemfor />) werde ich im zweiten Teil von “Microdata – wie Microformats bloß besser…” eingehen (zum ersten Teil).

Jetzt muss ich nur noch meine alten Artikel zu Microdata anpassen… das hat man nun davon, wenn man über Drafts berichtet

Joseph Smarr and Kevin Marks of Google hacked together a web transformer that integrates Microformats, vCard, and the Portable Contacts API. Given Kevin’s homepage which is full of Microformats, they’ve built an API that extracts his profile information from hCard, uses a public API from Technorati to transform it to vCard, and then exposes it as a Portable Contacts API endpoint. Not only does this work on Kevin’s own page, but his Twitter profile as well which contains basic profile information such as name, homepage, and a short bio.

Ein schönes Beispiel was man mit semantisch ausgezeichneten Informationen machen kann und dass Microformats eben auch (ohne viel Aufwand und mit ein bisschen Transformation) in höherwertige APIs integriert werden können… also keine hCard wurde umsonst geschrieben

Brian Ellin of JanRain has successfully combined OpenID, XRDS-Simple, OAuth, and the Portable Contacts API to start showing how each of these building blocks should come together. Upon visiting his demo site he logs in using his OpenID. From there, the site discovers that Plaxo hosts his address book and requests access to it via OAuth. Finishing the flow, his demo site uses the Portable Contacts API to access information about his contacts directly from Plaxo. End to end, login with an OpenID and finish by giving the site access to your address book without having to fork over your password.

Dazu brauche ich nicht mehr sagen, als: Implementieren! Sofort und überall

The momentum began building for ‘data portability’ last year, and we are now at a point where there is strong support for the principle that users should be in control of their data and have the freedom to access it from across the web.

[...]

The goal of Portable Contacts is to make it easier for developers to give their users a secure way to access the address books and friends lists they have built up all over the web.

[...]

…we’re using existing standards wherever possible, including vCard, OpenSocial, XRDS-Simple, OAuth, etc.

…was für mich nichts anderes als eine Trotzreaktion auf Data Portability ist!

Da spricht man von einheitlichen Standards und Portabilität, schafft es aber nicht, gemeinsam an einem Projekt zu arbeiten… Ich sehe kaum Erleichterung darin, statt verschiedener proprietärer APIs (z.B. Google’s GData Contacts API oder Microsoft’s Live Contacts API) wahrscheinlich mind. genauso viele unterschiedliche standard APIs (Data Portability oder Portable Contacts) implementieren zu müssen!

…irgendwie ironisch!

Beim spielen mit dem hCard-Mappers und der Firefox-Microformats-API kam mir die Idee, auch Formulare semantisch auszuzeichnen…

In dem Artikel Use the new microformats API in your Firefox 3.0 Extensions beschreibt Rob Crowther wie man mit Hilfe der Firefox-Microformats-API eine hCard speichert um sie zum Ausfüllen verschiedener Formulare weiterverwenden zu können.

Das Problem: Das Prinzip funktioniert leider nur bei Formularen die dem festgelegten Aufbau entsprechen. Im Fall des Beispiels wäre das:

<h1>hCardFormFiller Target Form</h1>
<form action="#" method="post">
    <label>Name: <input type="text" id="name" /></label><br />
    <label>Email: <input type="text" id="email" /></label><br />
    <label>Home page: <input type="text" id="homepage" /></label><br />
    <label>Street Address: <input type="text" id="address1" /></label><br />
    <label>City: <input type="text" id="address2" /></label><br />
    <label>Region: <input type="text" id="city" /></label><br />
    <label>Postcode: <input type="text" id="postcode" /></label><br />
    <input type="submit" />
</form>

Warum nicht gleich das Formular als hCard-From aufbauen?

<form action="#" method="post" id="vcard" >
  <fieldset id="fn">
    <legend>Name</legend>
    <label for="given-name">Vorname:</label>
      <input type="text" id="given-name" />
    <label for="family-name">Nachname:</label>
      <input type="text" id="family-name" />
  </fieldset>
  <label for="email">Email:</label>
    <input type="text" id="email" />
  <label for="url">Homepage:</label>
    <input type="text" id="url" />
  <fieldset id="adr">
    <legend>Adresse</legend>
    <label for="street-address">Straße:</label>
      <input type="text" id="street-address" />
    <label for="locality">Stadt:</label>
      <input type="text" id="locality" />
    <label for="region">Region:</label>
      <input type="text" id="region" />
    <label for="postal-code">Postleitzahl:</label>
      <input type="text" id="postal-code" />
  </fieldset>
  <input type="submit" />
</form>

Das Einheitliche Format für Ein- (Formular) und Ausgabe (Microformats) hätte zur Folge, dass keine aufwendigen Mapper (wie z.B. hCard-Mapper) mehr nötig wären um ein Formular per hCard auszufüllen…

Schöne neue Welt

Nach der Frage von Rauno…

[...] Weißt du von einer Möglichkeit, Microformats aus Firefox in den iPhonekalender zu exportieren? [...]

und nach Wojteks Kommentar…

[...] I prefer bookmarklets but this will come handy for sure too. [...]

habe ich mir überlegt, es sollte doch möglich sein, Microformats mit einem Bookmarklet direkt auf dem iPhone nutzbar zu machen…

Prinzip ist einfach, Bookmarklet (z.B. von Leftlogic oder Technorati) im normalen Safari Bookmarken, iPhone Safari mit normalem Safari über iTunes syncen, das wars… (wem das zu schnell ging kann sich das hier nochmal in Ruhe am Beispiel eines del.icio.us Bookmarklets anschauen.)

Das Bookmarklet funktioniert super:

…aber der §$%!& iPhone Safari kann keine vCard oder iCalendar Dateien verarbeiten!

Mach ich irgendwas falsch? Sogar mein popliges Sony Ericsson Handy erkennt vCards und weiß dass sie ins Adress-Buch gehören!

Naja… Wie schon im Titel erwähnt: Es könnte so einfach sein.

(Dickes Danke an Florian (.dean) fürs testen und die Screenshots und an Marco, dessen iPhone ich kurz entführen durfte)

Das Mac-Script findet man auf der Seite von Michael Kaply (direkter Link).

“Send to Bluetooth Device” action for sending ICS and VCF files via Bluetooth. Works with the hCard and hCalendar microformats.

…und seit letztem Monat gibt es auch ein Windows-Script von Thom Shannon (direkter Link).

I’ve modified the Mac only bluetooth user script for operator to work on windows. It’s based on this script, and originally inspired by Johns hack of Tails.

<div class="vcard">
  <span class="fn">Max Mustermann</span>
  <a class="email" href="mailto:max.mustermann@example.org">
    max.mustermann@example.org
  </a>
</div>

Beispiel hCard

…basiert RDFa auf dem klassischen RDF und mit XHTML 2.0 neu eingeführten Attributen wie z.B. property und about:

<body xmlns:contact="http://www.w3.org/2001/vcard-rdf/3.0#">
  <span property="contact:fn">Max Mustermann</span>
  <a rel="contact:email" href="mailto:max.mustermann@example.org">
    max.mustermann@example.org
  </a>
</body>

Beispiel vCard RDF in RDFa

Eine gute Einführung in das Thema RDFa bietet das Video von Manu Sporny:

Rein Technisch gesehen ist RDFa, durch die Nutzung von Namespaces und die bessere Skalierbarkeit durch URIs, definitiv der bessere Standard. Ich denke trotzdem nicht dass RDFa die Microformats in näherer Zukunft ablösen wird, da RDFa nur unter XHTML 2.0 möglich ist und (meines Wissens) im Konkurrenz-Format (X)HTML 5.0 nicht angedacht wird. Es ist deshalb notwendig beide Formate weiter voranzutreiben und so weit wie möglich auf einem einheitlichen Standard, wie z.B. der vCard im oben beschriebenen Beispiel, aufzubauen. Während der Übergangsphase ist es so relativ einfach mit GRDDL zwischen den beiden Formaten zu transformieren.

In seinem Artikel “RDFa vs microformats” beschreibt Evan Prodromou die für ihn notwendigen Schritte für die Zukunft von RDFa:

1. RDFa gets acknowledged and embraced by microformats.org as the future of semantic-data-in-XHTML
2. The RDFa group makes an effort to encompass existing microformats with a minimum of changes
3. microformats.org leaders join in on the RDFa authorship process
4. microformats.org becomes a focus for developing real-world RDFa vocabularies

Mal schauen wie es wirklich kommt und was sich in Zukunft durchsetzen wird…

Wer sich für das Thema interessiert, kann ja mal Semantic Radar für Firefox ausprobieren. Semantic Radar macht (ähnlich wie Operator für Microformats) RDF und RDFa Inhalte in Webseiten sichtbar.

Chris Messina stellt sich in seinem Artikel “hCard for OpenID Simple Registration and Attribute Exchange” die Frage warum bei der Definition der ersten AX-Typen (genauso wie bei SREG) versucht wird, Profil-Daten neu zu definieren, anstatt auf bestehende Standards wie die vCard (RFC2426) zurück zu greifen. Er argumentiert sein Anliegen mit der weiten Verbreitung der vCard und seines XHTML Pendants der hCard:

Most importantly, however, hcard and vcard is already widely supported in existing applications like Outlook, Mail.app and just about every mobile phone on the planet and in just about any other application that exchanges profile data.

Chris hat sich die Mühe gemacht, die drei Standards einander gegenüber zu stellen:

Update: Chris Messina hat eine vollständige Liste der Attribute im Microformats Wiki erstellt.

AX und vCard/hCard haben zwar weitestgehend die gleichen Attribute, unterscheiden sich jodoch in der Bezeichnung, was es Entwicklern unnötig schwer macht, die verschiedenen Formate zu implementieren.

Tantek Çelik (einer der Microformats Ur-Väter) beschäftigt sich weiter mit dem Problem und definiert mögliche Schritte um die hCard als Attribute Exchange für OpenID zu verwenden:

URLs for properties. Every SREG property has a URL in its Attribute Exchange (AX) version that defines that property. hCard does too, through the hCard profile. However, there are two differences which may be seen as shortcomings. Currently the hCard profile on microformats.org is in a wiki, and not proper XMDP (there is an hCard XMDP profile at W3C that some are using), and, URLs for specific properties use # fragment identifiers.

Soweit ich das ganze verstanden habe ist AX sowieso eine weitgehend offene Definition, welche es ermöglicht Typen über URIs zu definieren. D.h. es sollte möglich sein z.B. den vCard/hCard-Typ fn folgendermassen zu implementieren:

openid.ax.type.fn=http://microformats.org/profile/hcard#fn

Bitte korrigiert mich falls ich etwas falsch verstanden habe.

Ich finde die Idee, Microformats für OpenID einzusetzen, sehr gut und bin generell für die Nutzung von offenen Standards. Je höher die Wiederverwendbarkeit von Standards, desdo geringer der ist die Barriere sie einzusetzen. Jeder der schon mehr als ein fremdes System über eine proprietäre API angebunden hat wird mir da sicher zustimmen.

Weiterführende Informationen:

• OpenID Brainstorming im Microformats Wiki

Weitere Features:

• Durchsuchen der aktuell geöffneten URL in Safari nach einer hCard
• Kein Importieren der vCards in das Adressbuch nötig für die Darstellung.
• Anzeigen der Adresse in Google maps
• Importmöglichkeiten von vCard und hCard in das Apple Adressbuch

Einige Screenshots und einen Screencast findet man auf der offiziellen Homepage.

hCard to vCard:

To parse a XML or XHTML document, it has to be valid. To tidy the XML file, you can use a service from the W3C:

$xml_string_tidy = file_get_contents(“http://cgi.w3.org/cgi-bin/tidy?docAddr=”.urlencode($uri));

Then you have to create the HTML DOM…

@$document = new DOMDocument();
@$document->loadHTML($xml_string_tidy);

and the XSLT DOM…

$stylesheet = new DOMDocument();
$stylesheet->load(‘hcard2vcard.xsl’);

Create a new XSLT Processor, load the Stylesheet…

$processor = new XsltProcessor();
$processor->importStylesheet($stylesheet);

and run the transformation.

$result = $processor->transformToDoc($document);
$str = $result->saveXML();

Now $str contains the transformed code.
To send the vCard header with PHP, try

header(“Content-Disposition: attachment; filename=contact.vcf”);
header(“Content-Type: text/x-vcard; charset=UTF-8 name=contact.vcf”);
echo $str;

If you want to use the vCard extension .vcf instead of .php you have to add something like that to your .htaccess file

RewriteEngine On
RewriteBase /
RewriteRule ^contact.vcf /hcard2vcard.php [L,QSA]

I hope it works