http://jendryschik.de

UX, Usability und Webstandards

Suche
SucheMenü

Nützliche Werkzeuge

Hinweis: Diese »Einführung in XHTML, CSS und Webdesign« ent­spricht der zwei­ten Auf­lage des gleich­na­mi­gen Buches, das im Dezem­ber 2008 im Ver­lag Addison-Wesley erschie­nen ist. Die Inhalte sind mittlerweile veraltet, fast alles hat sich weiterentwickelt. Seit einigen Jahren gibt es HTML5, von XHTML redet niemand mehr, und auch die Entwicklung und Unterstützung von CSS ist um Einiges weiter. Auch fast alle Grundlagentexte müsste man schon lange fortschreiben. Falls Sie die Texte dennoch lesen möchten, behalten Sie das bitte im Hinterkopf.

Zurück zur Startseite und zum Inhaltsverzeichnis des Buchs

Tidy

Tidy (heißt so viel wie sauber, ordentlich) ist ein kleines und wirkungsvolles Werkzeug, das hauptsächlich dazu dient, (X)HTML-Dokumente zu prüfen und auf Wunsch automatisch so aufzubereiten, dass sie der Prüfung eines Validators (siehe Kapitel 3.2) standhalten. Tidy erkennt fehlerhafte Syntax, falsche oder redundante Auszeichnungselemente und beseitigt je nach Konfiguration die Fehler automatisch. Das Werkzeug bietet erstaunlich viele Funktionen und ist gut konfigurierbar.

  • Auf Wunsch konvertiert Tidy HTML in XHTML und umgekehrt,
  • ändert die Zeichenkodierung,
  • wandelt Attribute zur visuellen Auszeichnung von Inhalten, beispielsweise Angaben zu Schrift oder Farbe, in CSS-Angaben um,
  • entfernt unerwünschte und veraltete Elemente,
  • formatiert den Quelltext neu,
  • korrigiert durch sogenannte WYSIWYG-Editoren (siehe Kapitel 3.1.1) produziertes, teilweise unsauberes oder gar fehlerhaftes (X)HTML und
  • überführt durch Microsoft Word erzeugte HTML-Dokumente – in der Regel haarsträubend verkompliziertes HTML, durchsetzt von für viele Browser nutzlosen proprietären Auszeichnungselementen – in schlanke, gültige Dokumente.

Unter der Adresse tidy.sourceforge.net können Sie Tidy herunterladen. Beachten Sie, dass zwar ab und zu binäre Versionen von Tidy bereitgestellt werden, allerdings nicht regelmäßig und nicht für alle Plattformen. Um immer die aktuelle Version im Einsatz zu haben, nutzen Sie daher stets die allerneueste Version aus dem CVS des Projekts. Näheres dazu finden Sie auf der betreffenden CVS-Webseite des Tidy-Projekts. Die Projektverantwortlichen pflegen kein Versionierungsschema. Die Version von Tidy ist immer das Datum der letzten Änderung.

Ursprünglich wurde Tidy von Dave Raggett, dem (Ko-)Autor von HTML 3 bis 4.01, als »HTML Tidy« unter dem Dach des W3C entwickelt. Der inzwischen verstorbene Terry Teague prägte in der Anfangszeit das Projekt durch eigenen Code entscheidend mit und half, es auf mehrere Plattformen zu portieren. Maßgeblich treiben inzwischen Arnaud Desitter und Björn Höhrmann in enger Abstimmung mit dem W3C das Projekt als Open Source voran. Einige Entwickler arbeiten parallel engagiert in anderen Projekten des Konsortiums mit, unter anderem am Markup Validation Service, wodurch Webentwickler mehr und mehr durch einheitliche Fehlererkennung und -behandlung beider Werkzeuge profitieren.

Die TidyLib, das zentrale Herz aller Tidy-Erscheinungsformen, ist für viele Plattformen in unterschiedlichen Ausführungen erhältlich. Die wohl meistverbreitete und ursprünglichste Erscheinungsform ist die als eigenständiges Programm, das vor allem für Windows erhältlich ist. Aber auch verschiedene Linux-Distributoren bieten Tidy an, ebenso wie es mit Balthisar Tidy eine binäre Cocoa-Version für Mac OS X gibt. In vielen WYSIWYG- und Texteditoren ist Tidy integriert oder lässt sich leicht manuell einbinden. Einigen aktuellen Linux-Distributionen liegt es als Paket bei. Für Mozilla und Firefox gibt es eine hervorragende Erweiterung namens Html Validator, die im nächsten Abschnitt, »Browsererweiterungen«, vorgestellt wird.

Automatisierter Einsatz

Meist nutzen Webautoren Tidy zur Bearbeitung einzelner Dokumente. Alle Dokumente einer Website auf diese Weise zu überprüfen, kann bei größeren Projekten mit Hunderten oder Tausenden von einzelnen Dokumenten umständlich sein. Tidy lässt sich jedoch automatisiert einsetzen, im einfachsten Fall über die Kommandozeile. Im Folgenden sei davon ausgegangen, dass Tidy für Windows als C:\tidy\tidy.exe vorliegt und im Suchpfad für ausführbare Programme eingetragen ist. Das Kommando

tidy -f ausgabe.txt -q foo.html

schreibt Fehlermeldungen und Warnungen in eine Datei und blendet die weiteren Informationszeilen zur Datei und zu Tidy aus. Bei einem fehlerfreien Dokument ist ausgabe.txt leer. Eine Überprüfung von Listing 3.5 führt zu einer Ausgabe, die unter anderem die Warnungen missing <!DOCTYPE> declaration und missing </title> before </head> enthält. Eine automatische Korrektur der untersuchten Datei erledigt der Parameter -m.

<html>
  <head><title>Tidy Beispiel</head>
  <body>Hallo Welt!</body>
</html>
Listing 3.5: Fehlerhaftes HTML-Dokument

Sämtliche Konfigurationsoptionen sind in der Quick Reference aufgeführt. Sie lassen sich jedem Aufruf direkt mitgeben oder, komfortabler, in einer Konfigurationsdatei notieren. Listing 3.6 zeigt eine solche. Die Angabe

tidy -m -config c:\tidy\tidy.cfg foo.html

wandelt Listing 3.5 in das XHTML-Dokument in Listing 3.7 um.

doctype:
strict
enclose-text: true
indent: true
indent-spaces: 2
language: de
output-xhtml: true
tab-size: 2
tidy-mark: false
write-back: true
Listing 3.6: Tidy-Konfigurationsdatei
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      Tidy Beispiel
    </title>
  </head>
  <body>
    <p>
      Hallo Welt!
    </p>
  </body>
</html>
Listing 3.7: Listing 1 nach Tidys Korrektur

Folgende Zeile wendet Tidy auf alle Dokumente mit der Dateinamenserweiterung html im aktuellen Verzeichnis und allen Unterverzeichnissen an – unter Berücksichtigung einer Konfigurationsdatei:

for /R %f in (*.html) do tidy.exe-m -config C:\tidy\tidy.cfg %f

Es geht jedoch produktiver. Viele Webentwickler nutzen für ihre Projekte eine lokale Entwicklungsumgebung, vor allem für Testzwecke. Idealerweise spiegelt sie die Bedingungen der späteren Serverumgebung für die jeweiligen Webprojekte wider. Zwei Alternativen bieten sich für solche Umgebungen an: Tidy als PHP- und als Webservererweiterung. In beiden Fällen durchläuft die (X)HTML-Ausgabe automatisch zunächst die Tidy-Bibliothek, wird von ihr geprüft und je nach Konfiguration überarbeitet. Entwickler oder Anwender merken bei fehlerfreien Dokumenten im Idealfall nichts von alledem, höchstens eine leichte zeitliche Verzögerung. Dies stellt eine große Arbeitserleichterung dar und ermöglicht ein zügiges und kostensparendes Entwickeln von Webseiten.

Dank John Coggeshall existiert Tidy als PECL-Erweiterung für die Versionen 4.3+, die als shared module eingebunden wird. Seit PHP 5.0+ ist diese Tidy-Erweiterung Bestandteil der PHP-Distribution und muss nur noch in der Konfiguration aktiviert werden (vorausgesetzt, die Tidylib- beziehungsweise libtidy-Bibliothek ist installiert). Erfahrene PHP-Programmierer können Tidy daher leicht in ihre Projekte integrieren.

Sebastian Tusk hat vor Jahren ein Modul für den Apache 2 Webserver entwickelt: mod_tidy. Da Tidy als PHP-Erweiterung nur in einer PHP-Entwicklungsumgebung funktionieren kann, bringt der Einsatz als Apache-Modul größeren Nutzen, weil es auf diese Weise jede Art von Webdokument automatisch überprüfen kann und sein Einsatz nicht auf PHP-Dokumente beschränkt bleibt. Mittlerweile hat Sierk Bornemann die Arbeit an mod_tidy übernommen.

Im Java Server Faces AJAX Framework ist eine gut gepflegte Tidy-Klasse enthalten, um innerhalb von Java Server Faces die Eigenschaften von Tidy zu nutzen. Für Java existiert mit Jtidy außerdem eine direkte Tidy-Portierung, doch leider wird diese seit Längerem nicht mehr gepflegt und ist deswegen, was die Aktualität des Tidy-Codes betrifft, nicht mehr auf der Höhe der Zeit. Sie sei hiermit der Vollständigkeit halber trotzdem erwähnt.

Für die populäre Entwickler-IDE Eclipse existiert mit dem Tidy-Eclipse-Plug-in eine Möglichkeit, Eclipse um die Prüfmöglichkeiten von Tidy zu bereichern.

Ein Webautor, der lediglich ab und zu einzelne Webseiten erstellt, ist mit dem eigenständigen Programm oder der Version als Browsererweiterung gut bedient. Für solche Fälle lohnt sich der Aufbau einer lokalen Entwicklungsumgebung meistens nicht, oder der Autor könnte damit überfordert sein. Für Webautoren, die regelmäßig größere Webprojekte zu bearbeiten haben, sind die Eigenschaften der PHP-Erweiterung, des Apache-Moduls, der betreffenden Java-Klassen oder einfach der Firefox-Erweiterung im Alltag hilfreich. Wenigstens eines dieser Werkzeuge zum Kontrollieren und gegebenenfalls Korrigieren der HTML-Syntax sollte in keiner professionellen Entwicklungsumgebung fehlen.

Zum Seitenanfang

FTP

Ihre Webseiten erstellen Sie höchstwahrscheinlich lokal auf Ihrem Rechner. Damit ist es unwahrscheinlich, dass Sie – wie es ja im Allgemeinen gewünscht ist – für jeden Nutzer zu jeder Zeit erreichbar sind; schließlich wollen Sie Ihren Rechner gewiss nicht 24 Stunden pro Tag durchlaufen lassen und permanent online sein. In der Regel mieten Sie entsprechenden Speicherplatz bei einem Hosting-Provider an, der über eine entsprechende Technik und Anbindung verfügt. Dazu zählen in der Regel vollklimatisierte Serverräume, Brandschutz, unterbrechungsfreie Stromversorgung, Netzwerküberwachung und regelmäßige Backups. Es gibt eine Fülle von Anbietern unterschiedlicher Qualität, die sich in Preis und Leistung zum Teil deutlich unterscheiden.

Um die lokal auf Ihrer Festplatte liegenden Dateien Ihrer Website zu publizieren, das heißt der Allgemeinheit zugänglich zu machen, müssen Sie diese auf den Ihnen zugewiesenen Speicherplatz auf den Servern Ihres Hosting-Providers überspielen. Das klassische Protokoll für diesen Zweck ist FTP.

FTP (File Transfer Protocol) ist ein Netzwerkprotokoll zur Übertragung von Dateien vom Server zum Client (Download), vom Client zum Server (Upload) oder clientgesteuert zwischen zwei Servern.

Von Ihrem Provider erhalten Sie alle erforderlichen Daten, die Sie benötigen, um Ihre Dateien auf den Server übertragen, sie von dort auf Ihren Rechner herunterladen oder direkt auf dem Server verwalten zu können. Zusätzlich benötigen Sie einen FTP-Client, in den meisten Fällen ein Programm, das so aufgebaut ist wie ein Dateimanager, beispielsweise der Windows Explorer.

Falls Sie Wert auf mehr Sicherheit legen, sollten Sie auf SFTP (SSH File Transfer Protocol), eine Art »sicheres FTP«, und entsprechende Clients zurückgreifen.

FileZilla gehört zu den besten FTP-Progammen unter Windows, ist kostenlos erhältlich und bietet auch SFTP-Unterstützung. Für Macintosh-Rechner ist Cyberduck empfehlenswert.


Abb. 3.12: Der FTP-Client FileZilla

Zum Seitenanfang

Xenu’s Link Sleuth

Wer kennt das nicht? Man ruft eine Webressource auf – und vollkommen unerwartet findet man sich im Niemandsland des Webs wieder. Dafür kann es folgende Gründe geben:

  • Der URI der Ressource wurde falsch eingetippt, entweder in der Adresszeile oder beim Anlegen des Links.
  • Der Autor der Site wusste nicht, dass sich coole URIs nicht ändern, und hat die Ressource gelöscht oder verschoben. Dadurch stimmen Lesezeichen, Links auf die Site sowie Einträge in Suchmaschinen nicht mehr.


Abb. 3.13: Xenu’s Link Sleuth

Um tote Links innerhalb Ihrer Website aufzufinden, brauchen Sie nicht Dokument für Dokument einzeln zu durchsuchen und jeden Link auszuprobieren. Mit Xenu’s Link Sleuth von Tilman Hausherr steht ein Programm zur Verfügung, das dies automatisch und sehr komfortabel für Sie erledigt. Auf Knopfdruck können Sie eine komplette Website nach ungültigen Verweisen durchsuchen. Das Programm kann auch mit SSL verschlüsselte sowie lokale Webseiten überprüfen – gerade letzterer Umstand macht das Werkzeug so nützlich. Aus den gewonnenen Informationen wird eine Zusammenfassung in Form eines HTML-Dokuments erstellt, das im Browser angezeigt und ausgewertet werden kann.

Eine deutschsprachige Anleitung von Christian Holm hilft Ihnen beim Einstieg.

Zum Seitenanfang

Color Cop

Color Cop ist ein Farbpicker, mit dem Sie mittels einer Pipette einen Farbwert eines beliebigen Punkts auf dem Desktop messen können. Der Farbwert wird als RGB- wie auch als Hexadezimalwert angegeben. Eine Bildschirmlupe hilft Ihnen dabei, den richtigen Bildschirmpunkt zu treffen.

Color Cop erfüllt nur diesen einen Zweck und ist entsprechend einfach zu bedienen. Dabei gehört das Programm zu den nützlichsten Hilfsmitteln, die Sie sich als Webentwickler auf Ihrem Arbeitsrechner installieren können.


Abb. 3.14: Color Cop