Es ist vollbracht. Endlich ist mein Blogdesign fertig und das WordPress Standard Theme passé. Doch der Weg dahin war weitaus langwieriger als gedacht.

Die Wahl des richtigen Blog- / Content Management System

Zunächst galt es sich nach ca. einjähriger WordPress Abstinenz einen Überblick über die Templatestruktur und die gängigsten Befehle zu verschaffen. Das ging soweit auch recht flott von der Hand, da WordPress ja wirklich sehr sprechende Namen für die Kernfunktionen verwendet, die eigentlich wenig Raum für eine Fehlinterpretation lassen. Da das Layout größtenteils als Photoshop Entwurf stand waren die Grundzüge der Seite auch schnell WordPress näher gebracht.

An diesem Punkt entschied ich mich – zum Glück – für einen Test auf dem Livesystem. Ich habe also ein frisches WordPress installiert, mein neues Theme hochgeladen und wollte anschließend die benötigten Plugins installieren. Damit begann der Ärger. Ich konnte leider nicht die Funktion zur automatischen Installation aus dem Backend heraus nutzen, da WP anscheinend nicht nach außen kommunizieren konnte. Dem Fehler wollte ich als zuerst auf den Grund gehen. Hier meine Checkliste:

• Firewall Einstellungen: Jegliche Kommunikation von lokal nach „außen“ ist erlaubt – check
• PHP ist nicht im Safe Mode und kann auf entfernte Ressourcen zugreifen via
• fopen() – check
• fsockopen() – check
• cURL – check
• Dateirechte sind korrekt gesetzt, sprich der Besitzer der Dateien ist gleich dem ausführenden Benutzer der entsprechenden Apache Instanz – check

Was folgte war natürlich Ratlosigkeit. Nachdem ich nun einen Vormittag damit verbracht hatte dem Fehler auf den Grund zu gehen und leider keinen Erfolg dabei hatte kam ich ins Grübeln. Ist WordPress eigentlich das richtige System für mich? Was brauche ich eigentlich?

• 100% Kontrolle des HTML-Outputs
• Die Möglichkeit komfortabel statische Seiten anzulegen
• Weblog mit den üblichen Funktionen
• Optional: Verwaltung von Projekten im Portfolio

Klar, das kann WordPress – nur beim letzten Punkt war ich aufgrund mangelnder WP Erfahrung unsicher. Also die Gegenfrage: Was brauche ich nicht?

• Einen riesigen Overhead an Funktionen
• WYSIWYG Editor der nicht validen Code produziert
• Automatische Updates und automatische Plugin Installation die leider nicht funktionieren
• Eine Vielzahl nützlicher Plugins die jedoch meistens nicht genau das können, was man gerne hätte
• Eine iPhone Applikation zum Zugriff auf das Backend

Die Frage: Gibt es ein anderes System, dass meine Bedürfnisse eventuell besser bedienen kann? Da ich für einen Kunden viel mit ExpressionEngine arbeite,  kam mir dieses schlanke CMS als erstes in den Sinn. Mit seinem Funktionsumfang im Hinterkopf und meiner Checkliste vor mir kam ich dann schnell zu dem Ergebnis, dass es EE werden soll. Damit will ich jetzt keineswegs sagen, dass es besser/schlechter ist als WordPress und hier auch gar keinen großen Vergleich ziehen. Ich hatte es lediglich satt mich mit WordPress rumzuschlagen und wollte schneller zum gewünschten Ergebnis kommen.

Also habe ich erstmal eine frische ExpressionEngine auf dem Livesystem installiert und alle benötigten Features getestet, mit dem zufriedenstellenden Ergebnis, dass alles ohne viel „Gefummel“ funktionierte. Doch jetzt musste ich natürlich das schon annähernd fertige WordPress Theme für ExpressionEngine umbauen. Das ging jedoch viel schnell als gedacht von der Hand, es mussten ja lediglich die WordPress Tags durch die entsprechenden ExpressionEngine Derivate ausgetauscht werden. Nun noch schnell den bereits bestehenden Content portieren und fertig.
Rückblickend bin ich mit der Entscheidung sehr zufrieden, da ich aus meiner Sicht folgende Vorteile habe:

• Deutlich aufgeräumtere Templates ohne einen Wust aus PHP-Tags
• Bessere und feinere Kontrolle über meine Inhalte und deren Gliederung dank individueller „weblogs“ und eigenen Feldergruppen
• Dadurch auch die Möglichkeit meine Projekte im Portfolio perfekt mittels CMS zu verwalten
• Keine „unsauber arbeitenden“ Plugins
• Eine deutlich kleinere, aber dafür sehr kompetente Community

Soweit so gut, ich hatte also mein CMS gefunden und eine funktionsfähige Webseite mit den gewünschten Funktionen und dem gewünschten Aussehen.

Das Frontend - Auf zu neuen Ufern

Das Layout entstand in erster Linie an einem gemütlichen Wochenende in der Eifel. Wobei ich eigentlich nur den Header und ein paar kleinere Elemente (Datumshintergrund im Weblog, Footer) gestaltet habe. Für den Rest habe ich von Anfang an mit CSS im Prototypen experimentiert. Viele Dinge lassen sich meiner Meinung nach einfach am „lebenden Objekt“ besser ausprobieren. Außerdem funktioniert bei mir der kreative Prozess dabei oft besser als im Photoshop.

Technisch habe ich mich etwas experimentell vorgewagt und auf HTML5 sowie CSS3 gesetzt. Dabei benutze ich insbesondere die neuen Tags header, nav, article, aside und footer, sowie auf CSS Seite @font-face und Gradients. Was HTML5 angeht war mir der Artikel „Mal was Neues wagen“ von Marc Tobias Kunisch aus dem Webstandards Magazin (Ausgabe 04/09) eine große Hilfe. Dem Thema Schriftersetzung mittels @font-face mit cufón-Fallback werde ich mich noch ein mal gesondert zuwenden, da die momentan hier laufende Lösung noch nicht meiner vollen Zufriedenheit genügt.

Interaktionsdesign – Ein bisschen Spaß muss sein

Der nächste Schritt war das Interaktionsdesign mittels jQuery. Dieses zeigt sich an zwei Stellen der Webseite:
Einmal auf den Artikelseiten und im Portfolio. Auf den Artikelseiten habe ich mich dazu entschieden die Kommentare in einer kleineren Spalte (250px) neben dem zugehörigen Artikel anzuzeigen. Das bietet sich hier an, da ich zunächst nicht mit allzu vielen Kommentaren rechne und auch deren Länge im Regelfall eher überschaubar bleiben wird. Nichts desto trotz wollte ich eine Möglichkeit schaffen die es erlaubt auch längere Diskussionen führen zu können und trotzdem ein angenehmes Schriftbild und eine gute Lesbarkeit zu erzielen. Daher kann hier (durch einen Klick auf das Plus in der Überschrift) die Breite von Artikel und Kommentarspalte getauscht werden. Das heißt die Artikelspalte wird kleiner und es werden alle Elemente außer dem eigentlich Text ausgeblendet und die Kommentarspalte erhält die breite der Artikelspalte. Et voilà  auch längere Kommentare lassen sich ohne zu großen Scrollaufwand angenehm lesen.

In meinem kleinen Portfolio wollte ich zum einen etwas experimentieren und zum anderen den Spaßfaktor für den Besucher erhöhen. So werden hier die Projekte in einem Karussell angezeigt und können einzeln „umgeklappt“ werden, um weitere Informationen zur Umsetzung preiszugeben.
In beiden Fällen wurde darauf geachtet, dass auch bei deaktiviertem JavaScript eine vollwertige Nutzbarkeit gegeben ist („Unobstrusive JavaScript“).

Fazit

Ich habe endlich wieder eine, wie ich finde, schöne kleine Internetseite und auch endlich mit Weblog. Der Weg war sicherlich etwas steinig, aber auch sehr lehrreich. Jetzt hab ich genau das was ich wollte und bin sehr zufrieden damit.

Normalerweise bin ich ja der letzte der von vorlesungsfreier Zeit anstelle von Semesterferien spricht, doch die vergangenen 8 Wochen als Ferien zu bezeichnen wäre gänzlich falsch. Zwar habe ich ein paar Tage in Bergen (Norwegen) verleben können, das war es aber auch mit Ferien. Die restliche Zeit ging für Prüfungsvorbereitung, Abschluss des Programmierprojektes und arbeiten drauf.

Nunja, gestern hatte ich die letzte Prüfung und nun ist alles vorbei. Das neue Semester geht los und es bleibt zu hoffen, dass die kommenden Wochen etwas entspannter werden als die zurückliegenden. Vorallem hoffe ich, dass ich endlich schaffe dieses Blog voranzutreiben, vom Standardtheme wegzukommen und mein Webseiten Portfolio wieder online zu bringen. Außerdem ist ein Artikel zu GWT in Kombination mit jFreeChart geplant, da wir im Rahmen des Programmierprojektes eine Zoomfunktion für jFreeChart Graphen implementiert haben die ich gerne veröffentlichen würde. Also in diesem Sinne, immer schön gespannt bleiben!

Nachdem ich im Dezember voller Elan in die Blogosphäre gestartet bin kommt jetzt, pünktlich zum Jahresstart, die Einsicht, dass ich doch im Moment viel zu wenig Zeit habe um regelmäßig etwas zu schreiben. Vorallem wenn es mal darum geht mehr als ein paar Zeilen Code zu posten.  Aber sei es drum, dieses mal (das ist glaube ich der dritte Anlauf ein Blog auf die Beine zu stellen) gebe ich mich nicht so leicht geschlagen.
So werden die nächsten Wochen wenn überhaupt von kurzen Beiträgen geprägt die sich inhaltlich wohl in der Hauptsache mit GWT, Java oder 3D Characteranimation beschäftigen, eben den Themen die auch mich die nächsten Wochen bis zum Semeterende beschäftigen werden.
Vielleicht findet sich dann in der Vorlesungsfreienzeit auch mal eine freie Minute etwas am Design zu tun, wobei ich meinen Kalender schon abwesend den Kopf schütteln sehe.

Gerade habe ich mal schnell die Wordpress App für das iPhone eingerichtet und Teste sie mit diesem Post direkt mal. Dabei musste ich leider feststellen, dass das iPhone nicht das ideale Winterhandy ist: Handschuhe ausziehen bei um die 0 Grad ist doof. Anderseits würde ein anderes Handy da wahrscheinlich auch nicht helfen, die Tasten müssten schon sehr groß sein und weit auseinander liegen, um eine komfortable Bedienung mit Handschuhen zu ermöglichen! Das nur mal so als kurzer Gedanke auf dem Nachhauseweg.

Nachdem ich erfolgreich WP-Cufon eingebaut habe, um auch ein paar schicke “Nicht-Web-Schriften” zu verwenden (zunächst mal Yanones Kaffeesatz für die Überschriften) bin ich leider auf einen Fehler im Plugin gestoßen. Und zwar werden die zusätzlichen Javascript Dateien nicht wie in der Cufón API angegeben am Ende des body-Tags eingebunden, sondern am Anfang.

Das führte (laut Firebug) zu folgedem fehler:

Operation is not supported" code: "9 [Break on this error] var Cufon=(function(){var=function(){r… ;ap.marginBottom=U+"px"}}return C}})());

Das lässt sich aber ganz simpel beheben indem man in der wp-cufon.php einfach

add_action('wp_header', 'wpcufon_init');

in

add_action('wp_footer', 'wpcufon_init');

ändert.

Nun wird Cufón an der richtigen Stelle eingebunden und alles läuft wie gewünscht.