Anzeige
Anzeige
Software
Artikel merken

Teil 1: Fließende Spalten und eigensinnige Browser: TYPO3-Templates mit YAML

Mehrspaltige Templates für TYPO3 zu erstellen, die in jedem Browser funktionieren, ist eine schwierige Aufgabe. Das (X)HTML-/CSS-Framework YAML erleichtert sie und sorgt zudem dafür, dass Webstandards eingehalten werden. Layouts werden ohne Tabellen barrierearm umgesetzt und auch Änderungen sind einfacher machbar. Teil 1 der zweiteiligen Artikelserie führt in YAML ein und zeigt die Arbeit mit dem Autoparser.

7 Min. Lesezeit
Anzeige
Anzeige

Klassisches Tabellenlayout hat ausgedient. Es entspricht weder dem aktuellen Stand der Technik noch erfüllt es die Anforderungen an modernes, barrierearmes Webdesign. Der Einsatz von Tabellen zur Gestaltung von Webseiten stammt noch aus der Kinderzeit des Internets, in der Browser mittels CSS kaum zu mehr in der Lage waren als die Schriftfarbe zu verändern. Diese Zeiten sind jedoch lange vorbei. Alle heute verfügbaren Browser bieten eine hinreichend gute CSS-Unterstützung, um moderne CSS-basierte Webseiten darzustellen.

Anzeige
Anzeige

Trotz der zahlreichen Argumente für CSS und gegen Tabellen tun sich viele Webentwickler nach wie vor schwer, sich endgültig von der Arbeit mit Layouttabellen zu lösen. Die Ursache liegt oft genug in der sehr unterschiedlichen Qualität der CSS-Unterstützung durch die Browser. Fehlerhafte Implementationen, vor allem älterer Browserversionen, führen immer wieder zu Problemen. Kurzerhand wird wieder zu einfachen und vertrauten Techniken gegriffen. Einmal gelernt, werden sie nun fortwährend verwendet und nicht mehr hinterfragt. Der Webentwickler weiß jedoch nicht, über welches Ausgabemedium der Benutzer letztlich auf die Informationen einer Webseite zugreift. Sicherlich steht hier an erster Stelle der Monitor, doch genauso gut können es mobile Endgeräte wie PDAs oder Handys neuerer Generation sein.

Die verbreitete Meinung, als Seitenersteller habe man die absolute Kontrolle über das Erscheinungsbild einer Webseite, ist eine Illusion. Schon allein aufgrund der Browservielfalt ergeben sich Unterschiede in der Darstellung. Außerdem geben alle aktuellen Betriebssysteme und Browser dem Anwender die Möglichkeit, Schriftgrößen, Farben und Fenstergrößen seinen Wünschen entsprechend anzupassen. Als Entwickler hat man also bestenfalls ein Vorschlagsrecht in Bezug auf das Erscheinungsbild einer Seite. Es kann vom Nutzer jederzeit übergangen oder angepasst werden. Die Bedingungen, unter denen Webseiten in einem Browser gezeigt werden, sind mit zahlreichen Unwägbarkeiten verbunden und die pixelgenaue Darstellung einer Seite ist daher alles andere als gewiss.

Anzeige
Anzeige

Trennung von Inhalt, Layout und Dynamik

Webseiten dienen in erster Linie der Bereitstellung von Informationen. Man sollte sich daher bei der Entwicklung von den Inhalten und nicht von der Optik leiten lassen. Eine gute Zugänglichkeit wird durch eine semantisch korrekte Strukturierung über (X)HMTL erreicht. Die Auszeichnung der Inhalte sollte daher entsprechend ihrer Bedeutung erfolgen und nicht nach ihrem Aussehen.

Anzeige
Anzeige

Das Layout entsteht, indem über CSS die einzelnen Strukturbereiche der Seite gestaltet werden. Durch die Trennung von Inhalt und Layout kann gezielt Einfluss auf die Darstellung in unterschiedlichen Ausgabemedien genommen werden. Werden bestimmte Gestaltungsvorgaben von älteren Browsern nicht dargestellt, kann der Benutzer immerhin auf die Informationen zugreifen.

Mit dynamischen Inhalten wie JavaScript oder Flash kann die Qualität einer Webseite weiter gesteigert werden. Die Funktion dieser Elemente darf jedoch keinesfalls eine Bedingung für die Nutzbarkeit einer Webseite sein. Werden Navigationselemente erst zur Laufzeit per JavaScript erzeugt oder sind sie in Flash-Objekten eingebettet, wird die Webseite unbenutzbar, wenn die entsprechenden Plugins abgeschaltet oder nicht verfügbar sind.

Anzeige
Anzeige

YAML und TYPO3

YAML steht im Internet kostenlos zum Download zur Verfügung. Das modular aufgebaute CSS-Framework eignet sich insbesondere für die Integration in ein CMS wie TYPO3. Speziell für diesen Zweck stehen ebenfalls kostenlose Templates in zwei Varianten zur Verfügung [1]. Die importierbare t3d-Datei eignet sich, wenn TYPO3 fertig installiert auf einem Webserver im Internet zur Verfügung steht und ein neues Projekt begonnen werden soll. Das Komplettpaket ist dafür gedacht, TYPO3 auf einem lokalen PC auszuprobieren. In Verbindung mit „xampp“ [2] steht in kurzer Zeit eine komplette TYPO3-Testumgebung zur Verfügung, inklusive aller nötigen Extensions, aller Einstellungen, der TypoScript-Templates und einiger Beispielseiten.

Arbeitsteilung

In der Regel teilen sich mehrere Personen die Arbeit, wenn ein Webauftritt für einen Kunden erstellt wird: Designer, Programmierer und Redakteur. Aus der Reihenfolge der genannten Personen ergibt sich der klassische Arbeitsablauf, der in der Praxis wohl am häufigsten anzutreffen und im Tutorial „Modern Template Building“ [3] beschrieben ist.

Der Designer wird auf konventionelle Weise eine HTML-Vorlage erstellen, die in allen Einzelheiten das Aussehen der späteren Webseite vorschreibt. Diese Vorlage ist völlig unabhängig von TYPO3 und eine statische HTML-Datei. Im Idealfall kann diese Vorlage unverändert die Basis für das TYPO3-Template bilden. Hilfsmittel, um zum Beispiel mit Dreamweaver arbeiten zu können (speziell angepasste Stylesheets), liegen dem YAML-Paket bereits bei. Der Programmierer setzt die Gestaltungsvorschriften des Designers in TYPO3 um. Sollten anschließend Änderungen nötig werden, weil der Kunde es sich zum Beispiel anders überlegt hat, muss nur die Vorlage ausgetauscht werden. Änderungen am TypoScript-Code sind oft nicht nötig. Der Redakteur schließlich benötigt eine möglichst einfache und intuitive Arbeitsumgebung. Es muss sichergestellt sein, dass es auch durch falsche Eingaben nicht möglich ist, das Layout zu zerstören oder Darstellungsfehler in manchen Browsern zu provozieren.

Anzeige
Anzeige

Der Autoparser

Die Extension „automaketemplate“ setzt genau an dieser Stelle an. Sie liest die Vorlage ein, erzeugt die nötigen Subparts und erspart damit viel Handarbeit. Die Vorlage kann ohne manuelles Einfügen von Markern so verwendet werden, wie sie der Designer erstellt hat. Aus der HTML-Vorlage (Listing 1) werden so Subparts für TYPO3 (Listing 2).

HTML
<div id=“col2_content“>
	DUMMY CONTENT
</div>
<div id=“col3_innen“>
	DUMMY CONTENT
</div>
<div id=“footer“>
	DUMMY CONTENT
</div>

Listing 1

TYPOSCRIPT
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
	template =< plugin.tx_automaketemplate_pi1
	template.content.templateType = main
	workOnSubpart = DOCUMENT_BODY
	...
	subparts.col2_content < styles.content.getLeft
	subparts.col3_innen < styles.content.get
	subparts.footer < temp.footer
	...
}

Listing 2

Da die DIV-Container, die die Inhalte der Webseite aufnehmen, bei YAML immer die gleiche ID haben, sind notwendige Änderungen am TypoScript-Code auf ein Minimum reduziert, auch bei unterschiedlichsten Designs. Durch die Verwendung von Erweiterungstemplates (temp.footer) ensteht im Laufe der Zeit eine Art Code-Bibliothek, die mit geringen Modifikationen immer wieder verwendet werden kann. Die einzelnen „Bauklötzchen“ in diesem Web-Baukasten sind in einzelne Erweiterungstemplates unterteilt und werden per „Include basis template“ ins Haupttemplate eingebunden. Das schafft relativ kurzen und übersichtlichen TypoScript-Code.

Der Template Selector

Häufig werden auf unterschiedlichen Seiten eines Webauftritts unterschiedliche Vorlagen verwendet.

Anzeige
Anzeige

Aus diesen soll der Redakteur auf Wunsch komfortabel für jede einzelne Seite auswählen können. Auch die Auswahl von Inhaltsvorlagen soll machbar sein, um eine Spalte weiter unterteilen zu können. Möglich macht das die TYPO3-Extension „rlmp_tmplselector“. Damit die Grafiken zur Veranschaulichung unter der Auswahlbox im Template Selector auftauchen, müssen sie im GIF-Format unter dem selben Namen wie die Vorlage und im selben Verzeichnis gespeichert sein.

TYPOSCRIPT
plugin.tx_automaketemplate_pi1 {
	content < plugin.tx_rlmpttmplselector_pi1
	elements {
		BODY.all = 1
		BODY.all.subpartMarker = DOCUMENT_BODY
		HEAD.all = 1
		HEAD.all.subpartMarker = DOCUMENT_HEADER
		HEAD.rmTagSections = title
		DIV.all = 1
	}
relPathPrefix = fileadmin/template/
templatePathMain = fieladmin/template/
templatePathSub = fileadmin/template/sub/
defaultTemplateFileNameMain = layout_2col_left_vlines.html
}

Listing 3

Der TypoScript-Code in Listing 3 sorgt dafür, dass nur DIV-Tags in der Vorlage berücksichtig werden (es könnten durchaus auch TD-Tags sein) und vor allem dafür, dass Pfade in der Vorlage angepasst werden. Dies ist wichtig, da der Designer in der Regel wenig von der späteren Umsetzung der Seite in TYPO3 weiß und in der Regel völlig andere Pfade verwendet. Schließlich muss noch die Standardvorlage bestimmt werden die wirksam wird, wenn der Redakteur keine Auswahl trifft.

Der obigen Abbildung liegt eine zweispaltige Vorlage
zugrunde, deren rechte Spalte durch eine Inhaltsvorlage (Subtemplate)
mit der Teilung 50/50 in zwei gleich breite Spalten unterteilt wurde.
Der Redakteur kann im TYPO3-Backend in der Eingabespalte LINKS normale
Inhalte unterhalb des automatisch erzeugten Menüs (1) anlegen. Inhalte
in der Eingabespalte NORMAL erstrecken sich über die gesamte Breite
(2). SUB-LINKS (3) und SUB-RECHTS (4) sind ebenfalls Eingabespalten im
Backend. Diese beiden Spalten wurden hinzugefügt, die standardmäßig
vorhandene Spalte RAND wurde ausgeblendet.

Anzeige
Anzeige

Der Constant-Editor

Überall dort wo Seiten-IDs, veränderbare Texte oder HTML-Codes in den TypoScript-Templates standen, befinden sich dank YAML ausschließlich Variablen, die mit dem Constant-Editor verändert werden können. Alle Werte werden also zentral bearbeitet und müssen dadurch nicht erst lange gesucht werden – dieselbe Vorgehensweise wie bei den Standard-Vorlagen, die mit TYPO3 ausgeliefert werden.

Ausblick

In T3N 01/2007 erfahren Sie mehr zur Kombination von YAML mit
TemplaVoilà, der visuelle Template-Engine zur Erzeugung von Vorlagen.
So lässt sich jeder DIV-Container zu einer Inhaltsspalte machen – und
das sogar interaktiv per Mausklick.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
2 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

if20

Hallo,

evtl sollte man sich das Produkt if20 ansehen:
http://if-20.com

MfG

Detlef Schäbel

Antworten
pyronet

Hallo,
ich finde auch, dass das Entwicklertemplate IF20 eine gute Wahl ist.
Vor allem kann man mit nur wenigen Klicks eine vorkonfigurierte Webseite auf seinen Server zaubern.
Ich habe Videos zu IF20 gemacht.
http://www.pyronet.de/videos.html

LG
Marion

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige