201005Apr

PixelZoomer: Firefox-Erweiterung für Webentwickler

Heute will ich mein Projekt vorstellen, an dem ich in den letzten Monaten gearbeitet habe. Es handelt sich um eine Firefox-Erweiterung für Webentwickler, mit der sich durch eine Zoom-Funktion (bis 3200% Vergrößerung) pixelgenau Abstände messen und Farbwerte analysieren lassen. Die Extension nennt sich PixelZoomer und kann ab sofort heruntergeladen und getestet werden. Die Erweiterung soll den Schritt über ein Bildbearbeitungsprogramm überflüssig machen, so dass bei der Entwicklung von Web-Projekten direkt im Browser Größen und Abstände analysiert werden können. PixelZoomer nutzt ein neues CSS-Attribut, um das vergrößerte Bild darzustellen. Dadurch werden die Pixel scharf und ohne Anti-Aliasing dargestellt.

PixelZoomer

Die Idee hinter PixelZoomer entstand bei der Arbeit an einer filigranen Website. Viele Bereiche mussten häufig angepasst werden und so wuchs die Notwendigkeit an einem Pixel-Werkzeug. Ich wollte eine Firefox-Erweiterung, die den Komfort von Betrachtungsfunktionen bietet, wie man sie in Bildbearbeitungsprogrammen finden kann. Daher war die eigentliche Intention, eine Extension für Webentwickler zu schaffen, die auf echten Pixeln basierte. Während der Arbeit am Code kam der Gedanke auf, eine Pipette für das Aufnehmen von Farben zu integrieren. Mit den Canvas-Möglichkeiten von Firefox hat es Spaß gemacht, das Farbwerkzeug zu implementieren.
Die Erweiterung ist auf der offiziellen Mozilla-Seite momentan noch als experimentelles Add-on gekennzeichnet. Bis zum finalen Status sind daher alle Benutzer zum Testen eingeladen.

PixelZoomer nutzt verschiedene Methoden, um einen Screenshot der geöffneten Website zu erstellen. Die gewünschte Option kann in den Einstellungen aktiviert werden. Zur Auswahl stehen die Möglichkeiten "Java" und "Canvas". Die Java-Methode setzt die aktivierte Laufzeitumgebung voraus und benötigt etwas länger als die Canvas-Technik. Der Vorteil des Java-Renderings besteht in der exakten Pixel- und Farbwiedergabe. Wird die Canvas-Methode verwendet, können unter Umständen halbtransparente Pixel (Subpixel) entstehen, die in der gewöhnlichen Browser-Ansicht nicht vorhanden sind. Die Differenzen sind vom genutzten Betriebssystem abhängig und treten nur vereinzelt auf. Da der eigentliche Zweck von PixelZoomer jedoch in der Analyse von Pixel-Abständen liegt, empfiehlt sich die Verwendung der Java-Methode.

In einer kleinen Video-Demonstration habe ich versucht, die grundlegenden Funktionen von PixelZoomer zu zeigen.

Das Add-on kann also durch ein Symbol in der Navigations-Symbolleiste, per Kontextmenü oder durch die Statusleiste gestartet werden. PixelZoomer erstellt beim Klick einen Screenshot des sichtbaren Bereichs der geöffneten Website. Dadurch lässt sich schon vor dem Starten der Extension bestimmen, welche Fläche analysiert werden soll.

Die Erweiterung wurde auf Windows und Mac OS X optimiert. Mögliche Fehler können direkt an mich geschickt werden. Ich habe schon viele Ideen für weitere Versionen, die ich später einbauen will. Zuvor wollte ich sehen, wie die Extension bei der Community ankommt. Ich hoffe, sie kann Euch bei der Arbeit an Web-Projekten behilflich sein. Viel Spaß damit!

RSS-Feed abonnieren Bookmark bei Del.icio.us

Kommentare

Alican schrieb am 05.04.2010 #1

Großartige Arbeit. Vielen Dank Matthias :D

Tim schrieb am 05.04.2010 #2

Sehr hilfreich! Danke!

mista.toast schrieb am 05.04.2010 #3

gefällt mir wahnsinnig gut!

klickreflex schrieb am 07.04.2010 #4

Hoppla, habe meinen "Kommentar" versehentlich per Kontaktformular verschickt. Jedenfalls vielen Dank, PixelZoomer ist mir sehr willkommen und ersetzt bereits MeasureIt und ColorZilla :)

Ingo schrieb am 09.04.2010 #5

Sehr schön! Eine Option, wo man überall Pixelzoomer angeboten bekommt (ToolsMenu, Rechtsklick, Icon rechts, Icon oben..) wäre das I-Tüpfelchen. Mich störts zB im Kontektmenü ;-)

Matthias schrieb am 10.04.2010 #6

Danke für die bisherigen Meinungen und das E-Mail-Feedback!


@Ingo:
Alles klar. Das wird dann in Version 1.1 implementiert! :-)

Lusuer schrieb am 10.04.2010 #7

Bitte die' Hand' mit in den Toolbar integrieren, so dass man auch mit der linken Maustaste das eigentliche Bild verschieben kann. Danke!

shortee schrieb am 13.04.2010 #8

sehr großartig!
vorschlag: doppelklick auf die lupe -> 100%
vielen dank :)