Firefox: Die zehn besten Plug-ins
Firebug
Diese Erweiterung zählt sicherlich zu einer der wichtigsten für alle Webentwickler. Denn die Software ist mit einer eigenen Schnittstelle versehen, an die andere Entwickler ihre Anwendungen anbinden können. Firebug rufen Sie mit einem Mausklick auf das kleine Käfersymbol in der Statusleiste von Firefox auf.
Damit wird das gerade angezeigte Dokument untersucht und eingelesen. Über die Hauptnavigation des Programmfensters erhalten Sie damit Zugriff auf den Quelltext der Seite und können auch in einem separaten Bereich die zugrundeliegenden Stylesheets ansehen. So kommen Sie Fehlern auf der eigenen Seite schnell auf die Spur.
Firebug eignet sich damit aber auch ganz hervorragend, um sich den Aufbau anderer Seiten anzusehen, um daraus zu lernen. Der integrierte Editor unterstützt Sie beim Bearbeiten des Quelltextes und des Stylesheets.
Fireshot
Im Alltag des Webentwicklers werden regelmäßig Bildschirmfotos benötigt. Ob für Präsentationen, um den Kunden über Zwischenstände zu informieren oder als Hintergrund für eine Analyse - Fireshot erledigt diese Arbeit. Sie starten die Aufnahmen über ein Kontextmenü, ein Tastenkürzel oder über eine eigene Schaltfläche in der Menüleiste des Browsers. Dabei haben Sie die Wahl, die vollständige Seite, lediglich den sichtbaren Bereich oder einen von Ihnen definierten Abschnitt aufzunehmen.
Auch um die weitere Bearbeitung kümmert sich das Programm. Auf Wunsch übernehmen Sie den Screenshot in einen externen Editor. Das Bildschirmfoto kann aber auch direkt in die Zwischenablage übergeben, gespeichert oder gedruckt werden. Als Formate stehen PNG, JPG, GIF und BMP zur Verfügung.
Fire FTP
Früher oder später müssen die Dateien, die lokal bearbeitet worden sind, wieder auf den Webserver übertragen werden. Am File Transfer Protokoll (FTP) führt auch heute noch kein Weg vorbei. Die Verwaltung der Elemente geht leichter mit einem guten Client von der Hand. Fire FTP präsentiert sich in zweigeteilter Optik, die ja seit Jahren bei Dateimanagern bewährt ist.
Auf der linken Seite des Fensters zeigt Ihnen die Erweiterung Ihre lokalen Dateien, während Sie im rechten Bereich Zugriff auf die Ordner des Servers haben. Fire FTP verwaltet mehrere FTP-Zugänge. So können Sie später bequem über ein Listenfeld zwischen den verschiedenen Verbindungen wechseln.
Measure It
Wie groß durfte die Grafik noch sein, damit sie das Layout der Seite nicht zerschießt? Wie breit sind die Spalten im gewählten Layout einer Seite? Wer die Pflege einer Seite übernimmt, die über keinen oder nur einen lückenhaften Style Guide verfügt, muss sich erst an die verschiedenen Layoutelemente der Site herantasten. Dabei hilft die kleine Erweiterung Measure It.
Bei der Installation des Add-ons wird die notwendige Schaltfläche nicht immer fehlerlos in die Symbolleiste integriert. Sie beheben das Problem einfach mit einem Rechtsklick auf die Leiste und passen diese dann an. Sobald Sie auf die Schaltfläche klicken, wird über der aktuellen Seite eine Ebene gezogen. Ziehen Sie dann mit der Maus einen Bereich nach. Sie erhalten in einer kleinen Infobox dann die exakten Maße des Elements in Pixeln.
Web Developer Toolbar
Es wird eine Weile dauern, bis Sie den vollständigen Funktionsumfang dieser Erweiterung entdeckt haben. Ihr Entwickler hat sich Mühe gegeben, Werkzeuge für alle nur erdenklichen Problemstellungen übersichtlich zusammenzufassen. Dies beginnt bei der Validierung der gerade angezeigten Seite. Mit einem Mausklick überprüfen Sie damit die Gültigkeit des Quelltextes und des Stylesheets.
Gerade in der Designphase nützlich ist das Umschalten auf verschiedene Bildschirmgrößen. Wie sieht das aktuelle Layout beispielsweise unter 800 x 600 Bildpunkten aus? Wie wirkt die Seite auf dem kleinen Display eines mobilen Geräts? Die Beantwortung solcher Fragen kostet Sie jetzt nur noch einen Mausklick. Praktisch ist ebenfalls die Option, den Cache für die aktuelle Seite zu deaktivieren, damit Sie auch tatsächlich die neueste Änderung sehen können.
Colorzilla
Dieses Programm ist ein Helfer für alle Grafiker. Neben einer einfachen Zoom-Funktion bietet es Werkzeuge für die Bestimmung von Farben und deren Werte in verschiedenen Paletten. Die Software nistet sich in der Statusleiste von Firefox ein. Haben Sie die Pipette ausgewählt, genügt ein Mausklick auf ein beliebiges Element der Seite, um sich dessen Farbwert anzusehen. Die ermittelten Werte kopieren Sie dann in die Zwischenablage, um die Werte in den Quellcode oder in einem Zeichenprogramm die ausgewählte Farbe zu übernehmen.
Zusätzlich steht Ihnen eine Palette zur Verfügung. Damit definieren Sie einen gewünschten Farbton, um dessen Farbwerte zu bestimmen. Lediglich als Link auf die Seite des Entwicklers steht ein Spezial-Tool für die Definition von Farbverläufen in CSS zur Verfügung. In einem Ausgabefenster kopieren Sie sich anschließend den Quelltext.
Pencil
Dieses Programm ist eher eine eigenständige Anwendung, die auf Firefox als Unterbau angewiesen ist. Pencil ist in der ersten Designphase eines Projekts interessant, denn damit zeichnen Sie Mockups - Skizzen der zukünftigen Seiten. Sie wählen aus den Schablonen der Bibliothek, die sich am linken Rand des Programmfensters befindet, die gewünschte Form aus und ziehen diese auf die Zeichenfläche.
Dort verändern Sie noch die Größe und nehmen optional Beschriftungen vor. Schritt für Schritt klicken Sie sich mit Pencil die Gestaltung der Seiten zusammen. Mit den vorhandenen Schablonen zeichnen Sie auch ein Flussdiagramm, um etwa die Schritte in einem Online-Shop zu visualisieren. Ihre Arbeitsergebnisse exportieren Sie als PNG, Word oder HTML. Sie dürfen auch eine individuell im Programm hinterlegte Vorlage verwenden.
Accessibility Evaluation Toolbar
Nicht nur Auftritte öffentlicher Institutionen sollten möglichst barrierefrei umgesetzt sein. Wer bei der Entwicklung der Seiten Rücksicht auf die Bedürfnisse von Menschen mit einer körperlichen Benachteiligung nimmt, genießt meist auch den Vorteil, dass Code und Inhalte sauber strukturiert sind und die Seiten valides (X)HTML zeigen.
Diese Toolbar hilft Ihnen bei der schrittweisen Überprüfung Ihrer Website auf einzelne Aspekte für die barrierefreie Gestaltung. Über die verschiedenen Optionen prüfen Sie etwa, welche Elemente der Seite als Navigation erkannt werden. Zusätzlich erhalten Sie (englischsprachige) Hinweise, wie Sie das Problem besser lösen könnten.
Yslow
Dass lange Ladezeiten einer Seite nicht nur die Geduld der Anwender strapazieren, sondern auch Nachteile beim Ranking in den Suchmaschinen verursachen können, dürfte inzwischen hinlänglich bekannt sein.
Dieses kleine Plug-in gräbt sich in die Statusleiste ein. Mit einem Mausklick ermitteln Sie die Ladezeit einer Seite und deren durchschnittlichen Durchsatz. In den Optionen der Software legen Sie optional fest, dass das Testergebnis des Testes automatisch nach dem Laden der Seite angezeigt wird. Unscheinbar, aber sehr praktisch.
SenSEO
Wie der Name bereits nahelegt, geht es bei dieser Erweiterung um die Suchmaschinenoptimierung. Das Plug-in setzt Firebug voraus und klinkt sich in dessen Oberfläche ein. Mit einem Mausklick erhalten Sie im Abschnitt Komponenten anzeigen eine kurze Zusammenfassung der Seite. Ist eine Robots.txt vorhanden? Welche Keyword-Dichte kann ermittelt werden? Wie sehen die einzelnen Überschriftenebenen aus?Besonders interessant sind die Funktionen im Register SEO-Analyse starten.
Hier tragen Sie ein Keyword ein, für das die Seite optimiert wurde oder optimiert werden soll. In Form einer übersichtlichen Tabelle erhalten Sie unmittelbar eine Bewertung zurück. Diese enthält auch leicht verständliche Tipps, wie Sie die Optimierung auf den gewünschten Begriff erreichen. Der Entwickler hat bei den Tests auf eine einfache Ampellogik gesetzt. So erkennen Sie mit einem Blick, wo noch Schwächen bestehen oder ein Test nicht bestanden wurde.