Web

Browser-Add-ons

Zehn Mal besser surfen für Entwickler

12.10.2014
Von  und
Frank-Michael Schlede arbeitet seit den achtziger Jahren in der IT und ist seit 1990 als Trainer und Fachjournalist tätig. Nach unterschiedlichen Tätigkeiten als Redakteur und Chefredakteur in verschiedenen Verlagen arbeitet er seit Ende 2009 als freier IT-Journalist für verschiedene Online- und Print-Publikationen. Er lebt und arbeitet in Pfaffenhofen an der Ilm.
Thomas Bär, der seit Ende der neunziger Jahre in der IT tätig ist, bringt weit reichende Erfahrungen bei der Einführung und Umsetzung von IT-Prozessen im Gesundheitswesen mit. Dieses in der Praxis gewonnene Wissen hat er seit Anfang 2000 in zahlreichen Publikationen als Fachjournalist in einer großen Zahl von Artikeln umgesetzt. Er lebt und arbeitet in Günzburg.
Browser haben sich mit den Jahren zu einer eigenen Software-Plattform gemausert. Glücklicherweise gibt es einige Add-ons, die dem Web-Developer das Leben erleichtern.

Wer erinnert sich noch an den "Browserkrieg" zwischen Microsoft und Netscape in den späten 1990er Jahren? Als Folge dessen sind Browser heutzutage ein kostenloses Produkt. Netscape und Microsoft hatten ihren Programmen in immer kürzeren Zyklen immer mehr Funktionalitäten einverleibt, bis am Ende das eine Schwergewicht von Microsoft als Sieger überlebte.

Der Mozilla Firefox startete im Gegensatz dazu als Leichtgewicht, ohne den Ballast von tausenden Funktionen, und zeigte mit der gezielten Erweiterbarkeit über so genannte Add-ons dass sich Menschen ihren individuellen Browser selbst zusammenstellen können und auch möchten.

Heute bieten auch Google Chrome, der Internet Explorer und der Opera-Browser ein ähnliches Konzept hinsichtlich der Erweiterbarkeit. Auch Web-Designer profitieren von dieser Entwicklung und können sich mithilfe von Add-ons ihre Browser so anpassen, wie sie es benötigen. Wir stellen Ihnen die wichtigsten Erweiterungen hier kurz vor.

Platz 10: ColorZilla

Viele Anwender kennen die praktischen Funktionen von Bildbearbeitungsprogrammen wie Photoshop oder Paintshop Pro, wenn es um die exakte Ermittlung eines Farbwerts geht. Innerhalb von Microsoft Office steht die Pipette zur Feststellung des Farbwerts ebenfalls zur Verfügung. ColorZilla erfasst, wie die bereits genannten Programme, den Farbwert eines jeden Pixels auf einer Webseite im Firefox beziehungsweise Google Chrome. Zieht der Webentwickler die Pipette auf die gewünschte Fläche, so wird der verwendete Farbcode in den gebräuchlichen Paletten wie RGB oder HSV ausgegeben.

Weitere Funktionen, wie beispielsweise die integrierte Lupe, Color-Picker und der Palette Viewer werten dieses kostenlose Add-on noch einmal auf.

Fazit: ColorZilla für Firefox und Chrome ist ein unerlässliches Hilfsmittel bei der Prüfung und Festlegung von Farbtönen bei der Website-Gestaltung.

Platz 9: ColorPick Eyedropper

Etwas weniger verbreitet, aber von der Funktionalität ähnlich dem ColorZilla ist der ColorPick Eyedropper für den Chrome-Browser. Dieses Add-on ermittelt ebenfalls den Farbwert für einen gewählten Pixel. Je nach Einstellungen des Webdesigners in den Optionen findet das kleine Programm ebenfalls die HSL-Werte heraus und überträgt die Ergebnisse automatisch in die Zwischenablage.

ColorPick Eyedropper unterstützt den Web-Designer bei der Feststellung der Farbwerte auf Web-Seiten.
ColorPick Eyedropper unterstützt den Web-Designer bei der Feststellung der Farbwerte auf Web-Seiten.
Foto: Frank-Michael Schlede / Thomas Bär

Fazit: Der ColorPick Eyedropper ermittelt die Farbwerte - nicht mehr und nicht weniger. Somit erledigt das nicht einmal 900 KByte kleine Add-on exakt das, was es tun soll.

Platz 8: Window Resizer für Chrome

Entwicklungen wie HTML5 oder zuvor CSS sorgen letztendlich dafür, dass sich Entwickler immer weniger Gedanken darum machen müssen, wie eine Website auf verschiedenen Geräten wohl aussehen mag. Browser passen die Optik auf Tablets, Smartphones oder klassischen Displays automatisch an ("Responsive Design"). Dennoch möchten Web-Designer die Auswirkungen ihres Designs auf möglicherweise kleineren Anzeigen einmal selbst in Augenschein nehmen. Der Window Resizer von Ionut Botzian für Chrome erweitert den Google Browser um eine Schaltfläche, die den schnellen Wechsel erlaubt, ohne selbst das Fenster in den Dimensionen anpassen zu müssen.

Wenn gewünscht, kann der Entwickler im Window Resizer eigene Formate und Hotkeys speichern.
Wenn gewünscht, kann der Entwickler im Window Resizer eigene Formate und Hotkeys speichern.
Foto: Frank-Michael Schlede / Thomas Bär

Alle klassischen Größen wie 320x480, 480x800, 640x960, 768x1280, 1024x768, 1366x768,1280x800, 1366x768, 1280x1024 und 1680x1050 liefert das kostenlose Add-on von Haus aus mit. Eigene Dimensionseinstellungen mit verschiedenen Piktogrammen, Ausrichtungen auf dem Bildschirm, unterschiedliche Hotkeys und Im- und Export der Einstellungen bietet das kleine Programm ebenfalls.

Fazit: Einfacher geht es wirklich nicht. Ein Mausklick und das Chrome-Fenster wird in der gewünschten Auflösung dargestellt.

Platz 7: Screen Ruler für Chrome

Wie groß ist ein Element auf dem Bildschirm? Um diese Frage auch ohne mit dem Zentimetermaß am Monitor zu hantieren, beantworten zu können, hat Chris Thelwell ein kleines Add-on für Chrome entwickelt. "Ruul" bietet verschiedene virtuelle Zollstöcke in Pixel, Inch und Zentimeter und erlaubt deren freie Positionierung auf dem Bildschirm. Die ermittelten Dimensionswerte kann der Webentwickler auch manuell eintippen und sieht die entsprechende Veränderung auf dem Monitor.

Die Größe von Bildschirmelementen ermittelt ein Web-Designer mit Chrome mit Ruul – dem Screen Ruler.
Die Größe von Bildschirmelementen ermittelt ein Web-Designer mit Chrome mit Ruul – dem Screen Ruler.
Foto: Frank-Michael Schlede / Thomas Bär

Fazit: Ein äußerst praktischer kleiner Helfer. Das Add-on macht nicht viel Aufsehen, sondern erledigt ganz schlicht die gestellte Aufgabe.

Platz 6: FireShot

Zumindest die jüngeren Versionen von Microsoft Windows verfügen über eine anständige Möglichkeit mit dem Snipping Tool Bildschirmausschnitte als Screenshot auszuschneiden. Andere Betriebssysteme bieten ähnliche Fähigkeiten.

Wer ganze Web-Seiten speichern möchte oder auch nur Ausschnitte und diese direkt in Dateien verwandeln und mit Kommentaren versehen möchte, braucht ein besseres Tool. FireShot Webpage Screenshots ist eine kostenpflichtige Lösung für den Internet Explorer, Chrome, Opera und den Firefox. Mit dem "Webpage Screenshot in Firefox" haben Entwickler eine schnelle und unkomplizierte Lösung um Screenshots

  • hochzuladen,

  • als PDF, PNG, GIF, JPEG, BMP zu speichern,

  • zu drucken,

  • in der Zwischenablage zu speichern und

  • per E-Mail zu verschicken.

Mit FireShot sind Web-Designer in der Lage, beliebige Teile einer Website auszuschneiden.
Mit FireShot sind Web-Designer in der Lage, beliebige Teile einer Website auszuschneiden.
Foto: Frank-Michael Schlede / Thomas Bär

Fazit: Webpage Screenshot ist äußerst leistungsfähig und sehr einfach in der Bedienung. Im Gegensatz zu vielen anderen Add-Ons ist das Programm auch in einer kostenpflichtigen Pro-Version erhältlich. In der 30-tägigen Trial-Phase können Entwickler viele Features der Lösung ohne Einschränkungen testen.

Die Pro-Version erlaubt noch einige weitere Gimmicks, wie beispielsweise die Microsoft OneNote-Unterstützung oder die Erstellung von mehrseitigen PDF-Dokumenten. Wer Ideen für eigene Konzepte sammeln und archivieren möchte, für den ist Webpage Screenshot die passende Software.