Best Practices

Wie werden Design-Änderungen am Modi-Art-WAI Template vorgenommen?

Im Modi-Art-WAI-Template werden Farben, Positionen, Größen und Ausrichtungen von Elementen sowie Hintergrundbilder mit  Cascading Style Sheets (CSS) gesteuert. Sie können das vorhandene Design individuell anpassen und gezielte Änderungen vornehmen, indem Sie vorhandene  CSS-Regeln durch eigene Regeln ersetzen.

Für eigene CSS-Anpassungen steht die Datei <Templateordner>/css/custom.css zur Verfügung. Hier können neue CSS-Regeln angelegt werden. Die Datei ist im ursprünglichen Zustand absichtlich leer gelassen. Die custom.css wird in der Datei screen.css als letztes Stylesheet geladen und hat darum in der  kaskadierenden Abarbeitungs-Reihenfolge eine höhere Priorität als andere Template-CSS-Dateien. Das bedeutet: Sie können jede vorhandene CSS-Regel (egal ob in content.css, style.css etc) manipulieren, indem Sie eine neue CSS-Regel mit dem entsprechendem  Selektor in der custom.css anlegen. Beispiele für häufige CSS-Anpassungen sind unter Codeschnipsel aufgelistet.

Tools für Webentwickler: FireBug

 FireBug ist ein Plug-In für den Firefox-Browser. Es ermöglicht Web-Entwicklern, CSS- und HTML-Änderungen live im Browser zu testen, ohne dass die Original-Dateien auf dem Server verändert werden müssen.

Das Plug-In eignet sich außerdem hervorragend, um Klassennamen oder die ID eines bestimmten Elements auf einer Website herauszufinden (Button "Untersuchen" in der Werkzeugleiste des Plug-Ins).

Tutorials zu FireBug:

•  mit Firebug Webseiten analysieren und ändern - HTML & CSS effektiv lernen
•  Introduction To Firebug
•  Youtube: Introduction to CSS editing using Firebug
•  Youtube: Firebug Is a Web Developer's Best Friend

Ergänzungen zu Firebug

•  Firescope (Referenz für CSS und HTML-Elemente)
•  Übersicht mit nützlichen Addons zu FireBug
•  YSlow (Tool zum Messen der Ladegeschwindigkeit von Websites)

Nützliche FireBug Tastenkürzel

• FireBug öffnen/schließen: F12
• Element untersuchen: Ctrl + Shift + C
•  Alle Tastenkürzel auf der Projektseite

Website Validieren und Qualität messen

•  http://validator.w3.org (Manuelle Validierung des (x)HTML Codes von Internetseiten)
•  HTML Validator Plug-In für Mozilla Firefox (adds HTML validation inside Firefox)
•  http://www.qualidator.com (Qualität von Internetseiten messen und mögliche Schwachstellen analysieren)

Diff-Tools

Diff-Tools heben inhaltliche Unterschiede zwischen 2 Dateien farblich hervor. So lassen sich Änderungen zwischen 2 verschiedenen Dateiversionen besser nachvollziehen.

Kostenlose Diff-Tools:

•  Winmerge (Diff-Tool für die Windows-Plattform)
•  Meld (Diff and Merge-Tool für GNU/Linux)
•  Qualidator Text Diff/Vergleich Online Tool zum Vergleichen von Text-Inhalten