Webkrauts » Kleine Helferlein

Artikel

Kleine Helferlein

Web Standards prüfen

Der (X)HTML-Code ist geschrieben, die zugehörige CSS-Datei eingebunden und der Browser zeigt Ihnen die Seite so an, wie Sie es geplant haben? Herzlichen Glückwunsch.
Ob Sie wirklich alles gemäß Web Standards angelegt haben oder Ihr Browser kleine Fehler selbst korrigiert, können Sie mit sogenannten Validierern (auf englisch: Validator) überprüfen. Das W3C bietet hierzu einen Markup Validation Service und einen CSS-Validator an. In beiden Fällen können Sie Ihren Code entweder über eine Internet-Adresse, den Upload der Datei oder durch direkte Eingabe überprüfen lassen und gegebenenfalls verbessern. Dieser Service eignet sich auch zur Fehlersuche, wenn Anweisungen etwa nicht funktionieren nur weil ein Semikolon oder eine Klammer fehlt.

Nützlich ist manchmal auch ein einfacher Link Checker, mit dem Sie prüfen können, ob nicht irgendein Link auf Ihrer Seite ins Leere zeigt.

Weitere Validierer und Simulatoren

Wenn Ihre Site die W3C-Validierer passiert hat, können Sie sie für Menschen mit Behinderungen zugänglicher machen (siehe 4. Barrierefreies Internet). Verschiedene Kriterien dafür finden Sie beim Biene-Award.

Einige Tools überprüfen Ihre Site soweit möglich auf Barrierefreiheit. Der Barrierefinder funktioniert zwar nur mit dem Internet Explorer, gibt Anfängern aber eine gute Vorstellung davon, worauf es ankommt. Bekannter sind die englischsprachigen Tests von Cynthia says oder WebXACT (ehemals Bobby).

Mit dem ebenfalls englischsprachigen Colorfilter können Sie verschiedene Formen von Farbblindheit simulieren.

Firefox aufrüsten

Mit welchem Browser Sie sich durchs Netz bewegen bleibt Ihrem Geschmack und Betriebssystem überlassen. Für Webdesigner bietet der Firefox einige sehr nützliche Erweiterungen. Der Web Developer lässt sich zusätzlich zum Browser installieren und bietet umfangreiche Methoden zur Analyse einer Website, beispielweise lassen sich alle Block-Level-Elemente farbig markieren oder das CSS ganz abschalten. Der HTML Validator überprüft den Code einer Seite, ohne ihn beim W3C hochladen zu müssen. ColorZilla zeigt Ihnen den RGB- oder Hexadezimal-Code einer Farbe an, mit Measure It lassen sich Seiten vermessen. Fangs simuliert einen Screenreader, der Small Screen Renderer seinerseits simuliert die Ansicht in einem Handy/PDA. Um den Aufbau einer fremden Site schneller zu erfassen, lohnt sich das View Rendered Source Chart.

Farbenfrohes Schaffen

Wer mit knapp 16,8 Millionen RGB-Farben überfordert ist, findet bei metacolor.de zunächst ein Farb-Tutorial. Bei den Colourlovers können Sie sich von einzelnen Farben inspirieren lassen. Der Color Scheme Generator liefert Ihnen auf Knopfdruck verschiedene Farbkombinationen. Anstatt selbst herumzuspielen, können Sie auch fertige Farbkombinationen von colorcombos.com verwenden. Ab und zu benötigen Sie hellere oder dunklere Farbtöne, diese lassen sich recht simpel in mehreren Abstufungen über den Color Blender von Eric Meyer erzeugen. Um RGB-Werte in Hexadezimalzahlen umzuwandeln, bietet sich der Umrechner von SelfHTML an.

Schriften

Der Typetester eignet sich dazu, um verschiedene CSS-Angaben schnell miteinander zu vergleichen. Mit dem Fontbrowser können Sie Ihre installierten Schriften im Browser ansehen.

Weiterführende Links

Zum Autor

Nicolai Schwarz betreibt die kleine Agentur textformer Mediendesign in Dortmund. Seit etwa drei Jahren schätzt er den Sinn, die Eleganz und Überlegenheit von Web Standards und predigt diese in Webdesign-Schulungen. Wie viele andere Webkrauts hält auch er sich ein eigenes Blog.

Info:: Kleine Helferlein ist Beitrag Nr. 19
Autor:: Nicolai Schwarz am 7. Dezember 2005 um 22:00
Kategorie:: Adventskalender 2005

Kommentare

Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.

1.

Einige dieser Helferlein kannte ich tatsächlich noch nicht.
Danke für die Tipps. Allerdings muss man erwähnen, dass noch nicht alle Erweiterungen für den FF mit der neuen Version 1.5 funktionieren. Inwieweit das die hier angesprochenen betrifft, weiß ich nicht. Vielleicht hat jemand mehr Erfahrungen?

Kommentar by Sylke - 7. Dezember 2005 um 11:24
2.

Da is' ja wirklich alles dabei was man braucht. Die Developer Toolbar für Firefox, Mozilla & Flock gibt es jetzt im übrigen bereits in der neuen Version 0.9.9 mit einigen neuen Features.

Kommentar by Heiko - 7. Dezember 2005 um 11:38
3.

Den W3C-Validator kann man übrigens auch lokal auf einer Windose installieren. Außerdem gibt es einen ganzen Haufen Linkchecker, ich habe auch einen geschrieben

Kommentar by Alexander - 7. Dezember 2005 um 11:51
4.

Developer Toolbar, ColorZilla und der Validator funktionieren auf jeden Fall. Letzteren benutze ich übrigens mittlerweile standardmäßig zum Entwickeln, da er in die Quelltext-Ansicht integriert ist und man mit einem Klick auf Warnung oder Fehler direkt an die relevante Stelle im Code springen kann. Außerdem sieht man durch ein Icon in der Statusleiste ohne Klick, aber auf einen Blick ob eine Seite validiert, Warnungen vorhanden sind, oder richtige Fehler.

Kommentar by Sebastian - 7. Dezember 2005 um 12:28
5.

Super link-checker Xenu's Link Sleuth.
Selbst Riesenseiten werden bestens getestet und der Report ist klasse, da man selbst einstellen kann was man haben möchte. Externe links können, müssen aber nicht gecheckt werden

Kommentar by Uwe - 7. Dezember 2005 um 15:37
6.

Viele kleine Helferlein…. danke.
Mir gefällt auch dieser relativ neue HTML-Validator gut:
Validome
>W3C-standardkonform
>Spricht auch deutsch
>Verweise auf Code-Dokumentationen (SELFHTML, WDG-Group)

Alle Seiten eines Webauftritts kann man mit dem Valdidator der WDG-GROUP überprüfen lassen:
WDG-Validator

Kommentar by makcie - 7. Dezember 2005 um 19:09
7.

Hier nochmals die Links:
Validome:
http://www.validome.org

WDG-Validator:
http://www.htmlhelp.com/tools/validator/

Kommentar by makcie - 7. Dezember 2005 um 19:13
8.

Web Developer, EditCSS und Validator sind auf jeden Fall ein Muss. Als lokaler Validator eignet sich sehr gut der HTML VALIDATOR (based on Tidy) als Firefox Erweiterung. Man hat immer ein Icon in der Statusleiste (OK, Fehler, Warnung) und bekommt in der Quellcodeansicht immer alle Fehler /Warnungen aufgelistet.

Kommentar by Christian Simon - 7. Dezember 2005 um 19:16
9.

Mir ist noch eine gute Empfehlung für die CSS-Liveeditierung unter Windows eingefallen: CSS Vista. In diesem Tool hat man während dem Editieren gleichzeitig eine Firefox- und eine IE-Vorschau.

Kommentar by Sebastian - 7. Dezember 2005 um 21:10
10.

Das Lesen des Adventskalenders hat sich gelohnt, denn ich habe View Rendered Source Chart kennen gelernt.

Diese Form der verschachtelten Visualisierung ist genau das was ich gesucht habe, ohne das ich es wirklich wusste

Ideal für Veranschaulichung von Quelltext, egal ob im Unterricht oder beim Debugging.

Wie sagt man bei uns in Groningen: Dank je wel.

Kommentar by Peter Müller - 7. Dezember 2005 um 22:45
11.

Noch eine Frage:

Früher hat der W3C-Validator sich geweigert, ein Dokument ohne DTD zu validieren.
Jetzt versucht er, gegen HTML 4.01 transitional zu validieren, wenn im Dokument die DTD fehlt.

Ich hätte gern gewußt, seit welcher Version ist das so?

Kommentar by makcie - 8. Dezember 2005 um 14:47
12.

Und dabei war ich mir sicher, dass innerhalb der ersten fünf Kommentare jemand auf die Firefox-Erweiterung IE Tabs hinweisen würde. Damit lassen sich unter Windows Webseiten, die mit dem Internet Explorer gerendert wurden, als Tab INNERHALB vom Firefox anzeigen.
Manche Leute mögen solch perfides Zeugs.

Kommentar by Nicolai Schwarz - 8. Dezember 2005 um 20:40
13.

…und ich bin davon ausgegangen, dass unter den Firefox-Helfern der DOM-Inspector auftauchen wird. Damit lassen sich z.B. die CSS-Regeln und -Eigenschaften für ein Element bis auf die Zeilennummer in der CSS-Datei zurück verfolgen oder die verfügbaren Javascript-Eigenschaften und -Methoden eines Elements auslesen. Ganz groß und gerade in umfangreicheren Projekten für mich ein unverzichbares Werkzeug.

Kommentar by Eckhard Rotte - 9. Dezember 2005 um 12:05

Webkrauts: Für mehr Qualität im Web.