Inhaltsverzeichnis TEIL Einleitung 17. Kapitel 1 Die Basis: die inhaltliche und visuelle Konzeption 21

Transkript

1

2 3 Inhaltsverzeichnis TEIL 1 15 Einleitung 17 Was Sie erwarten können Worauf Sie sich einstellen sollten Wie Sie sich vorbereiten können Kapitel 1 Die Basis: die inhaltliche und visuelle Konzeption Mit der Struktur fängt es an Nutzererwartungen erkennen Layout Die Seitengliederung Inhalte visuell strukturieren Gestaltung am Raster die Grids Die Umsetzung Grafisches Layout Zeit für die Optik Feste und fluide Layouts Kapitel 2 Barrierefreiheit Was ist das eigentlich? Die gesetzlichen Grundlagen Barrierefreiheit für wen eigentlich? Sehbehinderung Technische Hilfsmittel Was können wir tun? Motorische Behinderungen Ausgangslage und Befund Technische Hilfsmittel Was können wir tun? Gehörlose Ausgangslage und Befund Technische Unterstützung Was können wir tun?... 55

3 4 Inhaltsverzeichnis 2.5 Lernbehinderungen Ausgangslage und Befund Was können wir tun? Gruppe Ausgangslage und Befund Was können wir tun? Kapitel 3 CSS und HTML Das Grundgerüst in Form bringen Ein wenig zur Geschichte Welche Version von HTML sollte ich verwenden? Das HTML-Grundgerüst Eine kurze Einführung in CSS Einleitung Einbinden der CSS-Anweisungen Externe Einbindung als Datei oder direkt im Dokumentenkopf Inline-Styles Selektoren CSS Elementselektoren Mehrmals verwendbar: CSS Klassen ID-Selektoren Kontextselektoren Kindselektoren Universalselektoren Pseudoklassen-Selektoren Attribut-Selektoren Vererbung Positionierung und Boxmodell CSS-Hacks und Browserprobleme Conditional Comments Der *-Hack Schon wieder der Internet Explorer has layout CSS-Tuning... 80

4 Inhaltsverzeichnis 5 Kapitel 4 PHP und Joomla! PHP einbinden Kommentare echo Variablenwerte ausgeben Bedingungen: if-anweisungen else-anweisung Für Profis: Auf Objekte und ihre Werte zugreifen Die Funktion get Kapitel 5 MooTools Warum MooTools? MooTools-Schnellstart Dollar-Funktionen und Events Der MooTools-Core in Aktion Das Klassensystem Das MooTools-Prinzip Weiterführende Links Kapitel 6 Tools HTML-Validator und CSS-Validator Web-Developer-Toolbar Weitere Features der Web-Developer-Toolbar Firebug Die wichtigsten Funktionalitäten im Überblick Hilfetools für die Barrierefreiheit Color-Contrast-Analyzer Accessibility-Extensions für Internet Explorer und Mozilla/Firefox Wave WCAG 2-Checker der Universität Toronto

5 6 Inhaltsverzeichnis TEIL Kapitel 7 Jetzt wird es konkret: Der erste Blick auf die Templates Atomic beez_20/beez Templates im Backend verwalten Der Template-Manager: Styles Der Template-Manager: Templates Die Template-Vorschau Templatedetails Templates installieren Kapitel 8 Die Struktur macht es möglich Das Herzstück, die index.php CSS templatedetails.php Der Images-Ordner Der HTML-Ordner JavaScript-Ordner Language component.php error.php template_thumbnail.png / template_preview.png Favicon.ico Fonts Die index.html Kapitel 9 Die index.php: Das Herzstück Der Dokumentenkopf Safety first: die Sicherheit Welcher Dokumententyp? HTML-Sprachangabe jdoc: include type:head CSS und JavaScript einbinden MooTools einbinden Leserichtung von rechts nach links Jetzt geht es los: der Body Fehlermeldungen und Meldungen

6 Inhaltsverzeichnis 7 Kapitel 10 Die XML-Datei und die Template-Parameter templatedetails.xml: Allgemeines Template-Namen anpassen Dateien und Ordner einbinden Modulpositionen festlegen Die Sprachdateien Template-Parameter: config Eigene Formularfelder hinzufügen und darauf zugreifen Formelemente hinzufügen Kapitel 11 Die Sprachdateien Eigene Sprache hinzufügen Joomla!-Konventionen für die Verwendung von Language-Strings Language-Files in der index.php am Beispiel von Sprungmarken Kapitel 12 Module Dynamik innerhalb der Präsentation jdoc:include Das name-attribut Das Style-Attribut und die Standardstyles Beez-Styles Module flexibel ins Layout integrieren ID und CSS anpassen Das Module Class Suffix Das Menü-Modul Horizontale Navigation mit Subnavigation Ausgeklapptes Menü Einzelne Menüpunkte mit Hilfe von eigenen Klassen stylen Linkimage Individuelle Linktitel vergeben Fazit

7 8 Inhaltsverzeichnis Kapitel 13 Die Standardausgabe individuell gestalten Standardausgabe inspizieren Das Page Class-Suffix Template-Overrides Model-View-Controller Ausgabe ins Template verlagern Ausgabe anpassen Neu eine Ansicht mit unterschiedlicher Ausgabe Kapitel 14 Das Systemtemplate: Ausgabe anpassen und modifizieren Systemmeldungen Einbindung der Nachrichten in die index.php Sprachliche Anpassungen Fehlermeldungen Systemgrafiken austauschen component.php und wie man damit zaubern kann Component-Ansicht mit suchmaschinenfreundlichen URLs Die component.php als Basis für eigene Ansichten offline.php Kapitel 15 Was sonst noch wichtig ist Wenn die Leserichtung sich ändert: RTL RTL-CSS einbinden RTL testen PHP-Browserweiche PHP-Tricks Die Startseite anders aufbauen der Zugriff auf die Views Mit PHP das aktuelle Datum ausgeben Kapitel 16 Die Standardtemplates und ihre Features beez_20 und beez Barrierefreiheit allgemein beez_20: Gestaltung wählbar Position der Navigationsspalte JavaScript und WAI ARIA beez5: HTML5 nutzen Atomic

8 Inhaltsverzeichnis 9 TEIL Kapitel 17 Die praktische Umsetzung Konzept der Beez-Templates Kapitel 18 Schritt für Schritt zum neuen Layout Schritt 1: Navigation positionieren Problem Maßnahme Schritt 2: Mittlere Spalte mit Inhalt füllen Problem Maßnahme Schritt 2 optimieren: Modulpositionen sinnvoll umbenennen Schritt 3: Artikelanzahl anpassen Problem Maßnahme Schritt 4: Header visuell gestalten Problem Maßnahmen Ergebnis Schritt 5: Modulposition für Kopfbild einbinden Problem Maßnahme Schritt 6: Footer anpassen Problem Maßnahme Schritt 7: Mindesthöhe des Inhalts anpassen Problem Schritt 8: Die ersten Tests Schriftvergrößerung Tastaturbedienbarkeit Browsercheck Schritt 9: Typografie anpassen Problem Maßnahme Problem Maßnahme

9 10 Inhaltsverzeichnis Schritt 10: Modulüberschriften formatieren Problem Maßnahme Schritt 11: Startseitenartikel mit Hintergrundbild versehen Abschließende Tests CSS validieren HTML validieren Browsercheck Accessibility-Checks Kapitel 19 Eigene Features integrieren Das Kopfbild ein Hintergrundbild? Modulinhalt bearbeiten CSS anpassen Hintergrundbilder in Modul eigenes HTML Browsercheck HTML5 sinnvoll nutzen HTML5 Overrides einbinden index.php anpassen CSS anpassen Kapitel 20 Abschließende Arbeiten: Der Feinschliff und Erzeugung eines installierbaren Zip-Archivs Feinschliff Stylesheet für den Ausdruck erstellen error.php und offline.php anpassen RTL-Ansicht Unnötige Dateien entfernen Vorschaubilder erstellen Favicon ändern index.php optimieren XML-Datei anpassen Zip-Archiv erzeugen

10 Inhaltsverzeichnis 11 Anhang 301 Nützliche Links Joomla! Assistive Technologien CSS HTML Design Typografie Farben Icons JavaScript WAI ARIA Checkertools Hilfreiche Funktionen Verwendete CSS-Klassen und ihre Elemente Templates Komponenten Module Index 333

11 21 1 Die Basis: die inhaltliche und visuelle Konzeption Das Erstellen einer Website ist immer wieder eine neue Herausforderung. Wir müssen Inhalt, Gestaltung und Interaktion auf der Basis vorhandener technischer Möglichkeiten zu einem sinnvollen Ganzen verbinden. Gleichzeitig ist dabei das Corporate Design eines Unternehmens oder einer Institution zu beachten. Gute Websites sind stets zielgruppenorientiert und vernachlässigen nicht, dass ihr Inhalt für möglichst viele Menschen erreichbar sein soll. Sie unterstützen den User bei der Aufnahme der ihm angebotenen Informationen, legen ihn aber nicht auf eine einzige Weise der Nutzung fest. Erfolgreiche Unternehmen wollen sich in ihrem Auftreten von ihrer Konkurrenz abheben und ihr spezielles Image durch ihr visuelles Erscheinungsbild nach außen verdeutlichen gute Produkte oder Dienstleistungen allein reichen kaum mehr aus. Ein gutes Corporate Design spiegelt unter anderem die Firmenphilosophie und die gelebte Unternehmenskultur wider. Die Wirkung des Designs wird durch das Zusammenspiel seiner Basiselemente bestimmt. Sind die Farben stimmig? Ist das Logo aussagekräftig? Gibt es eindeutige Wiedererkennungsmerkmale? Usw. Design ist ein sehr leistungsfähiges Kommunikationsmittel. Es erzeugt Emotionen, übermittelt eine Botschaft und löst unterschiedlichste Reaktionen beim Betrachter aus. Ein Erscheinungsbild, das allzu weit von den gängigen Erwartungen abweicht, kann für viele Besucher eine Barriere bilden, sich überhaupt auf einen längeren Besuch einzulassen. Der erste Eindruck ist entscheidend. Besucht ein User eine Website, entscheidet er innerhalb von Sekunden, ob er bleibt. Jeder von uns kennt die Situation, wenn wir einem Menschen zum ersten Mal begegnen. Der erste Eindruck entscheidet, wie wir uns weiter verhalten. Dies hat immer mit den eigenen Erfahrungen und der ganz persönlichen Wahrnehmung zu tun. Menschen reagieren in ihrem persönlichen und sozialen Kontext. So kann es sein, dass Dinge, die hier bei uns in Europa positiv besetzt sind, im asiatischen oder amerikanischen Raum negative Reaktionen auslösen. 1.1 Mit der Struktur fängt es an Die Basis einer guten Seite und damit auch ihrer Gestaltung ist die inhaltliche Konzeption. Dieses Konzept sollte stehen, bevor man sich Gedanken um die visuelle Gestaltung macht. In der Praxis sieht das aber häufig anders aus. Der Kunde beauftragt einen Designer, eine schöne Hülle zu gestalten, die der Corporate Identity des Unternehmens entspricht. Wenn der Designer gut war, ist der Kunde glücklich und beauftragt jemanden, das Ganze in die Template-Struktur zu integrieren. Dort tauchen dann die ersten Probleme auf. Denn ein System kann noch so flexibel sein, es gibt immer bestimmte Konventionen, an die man sich halten muss.

12 22 Kapitel 1 Ein guter Texter zahlt sich aus! Mit Joomla! 1.6. ist so gut wie alles möglich, es ist immer nur eine Frage des Aufwands. Sollte das Design nun tatsächlich richtig umgesetzt worden sein, sollen im nächsten Schritt Inhalte eingepflegt werden. Aber hupps der oder die Designer/in hat keine Wörter mit 30 Zeichen in der Navigation vorgesehen? Oder die Überschriften sind zu lang und plötzlich zweizeilig? Es braucht nicht viel und schon ist das ganze Design hinüber. Eine gute inhaltliche Struktur trägt wesentlich zur Nutzbarkeit einer Website bei. Das schönste Design und die beste Technik helfen wenig, wenn Inhalte unzureichend strukturiert sind. Bevor Sie mit der Gestaltung beginnen, sollten Sie die inhaltliche Konzeption abgeschlossen haben, denn das Design dient dazu, das Erfassen der Inhalte zu erleichtern und die Informationsaufnahme durch den Betrachter zu unterstützen. Das heißt natürlich nicht, dass tatsächlich alle Inhalte bereits vorliegen müssen, denn wir arbeiten schließlich mit einem Content-Management-System, das ja erweiterbar ist. Wir sollten jedoch wissen, welche Bereiche es geben wird und wie die Inhalte dieser Bereiche dargestellt werden sollen Nutzererwartungen erkennen Webanwendungen müssen sich an der Motivation, dem Ziel und den gewohnten Verhaltensweisen des Users orientieren, denn der Mensch ist per se bequem und möchte sich so wenig wie möglich mit der Funktionsweise Ihrer Website auseinandersetzen. In der Regel ist er auf der Suche nach Information. Ziel sollte es sein, ihn möglichst schnell und unkompliziert zu dieser Information zu führen. Dabei ist zu beachten, dass er bei dieser Suche seinen Gewohnheiten und Erfahrungen folgt. Das Netz ist in den letzten Jahren zu einem selbstverständlichen Bestandteil des Lebens geworden. Websites mit technischen, visuellen und strukturellen Mängeln werden weniger leicht akzeptiert, denn die Flut an Informationen ist groß. Was man auf Ihrer Seite nicht direkt findet, findet man woanders. Einer der wichtigsten Aspekte innerhalb von Webdesign-Prozessen ist es, herauszufinden, welches Ziel potenzielle User verfolgen. Welche Motivation haben sie, von uns gestaltete Seiten zu besuchen und wie kann man sie visuell und technisch dabei unterstützen? Eine zentrale Rolle spielt dabei die Informationsarchitektur. Je nach Umfang des Inhalts kann eine gute inhaltliche Struktur eine große Herausforderung sein. Versuchen Sie, sich in den Benutzer hineinzuversetzen und die Inhalte aus seiner Sicht logisch anzuordnen. Dieser Prozess ist nicht immer leicht, denn es kann durchaus sein, dass sich Ihr Blick auf die Inhalte deutlich von dem des Benutzers unterscheidet. Vergessen Sie dabei nicht: Sie kennen Ihre Information und die internen Zusammenhänge Ihr Besucher nicht.

13 1 Die Basis: die inhaltliche und visuelle Konzeption Layout Die Seitengliederung Inhalte visuell strukturieren Die optische Gliederung der einzelnen Seitenbereiche ist ein zentrales Element, um Inhalte zu präsentieren. Aus den Zeiten des Tabellenlayouts hat sich der Begriff Spaltenlayout eingebürgert. Dies ist nichts anderes als ein strukturelles Raster, das uns ermöglicht, unsere Inhalte konsistent zu strukturieren. Ursprünglich kommt dieser Begriff jedoch aus dem Zeitungslayout. Screendesigner haben diese Art der Darstellung später ins Web übertragen. Tabellen waren die erste Wahl, solche Anmutungen darstellbar zu machen. Der ein oder andere wird sicherlich den Begriff Der Goldene Schnitt kennen. Schon immer haben Künstler und Architekten auf dieses in der Natur häufig vorkommende Größenverhältnis zwischen einzelnen Elementen zurückgegriffen. Beim Googlen findet man u. a. folgende Definition: Zwei Strecken stehen im Verhältnis des Goldenen Schnittes, wenn sich die größere zur kleineren verhält wie die Summe aus beiden zur größeren. 1 Das klingt sehr technisch und schwer verständlich. Einfacher übersetzt, könnte man das mit einem 1/3-2/3-Verhältnis beschreiben. Elemente, die in einem solchen Verhältnis auf dem Bildschirm angeordnet sind, wirken oft sehr harmonisch und ausgeglichen. Abbildung 1.1 Verhältnis beim Goldenen Schnitt Gestaltung am Raster die Grids Neben dieser Regel kann auch das Ausrichten am Designraster den Gestaltungsprozess deutlich vereinfachen. In jedem Grafikprogramm findet sich eine Rasteransicht. 1

14 24 Kapitel 1 Durch ihren Gebrauch können Sie sich die Positionierung einzelner Elemente auf dem Bildschirm wesentlich erleichtern. Im Prinzip sind Raster eine Kombination von vertikalen Spalten, horizontalen Bereichen und Leerraum. Solch ein Raster unterstützt den Designer dabei, Struktur und Muster innerhalb seines Designs zu finden. Das Ergebnis ist meist ein harmonisches, wohl proportioniertes Gesamtbild. Abbildung 1.2 Spalten Grid bei 960px-Breite Grids dienen als Hintergrundbilder im Grafikprogramm positioniert als Führungslinie für das gewählte Design. Spalten und Boxen lassen sich so einfacher positionieren. Zum Erstellen von geeigneten Grids gehört aber immer auch ein wenig Mathematik, da die Breite der einzelnen Spalten mit entsprechendem Leerraum kombiniert werden muss, um sich über ihre gewählte Gesamtbreite zu erstrecken. Aber diese Arbeit haben sich zum Glück schon andere gemacht. Auf der Seite von finden Sie eine Sammlung von Grid-Vorlagen für eine Gesamtbreite von 960 Pixeln für die unterschiedlichsten Grafikprogramme. Möchten Sie Grids für individuelle Seitenbreiten erstellen, hilft Ihnen der Grid Designer von Rasmus Schultz. Hier haben Sie die Möglichkeit, individuelle Angaben über die Gesamtbreite, die Anzahl der Spalten und die gewählten Abstände direkt in ein Formular einzugeben. Der Grid Designer erstellt Ihnen automatisch die gewünschte Vorlage.

15 1 Die Basis: die inhaltliche und visuelle Konzeption 25 Abbildung 1.3 Grid Designer von Rasmus Schultz Der Grid Designer ist zu finden unter: Das Gestalten anhand von Grids wird in Zukunft an Bedeutung gewinnen, was unter anderem an der Zukunft von CSS3 liegt. Seit dem Start von CSS sind mittlerweile viele Jahre vergangen, die Anforderungen an modernes Webdesign haben sich geändert und so hat sich auch die CSS-Working Group des W3C-Konsortiums Gedanken über ein flexibleres Positionierungsmodell gemacht. Das Ergebnis ist unter anderem das Grid Positioning Module von CSS3. Dieses Konzept basiert auf der Idee der Gitter und wird schon mit Spannung erwartet seine Entwicklung ist aber noch lange nicht abgeschlossen. Das Grid Positioning Module bietet zum Beispiel die beiden Eigenschaften grid-columns für Spalten und grid-rows für Reihen an. Testen lässt sich das Ganze aber aufgrund der fehlenden Browserunterstützung leider noch nicht. Weitere Informationen finden Sie in Transcending CSS von Andy Clarke und Molly Holzschlag (Addison-Wesley-Verlag 2007) oder unter: tut-art/layout_gridless.shtml Die Umsetzung Wenn Ihre Struktur steht, ordnen Sie die unterschiedlichen Basiselemente wie Informationen über den Betreiber, die Navigation und die Inhalte der Spalten visuell so auf der Fläche an, dass der Besucher sie als Ganzes erfassen kann und sich innerhalb der Seite gut zurechtfindet. Im Lauf der Jahre haben sich im Web einige deutlich erkennbare Konventionen zur optischen Gliederung entwickelt. Im Kopfbereich findet man in der Regel Informationen über den Anbieter, über Sinn und Zweck der Seite sowie zentrale Navigationselemente wie Kontakt und Impressum, außerdem mögliche Navigationshilfen wie etwa Links zu einer Sitemap oder einer Suchfunktion. An dieser exponierten Position befinden sich diese Informationen im Blickfeld des Betrachters und können bei möglichen Problemen direkt angewählt werden.

16 Index 333 Index A Abgerundete Ecken 164 Accessibility-Checks 280 Accessibility Extensions 105 für Mozilla/Firefox 106 Atomic 111, 228 Ausgabe anpassen 189 B Backend 112 Barrierefreie Tabs 224 Barrierefreiheit 41 Base 129 beez 236 Styles 165 beez_20 112, 213 beez5 112, 213, 226 beezdivison 165 beezhide 166, 168 beeztabs 165, 167 Bildschirmauflösung 44 Bildschirminvertierung 49 Bildschirmlupe 47 Bildschirmtastaturen 48 blueprint.css 228 body 133 Boxmodell 72 Braillezeile 50 Browser 207 Browsercheck 265, 277, 286 C chrome 165 Color Contrast Analyzer 104 com_content 189, 210 component.php 124, 199 Contentdesign 34 Controller 186 Corporate Design 21 countmodules() 169 CSS 59, 62, 132, 284 Attribut-Selektoren 71 Conditional Comments 77 CSS-Validator 101 Druck 295 einbinden 63 Elementselektoren 64 Hacks 77 id-selektoren 68 inline-styles 64 Internet Explorer has layout 79 Kindselektoren 69 Klassen 65 gruppieren 66 Kontextselektoren 69 layout.css 236 natur.css 236 personal.css 236 position.css 236 Positionierung und Boxmodell 74 Pseudoklassen- Selektoren 70 Selektoren 64 tunen 80 Universalselektoren 70 validieren 276 Vererbung 72 CSS3 Pie 165 CSS-Ordner 122 D Datum 210 Discover 120, 139 Doctype 128 Document Object Model 89 Dojo 90 Dokumentenkopf 127 Dokumententitel 131 Dokumententyp 128 DOM 89 Druckvorschau 47 E editor 154 error.php 124, 196, 296 Eyetracking 26 Expression 40 Extensionmanager 119, 139 F Farben 29 Farbenblindheit 32 Favicon 132, 297 Favicon.ico 125 Fehler 194 Code 198 Fehlermeldungen 134 Feste und fluide Layouts 39 filelist 154 filter-attribut 151 Firebug 195 folderlist 154 Fonts 125 Footer 262 Formularfelder hinzufügen 147 G Gehörlose 55 general.css 194 Generator 130 getmodule() 198 Grids 23 Gruppe H Header 247 headerlevel 166 Hintergrundbild 272, 281 immodul 282 HTML 59 Ordner 123 Sprachangabe 128 Validator 101 validieren 277 HTML5 61, 226, 287 <aside> 292 CSS anpassen 293 <footer> 292 <header> 291 <nav> 291 Overrides 227, 289 HTML Tidy 106

17 334 Index I Image-Button 252 Images-Ordner 123 index.html 125 index.php 122, 127, 297 Informationsarchitektur 22 Internet Explorer 6 286, 298 Internet Explorer iphone 202 J JavaScript 219 Frameworks 89 Ordner 123 jdoc head 129 include 134, 245 modules 159 jquery 90 K Kontextselektoren 182 Kontraste 32 L Language 123 Dateien 196 Strings 257 Layouts 23 dreispaltig 238 eigene 190 Navigation 33 zweispaltig 237 Layouts Lernbehinderungen 56 Leserichtung 26 Linearisierung 214 Logo 249 M Mediamanager 152 Menü 175 Grafiken einbinden 179 Horizontale Navigation 176 HTML und CSS 177 Level 176 Link CSS Style 179 Linktitle 180 Show Sub-menu Items 177 Suckerfish 177 menuitem 154 message 196 Meta-Angaben 130 Mindesthöhe 263 modchrome 166 Model 186 Model-View-Controller 186 Module 159 ausblenden 221 einbinden 168 name-attribut 160 Positionen 160, 161, 242, 244, 258 Style- Attribut 163 Tabelle 165 type 159 Überschriften 270 Module Class Suffix 170, 260 Modulmanager 160, 163 MooTools 90, 132, 222 auf Id zugreifen 91 auf Klasse zugreifen 91 Class() 95 DOMReady-Event 92 implement() 97 inject() 93 new Element() 93 Request.JSON 94 tween() 91 Motorische Behinderungen 54 Music-Store 235 N Nachrichten 194 Navigation 242, 248 Nutzererwartungen 22 O offline.php 203, 296 P Page Class-Suffix 182 Page Heading 189 Parameter 140 Photoshop 235 PHP 81 Bedingungen 84 Browserweiche 207 echo 83 einbinden 81 else 85 get() 87 Kommentare 82 Objekte 85 Variablen 83 Vergleichsoperatoren 85 Push to front 27 R Radiobuttons 152 Rahmendokument 216 Raster 23 Readonly-Feld 151 Robots 130 Röhrenmonitore 31 RSS-FEEDs 131 RTL 133, 205, 296 CSS 206 testen 207 S Schablone 127 Schriftgestaltung 35 Schriftgrad 45 Schriftgröße 39 Schriftvergrößerung 264 Screenreader 50 Scrollbars 262 Sehbehinderung 41, 43 Seitengliederung 23 Selectboxen 151

18 Index 335 Semantik 253, 214 Sicherheit 127 Spacer 153 Spalte ausblenden 221 Spaltenlayout 23 Sprachdateien 155, 162, 246 Sprache hinzufügen 156 Sprungmarken 157 Stylesheets 141, 214, 217 eigene 45 Suchmaschinenfreundlichen URLs 201 Systemgrafiken 198 Systemmeldungen 193 Systemtemplate 193 T Tastaturbedienbarkeit 265 Tastaturnavigierbarkeit 254 Templates installieren 140 Namen 139 Overrides 185 Parameter 137 Struktur 121 Styles 112 Vorschau 115 Template color 114 Templatedetails 118 templatedetails.xml 137, 161 Templatemanager 140 template_preview.png 124 templates_details 123 template_thumbnail.png 124 Testmöglichkeiten Wave 107 Textfelder hinzufügen 149 TFT-Displays 31 timezone 154 tmpl 199 Tools Firebug 103 Webdeveloper 102 Tooltipp 150 Typografie 268 U Überschriften 34 unseen 256 URL 200 UTF V validate- 150 validate-numeric 150 validate-password 151 validate-username 150 View 186 views 209 Vorschaubilder 296 W WAI ARIA 213, 219 Landmark-Roles 220 Warnungen 194 Wave 107 WCAG 2 42 Checker 107 Web Web Accessibility Initiative 42 Webfonts 36 Webstandards 101 wrapper 203 X XML 161 XML-Datei 137, 207, 246, 299 Dateien und Ordner einfügen 143 fields 145 Fieldset 146 Modulpositionen 143 Sprachdateien 144 Template-Parameter 144 Y YUI 90 Z Zeichensatz 129 Zeilenabstand 35 Zip-Archiv 300