Webwork-Tools - Dem Webworker seine Werkzeugkiste

Pixlr Grabber: Abbildungen erstellen und bearbeiten

Pixlr Grabber ist eine Erweiterung für Firefox der gehobenen Klasse. Mit diesem Firefox-Addon kann man Screenshots (Bildschirmfotos) erstellen und bearbeiten.

Auf den üblichen Wegen – über Kontextmenü (Rechtsklick) oder durch den Klick auf das entsprechende Icon in der Statusleiste – kann man Pixlr Grabber aktivieren und dann eine Abbildung entweder von der ganzen Website (volle Länge und Breite), einem individuellen Ausschnitt (Select portion) oder dem sichtbaren Bereich (Visible portion) erstellen.

Anschließend öffnet sich ein neues Tab in dem mittels Flash ein Grafikprogramm nachgebildet und das Bild geladen wird:

Die Funktionen der Bildbearbeitung sind beachtlich: Ebenen, diverse Filter (z. B. Scanlinien oder verpixeln), drehen, schneiden, Tonwertkorrektur, Anpassung der Helligkeit und des Farbtons u. v. m. Ich wage zu behaupten, dass mit dieser Funktionalität die allermeisten Online-Redakteure bestens bedient sind.

Lediglich die Export- bzw. Speicherformate lassen zu wünschen übrig. Es stehen nur vier Formate zur Verfügung: .png in höchster Qualität (24 bit), .jpg (mit einstellbarer Qualität), .bmp und das eigene Format (.pxd) welches auch die Ebenen mit speichert. Somit kann man, wenn man Wert auf kleine Dateigröße legt, lediglich auf .jpg zuverlässig zurückgreifen, weil das .png in höchster Qualitätsstufe z. B. für das Screenshot aus der zweiten Abbildung 142 KByte veranschlagt.

Das ist für dein Einsatz auf einer Website zu viel des Guten. Photoshop zum Beispiel, speichert diese png-Grafik (8 Bit) mit lediglich 47 KByte ab.

Gut, durch das fotografische Element im Screenshot-Beispiel ist das png-Format hier eh nicht wirklich geeignet. Aber auch bei Abbildungen, wo sich das png-Format eignet, produziert Pixlr Grabber in etwa 50-60% größere Dateien als z. B. Phtoshop CS2 oder IrfanView.

Widerbug: Firebug in Extrabreit

Die guten, alten 4:3-Monitore werden immer seltener und es breiten sich immer mehr und mehr Monitore die ein 16:10- oder sogar 16:9-Verhältnis haben. Besitzer solcher Monitore wird es interessieren zu wissen, dass es für Firebug eine Erweiterung mit dem Namen Widerbug gibt. Diese Erweiterung optimiert Firebug für solche Breitbildschirme.

Widerbug macht nichts anderes als das er die Firebug-Fläche von unten auf die rechte Seite verschiebt. Nichts weltbewegendes, aber die Besitzer von breiten Monitoren werden dies zu schätzen wissen. Ich persönlich werde Widerbug deinstallieren, weil ich immer die Browser-Sidebar offen habe.

All-in-One Sidebar: zusätzliche Inhalte in die Firefox-Sidebar

Was mir am SeaMonkey bzw. früher an der Mozilla-Websuite immer gefallen hat, war die richtige Sidebar im Browser, wo man Teile des Browsers oder zusätzliche Inhalte in der Seitenleiste des Browsers ablegen konnte. Speziell bei größeren Monitoren ist dies eine nette Sache.

Leider besitzt Firefox standardmäßig eine lediglich kastrierte Sidebar, die entweder nur die Lesezeichen oder die Browser-Chronik (History) anzeigen kann. Die Erweiterung All-in-One Sidebar kann hier Abhilfe schaffen.

Neben der Möglichkeit Lesezeichen und die Chronik in der Sidebar auszulagern kann man nun dank der Erweiterung auch die Auflistung der Downloads, Addon-Verwaltung und die Website-Infos anzeigen lassen. Zudem kann man an der Sidebar diverse Einstellungen tätigen, wie z. B. das sie rechts und nicht links erscheinen soll.

Bilder drucken aus dem Kontextmenü heraus

Mir fällt nicht viel ein, was ich an Mozilla Firefox – im Vergleich zum Internet Explorer – kritisieren könnte. Aber eine Sache gibt es dann doch: der Kontextmenü-Eintrag: Print Picture (Bild drucken), der fehlt mir doch ab und an. Aber Firefox wäre natürlich nicht Firefox, wenn es kein Add-on gäbe, das hier Abhilfe schafft. Print Image fügt dem Kontextmenü von Firefox den gleichnamigen Eintrag hinzu und schon kann es los gehen mit dem Drucken per Rechtsklick.

CSS Usage: welche CSS-Regeln kommen zum Einsatz?

Ich habe gestern Firebug beschrieben: das Firefox-Addon, wenn es darum geht Fehler auf Websites zu finden und zu beheben. In dem gleichen Artikel habe ich auch erwähnt, dass Firebug auch Erweiterungen anzubieten hat. Eine davon mit dem Namen CSS Usage will ich jetzt kurz vorstellen.

Nach der Installation bindet sich die Erweiterung im Firebug-Menü ein. Wenn man dann auf einer Website den Knopf "CSS Usage" betätigt, dann listet die Erweiterung sämtliche CSS-Regeln auf.

Dabei werden eingesetzte Regeln mit hellgrüner Farbe ausgegeben. Regeln, die auf einer anderen Unterseite eingesetzt wurden, werden in dunkelgrüner Schriftfarbe ausgegeben und rot sind die Regeln, die gar nicht zum Einsatz kommen. Um ein aussagekräftiges Ergebnis zu bekommen, muss man daher mehrere Unterseiten ansteuern.

Anschließend kann man die nicht eingesetzten CSS-Regeln manuell löschen oder sich mit einem Klick auf "export cleaned css" eine automatisch bereinigte CSS-Datei ausliefern lassen.

Firebug: dem Webworker seine liebste Feuerwanze

Neben der Web Developer Toolbar, welche ich hier, hier und hier beschrieben habe, ist Firebug die Firefox-Erweiterung, die ich am meisten einsetze und die mir unschätzbar wertvolle Dienste erweist, wenn es darum geht eine Website unter die Lupe zu nehmen und auf "Herz und Nieren" zu prüfen.

Auch wenn den allermeisten Webworkern die Erweiterung bekannt sein durfte, werde ich sie hier dennoch aus zwei Gründen beschreiben. Es gibt noch erstaunlich viele Webdesigner, die das Firefox-Addon nicht kennen und zudem wollte ich in Zukunft einige Erweiterungen (Extensions) für Firebug vorstellen und mich dann auf diesen Artikel beziehen. weiterlesen…

GButts heißt jetzt Google Shortcuts

Die Firefox-Erweiterung mit dem Namen GButts habe ich sowohl hier im Weblog beschrieben als auch im Buch (S. 149) erwähnt. Das Add-on ermöglicht es ganz schnell die verschiedenen Google-Dienste aufzurufen.

Mittlerweile hat der Entwickler die Erweiterung in Google Shortcuts umbenannt.

Wichtiges auf einer Webseite markieren

Schickt man jemandem einen Link zu, der eine textlastige Seite beinhaltet o. ä., kann es nützlich sein relavante Passagen zu markieren – am schönsten und "traditionellsten" natürlich mit einem Textmarker…

Wer das möchte ohne den eigenen Bildschirm zu versauen, sollte den Awesome Highlighter einmal ausprobieren. Von der Website aus wechselt man zur gewünschten URL und setzt dann dort den virtuellen Textmaker ein. Zusätzlich dazu kann man die Seite auch mit Notizen in Form von Post-It-Zetteln versehen. Kennzeichnen kann man neben einfachem Text auch Bilder und Videos.

Die so gekennzeichnete Seite kann man dann als URL per E-Mail versenden. Selbstverständlich kann man den Link auch direkt zu Twitter, delicious, Facebook oder an seinen WordPress-Blog senden.

Wenn man sich bei dem Dienst registriert kann man alle gekennzeichneten Seiten auch speichern und später eine Statistik abrufen, die einem mitteilt wie oft sie angeschaut wurden.

Das Tool gibt es auch als Firefox-Addon oder als Bookmarklet einsetzbar.

Tabs schrumpfen

Tabs, viele, viele bunte Tabs… und schon hat man den Überblick verloren. Je mehr Tabs man geöffnet hat, desto kleiner werden die Dinger eh. Es ist also eine prima Möglichkeit, wenn man bestimmte Tabs – entweder spontan per Tastenkombination oder schon vorher festgelgte URLs – auf Ihr Favicon schrumpfen lassen könnte. So kann man Seiten, die man eh "immer" offen hat (z. B. Google Reader, Mail) klein lassen und hat so mehr Platz für neue Tabs.

Das ganze geht mit dem Firefox-Addon FaviconizeTab und wird in Zukunft glaube ich eines meiner am häufigsten genutzten Addons sein.

Via Der Männerblog

Screengrab: ein einfaches, aber nützliches Screenshot-Tool

Tools um Abbildungen (Screenshots) von Teilen oder von einer ganzen Webseite zu machen, gibt es viele. Eines davon ist Screengrab was als Erweiterung für Firefox daher kommt. Nach der Installation kann man einstellen ob die Screenshots im PNG- oder JPEG-Format abgespeichert und ob der Dateiname mit einem eindeutigen Zeitstempel versehen werden soll:

Die Funktionen von Screengrab kann man entweder via Kontextmenü oder über das Icon in der Statusleiste aufrufen: weiterlesen…