Aufbau dieser Website

16. März 2011 - Autor: Markus Conrad

Ich möchte hier kurz darstellen, wie diese Seite in der aktuell vorliegenden Form entstanden ist. Meine Randbedingungen waren: Es sollte sich (natürlich) um ein absolut individuelles Design handeln und ich wollte ein gewisses Maß an Kreativität darstellen. Von den verschiedenen Geschmäckern und Vorlieben einmal abgesehen, schwärme ich persönlich für Grungedesign und habe mich somit in diese Richtung orientiert.

Die Inhalte sollten, unabhängig vom möglichen Zugriff auf irgendwelche Webeditoren oder Sourcecodes, jederzeit und von überall aus pflegbar sein. Mit anderen Worten: ein Content-Management-System (CMS) musste etabliert werden. Da ich mich schon seit längerem mit WordPress als Blogsystem auseinandersetze, habe ich hier WP als kombiniertes Blog-/CM-System eingesetzt. Es gibt bestimmt Produkte, die als reines CMS flexibler und vielleicht sogar noch besser geeignet sind als WP. Die Entwicklung und Verbreitung von WP ist aber in den letzten Jahren so rasant vonstatten gegangen, dass es eine große Fan- und Entwicklergemeinde hinter sich hat. Diese Tatsache wirkt sich natürlich sehr positiv auf Bugfixing, Theme- und Pluginentwicklung, Support und Informationsbeschaffung aus.

Außerdem habe ich ein komplett neues Theme aufbauen wollen, mit hundertprozentiger Kontrolle über den Code und ohne unnötige Templatedateien bzw. ungenutzte Codeschnipsel.

Der Aufbau der Seite gliederte sich letztlich in drei große Arbeitsbereiche: Erstellen des Layouts, Programmierung der einzelnen Templatedateien bzw. Stylesheets, Konfiguration des Backends und Erstellen der Inhalte.

Erstellen des Layouts

Der kreative und (fast) schwierigste Teil der Entwicklung war die Layouterstellung in Photoshop. Ich habe verschiedenen Ideen zur Gestaltung der Seite (unter Beibehaltung des etablierten Groblayouts mit Header, Sidebar, Content und Footer) grob skizziert (Scribble) und verworfen bzw. weiterentwickelt. Nach einigen Tagen hatte ich mich dann für das grobe Design entschieden und diese entsprechend skizziert. Der langwierigste Teil der Layoutarbeit war das Zusammensuchen und Bearbeiten des Bildmaterials in Photoshop. Ich habe insgesamt rund 60 (!) einzelne Stockfotografien verwendet und um diese zu finden bestimmt einige tausend Bilder gesichtet. Teilweise habe ich nur kleine, bzw. minimale Teile (z.B. Kekskrümel) der Bilder verwendet und diese musste ich fast immer vom jeweiligen Hintergrund freistellen, farblich anpassen, mit Dreck/Flecken/Eselsohren/Löchern etc. (Grungedesign halt ;-) ) versehen. Das fertige Gesamtlayout habe ich anschließend für die späterer Verwendung im Code in die spezifischen Einzelteile “zerlegt/zerschnitten”. Insgesamt habe ich hierfür wohl gut 3 bis 4 Wochen benötigt.

Aufbau der Template- und CSS-Dateien

In einem ersten Arbeitsschritt wird eine einzelne “normale” HTML-Datei mit den typischen Grundelementen (Wrapper, Header, Sidebar, Content, Footer etc.) angelegt und mit den Layoutelementen verbunden. Danach erfolgt die Aufteilung der Codeteile auf die einzelnen Templatedateien (nun als PHP-Dateien). Nun wird PHP-Code eingefügt, der für Ein-/ und Ausgabe der Seiteninhalte in eine MySQL-Datenbank und Verknüpfung mit dem WP-Backend sorgt.

Inhalte erstellen und Konfiguration des WP-Backends

Der leichtere Teil der Entwicklung ist die Erstellung von Inhalten (direkt per CMS bzw. via Backend). Neben dem Schreiben von Texten werden hier auch verschiedene Plugins installiert und in Betrieb genommen (z.B. das Lightscript-Plugin zur Bildpräsentation). Dieser Teil hat wenig mit Layout und Programmierung zu tun, wenn im vorigen Schritt (hoffentlich) alles richtig gemacht wurde.