Der Formularbaukasten

Für folgende Unterteilungen sind weitere Klassen vorgesehen:

• 50/50-Teilung (Klassen c50l und c50r)
• 33/66-Teilung (Klassen c33l und c66r sowie c66l und c33r)
• 25/75-Teilung (Klassen c25l und c75r sowie c75l und c25r)
• Goldener Schnitt (Klassen c38l und c62r sowie c62l und c38r)

Alle CSS-Klassen für die Subtemplates sind bereits in den Basis-Stylesheets enthalten und somit direkt einsetzbar. Wenn Sie ein Grid-Layout erstellen wollen, finden Sie dafür ebenfalls ein Beispiel in der Dokumentation. Bei diesem wurde auch der Quellcode angepasst und statt auf einen inneren Bereich mit Spalten direkt auf Subtemplates gesetzt.

Der Formularbaukasten

Kaum eine Webseite kommt ohne Formular aus, und seit Version 3.1 unterstützt YAML auch die Formulargestaltung durch einen Formularbaukasten. Dieser Baukasten besteht aus vorgegebenen HTML-Elementen und CSS-Code, den Sie an die eigenen Bedürfnisse anpassen können.Um auf den Formularbaukasten zuzugreifen, weisen Sie zuerst Ihrem form-Element die Klasse yform zu:

<form method="" action=""
class="yform">

Dann befüllen Sie Ihr Formular mit den gewünschten Elementen. Dabei wird folgende Grundstruktur erwartet:

<div class="type-text"><label for="your-id">your label</
label><input type="text" name="your-id"
id="your-id" size="20" /></div>

Die Beschriftung steht in einem label-Element, das über das for-Attribut mit der id des zugehörigen Formularfelds verbunden ist. Außerdem werden label und Formularfeld mit einem div-Element zusammengefasst, das mit einer Klasse versehen ist.Die Klasse type-text wird für Textfelder benötigt, type-select für Auswahllisten, typecheck für Checkboxen und Radiobuttons, type-button hingegen für Buttons wie den Submitbutton. Außerdem gibt es noch die Klasse error, die Sie bei einer Validierung über JavaScript ergänzen können und die das Feld dann hervorhebt.

Formatierung mittels forms.css

Die Formatierung wird über die Datei forms.css bewerkstelligt, die Sie im yaml/screen- Ordner finden und einbinden müssen.Wenn Sie das Simple-Project verwenden, sollten Sie forms.css aus dem yaml/screen- Ordner kopieren und in Ihren Ordner css/screen einfügen. Dann lässt sich die Datei innerhalb von my_layout.css einbinden über diese Codezeile:

@import url(screen/forms.css);

Forms.css besteht aus zwei Abschnitten: Im ersten Teil werden die Formularelemente gestaltet, das heißt, mit Hintergrundfarben und Rahmen versehen, die Sie natürlich für Ihr Layout entsprechend anpassen können. Im zweiten Teil kommen die Formatierungen für die Anordnung der Formularelemente, bei denen Sie besser nichts verändern sollten.Standardmäßig werden Formularelemente untereinander angezeigt. Für eine spaltenweise Anordnung ergänzen Sie in Ihrem form-Element noch die Klasse columnar.Auch bei der Formatierung der Formulare braucht der Internet Explorer Nachhilfe. Ein paar grundlegende Dinge werden bereits in der allgemeinen Patchdatei iehacks.css korrigiert, die Sie schon eingebunden haben.Weitere benötigte Anpassungen stehen am Ende der forms.css-Datei. Da diese Datei prinzipiell von allen Browsern gelesen wird, sind die IE-spezifischen Angaben durch spezielle - und nicht valide - Hacks vor den anderen Browsern versteckt, etwa so:

.yform { padding-top:
0\9; }

Durch die Ergänzung von \9 wird die Angabe nur vom Internet Explorer, nicht von anderen Browsern gelesen. Die in der forms.css auf den Internet Explorer zugeschnittenen Angaben betreffen insbesondere die Darstellung der legend innerhalb von fieldset-Elementen.

YAML Builder

Zur Erstellung eines Grundlayouts müssen Sie stets folgende Anpassungen vornehmen:

• In my_layout.css eventuell andere CSS-Dateien einbinden, beispielsweise die gewünschte Navigation und das benötigte Printstylesheet.
• In basemod.css die grundlegende Aufteilung definieren.
• Und schließlich muss auch patch_my_layout.css angepasst werden, das die layoutspezifischen Bugfixes enthält.

Speziell bei der Anpassung dieser drei Dateien hilft ein praktisches Online-Tool: der YAML Builder. Er bietet ein Konfigurationstool zur Definition des Layouts, zeigt eine Vorschau und erzeugt Ihnen den Code. Beim Tab Basics bestimmen Sie die Reihenfolge der Spalten und ihre Breite und können weitere Layoutvarianten definieren, wie beispielsweise eine Teaserbox ergänzen.

Link-Tipps

www.yaml.de www.yaml.de/de/dokumentation.html www.highresolution.info/weblog/entry/grid_layouts_sinnvoll_umsetzbar_mit_yaml/ www.yaml.de/de/dokumentation/anwendung/freiespaltenanordnung.html debug.yaml.de builder.yaml.de

Extended lässt Sie einzelne Elemente abwählen, die Bezeichnung von IDs und Klassen abändern, weitere Unterteilungen durchführen und Inhaltselemente wie Überschriften, Absätze und Listen in den Spalten platzieren. Bevor Sie ein Element in einer Spalte per Drag & Drop einfügen können, müssen Sie die Spalte allerdings erst durch Anklicken aktivieren.Der Button Get Code hält, was er Ihnen verspricht: Er liefert die benötigten Dateien wie HTML-Grundgerüst, my_layout.css, basemod.css und patch_my_layout.css. Diese müssen Sie nur noch an die richtige Stelle kopieren und haben Ihre individuelle Aufteilung. Dann können Sie an die Gestaltung der Inhalte über content.css gehen.Alles in allem ist YAML inzwischen ein äußerst ausgereiftes CSS-Framework, das einen Best-Practice-Lösungsansatz bei der Erstellung von Layouts präsentiert.Die große Flexibilität und Anpassungsfähigkeit von YAML bringt natürlich auch einen gewissen Overhead mit sich. Dafür sind aber viele grundlegende Layoutprobleme bereits gelöst und so bleibt Ihnen mehr Zeit für Ihre individuellen Gestaltungskomponenten.Um eine bessere Performance zu erzielen, sollten Sie jedoch unbedingt vor einem echten Einsatz die Anzahl der HTTP-Requests reduzieren, indem Sie die CSS-Dateien zusammenfassen.

WAI ARIA: das role-Attribut

Im YAML-Quellcode findet sich bei allen wichtigen div-Containern zusätzlich das role-Attribut, beispielsweise bei der Navigation:

<div id="nav" role="navigation">

Diese Rollen sind Teil der WAI-ARIA-Spezifikation des W3C. ARIA steht für Accessible Rich Internet Applications Suite und definiert eine Methode, um Webinhalte für behinderte User besser nutzbar zu machen. Hauptsächlich geht es dabei um dynamische Inhalte, das heißt, neue über JavaScript definierte Bedienelemente, aber auch statische Inhalte werden berücksichtigt.Über WAI ARIA lässt sich die Funktion oder Rolle einzelner Elemente genauer bestimmen. Ein div-Element, das als Slider fungiert, erhält beispielsweise das Attribut role="slider", eine Navigation role="navigation".

Das role-Attribut ist weder in HTML 4.01 noch in XHTML 1.0 vorgesehen, deswegen wird Ihnen der Validator an diesen Stellen eine Fehlermeldung ausgeben. Das ist aber ein typischer Fall, bei dem man besser auf die formale Validität in einem konkreten Fall verzichtet zugunsten einer verbesserten Zugänglichkeit.Ein Weg, den übrigens auch die Webseite einfach-fuer-alle. de beschreitet. Alternativ dazu können Sie natürlich auch den HTML5-Doctype verwenden, dann erscheint keine Fehlermeldung.Dass YAML die role-Attribute direkt im Quellcode aufgenommen hat, ist sinnvoll. Denn dieses ARIA-Markup wird schon von vielen aktuellen Screenreadern unterstützt und hilft bei der Navigation durch die Webseite. Die eingesetzten Rollen müssen Sie selbstverständlich noch bei Ihrem Layout anpassen. Bei YAML sind es folgende:

• role="banner" eignet sich für Inhalte, die eher für die Site in ihrer Gesamtheit wichtig sind als für die einzelne Seite. Bei YAML wird die obere Navigation so gekennzeichnet.
• role="contentinfo" ist für Copyrightvermerke und Ähnliches geeignet.
• role="navigation" kennzeichnet die Navigation.
• role="complementary" ist für einen zusätzlichen Bereich gedacht, der auch ohne den Hauptinhalt benutzbar bleibt.
• role="main" beschreibt den Hauptinhaltsbereich