Responsive Design und Interaktion – Zwei Schlüsselaspekte zum Web
In diesem Newsletter möchte ich auf 2 Aspekte eingehen, welche im Internet Arbeitsabläufe strukturieren und automatisieren. Es ist dies das Abbilden von Inhalten via Vorlagen und das Interagieren mit Anwendern mittels Formularen. Pragmas zeichnet sich seit Geschäftsbeginn dafür aus, das Internet nicht nur für Imageauftritte zu verwenden, sondern insbesondere die Vorteile der Online-Kommunikation und die Mächtigkeit von Datenbankanbindungen zu nutzen.
Vorlagen oder Templates sind das A und O zur Trennung von Form und Inhalt. Erst wenn beides unabhängig abgelegt ist, kann eine Website im Handumdrehen umgestaltet oder können die Inhalte für unterschiedliche Geräte verschieden dargestellt werden. Mittels sogenanntem „Responsive Design“ geschieht dies sogar direkt und interaktiv, wenn z.B. ein Smartphones gekippt wird. Da die Informatikwelt vielfältig ist, gibt es wiederum verschiedene Systeme und Mittel, welche die Abbildung von Inhalten ausführen. Content Management Systeme (CMS) wie Typo3 können dafür eingesetzt werden, aber auch Mittel wie Style Sheets (CSS) und Javascripts (JQuery) führen zum Ziel.
Formulare sind das A und O zur interaktiven Website. Idealerweise werden die Formulare auch mit einer Datenbank verknüpft und zeigen so sowohl dynamische Daten an, wie auch speichern sie die eingegebenen Daten wiederum in einer Datenbank. Pragmas hat dieses Verfahren in letzter Zeit vielfach ausgeführt, z.B. bei der Anmeldung für Velofahrkurse, beim Nachhaltigkeitskatalog der Biosuisse oder bei der Workshop-Anmeldung der WOCAT. Der Output und der Input werden dabei sogenannt gemappt. „Mapping“ meint das Zuweisen von Datenbankinhalten zu Formularinhalten und umgekehrt. Und Mapping ist wiederum nichts anderes als Abbilden von Inhalten, also Templating.
Formhandler Backend
Es liegt somit Nahe, die beiden wichtigen Web-Verfahren miteinander zu kombinieren und eine allumfassende Darstellungs-Interaktions-Maschine zu programmieren. Pragmas hat dies auf der Basis der Formhandler-Erweiterung für Typo3 versucht und eine erste eigene Open-Source-Erweiterung der Gemeinschaft zur Verfügung gestellt. Die Formhandler-Erweiterung ist bereits ein sehr flexibles Tool, um Formulare zu erstellen und das Mapping zu organisieren. Jedoch ist Flexibilität immer auch mit Komplexität verbunden und nur wenige Administratoren verstehen es, die Möglichkeiten von Formhandler auch wirklich auszureizen. Zudem war es bei dieser Erweiterung bisher unmöglich, dass ein Redaktor zur Laufzeit Formularfelder editiert oder hinzufügt.
Die Pragmas Erweiterung „Formhandler Backend“ ist ein Tool für das Typo3-Backend, welches Formulare mit Datenbankinhalten verknüpft. Die eigentlichen Formularfelder werden als eigene Datenbank-Inhalte beschrieben und werden so für den Redaktor editierbar. Beim Abspeichern werden die nötigen Formular-Template-Dateien im Hintergrund aufbereitet und abgelegt. Geeignet ist dieses Tool für Administratoren, die mit einer Template-Engine einfach und schnell Formulare erzeugen wollen und für Redaktoren, welche Formulare mit automatischen Email-Funktionen und Datenbankanbindungen verwalten müssen. So wird es z.B. möglich, dass ein Redaktor einer Schule Kurse ausschreiben kann, welche automatisch in eine Kursanmeldung eingebunden werden. Auch die Berücksichtigung von Mehrsprachigkeit und Eingabeevaluationen stellt mit dieser Erweiterung kein Problem mehr dar. Bei anderen angebotenen Typo3-Erweiterungen wie Powermail hört hier der Spass auf.
Open Source heisst im Quellcode frei verfügbar. Da die Programmierung trotzdem mit Aufwand verbunden ist, war ich froh um ein Sponsoring der Arbeiten durch einen Webpartner von mir, Urs Bräm. Die Erweiterung findet bereits regen Zuspruch und wurde in der Community gut aufgenommen. Für Typo3-Administratoren ist sie erhältlich unter http://typo3.org/extensions/repository/view/formhandler_backend
Gonthier Architekten
Eine weitere bereits bestehende Template-Engine für Typo3 heisst Templavoila. Sie mappt Inhalte mit Form und legt die Mapping-Struktur in XML-Code ab. Die dynamischen Inhalte werden bei Templavoila mit Typoscript erzeugt, der Script-Sprache von Typo3. Dies sind an sich sehr gute Voraussetzungen, um übersichtlich und aufgeräumt zu arbeiten.
Leider werden in der Anwenderwelt XML-Strukturen nur schwer verstanden. Die Folge davon ist, dass die Strukturen wenig geplant, sondern eher behelfsmässig angelegt werden. Zudem ist es so, dass grundsätzliche Änderungen an im XML-Format abgelegten Inhalten komplex sind. Dies ist der Grund, weshalb längerfristig Templavoila von anderen Template-Engines wie z.B. Fluid ersetzt werden wird.
Die Website der Gonthier Architekten www.gonthier-architekten.ch wurde mit Templavoila realisiert. Für ein Update der Projektgalerie war es notwendig, die XML-Strukturen zu bereinigen. Aus mehreren verschiedenen, umständlich ineinander verschachtelten Vorlagen hat Pragmas eine einzige erstellt mit wählbaren Optionen. Somit können Projekte neu einheitlich erfasst je nach Anwendungsfall unterschiedlich dargestellt werden. Wie erwähnt war dann noch zu lösen, die bereits bestehenden Inhalte entsprechend der neuen Form umzustrukturieren. Für diese Arbeit sind halbautomatische Prozesse am effizientesten und zielführendsten. Einerseits können Anpassungen direkt über Datenbank-Befehle ausgeführt werden, andererseits ist die Programmierung solcher Befehle bald einmal zu aufwendig, so dass man das neue Mapping, jedenfalls teilweise, besser von Hand nachbildet.