Mozilla hat vor kurzem den ersten release candidate von Firefox 3 veröffentlicht. Und da Firefox der beste Freund aller Interface Designer, User Experience Consultants und New Media Hippies ist, hier meine ersten Eindrücke zur neuen Version.

[UPDATE: Die finale Version von Firefox 3 ist jetzt erhältlich. Die Server von Mozilla sind erwartungsgemäß völlig überlastet, über diese Mirrors (Mac, Win) hatte ich aber trotzdem Erfolg.]

Das Interface

Ein großes Thema beim neuen Interface war die bessere (optische) Einbindung in das jeweilige Betriebssystem. Dazu gibt es für die relevanten Betriebssysteme eigene Iconsets. Auch die verschiedenen Leisten wurden farblich angepasst, unter OSX ähnelt die Oberfläche jetzt mehr der von Safari.

Gleiches gilt für Formulare auf Websites, die nun mit nativem highlighting (?) und den bekannten glossy Buttons erscheinen.

Prinzipiell finde ich den Ansatz, den Browser besser ins OS zu integrieren, gut. Die dunklen Flächen sind vielleicht gewöhnungsbedürftig. Die Fläche für Favicons ist jetzt mit einem grauen Gradient hinterlegt. Keine wirkliche Hürde, sollte man aber zukünftig im Hinterkopf behalten. (Wobei ich hier anscheinend den richtigen Farbton getroffen habe, um im neuen Interface nicht aufzufallen).

Obskures

Zugegeben, das Interface von Firefox zu überarbeiten ist keine Kleinigkeit. Trotzdem sind manche Entwicklungen einfach nur seltsam.

Warum sind die Navigationsbuttons (Seite zurück / Seite vor) asymmetrisch? Ist rückwärts wichtiger als vorwärts? Glücklicherweise gibt es eine Option für gleich große Buttons (Rechtsklick auf die Navigationsleiste -> Anpassen -> bei “kleine Symbole” Häkchen setzen), trotzdem verwirrend.

Das RSS-Icon unter OSX ist blau. Begründet seitens Mozilla damit, dass Orange in OSX ja ohnehin kaum vorkommt und die Nutzer das RSS-Icon auch in anderen Farben erkennen. Man könnte auch einfach die Finger von einem Standard lassen, den Mozilla mit Firefox 2 selber geprägt hat.

Sonstiges

Die URL-Vorschau im Adressfenster wurde um Favicons, eine direkte Funktion für Bookmarks und eine zweite Zeile für den Titel der Website erweitert. Wenig platzsparend, aber nett anzuschauen.

Die Geschwindigkeit von Firefox 3 ist gefühlt besser, was auch Wunschdenken oder Einbildung sein kann. Leider funktionieren die meisten Add-ons noch nicht und versprochene Features, wie die native Unterstützung von Microformats, sind noch nicht intigriert. Es empfiehlt sich also auf die finale Version zu warten.

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.

Dazu wird der eigentliche Gegenstand des Bildes transparent gemacht und auf einen farbigen Hintergrund gelegt. Zum Beispiel kann man so die Farbe eines Logos (oder eines anderen Gegenstandes, Beispiel iPod shuffle Seite) einfach per CSS ändern, statt jedes mal eine neue Bilddatei hochzuladen.

Alpha Mask PNG Demo

Der Standardloop, wie er in der Dokumentation beschrieben ist:

//Header einbinden


//posts vorhanden?


//wenn ja, posts nacheinander ausgeben










//wenn nein, Nachricht ausgeben

Not Found



//Ende des Loops


//Sidebar und Footer einbinden

Platziert man dieses schöne Konstrukt innerhalb der index.php im Themeverzeichnis, werden alle vorhandenen Einträge nacheinander aufgelistet, entsprechend der Struktur innerhalb des while-Blocks.

Angenommen, eine auf WordPress basierende Website soll eine Unterseite namens “News” haben, auf der die Einträge erscheinen. Ab ins Verzeichnis des Themes, news.php erstellen. Der oben genannte Code wird am Anfang mit dem benötigten Template Name erweitert, damit WordPress das Template erkennt.

In der Administrationsoberfläche wird entsprechend eine Seite mit dem Namen “News” erstellt, die das Template zugewiesen bekommt.

Stolz die frische Seite getestet:

Unspektakulär. Statt Titel und Uhrzeit der jeweiligen Einträge nacheinander auszugeben, erscheint nur der Titel der angelegten Page und das momentane Datum.

Um den Loop in Page Templates zu verwenden, muss folgende Zeile zu Anfang des Loops hinzugefügt werden:

Die Funktion query_posts stellt die benötigte Anfrage, damit anschließend Einträge ausgegeben werden können. Dabei kann man verschiedene Parameter übergeben. Das obige Beispiel gibt an, dass die Beiträge in absteigender Reihenfolge ausgegeben werden sollen. Weitere Beispiele für die Verwendung der Funktion gibt es in der Dokumentation.

Der fertige Code:

Not Found

Voilà.