CSS-Validator unter Windows

ACHTUNG: Diese Anleitung ist noch in Arbeit und wird in nächster Zeit vervollständigt.

Inhalt

Motivation

Wer den Artikel über die Installation des W3-Validators unter Windows gelesen hat wird wissen, dass ich bei mir zu Hause keinen Internetzugang habe. Jedoch lege ich beim Erstellen von Webseiten wert auf validen Quelltext, so auch auf korrekt formulierte CSS.

Um letzteres zu überprüfen gibt es bekanntlich auf http://jigsaw.w3.org/css-validator den CSS-Validator vom W3C. Laut der mageren Dokumentation kann man ihn auch herunterladen und lokal ausfühen. Dies sei einerseits über das aus dem Netz bekannte Java-Servlet aber auch über einen normlen Java-Interpreter.

Um eben die Korrektheit der Style-Sheets zu überprüfen ohne dies immer aufwendig in der Uni tun zu müssen versuchte ich auch hier, den CSS-Validator auf meinem lokalen Server zum Laufen zu bringen.

Nach viel Suchen und vielen Versuchen ist es mir dann endlich gelungen. Die Schritte, die ich durchführte, habe ich nun niedergeschrieben. Vielleicht helfen sie ja jemandem, der sich auch einen "eigenen" CSS-Validator einrichten möchte.

Benötigte Software

Bevor es mit dem Einrichten losgehen kann wird einiges an Software benötigt. Im Einzelnen ist das:

Als erstes sicher die Quelldateien des CSS-Validators. Sie sind nur im CVS-Repository des W3Cs (http://dev.w3.org/2002/css-validator/, Informationen über den Zugang auf http://dev.w3.org) erhältlich. Im Repository befinden sich die HTML-Dateien sowie die java-Quelltext-Dateien für den Validator.

Zum Komplilieren wird ANT benötigt. Es ist auf http://ant.apache.org/bindownload.cgi downloadbar. Ich verwende bei mir Version 1.6.2.

Die komplilierten Java-Klassen müssen natürlich auf dem Server interpretiert werden. Dies ist bespielsweise mit dem HTTP-Server des W3Cs, jigsaw (http://www.w3.org/jigsaw/) oder auch mit Tomcat (http://jakarta.apache.org/tomcat/) vom Apache Project möglich. Ich habe mich für letzteren in der Version 5.5 entschieden, dieser lässt sich auch mit dem bei mir bereits laufenden Apachen verbinden.

Um jene gerade angesprochene Verbindung zwischen de Apachen und Tomcat herzustellen gibt es ein Apache-Modul: mod_jk oder mod_jk2 für den Apache 2. Dieses Modul ist nicht zwangsweise notwendig, man kann den Validator auch direkt über den Tomcat-Server ansprechen.

Als letztes wird noch eine JRE benötigt, die zu der Tomcat-Version passt. Für Tomcat 5.5 ist dieses J2SE 5, (bisher nur als Alpha-Version) erhältlich auf http://java.sun.com/j2se/1.5.0/download.html.

Weiter werden veschiedene Java-Klassen benötigt; verwendet man die oben genannten Versionen, so sind bereits alle beisammen. Andernfalls wird evtl. eine XML-Parser-Klasse (xercesImpl.jarbenötigt (http://xml.apache.org/xerces-j/) sowie die javax.servlet.*-Klassen (letztere sind normal beim Tomcat dabei; das Archiv heißt servlet-api.jar. Ebenso werden verschiedene sun.* und com.sun.*-Klassen benötigt, sie sind in einer tools.jar bei der J2SE 5 dabei.

Verzeichnisse

Bevor es an das Installieren geht sage ich auch hier wieder ein paar Worte zu der Verzeichnisstruktur. Auf diese werde ich mich im Folgenden auch immer beziehen.

In C:\www liegen bei mir alle Programme, die für den Server notwendig sind. Beispielsweise befindet sich der Apache im Verzeichnis C:\www\Apache2, der HTML-Validator in C:\www\validator. Für ANT habe ich folglich das Verzeichnis C:\www\ant gewählt.

Anschließend habe ich J2SE installiert, dies habe ich in das vorgegebene Verzeichnis c:\Programme\Java\jre1.50 gemacht. Tomcat habe ich dann in das Verzeichnis C:\www\tomcat installiert. Während der Installation wird man nach einem Administrationsbenutzernamen und -passwort gefragt, dieses ist frei wählbar und wird später in der Konfiguration noch einmal benötigt. Die Dateien des Validators aus dem CVS-Repository habe ich nach C:\www\css-validator kopiert.

Sind die Klassen xercesImpl.jar und servlet-api.jar nicht vorhanden, so müssen sie in das Verzeichnis C:\www\tomcat\common\lib kopiert werden.

Anpassen der Quelldateien

Die Quelldateien sind leider nicht einfach so zu übernehmen. Zwar gibt der Validator auch ohne Editierung dieser seine Meldungen aus, jedoch ziemlich unformatiert. Das liegt daran, dass die zugehörigen Templates die Style-Sheets direkt vom W3C beziehen sollen (es sind absolute URLs angegeben) anstatt auf die mitgelieferten zurückzugreifen. Wen dies nicht stört oder wer nicht die Orginal-Formatierung haben möchte, der kann diesen Schritt auch überspringen.

Die Anpassung stelle ich hier nur für die deutsche Sprachversion vor, werden noch andere Sprachen benötigt, so müssen die folgenden Änderungen auch in den zugehörigen Templates vorgenommen werden. Die jeweiligen Templates haben alle eine Sprachkennung, beispielsweise haben die deutschen alle die Form name.de oder die englischen name.en.

Angepasst werden als erstes die beiden Dateien C:\www\css-validator\org\w3c\css\css\html.properties.de und xhtml.properties.de im gleichen Verzeichnis. Jeweils müssen folgende Änderungen vorgenommen werden:

Sofern auch die Links zum Re-Validieren und der Vorgabecode für das Valid-CSS-Logo auf den eigenen Validator zugeschnitten werden sollen, so müssen auch hier die oben genannten Änderungen vorgenommen werden.

Die folgende Änderung bezieht sich auf den Link zum HTML-Validator. Somit kommt sie nur in Betracht wenn man hier ebenfalls den lokalen angeben möchte. Der Link ist in der Datei mit den Hinweisen und Fehlermeldungen des Validators zu finden; es ist die Datei C:\www\css-validator\org\w3c\css\util\Messages.properties.de. Hier wird einfach http://validator.w3.org durch http://validator.david.tibbe ersetzt (2x), gleiches gilt für die Datei C:\www\css-validator\validator.html.de.

Auch nach diesen Korrekturen ist das Layout noch nicht perfekt. Es läßt sich natürlich in den entsprechenden CSS-Dateien anpassen. Ich habe diese Änderungen nicht getätigt da nach den obenstehenden das Validierungsergebnis bereits gut lesbar ausgegeben wird.

Kompilieren der Sourcen

Nachdem die Sourcen nun vorbereitet sind, können sie auch mit ANT kompiliert werden. ANT verwendet ein XML-Dokument mit den verschiedenen Befehlen. Man kann das mitgelieferte build.xml verwenden, ich habe aber ein eigenes erstellt und verwendet.

Bevor ANT ausgeführt werden kann muss noch sichergestellt sein, dass bestimmte Archive im CLASSPATH liegen (CLASSPATH ist eine Umgebungsvariable für Java). Dieses sind tools.jar, servlet-api.jar und xercesImpl.jar.

Hinzugefügt werden sie mit dem Befehl set in der DOS-Konsole. Bei mir waren die Dateien in den folgenden Verzeichnisen: C:\programme\java\jdk1.5.0\lib\tools.jar, C:\www\tomcat\common\lib\servlet-api.jar und C:\www\ant\lib\xercesImpl.jar (sollten die jar-Dateien in anderen Verzeichnissen liegen, so müssen gleich nur die Pfade entsprechend angepasst werden). Die Befehlsfolge dafür sieht dazu wie folgt aus:

set classpath=%classpath%;c:\programme\java\jdk1.5.0\lib\tools.jar
set classpath=%classpath%;c:\www\tomcat\common\lib\servlet-api.jar
set classpath=%classpath%;c:\www\tomcat\common\lib\xercesImpl.jar

echo %classpath%

Die letzte Zeile dient nur dazu, die Variable anzuzeigen. Dort sollte nun in etwa

[...];c:\programme\java\jdk1.5.0\lib\tools.jar;c:\www\tomcat\common\lib\servlet-api.jar;c:\www\tomcat\common\lib\xercesImpl.jar

stehen, wobei [...] noch andere Pfade beinhalten kann.

Nun ist also ANT an der Reihe. In einer DOS-Konsole wird in das Verzeichnis C:\www\css-validator gewechselt und dort c:\www\ant\bin\ant build eingegeben. Anschließend werden die Sourcen kompiliert.

Die Dateien sind nun zwar kompiliert, jedoch müssen noch ein paar Kleinigkeiten erledigt werden, damit der Ordner so in das Serververzeichnis übernommen werden kann. Als erstes wird ein Ordner WEB-INF erstellt. In ihm erwartet Tomcat alle Daten, die für die Ausführung des Servlets notwendig sind. In dem neuen Ordner wid nun ein neuer Unterordner classes erstellt. Aus dem Hauptordner wird nun die Datei web.xml in den Ordner WEB-INF und die Ordner html und org in den Ordner classes verschoben.

Wer keine Lust auf die Tipparbeit hat kann auch die folgenden Zeilen kopieren und als Batch-Datei speichern, zum Beispiel als builder.bat (das Verzeichnis ist dabei egal). Anschließend kann diese Datei einfach ausgeführt werden.

@echo off
REM #######################################################
REM       Dieses Batch-Script kompiliert die Sourcen
REM        des CSS-Validators in die class-Dateien.
REM         Die Pfadangaben beziehen sich auf die
REM       Installationsanleitung von mir, zu finden
REM unter: http://www.myhpi.de/~dtibbe/online/css-validator
REM
REM  erstellt von David Tibbe, http://www.tibbe-online.de/
REM                    V1.3, 2004/09/26
REM ################################################
REM
echo wechsle in das Validator-Verzeichnis...
cd c:\www\css-validator
echo  ok.
echo erstelle buildfile.xml...
echo ^<project default="build" name="CSS-Validator"^>   > buildfile.xml
echo   ^<target name="build"^>                          >> buildfile.xml
echo     ^<mkdir dir="../css-validator-release" /^>     >> buildfile.xml
echo     ^<javac destdir="../css-validator-release" srcdir="./org/w3c:html" debug="yes" /^> >> buildfile.xml
echo     ^<copy todir="../css-validator-release"^>    >> buildfile.xml
echo       ^<fileset dir="./"^>                         >> buildfile.xml
echo         ^<exclude name="**/*.java" /^>             >> buildfile.xml
echo         ^<exclude name="build.bat" /^>             >> buildfile.xml
echo         ^<exclude name="buildfile.xml" /^>         >> buildfile.xml
echo       ^</fileset^>                                 >> buildfile.xml
echo     ^</copy^>                                      >> buildfile.xml
echo   ^</target^>                                      >> buildfile.xml
echo ^</project^>                                       >> buildfile.xml
echo   ok.
echo setze classpath...
set old_cp=%classpath%
set classpath=%classpath%;C:\Programme\Java\jdk1.5.0\lib\tools.jar
set classpath=%classpath%;c:\www\tomcat\common\lib\servlet-api.jar
set classpath=%classpath%;c:\www\tomcat\common\lib\xercesImpl.jar
echo ok.
echo Kompiliere die Sourcen mit ANT...
call c:\www\ant\bin\ant -noinput -f buildfile.xml
echo ok.
echo Stelle classpath wieder her...
set classpath=%old_cp%
set old_cp=
echo ok.
echo passe Verzeichnisstruktur der kompilierten Dateien an...
cd ..\css-validator-release
rename WEB-INF web.xml
mkdir WEB-INF\classes
move web.xml WEB-INF
move html WEB-INF\classes
move org WEB-INF\classes
echo ok.
echo Alles erledigt.

Einrichten von Tomcat

Tomcat ist standardmäßig über Port 8080 zu erreichen. Gibt man also im Browsers http://localhost:8080/ ein, so glangt man auf die Info-Seite, dass Tomcat erfolgreich installiert wurde. Ebenfalls enthält diese Seite Links zum Konfigurationsmenü und der Dokumentation des Servers.

Tomcat besitzt ähnich wie der Apache ein Verzeichnis, welches das "DocumentRoot" darstellt. Darin befinden sich alle Dateien, die über den Server abrufbar sein sollen. Es handelt sich dabei um das Verzeichnis C:\www\tomcat\webapps. In ihm befinden sich bereits einige Ordner wie zum Beispiel tomcat-docs oder ROOT. Letzteres ist das Verzechnis, in dem die gerade aufgerufene Infoseite hinterlegt ist. Ähnlich wie beim Apache kann man über http://localhost:8080/tomcat-docs/ auf die Inhalte des Unterordners tomcat-docs zugreifen.

Für den CSS-Validator wird nun ein neues Verzeichnis in dem webapps-Ordner erstellt; sein vollständiger Pfad lautet: C:\www\tomcat\webapps\css-validator. Dort hinein werden später die Validator-Dateien kopiert, zuvor wird jedoch Tomcat gesagt, dass er beim Aufruf der URL http://localhost:8080/css-validator/ auf das gerade angelegte Verzeichnis zugreifen soll. Dazu wird das Konfigurationsmenü aufgerufen, es ist unter http://localhost:8080/admin zu erreichen. Als erstes wird man nun nach Benutzernamen und Passwort gefragt; es sind die Daten, die man bei der Installation angegeben hat. Nach dem erfolgreichen Login ist man nun im "Administration Tool". Im linken Frame ist ein Baummenü zu finden über welches sich viele Einstellungen des Servers regel lassen. Für die weitere Konfiguration ist nur der Ast Tomcat Server interessant. Durch das Klicken auf die Symbole vor den jeweiligen Beschriftungen klickt man sich nun zum Punkt Tomcat Server => Service => Host (localhost) durch, welcher durch einen Klick auf seinen Namen ausgewählt wird. Im rechten Einstellungs-Frame befindet sich ganz oben ein Rollfeld mit der Aufschrift "----Available Actions----". Darin wählt man den Punkt "Create New Context" aus. In der erscheinenden Eingabemaske wird als Document Base nun css-validator, als Path /css-validator eingeben und Use Naming auf True gestellt. Anschließend wird der Buttom "Save" betätigt um die Daten zu sichern. Als letztes wird noch "Commit Changes" im oberen Frame geklickt damit die Konfiguraion des Servers aktualisiert wird.

Nun können die Validator-Dateien in das css-validator-Verzeichnis kopiert oder Verschoben werden. Nach diesem Vorgang müsste es eine Datei mit dem vollständigen Pfad C:\www\tomcat\webapps\css-validator\validator.html.de geben.

Ist dieser Schritt geschafft, so lassen ist der CSS-Validator quasi einsatzbereit, jedoch noch sehr unkomfortabel. Ruft man http://localhost:8080/css-validator/ auf, so bekommt man nur eine Verzeichnisliste da keine Standard-Indexdatei gefunden wurde. Man kann nun aber die Datei validator.html.de auswählen und erhält die Indexseite, wie man sie (sofern man deutsch als vorgezogene Sprache im Browser eingestellt hat) von http://jigsaw.w3.org/css-validator kennt.

Im folgenden Schritt wird nun der Apache konfiguriert, sodass der Zugriff auf die Validator-Dateien direkt über den Apache laufen kann. Damit dann Tomcat korrekt arbeiten kann muss auch bei ihm der "Virtuelle Host" angelegt werden. Dies geschieht durch das Editieren der Datei C:\www\tomcat\conf\server.xml. Darin wird innerhalb des <Engie>-Elements folgender Abschnitt eingefügt:

  <Host name="127.0.0.3" debug="0" appBase="webapps/css-validator"
        unpackWARs="true" autoDeploy="true"
        xmlValidation="false" xmlNamespaceAware="false">
    <Alias>css.david.tibbe</Alias>
    <Context path="" docBase="" debug="1"/>
    <Valve className="org.apache.catalina.valves.AccessLogValve"
           directory="logs"  prefix="css_access." suffix=".log"
           pattern="common" resolveHosts="false"/>
  </Host>

Die Einstellungen im Einzelnen bedeuten in etwa: Es existiert ein Host mit dem Namen 127.0.0.3 dessen Dokumenten-Verzeichnis webapps/css-validator ist. Er hört ebenfalls auf den Namen css.david.tibbe. Seine Log-Ausgaben werden in die Datei csss_access.log geschrieben.

Einrichten des Apache

Nachdem Tomcat konfiguriert wurde kann das Validieren eigentlich beginnen. Jedoch fand ich die Handhabung noch nicht sehr komfortabel. Zum einen war es das Auswählen der Sprachversion des Validators und zum anderen die URI. Schöner fände ich es, wenn ich einfach nur http://css.david.tibbe aufrufen müsste. Das Modul mod_jk2 für den Apache hilft dabei, diese beiden Wünsche zu erfüllen.

Das heruntergeladene Archiv extrahiert man sich, sofern man nicht direkt die Dateien aus dem Verzeichnis extrahieren möchte, in ein temporäres Verzeichnis. Aus dem Verzeichnis modules wird die Datei mod_jk2.so in das Modul-Verzeichnis des Apache kopiert. Auf meinem System wäre dies also das Verzeichnis C:\www\Apache2\modules. Aus dem Verzeichnis conf wird die Datei workers2.properties in das Konfigurationsverzeichnis des Apache kopiert, bei mir folglich nach C:\www\Apache2\conf.

Im folgenden Schritt wird nun die Konfigurationsdatei des Apache, die httpd.conf, editiert. In der "Section 1: Global Environment" wird das mod_jk2-Modul eingebunden. Dazu wird die Zeile

LoadModule jk2_module modules/mod_jk2.so

ergänzt. Ans Ende von "Section 2: 'Main' server configuration" werden die Zeilen

<IfModule mod_jk2.c>
  JkSet config.file conf/workers2.properties
</IfModule>

eingefügt. die erste Ergänzung sorgt dafür, dass das Modul in den Server geladen und die zweite dafür, dass die Konfiguration gesetzt wird, sofern das Modul geladen ist.

Die letzte Ergänzung sorgt dafür, dass ein VirtualHost mit dem Namen css.david.tibbe angelegt wird. Folgende Zeilen müssen dafür ganz an das Ende der Konfigurationsdatei in "Section 3: Virtual Hosts" eingefügt werden:

NameVirtualHost 127.0.0.3:80
<VirtualHost 127.0.0.3:80>
  ServerName css.david.tibbe

  DocumentRoot "C:/www/tomcat/webapps/css-validator"
  ErrorLog logs/error_css.log
  CustomLog logs/access_css.log common

  <Directory "C:/www/tomcat/webapps/css-validator">
    AddLanguage de .de
    AddLanguage en .en
    AddLanguage nl .nl
    AddLanguage fr .fr
    AddLanguage ja .ja
    LanguagePriority de en nl fr ja

    Options +MultiViews

    DirectoryIndex validator.html.var validator.html
  </Directory>

  <Location "/validator">
    JkUriSet worker ajp13:localhost:8009
  </Location>
</VirtualHost>

(Die Loopback-IP 127.0.0.3 ist die Adresse des virtuellen Hosts. Sollte bereits ein anderer auf diese Adresse angelegt werden, so kann sie einfach auf 127.0.0.4 usw. geändert werden.)

Hier eine kurze Erklärung dessen, was gerade eingestellt wurde: Als erstes wurde gesagt, dass der virtuelle Host mit der IP 127.0.0.3 auf den Namen css.david.tibbe hören soll und dass sein DocumentRoot, also sein Datenverzeichnis, das Verzeichnis C:/www/tomcat/webapps/css-validator ist. Anschließend wurden die Log-Dateien für Fehler und Zugriffe auf den Server definiert.

Der folgende Block konfiguriert das Verzeichnis css-validator. Es werden verschiedene Sprachen definert, da das CSS-Validator-Paket diese Sprachen beherrscht. Durch die "LanguagePrioriry" wird festgelegt, in welcher Reihnfolge nach den Dateien gesucht werden soll, sofern kein expliziter "Sprachwunsch" vom Browser angegeben wurde oder dieser nicht erfüllt werden kann. Diese Mehrsprachigkeit wird dann durch die Option "+MultiViews" aktiviert. Wie genau dies alles funktioniert kann man dem Apache-Manual entnehmen (http://httpd.apache.org/docs/content-negotiation.html).

Die letzte Zeile dieses Abschnitts dient noch dazu, de Apache zu sagen, welche Datei er anzeigen soll, wenn nur ein Verzeichnis aufgerufen wird (also wie im Normalfall "index.html").

Der Location-Abschnitt hat eine besondere Bedeutung. Er wird nur "beachtet", wenn man die (virtuelle) Resource /validator oder in vollständiger Form http://css.david.tibbe/validator anfordert. Das ist genau immer dann der Fall, wenn das Validierungs-Formular abgeschickt wird so das Validator-Servlet ausgeführt werden soll. Geschieht dies also, so greift diese Anweisung. Die darin definierte JkUriSet-Anweisung dient nun dazu, die Ausführung dieser Anfrage nicht selbst zu übernemen sondern über mod_jk2 an Tomcat abzutreten.

Wie es in der Anleitung zum HTML-Validator beschrieben ist muss nun auch wieder die hosts-Datei angepasst werden. Die Zeile

127.0.0.3     css.david.tibbe

wird an das Ende ergänzt (ggf. die 127.0.0.3 durch die IP des virtuellen Hosts ersetzen).

Im letzten Schritt muss nun noch die Datei workers2.properties editiert werden. Hier muss nur die Zeile

[uri:127.0.0.3/*]

eingefügt werden. Sie bewirkt, dass jede Anfrage, die an über das Modul gestellt wird und mit 127.0.0.3/ beginnt, an Tomcat weitergereicht wird.

Nun wird der Apache neu gestartet. Im Anschluss daran kann man unter der URL http://css.david.tibbe seinen eigenen, lokalen CSS-Validator verwenden. Es ist also geschafft.

Verwenden meiner vorbereiteten Dateien

Wem das Kompilieren zu aufwändig ist, der kann auch einfach die von mir kompilierten Dateien (~2,1MB) verwenden. Es handelt sich dabei um die Sourcen, die am 17.9.2004 im CVS-Repository erhältlich waren. Sollte seitdem eine neuere Version dort anzutreffen sein, so empfehle ich diese zu verwenden.

Die Dateien von mir liegen als zip-Archiv zum Herunterladen bereit. Darin habe ich ebenfalls die beschriebenen Änderungen an den Style-Sheets vorgenommen. Das bedeutet, dass der Virtuelle Host des Apache ebenfalls css.david.tibbe genannt oder alle Dateien noch einmal editiert werden müßte(n). Es ist aber auch ein kleiner Trick möglich: man lässt die Adresse css.david.tibbe einfach auch auf die IP des Virtuellen Hosts auflösen. Dazu wird wieder die hosts-Datei editiert. Ich verwende nun css.example.org als Name für den eigenen Virtuellen Host. Es muss dann aus

127.0.0.3     css.example.org

das Folgende werden

127.0.0.3     css.example.org     css.david.tibbe

Hinweise

last update: 2007/04/04
best view with a Browser