Seminar Magnolia CMS – Frontend-Entwicklung mit Templates und Komponenten

Das Seminar führt von Seiten-, Bereichs- und Komponentendefinitionen über FreeMarker und Dialoge bis zu testbarer, zugänglicher und performanter Frontend-Ausgabe. Der Schwerpunkt liegt auf einer reproduzierbaren Vorgehensweise mit klaren Ausgangswerten, kontrollierten Änderungen, Negativtests und dokumentierten Abnahmekriterien. Produktive Änderungen werden nicht vorausgesetzt; alle Arbeitsschritte lassen sich in einer Labor- oder Projektumgebung nachvollziehen.

Inhaltsübersicht

1. Template- und Komponentenarchitektur
2. FreeMarker und Rendering-Kontext
3. Dialoge und redaktionelle Bedienung
4. Themes, Ressourcen und Frontend-Qualität
5. Tests und Freigabe
6. Zielgruppe und Voraussetzungen
7. Didaktik und Arbeitsweise

Template- und Komponentenarchitektur

Inhaltsverzeichnis

• Page-, Area- und Component-Definitionen
• Verfügbarkeit und Komponentenrestriktionen
• Prototypen, Vererbung und wiederverwendbare Strukturen
• Praxisübung, Prüfung und Dokumentation

Dieses Kapitel verbindet Page-, Area- und Component-Definitionen, Verfügbarkeit und Komponentenrestriktionen und Prototypen, Vererbung und wiederverwendbare Strukturen zu einem nachvollziehbaren Arbeitsablauf. Technische Konfiguration, redaktionelle Wirkung, Berechtigungen und betriebliche Folgen werden gemeinsam betrachtet, damit lokale Einzelmaßnahmen nicht zu inkonsistenten Gesamtprozessen führen.

1. Schritt 1 – Ausgangslage erfassen: Page-, Area- und Component-Definitionen werden in der Laborumgebung oder im bereitgestellten Referenzfall inventarisiert. Abhängigkeiten, Verantwortungen, bestehende Ausnahmen und erkennbare Risiken werden in einer Prüfliste festgehalten.
2. Schritt 2 – Zielmodell festlegen: Für Verfügbarkeit und Komponentenrestriktionen wird ein Sollzustand mit eindeutigen Namens-, Rollen-, Daten- und Qualitätsregeln entworfen. Nicht benötigte Optionen werden bewusst ausgeschlossen, damit der spätere Betrieb überschaubar bleibt.
3. Schritt 3 – Umsetzung durchführen: Prototypen, Vererbung und wiederverwendbare Strukturen werden schrittweise konfiguriert oder implementiert. Eine Seitenfamilie wird in wiederverwendbare Bereiche und Komponenten zerlegt. Jeder Änderungsschritt wird mit Ausgangswert, Änderung und erwarteter Wirkung protokolliert.
4. Schritt 4 – Funktion und Grenzen prüfen: Der Normalfall wird durch Positivtests bestätigt. Anschließend werden fehlende Daten, ungültige Eingaben, unberechtigte Zugriffe, nicht verfügbare Abhängigkeiten und Wiederanlauf betrachtet.
5. Schritt 5 – Standard festschreiben: Konfiguration, Prüfergebnisse, offene Risiken, Rückfalloptionen und Verantwortungen werden konsolidiert. Als verbindlicher Dokumentationsstand entsteht: Template-Landkarte mit Komponentenvertrag.

Die Übung endet erst nach einem reproduzierbaren Wiederholungstest. Dadurch bleibt nachvollziehbar, welche Voraussetzungen erfüllt sein müssen und wie Abweichungen systematisch erkannt werden.

FreeMarker und Rendering-Kontext

Inhaltsverzeichnis

• Modelle, Properties und sichere Ausgabe
• Includes, Makros und Fehlerbehandlung
• URLs, Links, Assets und lokalisierte Werte
• Praxisübung, Prüfung und Dokumentation

Dieses Kapitel verbindet Modelle, Properties und sichere Ausgabe, Includes, Makros und Fehlerbehandlung und URLs, Links, Assets und lokalisierte Werte zu einem nachvollziehbaren Arbeitsablauf. Technische Konfiguration, redaktionelle Wirkung, Berechtigungen und betriebliche Folgen werden gemeinsam betrachtet, damit lokale Einzelmaßnahmen nicht zu inkonsistenten Gesamtprozessen führen.

1. Schritt 1 – Ausgangslage erfassen: Modelle, Properties und sichere Ausgabe werden in der Laborumgebung oder im bereitgestellten Referenzfall inventarisiert. Abhängigkeiten, Verantwortungen, bestehende Ausnahmen und erkennbare Risiken werden in einer Prüfliste festgehalten.
2. Schritt 2 – Zielmodell festlegen: Für Includes, Makros und Fehlerbehandlung wird ein Sollzustand mit eindeutigen Namens-, Rollen-, Daten- und Qualitätsregeln entworfen. Nicht benötigte Optionen werden bewusst ausgeschlossen, damit der spätere Betrieb überschaubar bleibt.
3. Schritt 3 – Umsetzung durchführen: URLs, Links, Assets und lokalisierte Werte werden schrittweise konfiguriert oder implementiert. Mehrere Komponenten werden mit robustem Rendering und definierten Fallbacks implementiert. Jeder Änderungsschritt wird mit Ausgangswert, Änderung und erwarteter Wirkung protokolliert.
4. Schritt 4 – Funktion und Grenzen prüfen: Der Normalfall wird durch Positivtests bestätigt. Anschließend werden fehlende Daten, ungültige Eingaben, unberechtigte Zugriffe, nicht verfügbare Abhängigkeiten und Wiederanlauf betrachtet.
5. Schritt 5 – Standard festschreiben: Konfiguration, Prüfergebnisse, offene Risiken, Rückfalloptionen und Verantwortungen werden konsolidiert. Als verbindlicher Dokumentationsstand entsteht: FreeMarker-Bausteine mit dokumentiertem Datenvertrag.

Die Übung endet erst nach einem reproduzierbaren Wiederholungstest. Dadurch bleibt nachvollziehbar, welche Voraussetzungen erfüllt sein müssen und wie Abweichungen systematisch erkannt werden.

Dialoge und redaktionelle Bedienung

Inhaltsverzeichnis

• Felder, Tabs und Validierung
• Auswahlfelder, Referenzen und konditionale Eingaben
• Hilfetexte, Defaults und redaktionelle Fehlerprävention
• Praxisübung, Prüfung und Dokumentation

Dieses Kapitel verbindet Felder, Tabs und Validierung, Auswahlfelder, Referenzen und konditionale Eingaben und Hilfetexte, Defaults und redaktionelle Fehlerprävention zu einem nachvollziehbaren Arbeitsablauf. Technische Konfiguration, redaktionelle Wirkung, Berechtigungen und betriebliche Folgen werden gemeinsam betrachtet, damit lokale Einzelmaßnahmen nicht zu inkonsistenten Gesamtprozessen führen.

1. Schritt 1 – Ausgangslage erfassen: Felder, Tabs und Validierung werden in der Laborumgebung oder im bereitgestellten Referenzfall inventarisiert. Abhängigkeiten, Verantwortungen, bestehende Ausnahmen und erkennbare Risiken werden in einer Prüfliste festgehalten.
2. Schritt 2 – Zielmodell festlegen: Für Auswahlfelder, Referenzen und konditionale Eingaben wird ein Sollzustand mit eindeutigen Namens-, Rollen-, Daten- und Qualitätsregeln entworfen. Nicht benötigte Optionen werden bewusst ausgeschlossen, damit der spätere Betrieb überschaubar bleibt.
3. Schritt 3 – Umsetzung durchführen: Hilfetexte, Defaults und redaktionelle Fehlerprävention werden schrittweise konfiguriert oder implementiert. Ein technischer Datenvertrag wird in einen verständlichen Redaktionsdialog übersetzt. Jeder Änderungsschritt wird mit Ausgangswert, Änderung und erwarteter Wirkung protokolliert.
4. Schritt 4 – Funktion und Grenzen prüfen: Der Normalfall wird durch Positivtests bestätigt. Anschließend werden fehlende Daten, ungültige Eingaben, unberechtigte Zugriffe, nicht verfügbare Abhängigkeiten und Wiederanlauf betrachtet.
5. Schritt 5 – Standard festschreiben: Konfiguration, Prüfergebnisse, offene Risiken, Rückfalloptionen und Verantwortungen werden konsolidiert. Als verbindlicher Dokumentationsstand entsteht: Dialogdefinition mit Validierungs- und Hilfekonzept.

Die Übung endet erst nach einem reproduzierbaren Wiederholungstest. Dadurch bleibt nachvollziehbar, welche Voraussetzungen erfüllt sein müssen und wie Abweichungen systematisch erkannt werden.

Themes, Ressourcen und Frontend-Qualität

Inhaltsverzeichnis

• CSS- und JavaScript-Ressourcen
• responsive Verhalten und Browserkompatibilität
• Barrierearmut, Semantik und Performancebudgets
• Praxisübung, Prüfung und Dokumentation

Dieses Kapitel verbindet CSS- und JavaScript-Ressourcen, responsive Verhalten und Browserkompatibilität und Barrierearmut, Semantik und Performancebudgets zu einem nachvollziehbaren Arbeitsablauf. Technische Konfiguration, redaktionelle Wirkung, Berechtigungen und betriebliche Folgen werden gemeinsam betrachtet, damit lokale Einzelmaßnahmen nicht zu inkonsistenten Gesamtprozessen führen.

1. Schritt 1 – Ausgangslage erfassen: CSS- und JavaScript-Ressourcen werden in der Laborumgebung oder im bereitgestellten Referenzfall inventarisiert. Abhängigkeiten, Verantwortungen, bestehende Ausnahmen und erkennbare Risiken werden in einer Prüfliste festgehalten.
2. Schritt 2 – Zielmodell festlegen: Für responsive Verhalten und Browserkompatibilität wird ein Sollzustand mit eindeutigen Namens-, Rollen-, Daten- und Qualitätsregeln entworfen. Nicht benötigte Optionen werden bewusst ausgeschlossen, damit der spätere Betrieb überschaubar bleibt.
3. Schritt 3 – Umsetzung durchführen: Barrierearmut, Semantik und Performancebudgets werden schrittweise konfiguriert oder implementiert. Eine Komponentengruppe wird für mehrere Viewports und Tastaturbedienung geprüft. Jeder Änderungsschritt wird mit Ausgangswert, Änderung und erwarteter Wirkung protokolliert.
4. Schritt 4 – Funktion und Grenzen prüfen: Der Normalfall wird durch Positivtests bestätigt. Anschließend werden fehlende Daten, ungültige Eingaben, unberechtigte Zugriffe, nicht verfügbare Abhängigkeiten und Wiederanlauf betrachtet.
5. Schritt 5 – Standard festschreiben: Konfiguration, Prüfergebnisse, offene Risiken, Rückfalloptionen und Verantwortungen werden konsolidiert. Als verbindlicher Dokumentationsstand entsteht: Frontend-Checkliste mit Qualitäts- und Performancegrenzen.

Die Übung endet erst nach einem reproduzierbaren Wiederholungstest. Dadurch bleibt nachvollziehbar, welche Voraussetzungen erfüllt sein müssen und wie Abweichungen systematisch erkannt werden.

Tests und Freigabe

Inhaltsverzeichnis

• Definitionen und Renderingfälle
• visuelle Regression und Komponentenvarianten
• Fehlerseiten, leere Zustände und Produktionsprüfung
• Praxisübung, Prüfung und Dokumentation

Dieses Kapitel verbindet Definitionen und Renderingfälle, visuelle Regression und Komponentenvarianten und Fehlerseiten, leere Zustände und Produktionsprüfung zu einem nachvollziehbaren Arbeitsablauf. Technische Konfiguration, redaktionelle Wirkung, Berechtigungen und betriebliche Folgen werden gemeinsam betrachtet, damit lokale Einzelmaßnahmen nicht zu inkonsistenten Gesamtprozessen führen.

1. Schritt 1 – Ausgangslage erfassen: Definitionen und Renderingfälle werden in der Laborumgebung oder im bereitgestellten Referenzfall inventarisiert. Abhängigkeiten, Verantwortungen, bestehende Ausnahmen und erkennbare Risiken werden in einer Prüfliste festgehalten.
2. Schritt 2 – Zielmodell festlegen: Für visuelle Regression und Komponentenvarianten wird ein Sollzustand mit eindeutigen Namens-, Rollen-, Daten- und Qualitätsregeln entworfen. Nicht benötigte Optionen werden bewusst ausgeschlossen, damit der spätere Betrieb überschaubar bleibt.
3. Schritt 3 – Umsetzung durchführen: Fehlerseiten, leere Zustände und Produktionsprüfung werden schrittweise konfiguriert oder implementiert. Ein testbarer Abnahmeumfang wird aufgebaut und gegen typische Grenzfälle ausgeführt. Jeder Änderungsschritt wird mit Ausgangswert, Änderung und erwarteter Wirkung protokolliert.
4. Schritt 4 – Funktion und Grenzen prüfen: Der Normalfall wird durch Positivtests bestätigt. Anschließend werden fehlende Daten, ungültige Eingaben, unberechtigte Zugriffe, nicht verfügbare Abhängigkeiten und Wiederanlauf betrachtet.
5. Schritt 5 – Standard festschreiben: Konfiguration, Prüfergebnisse, offene Risiken, Rückfalloptionen und Verantwortungen werden konsolidiert. Als verbindlicher Dokumentationsstand entsteht: Abnahmesuite für Templates und Komponenten.

Die Übung endet erst nach einem reproduzierbaren Wiederholungstest. Dadurch bleibt nachvollziehbar, welche Voraussetzungen erfüllt sein müssen und wie Abweichungen systematisch erkannt werden.

Zielgruppe und Voraussetzungen

Inhaltsverzeichnis

• Adressierte Rollen
• Fachliche und technische Vorkenntnisse
• Labor- und Arbeitsmittel

Zielgruppe: Frontend-Entwicklung, Magnolia-Entwicklung, UI Engineering, technische Konzeption, Webarchitektur und Qualitätssicherung.

Voraussetzungen: Sichere HTML-, CSS- und JavaScript-Kenntnisse sowie Grundlagen in YAML und Template-Systemen; Magnolia-Grundkenntnisse sind hilfreich.

Für die Praxisanteile wird eine getrennte Magnolia-Umgebung mit Beispieldaten verwendet. Administrations- und Entwicklungsübungen werden mit nicht produktiven Konten durchgeführt. Vor jedem Eingriff werden Ausgangszustand, erwartete Wirkung und Rückfallmöglichkeit festgehalten.

Didaktik und Arbeitsweise

Inhaltsverzeichnis

• Fachimpuls und Demonstration
• Geführte Umsetzung
• Kontrollierte Fehlerfälle
• Abnahme und Dokumentation

Kurze Fachimpulse werden unmittelbar durch Demonstrationen und geführte Arbeitsschritte vertieft. Jede Übung enthält einen definierten Ausgangszustand, konkrete Prüfpunkte, mindestens einen Negativfall und eine schriftliche Abnahme. Wiederholbare Checklisten und Runbooks stehen im Mittelpunkt; reine Funktionsvorführungen ohne Prüfung sind nicht Bestandteil des Vorgehens.