English Version

Schon länger wartet die Community auf das neue Release von Joomla 1.6.
Besonders die neu implementierte Userverwaltung als auch das neue Kategoriensystem wird mit Spannung erwartet. Neben diesen technischen Neuerungen wird sich aber auch noch einiges andere ändern. Das Backend wurde ein wenig redesigned, neue Module entwickelt und der HTML-Output auf den neuesten Stand der Technik gebracht.

Meine Aufgabe war und ist hier die Implementierung standardkonformen Html-Codes und die Gestaltung des Beez - Templates.

Von Layouttabellen haben wir uns entgültig verabschiedet - auch bei den Modulen. Der HTML-Output orientiert sich von der Struktur her an dem des alten Beez -Templates. Die CSS-Klassennamen wurden auf Grund der besseren Verständlichkeit umbenannt und vereinheitlicht.

Für Templatedesigner bietet dies einen gewaltigen Vorteil. Der Joomla Standard-HTML-Output an sich ist sauber und wohl geformt. Das Nutzen der sogenannten template-overrides ist nicht mehr zwingend erforderlich, um sauberen, standardkonformen Code zu generieren.

Auf dieser Basis ist das neue Beez- Template entstanden. Der folgende Text soll nur einen kurzen Überblick, über den aktuellen Entwicklungsstand gegen und ist definitiv keine vollständige Dokumentation.

Wer besonders neugierig ist kann sich den aktuellen Stand auf http://test5.run-digital.com ansehen.

Die wichtigsten Beez – Features im Überblick

• konfigurierbarer Output XHTML und HTML5
• Barrierefreiheit
• wählbar zwischen 2 Gestaltungen: Natur oder Personal
• Position der Navigationspalte konfigurierbar
• automatische Darstellung der Module in barrierefreien Tabs
• Ein- und ausblendbare Module
• Ein- und ausblendbare Spalte

XHTML versus Html 5

Das Web bewegt sich in großen Schritten auf HTML5 zu. Die Gruppe um Ian Hickson hat in den letzen Monaten große Fortschritte gemacht und den Browserherstellern bleibt nichts anders übrig als sich ganz gewaltig zu beeilen, um nicht den Anschluss zu verpassen.
In meinem Blog habe ich ja schon öfters über dieses Thema berichtet  und erläutert was schon jetzt problemlos möglich ist.

Die Voreinstellung für den Output in der 1. 6 wird aber nach wie vor XHTML sein. Der Grund dafür ist, dass es sich dabei, um die aktuell am häufigsten verwendete und bestbekannteste Markup- Sprache handelt. Möchte man jedoch HTML 5 verwenden, lässt sich dies einfach durch die Beez- Template-Parametern einfach konfigurieren. Das Umstellen führt dazu, dass die sogenannten Tempalte-Overwrites in Kraft treten und der templateinterne Output, in diesen Fall der HTML 5 Code, ausgegeben wird.

Barrierefreiheit

Wie schon von der Beez in 1.5 bekannt sind auch in Beez 2.0 all die Dinge implementiert, die für die Gestaltung eines barrierefreien Templates notwendig sind

• Farbkontraste
• Sprungmarken
• Semantik
• Tastaurnavigierbarkeit
• etc.

Gestaltung wählbar

Im Backend kann man zwischen zwei Gestaltungen wählen. Natur und Personal.

Diese Funktionalität wird durch eine entsprechende Strukturierung der CSS-Files ermöglicht:
Die position.css und die layout.css sind für die allgemeine Positionierung und die Abstände  verantwortlich, während je nach Style-Auswahl  die personal.css / natur.css  für die Gestaltung zuständig sind. Diese Style-Vorlagen sind weiterhin beliebig modifizierbar und können von Template-Entwicklern auch um zusätzliche Vorlagen ergänzt werden.

Position der Navigationspalte

Je nach Websitekonzept kann es notwendig werden die Navigation vor oder nach dem eigentlichen Inhalt zu positionieren. Die kann entweder aus Gründen der Gestaltung oder auch zur Verbesserung der Suchmaschinenfreundlichkeit und Zugänglichkeit erforderlich sein. Hier bietet Beez die Möglichkeit in beiden Styles zwischen beiden Varianten einfach im Backend zu wählen.

Barrierefreie Tabs

Die Darstellung der Inhalte in sogenannten Tabs wird immer beliebter. Schon jetzt gibt es für Joomla die unterschiedlichsten  Module, die Joomla um diese Funktionalität erweitern.

Keines der angeboten Module erfüllt nur annähernd die Anforderungen der Barrierefreiheit.
Die in Beez integrierte Lösung greift auf die Wai-Aria-Techniken zurück, um die Zugänglichkeit zu gewährleisten. Wai-Aria ist eine Technik mit der sich Rollen, Zustände und Eigenschaften von Bereichen beschreiben lassen um sie zugänglich für Menschen mit assistiver Technologie zu machen. Auf den ersten Blick ist davon im Quellcode nichts zu sehen. Dies liegt daran, dass der notwendige Code zur Laufzeit in das Dom der Seite eingefügt wird. Wer den Firebug zur Hand hat kann sich ja einmal den Spaß machen zu schauen, was da genau in den Quellcode geschrieben wird. Wai-Aria wird unter anderem auch dazu genutzt  die Seitebereiche nach Funktionalität auszuzeichnen.

Implementierung  innerhalb des Templates

Um Joomla! - Module innerhalb von Beez in Tabs darstellen zu können, braucht man keine zusätzliche Erweiterung. Beez bringt diese Funktionalität von Hause aus mit.
Den meisten Joomla- Entwicklern dürfte die Template - Funktion

Mit dieser Funktion lassen sich dynamische Inhalte innerhalb des Templates einfügen. Dies können sowohl Module als auch Komponenten sein.
Der folgende Code führt innerhalb von Beez dazu, dass alle Module, die sich auf der Position position-5 befinden automatisch in Tabs dargestellt werden.

Das Entscheidende ist die Angabe "BeezTabs" hinter dem sogenanntem style- Attribut,das für die Ausgabe der Inhalte verantwortlich ist und die entsprechende Funktion in beez/html/modules.php  ausführt. Die ID ist besonders wichtig. Sollte man mehr als einen Tabbereich pro Seite definieren wollen, ist für jeden dieser Bereiche eine eigene "id" zu vergeben. Dabei ist darauf zu achten, dass es sich hierbei nicht um einen string, sondern tatsächlich um eine Zahl handelt.

Ausblendbare Module und Seitenbereiche

Das Ein- und Ausblenden bestimmter Seitenbereiche kann für den Nutzer, gerade bei Seiten mit sehr viel Inhalt, durchaus hilfreich sein, um einen besseren Überblick zu bekommen. Beez bietet hier 2 verschiedene Möglichkeiten an. Zum einen lässt sich die Spalte mit den zusätzlichen Information zur Gänze ein- und ausblenden, zum anderen lassen sich die Module bis auf ihre Überschriften ein- und ausklappen. Auch hier setzte ich auf  Wai-Aria und die schon oben beschriebene Technik

Das Ein- und Ausblenden der Informationspalte erfolgt templategesteuert.

Ausblendbare Module

Der hier verwendete Style spricht eine Funktion an, die dem Nutzer ermöglicht den Inhalt der ausgewählten Module auzublenden.
Das Attribute "state" legt fest, wie das oder die Module beim Ersten Öffnen der Seite dargestellt werden.
Wählt man state=“1“ ist das Module beim ersten Laden geöffnet und kann durch den  Benutzer zugeklappt werden. ( und natürlich wieder eingeklappt)

Bei state="0" bleibt es zunächst, bis auf die Überschrift, unsichtbar und kann vom User geöffnet werden.

Das der aktuelle Status in einen Cookie geschrieben wird und seitenübergreifend funktioniert, versteht sich ganz von selbst .-)