Neuigkeiten aus dem Contao Pool

Auf dem 6. Contao Stammtisch NRW hat Marc Reimann vom MediendepotRuhr - der Agentur für Kommunikation einen Vortrag über den Einsatz von YAML unter Contao gehalten. Diesen Vortrag möchten wir Ihnen natürlich nicht vorenthalten:

YAML ein (X)HTML/CSS Framework und Contao

Mit YAML (von Dirk Jesse) wird die Grundlagen einer Internetseite erstellt. Man legt die HTML-Struktur und das dazu gehörende CSS an, um das Aussehen der Internetseite zu bestimmen.

Um mit YAML arbeiten zu können, kann man am besten die Dokumentation von der YAML-Internetseite herunterladen und sich dort das Buch bestellen. In diesem Artikel wird nur ein kurzer Überblick geboten was YAML ist, warum man es benutzen sollte und wie man es in Contao einbringen kann. Vorausgesetzt wird hier ein Grundverständniss vom Arbeiten mit Contao.

Was ist ein Framework?

Ein Framework ist ein Rahmen, in dem man etwas erstellt. Typischerweise wird dieser Begriff in der Softwaretechnik verwendet. In diesem Artikel wird dieser Begriff in Zusammenhang mit (X)HTML und CSS verwendet. Man bedient sich dabei eines Frameworks und erstellt Interentseiten nach dessen Regeln und Vorgaben.

Warum YAML?

• Stabiles Layout → der Großteil der Browserbugs wird abgefangen
• Barrierefrei → Das Framework ist auf Barrierefreie Layouts ausgerichtet (siehe Biene Award Gewinner der letzen Jahre)
• Schlanker Framwork Kern → was nicht benötigt wird muss man nur entfernen
• Es wird ständig weiterentwickelt → letzte Version 3.3 vom 13.10.2010
• Viele Vorlagen für Zusatzfeatures → Typografie, Formulare, Microformate, RTL-Unterstützung...
• Umfassende Dokumentation → alle bekannten Browserbugs
• Wenn viele an einem Projekt arbeiten und YAML kennen ist es einfacher mit der Zusammenarbeit

Viele Menschen denken immer das man YAML benutzen kann, wenn man kein CSS kann. Das ist allerdings ein Trugschluss. Vieles ist am Anfang einfacher und recht schnell zusammengestellt. Aber wenn man nicht weiß, warum etwas wie gemacht wurde, stößt man sehr schnell an seine eigenen Grenzen bei der Umsetzung von Designs mit YAML. Einige sprechen von der sogenannten divititis (der Übermäßiger Gebrauch von <div>), da in YAML viele divs benutzt werden. Allerdings sind diese nötig um die Stabilität des Layouts in den verschiedenen Browsern zu gewährleisten. Die tatsächliche divititis kommt zustande, wenn man Semantisch korrekte Tags durch ein Div ersetzt. Zum Beispiel einen Absatz der normalerweise mit einem <p> Umgeben ist, mit einem <div class="p"> ersetzen würde.

Die Lizenzen von YAML

YAML kann in zwei Versionen genutzt werden:

• Commons Attribution 2.0 Lizenz (CC-A 2.0) → YAML kann in dieser Lizenz sowohl nicht kommerziell als auch kommerziell genutzt werden. Man muss nur einen Link im Footer oder im Impressum auf die Projektseite setzen. Das gillt auch, wenn man nur Teile von Yaml verwendet!
• YAML unter kommerzieller Lizenz (YAML-C) → Folgende Lizenzen sind zeitlich unbegrenzt und schließen die Verwendung zukünftiger Versionen mit ein.
  • Projektlizenz: 59,50 EUR (incl. 19% MwSt.) - Nutzung innerhalb von einem Projekt
  • Generelle Lizenz: 119,00 EUR (incl. 19% MwSt.) - Projektunabhängig

Aktuelle Informationen zu den Lizenzen können hier entnommen werden: Lizenzbedingungen von YAML

Allgemeine Regeln für den Start mit YAML

• Es ist kein fertiges Layout
• Es basiert auf dem TOP-DOWN-Prinzip (alles was nicht gebraucht wird, entfernt man einfach).
• Die Grundbausteine (im YAML-Ordner) sollen nicht geändert werden.
• Die eigenen CSS-Dateien sind getrennt vom Framework, dadurch kann man einfacher updaten und hat einen beseren Überblick.
• Man soll Spaß haben mit und an YAML ;-)

Hier könen die allgemeinen Regeln noch einmal genauer nachgelesen werden: Allgemeines über YAML

Wie man mit YAML arbeitet

In Kurzform:

• Simple Projekt Dateien runter laden
• Im YAML-Builder das Grundlayout einstellen
• Die erstellten Dateien kopieren
• Grundlayout den eigenen Bedürfnissen anpassen

Grundlagen, um mit Contao zu arbeiten

• Anleitung im Contao-Wiki "Erstellen der ersten Internetseite mit Contao"
• Wie man mit CSS Dateien in Contao arbeiten kann: Ein Vortrag von Peter Müller von dem Usertreffen 2010

Das Template für die Seiten in Contao

Nun ist es soweit, das man ein Template von der HTML-Datei erstellen muss. Contao nimmt dieses Template dann als Grundlage für die Generierung einer Seite.

Dazu benennt man die erstellte HTML-Datei einfach um. Hier sollte ein sinnvoller Name verwendet werden, an dem man erkennen kann, um welches Grundlayout es sich handelt.
In Contao müssen die Seitentemplates mit "fe_" beginnen und mit ".tpl" enden. Also bieten sich solche Dateinamen an: fe_projektname-spaltenanzahl.tpl oder fe_projektname-spezialseite.tpl

Die Template-Dateien kommen nun in den Projektornder in /templates oder direkt in den Ordner /templates auf dem Server. Nun kann man die Templates als Grundlage im Seitenlayout auswählen.

Notwendige Änderungen im Template

• Header bearbeiten/ersetzen
• Platzhalter einfügen
  • Wenn nötig eigene Platzhalter definieren (müssen unter Einstellungen auch eingegeben werden!) → Beispiel, wie man das macht, befindet sich auch im Download auf dieser Seite
• Im unteren Bereich Ergänzungen hinzufügen (wegen Mootools)

Diese Schritte sind nötig, um in dem Template dynamisch die Inhalte zu generieren. Wie genau man das Template bearbeiten muss, kann man sich am besten anhand der Datei von Contao anschauen, die man unter /system/modules/frontend/templates findet und die fe_page.tpl heißt.
Hier wird das Ganze auch noch einmal für ein YAML-Template durchgegangen, allerdings in einer älteren Contao Version.

Erweiterungen von Contao für YAML

• [yamltools] YAML-Werkzeuge
  • Formular-Templates werden angepasst
  • Navigationen werden angepasst (Überschrift bei vertikaler Navigation ist möglich)
• [subcolumns] Spaltenset-Erweiterung
  • Subcolumns sind hiermit sehr einfach zu erstellen (auch für Redakteure!)
  • Zusätzliche Spaltenbreiten werden integriert
• Nicht zu empfehlen: [tlyaml] Tl-Yaml (hierbei werden alle CSS-Dateien improtiert und Layoutanpassungen müssen erst mit CSS überschrieben werden, um diese zu ändern)

Nützliche CSS-Regeln für Contao die noch nicht in YAML vorhanden sind

Diese CSS-Regeln brauchen wir für viele Projekte und möchten diese gerne zur Verfügung stellen:

• Grunddesign von der Paginierung in Contao (Seitenanzahl mit Vor- Zurück- Links)
• Erweiterte Skiplinks-Definition
• Beseitigung eines Bugs im IE6 in Zusammenhang mit Listen (<ul><ol><dl>) und dem Accordeon-Effekt → Die Inhalte wurden dabei leider immer angezeigt und überlagerten sich.

Die Dateien dazu sind in einer zip-Datei zusammen mit den Folien vom Vortrag.

Schulung

Natürlich ging das alles jetzt nicht genau ins Detail. Das würde hier den Rahmen bei weitem sprengen. Das Alles können Sie in einer Schulung genauer erfahren. Diese Schulung bieten wir für Agenturen oder Privatpersonen an bis zu einer Gruppe von 5 Personen. Wenn Sie dazu Näheres erfahren möchten, können Sie sich gerne mit uns in Verbindung setzen.

Links

• YAML (von Dirk Jesse)
• Wikipedia: Framework
• Contao