Typo3 Templates, Fluid, Layout, Template, Partial
Fluid Templates: Layout / Templates / Partials

Typo3 Templates

Bei der Umsetzung unserer Typo3-Templates achten wir auf offizielle Standards und stellen uns dabei Ansprüche:

  • W3C Validität
    Das Template und die entsprechenden Subtemplates genügen einem der folgenden Standards (je nach Projektanforderung):
    - XHTML 1.0 Transitional
    - XHTML 1.0 Strict
    - HTML 5
  • Automatisierte Tests
    auf ~16 Browser-/Betriebssystem-Kombinationen (unter anderem iPhone, iPad) auf korrekte Darstellung des Templates und Funktionalität der interaktiven UI Elemente.
  • Reduzierung der Ladezeit, z.B. durch
    • Verkettung, Optimierung und Kompression
      von externen Ressourcen (CSS-, JS-Dateien)
      Diese werden in jeweils eine einzige Datei aggregiert, die im Regelfall auch noch Server-seitig gecached wird.
    • Verschmelzung von kleineren Grafiken zu sog. Sprites
      Beim Laden eines Bildes ist eine zusätzliche Kommunikation zwischen Browser und Server erforderlich. Lädt man nun 30 Bilder auf einer Seite nach, so müssen 30 Requests entsprechend initiiert werden. Fasst man diese Bilder in ein sogenanntes Sprite zusammen, kann man die Anzahl der Requests einerseits reduzieren. Andererseits ist natürlich auch die Kompressionsrate bei größeren Bildern besser.

Beispiel für eine Sprite-Grafik

Fluid Templates

Während für die Standard-Konfiguration TypoScript als Beschreibungssprache zum Einsatz kommt, werden Erweiterungen in einem deutlich flexibleren Template-System umgesetzt. Dies beinhaltet gewisse Grundfunktionalitäten, die der Großteil bekannter Template-Systeme anbieten:

  • Trennung von Code und Inhalt
  • Kaskadiertes Template-System, das sich aufsplittet in:
    • Layouts
      Dies entspricht dem Grundgerüst des jeweiligen Plugins. So kann dies bestimmte Bereiche vorgeben, die von den Templates unterschiedlich genutzt werden.
    • Templates
      Entsprechen einer Ansicht. In diesem Templates können die unterschiedlichen Bereiche (Sections) eines Layouts
    • Partials
      Dies sind Teil-Elemente eines Templates, die in mehreren Templates wieder verwendet werden. Dies könnte zum Beispiel ein Banner-Container, eine Tabelle, ein bestimmtes Menü, der Header eines Abschnittes etc. sein.
  • ViewHelper
    Weiters gibt es die Möglichkeit den "Sprachumfang" innerhalb des Templates zu erweitern. Neben einigen nützlichen ViewHelpern, die in Fluid bereits mitgeliefert werden (für Formatierung, Mehrsprachigkeit, etc.) kann man auch selbst eigene ViewHelper entwickeln.