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!

Wie baut man aus einer Holzschachtel für 2,50 Euro eine Docking Station Box, um das Kabelchaos an der Seite des MacBooks zu reduzieren? Diese Anleitung zeigt es.

Benötigte Teile:

• Holzschachtel aus dem Bastelbedarf im Baumarkt (Der, der wo wie was weiß.)
• Schleifpapier, verschiedene Körnungen (~100, ~400, ~800)
• Haftgrundierung, für Holz geeignet
• Buntlack (Farbe nach Wahl, fürs MacBook bevorzugt Super-Ultra-Hochglanz-Reinweiß oder Mattschwarz)
• optional: Magnetband und flache Metallstückchen für den Verschluss

Werkzeug

• Säge mit feinem Sägeblatt (Eisensäge)
• Feile (relativ fein)
• kleiner Schraubenzieher (je nach Box, für die Scharnierschrauben)
• Dremel mit verschiedenen Aufsätzen zum Schleifen, Schneiden, Bohren und Fräse

Der Rohling

Die unberührte Box aus dem Baumarkt. In der Regel aus Balsaholz gemacht, was sehr weich und leicht und daher gut zu verarbeiten ist. So ist die Schachtel allerdings noch zu hoch, um gut neben dem MacBook auszusehen. Außerdem stören noch Farbe, der kitschige Verschluss und die fehlenden Löcher für Kabel

Zuerst wird demnach die Oberseite von der Unterseite getrennt, und Scharniere sowie Verschluss entfernt. Nun kann man mit der Eisensäge einen Teil der oberen Hälfte absägen, um die Box insgesamt flacher zu machen.

Links die ursprüngliche Schachtel, in der Mitte die neue, flachere Version, rechts das MacBook als Referenzhöhe. Schon besser.

Damit die Löcher am Ende ungefähr zu den Anschlüssen passen, einfach die untere Hälfte der Box am MacBook anhalten und die Positionen der Löcher grob mit einem Stift anzeichnen. Ich habe hier den FireWire-Port ausgelassen, da ich den Anschluss höchstwahrscheinlich nicht brauche, es sollte aber kein Problem sein, alle Ports zu berücksichtigen.

Um die Löcher in die Unterseite zu machen, habe ich eine Kombination aus Bohr- und Schleifaufsätzen auf dem Dremel benutzt, was aber nicht unbedingt optimal ist. Wer die Möglichkeit hat, einen richtigen Fräsaufsatz zu verwenden, hat es wahrscheinlich einfacher. Durch das weiche Material setzen sich Schleifaufsätze schnell zu und verlieren nach einiger Zeit ihre Wirkung. Im Endeffekt sollte sich aber in jedem Keller irgendwas finden lassen, um die Löcher zu machen.

Anschließend fehlt noch das große Loch auf der Rückseite der Schachtel, durch das der Kabelbaum geleitet wird. Hier empfiehlt sich, die grobe Form des Lochs mit der Säge oder einer Trennscheibe auf dem Dremel grob vorzuschneiden. Danach Form und Ränder mit Schleifpapier oder weiterem Dremeln verschönern.

Die obere Hälfte ist flacher, die untere Hälfte hat die passenden Löcher, Zeit für eine kurze Probe. Im Bild sieht man gut das größte Problem des Kabelbaums: der DVI-Adapter. Durch das kurze Kabel zum MacBook muss der Adapter zur Hälfte in der Schachtel hängen, was ein wenig Gefummel sein kann. Durch die großartige Zubehörpolitik von Apple ist es leider auch nicht möglich, einen Adapter mit längerem Kabel zu bekommen. Sonst wäre es kein Problem, eine schmalere Schachtel zu verwenden. Unterhalb des Adapters sieht man zwei kleine Löcher die ich gemacht habe, um den Adapter später mit einem Draht besser fixieren zu können.

Zwischenstand: Hinten die Urversion, vorne die leicht überarbeitete Ausführung der Schachtel.

Lackieren

Das Cable Hub ist neben dem MacBook nichts wert, wenn es nicht weiß und zumindest ansatzweise shiny ist. Vor dem Lackieren müssen die beiden Teile der Schachtel komplett glattgeschliffen und sauber sein. Dazu werden verschiedene Schleifpapiere verwendet, von grob nach fein. Darauf achten, dass kein Schleifstaub mehr auf den Teilen ist (Aufpassen mit Wasser zur Reinigung: das Material quillt schnell auf und die glatte Struktur ist versaut).

Anschließend die erste Schicht Grundierung auftragen. Der Wohnungsmieter von heute baut sich dazu eine kleine Lackierkabine aus einem größeren Pappkarton, um die Bude nicht unter farbigen Staub zu setzen (props an DA für den Karton :) ). Zwei ausgediente Klopapierrollen bieten sich an, um die Teile in der “Kabine” anzurichten.

Nach guten 90 Minuten ist der Lack soweit getrocknet, dass man die Teile erneut mit feinem Schleifpapier anschleifen kann. Anschließend nochmals Grundierung auftragen. Nach erneutem Warten, Trocknen und Schleifen die erste Schicht Lack auftragen. Vorher an einer Stelle im Karton testsprühen, um ein Gefühl für die Entfernung und den Druck zu bekommen. Immer schön mit gleichmäßigen Bewegungen sprühen, damit sich keine Nasen bilden. Auch hier können mehrere Schichten aufgetragen werden, mit Anschleifen nach jedem Durchgang. Je mehr Zeit man in die Vorbereitung der Teile und die Lackierung investiert, desto besser wird das Finish.

Der “shiny-Test” nach zwei Schichten Lack. Meiner Meinung nach zufriedenstellend.

Nach der letzten Schicht brauchen die Teile mindestens 12 Stunden, um komplett durchgetrocknet zu sein. Anschließend die Scharniere wieder anbauen und die Kabel durch das Cable Hub führen. Das Anbauen der Scharniere kann eine extreme Fummelei sein, da die obere Hälfte, an der die Scharniere festgeschraubt waren, eventuell zu flach ist, um die Scharnierschrauben zu verwenden. Ich habe die Scharniere mit Heißkleber befestigt, was aber auf keinen Fall eine optimale Lösung ist. Bei Bedarf kann noch ein Magnetverschluss angebaut werden, mit zwei kleinen Streifen Magnetband an der oberen Hälfte und entsprechenden Gegenstücken aus Metall an der unteren Seite. Das Magnetband aus dem Baumarkt ist aber so schwach, dass es sich kaum lohnt

Fertig! Weißes Cable Hub mit Shiny Floor. :)

Anmerkungen

Wie bei jedem Projekt, ist auch hier die erste Version sehr Prototyp und sehr Alpha. Vor allem beim Verschlussmechanismus ist noch viel Platz für Optimierung. Bessere Magnete oder Klavierband statt der Scharniere wären hier sicher eine Möglichkeit. Auch beim Fräsen der Löcher und der Lackierung ist sicher noch Platz für Verbesserung, allerdings auch zu entsprechenden Kosten. Für das Hub in der jetzigen Form waren ungefähr 15 Euro für Material fällig (2,50 Euro für die Schachtel, ca. 10 Euro für den Lack, +Kleinkram). Mit dem verbleibenden Lack könnte man aber locker eine weitere Box lackieren.

Kritik und Anmerkungen aller Art bitte in die Comments.