Die Joomla!4-Architektur-Gruppe hat in Zusammenarbeit mit der UX Arbeitsgruppe die Content and UI Patterns Library ins Leben gerufen. Dort werden Muster von Inhaltstypen beschrieben, die immer wieder auftauchen um Inhalte zu strukturieren und zu gestalten. Die Sammlung steht erst an ihrem Anfang und kann ein paar helfende Hände gebrauchen.
In der Software-Entwicklung wird schon lange erfolgreich mit so genannten Entwurfsmustern (engl.: Design Patterns) gearbeitet. Diese Entwurfsmuster beschreiben erprobte Lösungen und ihre Einsatzgebiete unter einem einprägsamen Namen.
Auch bei der Darstellung von Inhalten treffen wir immer wieder auf dieselben Muster. Webseiten haben Logos und Menüs, Beiträge, Link-Listen u.v.a.m. Viele davon finden auch in anderen Medien Verwendung. Beiträge und Link-Listen können beispielsweise in ein PDF ausgegeben werden, in dem Menüs allerdings keinen Sinn machen. Obwohl die Strukturen dieser Elemente bei allen Ausgabe-Medien jeweils gleich sind, unterscheidet sich die Gestaltung teilweise erheblich.
In der Content and UI Patterns Library sollen die Muster benannt und beschrieben werden. Das Ziel ist dabei, eine Schnittstelle zwischen den Entwicklern von Komponenten und den Designern zu schaffen. Dazu werden die Muster in verschiedene Klassen eingeteilt.
Strukturmuster
In Anlehnung an das Atomic Design finden sich in dieser Klasse zunächst die 'Primitiven' (atoms), die im ersten Anlauf semantische Entsprechungen der HTML-Elemente sind. Es gibt Überschriften, Absätze, Links, Listen usw. Diese Muster werden dann zu größeren Strukturen zusammengefasst. Ein Anreißer (engl.: Teaser) besteht beispielsweise aus einer Überschrift, einem Bild, einem Absatz und einem Link. Die Strukturmuster definieren die Daten, die sie benötigen, sagen aber nichts über deren Anordnung oder Gestaltung aus.
Designmuster
Strukturen können unterschiedlich aussehen, je nachdem, wo sie eingesetzt werden. Die Teaser-Struktur wird als Anreißer auf einer Blog-Seite verwendet, aber auch in einer Feature-Liste oder in Suchergebnissen. Die Designmuster erlauben den Komponenten-Entwicklern so, die Strukturen mit weiteren semantischen Informationen zu versehen, die vom Template für das gewählte Ausgabemedium passend umgesetzt werden.
Verhaltensmuster
Manchmal möchte man gewisse Elemente auf der Website dynamisch gestalten. Beispiele sind die Slider, die eine Reihe von Bildern wie eine Dia-Show kontinuierlich im Wechsel anzeigen, oder Akkordeons, die Teile des Inhalts durch Klicken auf die Überschrift sichtbar werden lassen bzw. wieder verdecken. Obwohl diese Muster nicht in die Hände des Komponenten-Entwicklers gehören, sind sie für den Template-Entwickler sehr wichtig, da er die Funktionen über das Template zur Verfügung stellen muss.
Eingabeelemente
Die letzte Gruppe von Mustern beschreibt die Eingabefelder. Grundsätzlich handelt es sich bei diesen Elementen um Strukturmuster, die aber zusätzliche Informationen zu den Rückgabewerten benötigen. Außer den von HTML 5 bekannten Möglichkeiten werden beispielsweise Bereichseingaben für Zahlen und Daten beschrieben.
Mitarbeit gefragt
Wie bereits eingangs erwähnt, steht die Content and UI Patterns Library ganz am Anfang und enthält erst wenige Beispiele. Dein Beitrag kann entscheidend zum Erfolg dieser Bibliothek beitragen!
