In Zusammenarbeit mit der Web-Empowered Church [1] hat Ron Halls Webagentur Busy Noggin eine Extension entwickelt, die die Umsetzung von Webprojekten mit TemplaVoila
vereinfachen soll. Busy Noggin [2] stellte Entwicklern in einem geschlossenen Bereich bereits vor geraumer Zeit die Beta-Version 0.8 zum Testen bereit. Diese musste allerdings noch durch Einspielen von Datenbanken und fileadmin-Ordnern installiert werden. Mittlerweile liegt das Framework in der Version 2.0.2 vor und kann jetzt ohne Anmeldung heruntergeladen werden. Die Web-Empowered Church hat die aktuelle Version ein wenig angepasst und als Extension „templavoila_framework“ [3] ins TYPO3 Extension Repository gestellt, was die Einbindung deutlich erleichtert.

In TYPO3 gibt es bereits einige gute Ansätze, die Umsetzung von Layouts zu vereinfachen. Wozu also dieses Framework? Wer die Website von Busy Noggin besucht, findet dort diesen Satz:

Wer also neue Funktionalitäten sucht, wird bei diesem Framework nicht fündig, auch wenn bei einigen Funktionen dieser Gedanke aufkommen mag. Die Hauptintention, die Ron Hall verfolgt, ist die Vereinfachung von Arbeitsabläufen bei der Erstellung von Webseiten mittels TemplaVoila. Somit richtet sich dieses Framework auch hauptsächlich an Entwickler, die ihren Workflow mit TemplaVoila effizienter gestalten wollen. Kenntnisse von HTML, CSS und TypoScript sollten auf jeden Fall vorhanden sein, auch wenn es mittlerweile einige fertige Layouts im TER gibt, die den Einstieg für die eigenen Templates stark vereinfachen.

Die Grundannahme, die diesem Framework zugrunde liegt, ist, dass sich eine Website in folgende Bereiche gliedern lässt:

• Header: ein Kopfbereich, der zum Beispiel ein Logo, eine Suche und eventuell Navigation beinhaltet
• Footer: ein Abbinderbereich für Copyright oder andere rechtliche Informationen
• Main Content: der Hauptbereich für den Inhalt der Seite
• Additional Content: zusätzliche Inhaltsbereiche, die beispielsweise Container oder Banner beinhalten
• Generated Content: seitenübergreifende Inhaltsbereiche wie Links oder Menüs, die auf mehreren Seiten erscheinen sollen
• Feature: ein Seitenbereich für Stimmungsbilder oder Animationen, der meist zu Beginn der Seite zu finden ist

Insgesamt werden mit der Installation 15 gemappte Templates ausgeliefert, die per CSS angepasst werden können. Es entfällt also das individuelle Mappen der einzelnen Bereiche. Stattdessen verwendet der Entwickler eines oder mehrere der fertigen Templates und passt die bereitgestellten Marker per TypoScript für seine Zwecke an.

Wer bisher alle Bereiche per TemplaVoila einzeln gemappt hat, muss hier etwas umdenken. Die Bereiche werden größer gefasst und benötigte Funktionalitäten in den Bereichen werden per TypoScript hinzugefügt. Anstatt beispielsweise das Logo, eine Suchbox oder die Navigation individuell mit TemplaVoila zu mappen, stehen mehrere Marker bereit, deren Inhalt per TypoScript angepasst werden kann. Die am häufigsten verwendeten sind dabei sicherlich die Marker „header“ und „footer“.

Wem das nicht reicht, dem stehen jeweils vor und nach den gemappten Elementen pre- und post-Marker zur Verfügung. Dadurch kann man ein individuelles HTML-Gerüst rund um die einzelnen Bereiche erstellen. Das Framework gibt fast nur die Position der Bereiche vor, aber kaum HTML-Code. Ohnehin lässt sich ein gut strukturiertes HTML-Gerüst durch Stylesheets in eine Vielzahl von individuellen Layouts wandeln. Somit sollte ein erfahrener Entwickler mit den mitgelieferten Templates tatsächlich auskommen. Auf der Website von css Zen Garden [4] kann man sehr schön sehen, welche unterschiedlichen Designs mit ein und der selben HTML-Struktur möglich sind.

Die eigentliche Stärke des Frameworks machen die flexiblen Content-Elemente (Flexible Content Elements, FCE) aus. Neun FCEs werden bereitgestellt. Neben zwei Elementen zum Einbinden von Bildern existieren sechs Elemente zum weiteren Unterteilen der im Seitenlayout definierten Contentbereiche. Dabei handelt es sich um jeweils drei Spalten- und Modulelemente, die die Seite in zwei, drei oder vier Spalten unterteilen können. Durch eine Schachtelung dieser Elemente sind theoretisch auch noch weitere Spaltenaufteilungen möglich.

Eine interessante TypoScript-Programmierung sorgt dafür, dass jede Spalte über ihre Breiteninformationen verfügt, wodurch darin liegende Bildelemente automatisch skaliert werden. Wer sich schon immer gefragt hat, wozu Register verwendet werden können, sollte sich den TypoScript-Code auf jeden Fall genauer ansehen. Für diejenigen, die eigenen HTML-Code vor oder nach den verwendeten Content-Elementen benötigen, gibt es noch ein HTML-Wrapper-Element, das dies ermöglicht.

Die Berechnung der Spaltenbreiten kann nur funktionieren, wenn der Installation mitgeteilt wird, welcher Bereich welche Ursprungsgröße hat. Layouts, die auf prozentualen Spaltenbreiten basieren, sind daher mit dem Framework nicht möglich.

Um das Framework zu testen, bietet es sich an, ein Starterpaket von der WEC herunterzuladen [5]. Hierin befinden sich neben der Framework-Extension bereits einige fertige Skins und weitere nützliche Extensions, die das Aufsetzen einer Seite erleichtern. Durch den vorhandenen Content bekommt man schnell einen Überblick über die Möglichkeiten des Frameworks.

Man kann natürlich auch nur die Extension aus dem TER installieren. Voraussetzung ist die TemplaVoila-Extension ab Version 1.4.2 und TYPO3 ab Version 4.3. Eine Menüstruktur mit einem Systemordner für die TemplaVoila-Templates wird ebenfalls benötigt.

Bei der Installation werden zwei Eingaben erwartet: zum einen der Pfad zu dem Ordner, in dem die eigenen Skins gespeichert werden, und zum anderen der Ordner für die TemplaVoila-Template-Objekte. In dem angegebenen Order sucht das System nach selbst geschriebenen Skins und legt dort, wenn gewünscht, kopierte Skins ab.

Durch die Auswahl des TemplaVoila-Systemordners und anschließendes Betätigen der Import-Schaltfläche werden die vom Framework benötigten Template-Objekte importiert. Dieser Import darf nur einmal durchgeführt werden, weil sonst die importierten Objekte mehrfach vorhanden sind. Der Extension-Manager weist aber darauf hin, falls sich bereits Template-Objekte in dem gewählten Ordner befinden.

Der einfachste Weg, ein Layout auf seine Seiten zu bekommen, besteht darin, eine fertige Skin-Extension aus dem TER zu verwenden. Der Suchbegriff „skin_“ reduziert die Ergebnisse in der TER-Suche. Die Namen der Framework-Skins beginnen alle mit „TV Framework Skin:“, um sie von den TYPO3-Skins zu unterscheiden.

Spalten- und Modulelemente

Die Spalten- und Modulelemente machen dieses Framework so wertvoll, weil sie eine Möglichkeit bieten, die Contentbereiche individuell aufzulockern. Die Elemente teilen dabei die Seite nicht nur zu gleichen Teilen auf, sondern bieten unterschiedliche Teilungsverhältnisse an, die auch ein Dritteln oder Vierteln der Bereiche zulassen. Die Module verfügen noch über weitere Einstellungsmöglichkeiten, die beispielsweise eine grafische Modulüberschrift erzeugen oder das Layout der Spalten bestimmen. Es lohnt sich auf jeden Fall, mit den Einstellungsmöglichkeiten herumzuspielen, um ein Gefühl für die Möglichkeiten zu bekommen.

Nach der Installation eines Skins kann dieses sehr komfortabel über die Template-Einstellungen einem Auftritt zugewiesen werden. Das Framework erweitert dieses Modul um einen neuen Reiter „Skin Selector“. Hier wird das gewünschte Skin einfach aus einer Liste der verfügbaren Skins ausgewählt.

Durch die Auswahl wird der TypoScript-Code für das PAGE-Objekt und die TemplaVoila-Einbindung automatisch miterzeugt, wodurch es theoretisch möglich ist, ohne eine einzige Zeile Setup-Code auszukommen. Alle benötigten Seiteneinstellungen können anschließend über den Konstanten-Manager vorgenommen werden. Die Einstellungen für das Framework finden sich unter dem Punkt „SITE CONSTANTS“.

Jetzt fehlt nur noch die Zuweisung eines der 15 vorliegenden Templates in den Seiteneigenschaften und der Auftritt ist bereit. Natürlich kann man, wie bei TemplaVoila üblich, den Unterseiten andere Templates zuweisen.

Der „Skin Selector“ bietet einen guten Einstieg, um eigene Skins zu erstellen. Durch die Schaltfläche „Copy Skin“ kann man ein bestehendes Skin kopieren und dadurch als Vorlage verwenden. Diese Kopie befindet sich dann in dem Ordner, der bei der Installation angegeben wurde, und heißt vorerst wie das Original. Der Name des Ordners sollte geändert werden, um dem neuen Skin einen eindeutigeren Namen zu geben.

In dem Skin-Ordner befindet sich eine Datei „info.txt“, in der der Titel und eine Beschreibung für den „Skin Selector“ angegeben werden können. Wer ein Vorschaubild für sein Skin erstellen möchte, kann dieses in der Datei „screenshot.gif“ ablegen. Die eigentliche Arbeit, nämlich die Anpassung der Stylesheets und der HTML-Struktur, kann im nächsten Schritt erfolgen. Die Stylesheet-Dateien befinden sich im Ordner „css“, die HTML-Struktur wird per TypoScript angepasst. Die Datei „skin_typoskript.ts“ im Ordner „typoscript“ beinhaltet alle Marker, die per TypoScript angepasst werden können.

Abschließend werden dem Framework noch die Breiten der Contentbereiche mitgeteilt. In die Datei „skin_constants.ts“ werden dafür unter „containerWidth“ für jedes Template (f1a – f3d) die Bereichsbreiten eingetragen. Zusätzlich können hier noch weitere Standardeinstellungen wie die Abstände innerhalb oder zwischen Modulblöcken eingetragen werden. Das fertig erstellte Skin kann man anschließend über den „Skin Selector“ dem Auftritt zuweisen.

Wer seine Seiten mit TemplaVoila entwickelt und mit festen Contentbreiten arbeitet, sollte auf jeden Fall einen Blick auf das „Framework für TemplaVoila“ werfen. Sobald die Vorgehensweisen verinnerlicht sind, ist das Framework eine echte Erleichterung beim Aufsetzen einer neuen Seite. Lästige Standardschritte entfallen und es bleibt mehr Zeit für die Umsetzung des Designs. Durch das Vorhalten verschiedener Skins kann man innerhalb von wenigen Minuten zwischen Layouts wechseln. Die Spalten- und Modulelemente geben Redakteuren mehr Gestaltungsfreiraum und das oft bei CMS-generierten Webseiten kritisierte Blocklayout wird deutlich aufgelockert.