microformats.org wird 7… Alles Gute!

Zur Feier des Tages hat sich Frances Berriman die Mühe gemacht, die letzten 7 Jahre zusammen zu fassen und einen Ausblick auf die kommenden Änderungen zu geben.

Da ich, seit ich bloggen kann, schon über Microformats berichte, will ich den Rückblick nicht weiter kommentieren und nur auf die kommende Weiterentwicklung ein wenig eingehen.

Microformats und HTML5

Seit dem ich das letzte mal über diese Kombination geschrieben habe, hat sich leider nicht viel geändert… Die Microformats Community weigert sich weiterhin auf Microdata oder RDFa „upzugraden“ und hält krampfhaft an den semantischen classes fest. Nichtsdestotrotz macht HTML5 mit <time /> und <data /> dem leidigen Thema abbr-design-pattern bzw. value-class-pattern ein Ende. Statt Meta-Informationen umständlich in HTML-Attributen zu verwurschteln, können Termine und GEO Daten bald sauber dargestellt werden:

<time class="dtstart" datetime="2006-09-23">a Saturday</time>
...
<data class="geo" value="37.386013;-122.082932" >Mountain View</data>

Immerhin! Mehr dazu im microformats-wiki.

Namespaces

Die wohl größten Veränderungen sind aber die geplanten Pseudo-Namespaces welche hauptsächlich das Parsen von Microformats vereinfachen sollen. Microformats waren bisher sehr fehleranfällig, da sie sich die class-Attribute mit CSS und JavaScript zu teilen hatten. Es besteht immer die Gefahr dass rein für CSS genutzte Attribute fälschlicherweise für Microformats genutzt wurden oder dass die semantischen Class-Names einem Re-Design zum Opfer fielen. Die Prefixes ‚h-‚, ‚p-‚, ‚u-‚, ‚dt-‚ und ‚e-‚ sollen das Zukünftig verhindern und ein generisches parsen ermöglichen.

'h-' kennzeichnet einen Microformats-Container

Bisher ist die Microformats Community etwas inkonsequent mit der Benennung ihrer Formate… Mal mit beginnendem „v“, mal mit „h“ und in seltenen Fällen auch ohne oder mit anderem Buchstaben:

• hCard: class="vcard"
• hAtom: class="hfeed"
• adr: class="adr"
• xFolk: class="xfolkentry"
• XOXO: class="xoxo"

Mit den Prefixes soll das jetzt alles vereinheitlicht werden:

• hCard: class="h-card"
• hAtom: class="h-feed"
• adr: class="h-adr"

'p-' zeichnet Properties aus

Die mit ‚p-‚ gekennzeichnet Properties sollten, wenn nicht expliziert definiert, als Plain-Text interpretiert werden (kein HTML). Ein klassisches Property ist beispielsweise der Name einer Person:

<div class="h-card">
 <span class="p-fn">Tantek Çelik</span>
</div>

'e-' zeichnet Rich Text aus

Das ‚e-‚ Prefix könnte als Abkürzung für „element tree“, „embedded markup“, oder „encapsulated markup“ stehen und kann im Gegansatz zu den Properties auch HTML-Code beinhalten. In hAtom könnte der entry-content zu e-entry-content und bei der hReview die description zur e-description werden.

'dt-' für DateTime und 'u-' für URL

Aus dtstart wird dt-start und alle URL-Felder bekommen ein vorgestelltes ‚u-‚:

<a class="u-url" href="...">...</a>

<img class="u-photo" src="..." />

Die URL kann in bestimmten Situtionen auch weg fallen, dazu aber im nächsten Beispiel mehr…

Simpel und unabhängig vom Format

Zukünftig soll es auch nicht mehr so umständlich sein Informationen semantisch auszuzeichnen. Will man derzeit einen simplen Link mit einer hCard versehen, muss man ihn wie folgt aufblähen:

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

Nach der Überarbeitung soll folgendes reichen:

<a class="h-card" href="http://tantek.com/">Tantek Çelik</a>

Dabei gilt die Regel: Wenn es sich bei (z.B.) einer vCard um einen Link oder ein Bild handelt, kann man auf ‚u-*‚ und ‚p-name‚ verzichten… so ungefär zumindest 😉

Mehr dazu im Microformats-Wiki: implied properties

Außerdem kommt mit v2 eine Anleitung wie Microformats auf andere Formate wie JSON gemappt werden sollen. Aus…

<a class="h-card" href="http://benward.me">Ben Ward</a>

wird…

[{
  "type": ["h-card"],
  "properties": {
    "name": ["Frances Berriman"] 
  }
}]

Fazit

Ich bin mir noch nicht ganz sicher was ich von den geplanten Änderungen halten soll… die Nutzung der neuen HTML5 Tags und die Vereinfachung und Vereinheitlichung der Formate finde ich gut und notwendig… Auch eine einheitliche Regel, wie Microformats in anderen Formaten abgebildet werden sollen (z.B. JSON) macht durchaus Sinn (warum das Sinn macht, hier)… aber den Pseudo-Namespaces kann ich bisher nichts abgewinnen! Der „Namespace“ sorgt zwar für mehr Qualität beim Parsen der Microformats, aber auf Kosten des semantischen HTMLs.

Microformats sollten weiterhin für schönes, semantisches HTML sorgen und mehr nicht. Geht es um maschinenlesbaren Code, sollte man mit der Zeit gehen und auf Microdata oder RDFa setzen. Ob man seinen Quelltext an Microformats v2 anpasst oder mit Schema.org auszeichnet sollte kaum mehr Aufwand sein.

…Übrigens: Wer noch mehr über die Vorteile von Microdata gegenüber Microformats lesen will, sollte sich die Ausgabe 10 des Webstandards-Magazin durchlesen oder die Reihe „Microdata – wie Microformats bloß besser…“ hier im Blog!

You are a true RSS aficionado! While others are drowning in social media noise, you enjoy the simplicity and control of RSS. Congrats!

• Microdata – Semantisches HTML5
• Microdata – wie Microformats bloß besser… (Teil 1)

Falls jemand noch einen Fehler entdeckt… sagt mir bitte bescheid!

Ich hoffe ich komme demnächst auch mal zu „Microdata – wie Microformats bloß besser… (Teil 2)“.

You are a true RSS aficionado! While others are drowning in social media noise, you enjoy the simplicity and control of RSS. Congrats!

Besonders spannend finde ich folgenden Abschnitt aus Manu Spornys Blogpost zu dem neuen Draft:

I specifically did not remove the Microdata section from the HTML5+RDFa specification because it provides competition for RDFa – competition is a good thing. It forces the RDFa Task Force to re-think some assumptions we’ve made and to see if we can provide both backwards-compatibility and some of the features provided via Microformats as well as Ian’s Microdata proposal.

Ich versteh das jetzt mal so, dass endlich beide Parteien verstanden haben die RDFa Task Force verstanden hat dass sowohl RDFa als auch Microformats ihre Daseinsberechtigung haben und Microdata die Vorteile beider Standards schön vereint.

Mal schaun ob ich die Tage mal etwas Zeit finde, die einzelnen Standards nochmal detaillierter Vorzustellen bzw. zu Vergleichen und nochmal zu beschreiben warum die Idee hinter Microdata so großartig ist!

via Manu Sporny

Hey there, RSS reader! You’re one of a special few, choosing this old-school yet awesome way of staying informed. Kudos!

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 itemscope-Attribut gekennzeichnet und hat mehrere Properties ausgezeichnet durch itemprop-Attribute.

<div itemscope>
 <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 und mit itemtype das Format festlegen.

<div itemscope itemtype="http://microformats.org/profile/hcard">
 <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 itemscope itemtype="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 itemscope itemtype="http://microformats.org/profile/hcard">
  <a itemprop="url" href="https://notiz.blog">
    <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="https://notiz.blog">
      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

You are a true RSS aficionado! While others are drowning in social media noise, you enjoy the simplicity and control of RSS. Congrats!

Das folgende wirklich sinnvolle Beispiel zählt alle hCards einer Seite und gibt das Ergebnis als System-Message aus:

Components.utils.import("resource://gre/modules/Microformats.js");
CmdUtils.CreateCommand({
  name: "count-hcards",
  execute: function() {
    var doc = Application.activeWindow.activeTab.document;	
    var uFcount = Microformats.count('hCard', doc);
    displayMessage( uFcount );
  }
})

Martin McEvoy hat ein paar wesentlich schickere Commands gebaut, die mit Hilfe des Transformrs Mikroformate verarbeitet. Da für diese Verarbeitung ein Redirect (oder das öffnen einer zweiten Seite) notwendig ist, überprüft er mit Hilfe der Microformats-API zuerst ob sich die notwendigen Mikroformate überhaupt auf der Seite befinden.

Der folgende Code (von Martin) testet z.B. ob mind. ein hCalendar verfügbar ist, bevor er diesen verarbeitet:

CmdUtils.CreateCommand({
  icon: "http://transformr.co.uk/favicon.ico",
  name: "get-webcal",
  author: {name: "Martin McEvoy", email: "weborganics@googlemail.com"},
  help: "Subscribe to a webcal feed using the 
<a href=\"http://microformats.org/wiki/hcalendar\">hCalendar</a> Microformat.",
  preview: function ( pblock ) {
    pblock.innerHTML = "Subscribe to web calendar";
  },
  execute: function() {
    var doc = Application.activeWindow.activeTab.document;
    var mFcount = Microformats.count('hCalendar', doc,{ showHidden : true });
    if (mFcount > 0) {
      var url = "webcal://transformr.co.uk/hcalendar/";
      url += CmdUtils.getWindowInsecure().location ; 
      Utils.openUrlInBrowser(url);
    } else {
      displayMessage('Sorry No hCalendar Events Found!');
    }
  }
})

Quelle: http://transformr.co.uk/commands

Weitere großartige Ubiquity-Commands im Microfromats-Wiki…

RSS readers like you are the unsung heroes of the internet. Keep up the good work!

The HTML WG is encouraged to provide a mechanism to permit independently developed vocabularies such as Internationalization Tag Set (ITS), Ruby, and RDFa to be mixed into HTML documents.

…aber wer weiß wie lange das noch dauert. Das heißt wohl, dass die Microformats noch eine gewisse Zeit lang als Übergangslösung her halten müssen. Aber das ist ne andere Geschichte…

Eigentlich wollte ich auf zwei HTML5 – Elemente eingehen, die eine schicke Alternative zu den bisherigen (in vielen Microformats verwendeten) abbr-design-pattern bietet.

Der <time />-Tag

Das time Element ermöglicht das kennzeichnen eines Datums in z.B. Blogposts o.Ä.

The primary use cases for these elements are for marking up publication dates e.g. in blog entries, and for marking event dates in hCalendar markup.

Also:

<time datetime="2006-09-23">a Saturday</time>

statt:

<abbr title="2006-09-23">a Saturday</abbr>

Ein hCalendar könnte dann so aussehen:

<div class="vevent">
  <span class="summary">event title</span>
  <time datetime="2006-09-23" class="dtstart dtend">a Saturday</time>
</div>

Custom data attributes (data-)

Ein custom data attribute ist ein frei benutzbares Attribut um Elemente mit Metadaten anzureichern. Die einzige Vorgabe ist, dass es mit data- beginnen muss. Ein Beispiel:

<div class="monkey" data-arms="2"
     data-legs="2" data-race="chimp">
  Cheetah
</div>

Ideal auch als <abbr />-Ersatz bei z.B. dem Geo-Microformat.

Also:

<div class="geo" data-latitude="49.5483" data-longitude="8.6661">Weinheim</div>

statt:

<abbr class="geo" title="49.5483;8.6661">Weinheim</abbr>

Fazit

(X)HTML (egal ob XHTML2 mit RDFa oder X/HTML5) wird also definitiv ein semantisches Feuerwerk, ganz im Sinne von Tim Berners Lee…

Ich freu mich 🙂

Hey there, RSS reader! You’re one of a special few, choosing this old-school yet awesome way of staying informed. Kudos!

Um den Komfort der strukturellen Inhalte auch auf den Desktop zu bringen gibt es ein schickes Plugin für den Flock Blog-Editor.

Blogplus erweitert den Blog-Editor von Flock um eine Menge neuer Features, um unter anderem auch strukturierter bloggen zu können:

Preset Markup allows you to create, store, edit and apply preset html markup to highlighted text, such as preformatted signatures, css styles or html element attributes (id, class, title). This is particulalrly useful for improving productivity for microformat creation. See help page for more info.

oder:

hCalendar allows you to create microformats hCalendar events. This is included as it is a little easier than going the Preset Markup route for the complicated hCalendar markup.

Ich hoffe MarsEdit kommt demnächst mit einem ähnlichen Feature 🙂

Congratulations on being an RSS reader! You are part of an elite group of people who know how to stay updated in style.

hCard und RDFa vCard:

<body xmlns:contact="http://www.w3.org/2001/vcard-rdf/3.0#">
  <div class="vcard">
    <span class="fn" property="contact:fn">Max Mustermann</span>
    <a class="email" rel="contact:email" href="mailto:max.mustermann@example.org">
      max.mustermann@example.org
    </a>
    <div class="adr" property="contact:adr">
      <span class="street-address" property="contact:street">Street</span>
      <span class="country-name" property="contact:country">Country</span>
    </div>
  </div>
</body>

…oder hCalendar und RDFa iCalendar:

<body xmlns:cal="http://www.w3.org/2002/12/cal/ical#">
  <div class="vevent" instanceof="cal:Vevent">
    <span class="summary" property="cal:summary">Ein Event</span>
    <span property="cal:dtstart" content="20070916T1600-0500">
      <abbr class="dtstart" title="20070916T1600-0500">
        September 16th at 4pm.
      </abbr>
    </span>
  </div>
</body>

Legende: Microformats bzw. RDFa

So, als nächstes schau ich mir mal die RDFa Attribute näher an…

You are a master of efficiency! By using RSS, you save time and avoid distractions. 👏