Hinweis: Am 9. April beteiligen wir uns auf webkrauts.de am Naked CSS Day. Die Stylesheets sind an diesem Tag absichtlich abgeschaltet.

Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Nützliche Erweiterungen für den Firefox

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

Nützliche Erweiterungen für den Firefox

Unter Webdesignern genießt der Browser Firefox einen außerordentlich guten Ruf. Das liegt nicht nur an seiner recht hohen Unterstützung von Webstandards, sondern auch an der Möglichkeit, ihn mit nützlichen Erweiterungen auszubauen. Nicolai Schwarz hat die Wichtigsten zusammengestellt.

Erweiterungen oder Add-Ons in den Firefox einzubauen, hört sich im ersten Augenblick vielleicht furchtbar kompliziert an. Tatsächlich macht es Ihnen der Browser ungeheuer einfach. Die Erweiterungen sind in den meisten Fällen an einen simplen "Installieren"-Button geknüpft. Zunächst erlauben Sie einer Website überhaupt Add-Ons zu installieren, danach können Sie einzelne Erweiterungen von dieser Website hinzufügen. Beim nächsten Start verfügt der Firefox über neue, nützliche Eigenschaften. Eine kleine Auswahl der Top-Erweiterungen im Hinblick auf Webdesign haben wir hier für Sie zusammengestellt.

Hilfreiches für Jedermann

Mein persönliches Lieblingstool ist Scrap Book. Damit lassen sich Webseiten wunderbar auf dem eigenen Rechner speichern. Nützlich für Artikel, die Sie schnell wiederfinden möchten, oder für Bestelldaten von Online-Einkäufen. Mit Open Book erhalten Sie einen komfortableren Dialog beim Speichern neuer Lesenzeichen. PDF Download erlaubt es Ihnen, PDFs im Browser anzusehen oder gleich auf Ihrem Rechner zu speichern. Um die Tabs (Reiter) besser im Griff zu haben, eignet sich Tab Mix Plus; damit können Sie Tabs duplizieren oder geschlossene Tabs wieder öffnen. Wenn Sie RSS- oder Atom-Feeds im Auge behalten möchten, empfiehlt sich Sage als Feed-Reader.

Standards für Webdesigner

An erster Stelle ist hier der Web Developer von Chris Pederick zu nennen. Damit lassen sich unter anderem einzelne Elemente umranden, Bereiche ausmessen, JavaScript und CSS-Files deaktivieren oder die Eigenschaften von einzelnen Elementen anzeigen. Ein ungemein nützliches Werkzeug, um eigene Webseiten zu entwickeln oder Strukturen anderer Sites zu analysieren. Eine englischsprachige Anleitung finden Sie auf der Website des Autoren.

Eine sehr umfangreiche Erweiterung stellt FireBug dar. Unter Webentwickler gilt das Tool schon fast als eierlegende Wollmilchsau. Mit FireBug können Sie zum Beispiel die HTML- und CSS-Daten editieren, die DOM-Struktur einer Seite erkunden oder auch JavaScript debuggen. Um das Tool richtig zu nutzen, benötigen Sie allerdings ein wenig Einarbeitungszeit. Auch hierfür gibt es eine englischsprachige Dokumentation.

Einfacher zu handhaben ist der HTML Validator. Er weist auf Fehler und problematische Codebereiche hin. So haben Sie während der Entwicklung die Codequalität immer im Blick. Ein abschließender Besuch beim 'echten' Validator empfiehlt sich trotzdem. Wer dessen Adresse nicht kennt, nutzt dafür am besten die Webdeveloper Toolbar. Mit dem View Source Chart lässt sich der Aufbau einer Seite recht schnell erfassen. Das Tool ordnet die einzelnen Bereiche – div-Container, Absätze, Listen – grafisch schön übersichtlich an. Außerdem gibt es noch den Aardvark, der ebenfalls Tools zur Seitenanalyse bereit stellt und mit dem Sie Webseiten vor dem Ausdruck bereinigen können.

Kleine Helfer

Immer wieder nützlich ist ColorZilla, das ein Fadenkreuz bereit stellt, mit dem Sie auf einer Webseite die Farben von CSS-Elementen oder Bildern auslesen können. Wenn Sie Ihr Design eben schnell (unter Windows) im Internet Explorer testen möchten, können Sie mit IE Tab einen neuen Reiter öffnen, der die Ansicht mit dem IE in einem neuen Reiter innerhalb von Firefox einfügt. Screen grab! ist eine wunderbare Erweiterung, die einen Screenshot der aktuellen Website anlegt. Dieses Tool speichert auf Wunsch nicht nur den sichtbaren Bereich einer Webseite ab, sondern scrollt automatisch bis zum unteren Ende, so dass Sie einen Screenshot der kompletten Seite erhalten.

Zum Ausprobieren

Wenn Sie sich noch nicht auf ein FTP-Programm festgelegt haben, können Sie FireFTP ausprobieren. Das Tool stellt nicht nur grundlegende Funktionen zur Verfügung, auch der Abgleich von Ordnern oder SSL Verschlüsselung sind möglich.
Fangs simuliert die (Sprach-)Ausgabe in einem Screenreader. Die textliche Darstellung in Fangs ist ähnlich zu dem, wie die Seite in einem modernen Screenreader vorgelesen würde.
Der Palette Grabber seinerseits sucht sich die Farben einer Webseite zusammen und erstellt daraus eine Farbpalette für Photoshop, Paint Shop Pro, Gimp oder Flash. Dies funktioniert aber nur, wenn das Farbschema der Website auch im Quelltext vorhanden ist. Falls die Farbgebung stark von Bildern abhängt, kann Ihnen das Tool nicht weiterhelfen.

Weiterführende Links

Kommentare

Frank Hamm
am 12.12.2006 - 07:07

Für Screenshots bietet sich noch Pearl Crescent Screensaver an, der ohne Java auskommt (ebenfalls PNG und optional komplette Seite).

Permanenter Link

Frank Hamm
am 12.12.2006 - 07:34

Falls es unter den Links im Artikel bei erweiterungen.de noch keine aktuelle Version für FF 2.0 gibt, so lohnen sich der Aufruf von https://addons.mozilla.org/ und dort die Suche mit dem Namen der Erweiterung.

Permanenter Link

Ole Hook
am 12.12.2006 - 10:15

Nützlich ist auch noch "Live HTTP Headers" (der Name sagt schon alles) und der "Colour Contrast Analyser", welcher die Farbkontraste (Voder- und Hintergrundfarbe) von Elementen ermittelt und bewertet.

Viele Grüße,

Ole

Permanenter Link

Peter Müller
am 12.12.2006 - 12:12

Sehr schöne, kompakte Zusammenfassung. Vielen Dank dafür.

Permanenter Link

jens the lens
am 13.12.2006 - 00:36

Der Link zu FANGS geht nicht zur originalen FF-Extension dieses Namens, sondern zur Produktseite eines Herstellers mit u.a. einem nach eigener Darstellung ähnlichen Produkt. Der will das gleich über JavaScript-Link installieren. - Bäh!
FANGS selbst ist offiziell noch nicht FF2 kompatibel, tut aber im Modus Kompatibilitätstest: off seinen Dienst.

Permanenter Link
Manuel Bieh

Manuel Bieh (Webkraut)
am 13.12.2006 - 10:29

wow. von scrapbook bin ich echt begeistert. hatte für sowas bisher immer httrack benutzt. wunderbar das das die gespeicherten seiten auch im ie funktionieren.

super wär sicherlich auch wenn die möglichkeit bestünde die seite als pdf zu speichern. aber ich glaub das wird nur schwer zu bewerkstelligen sein.

Permanenter Link

Malte
am 14.12.2006 - 00:38

Erwähnen sollte man noch die praktischen "Mouse Gestures" (https://addons.mozilla.org/firefox/39/), die das Navigieren einfacher machen.

Permanenter Link

martin
am 14.12.2006 - 09:12

LinkChecker
Überprüft die Links auf einer Webseite und markiert diese farbig (grün=ok, rot=toter Link usw.). Ideal zur Prüfung "on the fly" wenn man viele externe Links auf seiner Seite hat.

Permanenter Link

Klaus Kopf
am 05.02.2007 - 01:06

Eine Erweiterung möchte ich ergänzen - www.definero.de

Permanenter Link

M.
am 07.02.2007 - 03:12

Für "Web"-Screenshot auch GraphicEx. Auch ohne Java.

Ansonsten: sehr gute Sammlung.

Gruß
M.

Permanenter Link

bugscout
am 13.03.2007 - 00:02

meine Lieblinge neben dem schon erwähnten Html Validator und dem Web Developer:

Search Status - Pagerank, Nofollow-Links, ....
SEO Links - Anzahl der Links, Position des Keywords
User Agent Switcher - Nomen est ...

Grüsse

Permanenter Link

Fabian Löschner
am 30.06.2007 - 10:29

Bei mir klappt Screen grab auch ohne Java. Auf der website steht auch nichts darüber das man Java baucht.

Permanenter Link

Die Kommentare sind geschlossen.