Werkzeuge für erfolgreiche Webseiten mit PN

CMS Allgemein : Bei der Entwicklung neuer Webseiten kommen neben PostNuke selbst zumeist auch eine Vielzahl sekundärer Tools zum Einsatz, um die gesteckten Ziele zu erreichen und Anforderungen zu erfüllen.
Mittlerweile gibt es vermehrt Browser-Erweiterungen und Online-Tools, beinahe täglich gesellen sich neue dazu. Viele widmen sich gleichen Themen und so steht man leicht vor einem Dschungel an verfügbaren Alternativen.

In diesem Artikel stelle ich kurz vor, welche Werkzeuge für mich persönlich die unverzichtbare Basis darstellen, um mit möglichst wenig Aufwand alle wichtigen Sachen parat zu haben. Als Browser benutze ich während der Entwicklung den Firefox unter Ubuntu.

Allgemeines

Das Wichtigste überhaupt ist die gute alte Web Developer Toolbar für den Firefox. Zu den bestechendsten Funktionen zählt unter anderem das direkte Ändern von CSS, während man eine Seite anschaut. Somit findet man Fehler sehr schnell, indem man sukzessive Teile aus dem Stylesheet löscht. Eine weitere schöne Sache ist, dass man die CSS-Unterstützung leicht mit STRG+Alt+D komplett ausschalten kann. Außerdem bietet die Web Developer Toolbar übersichtliche Informationen zu allen möglichen Teilen einer Seite. Pflicht!

CSS

Um nicht bei jeder Seite die CSS-Räder neu erfinden zu müssen, hat sich in der letzten Zeit zunehmend die Benutzung von CSS-Frameworks wie zum Beispiel YAML (Yet Another Multicolumn Layout) etabliert. Mit dem YAML Builder ist eine visuelle Erstellung von Layouts möglich.

Eine jüngere (und am Anfang leichter zu verstehende) Alternative dazu ist YUI Grid CSS, welches bei der Neugestaltung von der Guite-Seite eingesetzt wurde. Auch hierfür existiert ein Werkzeug zur visuellen Gestaltung des Grundrasters: der Grid CSS Builder.

Wer auf Zugänglichkeit achtet, möchte auch sicherstellen, dass sich ein CSS-Layout in mindestens zwei Vergrößerungsstufen problemlos darstellen lässt. Ein nützliches kleines Werkzeug dazu ist der em Calculator, mit welchem sich die Schriftgrößen von vererbten em-basierten Definitionen nachvollziehen lassen.

Um CSS-basierte Seiten auch IE-tauglich zu machen, bedarf es oft zusätzlicher Aufwände. Hilfreich dabei ist der netrenderer, der eine Seite mit der Engine von IE6 und IE7 darstellt. Mein Lieblingswerkzeug in dieser Richtung ist allerdings Browsershots, das mittlerweile eine Vielzahl von Browsern, Betriebssystemen und Versionen unterstützt.

JavaScript

Zum flexiblen Debugging von JS-Funktionen eignet sich FireBug, das darüber hinaus auch die Möglichkeit zur direkten Manipulation von Markup-Elementen beinhaltet.

Ein kleiner Zusatz für Firebug ist YSlow, welches Informationen zur Performance bietet.

Für die in PN .8 benutzten JS-Frameworks Prototype und Scriptaculous sind zwischenzeitlich eine Unmenge verschiedener Erweiterungen entstanden. Mit Scripteka wurde ein Projekt ins Leben gerufen, um diese an zentraler Stelle zu sammeln.

Validierung

Es existiert eine Vielzahl verschiedener Validatoren, so dass man sich schnell fragt, welchen oder welche man regelmäßig benutzen soll. Folgende Kombination ist für mich unschlagbar.

Für die grundlegende HTML- bzw. XHTML-Validität setze ich die Firefox-Erweiterung HTML Validator ein, die mir schon beim Anzeigen der Webseite viele Fehler und Warnungen zeigt.

Wenn die Seite soweit steht und die eigentliche Validierungsphase anläuft, behelfe ich mir selbige mit verschiedenen Favlets. Das Lesezeichen mit der Adresse

sendet die aktuell angezeigte Seite zum XML Validator, der XHTML-Dokumente basierend auf ihrem XML-Schema validiert. Damit werden einige zusätzliche Fehler gefunden, die sich meistens auf die strukturelle Verschachtelung der Elemente beziehen.

Ein kleines Juwel ist der Multi-Validator. Das Lesezeichen hat die Adresse

und führt zu etwa 20 Links zu verschiedenen Validatoren für die übergebene Webseite. Das umfasst zum Beispiel auch WAI und Section 508.

Wenn die Zugänglichkeit noch einmal explizit angepackt wird, hilft auch der FAE, der durch eine intuitive Bedienung und ansprechende Reports besticht. Auch für die BITV gibt es mittlerweile mit Truwex eine Werkzeug, um das Testen zu vereinfachen. Es weist auf schlechte Farbkontraste und ähnliche Defizite hin, in einer graphischen Ansicht kann man s ich sogar auf der eigenen Seite zeigen lassen, wo die Fehler auftreten.

Stimmt soweit alles, lasse ich den Total Validator laufen, der die komplette Webseite durchläuft und für jede Einzelseite die (X)HTML-Fehler auflistet.

Zusätzlich kommen je nach Projekt noch Validierungen von speziellen Dingen hinzu. Für RSS- und Atom-Feeds gibt es mittlerweile auch verschiedene Tools. Ein wesentlich wichtigeres Fundstück ist aber der P3P Validator vom W3C.

SEO

Für einen runden Einstieg in die Fundstellen sollte eine Seite neben validem Code sowie einem hohen Anteil der Inhalte am gesamten Markup auch eine Google Sitemap mitbringen, die sich dann in den Google Webmaster-Tools verwalten lässt.

Um sich auf dem Laufenden zu halten, wie es gerade um den PageRank, die Backlinks usw. bestellt ist, kann ich den SEO-Checker, Live PR, Check-Link und Seitwert empfehlen.