One Size Fits Many

Rückblick: Unser Vortrag zum Thema Standardisierung mit dem CMS TYPO3

Ein knappes halbes Jahr ist es nun her, dass Anika, Projektmanagerin bei der dkd und Anna, damals Frontendentwicklerin bei der dkd, ihre Arbeit an t3quick den rund 30 interessierten Zuhörerinnen des Techettes e.V. Events vorstellen durften. Der perfekte Zeitpunkt also, auf den Vortrag zurückzublicken und aktuelle Entwicklungen an t3quick vorzustellen.

Die Techettes e.V. ist ein eingetragener, gemeinnütziger Verein bestehend aus aktuell sechs Frauen. In Form von Talks und Workshops bringen Sie vor allem Frauen und Technik zusammen.

Projektmanagerin Anika und Frontend-Entwicklerin Anna

Über Anika und Anna
Anika ist Projektmanagerin bei der dkd, hat Anglistik, Romanistik und BWL an der Geothe-Universität in Frankfurt studiert und betreut Bestandskunden. Sie beschäftigt sich mit der Konzeption und Planung von Projekten und ist zertifizierter TYPO3 CMS Editor.
Anna hat Medieninformatik an der THM in Friedberg studiert und sorgte als Frontendentwicklerin bei der dkd zuverlässig dafür, dass Websites sich visuell und technisch sehen lassen können. Anna ist zudem TYPO3 CMS Integrator.

Eingeleitet wurde der Talk von Verena Brodbeck und Svenja Wagner in den Räumlichkeiten des Sponsors FastBill GmbH. Die beiden stellten sich und die Techettes vor, erzählten von den letzten Events und schafften den Übergang zum Vortrag und somit zum Thema des Abends: »Standardisierung mit dem Content-Management-System TYPO3«.

t3quick – der TYPO3-Quickstarter
oder Standardisierung als Projektbeschleuniger

Lange haben wir, bei der dkd, an einem Standardpaket für TYPO3 gearbeitet und mit t3quick ist uns dies gelungen. t3quick ermöglicht den schnellen und kostengünstigen Aufbau einer responsiven Website auf Basis des leistungsfähigen Content-Management-Systems TYPO3. Dadurch ermöglicht t3quick kurze Projektlaufzeiten und kurzfristige Livegänge auf Enterprise-Niveau!

Die Technik hinter t3quick

Hinter t3quick steckt eine vollkonfigurierte, lokale Entwicklungsumgebung basierend auf Vagrant mit Ruby. Wie die meisten Webanwendungen, haben wir im t3quick viele Systeme und Tools im Einsatz. So verwenden wir für automatisierte Tests cucumber, für Continous Delivery Jenkins und das Hosting findet auf platform.sh statt.
Zu den Features im Paket zählen verschiedene Seitenlayouts, Struktur- und Inhaltselemente sowie Suchmaschinenfreundlichkeit durch die Yoast-Extension und Website-Tracking mit Piwik. (Weitere Infos zu t3quick findet man auf t3quick.de).

Vor kurzem haben wir die Implementierung der Barrierefreiheit bearbeitet und für die einzelnen Features mit TYPO3 8 abgeschlossen. Und für die Zukunft ist auch schon jede Menge Neues geplant. So sollen zum Beispiel Bildkomprimierung im Backend, Nachladen von Bildern im Frontend und die Umstellung auf Bootstrap 4 folgen.

Das Team hinter t3quick

Das Team bestehend aus Backend-Entwickler, Frontend-Entwickler und Product Owner und kümmert sich um die Weiterentwicklung von t3quick. Das Team unterstützt die Kreation bei der Erstellung von Layouts für t3quick-Projekte und ist bei Projekt-Kick-offs dabei. Das Besondere an dem Paket ist unsere Zusammenarbeit mit der Agentur pixelant aus Schweden und das Cloudhosting auf Platform.sh.

Frontendentwicklung:
Wichtig ist, was vorne rauskommt

Zu den Frontend-Entwickler-Aufgaben im t3quick gehören:

  • Entwicklung neuer Features
  • Durchführung von code reviews
  • Manuelle und automatisierte Tests
  • Umsetzung von Layouts mit internen CSS-Standards
  • TYPO3-Konfigurationen

t3quick besteht aus vielen Extensions, die aufeinander aufbauen. Das Grundgerüst stellt die themes-Extension, diese dient zum Erstellen von Themes in TYPO3. Darauf setzt die Extension t3kit von pixelant auf.

In unserer Extension t3quick werden Konfigurationen für das Theme durchgeführt. Als letztes setzt die Projektextension auf. In dieser werden projektspezifische Anpassungen und Erweiterungen implementiert.
customer-t3quick-t3kit-TYPO3

Ein wichtiger Arbeitsschritt ist das Erstellen von pull requests. Hierbei werden Änderungen am Code von Fremdextensions wie t3kit durchgeführt. Änderungen können Bugfixes als auch neue Features sein. Die Arbeit und das Testing findet im ersten Schritt in einem vorher erstellten Klon (Fork) des t3kit-Codes statt. Dieser liegt, wie der t3kit-Code auch, auf GitHub. Nach einer internen Prüfung wird ein pull request in GitHub erstellt und von der Gegenseite gereviewt.

Eine wichtige Aufgabe ist die Erstellung von Standards für den Bereich Frontend. Auf Ebene der Stylesheets haben wir ein Set definiert, das in der Kundenextension eingebunden wird und leicht überschrieben werden kann. Dafür verwenden wir Sass als Präprozessor für CSS. dkd-intern CSS-Guidelines (adaptiert von cssguidelin.es), sind die Basis für die Entwicklung im Frontend. Die Guidelines liegen in Form einer Readme-Datei für alle Entwickler zugänglich in der Projektextension. Sie definieren die Verwendung von Variablen, Namenskonventionen und diverse Beispiele für Dos und Don'ts. Als Ordner-Architektur verwenden wir dabei das Inverted Triangle CSS von Harry Roberts.
Pro Ebene gibt es im t3quick und in der Projektextension einen Ordner in dem Sass-Dateien liegen. Das Dreieck beschreibt die Funktionsweise in CSS. Die Einbindung der Dateien erfolgt von oben nach unten, so dass die CSS-Anweisungen von oben nach unten in der Spezifikation zunehmen und in ihrer Reichweite begrenzt werden. Das heißt, dass sich zum Beispiel in Settings/_settings.scss Variablen befinden, die in allen Ebenen darunter verwendet werden können. In Trumps hingegen, sind nur sehr wenige Anweisungen zu finden. Diese tragen meistens ein !important und werden nicht mehr überschrieben da diese als letzte eingebunden sind.

In einer Live-Demo bei den Techettes, wurde die Verwendung und die Schnelligkeit des Pakets von Anna demonstriert. Mit nur wenigen TYPO3 Konfigurationen wurde die Seite von t3quick.de optisch zu techettes.de angepasst. Mit einem Backend-Editor kann zum Beispiel das Logo ausgetauscht und Farbanpassungen gemacht werden. Verschiedene Inhaltselemente helfen die Seiteninhalte zu strukturieren. Ein beliebtes Element ist zum Beispiel der Slider. Dieser bietet die Möglichkeit im Backend Bilder für Mobil, Tablet und Desktop Ansicht zu definieren.

Projektmanagement:
Alle Aufgaben im Blick. Alle Aufgaben im Griff.

Zu den Projektleitungsaufgaben im t3quick-Projekt gehören:

  • Sichtung der Anforderung der Kunden
  • Prüfung und Konzeption mit Lead-Entwickler
  • Erstellung von Angeboten mit Accountmanagern
  • Kopieren der t3quick-Standard-Tickets
  • Erstellung weiterer Tickets zu Anforderungen
  • Planung von Sprints/Releases
  • Testen
  • Abstimmung mit Kunden
  • Koordination zwischen Projektanforderungen und Entwicklerkontigenten

Das t3quick-Team erstellt ein Paket an Vorlagentickets inkl. User Storys, Wireframes und Konfigurationsbeschreibungen. Diese verwenden wir als Grundlage für die Erstellung individueller Kundenprojekte. Diese Basis an Features und Erweiterungen passen wir auf unsere kundenspezifischen Bedürfnisse an und ersparen uns damit viel Zeit und Arbeit. Weitere Anforderungen, die nicht im Paket enthalten sind, fügen wir dann als weitere Tickets hinzu. Hier ist es wichtig, sowohl Funktionalität, Budget als auch Kundenwünsche im Auge zu behalten und zu koordinieren.
Gerade weitere Anforderungen zu speziellen neuen Features müssen genau ins Auge gefasst werden, um später keine bösen Überraschungen zu erleben.

Wenn Layouts und Funktionsweisen mit dem Kunden abgestimmt sind, planen wir im Team unsere Releases, d.h. wir überlegen, welche Tickets Priorität haben und planen ein, was zuerst bearbeitet werden muss oder soll. Sobald die Bearbeitung von einem Entwickler abgeschlossen ist, wird die beschriebene Funktion auf Herz und Nieren getestet – sowohl im Backend als auch im Frontend. Wenn alle Anforderungen erfüllt sind, wird die Umsetzung im kommenden Release ausgerollt, so dass das Ticket zur Abnahme an den Kunden gegeben werden kann, falls etwas noch nicht wie gewünscht ist, geht das Ticket zur Nachbearbeitung zurück an den Entwickler.

Die Projektorganisation in Tickets und Releases stellt sicher, dass

  • wir schnell und flexibel auf Veränderungen reagieren können,
  • der Projektstand jederzeit nachvollziehbar ist,
  • wir den bestmöglichen Qualitätsstandard erreichen
  • und jederzeit stabile Zwischenergebnisse/Erfolge entstehen

Durch die Standarisierung des t3quick-Pakets bleibt dem Entwickler und dem Projektmanager zudem mehr Zeit, um sich um spezifische Projektanpassungen und -wünsche zu kümmern. So bleibt die Arbeit mit dem Paket auch bzw. trotz vieler Standards spannend und abwechslungsreich, denn hierfür bleibt mehr Budget.

Nach Abschluss des Projekts stehen noch folgende Aufgaben an:
eine Redakteursschulung beim Kunden, meist zusammen mit einem Entwickler, sowie die Abrechnung des Projekts in Zusammenarbeit mit dem Accountmanager.
Außerdem die Planung und Betreuung des Live-Gangs nach redaktionellem Abschluss des Kunden.

Da wir bei der dkd auch ein Support-Team beschäftigen, wird das Projekt nach Abschluss entsprechend an das Support-Team übergeben und der Kunde dort weiter betreut. Für den Kunden ist das Projektteam aber auch weiterhin noch zusätzlicher Ansprechpartner. Vor allem bei großen Projekten.

Darum t3quick

t3quick spart Zeit beim Start und bei der Entwicklung im Projekt und etabliert teamübergreifende Entwicklungsstandards.
Neben responsivem Design und adaptiven Bildern kommen eine Reihe an Anforderungen und Qualitätssicherungen, die eine Website heute erfüllen muss mit. t3quick enthält alle notwendigen Features für Front- und Backend, die ein Produktteam für die Betreuung benötigt.
Mit t3quick haben wir eine leistungsstarke Weblösung für den Mittelstand entwickelt um den Einstieg in TYPO3 einfach und schnell zu ermöglichen.

Showcase zum Abschluss

Zum Schluss wurden einige Projekte vorgestellt, die bis dato auf Basis des t3quick-Pakets umgesetzt wurden.

Den schönen Abschluss des Abends schließlich verdanken wir den Techettes-Zuhörerinnen und deren Fragen im Anschluss an unseren Talk.

Fazit:
Es war eine lohnenswerte und tolle Erfahrung, als Speaker bei den Techettes e.V. aufzutreten. Wir freuen uns auf weitere Termine.

dkd Internet Service GmbH
Für alle die uns noch nicht kennen, die dkd Internet Service GmbH ist die Digitalagentur im Rhein-Main-Gebiet, wenn es um TYPO3 geht. Wir feiern dieses Jahr unser 20-jähriges Firmenjubiläum und haben unseren Firmensitz und das Herz in Frankfurt am Main.