Ausgabe 20 vom SCREENGUIDE Magazin ist draußen und das bedeutet, dass auch meine Kolumne "20" wird!

(Naja… In Ausgabe 1 war es streng genommen "nur" ein Artikel über Microformats (Semantic Surfing), aber thematisch ist da ja kein großer Unterschied 😉 )

In der aktuellen Kolumne geht es jedenfalls um HTML5 und DRM:

Mit der Entwicklung eines Digital-Rights-Management-Systems für HTML5 hat das W3C in den letzten Wochen für viel Aufmerksamkeit gesorgt. Warum arbeitet gerade die Organisation, die sich „Open Standards“ und „Web for All“ zu Grundsätzen gemacht hat, an einem System, um genau diese einzuschränken?

Viel Spaß beim lesen und auf die nächsten 20 Ausgaben 🙂

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

In practice Web Intents work a bit like mailto: links, defining an action and then passing it along to the browser, which allows the user to choose how to handle the action. The difference is that instead of opening a desktop app, Web Intents connect to web services.

Der Vergleich ist simple und ich habe mir die Frage gestellt: Wieso nicht einfach wirklich unterschiedliche Schemes für die jeweiligen Anforderungen definieren? Eine App kann beim Browser anmelden dass sie share:// oder subscribe:// unterstützt und bei einem Klick auf einen entsprechenden Link, öffnet sich (statt der E-Mail App) eben die entsprechende Web-App.

…vor kurzem hab ich dann mal ein wenig mit Superfeedrs msgboy herumgespielt und entdeckt dass es bei HTML5 wirklich Custom-Schemes gibt die man frei definieren kann!

Mit folgendem Befehl kann man beim Browser einen eigenen Protocol-Handler setzen:

navigator.registerProtocolHandler('web+share', 'http://spread.ly/?url=%s', 'Spread.ly');

Alle neuen Schemes sollten mit "web+" beginnen, ausnahmen sind schon bestehende Schemes, wie z.B. "mailto", "mms", "nntp", "rtsp" oder "webcal".

Der passende a-Tag zum oben genannten Beispiel müsste also folgendermaßen aussehen:

<a href="web+share:http://pfefferle.org">Share this Page</a>

Klickt ein User den Link, wird einfach das %s vom Handler mit dem href ersetzt und aufgerufen:

http://spread.ly/?url=web+share:http://pfefferle.org

Bisher war ich ja ein großer Web Intents Fan (und bin es auch immer noch), aber für solche simplen Aktionen wie "Share", "Like", "Subscribe" oder "Follow" reicht doch ein simples Custom-Scheme vollkommen aus. Kein unnötiges JavaScript (mal abgesehen vom Registrieren des Handlers), nur ein wenig HTML. Großartig!

Protocol-Handler lassen sich übrigens auch abhängig vom Mime-Type setzen:

navigator.registerContentHandler('application/atom+xml', 'http://www.google.com/ig/add?feedurl=%s', 'Google Reader')

Bei allen Web-Dokumenten mit dem Mime-Type application/atom+xml sollte der Browser jetzt nachfragen ob er die URL mit dem Google-Reader öffnen soll.

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

Das Theme verschönert übrigens das notizBlog und ist aus folgenden Gründen großartig:

POSH – Plain Old Semantic HTML5

SemPress basiert, wie schon erwähnt, auf Toolbox und die HTML5 Struktur wurde auch weitestgehend beibehalten. Ich habe lediglich einige Tags in (meiner Meinung nach) semantisch passendere getauscht. Im Detail:

• Semantische Tags – Ich habe einfach mal geschaut welche Tags Toolbox noch nicht unterstützt und sie dann, hoffentlich richtig eingebaut :).
• HTML5 Input-Types – SemPress unterstützt einige der neuen Input-Types wie z.B. „search“, „email“ und „url“. Mehr dazu in einem älteren Artikel.

Websemantics

Eigentlich hab ich das ganze Projekt (wie schon erwähnt) ja nur gestartet, damit ich mal wieder was produktives mit Microformats machen und Schema.org lernen kann. Hier also der Semantic Overload:

• Microformats – Toolbox selbst unterstütz Microformats ja schon von Haus aus und ich musste nur kleine hAtom fixes und die richtigen Profile Header setzen.
• Microformats v2 – Ich bin zwar kein großer Fan von Microformats 2, aber ich wollte testen wie leicht sich das Theme um neues HTML-Classes erweitern lässt und wie viel Arbeit es bedeutet. SemPress unterstützt hCard 2 und hAtom 2.
• Microdata/Schema.org – Ähnlich wie bei Microformats v2 wollte ich testen wie schwer es ist, Schema.org einzubauen. Das Theme unterstützt http://schema.org/Blog, http://schema.org/BlogPosting and http://schema.org/Person.

Was ich noch gerne einbauen will ist hMedia für alle möglichen Medieninhalte wie z.B. auch WordPress „Images“ und „Galleries“ und natürlich auch das Schema.org Pendant.

WordPress Features

Neben dem ganzen semantik Gedöns, hab ich natürlich auch ne Menge WordPress-Features eingebaut.

• Post Thumbnails – SemPress unterstützt diverse Post-Thumbnail Größen (maximal 600px) und versucht sie bestmöglich darzustellen. Alle Bilder kleiner als 480px werden z.B. mit float right in den Text integriert.
• Post Types – Im Gegensatz zu Toolbox unterstützt SemPress folgende Post-Types: „aside, status, gallery, video, audio, link, image“ und fast alle haben auch ein individuelles Layout spendiert bekommen.
• …außerdem: Localization, Sidebar-Widgets und die WordPress‘ Navigation Menu.

Mal schauen ob ich noch ein Custom-Header-Image mit rein nehmen werde…

CSS und Design

Zuerst sollte SemPress gar kein Design bekommen, aber man muss ja auch bei CSS und Fonts auf dem Laufenden bleiben! Ich mach das ja schließlich nicht zum Spaß sondern zur Fortbildung :). Da ich aber kein wirklich großer Designer bin, hab ich mir ne Menge Ideen und CSS bei folgenden großartigen Projekten ausgeliehen:

• Das Basis-CSS hab‘ ich von Toolbox übernommen.
• Die Tabellen, Buttons, Input-Felder, Code-Boxen habe ich mir bei Twitters Bootstrap gemopst.
• Die Icons, die vor einigen Artikeln erscheinen (z.B. die vom Typ Video oder Audio) sind von von Font Awesome.
• Danke auch an HTML5 Boilerplate für einige Ideen!

Ein paar weitere Kleinigkeiten (auf die ich auch bissle Stolz bin):

• Man kann den bei dem <code />-Tag die Programmiersprache mir data-programming-language="PHP" setzen und es wird wie folgend angezeigt: <?php echo "Hallo Welt"; ?>
• Das Theme kommt komplett ohne Bilder aus.

Responsive Design

Das Theme sollte eigentlich und hoffentlich auf jedem Gerät gut aussehen und unterstützt drei++ Breiten:

• Volle Breite + Sidebar rechts
• Volle Breite + Zweispaltige Sidebar am Ende der Seite
• Variable Breite (die, für das Gerät beste Breite mit einem) + Einspaltige Sidebar am Ende der Seite.

Außerdem passt sich das Menü automatisch an die Größen an und das ganz ohne JavaScript! …beim Drop-Down Menü gibt es zwar noch keine Möglichkeit das Menü wieder zu schließen, aber wer will das schon 😉

Was jetzt noch?

Da mir das themen ne Menge Spaß gemacht hat werde ich wohl auch weiterhin fleißig an SemPress weiter basteln und es noch semantischer und WordPressiger machen. Falls ihr irgendwelche Fehler findet oder Dinge besser könnt wie ich… bitte helft mir und forkt SemPress!

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

Dass HTML5 ein paar neue input-types definiert, habe ich durch die hcard-input-brainstorming so am Rande auf geschnappt, mir aber nichts weiter dabei gedacht… Durch Zufall bin ich heute aber über folgenden Tweet von Sylvia Egger gestoßen:

Just implemented native #HTML5 form validation on #wp comments form – it' quite simple & should be in #wp default theme

und habe bissle recherchiert… Mit den neuen Input-Types ist es doch tatsächlich möglich Input-Felder über den Browser validieren zu lassen… Ich bin begeistert! 🙂

Trägt man beispielsweise eine Nicht-Email-Adresse in folgendes Feld…

<input type="email" />

bekommt man…

Schön wenn man sich noch über solche Kleinigkeiten freuen kann oder 😉

Lange rede kurzer Sinn: Da WordPress alle Formulare an zentraler Stelle definiert, ist es ziemlich einfach sie mit ein paar neuen Input-Types zu versehen. Mit dem folgenden Code wird das Kommentar-Formular mit den Typen "email" und "url" und das Suchformular mit dem Typ "search" (funktioniert nur in den WebKit-Browsern) erweitert:

Code-Update: Eric Eggert hat mich in den Kommentaren darauf hingewiesen, dass man mit <input required /> auch noch die Pflichtfelder validieren kann. Danke!

Code-Update 2: Dank maxe werden jetzt auch die WordPress Settings berücksichtigt (Comment author must fill out name and e-mail) und das "Comment"-Feld ist natürlich auch required

<?php
/*
Plugin Name: html5 input-types
Plugin URI: https://notiz.blog/
Description: Adds the new HTML5 input-types to WordPress' default forms
Version: 0.1
Author: pfefferle
Author URI: https://notiz.blog/
*/

add_filter("comment_form_default_fields", "change_comment_input_types");

function change_comment_input_types($fields) {
  if (get_option("require_name_email", false)) {
    $fields['author'] = preg_replace('/<input/', '<input required', $fields['author']);
    $fields['email'] = preg_replace('/"text"/', '"email" required', $fields['email']);
  } else {
    $fields['email'] = preg_replace('/"text"/', '"email"', $fields['email']);
  }

  $fields['url'] = preg_replace('/"text"/', '"url"', $fields['url']);

  return $fields;
}

add_filter("get_search_form", "change_search_form_input_types");

function change_search_form_input_types($form) {
  return preg_replace('/"text"/', '"search"', $form);
}

add_filter("comment_form_field_comment", "change_comment_field_input_types");

function change_comment_field_input_types($field) {
  return preg_replace('/<textarea/', '<textarea required', $field);
}
?>

Funktioniert als Plugin und in Child-Themes (einfach in die functions.php kopieren).

Danke auch an Marc Görtz der mich über Twitter reichlich mit Links zu dem Thema versorgt hat:

• A Form of Madness (den hab ich selber gefunden)
• HTML5 Pattern
• Fallback jQuery Validator

Testen könnt ihr das übrigens hier auf notiz.blog.

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

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

Am Tag als delicious starb machten sich alle (zu recht) sorgen um ihre Bookmarks und es entfachte eine kleine Diskussion unter Geeks, wo denn die eigenen Daten am sichersten wären: Jeremy Keith verwaltet seine Bookmarks nun selbst und schickt nur Kopien an delicious & Co., Tantek Celik tweetet auf seinem eigenen Webspace und sendet nur eine Kopie an Twitter, …
Früher hatte man seine Daten in Sozialen Netzen und benutzte APIs um sie in die Sidebar des eigenen Blogs zu bekommen und jetzt läuft alles andersrum?

HTML is the new HTML5, W3C Introduces an HTML5 Logo

HTML5 heißt jetzt nur noch HTML und zur Feier der Umbenennung spendiert das W3C ein neues HTML5 Logo 🙂 Großartig!

Eight HTML5 Drafts Updated

…außerdem wurden die Working Drafts von RDFa 1.1 und Microdata angepasst.

2011 Steering Committee Election Results

Die DataPortability Org. hat die neuen Chefs gewählt und bekannt gegeben… Mr. Topf is leider raus 🙁

RSS readers like you are the secret sauce of the internet. Keep rocking and staying informed!

Der Browser und das Federated Web

Ein großes Problem im dezentralen Web: Der gemeine User kann nichts mit Identifiern anfangen, weder mit URLs (wie es NoseRub versucht hat) noch mit E-Mail Adressen (wie es Status.Net mit Webfinger versucht). Austin King zeigt auf Mozilla Webdev wie man dem, mit Hilfe des Browsers und der JavaScript Methoden registerProtocolHandler und postMessage, entgegen wirken kann. XAuth funktioniert übrigens nach einem ähnlichen Prinzip.

» RegisterProtocolHandler Enhancing the Federated Web

Thunderbird Contacts

Endlich gibt es das Contacts-Addon auch für den Thunerbird, denn da gehören sie ja auch hin.

The goal of add-on is to experiment in evolving the address book of Thunderbird beyond what it currently is today. Thunderbird Contacts isn’t a standalone address book, instead it understands that your contacts live on the web as much as they do inside Thunderbird. The add-on can pull in contact data from various services where your contacts already exist.

» Thunderbird Contacts

AOL und der Webfinger

AOL implementiert Webfinger für @aol.com und @aim.com.

<?xml version='1.0' encoding='UTF-8'?>
<XRD xmlns='http://docs.oasis-open.org/ns/xri/xrd-1.0'>
  <!-- Host-wide Information -->
  <Link rel='http://specs.openid.net/auth/2.0/provider' href='https://api.screenname.aol.com/auth/openidServer'>
    <Title>OpenID 2.0 Provider</Title>
  </Link>
  <!-- Resource-specific Information -->
  <Link rel='lrdd' template='https://api.screenname.aol.com/auth/describe?uri={uri}'>
    <Title>Resource Descriptor</Title>
  </Link>
</XRD>

» Webfinger enabled for @aol.com

Hey there, RSS reader! You’re cool. Keep being awesome! 😎

Vielleicht hat ja jemand Lust mir bei der Befüllung etwas zu helfen (ich hab meine eigene freie Zeit etwas überschätzt)? Eventuell spendet ja auch jemand einen schon fertigen Artikel/Blogbeitrag den wir als Basis nehmen könnten.

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

Warum ich so an der Microdata Idee festhalte? Frei nach der Microformats Ideologie: „Paving the cow paths“ sollte man sich bei der Entwicklung eines neuen Standards hauptsächlich am Nutzerverhalten orientieren: Wenn es für ein Problem noch keinen Standard gab, wie hat man sich bisher beholfen?

Yahoo!s Search-Monkey meint: mit Microformats!

• NUR hCard: 1,970,000,000
• eRDF + RDFa: 1,470,000,000

…und ich kann mich nur wiederholen:

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.

Naja… falls sich keine der oben genannten Semantiken durchsetzen sollte, freue ich mich schon auf folgendes:

<div itemscope=""
     itemtype="http://microformats.org/profile/hcard" 
     xmlns:vCard="http://www.w3.org/2006/vcard/ns#"   
     about="http://www.example.com" class="vcard">
  <span itemprop="fn" property="vCard:FN" class="fn">
    Max Mustermann
  </span>
</div>

(via Benjamin Nowack)

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

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 😉

Hey there, RSS reader! You’re cool. Keep being awesome! 😎

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>

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>

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>

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>

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>

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“

Thanks for reading this post via RSS. RSS is great, and you’re great for using it. ♥️

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

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

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!

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 🙂

RSS readers like you are the secret sauce of the internet. Keep rocking and staying informed!