Website-Relaunch für SYSCOMM

14. März 2006

SYSCOMM - Kommunikationstraining für Techniker

Gerade in die freie Wildbahn entlassen: Der Relaunch der Website von SYSCOMM, einem Institut für Coaching, Kommunikationstrainings, systemische Beratung und Rhetorik.

Wichtigste Vorgaben bei der Neuentwicklung waren:

  • Einfache Selbst-Wartung der Website durch den Eigentümer, speziell die häufig vorkommende Pflege der Seminartermine sollte mühelos zu erledigen sein.
  • Einbindung zukunftsträchtiger Techniken wie Web Feeds (RSS).

Realisiert habe ich die Site natürlich mit Textpattern, dem einfach einsetzbaren kostenlosen CMS. Neueinträge von Schulungsterminen sind so im Gegensatz zur vorher existierenden Lösung mit statischen HTML-Seiten ein Klacks.

Nebenbei mitgenommen wurde beim Redesign auch ein integrierter Corporate Blog (Buzzword-kompatible Umschreibung für eine News-Sektion mit Kommentarfunktion).

Textpattern-Feinheiten

Die Grundlage der Umsetzung bildet natürlich der altbewährte Textpattern-Beipacktext für Webmaster. Der Inhalt von syscomm.at besteht aus sehr vielen kleinen Teilen wie eben den Terminen für Seminare oder den einzelnen Statements der Schulungsteilnehmer, die optimal in den Bausteinen (forms) von Textpattern abbildbar sind.

Etwas Hirnschmalz ist in die Darstellung des Seminarkalenders geflossen. Jeder Termineintrag ist ein Artikel, dessen Veröffentlichungsdatum auf den ersten Tag des Schulungstermins gesetzt wird. Ausgegeben werden nur die Artikel, die in der Zukunft liegen (<txp:article time="future" />), damit fallen automatisch vergangene Seminartermine aus der Darstellung.

Bei jedem angeführten Schulungstermin werden Detailinformationen zum Kursinhalt angeboten, im Gegenzug findet der Interessent bei der Detailbeschreibung der einzelnen Kurse alle dazu geplanten Kurstermine.

Die Darstellung der Kalenderblätter erledigt ein kleines Plugin, das das Veröffentlichungsdatum in eine Folge von <span>-Elementen für Tag, Monat und Jahr zerlegt, und etwas CSS-Spielerei.

Was wäre Textpattern ohne Plugins? Brauchbar, ja durchaus. Aber flexibel einsetzbar wird Textpattern erst durch die vielen kleinen und hilfreichen Erweiterungen.

Da wäre einmal das unverzichtbare Schwergewicht upm_img_popper, ohne das eine stressfreie Integration von Bildern nicht vorstellbar wäre. Hier starten ja gerade ernsthafte Ansätze, diese Funktionen in den Textpattern-Kern zu bringen.

Nicht mehr verzichten möchte ich auf chh_if_data von Coke Harrington. chh_if_data prüft, ob damit umklammerte Textpattern-Tags ein Ergebnis liefern und also etwas darstellen wollen, oder ob das Resultat leer bleibt. Ich prüfe damit beispielweise ab, ob in einer der Benutzervariablen eines Artikels Text enthalten ist. Wenn nicht, wird ein alternativer Text ausgegeben. Damit baue ich sehr flexibel einsetzbare Bausteine und Seitenvorlagen, die sich gut durch die Daten der einzelnen Artikel beeinflussen lassen.

Navigation, die einfache Art

Die Navigation ist auf zwei Ebenen geteilt. In der ersten Ebene wird auf die Textpattern-Sektionen verzweigt, die zweite Ebene bilden Menüeinträge für die Artikel der jeweiligen Sektion.

Der gerade angezeigt Artikel muss natürlich in der Navigation hervorgehoben werden, aber wie? Lösungen über CSS mit einer eindeutigen id des body-Elements, die ja leicht aus der Artikelnummer ableitbar wäre, sind nicht einfach zu pflegen und erfordern Änderungen am Stylesheet, sobald ein weiterer Artikel geschrieben wird. Das kann man dem Webseitenbetreiber nicht zumuten…

Der Weg zum Ziel führt über ein paar einfach Schritte:

1. Baue eine sortierte Liste, die Links auf alle Artikel der aktiven Sektion enthält:

<ul>
<txp:article form="nav" sortby="custom_1" sortdir="asc" />
</ul>

2. Baue den oben verwendeten Baustein nav, der einen Link auf den Artikel ausgibt, und gib diesem Link eine spezielle CSS-Klasse (active), wenn er der laut URL gerade angezeigte ist.

Was man dazu wissen muss: Textpattern hält in der Variablen pretext, einem Array, alle möglichen Informationen, die es aus der URL der gerade dargestellten Seite herausklaubt, wie zum Beispiel die Sektion oder eben auch die id des gerade angezeigten Artikels. Dazu ein bisschen PHP zum Vergleich zwischen den beiden ids, fertig ist das Ganze:

<li<txp:php>
 # $pretext contains article properties,
 # according to current URL.
 # compare to current article in nav list.
global $thisarticle; global $pretext;
$isactive =
 ($pretext['id'] == $thisarticle['thisid']) ?
 ' class="active"' : '';
echo $isactive;
</txp:php>>
<txp:permlink>
<txp:chh_if_data>
  <txp:custom_field name="menu-text" />
<txp:else />
  <txp:title />
</txp:chh_if_data>
</txp:permlink>
</li>
</pre>

Für den Website-Betreiber ist das Navigationsmenü dadurch absolut wartungsfrei und beliebig erweiterbar, und daher kann ich diese Site dann auch mit gutem Gewissen jemandem in die Hand geben, der Ergänzungen und Erweiterungen ohne große HTML- oder CSS-Kenntnisse selbst erledigen will.

Unter der Motorhaube

Für die Zugriffsstatistik sorgt SlimStat, das mit meinem Plugin wet_slimpattern in Textpattern integriert ist.

Die Icons stammen von Exploding Boy und Mark James, beides Iconsammlungen mit wirklich breit verwendbaren und unaufdringlichen Symbolen. Für illustrierende Fotos verwende ich immer lieber die Sammlung von Photocase.com und bin jedes Mal wieder positiv überrascht, wie einfach ich zu jedem Thema passende Bilder finde.

Alles in allem eine schöne runde Lösung aus frei verfügbaren Open-Source-Bausteinen und etwas projektspezifischer Programmierung.