Effizientes Webdesign: Trennung von Inhalt und Design

Webdesign rationalisieren – das hört sich zunächst widersprüchlich an. Wenn es aber darum geht, massenhaft Kunden-Sites zu pflegen, dann ist jede Art von Systematik eine wertvolle Hilfe zur Sicherung der Service-Qualität. Doch wie lassen sich gestalterische Variabilität und technische Musterhaftigkeit vereinbaren?

Im Folgenden werden methodische Grundlagen der Designarbeit vorgestellt, die prinzipiell nicht unbedingt spezifisch für ZMS sind, aber von ZMS sehr gut unterstützt werden.
Design hat definitionsgemäß nicht nur die Gestalt des Produktes im Blick sondern ebenso den gesamten Herstellungsprozess. Bezogen auf das Webdesign zeichnet sich somit ein guter Entwurf nicht nur durch eine ansprechende Gestaltung aus, sondern mindestens ebenso durch eine elegante und systematische Nutzung der Standard-Technologen. Wirken beide Aspekte zusammen spricht man also von Design, tun sie es nicht, handelt es sich entweder um schlechtes Design oder Kunst.
Wenn es darum geht, dass mehrere Personen am Entwicklungsprozess beteiligt sind, der grafische Entwurf einem Änderungsprozess unterworfen wird und der Programmier-Overhead minimalisiert werden soll, dann ist die technische Systematisierung des Webdesigns ein wesentlicher Schlüssel zum Erfolg. Systematisierung bedeutet dabei keinesfalls, dass eine Webpublikation so auszusehen hat wie die andere, sondern dass der Einsatz aller gestaltungsorientierten Technologie-Komponenten systematischer und transparenter Weise zusammenwirken.
Folgende methodische Aspekte spielen dabei eine wichtige Rolle

1. der HTML-Ausgabecode ist möglichst schlank zu halten
2. die CSS-Elementnamen sind weitgehend selbsterklärend und systematisch modularisiert
3. die Seitenkonstruktion erfolgt durch eine Folge von funktional fraktionierten Code-Templates
4. die Erscheinung ist in den üblichen Webbrowsern gleichartig

Schlank ist schön

Der Einsatz eines CSS-Frameworks kann dem Webdesigner dabei sehr viel Arbeit abnehmen: die Styles sind browsersicher, modular organisiert und systematisch benamt (Bsp: YAML, cssgrid, jqueri-ui).
ZMS schlägt für die Platzierung von CSS und Asset-Grafiken den common-Folder vor; der Seiteninhalt wird von den beiden Standard-Templates standard_html_header und standard-html-footer umschlossen; diese beiden Master-Templates schachteln eine Serie von funktionalen Templates für Navigation, Suche, Fusszeile etc. Die funktionalen Templates werden vereinbarungsgemäß nach folgenden Schema semantisch deklariert: pageelement_$Seitenfunktion (Bsp: pageelement_Macronavigation). Konsequenterweise erfolgen die Stylesheet-Deklarationen in identischer Terminologie, mit dem Ziel eine in dieser Hinsicht lesbare bzw. verständliche HTML-Ausgabe zu erhalten, welche dem Entwickler eine sichere Orientierung sowie ein einfaches Nachbearbeiten ermöglicht. Eine starke Element-Schachtelung oder gar Formatauszeichnungen gehören dabei der Vergangenheit an: moderne Sites zeichnen sich also durch einfache, deklarative Strukturen aus, wie z.B:

# HTML example #

<ul id="Macronavigation">
  <li>...</li>
  <li>...</li>
</ul>

Seitenkonstruktion stückweise: Template-Codes

Da das Layout eines HTML-Dokument in typische Regionen aufgeteilt wird (oberhalb, unterhalb, rechts und links neben dem Contentstrom) kann die Organisation der Code-Template dann an Übersichtlichkeit gewinnen, wenn man die funktionalen Templates zunächst in Regionen-bzw. Layout-Templates zusammenfasst, bevor man die in den Master-Templates zur Ausführung bringt. In Anlehnung an den XML-FO-Standard kommen folgende Template-Namen zum Einsatz:

1. pageregionTop
2. pageregionLeft
3. pageregionRight
4. pageregionBottom

Diese Layout-Templates beinhalten wiederum funktionale Templates, die Programmcode enthalten und eine dokument-spezifische Ausgabe erzeugen, z.B. das Hauptmenü, das hierarchie-entsprechend den aktiven Knoten anzeigt. Entsprechend ihrer Funktion werden Seitenelemente bezeichnet:

1. pageelement_Menu
2. pageelement_Macronavigation
3. pageelement_Micronavigation
4. pageelement_Headline
5. pageelement_Teaser
6. pageelement_Copyright

# pageelement_Macronavigation #

<dtml-var "getDocumentElement().getNavItems(this(),REQUEST,{'id':'Macronavigation','add_self':False,'deep':False,'complete':False})">

API-Funktionen für Webdesigner

Für die Programmierung von Darstellungs-Templates bietet ZMS eine Reihe von API-Funktionen; dabei sind im Wesentlichen kaum eine Handvoll wirklich relevant:

• getNavItems(): Listen-basierte HTML-Ausgabe des Dokument-Baumes oder Teile davon
• getObjProperty(): Ausgabe eines Objekt-Attributwertes - NEU ist die Kurzform attr()
• getHref2IndexHtml(): Erzeugung eines sprachkonformen Links für das aktuelle Dokument-Objekt
• getChildNodes(): Objekt-Sequenz der Kind-Objekte

Prinzipiell wird ein Template-Set so aufgebaut, dass eine HTML-Grundgerüst über die Layout-Templates konstruiert wird und der Aufruf von API-Funktionen in den Funktionstemplates für die kontextuelle Darstellung von Navigation, Teaser-Elementen etc. sorgt.
Die Vorteile einer fragmentierten und hierarchisierten Template-Organisation zeigen sich dann, wenn viele Websites zu betreuen sind: die Template-Fragmente lassen sich unverändert in andere Websites überführen und helfen dabei die Entwicklungszeiit zu minieren.

Design by Style

Das eigentliche Erscheinungsbild einer Website wird über die spezifischen CSS-Attribute erzeugt. Alle CSS-Dateien werden in den client-spezifischen Zope-Folder common/css/ gelegt; man kann sie entweder direkt bearbeiten, über das ZMS-GUI (Konfigurationsmenü 'Design') oder mit einem externen Editor (per FTP-Protokoll).
CSS-Codefragmente für spezielle Content-Objekte können in der Objekt-Definition über eine Attribut-Methode f_css_defaults gespeichert werden. Auf diese Weise kann das Styling eines Content-Objektes implizit auf eine andere Website übertragen bzw. vererbt werden. Um sämtliche default-Styles in das Haupt-CSS zu integrieren, ist der Einsatz von DTML-Code im CSS-Objekt nötig:

# CSS #

<dtml-with content>
<dtml-call "REQUEST.set('ZMS_COMMON','%s/common'%getHome().absolute_url())">
<dtml-var f_standard_html_request>
<dtml-var f_css_defaults>
</dtml-with content>

/* my styles */
h1 { font-size:350%; }
h2 { font-size:275%; }
h3 { font-size:200%; }
h4 { font-size:175%; }
/*    ...    */

Erstellt von: Dr. Frank Hoffmann , SNTL Publishing , erstellt am:  27.06.2008 , zuletzt geändert: 14.09.2010