Schicke Klamotten im Web

Quasi als Appetithäppchen im voraus werden hier ein paar Beispiele präsentiert, welche unterschiedlichen schicken Klamotten eZ publish im WWW angezogen werden können. Wer sich nicht sattsehen kann, der findet über 500 Referenzen auf der Website von eZ systems , dem Hersteller von eZ publish. Ausserdem findet man dort eine Liste frei verfügbarer Designs , mit denen sich das Aussehen von eZ publish mit einem Klick ändern lässt.

Der Stoff, aus dem Design-Träume sind

Ein Webdesign ist schlichtweg das Aussehen einer Website, es besteht hauptsächlich aus XHTML , CSS und Grafiken. Wer eine Website mit Hilfe von eZ publish aufbauen will, für den kommen noch die eZ publish-Templates als weiteres Design-Element hinzu. Damit besteht ein eZ publish-Design aus folgenden Elementen, mit denen sich sozusagen ein Maßanzug für's Internet schneidern lässt:

• XHTML
• CSS
• Grafiken
• eZ publish-Templates

XHTML

Die Extensible Hypertext Markup Language (XHTML) ist sozusagen die Schablone, die die Form des virtuellen Maßanzugs vorgibt. Mit XHTML hat das W3C die Hypertext Markup Language (HTML) weiterentwickelt und sie XML -konform gemacht. Mittlerweile unterstützen alle gängigen Browser dieses Format. Neben dem Vorteil, dass XHTML programmiertechnisch sauberer aufgebaut ist, wird es vor allem im Zusammenspiel mit CSS interessant.

CSS

Während XHTML dazu eingesetzt wird, um die Inhalte einer Internetseite zu strukturieren , sind die sogenannnten Cascading Style Sheets (CSS) dazu da, die Inhalte zu formatieren , also ihnen ein bestimmtes Aussehen zu geben. CSS gibt unserem Web-Kleidungsstück seine Farbe.

In modernen Designs wird zum Beispiel nicht im XHTML festgelegt, welche Schriftgröße ein Absatz hat, sondern in der zugehörigen CSS-Datei. Dadurch lassen sich die selben Inhalte in unterschiedlicher Weise anzeigen, indem einfach unterschiedliche CSS-Anweisungen verwendet werden.

Grafiken

Seien es nun GIF -, PNG - oder JPEG -Bilddateien – ohne sie wäre das WWW nicht so bunt, daher gehören sie zu jeder Website dazu. Sie sind sozusagen die Accessoires zum Maßanzug. Wichtig ist, dass unterschieden wird zwischen den Grafiken, die Teil des Designs sind, zum Beispiel das Firmenlogo im Kopf der Seite, und den Bildern, die Teil des Inhalts sind, zum Beispiel ein Produkt- oder Nachrichtenfoto.

eZ publish-Templates

Das eZ publish-Design wird wesentlich in den eZ publish-Templates definiert. Hier werden die bisher genannten Design-Elemente XHTML, CSS und Grafiken zu einem Gesamtkunstwerk verbunden. Die eZ publish-Templates sind sozusagen der Faden, der die Teile des Design-Anzugs zusammenhält – genauer gesagt, die eZ publish Template Language. Sie ist eine spezielle Programmiersprache, mit der sich Inhalte aus der eZ publish-Datenbank holen und in XHTML einbinden lassen.

Aus Sicherheitsgründen kann in eZ publish-Templates kein PHP-Code eingesetzt werden, da sonst innerhalb von Templates Funktionen ausgeführt werden könnten, die es Angreifern ermöglichen, die eZ publish-Installation und ihre Serverumgebung zu sabbotieren. Dies ist außerdem eine sinnvolle Beschränkung, weil dadurch die Arbeitsteilung in einem Team zwischen Designern und Programmierern auch auf Ebene der Software klar getrennt ist.

Da fast die gesamte eZ publish-Oberfläche mit diesen Templates erstellt ist, kann man diese in den meisten Fällen als Vorlage für eigene Anpassungen verwenden. Man kann bei der Design-Entwicklung also auf schon vorhandene Lösungen zurückgreifen und im Learning-by-Doing-Verfahren vorgehen. Diese sogenannten Standard-Templates sind ausserdem noch weitgehend konform mit der BITV , weshalb eZ publish sich für barrierefreie Websites eignet . Außerdem lassen sich per eZ publish-Templates Inhalte nicht nur in XHTML, sondern auch in anderen Formaten darstellen, unter anderem XML, PDF, CSV, plain text, etc.

Zwirn und Faden

Nun sind die Grundmaterialien eines Design-Anzugs für eZ publish bekannt, wie können sie eingesetzt und miteinander verbunden werden? Was sind sozusagen Zwirn und Faden, mit denen die Design-Mode zusammen gehalten wird? Einerseits kann das Layout einer eZ publish-Site angepasst werden, ohne je in den Templates arbeiten zu müssen, nämlich per CSS. Andererseits hat man die volle Kontrolle über das Design erst, sobald man sich in die leicht zu erlernende Template-Sprache eingearbeitet hat.

Testsystem zum ausprobieren

Die nun folgenden Beispiele sollten alle unter der eZ publish-Version 3.6 oder neueren Versionen der 3.x-Familie lauffähig sein, gleich ob unter Linux, Windows oder MacOS X.

Wer das erste Mal eZ publish ausprobieren möchte und sich schnell ein Testsystem aufbauen will, dem stehen die mit "installer" bezeichneten Pakete zum freien Download bereit. Diese Pakete installieren in einem Rutsch sowohl die nötige Serverumgebung auf dem lokalen Computer wie auch eZ publish. Danach hat man eine fertige Testumgebung zum loslegen.

Diejenigen, die sich mit der LAMP-Umgebung auskennen und eventuell schon eine auf ihrem Entwicklungs-Computer installiert haben, die bedienen sich am besten der Source-Code-Pakete.

Alle hier genannten Pakete findet man auf der Download-Seite von eZ systems .

Pures CSS-Layouting

Weil die grafische Oberfläche von eZ publish ohne die Verwendung von Tabellen aufgebaut ist, können anspruchsvolle Designs rein auf der Basis von CSS-Änderungen erstellt werden. Man spricht hier von sogenanntem Table-Less-Design. Zum Beispiel sieht eZ publish nach einer Erstinstallation folgendermaßen aus:

Durch einen einfachen Kniff in der entsprechenden CSS-Datei kann das Menü von der rechten Seite auf die linke verschoben werden. Betrachtet man den Quelltext der oben im Screenshot festgehaltenen Seite, dann findet man dort das XHTML div -Tag, welches das Menü umschließt.

Mit etwas Erfahrung weiß man, dass die Formatierung dieses XHTML-Element in der site.css -Datei geändert werden kann. Wer über diese Erfahrung noch nicht verfügt, der schaut sich im Quelltext die oben enthaltenen Links zu den CSS-Stylesheets an und macht sich in den dort aufgelisteten Dateien auf die Suche nach der CSS-Referenz zu rightmenu . Der Link zum richtigen Stylesheet sieht im Quelltext übrigens so aus:

Dementsprechend öffnet man die site.css-Datei, welche in den Unterverzeichnissen relativ zum eZ publish-Installationsverzeichnis liegt. Wenn eZ publish unter Windows in C:\ezpublish installiert wurde, dann öffnet man C:\ezpublish\design\base\stylesheets\site.css . Unter Linux wäre es zum Beispiel /srv/www/htdocs/ezpublish/design/base/stylesheets/site.css .

Genug der Suche nach der richtigen Datei, weiter damit, das rechte Menü nach links zu verschieben. In der site.css befindet sich in etwas folgender Eintrag:

Hier nun einfach die float-Anweisung von right auf left ändern, und schon erhält man das gewünschte Resultat:

Weitere Details und Beispiele enthält der englische Online-Artikel Build Table-less CSS Layouts with eZ publish .

eZ publish Template-Sprache

Bevor der Sprung in die Vollen gewagt wird, soll die Angst vor der eZ publish Template-Sprache genommen werden. Die meisten Template-Änderungen, die täglich während der Entwicklung einer eZ publish-basierten Website anfallen, sind nämlich sehr einfach zu bewerkstelligen und benötigen nur grundlegendes Wissen über die Template-Sprache.

Zudem sind diese Grundlagen von einem WWW-Designer leicht zu erlernen, da er sich meist sowieso schon mit Javascript auskennt und daher programmiertechnisches Hintergrundwissen besitzt. Für jemanden mit PHP -Kenntnissen fällt die Template-Programmierung ohnehin sehr leicht, zumal die Template-Sprache seit eZ publish 3.6 verbessert und nahe an PHP angelehnt wurde. Hier nun ein paar Beispiele, um einen Eindruck zu bekommen, weitere Informationen findet man im Online-Handbuch zu eZ publish-Templates .

Template-Dateien

Alle Templates in eZ publish kann man an der Dateiendung .tpl erkennen. Bei einer Erstinstallation findet man die Standardtemplates im Verzeichnis design/standard/templates/ . Sie sind dort in einer bestimmten Struktur abgelegt, die später näher erläutert wird.

Ausgabe und Kommentare

Zu Beginn ein Demo-Code, der zeigt, wie Template-Code eingebunden wird, wie Inhalte ausgegeben werden, und wie Kommentare aussehen:

In diesem Beispiel sieht man, wie der eZ publish Template-Code in XHTML eingebunden wird, und zwar innerhalb geschweifter Klammern. Die Zeichenkette innerhalb der geschweiften Klammern und den Anführungszeichen wird im Browser ausgegeben, folglich erscheint dort "Dieser Text wird ausgegeben.". Der darüber angebrachte Template-Kommentar innerhalb der geschweiften Klammern und Sterne wird dagegen nicht im Browser angezeigt und erscheint auch nicht im Quelltext, er wird sozusagen von eZ publish geschluckt.

Variablen

Dieses Beispiel lässt sich verfeinern, indem eine Variable eingesetzt wird, die den Auszugebenden Text enthält:

Hier sieht man, wie die Variable quasi als Platzhalter innerhalb der p -Tags funktioniert und vorher mit der def -Direktive der Variable ein Wert zugewiesen wird, der dann im Browser erscheint. Das Ergebnis ist das selbe wie im vorigen Beispiel, allerdings ist der Template-Code nun flexibler, weil wir die Variable zum Beispiel an mehreren Stellen im XHTML einsetzen könnten, ihren Inhalt jedoch nur an einer Stelle definieren müssen.

Arrays und Schleifen

Eine spezielle Form von Variable sind sogenannte Arrays, in ihnen lassen sich mehrere Werte auf einmal speichern. Meist wird auf sie über eine Schleife zugegriffen, mit der sich jeder einzelne Wert nacheinander herauslesen lässt.

Mit Hilfe der foreach -Anweisung wird damit folgende Ausgabe im Browser erreicht:

• wert_1: Text 1.
• wert_2: Text 2.

Den Arbeitsplatz einrichten

Wer nach der Erstinstallation einfach so anfängt, Templates zu bearbeiten, auf den lauern einige Stolperfallen. Eine davon lauert in eZ publish in Form der Caches, die andere in einem selbst in Form menschlicher Fehlbarkeit – behoben werden können beide.

Cache ausschalten

In der Grundkonfiguration werden in eZ publish alle Templates nach dem ersten aufruf zwischengespeichert. Das heißt, wer sich schonmal seine eZ publish-Installation angeschaut hat und danach anfängt Templates zu ändern, der wird die Änderungen im Browser nicht sehen. Um alle Modifikationen während der Template-Entwicklung auch gleich im Browser zu sehen, muss der Template-Cache und am besten auch der Content-Cache ausgeschaltet werden.

Hierzu muss man ein paar Einträge in der Hauptkonfigurationsdatei ändern, sie heißt site.ini . Übrigens erkennt man Konfigurationsdateien in eZ publish generell daran, dass sie mit .ini enden. Eine site.ini liegt tatsächlich unterhalb des eZ publish-Installationsverzeichnis in settings/ , allerdings darf man diese unter keinen Umständen anrühren. Bei einem Upgrade auf eine neue eZ publish-Version würde diese Datei nämlich einfach überschrieben werden und alle Einstellungen wären verloren.

Stattdessen werden globale Änderungen in der site.ini gemacht, die in settings/override/ liegt. Wie mit dem Verzeichnisnamen "override" schon angedeutet wird, kann man hier die Grundeinstellungen, die in den Konfigurationsdateien unterhalb von settings/ gespeichert sind, überschreiben. Allerdings hängt man an den Namen der überschreibenden Datei noch .append.php an, woraus dann settings/override/site.ini.append.php wird. Auf diese Weise verfährt man mit allen Konfigurationsdateien und man sollte sich an diese Konvention halten, da sie durchaus ihren Sinn hat – zu erklären, welchen Sinn, das würde hier zu weit führen.

Nun gut, der Template- und Content-Cache soll ausgeschaltet werden. Hierzu öffnet man die settings/override/site.ini.append.php und ergänzt oder ändert die folgenden Einträge, falls schon vorhanden:

Ab sofort werden alle Templates direkt von der Festplatte durch eZ publish eingebunden, ohne sie zwischenzuspeichern. Gleiches gilt für Änderungen an den Inhalten und sowohl für das Frontend und die Administrationsoberfläche. Wer nun mit den Templates etwas spielt, der sieht die Änderungen sofort im Browser – aber welche Templates müssen geändert werden, um eine bestimmte Ansicht zu ändern? Dazu mehr im folgenden Abschnitt.

Debugging

Wer die Template-Welt von eZ publish auf eigene Faust erkunden will, der wird ungewollt den einen oder anderen Fehler machen und sich wundern, warum etwas nicht wie erwartet funktioniert. Mit Hilfe des in eZ publish eingebauten Debugging können diese schnell aufgespürt werden, denn im Debug-Modus zeigt eZ publish die Template-Datei und die Zeile an, in der der Fehler aufgetreten ist. Ausserdem hilft das Debugging, sich zurechtzufinden und zu erkennen, welches Template an welcher Stelle verwendet wird.

Seit eZ publish 3.6 gibt es eine Debug-Toolbox für Entwickler in der Benutzeroberfläche, mit der sich die Debug-Einstellungen komfortabel einstellen lassen. Sie sieht folgendermaßen aus und findet sich auf der rechten Seite der Administrationsoberfläche:

Mit der Checkbox "Debug output" kann generell der Debug-Modus ein- oder ausgeschalten werden. Die entsprechenden Debug-Informationen werden unterhalb des Seiteninhalts angezeigt. Aktiviert man "Template debug", dann erhält man wie gewünscht Fehler- oder OK-Meldungen zu den geladenen Templates. Wurde ein Template erfolgreich ausgeführt, dann wird dies zum Beispiel mit folgender Ausgabe quittiert.

Seit eZ publish 3.6 neu hinzugekommen ist eine Debug-Option, die die Liste aller verwendeten Templates für eine Seite anzeigt. Sie hilft, den Überblick zu bewahren und zu erkennen, welche Templates genau geladen wurden, da dort auch die Verzeichnispfade relativ zum eZ publish Installationsverzeichnis angezeigt werden:

Introspektion

Das Wort "Introspektion" hört sich schlimmer an als es ist – vielmehr ist es etwas sehr nützliches! Per Introspektion lässt sich zum Beispiel schnell in ein Template-Array hineinschauen, falls man wissen will, welche Werte es enhält:

Dieser Code liefert folgende Ausgabe im Browser:

Es ist der Template-Operator attribute(show) , der uns ins Innerste eines Arrays schauen lässt und automatisch die obige Anzeige erstellt. Ein eZ publish Template Operator ist im Grunde eine Funktion, die in Templates aufgerufen werden kann. Die Schreibweise $array|attribute(show) mit dem vertikalen Balken zwischen Array und Operator ist die sogenannte Pipe . Sie zeigt nichts anderes an, als dass der Wert vor der Pipe durch die Funktion hinter der Pipe verarbeitet wird.

Zusammenfassung und Ausblick

Dieser erste Teil vermittelt die Grundlagen, wie sozusagen ein Designer-Maßanzug für das Aussehen von eZ publish erstellt werden kann. Mit diesem Wissen können beruhigt die ersten Schritte gegangen werden und entsprechende Anpassungen selbst durchgeführt werden. Das Handwerkszeug hält man nun in den Händen.

Allerdings reicht dieses Wissen noch nicht, um eZ publish in anspruchsvollen Kundenprojekten einzusetzen. Der letzte Teil dieser zweiteiligen Artikelserie wird dementsprechend tiefer in das eZ publish Template-Framework eintauchen und Informationen zu Best Practices beim eZ publish-Design liefern.

Weiterführende Links

• Download von eZ publish
• Download frei erhältlicher Designs
• Deutschsprachiges Forum für allgemeine Fragen
• Englischsprachiges Design-Forum
• Online-Handbuch zur Konfiguration
• Online-Handbuch zu Templates
• Spezifikation zu verbesserter Template-Syntax (seit eZ publish 3.6)
• Vortragsfolien Designing eZ publish Sites
• Artikel Build Table-less CSS Layouts with eZ publish
• Artikel Barrierefreie Websites mit eZ publish