Joomla Beez- was ist das denn?

Beez ist ein erweitertes Template für Joomla, bei dessen Erstellung wir auf standardkonformen Code, Zugänglichkeit und Flexibilität geachtet haben. Mit Joomla 1.5 sind wir in der Lage, die HTML-Ausgabe in unser Template zu verlagern, so dass die Standardausgabe nicht mehr zwingend genutzt werden muss. Das bringt die notwendige Flexibilität, die wir zur Gestaltung zugänglicher, standardkonformer Seiten brauchen.

Beez ist nur ein Beispiel, um den neuen Weg, den uns Joomla 1.5 eröffnet, zu demonstrieren. Es dient als Basis, kann beliebig modifiziert und erweitert werden.
Wir haben bei der Erstellung darauf geachtet, dass schon durch Anpassungen der CSS-Dateien und der index.php, ein Großteil aller Designs umgesetzt werden können.

Was haben wir nun tatsächlich gemacht?

1.Trennung von Inhalt und Layout: der Code

Der erste Schritt bestand darin, Inhalt und Darstellung voneinander zu trennen und die bis dato lästigen Layouttabellen loszuwerden.
Die möglichst weitgehende Trennung des Inhalts von den verschiedenen Arten der Darstellung ist die Grundlage jedes Designs, das einerseits geräteunabhängig dargestellt und andererseits auch verschiedenen Anforderungen der User angepasst werden kann.
Die technische Grundlage dafür ist die Tatsache, dass die überwiegende Mehrheit der heute eingesetzten Browser einigermaßen zuverlässig mit Stylesheets umgehen kann.

Das war nicht immer so: Aber wer heute noch mit Layouttabellen arbeitet, verwendet eine überholte und in den meisten Fällen nicht mehr zu rechtfertigende Technik und sollte umlernen.

Der Einsatz von Stylesheets erlaubt es, den Inhalt einer Webseite ohne Rücksicht auf die Darstellungsweise mit einer Markup-Sprache zu codieren.
Die Darstellungsweise wird in Stylesheets festgelegt. Dies kann in einem oder mehreren getrennten und teilweise auch vom User wählbaren Stylesheets geschehen.
Ohne Stylesheets ist auch mit einem grafischen Browser der Inhalt sinngemäß
aufzunehmen - mit Stylesheets ist eine allen Anforderungen des audiovisuellen Zeitalters entsprechende Darstellung möglich.

Auf der Grundlage der Trennung von Inhalt und Präsentation haben wir ein Markup entwickelt, dessen formale Struktur der inhaltlichen Struktur weitgehend entspricht.


Das heißt:

  • dass alle Elemente eines Dokuments in der richtigen und logischen Reihenfolge im Quelltext angeordnet sind - unabhängig davon, ob sie später auf einem Bildschirm neben- oder untereinander erscheinen.
  • dass alle Elemente so ausgezeichnet sind, wie das ihrer Stellung und Bedeutung im Dokument (=Semantik) entspricht: Überschriften als Überschriften, Absätze als Absätze, Zitate als Zitate, Adressen als Adressen, Tabellendaten als Tabellendaten, Formularelemente logisch miteinander verknüpft usw. Damit ist es möglich, das Dokument automatisch auf verschiedenste Weise weiter zu verarbeiten, nicht zuletzt eben auch für eine möglichst komfortable Wiedergabe in einem Screenreader.

Ein Feature von Beez ist z.B., dass Sie die Möglichkeit haben, die Überschriftenhierarchie Ihrer Artikel im Backend festzulegen, ohne selbst in den Code eingreifen zu müssen.

2. Die Sprungmarken

Die lineare Darstellung von Inhalten hat allerdings einen großen Nachteil: Unter Umständen muss man einen sehr weiten Weg zurücklegen, um zu "hinten" liegenden Inhaltsbereichen zu kommen. Auf dem Bildschirm können bei einem Drei-Spalten-Layout dagegen mehrere Bereiche "oben" zumindest anfangen, und das Auge kann gleich dorthin springen, wo es - durch visuelle Hilfen unterstützt - die gerade interessierende Information vermutet. Abhilfe bietet hier das Konzept der Sprungmarken. Es bildet faktisch ein nicht visuelles Gegenstück zum grafischen Layout und ermöglicht es dem Anwender linearer Wiedergabegeräte, wesentliche Inhaltsbereiche bereits am Anfang der Seite zu identifizieren und dann unmittelbar dorthin zu springen, wo er die Informationen vermutet, die ihn interessieren.
Wesentliche Inhaltsbereiche - das können die Navigationen sein, der Hauptinhalt, eine Spalte mit Nachrichten, eine Linkliste, eine Sucheingabe, ein Formular - die Aufzählung ist keinesfalls abschließend. Für Seiten mit vielfältigen Inhalten, die "komplexe Dokumente" (wie oben besprochen) darstellen, ist es sinnvoll, alle Hauptbereiche auf diese Weise anspringbar zu machen.

Beez kümmert sich an 2 Stellen um diese Sprungmarken.
Zum einen in der index.php, wo Ihre Position festgelegt wird und zum anderen in den eingesetzten Komponenten und Modulen, die Formularelemente enthalten.

Senden Screenreader-Nutzer ein Formular ab, welches nicht mit einer Sprungmarke versehen wurde, landen sie am Seitenanfang und müssen erst umständlich zum eigentlichen Seiteninhalt navigieren.
Um dies zu verhindern, verfügen die in Beez eingesetzten, Formulare über Sprungmarken zum eigentlichen Seiteninhalt.

Beispiel das Suchmodule :

echo '

';:

Dem ein oder anderen wird sicherlich auffallen, dass die Sprungmarken, beim Navigieren mit der Tastatur sichtbar werden, was Tastaturnutzern die Handhabung der Seite erleichtert.

3. Die Gestaltung und das CSS

1.Semi-skalierbares Layout:
Innerhalb des Webdesigns unterscheidet man zwischen festen und fluiden Layouts.
Fluide Layouts passen sich der Bildschirmgröße an und bieten skalierbarem Text Raum. Die Breitenangaben einzelner Spalten des Designs werden in Prozent oder em angegeben, das bietet die Möglichkeit, den Darstellungsbereich des Bildschirms maximal auszunutzen. Ändert sich die Größe des Browserfensters, passt sich der Inhalt automatisch an.
Eigentlich ist das eine schöne Sache, aber im Rahmen unserer gestalterischen Aufgabe kann das zu massiven Problemen führen. Falls Seiten nur sehr wenig textlichen Inhalt haben, können sie bei einer Auflösung von 800 x 600 Pixeln durchaus homogen und ausgeglichen wirken. Schaut man sich dieselbe Seite mit einer Auflösung von 1280 x 1024 Pixeln an, kann es passieren, dass der Inhalt am oberen Rand des Bildschirms klebt, was sehr unschön aussieht und die Lesbarkeit der angebotenen Texte deutlich erschwert.
Das Auge beginnt zu schwimmen und kann den Beginn der Zeile nicht mehr mit ihrem Anfang verknüpfen.

Aus diesem Grunde haben wir Beez mit einer maximalen Breite versehen.

2.Variable Schriftgrössen
Es ist oft verführerisch, durch Einsatz von sehr kleinen Schriften mehr Informationen auf dem Bildschirm unterzubringen. Wenn schon die Fläche nicht vergrößert werden kann, will man doch die Menge der Informationen erhöhen. Größere Schriften wirken zudem am Bildschirm wenig elegant und stören deshalb das "Designerauge".
Nicht nur für fehlsichtige und alte Menschen sind jedoch zu kleine Schriften schwer bis gar nicht lesbar.

Die gängigen Browser bieten uns glücklicherweise die Möglichkeit, Schriften zu zoomen, Dies funktioniert aber nur dann, wenn wir relative Angaben für die Schriftgrößen machen und keine feste Pixelgröße wählen.

Aus diesen Grunde verwendet Beez für die Schriftgrösse die relative Angabe em


Außerdem wurde auf:

  • ausreichende Kontraste
  • einen inhaltlich logischen Aufbau
  • das Fehlen von Schriftgrafiken
  • keine transparenten Hintergründe für Grafiken

geachtet.

Wir können hier nicht im Detail auf alle Features von Beez eingehen, hoffen aber, Euch neugierig gemacht zu haben.

Zuletzt bleibt uns aber noch eins zu sagen. Auch wenn ihr Beez verwendet, bleibt ihr gefordert. Denn die inhaltliche Konzeption und die Strukturierung der Inhalte trägt deutlich zur besseren Zugänglichkeit bei. Diese Arbeit können wir euch nicht abnehmen.

Wir wünschen euch viel Spass mit Beez und bitten euch, uns über evtl. Fehler zu informieren.

Kommentare 0

Kommentar schreiben