Angie Radtke über ihr Beez-Template

Vielen Dank für die Unterstützung: 

Angie Radtke, die das Beez-Template für Joomla! 1.5 erstellt hat, schrieb diesen Artikel vor fast einem Jahr um die Fähigkeiten des neues Beez2 und Beez5 Templates zu erklären.

Joomla! 1.6, Beez und der Stand der Dinge

Geschriebenvon: Angie Radtke - 28. März 2010

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

Meine Aufgabe war und ist hier die Implementierung von standardkonformem HTML-Code und die Gestaltung des Beez-Templates.

Von Layouttabellen haben wir uns endgü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 aufgrund der besseren Verständlichkeit umbenannt und vereinheitlicht.

Für Template-Designer bietet dies einen gewaltigen Vorteil. Der Joomla!-Standard-HTML-Output an sich ist sauber und wohlgeformt. 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 Ihnen nur einen kurzen Überblick über den aktuellen Entwicklungsstand geben 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 in XHTML und HTML5
  • Barrierefreiheit
  • zwei Gestaltungen stehen zur Wahl: Natur oder Personal
  • Position der Navigationsspalte 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 letzten 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 schon öfter über dieses Thema berichtet und erläutert, was schon jetzt problemlos möglich ist.

Die Voreinstellung für den Output in der Joomla!-Version 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 bekannteste Markup-Sprache handelt. Möchte man jedoch HTML 5 verwenden, lässt sich dies einfach durch die Beez-Template-Parameter konfigurieren. Das Umstellen führt dazu, dass die sogenannten Template Overrides in Kraft treten und der Template-interne Output – in diesen Fall der HTML 5-Code – ausgegeben wird.


HTML Version

Barrierefreiheit

Wie schon von Beez in Joomla! 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
  • Tastaturnavigierbarkeit

Gestaltung wählbar

Im Backend kann man zwischen zwei Gestaltungen wählen: Natur und Personal (vgl. Abb.

Konfiguration: Gestaltung

Gestaltungsvarianten

Diese Funktionalität wird durch eine entsprechende Strukturierung der CSS-Dateien 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 bzw. 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 Navigationsspalte

Je nach Website-Konzept kann es notwendig werden, die Navigation vor oder nach dem eigentlichen Inhalt zu positionieren. Dies 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.

Position der Navigationsspalte


Navigationsspalte vor dem Content


Barrierefreie Tabs

Die Darstellung der Inhalte in sogenannten Tabs wird immer beliebter. Schon jetzt gibt es die unterschiedlichsten Module, die Joomla! um diese Funktionalität erweitern. Keines der angebotenen Module erfüllt aber 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 für Menschen mit assistiver Technologie zugänglich 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. Falls Sie den Firebug zur Hand haben, können Sie 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 Seitenbereiche 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 Haus aus mit.
Den meisten Joomla!-Entwicklern dürfte die Template-Funktion

<jdoc include ....  > 

bekannt sein.

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.

<jdoc:include type="modules" name="position-5" style="beezTabs" headerLevel="2"  id="3" />

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. Falls Sie mehr als einen Tab-Bereich pro Seite definieren wollen, müssen Sie für jeden dieser Bereiche eine eigene "id" 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 zwei verschiedene Möglichkeiten an: Zum einen lässt sich die Spalte mit den zusätzlichen Informationen zur Gänze ein- und ausblenden, zum anderen lassen sich die Module bis auf ihre Überschriften ein- und ausklappen. Auch hier habe ich auf Wai-Aria und die schon oben beschriebene Technik gesetzt.

Das Ein- und Ausblenden der Informationspalte erfolgt Template-gesteuert:

<div id="close">
<a href="#" onclick="auf('right')">
<span id="bild">
<?php echo JText::_('TEXTRIGHTOPEN'); ?>
</span>
</a>
</div>

Ausblendbare Module

<jdoc:include type="modules" name="position-8" style="beezHide" headerLevel="3" state="0" />

Der hier verwendete Style spricht eine Funktion an, die es dem Nutzer ermöglicht, den Inhalt der ausgewählten Module auszublenden.
Das Attribut state legt fest, wie das oder die Module beim ersten Öffnen der Seite dargestellt werden. Wählt man state=“1“, ist das Modul beim ersten Laden geöffnet und kann vom Benutzer zugeklappt (und natürlich später auch wieder ausgeklappt) werden.

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

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

 

Kommentare

Barrierefreie Tabs, Ist eine absolut geniale Sache. Vielen Dank an Angie Ratke.
Ich habe die Tabs in den Content platziert, bringe aber nur die Links rein, nicht den eigentlichen Inhalt (Text). Wie muss man vorgehen um den Text in die Tabs zu bringen?
(Ist leider im Buch zuwenig explizit beschrieben)
Vielen Dank
C.C.