Seminar Joomla – Intensivseminar Templates, UX und Barrierefreiheit

Das Intensivseminar verbindet Inhaltsmodell, Template-Technik und Qualitätssicherung. Ausgehend von Cassiopeia und Child Templates entsteht ein eigenständiges, responsives, mehrsprachiges und barrierearmes Frontend mit wartbaren Overrides, strukturierten Inhalten, optimierten Assets und klarer Deployment-Strategie.

Inhaltsübersicht

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

Lernziele

• Ein Joomla-Frontend aus Inhaltsarchitektur, Komponentenansichten, Modulen und Templatepositionen systematisch planen.
• Child Templates, Templateoptionen, CSS, JavaScript und Web Assets wartbar umsetzen.
• Overrides, alternative Layouts und Custom Fields für wiederverwendbare Inhaltsmuster einsetzen.
• Barrierefreiheit, Mehrsprachigkeit, SEO und Performance als gemeinsame Qualitätsanforderungen behandeln.
• Frontend-Tests, Versionierung, Deployment und Override-Wartung in einen belastbaren Prozess überführen.

Schrittweise Seminarinhalte

1. UX-Zielbild und Inhaltsarchitektur

Schwerpunkt: Zielgruppen, Nutzeraufgaben, Inhaltsarten, Navigation, Seitentypen, Komponenten, Module, Custom Fields und Qualitätsziele.

1. Ausgangslage, Zielgruppen und fachliche Anforderungen für „UX-Zielbild und Inhaltsarchitektur“ erfassen.
2. Die Aspekte Zielgruppen, Nutzeraufgaben, Inhaltsarten, Navigation, Seitentypen, Komponenten, Module, Custom Fields und Qualitätsziele 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 abgestimmtes UX-, Inhalts- und Seitentypenmodell dokumentieren und für die weitere Umsetzung freigeben.

2. Template-Anatomie und Child-Template-Strategie

Schwerpunkt: Cassiopeia, Template-Dateien, templateDetails.xml, Stile, Child Templates, Vererbung, Medienpfade und Updatefähigkeit.

1. Inhaltsstruktur, Zielgeräte und gestalterische Anforderungen für „Template-Anatomie und Child-Template-Strategie“ analysieren.
2. Template-, Layout- und Asset-Strukturen für Cassiopeia, Template-Dateien, templateDetails.xml, Stile, Child Templates, Vererbung, Medienpfade und Updatefähigkeit 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 wartbare Child-Template-Basis in einem wartbaren Frontend- und Gestaltungsstandard dokumentieren.

3. Positionen, Module und Seitenkomposition

Schwerpunkt: Templatepositionen, Modul-Chrome, Zuweisungen, Menüvererbung, responsive Reihenfolge, Kontext und wiederverwendbare Module.

1. Inhaltsstruktur, Zielgeräte und gestalterische Anforderungen für „Positionen, Module und Seitenkomposition“ analysieren.
2. Template-, Layout- und Asset-Strukturen für Templatepositionen, Modul-Chrome, Zuweisungen, Menüvererbung, responsive Reihenfolge, Kontext und wiederverwendbare Module 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 konsistentes Seiten- und Modulraster in einem wartbaren Frontend- und Gestaltungsstandard dokumentieren.

4. CSS-Architektur und Responsive Design

Schwerpunkt: CSS Custom Properties, Grid, Flexbox, Container, Breakpoints, Typografie, Abstände, Zustände und komponentenbezogene Styles.

1. Inhaltsstruktur, Zielgeräte und gestalterische Anforderungen für „CSS-Architektur und Responsive Design“ analysieren.
2. Template-, Layout- und Asset-Strukturen für CSS Custom Properties, Grid, Flexbox, Container, Breakpoints, Typografie, Abstände, Zustände und komponentenbezogene Styles 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 responsive CSS-Baseline in einem wartbaren Frontend- und Gestaltungsstandard dokumentieren.

5. Web Asset Manager und JavaScript

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

1. Inhaltsstruktur, Zielgeräte und gestalterische Anforderungen für „Web Asset Manager und JavaScript“ analysieren.
2. Template-, Layout- und Asset-Strukturen für joomla.asset.json, Abhängigkeiten, Versionierung, defer, module, Script Options, Ereignisse, progressive Erweiterung 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 Interaktionsarchitektur in einem wartbaren Frontend- und Gestaltungsstandard dokumentieren.

6. Template Overrides und alternative Layouts

Schwerpunkt: Komponenten- und Modul-Overrides, Layout-Dateien, Override Manager, alternative Layouts, Menüzuordnung und Updatevergleich.

1. Inhaltsstruktur, Zielgeräte und gestalterische Anforderungen für „Template Overrides und alternative Layouts“ analysieren.
2. Template-, Layout- und Asset-Strukturen für Komponenten- und Modul-Overrides, Layout-Dateien, Override Manager, alternative Layouts, Menüzuordnung und Updatevergleich 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 einen wartbaren Override-Katalog in einem wartbaren Frontend- und Gestaltungsstandard dokumentieren.

7. Custom Fields und strukturierte Seitentypen

Schwerpunkt: Feldgruppen, bedingte Felder, Medienfelder, Layoutpositionen, Ausgabe, Inhaltsvorlagen und redaktionelle Pflichtangaben.

1. Redaktionelle Ziele, Inhaltsarten und Verantwortlichkeiten für „Custom Fields und strukturierte Seitentypen“ festlegen.
2. Die Joomla-Objekte und Einstellungen für Feldgruppen, bedingte Felder, Medienfelder, Layoutpositionen, Ausgabe, Inhaltsvorlagen und redaktionelle Pflichtangaben strukturiert konfigurieren.
3. Beispielinhalte anlegen, bearbeiten, versionieren und durch den vorgesehenen Veröffentlichungsweg führen.
4. Darstellung, Berechtigungen, Metadaten und Verhalten im Frontend mit Positiv- und Negativfällen prüfen.
5. Als Arbeitsergebnis einen wiederverwendbaren strukturierten Inhaltstyp dokumentieren und in einen wiederholbaren Redaktionsstandard überführen.

8. Semantik, Tastatur und zugängliche Interaktion

Schwerpunkt: Landmarken, Überschriften, Fokus, Skip-Links, Menüs, Dialoge, Kontrast, Statusmeldungen und ARIA nur bei Bedarf.

1. Inhaltsstruktur, Zielgeräte und gestalterische Anforderungen für „Semantik, Tastatur und zugängliche Interaktion“ analysieren.
2. Template-, Layout- und Asset-Strukturen für Landmarken, Überschriften, Fokus, Skip-Links, Menüs, Dialoge, Kontrast, Statusmeldungen und ARIA nur bei Bedarf 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 barrierearme Interaktions- und Semantik-Baseline in einem wartbaren Frontend- und Gestaltungsstandard dokumentieren.

9. Formulare, Medien und redaktionelle Barrierefreiheit

Schwerpunkt: Labels, Fehlermeldungen, Autocomplete, CAPTCHA, Alternativtexte, Audio, Video, Dokumente, Abkürzungen und Tabellen.

1. Inhaltsstruktur, Zielgeräte und gestalterische Anforderungen für „Formulare, Medien und redaktionelle Barrierefreiheit“ analysieren.
2. Template-, Layout- und Asset-Strukturen für Labels, Fehlermeldungen, Autocomplete, CAPTCHA, Alternativtexte, Audio, Video, Dokumente, Abkürzungen und Tabellen 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 einen zugänglichen Formular- und Medienstandard in einem wartbaren Frontend- und Gestaltungsstandard dokumentieren.

10. Mehrsprachigkeit und internationale Frontends

Schwerpunkt: Sprachrichtung, Schriften, Menüs, Modulassoziationen, Inhaltssprachen, Übersetzungsstatus, URL-Struktur und Sprachumschalter.

1. Inhaltsstruktur, Zielgeräte und gestalterische Anforderungen für „Mehrsprachigkeit und internationale Frontends“ analysieren.
2. Template-, Layout- und Asset-Strukturen für Sprachrichtung, Schriften, Menüs, Modulassoziationen, Inhaltssprachen, Übersetzungsstatus, URL-Struktur und Sprachumschalter 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 konsistentes mehrsprachiges Frontend-Modell in einem wartbaren Frontend- und Gestaltungsstandard dokumentieren.

11. SEO, strukturierte Daten und Performance

Schwerpunkt: Titel, Metadaten, Headings, interne Links, Schema-Ausgabe, Bilder, Caching, kritische Assets, Core Web Vitals und CDN.

1. Inhaltsstruktur, Zielgeräte und gestalterische Anforderungen für „SEO, strukturierte Daten und Performance“ analysieren.
2. Template-, Layout- und Asset-Strukturen für Titel, Metadaten, Headings, interne Links, Schema-Ausgabe, Bilder, Caching, kritische Assets, Core Web Vitals und CDN 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 kombinierte Auffindbarkeits- und Performance-Baseline in einem wartbaren Frontend- und Gestaltungsstandard dokumentieren.

12. Testing, Deployment und Frontend-Governance

Schwerpunkt: Browser, Geräte, Tastatur, Kontrast, visuelle Regression, Performance-Budget, Git, Staging, Freigabe und Override-Review.

1. Bestand, Abhängigkeiten, Risiken und Zielzustand für „Testing, Deployment und Frontend-Governance“ vollständig inventarisieren.
2. Staging-Kopie, Sicherungen, Kompatibilitätsprüfungen und Rollback für Browser, Geräte, Tastatur, Kontrast, visuelle Regression, Performance-Budget, Git, Staging, Freigabe und Override-Review 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 vollständigen Frontend-Test- und Releaseprozess einschließlich Freigabe-, Rückfall- und Nachsorgeplan dokumentieren.

Praxisübungen und Laborszenarien

• Entwurf eines UX- und Seitentypenmodells für eine mehrsprachige Organisation.
• Erstellung eines Child Templates mit eigenem Stil, Positionen und konfigurierbaren Optionen.
• Umsetzung eines Komponenten- und Modul-Overrides mit updatefähiger Dokumentation.
• Aufbau eines Custom-Field-basierten Inhaltstyps und einer alternativen Darstellung.
• Durchführung von Tastatur-, Kontrast-, Responsive- und Formularprüfungen.
• Optimierung von Assets, Bildern und Cache-Einstellungen anhand eines Performance-Budgets.
• Erstellung eines Frontend-Releaseplans mit Staging, Regressionstest und Rollback.

Zielgruppe und Voraussetzungen

Zielgruppe: Frontend-Entwicklung, Webdesign, Template-Entwicklung, UX, Webredaktion, Accessibility- und Qualitätsverantwortliche

Voraussetzungen: Sichere Kenntnisse in HTML und CSS, Grundkenntnisse in JavaScript und Joomla sowie praktische Erfahrung mit responsivem Webdesign

Didaktik und Arbeitsweise

Das Intensivformat arbeitet mit einem durchgängigen Unternehmensszenario. Kurze Fachblöcke werden durch umfangreiche Laborphasen, kontrollierte Störungen, Reviews und dokumentierte Abnahmen ergänzt, sodass ein vollständiger Rollen- und Betriebsleitfaden entsteht.