nützliche Firefox Addons für Drupal Theming

Drupal bietet viele fertige Themes, die für eine eigene Webseite meist nur gering angepasst werden müssen. Doch spätestens wenn man ein eigenes Design für seine Webseite nutzen will, führt kaum ein Weg am Zen Theme vorbei. Doch zwischen dem frisch aktivierten Zen Theme und einer fertigen, optisch ansprechenden Webseite liegen Welten - oder eher hunderte Klassen und IDs, die das Theme mitliefert.

Möchte man nicht nach kurzer Zeit schon frustriert den Kampf gegen die Übermacht der Möglichkeiten des Themes aufgeben, ist es Zeit für eine nützliche Sammlung von Helfern.

Je nach Browser werden inzwischen von allen größeren Herstellern verschiedene Plattformen angeboten. So können Quelltexte nicht nur besser sortiert und farblich getrennt angezeigt werden, sondern auch durchsucht. Zudem ist es oft möglich, durch Anwählen eines Elements in der Webseite zu dem ensprechenden Abschnitt im Code zu springen.

Gibt es dort nur geringe Unterscheidungen der Hersteller, gibt es jedoch nur noch wenige Anbieter, die komplexere und vielfältigere Addons bereitstellen für WebDeveloper.

Firefox bietet auf seiner Website tausende Addons, doch ist man wieder von einer Masse an Möglichkeiten erschlagen.
Deshalb sollen die beliebtesten Addons hier kurz vorgestellt werden.

Firebug

Firebug ist der Grundstock für WebDeveloper, Webdesigner, Drupal-Themer, Hobby-Programmierer und Neugierige und bietet unter anderem die oben beschriebenen Möglichkeiten, den Quellcode einer Webseite zu inspizieren. Weiterhin können Scripte und das Ladeverhalten der Seite überprüft werden.

Mehr dazu und Download: Infoseite Firebug

Web Developer

Web Developer erweitert die Möglichkeiten der Code-Prüfung. Über eine weitere Leiste über der Tabregion können unter anderem separat bestimmte Seiteninhalte gesperrt werden und so zum Beispiel das Verhalten einer Webseite bei ausgeschaltetem JavaScript oder die Ansicht der Seite für Screenreader überprüft werden. Separate Kategorien für Formulare, Grafiken und viele andere Bereiche ermöglichen eine übersichtliche Handhabung bei fast unendlich wirkender Informationsvielfalt. Da bleibt kaum ein Wunsch offen.

Mehr dazu und Download: Infoseite Web Developer

MeasureIt

Pixel-Lineale mitten auf dem Monitor? Außerhalb des Grafikprogramms? MeasureIt macht es möglich. Innerhalb des Viewports des Firefox kann man mit nur einem Klick jede gewünschte Fläche ausmessen. Teilweise Transparenz des „Lineals“ erleichtert die Handhabung, da man die darunterliegenden Elemente so leicht identifizieren kann.

Mehr dazu und Download: Infoseite MeasureIt

ColorZilla

Welcher Webdesigner kennt nicht die Farbaufnahme-Pipette aus Photoshop. Oft schmerzlich vermisst, wenn es um die Beurteilung von Webfarben geht, macht ColorZilla die Pipette webfähig. Mit nur einem Klick erhält man jede Farbe, über die man den Cursor bewegt, in RGB und Hexadezimalwerten. Ein reiches Optionenmenü ermöglicht zudem Beispielsweise das Speichern der Farbe als Favorit oder im Zwischenspeicher - in sechs verschiedenen Formatierungen. Alternativ erzeugt ColorZilla auf Wunsch auch eine Übersicht aller auf der Webseite verwendeten Farben und listet die genaue Stelle in der CSS-Datei, die für diese Definition sorgt.

Mehr dazu und Download: Infoseite ColorZilla

HTML Validator

Webseiten crossbrowserkompatibel zu erstellen, heißt an erster Stelle auch, fehlerfreien und semantisch richtigen HTML-Code zu erzeugen. Ein einzelnes vergessenes Zeichen kann durchaus die Darstellung der Webseite grundlegend verändern. Webseiten mit Validatoren gibt es genug, jedoch geht es zeitsparender und komfortabler mit dem Addon „HTML Validator“. Ein kleines unschwer zu verstehendes Symbol (grüner Haken oder rotes x) zeigt auf den ersten Blick das Ergebnis der passiv durchgeführten Codeanalyse - für jede Webseite, die im Browser gerade angezeigt wird. Per Doppelklick auf das Symbol öffnet sich ein separates Fenster mit einer Fehlerliste, dem Quellcode der Seite samt markierter Fehlerstelle und der Fehlerbeschreibung samt Richtig-Falsch-Beispiel.

Mehr dazu und Download: Infoseite HTML Validator