Seminar Joomla – Templates, Child Templates und Frontend-Design

Das Seminar entwickelt aus einem Design- und Inhaltskonzept ein wartbares Joomla-Frontend. Cassiopeia dient als technische Referenz; Child Templates, eigene Positionen, CSS, JavaScript, Web Assets und Templateoptionen werden kontrolliert aufgebaut und getestet.

Inhaltsübersicht

• Lernziele und fachliche Einordnung
• Schrittweise Seminarinhalte
• Praxisübungen und Laborszenarien
• Zielgruppe und Voraussetzungen
• Didaktik und Arbeitsweise

Lernziele

• Template-Dateistruktur, Stile, Positionen und Vererbung in Joomla sicher beherrschen.
• Ein Child Template als updatefähige Basis für ein eigenständiges Frontend erstellen.
• Responsive Layouts, Typografie, Farben, Navigation und Modulpositionen systematisch umsetzen.
• CSS und JavaScript über den Web Asset Manager abhängigkeits- und versionssicher laden.
• Zugänglichkeit, Performance, Browserkompatibilität, Deployment und Wartung verbindlich prüfen.

Schrittweise Seminarinhalte

1. Designanforderungen und Template-Zielbild

Schwerpunkt: Zielgruppen, Seitentypen, Inhaltsbreiten, Navigation, Module, Geräte, Markenrichtlinien, Barrierefreiheit und Performancebudget.

1. Ausgangslage, Zielgruppen und fachliche Anforderungen für „Designanforderungen und Template-Zielbild“ erfassen.
2. Die Aspekte Zielgruppen, Seitentypen, Inhaltsbreiten, Navigation, Module, Geräte, Markenrichtlinien, Barrierefreiheit und Performancebudget in einem nachvollziehbaren Sollmodell ordnen.
3. Varianten vergleichen, Abhängigkeiten markieren und belastbare Entscheidungskriterien festlegen.
4. Das Sollmodell mit Beispieldaten, Gegenproben und definierten Abnahmekriterien verifizieren.
5. Als Arbeitsergebnis ein freigegebenes Frontend- und Komponentenraster dokumentieren und für die weitere Umsetzung freigeben.

2. Template-Anatomie und Joomla-Ausgabekette

Schwerpunkt: index.php, component.php, error.php, templateDetails.xml, Positionen, Styles, Parameter, Dokument und Komponentenoutput.

1. Inhaltsstruktur, Zielgeräte und gestalterische Anforderungen für „Template-Anatomie und Joomla-Ausgabekette“ analysieren.
2. Template-, Layout- und Asset-Strukturen für index.php, component.php, error.php, templateDetails.xml, Positionen, Styles, Parameter, Dokument und Komponentenoutput kontrolliert aufbauen.
3. Responsive Darstellung, Semantik, Interaktion und barrierearme Bedienung schrittweise umsetzen.
4. Browser-, Geräte-, Tastatur-, Kontrast- und Performance-Tests mit definierten Prüffällen durchführen.
5. Als Arbeitsergebnis ein nachvollziehbares Template-Architekturmodell in einem wartbaren Frontend- und Gestaltungsstandard dokumentieren.

3. Child Template und Vererbung

Schwerpunkt: Cassiopeia, Parent, Child, Medienverzeichnis, Dateien, Stile, Parameter, Vererbung, Überschreibungen und Updategrenzen.

1. Inhaltsstruktur, Zielgeräte und gestalterische Anforderungen für „Child Template und Vererbung“ analysieren.
2. Template-, Layout- und Asset-Strukturen für Cassiopeia, Parent, Child, Medienverzeichnis, Dateien, Stile, Parameter, Vererbung, Überschreibungen und Updategrenzen kontrolliert aufbauen.
3. Responsive Darstellung, Semantik, Interaktion und barrierearme Bedienung schrittweise umsetzen.
4. Browser-, Geräte-, Tastatur-, Kontrast- und Performance-Tests mit definierten Prüffällen durchführen.
5. Als Arbeitsergebnis eine installierte updatefähige Child-Template-Basis in einem wartbaren Frontend- und Gestaltungsstandard dokumentieren.

4. Positionen, Module und Seitenraster

Schwerpunkt: Templatepositionen, Modul-Chrome, Zuweisungen, Grid-Bereiche, Reihenfolge, leere Positionen, Kontextmodule und mobile Priorität.

1. Inhaltsstruktur, Zielgeräte und gestalterische Anforderungen für „Positionen, Module und Seitenraster“ analysieren.
2. Template-, Layout- und Asset-Strukturen für Templatepositionen, Modul-Chrome, Zuweisungen, Grid-Bereiche, Reihenfolge, leere Positionen, Kontextmodule und mobile Priorität kontrolliert aufbauen.
3. Responsive Darstellung, Semantik, Interaktion und barrierearme Bedienung schrittweise umsetzen.
4. Browser-, Geräte-, Tastatur-, Kontrast- und Performance-Tests mit definierten Prüffällen durchführen.
5. Als Arbeitsergebnis ein flexibles Seiten- und Modulraster in einem wartbaren Frontend- und Gestaltungsstandard dokumentieren.

5. CSS-Architektur, Typografie und Farbsystem

Schwerpunkt: CSS Custom Properties, Cascade Layers, Grid, Flexbox, Utility-Klassen, Komponentenstyles, Systemfonts, Kontrast und Zustände.

1. Inhaltsstruktur, Zielgeräte und gestalterische Anforderungen für „CSS-Architektur, Typografie und Farbsystem“ analysieren.
2. Template-, Layout- und Asset-Strukturen für CSS Custom Properties, Cascade Layers, Grid, Flexbox, Utility-Klassen, Komponentenstyles, Systemfonts, Kontrast und Zustände kontrolliert aufbauen.
3. Responsive Darstellung, Semantik, Interaktion und barrierearme Bedienung schrittweise umsetzen.
4. Browser-, Geräte-, Tastatur-, Kontrast- und Performance-Tests mit definierten Prüffällen durchführen.
5. Als Arbeitsergebnis eine skalierbare CSS- und Design-Token-Basis in einem wartbaren Frontend- und Gestaltungsstandard dokumentieren.

6. Responsive Navigation und Interaktion

Schwerpunkt: Menümodul, Untermenüs, mobile Umschaltung, Fokus, Tastatur, aktive Zustände, Dialoge, Offcanvas-Muster und progressive Erweiterung.

1. Inhaltsstruktur, Zielgeräte und gestalterische Anforderungen für „Responsive Navigation und Interaktion“ analysieren.
2. Template-, Layout- und Asset-Strukturen für Menümodul, Untermenüs, mobile Umschaltung, Fokus, Tastatur, aktive Zustände, Dialoge, Offcanvas-Muster und progressive Erweiterung kontrolliert aufbauen.
3. Responsive Darstellung, Semantik, Interaktion und barrierearme Bedienung schrittweise umsetzen.
4. Browser-, Geräte-, Tastatur-, Kontrast- und Performance-Tests mit definierten Prüffällen durchführen.
5. Als Arbeitsergebnis eine robuste responsive Navigation in einem wartbaren Frontend- und Gestaltungsstandard dokumentieren.

7. Web Asset Manager und JavaScript-Module

Schwerpunkt: joomla.asset.json, Assets, Abhängigkeiten, Versionierung, defer, module, Script Options, Ereignisse und Fehlerbehandlung.

1. Inhaltsstruktur, Zielgeräte und gestalterische Anforderungen für „Web Asset Manager und JavaScript-Module“ analysieren.
2. Template-, Layout- und Asset-Strukturen für joomla.asset.json, Assets, Abhängigkeiten, Versionierung, defer, module, Script Options, Ereignisse und Fehlerbehandlung kontrolliert aufbauen.
3. Responsive Darstellung, Semantik, Interaktion und barrierearme Bedienung schrittweise umsetzen.
4. Browser-, Geräte-, Tastatur-, Kontrast- und Performance-Tests mit definierten Prüffällen durchführen.
5. Als Arbeitsergebnis eine kontrollierte Asset- und JavaScript-Auslieferung in einem wartbaren Frontend- und Gestaltungsstandard dokumentieren.

8. Templateoptionen und redaktionelle Steuerung

Schwerpunkt: XML-Formfelder, Stile, Farben, Logos, Layoutvarianten, Parameterzugriff, Defaults, Validierung und Änderungsgrenzen.

1. Funktionalen Vertrag, Datenfluss und Dateistruktur für „Templateoptionen und redaktionelle Steuerung“ definieren.
2. Die erforderlichen Joomla-Klassen, Manifestangaben und Dienste für XML-Formfelder, Stile, Farben, Logos, Layoutvarianten, Parameterzugriff, Defaults, Validierung und Änderungsgrenzen implementieren.
3. Die Implementierung mit Formularen, Sprachdateien, Berechtigungen und Frontend- beziehungsweise Backend-Ausgabe integrieren.
4. Coding-Standards, Fehlerbehandlung, Sicherheitsprüfungen sowie automatisierte und manuelle Tests anwenden.
5. Als Arbeitsergebnis ein konfigurierbares Template ohne Codeänderung paketieren, versionieren und technisch dokumentieren.

9. Test, Performance und Deployment

Schwerpunkt: Browser, Geräte, Tastatur, Kontrast, visuelle Regression, Core Web Vitals, Cache, Git, Staging, Freigabe, Rollback und Dokumentation.

1. Bestand, Abhängigkeiten, Risiken und Zielzustand für „Test, Performance und Deployment“ vollständig inventarisieren.
2. Staging-Kopie, Sicherungen, Kompatibilitätsprüfungen und Rollback für Browser, Geräte, Tastatur, Kontrast, visuelle Regression, Core Web Vitals, Cache, Git, Staging, Freigabe, Rollback und Dokumentation vorbereiten.
3. Die Änderung in kontrollierten Schritten ausführen und jeden Zwischenstand protokollieren.
4. Daten, Erweiterungen, Templates, Berechtigungen, URLs und Geschäftsprozesse mit einem Abnahmekatalog prüfen.
5. Als Arbeitsergebnis einen produktionsreifen Frontend-Releaseprozess einschließlich Freigabe-, Rückfall- und Nachsorgeplan dokumentieren.

Praxisübungen und Laborszenarien

• Erstellung eines Frontend-Zielbilds mit Seitentypen, Positionen und responsive Prioritäten.
• Aufbau eines Child Templates auf Basis von Cassiopeia.
• Implementierung eines eigenen Seitenrasters mit Modulpositionen und Modul-Chrome.
• Entwicklung eines konsistenten CSS- und Typografiesystems.
• Integration eines JavaScript-Moduls über den Web Asset Manager.
• Anlage konfigurierbarer Templateoptionen für Logo, Farben und Layoutvarianten.
• Durchführung von Browser-, Tastatur-, Performance- und Deploymenttests.

Zielgruppe und Voraussetzungen

Zielgruppe: Frontend-Entwicklung, Webdesign, Template-Entwicklung, Agenturen und technisch versierte Joomla-Administration

Voraussetzungen: Gute Kenntnisse in HTML und CSS, Grundkenntnisse in JavaScript und PHP sowie sichere Joomla-Bedienung

Didaktik und Arbeitsweise

Die Inhalte werden als zusammenhängendes dreitägiges Projektszenario bearbeitet. Planung, Konfiguration, Test, Fehleranalyse und Dokumentation greifen ineinander; Zwischenergebnisse werden täglich überprüft und in einen belastbaren Umsetzungsplan überführt.