Seminar Ibexa DXP – Frontend-Entwicklung mit Twig, Themes und Views

Die Schulung entwickelt eine wartbare serverseitige Präsentationsschicht für Ibexa DXP. Content Views, Twig, Themes, Komponenten, Query-Ergebnisse, Assets, Mehrsprachigkeit, Cache und Barrierefreiheit werden zu einer konsistenten Frontend-Architektur verbunden.

Inhaltsübersicht

• Zielsetzung
• Zielgruppe
• Voraussetzungen
• Seminarinhalte
• Praxisübungen
• Methodik

Zielsetzung

• Content- und Location-Views nach Kontext und SiteAccess korrekt konfigurieren.
• Twig-Templates, Komponenten und Themes strukturiert und wiederverwendbar entwickeln.
• Content-Abfragen, Navigation, URLs, Medien und Übersetzungen sicher ausgeben.
• Performance, Cache, Barrierefreiheit und automatisierte Frontend-Tests berücksichtigen.

Zielgruppe

Frontend-Entwickler, PHP- und Symfony-Entwickler, technische Designer, Agenturen und Solution-Architekten mit Verantwortung für serverseitige Ibexa-DXP-Frontends.

Voraussetzungen

Sichere HTML-, CSS- und Twig-Grundkenntnisse sowie Verständnis von Symfony und strukturiertem Content. Grundkenntnisse des Ibexa-DXP-Content-Modells und der SiteAccess-Logik sind erforderlich.

Seminarinhalte

1. Schritt 1: Darstellungsarchitektur planen

   Seitenarten, Komponenten, Layouts, Designsystem, Sites, Sprachen und Ausgabekanäle werden in wiederverwendbare Ebenen gegliedert.

2. Schritt 2: View-Konfiguration verstehen

   Content- und Location-Views, Match-Regeln, Prioritäten, Controller und SiteAccess-Bezug werden anhand konkreter Darstellungsfälle konfiguriert.

3. Schritt 3: Twig-Basisstruktur aufbauen

   Layouts, Blöcke, Includes, Makros, Namenskonventionen und Template-Verzeichnisse werden für klare Verantwortlichkeiten organisiert.

4. Schritt 4: Content-Felder sicher rendern

   Feldwerte, Rich Text, Relationen, Medien, leere Werte, Fallbacks und redaktionelle Varianten werden typgerecht ausgegeben.

5. Schritt 5: Komponenten und Twig Components entwickeln

   Wiederverwendbare UI-Bausteine erhalten definierte Eingaben, Varianten, Validierung und dokumentierte Beispiele.

6. Schritt 6: Themes und Design Engine einsetzen

   Globale und SiteAccess-spezifische Themes, Überschreibungen und Asset-Zuordnung werden ohne Duplikation strukturiert.

7. Schritt 7: Navigation und URLs erzeugen

   Content-Baum, Locations, URL-Aliase, aktive Zustände, Breadcrumbs und Sprachwechsel werden konsistent und zugänglich umgesetzt.

8. Schritt 8: Content-Abfragen integrieren

   Query Types, Kriterien, Sortierung, Pagination und leere Ergebnisse werden in Präsentationskomponenten eingebunden.

9. Schritt 9: Assets und responsive Medien behandeln

   Build-Prozess, CSS und JavaScript, Bildvarianten, Lazy Loading, Maße und alternative Texte werden performant organisiert.

10. Schritt 10: Cache und Personalisierung berücksichtigen

    HTTP-Cache, Vary-Kontext, angemeldete Benutzer, Rollen und personalisierte Bereiche werden bei der Komponentenarchitektur berücksichtigt.

11. Schritt 11: Barrierefreiheit und SEO prüfen

    Semantik, Überschriftenstruktur, Tastatur, Fokus, Labels, Metadaten, strukturierte Inhalte und Linkqualität werden systematisch getestet.

12. Schritt 12: Frontend testen und dokumentieren

    Template-Tests, visuelle Prüffälle, responsive Ansichten, Browsermatrix und Komponentenbeispiele werden in den Lieferprozess integriert.

Praxisübungen

• Content View für einen mehrsprachigen Artikeltyp konfigurieren.
• Wiederverwendbare Teaser-Komponente mit Varianten und Fallbacks entwickeln.
• SiteAccess-spezifisches Theme ohne Template-Duplikation aufbauen.
• Navigation mit Breadcrumb, Sprachwechsel und aktiver Markierung umsetzen.
• Performance- und Accessibility-Prüfliste auf eine Beispielseite anwenden.

Methodik

Ein kleines Frontend wird schrittweise aufgebaut und in jeder Stufe überprüft. Template-Review, Komponentenorientierung und reale Content-Daten verhindern rein statische Musterlösungen.