Text

· · zu lesen

Der Inhalt wurde an die neusten Änderungen der Microdata-Spezifikation angepasst. Letztes Update 30.01.2010. Microdata – wie Microformats bloß besser… (Teil 2): über „Namenskollisionen und Namespaces“ und „Informationen Referenzieren“

Wie schon erwähnt, vereint Microdata die Vorzüge von RDFa und Microformats in einem Standard… aber nicht nur das, Microdata (in Verbindung mit HTML5) bietet auch einige schicke Lösungen für diverse Microformats-Problemchen.

Das abbr-design-pattern oder das value-class-pattern

Microformats:

Das abbr-design-pattern ist bisher wohl das umstrittenste Pattern im Microformats-Wiki. Grund für die Kritik an dem Pattern ist die etwas unorthodoxe Verwendung des <abbr> Tags um maschinenlesbare Meta-Informationen bereit zu stellen.

<div class="vevent">
  <abbr class="dtstart" title="2007-10-05">October 5</abbr>
  ...
</div>Code-Sprache: HTML, XML (xml)

Eine erste Alternative aus der Microformats-Community ist das value-class-pattern, das zwar das Accessibility-Problem „behebt“ aber noch lange keine Perfekte Lösung bietet.

<div class="vevent">
  <span class='dtstart'>
    <span class='value-title' title='2007-10-05'> </span>
    October 5
  </span>
  ...
</div>Code-Sprache: HTML, XML (xml)

Der HTML-Code wird durch weitere Elemente unnötig aufgeblasen und das Pattern basiert auf teilweise leeren Elementen.

Microdata/HTML5:

In HTML5 gibt es dagegen ein spezielles Tag um Zeit und Datum sowohl user als auch maschinenlesbar zu machen.

<div itemscope
  itemtype="http://microformats.org/profile/hcalendar">
  <time itemprop="dtstart" datetime="2007-10-05">October 5</time>
  ...
</div>Code-Sprache: HTML, XML (xml)

Reine Meta-Informationen

Microformats:

Eigentlich spricht es gegen die Prinzipien der Microformats-Idee, reine Metadaten zu verwenden:

Visible data = more accurate data. By designing for humans first and making the data presentable (thus viewed and verified by humans), the data is inevitably more accurate, not only to begin with (as errors are easily/quickly noticed by those viewing the pages/sites), but over time as well; in that changes are noticed, and if data becomes out-of-date or obsolete, that’s more likely to be noticed as well. This is in direct contrast to „side files“ and invisible data like that contained in <meta> tags.
— Tantek Çelik

…aber GEO-Daten sind z.B. Informationen die der Benutzer nicht unbedingt sehen muss.

<div class="geo">
 <span class="latitude">37.386013</span>
 <span class="longitude">-122.082932</span>
</div>Code-Sprache: HTML, XML (xml)

Microdata/HTML5:

In HTML5 gibt es für dieses Problem eine recht schicke Lösung: Laut der Spezifikation sind <meta />-Tags im kompletten Quellcode (auch im body) erlaubt.

<div itemscope 
 itemtype="http://microformats.org/profile/hcard#geo">
 <meta itemprop="latitude" content="37.386013" />
 <meta itemprop="longitude" content="-122.082932" />
</div>Code-Sprache: HTML, XML (xml)

Fazit

Selbst wenn sich Microdata (item und itemprop) nicht durchsetzen sollte, sind <meta> und <time> schon ein echter „Segen“ für die Microformats-Community 🙂

Im zweiten Teil nehm‘ ich mir das include-pattern und das Problem der möglichen Namens–Kollisionen vor. Microdata – wie Microformats bloß besser… (Teil 2): über „Namenskollisionen und Namespaces“ und „Informationen Referenzieren“

Text

· · zu lesen

Manu Sporny und die RDFa Task Force haben es doch noch nicht geschafft, Ian Hickson davon zu überzeugen RDFa in HTML5 zu integrieren und versuchen es jetzt im Alleingang. Es gibt auch schon einen ersten Editors Draft von HTML5+RDFa.

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

Text

· · zu lesen

Der Inhalt wure an die neusten Änderungen der Microdata-Spezifikation angepasst. Letztes Update 30.01.2010.

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>Code-Sprache: HTML, XML (xml)

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>Code-Sprache: HTML, XML (xml)

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>Code-Sprache: HTML, XML (xml)

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>Code-Sprache: HTML, XML (xml)

…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>Code-Sprache: HTML, XML (xml)

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

Text

· · zu lesen

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!

Text

· · zu lesen

Naja, nicht wirklich aber immerhin hat es RDFa bis dato nicht in die HTML5 Spezifikation geschafft. Es gibt zwar einen Milestone…

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>Code-Sprache: HTML, XML (xml)

statt:

<abbr title="2006-09-23">a Saturday</abbr>Code-Sprache: HTML, XML (xml)

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>Code-Sprache: HTML, XML (xml)

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>Code-Sprache: HTML, XML (xml)

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>Code-Sprache: HTML, XML (xml)

statt:

<abbr class="geo" title="49.5483;8.6661">Weinheim</abbr>Code-Sprache: HTML, XML (xml)

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 🙂