Seminar Vaadin Styling, Themes und Barrierefreiheit

Seminarprofil

Das Seminar verbindet konsistentes Design mit technisch sauberem Styling und barrierearmen Bedienabläufen. Aura, Lumo, Design Tokens, CSS, Komponentenbereiche, Overlays, responsive Layouts, Fokusführung, Tastaturbedienung und zugängliche Formulare werden systematisch behandelt.

Lernziele

• Aura und Lumo anhand von Projektanforderungen auswählen und konfigurieren
• Design Tokens und CSS mit stabilen Styling-Einstiegspunkten einsetzen
• Komponenten, Overlays und Zustände ohne globale Seiteneffekte gestalten
• responsive Ansichten und wiederverwendbare Designregeln entwickeln
• Tastatur, Fokus, Beschriftungen, Kontrast und Fehlerrückmeldungen prüfen

Zielgruppe

Vaadin-Entwickler, UI-Entwickler, Design-System-Teams und technische Verantwortliche für Barrierefreiheit.

Voraussetzungen

Vaadin-Grundkenntnisse sowie Grundlagen in HTML und CSS.

Inhaltsverzeichnis

1. Kapitel 1: Theme-Grundlagen und Design Tokens
2. Kapitel 2: Komponenten gezielt gestalten
3. Kapitel 3: Responsive Layouts und Designsystem
4. Kapitel 4: Barrierefreiheit praktisch prüfen

Kapitel 1: Theme-Grundlagen und Design Tokens

Inhaltsverzeichnis

• Aura und Lumo
• Farben, Typografie und Abstände
• helle und dunkle Darstellung
• globale und lokale Theme-Entscheidungen

Schritt-für-Schritt-Anleitung

1. Projektanforderungen und bestehendes Corporate Design erfassen.
2. Ein Basistheme auswählen.
3. Zentrale Tokens für Farben, Schrift und Abstände definieren.
4. Varianten für zentrale Komponenten dokumentieren und prüfen.

Kapitel 2: Komponenten gezielt gestalten

Inhaltsverzeichnis

• CSS-Klassen und Style Properties
• Parts, Slots und Zustände
• Overlays und dynamische Inhalte
• Styling-Grenzen und Wartbarkeit

Schritt-für-Schritt-Anleitung

1. Eine Komponente mit stabiler Klasse oder Token konfigurieren.
2. Interne Bereiche nur über vorgesehene Styling-Schnittstellen anpassen.
3. Overlay-Inhalte und Zustände separat testen.
4. Globale Selektoren durch gekapselte Regeln ersetzen.

Kapitel 3: Responsive Layouts und Designsystem

Inhaltsverzeichnis

• FormLayout und Auto-Responsive-Verhalten
• Grid- und Detailansichten
• wiederverwendbare Layoutbausteine
• Dokumentation und visuelle Konsistenz

Schritt-für-Schritt-Anleitung

1. Inhalte nach Priorität und Bildschirmbreite ordnen.
2. Formulare und Master-Detail-Ansichten responsiv strukturieren.
3. Wiederkehrende Layoutregeln kapseln.
4. Komponentenvarianten in einer internen Referenzansicht zusammenführen.

Kapitel 4: Barrierefreiheit praktisch prüfen

Inhaltsverzeichnis

• semantische Beschriftungen
• Tastatur und Fokus
• Kontrast und Statusinformationen
• Fehler, Dialoge und dynamische Aktualisierungen

Schritt-für-Schritt-Anleitung

1. Alle Eingaben mit sichtbaren oder technisch zugeordneten Beschriftungen versehen.
2. Hauptabläufe ausschließlich mit Tastatur durchlaufen.
3. Fokusreihenfolge, Kontrast und Zustandsanzeigen prüfen.
4. Fehler- und Dialogverhalten mit automatisierten und manuellen Prüfungen absichern.

Praxisprojekt

Eine funktionale Beispielanwendung erhält ein konsistentes Theme, responsive Ansichten, definierte Komponentenvarianten und eine überprüfte Tastatur- und Fokusführung.

Arbeitsweise

Direkte Arbeit an Komponenten und CSS, visuelle Vergleiche, Responsive-Tests sowie strukturierte Barrierefreiheitsprüfungen.