Seminar ApostropheCMS Templates, Areas und Widgets

Das Seminar entwickelt flexible Seitenausgaben mit Nunjucks, Areas und eigenen Widgets. Datenkontext, Makros, Varianten, responsive Medien, Client-Assets, Barrierefreiheit, Performance und redaktionelle Leitplanken werden in einer wiederverwendbaren Komponentenbibliothek umgesetzt.

Inhaltsübersicht

• Zielsetzung und Einordnung
• Zielgruppe und Voraussetzungen
• Template-Struktur und Datenkontext
• Areas, Widgets und responsive Medien
• Assets, Qualität und Komponentenbibliothek
• Praxisübungen
• Methodik

Zielsetzung

• Template-Hierarchie, Datenkontext und wiederverwendbare Makros sicher einsetzen.
• Areas und Widgets mit klaren Schemas und redaktionellen Grenzen entwickeln.
• Medien, Beziehungen, Styles und Client-Verhalten komponentenorientiert integrieren.
• Ausgabequalität, Barrierefreiheit, Performance und Tests systematisch absichern.

Zielgruppe

Frontend- und Full-Stack-Entwickler, Template-Entwickler, technische Designer und ApostropheCMS-Integratoren

Voraussetzungen

Sichere HTML-, CSS- und JavaScript-Kenntnisse, Grundkenntnisse in Nunjucks oder vergleichbaren Template-Systemen sowie ApostropheCMS-Grundlagen

Seminarinhalte

Tag 1: Template-Struktur und Datenkontext

1. Schritt 1.1: Projekt- und Template-Hierarchie analysieren und Zuständigkeiten der Dateien zuordnen.
2. Schritt 1.2: Page-, Piece-, Index- und Detailtemplates mit klarer Vererbung strukturieren.
3. Schritt 1.3: Datenkontext, Bedingungen, Schleifen, Hilfsfunktionen und sichere Ausgabe anwenden.
4. Schritt 1.4: Makros, Includes und Layoutbausteine als wiederverwendbare Komponenten organisieren.
5. Schritt 1.5: Fehlende Daten, leere Zustände und redaktionelle Vorschau robust darstellen.

Tag 2: Areas, Widgets und responsive Medien

1. Schritt 2.1: Areas mit erlaubten Widgets, Mindest- und Höchstgrenzen sowie Hilfetexten konfigurieren.
2. Schritt 2.2: Ein eigenes Widget-Modul mit Schema, Template und redaktioneller Vorschau entwickeln.
3. Schritt 2.3: Varianten, Beziehungen, Piece-Auswahl und verschachtelte Daten in Widgets abbilden.
4. Schritt 2.4: Responsive Bilder, Alternativtexte, Bildausschnitte und Ladeverhalten korrekt integrieren.
5. Schritt 2.5: Redaktionelle Fehlbedienung durch sinnvolle Defaults, Validierung und Leitplanken reduzieren.

Tag 3: Assets, Qualität und Komponentenbibliothek

1. Schritt 3.1: Client-JavaScript und Styles modular laden und unnötige globale Abhängigkeiten vermeiden.
2. Schritt 3.2: Interaktive Widgets mit progressiver Verbesserung und stabilen Fehlerzuständen entwickeln.
3. Schritt 3.3: Semantik, Tastaturbedienung, Kontrast, Fokus und Screenreader-Ausgabe prüfen.
4. Schritt 3.4: Rendering, Mediengewicht und clientseitige Arbeit messen und optimieren.
5. Schritt 3.5: Widgets dokumentieren, testen und als freigegebene Komponentenbibliothek bündeln.

Praxisübungen

• Entwicklung eines responsiven Inhaltswidgets mit Varianten und Piece-Beziehung.
• Refactoring mehrerer Templates in eine wiederverwendbare Makro- und Komponentenstruktur.
• Qualitätsreview eines interaktiven Widgets nach Barrierefreiheits- und Performancekriterien.

Methodik

Live-Coding, Template-Labor, Komponentenentwicklung, redaktionelle Tests, Accessibility- und Performance-Review.