Author Archive for Matthias Pfefferle

Author: Matthias Pfefferle

Matthias Pfefferle
Matthias Pfefferle arbeitet seit knapp zwei Jahren als technischer Leiter für die Firma ekaabo GmbH in Weinheim. Er beschäftigt sich mit Webstandards wie OpenID und Microformats und versucht, mit seinem Weblog (notizblog.org) und als Mitherausgeber des OpenWebPodcast (openwebpodcast.de) das Thema speziell in Deutschland voranzutreiben.

Wir podcasten wieder…

openweb-podcast.jpg

So, nach langer Abstinenz ist der OpenWebPodcast endlich wieder da und es ist alles neu… neuer Blog, neue Domain (openwebpodcast.de) und eine neue etwas längere Folge (wir hatten ne Menge aufzuholen ;) )

Die Links zur Sendung findet ihr hier!

Den Podcast abonnieren:

haudio

 

Microdata – Semantisches HTML5

In dem Punkt, dass HTML semantischer werden muss, ist sich die Web-Welt einig, nur das “Wie” ist noch nicht ganz klar. Aus verschiedenen Gründen (die alle sehr, sehr technisch sind) ist die WHATWG-Community bzw. Ian Hickson im speziellen, nicht sehr begeistert von dem bisherigen De-facto-Standard RDFa und hat deshalb vor ein paar Wochen Microdata als eine mögliche Alternative vorgestellt.

Microdata-Objekte bestehen eigentlich nur aus einer Vielzahl von Key/Value-Paaren. Ein Object wird durch einen umschließenden HTML-Tag mit einem item-Attribut gekennzeichnet und hat mehrere Properties ausgezeichnet durch itemprop-Attribute.

<div item>
 <p>Mein Name ist <span itemprop="name">Matthias</span>.</p>
</div>

Microdata ist für mich die gelungene Weiterentwicklung der Microformats-Idee unter Berücksichtigung von RDFa und prinzipiell lassen sich auch beide Standards mit Microdata umsetzen. Wie generell von HTML5 gewohnt, kann man auch Microdata auf viele verschiedene Weisen benutzen ohne den Standard zu verletzen.

Microdata im Microformats-Stil

Um z.B. eine hCard mit Microdata abzubilden muss man eigentlich nur die bisher verwendeten class durch itemprop-Attribute zu ersetzen.

<div item="vcard">
 <span itemprop="fn">Matthias Pfefferle</span>
 <img itemprop="photo" src="avatar.png" alt="Avatar" />
</div>

HTML5 und Microdata bieten außerdem eine ganze Reihe weiterer Tags und Attribute die alle bisherigen Microformats-Probleme beheben sollten. Aber darauf werde ich in einem extra Artikel noch detaillierter darauf eingehen.

Microdata im RDFa-Stil

item und itemprop können aber auch durch URIs (ähnlich wie RDFa) ausgezeichnet werden und würden sich dadurch relativ leicht (durch z.B. GRDDL) in klassisches RDF konvertieren lassen.

<div item="http://www.w3.org/2001/vcard-rdf/3.0#">
  <span itemprop="http://www.w3.org/2001/vcard-rdf/3.0#fn">
    Matthias Pfefferle
  </span>
  <img itemprop="http://www.w3.org/2001/vcard-rdf/3.0#photo"
       src="avatar.png" alt="Avatar" />
</div>

Fazit

Trotz anfänglicher Skepsis bin ich immer begeisterter von dem neuen HTML5 Draft! Microdata fühlt sich einfach viel mehr nacht HTML an…

<div item="vcard">
  <a itemprop="url" href="http://notizblog.org">
    <span itemprop="fn">Matthias Pfefferle</span>
  </a>
</div>

…als RDFa.

<div xmlns:foaf="http://xmlns.com/foaf/0.1/">
  <span typeof="foaf:Person">
    <a property="foaf:name" rel="foaf:homepage" href="http://notizblog.org">
      Matthias
    </a>
  </span>
</div>

Trotzdem hoffe ich, dass man sich doch noch irgendwie einigen kann und sich vielleicht in der Mitte trifft. Zwei neue HTML-Spezifikationen (XHTML2 & (X)HTML5) sind schon verwirrend genug, da brauchen wir nicht auch noch zwei unterschiedliche Semantik-HTML-Standards

 

Wird OpenID dank Facebook ubiquitär?

Ich habe es endlich geschafft! Ich habe den automatischen Facebook OpenID-Login erfolgreich getestet :)

Ursprünglich hab ich den Auto-Login mit Google probiert, das wollte aber nicht so ganz funktionieren (ähnliche Problematik wie bei Carsten), also hab ich es (nachdem mich Joss Winn mit seinem Blog-Post nochmal an das neue Facebook-Feature erinnert hat) noch mal mit einem anderen OpenID-Provider getestet und siehe da, mit myOpenID funktioniert es.

Um OpenID für Facebook zu aktivieren, muss man in den Einstellungen seinen Account mit einer OpenID verknüpfen (am Besten man probiert es mit myOpenID).

Facebooks OpenID Settings

Um es zu testen, muss man sich einfach bei Facebook (bloß nicht bei myOpenID, sonst funktionierts natürlich nicht) abmelden und wieder auf “http://facebook.com” gehen und schwups… wird man wieder angemeldet… ganz automatisch… ohne etwas zu tun…

Das klingt ironisch? Ist es auch ein wenig… Facebook scheint sich vor dem Abmelden den OpenID-Provider in einem Cookie zu merken um, beim erneuten aufrufen der Facebook-Seite, den hinterlegten OpenID-Provider zur automatischen Anmeldung zu verwenden.

Das hört sich ja erstmal nicht schlecht an, aber… das ganze System funktioniert leider nur, wenn das oben erwähnte Cookie vorhanden ist. An jedem neuen PC muss man sich also zuerst bei seinem OpenID-Provider, dann (auf klassische Weise) bei Facebook anmelden um dann, nach einer Abmeldung das Cookie zu erhalten.

Als Erweiterung zu einem klassischen OpenID-Login ist Facebooks Auto-Login sicherlich keine schlechte Idee, die derzeitige Lösung ist aber leider eher verwirrend und keine wirkliche Erleichterung für den klassischen Facebook-Nutzer. Allerdings steht Facebook ja noch am Anfang der Implementation. Es werden sicherlich noch einige Features (zumal Facebook die OpenID-Registrierung ja schon angekündigt hat) folgen und kreativ ist die bisherige Idee allemal.

Mal gespannt, wie die fertige Implementierung aussieht!

…und bis zur allgegenwärtigen OpenID wirds wohl noch ein wenig dauern :)

 

Mozilla Jetpack (und Microformats)

Jetpack ist das jüngste Baby der Mozilla Labs und bietet eine Art API, die es Entwicklern ermöglicht, den Firefox mit klassischen Web-Techniken (HTML, JavaScript und CSS) zu erweitern. Statt mit XUL kann man seine Firefox Addons demnächst vielleicht wirklich mit HTML und CSS gestalten. Großartige Idee!

Übrigens unterstützt Jetpack, wie auch Ubiquity, die ab der Version 3 in Firefox nativ implementierte Microformats API. Der folgende Code zeigt, wie man die Microformats API in Jetpack-Skripte integrieren kann. Das Beispiel zählt z.B. alle hCards der Seite, auf der man sich gerade befindet und zeigt das Ergebnis per Info-Message an:

Components.utils.import("resource://gre/modules/Microformats.js");

// count hCards
jetpack.tabs.onFocus(function() {
  // load HTML
  var doc = jetpack.tabs.focused.contentDocument;
  // count microformats
  var uFcount = Microformats.count('hCard', doc);
  // load notifier
  jetpack.notifications.show({
    title: 'hCards',
    body: 'number of hCards on this website: ' + uFcount,
    icon: 'http://microformats.org/favicon.ico'
  });
});

Nachtrag:

Unter Windows und Linux scheinen die Messages nicht so ganz zu funktionieren, deshalb gibt’s hier nochmal nen Beispiel wo der Counter in der Statusbar ausgegeben wird:

Components.utils.import("resource://gre/modules/Microformats.js");

jetpack.statusBar.append({
  html: '<img src="http://microformats.org/favicon.ico">
           hCards: <span id="hcard-count">0</span>',
  onReady: function(jetpackWidget) {
    function counthCard(){
      //load HTML
      var doc = jetpack.tabs.focused.contentDocument;
      // count microformats
      var uFcount = Microformats.count('hCard', doc);
      if (uFcount > 0) {
       $(jetpackWidget).find('#hcard-count').html(uFcount);
      }
    }
    jetpack.tabs.onFocus(counthCard);
  }
});

Mal schaun ob mir demnächst noch etwas sinnvolleres Einfällt ;)

 

nanoformats are dead, long live the microsyntax

Was Microformats.org für HTML-Semantiken ist, soll Microsyntax.org für Twitter-Grammatiken werden.

Vor knapp zwei Jahren gab es schon mal einen Trend, Tweets mit “Meta Informationen” anzureichern (und Chris Messina (wer sonst!) hatte sogar schon 2006 eine ganz ähnliche Idee). Leider haben die so genannten Nanoformats sich, bis auf einige Ausnahmen (@replies und #tags), nicht wirklich durchgesetzt.
Trotzdem entstanden ein paar ganz nette Tools:

Das gestern von Stowe Boyd gestartete Microsyntax.org soll das ganze Thema jetzt nochmal neu aufrollen, Ordnung in das Microsyntax Chaos bringen (was ich schon mal sehr befürworte) und eine Plattform für neue Formate bieten.

By microsyntax I mean various ways to embed structured information right into the text of Twitter messages. The most well-known sort of microsyntax are the retweet convention (or ‘RT’) and hashtags (or twitter tags).

[...]

As a result of all this activity, and the potential for collective action in these efforts, we are launching a new non-profit, Microsyntax.org, with the purpose of investigating the various ways that individuals and tool vendors are trying to innovate around this sort of microsyntax, trying to define reference use cases that illuminate the ways they may be used or interpreted, and to create a forum where alternative approaches can be discussed and evaluated. We may even get involved in the development of proof-of-concept implementations that can act as reference architectures for microsyntactic extensions to the Twitter grammar emerging in the real time stream.

Prinzipiell finde ich die Idee ganz spannend und freue mich auf die erste Ergebnisse… und hoffen wir mal dass die zukünftigen Tweets nicht ausschließlich aus Meta-Informationen bestehen:

RT @pfefferle ich bin gerade in /berlin angekommen und freue mich aufs !barcamp. #bcberlin #barcamp #berlin

(naja, eigentlich sieht ja jetzt schon jeder zweite Tweet so aus ;) )

 

HTML5 wird kein RDFa unterstützen

In einem kürzlich veröffentlichten Interview für das Web Standards Project (kurz WaSP) hat Ian Hickson (Editor der HTML5 Spezifikation) die Hoffnung RDFa würde auch von HTML5 unterstützt werden, endgültig zu nichte gemacht.

Auf die Frage, wie es denn mit Microformats/RDFa in HTML5 aussehe antwortet Hickson:

Microformats is natively supported in HTML5, just like it was in HTML 4, because Microformats use the built-in extension mechanisms of HTML.

We considered RDFa long and hard (in fact this is an issue that’s a hot topic right now), but at the end of the day, while some people really like it, I don’t think it strikes the right balance between power and ease of authoring. For example, it uses namespaces and prefixes, which by and large confuse authors to no end. Just recently though I proposed something of a compromise which takes some of RDFa’s better ideas and puts them into HTML 5, so hopefully that will take care of the main needs that caused people to invent RDFa. We’ll see.

Die erwähnte Alternative (die ich mir gerade zu Gemühte führe) lautet übrigens Microdata, welche RDFa so sehr ähnelt, dass man eigentlich auch gleich RDFa hätte einsetzen können… Schade!

 

Microformats: Value Class Pattern

Das bisher wohl größte Problem bei der Verwendung von Microformats ist (oder besser wahr) die Accessibility durch die etwas zweckentfremdete Verwendung des <abbr />-Tags.

Das so genanntes abbr-design-pattern diente hauptsächlich dazu (es gibt noch einige andere Anwendungsfälle), ein für den Menschen lesbares Datum auch für die Maschine lesbar zu machen und ist Bestandteil von Mikroformaten wie z.B. hCalendar, hAtom oder hReview.

Ein Beispiel: <abbr class="dtstart" title="2009-05-12">heute</abbr>

SelfHTML über das abbr-Element:

zeichnet einen Text aus mit der Bedeutung “dies ist eine Abkürzung”

Selbst wenn man davon ausgeht, dass das Wort heute eine Abkürzung für das volle Datum 2009-05-12 ist, gibt es ein großes Problem mit Screen-Readern. Die meisten Screen-Reader sind so konfiguriert, dass sie statt der Abkürzung, das im title-Attribut angegebene, vollständige Wort lesen.
Im Falle der abbr-design-pattern im oben genannten Beispiel wäre das 2009-05-12 (gelesen “Zweitausendneun minus Fünf minus Zwölf”), also viel missverständlicher als heute.

Das gerade angekündigte value-class-pattern soll dieses (und einige andere) Problem jetzt beheben.

Ein Datum, wie im Beispiel oben, würde mit dem value-class-pattern folgendermaßen aussehen:

<span class='dtstart'>
  <span class='value-title' title='2009-05-12'> </span>
  heute
</span>

Erklärung:

  • dtstart gibt immer noch an, dass es sich bei dem folgenden um ein Datum handelt
  • Die folgende Klasse: value-title gibt an, dass sich dtstart auf das title-Attribut des spans bezieht
  • Im title steht der maschinen-lesbare text

Das neue Pattern beschreibt aber noch eine ganze Reihe an anderen Anwendungsfällen, am besten ihr überfliegt die Seite einfach mal selbst: http://microformats.org/wiki/value-class-pattern

…es sind übrigens alle Microformats-Nutzer aufgerufen, ihre Seiten und Parser auf das neue Pattern umzustellen, also viel Spaß dabei :)

 

POSHFormats

Der Begriff POSH (ein Acronym für Plain Old Semantic HTML) geistert ja schon eine ganze Weile durch die Microformats-Community, aber dass es für POSH eine richtige Definition gibt und dass man zwischen POSHFormats und Microformats unterscheidet wahr mir neu…

Der Unterschied:

poshformats are data formats constructed from the use of semantic class names.

microformats are the proper subset of poshformats which have been developed via the microformats process and principles.

POSHFormats sind also alle Formate die zwar auf semantischem HTML basieren, aber nicht den Microformats-Prozess durchlaufen haben. Beispiele: Pavatar, hDOAP oder die MicroID.

Für diese armen Formate, die zwar teilweise echt großartig sind trotzdem aber keine Microformats sein dürfen, hat Toby Inkster jetzt mit poshformats.org ein eigenes Zuhause geschaffen.

(Ich musste schon ein klein wenig schmunzeln :) )

 

Identity In The Browser

Mozilla wagt sich an OpenID :) .

Weave, ein in den Mozilla Labs entwickeltes Addon, bietet in einer ersten Beta jetzt auch einen browser-gestützten OpenID-Login an.

Zum Screencast!

 

Facebooks Open Strategy?

In den letzten Tagen hat Facebook einige so spannende Ankündigungen gemacht, dass ich sogar kurz mal meinen Umzugsstress unterbrechen und darüber bloggen muss :)

Die Facebook Open Stream API

Die erste Ankündigung betrifft Facebooks Activity Stream der spätestens seit dem letzten Redesign das zentrale Feature von Facebook geworden zu sein scheint. Mit der Open Stream API führt Facebook diese Strategie fort und öffnet die Aktivitäten auch für externe Applikationen und Services. Besonders lobenswert ist, dass Facebook neben einer proprietären API (zum lesen und schreiben) auch einen Atom-Feed+Activity Extension1 zum weiterverarbeiten des Activity Streams anbietet. Leider ist aber auch der Atom-Feed über den Facebook-Authentifizierungsprozess geschützt und kann dadurch nicht ohne weiteres mit z.B. einem Feedreader abonniert werden.

Dass Facebook die proprietäre Open Stream API entwickelt, statt die OpenSocial RESTFul API einzusetzen ist leider zu verstehen, immerhin ist OpenSocial als Googles Antwort auf die Facebook-Apps entstanden. Schade!

OpenID Login

Als Facebook letztes Jahr der OpenID-Foundation beigetreten ist, um sie speziell in Sachen Usability/User Experience zu unterstützt, hatte ich natürlich große Hoffnung, dass Facebook in naher Zukunft auch selbst auf OpenID umstellen würde. Seit Montag ist jetzt klar, dass Facebook an einem OpenID-Login arbeitet, der hoffentlich auch irgendwann ein fester Bestandteil von Facebook-Connect wird.

Aber Facebook wäre nicht Facebook, wenn sie einfach nur einen klassischen OpenID-Login umsetzen würden. Wie Carsten Pötter auf SpreadOpenID beschreibt, plant Facebook eine Art OpenID-Auto-Discovery:

Facebook will automatically check to see if users have logged into any OpenID account when they hit Facebook.com, and give them the option to automatically login to Facebook without entering new information.

Leider ist dieses Feature, wohl nicht global für alle OpenID-Provider und definitiv nicht ohne Directed Identity möglich… aber man wird sehen (vielleicht spinn ich hier im Blog demnächst mal ein paar Szenarien (Worst-Cases) durch).


1 Die Atom Activity Extensions erweitert die Atom Spezifikation um eine Aktivitäten-Syntax. Die Idee entstand im Rahmen des DiSo-Projekts und wird unter anderem auch schon von MySpace und YIID unterstützt. Darauf werde ich demnächst sicherlich noch etwas detaillierter eingehen.