Tag Archive for 'Semantic HTML'

Ubiquity und Microformats

Ubiquity bietet (neben Operator) endlich einen echten Anwendungsfall für die Microformats Firefox API. Die Microformats API basiert auf JavaScript und lässt sich somit auch direkt (und ohne viel Aufwand) in die Ubiquity-Commands integrieren.

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

HTML5 is made for Microformats

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>

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 :)

Structured blogging mit Flock

Strukturiertes bloggen (z.B. die Verwendung von Microformats in Blog-Posts) stellt eine gewisse Hürde für den Verfasser dar, da ein gewisser Mehraufwand in Form von strukturiertem/semantischem HTML notwenig ist. Um diese Hürde so gering wie möglich zu halten gibt es mittlerweile reichlich Plugins für die gängigsten Weblog-Tools sowie die verbreitetsten Mikroformate.

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

hcalendar-flock-blogging.jpg

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 :)

Semantic Overkill

Wer sich nicht zwischen RDFa und Microformats entscheiden kann und nicht sehr viel von dem Transformation-System GRDDL hält, kann seine HTML Inhalte natürlich auch mit beiden Formaten auszeichnen. Gerade die Profil- und Kalender-Semantiken bieten sich wegen ihrer Ähnlichkeit besonders an.

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…




Livecommunity powered by six groups