Seminar TYPO3 v14: Intensivseminar Frontend-Integration und Sitebuilding

Das Intensivseminar erstellt eine vollständige TYPO3-v14-Website als versioniertes Sitepackage. Site Sets, Settings, TypoScript, Fluid, Menüs, eigene Content-Elemente, Formulare, Mehrsprachigkeit, Qualität und Deployment werden in einem durchgängigen Sitebuilding-Projekt umgesetzt.

Die Inhalte sind auf intensivseminar mit hohem Praxisanteil ausgelegt. Theorie, Demonstration, geführte Konfiguration und kontrollierte Übungen greifen unmittelbar ineinander.

Lernziele

• Ein vollständiges Sitepackage mit Site Sets strukturieren
• TypoScript und Fluid sicher und modular einsetzen
• Menüs, Medien und eigene Content-Elemente integrieren
• Formulare, Mehrsprachigkeit und redaktionelle Qualität berücksichtigen
• Frontend testen, optimieren und deploymentsicher bereitstellen

Inhaltsübersicht

1. Sitepackage und Composer-Basis
2. Site Sets und Settings
3. TypoScript-Grundgerüst
4. Fluid-Komponenten und Layoutvarianten
5. Menüs und Data Processing
6. Eigene Content-Elemente
7. Formulare und Interaktion
8. Mehrsprachigkeit und redaktionelle Workflows
9. Barrierearmut, Metadaten und Medienqualität
10. Performance, Tests und Deployment

Kapitel 1: Sitepackage und Composer-Basis

Inhaltsübersicht des Kapitels

• Paketstruktur aufbauen
• Projekt in DDEV bereitstellen
• Kontrollpunkt und Dokumentation

Dieses Kapitel behandelt Paketstruktur aufbauen, Projekt in DDEV bereitstellen. Die Reihenfolge orientiert sich am üblichen Arbeitsprozess von der Vorbereitung über die Umsetzung bis zur Prüfung.

Schritt 1.1: Paketstruktur aufbauen

Fachliche Ausarbeitung: Design, Konfiguration, Templates, Assets und lokale Erweiterungen in einem klaren Paket organisiert. Praktische Umsetzung: Ein installierbares Sitepackage mit konsistenten Namespaces erstellt. Die entstandene Lösung wird mit einer Checkliste geprüft und bei Abweichungen gezielt korrigiert.

Schritt 1.2: Projekt in DDEV bereitstellen

Fachliche Ausarbeitung: Lokale Umgebung, Composer-Abhängigkeiten und Sitepackage-Installation reproduzierbar eingerichtet. Praktische Umsetzung: Eine frische Übungsinstanz aus dem Projektstand gestartet. Ein definierter Kontrollpunkt gleicht Konfiguration, Funktion und redaktionelle Wirkung miteinander ab.

Kontrollpunkt und Dokumentation

Die Arbeitsergebnisse des Kapitels werden auf fachliche Vollständigkeit, sichere Konfiguration und reproduzierbare Umsetzung geprüft. Festgestellte Abweichungen werden priorisiert, korrigiert und in einer kompakten Betriebs- oder Redaktionsnotiz festgehalten.

Kapitel 2: Site Sets und Settings

Inhaltsübersicht des Kapitels

• Site Set modellieren
• Settings definieren und nutzen
• Kontrollpunkt und Dokumentation

Dieses Kapitel behandelt Site Set modellieren, Settings definieren und nutzen. Die Reihenfolge orientiert sich am üblichen Arbeitsprozess von der Vorbereitung über die Umsetzung bis zur Prüfung.

Schritt 2.1: Site Set modellieren

Fachliche Ausarbeitung: Set-Metadaten, Abhängigkeiten und bereitgestellte Konfiguration fachlich getrennt. Praktische Umsetzung: Ein Site Set mit klarer Abhängigkeitskette angelegt. Ein definierter Kontrollpunkt gleicht Konfiguration, Funktion und redaktionelle Wirkung miteinander ab.

Schritt 2.2: Settings definieren und nutzen

Fachliche Ausarbeitung: Konfigurierbare Werte, Datentypen, Defaults und Beschreibungen in settings.definitions gepflegt. Praktische Umsetzung: Mehrere Werte in TypoScript und Fluid ohne Duplikation verwendet. Die Arbeitsschritte werden nachvollziehbar dokumentiert und anhand eines fachlichen Prüfkriteriums kontrolliert.

Kontrollpunkt und Dokumentation

Die Arbeitsergebnisse des Kapitels werden auf fachliche Vollständigkeit, sichere Konfiguration und reproduzierbare Umsetzung geprüft. Festgestellte Abweichungen werden priorisiert, korrigiert und in einer kompakten Betriebs- oder Redaktionsnotiz festgehalten.

Kapitel 3: TypoScript-Grundgerüst

Inhaltsübersicht des Kapitels

• Konfiguration modularisieren
• PAGE und FLUIDTEMPLATE konfigurieren
• Kontrollpunkt und Dokumentation

Dieses Kapitel behandelt Konfiguration modularisieren, PAGE und FLUIDTEMPLATE konfigurieren. Die Reihenfolge orientiert sich am üblichen Arbeitsprozess von der Vorbereitung über die Umsetzung bis zur Prüfung.

Schritt 3.1: Konfiguration modularisieren

Fachliche Ausarbeitung: Imports, Setup-Dateien und funktionale Bereiche in eine nachvollziehbare Reihenfolge gebracht. Praktische Umsetzung: Ein wartbares TypoScript-Grundgerüst erstellt. Die Arbeitsschritte werden nachvollziehbar dokumentiert und anhand eines fachlichen Prüfkriteriums kontrolliert.

Schritt 3.2: PAGE und FLUIDTEMPLATE konfigurieren

Fachliche Ausarbeitung: Seitenausgabe, Metadaten, Template-Pfade und Datenübergaben kontrolliert eingerichtet. Praktische Umsetzung: Eine vollständige Seitenhülle gerendert. Abschließend erfolgt eine Prüfung auf Konsistenz, Wartbarkeit und sichere Wiederholbarkeit.

Kontrollpunkt und Dokumentation

Die Arbeitsergebnisse des Kapitels werden auf fachliche Vollständigkeit, sichere Konfiguration und reproduzierbare Umsetzung geprüft. Festgestellte Abweichungen werden priorisiert, korrigiert und in einer kompakten Betriebs- oder Redaktionsnotiz festgehalten.

Kapitel 4: Fluid-Komponenten und Layoutvarianten

Inhaltsübersicht des Kapitels

• Templates strukturieren
• Varianten sicher ausgeben
• Kontrollpunkt und Dokumentation

Dieses Kapitel behandelt Templates strukturieren, Varianten sicher ausgeben. Die Reihenfolge orientiert sich am üblichen Arbeitsprozess von der Vorbereitung über die Umsetzung bis zur Prüfung.

Schritt 4.1: Templates strukturieren

Fachliche Ausarbeitung: Layouts, Templates, Partials und Sections nach Komponentenverantwortung aufgeteilt. Praktische Umsetzung: Header, Hauptbereich und Footer mit wiederverwendbaren Partials umgesetzt. Abschließend erfolgt eine Prüfung auf Konsistenz, Wartbarkeit und sichere Wiederholbarkeit.

Schritt 4.2: Varianten sicher ausgeben

Fachliche Ausarbeitung: Bedingungen, optionale Bereiche, Escaping und leere Zustände kontrolliert behandelt. Praktische Umsetzung: Mehrere Seitentypen aus einer gemeinsamen Basis erzeugt. Die entstandene Lösung wird mit einer Checkliste geprüft und bei Abweichungen gezielt korrigiert.

Kontrollpunkt und Dokumentation

Die Arbeitsergebnisse des Kapitels werden auf fachliche Vollständigkeit, sichere Konfiguration und reproduzierbare Umsetzung geprüft. Festgestellte Abweichungen werden priorisiert, korrigiert und in einer kompakten Betriebs- oder Redaktionsnotiz festgehalten.

Kapitel 5: Menüs und Data Processing

Inhaltsübersicht des Kapitels

• Navigation erzeugen
• Daten vor Fluid aufbereiten
• Kontrollpunkt und Dokumentation

Dieses Kapitel behandelt Navigation erzeugen, Daten vor Fluid aufbereiten. Die Reihenfolge orientiert sich am üblichen Arbeitsprozess von der Vorbereitung über die Umsetzung bis zur Prüfung.

Schritt 5.1: Navigation erzeugen

Fachliche Ausarbeitung: Menüebenen, aktive Zustände, Sprachkontext und Sonderseiten mit MenuProcessor vorbereitet. Praktische Umsetzung: Eine zugängliche Haupt- und Untermenünavigation aufgebaut. Die entstandene Lösung wird mit einer Checkliste geprüft und bei Abweichungen gezielt korrigiert.

Schritt 5.2: Daten vor Fluid aufbereiten

Fachliche Ausarbeitung: Content-, File- und Database-Processor für klare Template-Daten kombiniert. Praktische Umsetzung: Einen komplexen Inhaltsbereich ohne Logik im Template gerendert. Ein definierter Kontrollpunkt gleicht Konfiguration, Funktion und redaktionelle Wirkung miteinander ab.

Kontrollpunkt und Dokumentation

Die Arbeitsergebnisse des Kapitels werden auf fachliche Vollständigkeit, sichere Konfiguration und reproduzierbare Umsetzung geprüft. Festgestellte Abweichungen werden priorisiert, korrigiert und in einer kompakten Betriebs- oder Redaktionsnotiz festgehalten.

Kapitel 6: Eigene Content-Elemente

Inhaltsübersicht des Kapitels

• Felder und Backend-Bedienung konfigurieren
• Frontend-Rendering umsetzen
• Kontrollpunkt und Dokumentation

Dieses Kapitel behandelt Felder und Backend-Bedienung konfigurieren, Frontend-Rendering umsetzen. Die Reihenfolge orientiert sich am üblichen Arbeitsprozess von der Vorbereitung über die Umsetzung bis zur Prüfung.

Schritt 6.1: Felder und Backend-Bedienung konfigurieren

Fachliche Ausarbeitung: TCA, Assistent, Vorschau und Berechtigungen für projektspezifische Inhalte eingerichtet. Praktische Umsetzung: Ein eigenes Content-Element redaktionsgerecht registriert. Ein definierter Kontrollpunkt gleicht Konfiguration, Funktion und redaktionelle Wirkung miteinander ab.

Schritt 6.2: Frontend-Rendering umsetzen

Fachliche Ausarbeitung: TypoScript, Data Processor und Fluid-Template zu einem wiederverwendbaren Baustein verbunden. Praktische Umsetzung: Mehrere Varianten mit responsive Medien erstellt. Die Arbeitsschritte werden nachvollziehbar dokumentiert und anhand eines fachlichen Prüfkriteriums kontrolliert.

Kontrollpunkt und Dokumentation

Die Arbeitsergebnisse des Kapitels werden auf fachliche Vollständigkeit, sichere Konfiguration und reproduzierbare Umsetzung geprüft. Festgestellte Abweichungen werden priorisiert, korrigiert und in einer kompakten Betriebs- oder Redaktionsnotiz festgehalten.

Kapitel 7: Formulare und Interaktion

Inhaltsübersicht des Kapitels

• Form Framework integrieren
• Bedienbarkeit und Fehlerfälle prüfen
• Kontrollpunkt und Dokumentation

Dieses Kapitel behandelt Form Framework integrieren, Bedienbarkeit und Fehlerfälle prüfen. Die Reihenfolge orientiert sich am üblichen Arbeitsprozess von der Vorbereitung über die Umsetzung bis zur Prüfung.

Schritt 7.1: Form Framework integrieren

Fachliche Ausarbeitung: Formularstruktur, Validatoren, Finishers und Sitepackage-Templates zusammengeführt. Praktische Umsetzung: Ein mehrstufiges Formular mit sicherem Mailversand aufgebaut. Die Arbeitsschritte werden nachvollziehbar dokumentiert und anhand eines fachlichen Prüfkriteriums kontrolliert.

Schritt 7.2: Bedienbarkeit und Fehlerfälle prüfen

Fachliche Ausarbeitung: Labels, Fokus, Meldungen, Pflichtfelder, Uploads und Datenschutz kontrolliert. Praktische Umsetzung: Eine vollständige Formularabnahme mit negativen Testfällen durchgeführt. Abschließend erfolgt eine Prüfung auf Konsistenz, Wartbarkeit und sichere Wiederholbarkeit.

Kontrollpunkt und Dokumentation

Die Arbeitsergebnisse des Kapitels werden auf fachliche Vollständigkeit, sichere Konfiguration und reproduzierbare Umsetzung geprüft. Festgestellte Abweichungen werden priorisiert, korrigiert und in einer kompakten Betriebs- oder Redaktionsnotiz festgehalten.

Kapitel 8: Mehrsprachigkeit und redaktionelle Workflows

Inhaltsübersicht des Kapitels

• Sprachen in Site und Templates abbilden
• Entwurf und Vorschau berücksichtigen
• Kontrollpunkt und Dokumentation

Dieses Kapitel behandelt Sprachen in Site und Templates abbilden, Entwurf und Vorschau berücksichtigen. Die Reihenfolge orientiert sich am üblichen Arbeitsprozess von der Vorbereitung über die Umsetzung bis zur Prüfung.

Schritt 8.1: Sprachen in Site und Templates abbilden

Fachliche Ausarbeitung: Site-Sprachen, Fallbacks, Labels, Slugs und sprachabhängige Navigation integriert. Praktische Umsetzung: Eine zweite Sprache mit vollständiger Frontend-Ausgabe eingerichtet. Abschließend erfolgt eine Prüfung auf Konsistenz, Wartbarkeit und sichere Wiederholbarkeit.

Schritt 8.2: Entwurf und Vorschau berücksichtigen

Fachliche Ausarbeitung: Workspaces, zeitgesteuerte Inhalte und redaktionelle Vorschau in der Integration getestet. Praktische Umsetzung: Einen mehrsprachigen Entwurfsfall bis zur Veröffentlichung geprüft. Die entstandene Lösung wird mit einer Checkliste geprüft und bei Abweichungen gezielt korrigiert.

Kontrollpunkt und Dokumentation

Die Arbeitsergebnisse des Kapitels werden auf fachliche Vollständigkeit, sichere Konfiguration und reproduzierbare Umsetzung geprüft. Festgestellte Abweichungen werden priorisiert, korrigiert und in einer kompakten Betriebs- oder Redaktionsnotiz festgehalten.

Kapitel 9: Barrierearmut, Metadaten und Medienqualität

Inhaltsübersicht des Kapitels

• Semantik und Medienausgabe absichern
• Such- und Social-Metadaten integrieren
• Kontrollpunkt und Dokumentation

Dieses Kapitel behandelt Semantik und Medienausgabe absichern, Such- und Social-Metadaten integrieren. Die Reihenfolge orientiert sich am üblichen Arbeitsprozess von der Vorbereitung über die Umsetzung bis zur Prüfung.

Schritt 9.1: Semantik und Medienausgabe absichern

Fachliche Ausarbeitung: Überschriften, Landmarken, Links, Alternativtexte, Crop-Varianten und responsive Bilder kontrolliert. Praktische Umsetzung: Eine zentrale Seitenvorlage anhand einer Qualitätsliste überarbeitet. Die entstandene Lösung wird mit einer Checkliste geprüft und bei Abweichungen gezielt korrigiert.

Schritt 9.2: Such- und Social-Metadaten integrieren

Fachliche Ausarbeitung: Seitentitel, Beschreibungen, Canonical, Sitemap und Social-Daten im Rendering geprüft. Praktische Umsetzung: Mehrere Seitentypen mit konsistenter Metadatenausgabe abgenommen. Ein definierter Kontrollpunkt gleicht Konfiguration, Funktion und redaktionelle Wirkung miteinander ab.

Kontrollpunkt und Dokumentation

Die Arbeitsergebnisse des Kapitels werden auf fachliche Vollständigkeit, sichere Konfiguration und reproduzierbare Umsetzung geprüft. Festgestellte Abweichungen werden priorisiert, korrigiert und in einer kompakten Betriebs- oder Redaktionsnotiz festgehalten.

Kapitel 10: Performance, Tests und Deployment

Inhaltsübersicht des Kapitels

• Frontend messen und testen
• Sitepackage ausliefern
• Kontrollpunkt und Dokumentation

Dieses Kapitel behandelt Frontend messen und testen, Sitepackage ausliefern. Die Reihenfolge orientiert sich am üblichen Arbeitsprozess von der Vorbereitung über die Umsetzung bis zur Prüfung.

Schritt 10.1: Frontend messen und testen

Fachliche Ausarbeitung: Cachebarkeit, Assets, Bildverarbeitung, Template-Ausgabe, Links und visuelle Zustände bewertet. Praktische Umsetzung: Eine Baseline erstellt und einen Engpass behoben. Ein definierter Kontrollpunkt gleicht Konfiguration, Funktion und redaktionelle Wirkung miteinander ab.

Schritt 10.2: Sitepackage ausliefern

Fachliche Ausarbeitung: Build, Composer, Konfiguration, Datenbankänderungen, Cache und Smoke Tests in einen Releaseablauf überführt. Praktische Umsetzung: Eine releasefähige Version mit Rollback-Anweisung bereitgestellt. Die Arbeitsschritte werden nachvollziehbar dokumentiert und anhand eines fachlichen Prüfkriteriums kontrolliert.

Kontrollpunkt und Dokumentation

Die Arbeitsergebnisse des Kapitels werden auf fachliche Vollständigkeit, sichere Konfiguration und reproduzierbare Umsetzung geprüft. Festgestellte Abweichungen werden priorisiert, korrigiert und in einer kompakten Betriebs- oder Redaktionsnotiz festgehalten.

Didaktischer Aufbau

Jeder Themenblock beginnt mit einer Einordnung, wird am System demonstriert und anschließend praktisch umgesetzt. Übungen bauen aufeinander auf, sodass am Ende eine zusammenhängende, prüfbare TYPO3-Konfiguration oder ein vollständiger redaktioneller Arbeitsablauf vorliegt.