Tag: designvorlage

XHTML-Designvorlage der TYPO3 Präsenz


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">

<head>
<title>nordEnergie AG</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="css/ne_01.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div><a name="nach_oben"></a></div>
<div class="border_top"></div>

<div class="border_middle"> <!-- ANFANG border_middle -->


<!-- ANFANG Head -->
<div id="head">

<div id="head-logo"><img src="img/logo_ne.gif" alt="Logo nordEnergie" /></div>
<div id="head-slogan">Energie und Meer</div>
<div id="metanavi"> </div>

</div>
<!-- ENDE Head -->

<!-- ANFANG main -->
<div id="main">

<div id="main_top">
<div class="lightblue_top_container"> </div>
<div class="lightblue_top_border">Wir machen Bremerhaven zur
Solarstadt des Nordens. Machen sie mit, profitieren sie mit!
</div>
</div>

<!-- ANFANG container_navigation -->
<div id="container_navigation">
<div id="mainnavi"> </div>
</div>
<!-- ENDE container_navigation -->

<!-- ANFANG container_content -->
<div id="container_content">

<div id="headerimage"> </div>

<div id="main_content">
<div id="locator"> </div>
<div id="hr"> </div>
<div id="content"> </div>
</div>
</div>
<!-- ENDE container_content -->

<div id="main_bottom">
<div class="lightblue_bottom_container"> </div>
<div class="lightblue_bottom_border"> </div>
</div>


</div>
<!-- ENDE main -->

<div class="footer"> </div>

</div>
<!-- ENDE border_middle -->

<div class="border_bottom"></div>

</body>
</html>

Erstellen der Designvorlage

Als Designvorlage kann eine normale HTML- bzw. XHTML-Seite dienen. TYPO3 verwendet dann diese ohne spezielle Präparationen versehene Vorlage, um nach ihrer Gestaltung die kompletten Seiten für das Frontend dynamisch zu generieren. Das manuelle Erstellen von Webseiten wird dadurch überflüssig und komplett durch das System abgewickelt. Dabei werden zuvor definierte Bereiche in der Vorlage mit Inhalten aus den Zellen der zu Grunde liegenden Datenbank passend ersetzt.

Als Format für die Vorlagendatei wird XHTML gewählt. Außerdem soll der Aufbau des Layouts komplett tabellenlos durch Einsatz von entsprechenden CSS-Definitionen angelegt werden.

Der exakte Doctype der Seiten wird „XHTML 1.0 Strict“ lauten, wobei es sich um eine offi-zielle Empfehlung des W3-Konsortiums handelt, die nach und nach den letzten veröffentlichten HTML 4.01-Standard ersetzen wird. XHTML ist XML-kompatibel und wurde im Januar 2000 definiert. Der Hintergedanke bei XHTML ist, dass durch Standardisierung eine medienneutrale Beschreibung von Dokumenten ermöglicht wird. So könnten XML-basierende Formate bspw. für das Web, für den Printbereich oder für mobile Endgeräte verwendet werden. Der Inhalt ist im Idealfall unabhängig vom Ausgabemedium.

Außerdem sind in XHTML definierte Internetseiten schlanker, werden schneller geladen, strukturell flexibler änderbar und bedeuten einen großen Schritt in Richtung barrierefreies Internet. Zusätzlich unterstützt werden diese Vorteile durch den Einsatz von Cascading Style Sheets und den Verzicht auf HTML-Tabellen als Mittel zur Definition des Layouts. Tabellen sind in ihrem Ursprung nicht für die Nutzung als Gestaltungsraster ausgelegt gewesen, um Internetseiten eine Struktur zu verleihen, sondern sollen als Hilfsmittel zur geordneten Darstellung von Textinformation eingesetzt werden. Die Verwendung als Gestaltungsmittel vermischt das Layout mit den Inhalten und vergrößert die Dateigröße der Seiten unnötig. Bei jedem Seitenaufruf müssen die Layoutinformationen neu geladen werden. Dies strapaziert die Bandbreite und erhöht die Ladezeiten. Ein Style Sheet mit den Angaben zum Aufbau wird lediglich einmal in den Browsercache zwischengespeichert und dann von dort aus geladen. Das reduziert das Datenvolumen merklich und führt langfristig betrachtet zu geringeren Kosten für das Webhosting. Das Einhalten moderner Webstandards bringt also, wie aus dieser Kurzbetrachtung hervorgeht, eine Vielzahl an Vorteilen mit sich.

Da das Stichwort Barrierefreiheit gefallen ist, soll in wenigen Worten der Hintergrund geklärt werden. Mit Barrierefreiheit wird der ungehinderte Zugang zu Informationen im World Wide Web besonders für körperlich eingeschränkte Internetuser bezeichnet. Im Bundesbehindertengleichstellungsgesetz (BGG) ist der exakte Begriff definiert, wobei hier der Paragraf 11 „Barrierefreie Informationstechnik“ besonders interessant ist. Die genauen Richtlinien sind in Deutschland in der „Barrierefreie Informationstechnik-Verordnung (BITV)“ festgelegt. Öffentliche Einrichtungen müssen bis spätestens Ende 2005 durch die „Verordnung zur Schaffung barrierefreier Informationstechnik nach dem BBG“ ihr Informationsangebot problemlos barrierefrei nutzbar machen. Durch die für die nordEnergie-Präsenz getroffenen technologischen Entscheidungen ist der Auftritt aus rein technischer Sicht für die Barrierefreiheit bereits optimal vorbereitet und entspricht modernsten Standards.

Der komplette Quellcode der für TYPO3 umgesetzten XHTML-Designvorlage samt Style Sheet kann im Anhang eingesehen werden. Das entwickelte Design- und Layoutkonzept wird übereinstimmend durch diese beiden Elemente abgebildet. Die Meta-Tags zur Suchmaschinen-Optimierung sind zu diesem Zeitpunkt uninteressant und werden nach späterer Definition eigenständig durch das CMS hinzugefügt.

Konfiguration des Template Auto-Parsers

Der Auto-Parser ist eine Extension, welche die XHTML-Designvorlage nach korrekter Konfiguration automatisch mit TYPO3-Markierungen zur Laufzeit versieht. So können vom Content Management System in die vorgesehenen Positionen, in diesem Fall durch „subparts“ markiert, die verschiedenartigen Inhalte dynamisch einfügt werden.

#Konfiguration des Auto-Parser fuer Haupt-Template:
plugin.tx_automaketemplate_pi1 {

  # Die Designvorlage wird eingelesen:
  content = FILE
  content.file = fileadmin/template/main_template.html

  # Hier werden die Elemente im der XHTML-Vorlage definiert
  # welche von subpart-Comments umgeben werden sollen:

  elements {
    BODY.all = 1
    BODY.all.subpartMarker = DOCUMENT_BODY

    HEAD.all = 1
    HEAD.all.subpartMarker = DOCUMENT_HEADER
    HEAD.rmTagSections = title

    DIV.all = 1
  }

  # Alle relativen Pfadangaben soll diese Prefix vorangestellt werden:
  relPathPrefix = fileadmin/template/
}

Zu Beginn ist es notwendig, die Designvorlage einzulesen (diese wurde zuvor samt Style Sheet über den Dateimanager an die angegebene Position gebracht). Hierfür wird die Variable „content“ mit dem FILE-Objekt belegt, damit eine Datei eingebunden werden kann . Anschließend erfolgt die Zuweisung der Designvorlage, die ab diesem Zeitpunkt dem System bekannt ist. Darauf folgend wird die Vorlage nach bestimmten Tags abgesucht und mit Subpart-Markern belegt. Zwischen dem öffnenden und schließenden Body-Tag der Vorlage soll der Subpart „DOCUMENT_BODY“ eingefügt werden. Analog dazu gilt dies für den Head-Tag. Außerdem wird der Title-Tag, welcher den Seitentitel beinhaltet, entfernt. Der Titel der jeweiligen Seite wird durch TYPO3 später dynamisch und passend ergänzt. Alle Div-Tags der Vorlage, an die ein Klassen- oder ID-Name vergeben wurde, werden ebenfalls mit gleichnamigen Subparts versehen. Durch diesen Umstand ist erreicht, dass jeder relevante Container des zu Grunde liegenden Layout über einen füllbaren Subpart-Marker verfügt, der durch dynamische Teile (Navigationen, Inhalte etc.) ergänzt werden kann . Die letzte Anweisung des Setups bewirkt, dass allen relativen Pfadangaben aus der Vorlage der Zusatz „fileadmin/template/“ vorangestellt wird. Dabei handelt es sich um das selbst gewählte Unterverzeichnis in dem alle Template-bezogenen Daten abgelegt sind. Es sind keine Pfadanpassungen in der Ausgangsvorlage nötig. TYPO3 kann diese Begebenheit vollkommen automatisch ohne weiteres Zutun des Users regeln.

Integration in TYPO3

Die hierarchische Baumstruktur wurde im CMS bereits vollständig abgebildet. Die Seiten sind jedoch noch komplett ohne Aussehen oder anderen Inhalt. Um diesen Zustand zu ändern, muss dem System die Designvorlage hinzugefügt und für die Seiten ein Template angelegt sowie zugewiesen werden. Das einheitliche Aussehen kann relativ simpel erreicht werden, indem man dem obersten Wurzeldatensatz (in diesem Beispiel „Startseite“) ein Template zuweist, welches automatisch allen untergeordneten Seiten vererbt wird. Das Hinzufügen der XHTML-Designvorlage inklusive Style Sheet erfolgt durch Upload in den „fileadmin-Ordner“ des CMS. In diesem Ordner können alle Dateien, die für den Internetauftritt benötigt werden, (in Unterordnern) abgelegt werden. Es handelt sich in anderen Worten um den Dateimanager von TYPO3.

Der klassische Weg bei der Seitenerstellung mit TYPO3 wäre, den Quelltext der Designvorlage mit verschiedenen TYPO3-Markern, so genannten „Marks“ und „Subparts“, zu versehen, welche dann aus dem CMS heraus angesprochen und mit Inhalten aus der Datenbank gefüllt werden können. Ein eleganterer und modernerer Lösungsansatz wird allerdings durch den Einsatz der zuvor erwähnten Extension „Template Auto-parser“ verfolgt. Eine spezielle Vorbereitung der Designvorlage ist nicht notwendig, da der Auto-Parser selbstständig die austauschbaren Markierungen („subparts“) zur Laufzeit einfügt. Diese wiederum können angewählt und befüllt werden. Somit ist es möglich, die XHTML-Vorlage ohne auch nur eine Anpassung oder Umstellung zu verwenden.

Für die „Startseite“ wird demzufolge ein neuer Template-Datensatz erstellt. Diese Art von Datensätzen hat verschiedene Bestandteile. Die für diese Betrachtung wichtigsten zwei Felder sind „Constants“ (hier werden häufig verwendete Konstanten definiert) und „Setup“ (beinhaltet die in TypoScript formulierte Beschreibung der kompletten Seitenelementerzeugung) .

Die kommentierte Anführung von TypoScript-Codeausschnitten des Setup-Feldes soll verdeutlichen, wie die Seite von TYPO3 aufgebaut wird. Sollten zusätzlich Konstantendefinitionen benötigt werden, wird dies deutlich sichtbar gemacht. Der gesamte, konfigurierte Template-Datensatz kann im Anhang gefunden werden.

Statische und dynamische Bereich im Layout

Um zu verdeutlichen, welche Regionen im Layout von TYPO3 dynamisch ergänzt werden und an welcher Stelle statische Inhalte platziert sind, soll das Gesamtlayout samt Markierungen dienen. Hierzu sind dynamische Bereiche rot umrahmt, statische Abschnitte besitzen eine schwarze Umrandung.

Verkleinertes Layout mit Markierungen der dynamischen und statischen BereicheVerkleinertes Layout mit Markierungen der dynamischen und statischen Bereiche
Verkleinertes Layout mit Markierungen der dynamischen und statischen Bereiche

Aus der Abbildung geht hervor, das insgesamt sieben relevante Bereiche vorhanden sind. Zwei sind statischer Natur, die für jede Seite wiederkehrend dargestellt werden. Es handelt sich um den Kopfbereich mit dem Signet und einem Slogan sowie den weiteren Platzhalter für die zusätzliche Kommunikation der Firmenphilosophie. Selbstverständlich ist das umschließende Gesamtlayout ebenfalls statisch durch die Designvorlage zu beschreiben. Zu den fünf dynamischen Elementen gehören die Hauptnavigation, die Metanavigation im Kopf und Fuß, das Stimmungsbild, der Content inklusive Pfadanzeige und die Funktionalitäten im Fußbereich der Seite (z.B. Druckversion). Beide unterschiedlichen Objekttypen müssen in TYPO3 eingepflegt werden, die Herangehensweise an die Umsetzung differenziert. Die als statisch deklarierten Teile können bereits über die Designvorlage selbst festgelegt werden. Die dynamischen Elemente werden dann mit Hilfe von TypoScript im System erzeugt.