Sie sind auf Seite 1von 5

HTML-Validator

Schritt fr Schritt zum lokalen HTML-Validator

Drei Schritte, ein


Validator
Die Inhalte bleiben im hausinternen
Netz, die Seiten knnen automatisiert
getestet und die Ergebnisse ausge-
wertet werden eine lokale HTML-
Validierung hat viele Vorteile. Wir
mchten Ihnen in diesem

kindo
Artikel zeigen, wie man ei-

m/a
photo.co
nen derartigen Prfdienst

istock
selbst einrichten kann.

von Detlef Romanowski und Michael Schwenzfeier heit immer wichtiger. So genannte Screenreader, die den
Inhalt einer Website vorlesen, geraten allerdings selbst
Ein valider Quelltext ist das A und O jeder Website. bei kleinsten Fehlern ins Stocken.
Frher mochte es noch ausreichen, die eigene Seite fr Dies sind nur einige Grnde, warum eine Prfung
den PC-Zugriff ber den Internet Explorer zu optimie- durch einen HTML-Validator unverzichtbar und seit
ren. Heute gelangen die Besucher ber eine Vielzahl Langem gngige Praxis ist. Die meisten Programmierer
verschiedener Browser und mobiler sowie stationrer greifen dabei auf Angebote wie den W3C Markup Vali-
Endgerte auf die Website. Nur durch ein einwandfreies dation Service zurck. In wenigen Sekunden lassen sich
Markup lsst sich ausschlieen, dass die Seite bei eini- damit Quelltexte unter anderem von Webseiten, RSS-
gen Browsern oder Endgerten fehlerhaft oder sogar gar Feeds, CSS-Style-Sheets und mobilen Inhalten prfen.
nicht dargestellt wird. Damit wird es zur Grundlage fr Auch Browsererweiterungen, zum Beispiel fr Chrome
die Benutzerfreundlichkeit und damit den Erfolg einer und Firefox, bieten einen entsprechenden webbasierten
Seite. Prfservice.
Auch fr die Suchmaschinenoptimierung ist ein feh- Die Mglichkeit einer lokalen HTML-Validierung
lerfreier HTML-Code wichtig, weil er es den Crawlern nutzen bislang nur wenige. Dabei hat diese entscheiden-
erleichtert, die Seite zu indexieren. Gerade fr Unter- de Vorteile. Zum einen bleiben die Inhalte im hausinter-
nehmen wird darber hinaus das Thema Barrierefrei- nen Netz, auerdem ist man unabhngig vom Internet.

64 PHP Magazin 1.2015 www.phpmagazin.de


HTML-Validator

Darber hinaus kann der Webdienst nur fr Einzelseiten


genutzt werden; ein erweiterter Nutzungsumfang wird
vom W3C als kostenpflichtiger Service angeboten. Der
wichtigste Vorteil ist aber, dass die Daten automatisiert
getestet und die Ergebnisse dauerhaft gespeichert und
ausgewertet werden knnen.
Der lokale HTML-Prfdienst besteht im Wesentli-
chen aus dem von der PPI AG entwickelten Validator-
Proxy sowie einem HTML-Validator. Die notwendigen
Dateien knnen kostenfrei von [1] heruntergeladen
werden. Der Validator-Proxy luft im Hintergrund und
ist dem Webserver vorgeschaltet. Er extrahiert den zu
prfenden Quelltext aus den Antworten des Webser-
vers. Anschlieend wird das Markup an den HTML-
Validator gesendet. Der Validator-Proxy speichert
schlielich die Prfergebnisse im Dateisystem. So kann
der lokale Websitecheck ber den Validator-Proxy
leicht in eine bestehende Projektinfrastruktur einge-
bunden werden. Ohne zustzlichen Aufwand stehen Abb. 1: Ablauf der lokalen Validierung
auf diese Weise bei allen Zugriffen auf HTML-Inhalte
auf dem Webserver zustzliche Testergebnisse zur Ver- ein Python-Build-Skript im Internet abgerufen werden.
fgung. Dadurch wird eine dauerhafte Manahme zur Zudem muss Java in der Version 6 und ein Git-Client (Li-
Sicherung der Qualitt des Quellcodes etabliert. Zur nux-Installation: yum install git --disableexcludes=main)
Auswertung der Ergebnisdateien knnen beispielswei- installiert sein. Zusammenfassend sind also folgende
se ber JavaServer Pages (JSP) Ergebnislisten erstellt Schritte notwendig:
werden (Abb.1).
export JAVA_HOME=/usr/lib/jvm/java-1.6.0-openjdk.x86_64
Lokaler HTML-Validator so gehts mkdir checker
Im Folgenden werden die einzelnen Komponenten vor- cd checker
gestellt und aufgezeigt, wie ein lokaler HTML-Prfser- hg clone https://bitbucket.org/validator/build build
vice eingerichtet werden kann. python build/build.py all

1.
python build/build.py all
HTML-Validator
Der von der PPI AG entwickelte Prfservice Der doppelte Aufruf von python build/build.py all kann
verwendet den HTML-Validator des W3C[2]. notwendig sein, um ClassCastExceptions aus dem 1.
Dieser wird zum Download als Open Source bereitge- Lauf zu beheben. Mehr dazu unter[3].
stellt und kann somit zur lokalen Installation verwendet
werden. Grundstzlich knnen mit dem W3C-HTML-
Validator HTML4- und HTML5-Dokumente validiert Listing 1: w3c.conf
werden. Zur HTML5-Validierung muss jedoch zustz- Listen [server name]:21554 <Directory /usr/local/validator/htdocs>
lich ein spezieller HTML5-Validator installiert werden, <VirtualHost [server name]:21554> Options ExecCGI Includes Indexes
wie er zum Beispiel unter[3] zu finden ist. ServerName w3c.validator MultiViews
Eine Installation des W3C-Validators ist plattform- AllowOverride None
bergreifend mglich. Im Folgenden wird eine Instal- DocumentRoot /usr/local/validator/ Order deny,allow
lation unter Linux betrachtet. Zudem wird unabhngig htdocs Allow from localhost
von den in der Installationsbeschreibung von W3C ErrorLog logs/error_validator.log </Directory>
aufgefhrten Komponenten eine Web-Server-Instal- CustomLog logs/access_validator.log
lation auf dem Linux-System bentigt. Hierzu haben common <Directory /usr/local/validator/cgi-
wir den von W3C vorgeschlagenen Apache-Webserver bin>
verwendet. ScriptAlias /cgi-bin /usr/local/ Options ExecCGI Includes Indexes
Unter[4] werden die Schritte erlutert, um den Vali- validator/cgi-bin MultiViews
dator auf der eigenen Plattform zu installieren. Fr eine ScriptAlias /check /usr/local/validator/ AllowOverride None
bessere Zuordnung der Konfigurationsdatei httpd.conf cgi-bin/check Order deny,allow
haben wir die Datei w3c.conf benannt, [server name] Allow from localhost
steht dabei fr den lokalen Host bzw. die Host-IP. Der AddType text/html .html </Directory>
Inhalt der Datei ist in Listing1 zu sehen. AddOutputFilter INCLUDES .html </VirtualHost>
Fr die zustzliche Installation des HTML5-Valida-
tors mssen der Code und abhngige Binrdateien ber

www.phpmagazin.de PHP Magazin 1.2015 65


HTML-Validator

Damit der Validator-Prozess im


Hintergrund weiterluft auch
wenn die aufrufende Shell beendet
wird kann folgendes Kommando
verwendet werden:

nohup python build/build.py run > htmlChecker.


log &

Um den laufenden Prozess zu been-


den, muss das kill-Kommando auf
die entsprechende pid abgesetzt
werden. Die relevante pid findet
folgendes Kommando: ps -efl | grep
nu.validator (die gesuchte pid ent-
hlt in der Ausgabe nu.validator.
servlet.Main 8888).
Wenn alles geklappt hat, dann
kann der HTML5-Validator, wie
unter Kapitel 5.3 in der W3C-
Anleitung beschrieben, zur Ein-
bindung des HTML5-Validators
verwendet werden.
Nun ist die Installation des
HTML-Validators abgeschlossen,
und es sollte mglich sein, ihn ber
folgenden URL aufzurufen: http://
validatorhost:21554 (Abb.2). vali-
datorhost ist dabei natrlich durch
Abb. 2: Startseite des Validators den tatschlichen Linux-Host zu

Listing 2: Umwandlung in multipart/form-data


public class MultiPartMessage { sb.append(CRLF);
sb.append(value);
StringBuilder text; sb.append(CRLF);
static String CRLF = "\r\n"; text.append(sb.toString());
public static String BOUNDARY="1a2b3a4b5a6b7a8b"; }

public MultiPartMessage() { public void finish() {


text = new StringBuilder(); text.append("--");
} text.append(BOUNDARY);
text.append("--");
public String getContent() { text.append(CRLF);
return text.toString(); }
} }
.process(new Processor() {
public int getLength() { public void process(Exchange exchange) throws Exception {
return text.length();
} String out = exchange.getIn().getBody(String.class);
String utf8 = new String(out.getBytes("UTF-8"), "ISO-8859-1");
public void putStandardParam(String name, String value, String encoding) { MultiPartMessage mpm = new MultiPartMessage();
StringBuilder sb = new StringBuilder(); mpm.putStandardParam("uploaded_file", utf8, "UTF-8");
sb.append("--" + BOUNDARY).append(CRLF); mpm.finish();
sb.append("Content-Disposition: form-data; " + "name=\"" + name + "\"");
sb.append(CRLF); exchange.getIn().setBody(mpm.getContent());
sb.append("Content-Type: text/plain; charset=" + encoding); }
sb.append(CRLF); })

66 PHP Magazin 1.2015 www.phpmagazin.de


ersetzen. ber die drei Eingabemglichkeiten Validate by URI, Validate by
File Upload und Validate by direct input knnen nun einzelne HTML-Seiten
manuell validiert werden. Fr die automatisierte Validierung wird die vierte Ein-
gabemglichkeit, ohne GUI per Web Service, verwendet.

2.
Validator-Proxy
Der Validator-Proxy der PPI AG ist ein Java-6-Programm, das in
seiner Funktionalitt hauptschlich mithilfe des Apache-Camel-
Frameworks [5] umgesetzt wurde. Als Entwicklungsumgebung fr den
HTML-Validator-Proxy haben wir ein Eclipse inklusive Maven-Plug-in ver-
wendet. Fr die zum Einsatz gekommene IBM-AIX-Laufzeitumgebung wird
mit Maven ein ValidatorProxy.jar erzeugt.
Bisher wurde das Programm unter AIX und Linux verwendet. Da es sich
aber um ein Java-Programm handelt, sollte es auch auf andere Umgebungen
portierbar sein. Beim Validieren unterschiedlicher Anwendungen haben wir
festgestellt, dass aufgrund von Besonderheiten bei Zeichenstzen oder ver-
schlsselten HTML-Fragmenten noch Anpassungen in der Camel-Implemen-
tierung erfolgen mussten. Aufgrund der Vielfalt in der Welt der Webseiten und
Webserver in Bezug auf Konfigurierbarkeit und Gestaltbarkeit kann hier auch
zuknftig noch Handlungsbedarf bestehen.
Die Ablufe in Camel-Programmen werden grundstzlich ber so genannte
Routen gesteuert[6]. Deshalb wird fr die Kommunikation ber den Proxy
mit dem Server, welche die zu analysierenden HTML-Seiten liefert, zunchst
eine HTTP-Route bentigt:

from("jetty:http://{{proxy.url}}?matchOnUriPrefix=true&httpBindingRef=ValidatorProxyHttpBinding&
continuationTimeout=0")
.to("jetty:http://{{server.url}}?bridgeEndpoint=true&throwExceptionOnFailure=false")

ber die HTTP-Route werden HTTP-Nachrichten bermittelt. Der HTTP-


Response wird ber die HTTP-Route zugreifbar. Aus dem HTTP-Response
wird der HTML-Anteil extrahiert und dann ber eine weitere Camel-Route an Anzeige
die Web-Service-Schnittstelle des W3C-Validators weitergeleitet. Details zur
Web-Service-Schnittstelle gibt es unter[7].
Die Web-Service-Schnittstelle des W3C-Validators erwartet das zu validie-
rende HTML-Dokument im Format multipart/form-data. Die Umwandlung
in dieses Format bernimmt der Validator-Proxy. Dies haben wir, wie in Lis-
ting2 zu sehen, in Java realisiert.
Nach der Umwandlung in das erwartete Format wird das HTML-Doku-
ment zum W3C-Validator versendet. Schlielich wird das Ergebnis des Vali-
dators als HTML-Datei im Dateisystem gespeichert (Listing3).
Das Ergebnis wird zudem als XML-Datei gespeichert, die die Grundlage
fr die Auswertung ist. Auerdem wird das validierte HTML-Dokument
gespeichert. Dadurch knnen Zeilenangaben im Prfergebnis dem validier-
ten HTML-Code spter auch dann noch zugeordnet werden, wenn sich die

Listing 3: Ergebnis des Validators als XML-Datei speichern


.convertBodyTo(String.class, "UTF-8")
.setHeader(Exchange.CONTENT_TYPE,
constant("multipart/form-data; boundary=" + MultiPartMessage.BOUNDARY))
.setHeader("CamelHttpMethod", constant("POST"))
.setHeader(Exchange.HTTP_PATH, constant("check"))
.to("http4:{{htmlvalidator.url}}?bridgeEndpoint=true&throwExceptionOnFailure=false")
.convertBodyTo(String.class).choice().when(simple("${property.siteName} != \"\""))
.to("file:/{{log.directory}}/?fileName=" + simple("${property.siteName}").getText() + ".html");

www.phpmagazin.de
HTML-Validator

HTML-Seiten auf dem Server ndern. Darber hinaus mando verwendet werden: nohup ./validatorProxy.sh >
kann die HTML-Seite unter Layoutaspekten betrachtet /dev/null &.
werden. Zudem bietet sich eine Vergleichsmglichkeit

3.
fr korrigierten HTML-Code. Ergebnisaufbereitung
Damit das Ergebnis des HTML-Validators und das ge- Grundstzlich sind der Ergebnisdarstellung
prfte Markup im Browser korrekt aufbereitet werden und dem Reporting keine Grenzen gesetzt. Der
knnen, mssen Style Sheets und Grafiken unter Umstn- Validator-Proxy ist so angelegt, dass die Ergebnisdatei-
den noch verlinkt oder als Kopie im Ausgabeverzeichnis en zu einer HTML-Seite immer berschrieben werden,
neben den Ergebnisdateien bereitgestellt werden. um den Datenbestand klein zu halten und immer den
Der Validator-Proxy verfgt ber einen konfigurier- aktuellen Durchlauf im Blick zu haben. Deshalb ist eine
baren Caching-Mechanismus. Dieser verhindert, dass Archivierung der Ergebnisdateien gegebenenfalls ber
dieselben HTML-Seiten immer wieder validiert werden. einen anderen Prozess zu organisieren.
Dies ist zum Beispiel dann sinnvoll, wenn eine Anwen- Zur Aufbereitung knnte eine JSP dienen, welche die
dung ber automatisierte Tests aufgerufen wird und da- Ergebnisse aus den XML-Dateien ausliest. Ein Beispiel
bei bestimmte HTML-Seiten in kurzer Zeit wiederholt dafr finden Sie ebenfalls unter der oben angegebenen
betreten werden, etwa die Login- oder bestimmte Such- Downloadadresse. So kann zum Beispiel die Anzahl der
masken. Dadurch werden auch der Netzwerktraffic und Fehler und Warnungen ausgegeben werden. Zudem kn-
der HTML-Validator entlastet. Der Validator-Proxy nen ber Links die HTML-Validierungsergebnisse oder
wird ber eine properties-Datei konfiguriert (Listing4). auch der Quellcode einzelner HTML-Seiten aufgerufen
Der Start des Validator-Proxys erfolgt unter Linux als werden. So lsst sich unter anderem berprfen, welche
Java-Aufruf ber ein Shell-Skript. Die properties-Datei Fehler in welchen Dateien wie oft aufgetreten sind.
wird intern ber den ClassPath gefunden (Listing5). Die Auswertung der Validierungsergebnisse kann in-
Um den Validator-Proxy dauerhaft als Hintergrund- dividuell gestaltet werden. So ist es mglich, ein weiteres
prozess laufen zu lassen, kann wieder das nohup-Kom- Reporting mithilfe von Jenkins zu erstellen. Hier kann
zum Beispiel ber das Plot-Plug-in[8] die Fehlerhufig-
keit ber einen lngeren Zeitraum dargestellt werden.
Listing 4: Die properties-Datei Dazu muss aus den XML-Validierungsergebnissen le-
# Host und Port fr den Proxy diglich eine CSV-Datei mit der darzustellenden Anzahl
proxy.url=localhost:11111 von Fehlern erzeugt werden. Die Erzeugung der CSV-
Datei kann durch die JSP erfolgen.
# Host und Port, auf dem das Zielsystem luft Jenkins kann auch fr die berwachung der Validie-
server.url=zielhost:80 rung eingesetzt werden. Dabei erfolgt die Auswertung
der Ergebnisse der Validierung durch Jenkins automa-
# Host und Port des HTML-Validators tisch in festgelegten Zeitintervallen. Im Fehlerfall wer-
htmlvalidator.url=validatorhost:21554 den die Entwickler automatisiert per E-Mail ber das
Auftreten neuer Fehler durch Jenkins informiert.
# Verzeichnis zum Speichern der Ergebnisdateien vom HTML-Validator
Durch die automatisierten Prfungen und vielfltigen
log.directory=output
Auswertungsmglichkeiten knnen Unternehmen somit
#log.directory=D:\output
ohne viel Aufwand eine dauerhafte Qualittssicherungs-
manahme bei der Webentwicklung etablieren. Website-
# Damit bei Validator-Lufen mit automatisierten Tests die gleichen HTML-Seiten
# (z. B. Login-Maske) nicht immer wieder zum Validator gesendet werden, kann hier besucher und Suchmaschinen werden es ihnen danken.
# ein Cachingm-Mechanismus konfiguriert werden. Eintrge im Cache werden nach
# timeToLiveSeconds wieder verworfen. Detlef Romanowski ist Michael Schwenzfeier ist
Bereichsleiter Software Senior Software Engineer
timeToLiveSeconds=7200 Factory bei der PPI AG. bei der PPI AG.

Listing 5: Das shell-Skript Links & Literatur


# CLASSPATH anpassen
CLASSPATH=$CLASSPATH:.:../ValidatorProxy.jar:./log4j.properties [1] http://www.ppi.de/fileadmin/user_upload/pub/PPIValidatorProxy-
export CLASSPATH 0.0.2.zip
[2] http://validator.w3.org/
JAVA_HOME=/myJavaHome/java [3] http://about.validator.nu/
export JAVA_HOME [4] http://validator.w3.org/docs/install.html
[5] http://camel.apache.org
${JAVA_HOME}/jre/bin/java -Xmx512M -classpath $CLASSPATH de.ppi.fis.lbr. [6] http://camel.apache.org/routes.html
ValidatorProxy [7] http://validator.w3.org/docs/api.html
[8] https://wiki.jenkins-ci.org/display/JENKINS/Plot+Plugin

68 PHP Magazin 1.2015 www.phpmagazin.de