Es ist mittlerweile schon über ein Jahr her, dass wir uns zu Viert aufmachten, russische Züge und tibetische Höhenpässe zu erkunden. Trotzdem hab ich mich nochmal daran gemacht, die Website komplett zu überarbeiten. Brotlose Kunst in Reinform.

Im Endeffekt störte mich an der alten Version die Geschwindigkeit und der fehlende Zusammenhang zwischen einzelnen Bildern.

Um die Geschwindigkeit zu verbessern, verabschiedete ich mich zunächst von meinem guten Bekannten WordPress und setzte voll und ganz auf CodeIgniter. Nicht nur weil ich dieses Framework während meiner Diplomarbeit schon verwendet hatte, sondern auch um die geplanten Änderungsmaßnahmen wesentlich einfacher durchführen zu können. Auf der anderen Seite hieß das aber auch, dass die Seitenstruktur komplett neu erarbeitet werden musste. Ergo ging viel Zeit flöten.

Der Zusammenhang der Bilder sollte über Farbwerte und Stichworte hergestellt werden.

Farben

Das mit den Farben war schwieriger als zunächst angedacht. Allein die RGB-Farbwerte auszulesen war mich nicht genug, sondern es musste der HSV-Farbraum werden. Nein, nichts mit Fussball. H = Farbton ( 0° – 360°), S=Farbsättigung und V=Hell/Dunkel (grobgesagt). Mit diesen Werten war es für mich einfacher einzelne Bilder zu vergleichen. Außerdem war der Farbregler besser zu gestalten. Für das Auslesen der Farbwerte war der Eintrag von Mikko (Color Analysis) sehr hilfreich.

Im Endeffekt kam in die Datenbank ein Red, Green, Blue, Hue, Saturation, Value und Websafe Wert. Zu jedem Bild 10 Werte auslesen lassen, bis der Rechner qualmte. Machte am Schluss 24,221 Farben (bei 2,551 Bildern … ja genau, doppelte Werte sind rausgeflogen).
Für die Farbauswahl musste natürlich ein selbst gebastelter Farbwähler her.
Beispiele:

R(100)G(50)B(250)R(23)G(10)B(100)R(227)G(57)B(4)R(98)G(179)B(89)

Stichworte

Das Filtern der Bilder sollte außerdem mit Hilfe von Stichworten erleichtert werden. Anders als bei den Farbwerten war das Setzen der Stichworte hier ein nicht zu unterschätzender Arbeitsschritt . Allerdings war diese Aufgabe mit Hilfe von Adobe Bridge relativ einfach durchzuführen.

Danach konnten die zugewiesenen Stichworte, die als Metadaten an die Bilder angehängt wurden, ausgelesen werden (Sprich PHP liest EXIF). Ich häts mir sicher auch einfacher machen können, aber naja … Die Außwahl an sich, sollte dem Benutzer außerdem den Zusammenhang zwischen den Stichworten darstellen. Am besten anschauen, dann wirds deutlicher:

Beispiele:

• Mongolei
• Mongolei + Stefan
• Stefan + Tibet
• Stefan + Tibet + Yardrog Yutsho
• Tibet + Yardrog Yutsho + Evelyn
• usw.

Von der Funktionalität her, sind das die zwei wesentlichen Neuerungen, die die Website aufzuweisen hat. Neben dem vermehrten Einsatz von AJAX (siehe das Tagebuch oder eine Einzelbildseite), graphischen Überarbeitungen, Auslesen der Geokoordinaten der Bilder, Darstellung der Reiseroute, Firlefanz wie Ausblenden einzelner Seitenblöcke …

Nachdem die Seite online zu begutachten ist, werden hier keine weiteren Screenshots folgen.

»Quer durch Asien

Eingesetzte Technik (u.a.):

• CodeIgniter (1.7.2)
• jQuery (1.4.2)

Gefunden in den Google Labs. Hier wird an einer neuen Möglichkeit gebastelt, Bilder in einen bessern Zusammenhang zu bringen bzw. Verbindungen zwischen ihnen visuell darzustellen. Mal verdeutlicht am typischen semantischen Problem Jaguar oder auch ganz klassisch Apple.

Einen interessanten Artikel gibt es bei Joshua Porter zu lesen. Er vergleicht die beiden social network Seiten facebook und twitter miteinander und kommt zu dem Schluss, dass facebook wohl langfristig das gleiche “Beziehungssystem” wie twitter verwenden wird. Einfacher Grund: Innerhalb von facebook gibt es nur die Möglichkeit “friend and Not Friend” zu sein. Bei twitter dagegen kann man die Nachrichten von anderen Leuten verfolgen ohne diese zu kennen bzw. befreundet zu sein. Das führt dazu, dass man bei twitter mehr “Verbindungen” besitzt, als bei facebook. Mehr Verbindungen, mehr Nutzer .. usw.
Wird spannend wie sich facebook entwickelt.
Link:Relationship Symmetry in Social Networks: Why Facebook will go Fully Asymmetric

In CSS Dateien ist es bekanntlich nicht möglich Variablen zu verwenden. Dies kann bei größeren Dateien und vor allem bei immer wieder verwendeten Styleangaben auf die Dauer ziemlich nervig sein kann.
Der einzige der sich freut, wenn die in mehreren Blöcken verwendeten Farbangabe geändert werden müssen, ist die Suchern/Ersetzen Funktion.
Jay Salvat zeigt auf  Nettuts+ wie es auch anders gehen könnte.
Einfach die Werte in Variablen am Anfang der CSS-Datei definieren und das schnelle Anpassen von Stylesheets wird auf einmal sehr einfach.
Ohne PHP und mod_rewrite geht allerdings nichts.

Link: How to Add Variables to Your CSS Files

Weitere Möglichkeit wird hier beschrieben, die es allerdings noch nicht zur Standardisierung geschafft hat.
Jens Meiert kommt mit der Frage auf, ob CSS Variablen überhaupt nötig sind.