Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Kleine Helferlein

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Kleine Helferlein

Bevor wir mit dem Aufbau von CSS-Dateien beginnen, geben wir Ihnen heute ein paar nützliche Tools und Tipps mit auf den Weg. Damit erledigt sich das Webdesign zwar nicht von selbst, aber es wird um einiges einfacher.

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

Kommentare

Sylke
am 07.12.2005 - 11:24

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?

Permanenter Link

Heiko
am 07.12.2005 - 11:38

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.

Permanenter Link

Alexander
am 07.12.2005 - 11:51

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 :-)

Permanenter Link

Sebastian Kippe
am 07.12.2005 - 12:28

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.

Permanenter Link

Uwe
am 07.12.2005 - 15:37

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

Permanenter Link

makcie
am 07.12.2005 - 19:09

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

Permanenter Link

makcie
am 07.12.2005 - 19:13

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

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

Permanenter Link

Christian Simon
am 07.12.2005 - 19:16

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.

Permanenter Link

Sebastian Kippe
am 07.12.2005 - 21:10

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.

Permanenter Link

Peter Müller
am 07.12.2005 - 22:45

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.

Permanenter Link

makcie
am 08.12.2005 - 14:47

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?

Permanenter Link
Nicolai Schwarz

Nicolai Schwarz (Autor)
am 08.12.2005 - 20:40

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.

Permanenter Link

Eckhard Rotte
am 09.12.2005 - 12:05

...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.

Permanenter Link

Die Kommentare sind geschlossen.