Microformats sind schon mindestens drei Jahre im Umlauf. Das semantische Web ist aus dem täglichen Buzzword Bingo kaum noch wegzudenken. Trotzdem kommt die Idee nicht so richtig aus dem Quark. Das Prinzip besteht darin, normale (X)HTML-Tags mit bestimmten Attributen zu versehen, um einem Tag damit eine zusätzliche inhaltliche Ebene zu geben.

Einfaches Beispiel:

<a href=”http://hallowelt.de/”>Marc</a>

würde wie gewohnt einen Link zu Marcs Seite darstellen, ohne Microformats. Mittels XFN (eines von vielen Microformats) kann ich der Verbindung zwischen Marc und mir zusätzliche Semantik verleihen, indem ich unsere (frei erfundene) Beziehung näher klassifizere:

<a rel=”met colleague” href=”http://hallowelt.de/”>Marc</a>

Mit diesem kleinen Zusatz habe ich dem Link die Zusatzinformation hinzugefügt, dass Marc ein Kollege ist (colleague), den ich schon einmal getroffen habe (met). Voilá, Microformats.

Nachdem nun geklärt ist, dass Microformats sexy sind, wie kann man sie einfach implementieren? Nachfolgend der propagierte Ansatz in vier Schritten:

1. Welche Microformats?

Es gibt eine ganze Reihe von Formaten, die Methode zur Implementierung bleibt aber gleich. Die Beispielseite zu compound Microformats zeigt einige kombinierte Anwendungen der beliebtesten Microformats, inklusive Codebeispielen. Einfach die passende Kombination aussuchen. Ich habe mich für das Beispiel hCard + adr + geo entschieden.

2. Geoinformationen finden

Für die Geoinformationen im “geo”-Format benötigen wir die Latitude/Longitude-Angaben des jeweiligen Ortes. Also auf zum lat-long-finder.

3. Einbauen und Bestaunen

Im Beispiel der compound Microformats braucht man lediglich die entsprechenden Angaben zu verändern, die Struktur bleibt bestehen. Jetzt noch eine schöne Stelle auf der Website finden (im Optimalfall übergreifend, damit die Microformats auf allen Seiten zu finden sind) und das Ergebnis bestaunen.

Ich habe den Footer gewählt, da dieser auf allen Seiten gleich ist und die Geoinformationen da nicht sonderlich stören. Man könnte die Informationen auch per CSS verstecken.

4. Microformats testen & nutzen mit Operator (optional)

Die ersten drei Schritte würden ausreichen, wenn man die Microformats für Suchmaschinen, zukünftige Browser (Firefox 3 wird Microformats nativ unterstützen) oder andere Applikationen eingebaut hat.

Um selber Microformats auf Websites zu nutzen, gibt es unter anderem das Operator Add-on für Firefox. Damit erhält man eine (weitere) Toolbar, die vorhandene Microformats auf der betrachteten Seite anzeigt.

So, Beitrag zum semantischen Web getan. Fehlen nur noch die Killer Apps, die davon Gebrauch machen.

Nachfolgend im Schnelldurchlauf einige Bilder und Kommentare zur Methode (mit der auch die 3D-Version meines Logos auf der Startseite entstand).

Die gewünschte Form als Pfad im Vektorprogramm des Vertrauens anlegen.

Den Pfad ins 3D-Programm des Vertrauens importieren (hier am Beispiel von Cinema 4D, geht ebenso mit Blender oder anderen). Manche Programme unterstützen nur alte Versionen von Pfaddateien, Cinema 4D zum Beispiel akzeptiert nur .ai-Dateien, welche als Illustrator 8 abgespeichert wurden. Anschließend den Pfad extrudieren, woraus die Grundform für das 3D-Objekt entsteht.

Das Objekt aus frontaler Perspektive rendern, um für Photoshop eine Vorlage für Texturen zu erhalten.

Zusammenstellung der Szene, um die Anordnung der Objekte und die Kameraeinstellung zu testen.

Hinzufügen der Texturen. Möglicherweise muss hier ein wenig korrigiert werden, wenn Texturen nicht optimal auf dem Objekt platziert sind. Das geschieht entweder in der Textur selber oder im 3D-Programm durch verschiedene Projektionseinstellungen oder Tiling.

Rendern der Szene, leichte Politur in Photoshop, fertig!