Seminar Antora – UI-Entwicklung und Branding mit dem Default UI

Beschreibung

Das Seminar vermittelt die systematische Entwicklung eines eigenen Antora-UI-Bundles auf Basis des Default UI. UI-Modell, Handlebars-Templates, Partials, Helfer, CSS, JavaScript, Assets, Navigation, Seitenmetadaten, responsive Gestaltung, Barrierefreiheit, lokaler UI-Build, Paketierung und Freigabe werden in einer durchgängigen Branding-Aufgabe praktisch umgesetzt.

Inhaltsübersicht

1. UI-Architektur und Entwicklungsumgebung
2. UI-Modell und Handlebars-Templates
3. Partials, Helfer und wiederverwendbare UI-Bausteine
4. CSS, Designsystem und Assets
5. Header, Navigation, Versionsauswahl und Footer
6. JavaScript und interaktive Funktionen
7. Responsive Design und Barrierefreiheit
8. Bundle-Build, Tests und Veröffentlichung

Lernziele

• UI-Modell, Template-Hierarchie und Asset-Pipeline des Default UI sicher verstehen.
• Templates, Partials, CSS und JavaScript wartbar anpassen.
• Navigation, Seitenmetadaten und responsive Darstellung nutzerorientiert gestalten.
• Ein barrierearmes UI-Bundle bauen, testen, versionieren und freigeben.

1. UI-Architektur und Entwicklungsumgebung

Der Einstieg klärt Aufbau, Build-Werkzeuge und Datenfluss eines Antora-UI-Projekts.

Schritt-für-Schritt: Eine lokale UI-Entwicklung reproduzierbar einrichten

1. Default-UI-Quellstruktur, Build-Skripte, Templates, Styles und Assets inventarisieren.
2. Projektbezogene Node.js- und Paketmanager-Versionen prüfen.
3. Abhängigkeiten installieren und den unveränderten UI-Build ausführen.
4. Lokale Vorschau mit Beispielseiten und UI-Modell starten.
5. Build-Ausgabe und erzeugtes Bundle auf Vollständigkeit kontrollieren.
6. Versions- und Arbeitsanweisungen für das Team dokumentieren.

Praxisaufgabe

Eine saubere UI-Entwicklungsumgebung wird eingerichtet und mit einem unveränderten Referenzbundle abgenommen.

2. UI-Modell und Handlebars-Templates

Templates greifen auf ein strukturiertes UI-Modell zu und müssen fehlende Daten defensiv behandeln.

Schritt-für-Schritt: Ein Template kontrolliert anpassen

1. UI-Modell für Startseite, Inhaltsseite, Navigation und Versionskontext untersuchen.
2. Zuständige Layouts und Partials für eine geplante Änderung identifizieren.
3. Vorhandene Template-Ausdrücke und Kontextwechsel nachvollziehen.
4. Eine neue Darstellungsanforderung mit minimalem Eingriff implementieren.
5. Fehlende oder optionale Modelldaten durch Bedingungen abfangen.
6. Änderung mit mehreren Seitentypen und Versionen in der Vorschau prüfen.

Praxisaufgabe

Ein standardisiertes Seitenmetadaten-Panel wird in das Inhaltslayout integriert.

3. Partials, Helfer und wiederverwendbare UI-Bausteine

Wiederverwendbare Darstellung wird in klar abgegrenzte Partials und kleine Helfer zerlegt.

Schritt-für-Schritt: Einen wartbaren UI-Baustein entwickeln

1. Wiederkehrende Markup-Strukturen und Datenzugriffe identifizieren.
2. Ein Partial mit klar definiertem Eingabekontext anlegen.
3. Komplexe, wiederkehrende Logik in einen kleinen, getesteten Helfer auslagern.
4. Namensregeln und Abhängigkeiten für UI-Bausteine dokumentieren.
5. Baustein in mehreren Layouts wiederverwenden und auf Kontextfehler prüfen.
6. Unnötige Kopplungen und globale Seiteneffekte im Review beseitigen.

Praxisaufgabe

Ein wiederverwendbarer Hinweis- und Statusbaustein wird als Partial mit Hilfsfunktion umgesetzt.

4. CSS, Designsystem und Assets

Branding wird über ein konsistentes Designsystem statt über verstreute Einzeländerungen umgesetzt.

Schritt-für-Schritt: Corporate Design in das UI übertragen

1. Design-Tokens für Typografie, Abstände, Farben, Rahmen und Zustände definieren.
2. Zentrale CSS-Variablen und Komponentenregeln anlegen.
3. Logo, Icons und weitere Assets in geeigneten Formaten integrieren.
4. Überschriften, Tabellen, Code, Hinweise und Navigation visuell harmonisieren.
5. Kontrast, Skalierung und Druckdarstellung mit Prüffällen kontrollieren.
6. Veraltete oder doppelte Stilregeln entfernen und die Struktur dokumentieren.

Praxisaufgabe

Eine Branding-Vorgabe wird in ein konsistentes Set aus Design-Tokens, Assets und Komponentenstilen überführt.

5. Header, Navigation, Versionsauswahl und Footer

Zentrale Orientierungs- und Aktionsbereiche werden auf Nutzungsaufgaben und Inhaltsarchitektur abgestimmt.

Schritt-für-Schritt: Die globale Site-Navigation gestalten

1. Zentrale Nutzerwege und notwendige globale Aktionen erfassen.
2. Headerstruktur mit Logo, Suche, Hauptnavigation und Zusatzaktionen planen.
3. Komponenten- und Versionsauswahl verständlich in den Seitenkontext integrieren.
4. Seitennavigation und Breadcrumb auf tiefe Hierarchien und lange Titel prüfen.
5. Footer mit rechtlichen, organisatorischen und supportbezogenen Informationen umsetzen.
6. Navigation mit Maus, Tastatur und kleinen Ansichten vollständig testen.

Praxisaufgabe

Header, Versionsauswahl, Breadcrumb und Footer werden für eine mehrkomponentige Site neu aufgebaut.

6. JavaScript und interaktive Funktionen

Interaktion wird sparsam, fehlertolerant und ohne Beeinträchtigung der Grundfunktion ergänzt.

Schritt-für-Schritt: Eine zugängliche UI-Interaktion implementieren

1. Anwendungsfall und notwendige Zustände der Interaktion beschreiben.
2. Semantisches HTML als funktionsfähige Ausgangsbasis erstellen.
3. JavaScript modular und ohne unnötige globale Abhängigkeiten ergänzen.
4. Fokus, Tastaturbedienung und Statusrückmeldung berücksichtigen.
5. Verhalten bei deaktiviertem JavaScript und Ladefehlern prüfen.
6. Funktion auf mehreren Browsergrößen und Seitentypen testen.

Praxisaufgabe

Ein auf- und zuklappbares Navigations- oder Metadatenpanel wird zugänglich und fehlertolerant implementiert.

7. Responsive Design und Barrierefreiheit

Das UI muss bei Zoom, kleinen Viewports, Tastaturbedienung und assistiven Technologien nutzbar bleiben.

Schritt-für-Schritt: Eine systematische Zugänglichkeitsprüfung durchführen

1. Repräsentative Seiten und interaktive Zustände für die Prüfung auswählen.
2. Layout bei verschiedenen Viewportbreiten und hoher Vergrößerung testen.
3. Überschriftenstruktur, Landmarken, Beschriftungen und Alternativtexte kontrollieren.
4. Tastaturreihenfolge, sichtbaren Fokus und Bedienbarkeit ohne Maus prüfen.
5. Kontraste, Fehlermeldungen und dynamische Statusausgaben bewerten.
6. Befunde priorisieren, korrigieren und in eine wiederverwendbare UI-Checkliste überführen.

Praxisaufgabe

Das Seminar-UI wird anhand eines strukturierten Barrierefreiheits- und Responsive-Checks überarbeitet.

8. Bundle-Build, Tests und Veröffentlichung

Das fertige UI wird als versioniertes, reproduzierbares und rücksetzbares Artefakt bereitgestellt.

Schritt-für-Schritt: Ein UI-Bundle produktionsfähig ausliefern

1. Linting, Template-Prüfung, Asset-Build und UI-Tests als Skripte definieren.
2. Bundle aus einer sauberen Umgebung erzeugen und Inhalt kontrollieren.
3. Version, Änderungsprotokoll und kompatible Antora-Stände festlegen.
4. Bundle in einer Staging-Site mit mehreren Komponenten und Versionen abnehmen.
5. Produktionsreferenz im Playbook auf die freigegebene Bundle-Version setzen.
6. Rollback auf das vorherige Bundle testen und den Freigabeprozess dokumentieren.

Praxisaufgabe

Ein freigegebenes UI-Bundle wird gebaut, in Staging geprüft und mit nachgewiesenem Rollback bereitgestellt.

Zielgruppe und Voraussetzungen

Zielgruppe: Frontend- und UI-Entwickler, Documentation Engineers, Webdesigner, Plattformteams, technische Redaktionsleitung und Verantwortliche für Corporate Design.

Voraussetzungen: Gute Kenntnisse in HTML und CSS, Grundkenntnisse in JavaScript und Template-Systemen sowie ein grundlegendes Antora-Verständnis.

Methodik und Arbeitsweise

Die Inhalte werden durch strukturierte Erläuterungen, Demonstrationen, schrittweise Konfigurations- und Analyseaufgaben sowie kontrollierte Fehlerfälle vertieft. Jede Übung verwendet definierte Ausgangswerte, Prüfpunkte und Dokumentationsanforderungen, damit die erarbeiteten Abläufe im späteren Projekt- und Betriebsalltag reproduzierbar bleiben.