CMSimple und Webstandards 1 - Validierungslinks im Template

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
Post Reply
Gert
Posts: 3078
Joined: Fri May 30, 2008 4:53 pm
Location: Berlin
Contact:

CMSimple und Webstandards 1 - Validierungslinks im Template

Post by Gert » Tue Sep 02, 2008 10:35 am

Bereits erschienen:
CMSimple und Webstandards - Prolog
CMSimple und Webstandards 1 - Validierungslinks im Template
CMSimple und Webstandards 2 - CMSimple selbst
CMSimple und Webstandards 3 - html und Xhtml
CMSimple und Webstandards 4 - Editoren
CMSimple und Webstandards 5 - Templates
CMSimple und Webstandards 6 - Pluginloader
CMSimple und Webstandards 7 - Plugins

Links zum Thema:
Webstandards bei Wikipedia | (X)html-Validator des W3C | CSS-Validator des W3C | Meine Seiten zum Thema
________________________________________________

Auf Grund der derzeitigen Zustände habe ich mir Gedanken gemacht, wo man ansetzen könnte, um die Sinne der CMSimple-Gemeinde für das Thema Webstandards zu schärfen. Von oben, d. h. Kontakt aufnehmen mit den Machern, Plugin-Entwicklern und Template-Designern? Oder lieber von unten, bei den Anwendern? Ich habe mich für letzteres entschieden, deshalb die Beiträge hier im Forum, und deshalb wendet sich dieser Beitrag eher an den unerfahrenen Anwender, der sich mit dem Thema "Webstandards" noch nicht weiter beschäftigt hat.

Der erste Schritt zu einer standardkonformen WebSite ist die Analyse des Ist-Zustandes. Dazu stellt das W3C Werkzeuge, sogenannte Validatoren, zur Verfügung:

http://validator.w3.org/ - (X)html-Validator des W3C, analysiert den doctype des Dokumentes und prüft es nach dem entsprechenden Standard.
http://jigsaw.w3.org/css-validator/ - CSS-Validator des W3C, prüft (X)html- und CSS-Dateien auf standardkonformes CSS. Bei (X)html-Dokumenten werden alle im head-Bereich eingebundenen css-Dateien, direkt in den head-Bereich geschriebenes CSS und inline-CSS (Direktformatierung von tags) geprüft und validiert.

Auf diesen Validatoren kann man den URL des zu prüfenden Dokuments eingeben. Es gibt aber eine elegantere Möglichkeit, seine Dokumente jederzeit und nach jedem Arbeitsschritt zu validieren:

Validierungslinks im Template

Es besteht die Möglichkeit, sichtbar oder versteckt Validierungslinks in das Template einzubauen, die das aktuelle Dokument automatisch mit den Validatoren des W3C prüfen:

http://validator.w3.org/check/referer - prüft das aktuelle Dokument auf valides (X)html
http://jigsaw.w3.org/css-validator/check/referer - püft das aktuelle Dokument auf valides CSS

Wenn Ihr diese Links benutzt werdet Ihr feststellen, dass dieses Forum nach XHTML 1.0 strict und CSS level 2.1 validiert. Eine reife Leistung, das CMSimple-Forum ist schon da, wo CMSimple selbst noch hin soll.

Für die Template-Designer wird es kein Problem sein, diese Links an einer beliebigen Stelle sichtbar oder versteckt einzubauen. Für den unerfahrenen Anwender könnte das jedoch schon ein Problem sein, deshalb hier eine:

Anleitung zum Einbau der Validierungslinks unterhalb der Seite

Im Verzeichnis "Dein_CMSimple_Root / templates / dein_template /" findet Ihr die Dateien "template.htm" und "stylesheet.css".

Öffnet nun die template.htm mit einem html- oder Texteditor (Hinweis: Ein Textverarbeitungsprogramm ist KEIN Texteditor!) und fügt ganz unten, DIREKT VOR:

</body>
</html>

folgenden Code ein:

Code: Select all

<!-- Validierungslinks -->
<div style="clear: both; font-size: 12px; text-align: center; padding: 10px 0; class="validlink">
<a href="http://validator.w3.org/check/referer">(X)html</a>&nbsp;&nbsp;
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>
</div>
<!-- Ende Validierungslinks -->
Diese beiden Links überprüfen die aktuelle Seite auf valides (X)html bzw. CSS, das funktioniert aber meines Wissens nur online und nicht in einer lokalen php-Umgebung.

Wenn die Textlinks auf Grund der Hintergrundfarbe des Templates nicht sichtbar sind (das ist z. B. beim default-Template von CMSimple der Fall), müsst Ihr noch folgenden Code an das Ende der stylesheet.css im Verzeichnis Eures Templates einfügen:

Code: Select all

div.validlink a:link {border: 1px solid #000; background: #fff; color: #000; font-weight: 100; padding: 2px 4px; margin: 0 2px;}
div.validlink a:visited {border: 1px solid #000; background: #fff; color: #000; font-weight: 100; padding: 2px 4px; margin: 0 2px;}
Wenn Ihr noch am Anfang steht und das Validierungs-Ergebnis nicht vorzeigbar ist, könnt Ihr folgenden Code verwenden:

Code: Select all

<!-- Validierungslinks -->
<div style="clear: both; font-size: 36px; text-align: center; padding: 10px 0;>
<a href="http://validator.w3.org/check/referer">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>&nbsp;&nbsp;
<a href="http://jigsaw.w3.org/css-validator/check/referer">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
</div>
<!-- Ende Validierungslinks -->
Die Links sind dann unsichtbar, zentriert unterhalb der Seite, nur Ihr wisst, wo die sind, und könnt sie mit der Maus suchen. Die vielen "&nbsp;" und die grosse Schrift sorgen für eine ordentliche Klickfläche. Später, wenn die Seiten bei der Validierung den ersehnten grünen Balken zeigen, könnt Ihr die Linktexte wieder einsetzen oder sogar die Buttons nutzen, die das W3C bei erfolgreicher Validierung anbietet.

Jetzt könnt Ihr jederzeit prüfen, ob Eure Seiten den anerkannten Webstandards entsprechen. Wenn dann im CMSimple-Forum öfter mal Fragen auftauchen wie "Hilfe, meine Seiten validieren nicht ...", wird sich die CMSimple-Gemeinde auch mit diesem Thema auseinandersetzen. Wenn dann Plugins und Templates als Ursache für fehlerhafte Seiten erkannt und auch benannt werden, dann werden sich die Plugin-Entwickler und Template-Designer von alleine darum kümmern.

Noch ein Hinweis: Ein Fehler kann mehrere Fehlermeldungen und Warnungen bei der Validierung verursachen, da er die gesamte Validierungsroutine des Validators durcheinanderbringt. Also die Fehlermeldungen immer schön von oben nach unten abarbeiten, viel Erfolg ;)

Post Reply