6 wesentliche Firefox Add-Ons für Designer
Als Webdesigner (und technologisch versierter Benutzer des Internets) gibt es keine Entschuldigung dafür, dass Sie Firefox nicht als Ihren primären Webbrowser verwenden. Wenn du Firefox noch nicht benutzt, musst du gehen und herunterladen es gerade jetzt. Firefox bietet nicht nur ein erstklassiges Internetsurferlebnis, sondern bietet auch eine endlose Menge an Funktionen, die Sie in keinem anderen Internetbrowser finden.
Da Drittanbieter Add-ons für Firefox entwickeln können, indem Sie die besten verfügbaren Add-Ons herunterladen, können Sie Firefox in ein Tool verwandeln, das Ihre Produktivität dramatisch erhöht und Ihnen eine Menge Zeit spart. Da es so viele verschiedene Add-ons zum Download gibt, kann es ein wenig überwältigend sein, herauszufinden, welche Sie verwenden sollten.
Deshalb habe ich beschlossen, die ganze Arbeit für Sie zu erledigen und eine Liste der sechs besten Firefox Add-ons für Webdesigner zusammenzustellen.
Web-Entwickler
Obwohl es heißt Web-Entwickler Dieses Firefox-Add-on ist absolut unschätzbar für Webdesigner. Wenn Sie nur ein Firefox-Add-On herunterladen und installieren würden, würde ich es Ihnen empfehlen. Der Grund ist, dass dieses Add-on eine Vielzahl verschiedener nützlicher Funktionen bietet und als das Schweizer Taschenmesser von Firefox-Add-Ons klassifiziert werden kann.
Das erste Feature dieses Add-ons, das Designer nützlich finden, ist das CSS-Menü . Zu den Funktionen dieses Menüs gehören die Möglichkeit , Stile zu deaktivieren, CSS nach Medientyp anzuzeigen, CSS anzuzeigen , Stilinformationen anzuzeigen, ein benutzerdefiniertes Stylesheet hinzuzufügen oder CSS direkt zu bearbeiten .
Das nächste für Designer interessante Feature ist das Bildmenü . Zusätzlich zum Anzeigen von ALT-Attributen, Bilddimensionen, Bilddateigrößen und Bildpfaden können Sie Bilder deaktivieren, beschädigte Bilder finden, Bilder umranden, Bilder durch ALT-Attribute ersetzen und einige zusätzliche Funktionen.
Obwohl ich mehrere Seiten für alle Funktionen, die dieses Add-on bietet, verwenden kann, möchte ich nur einige andere Funktionen erwähnen, die Webdesigner besonders nützlich finden. Dazu gehört die Möglichkeit, verschiedene Elemente zu skizzieren (von Frames bis zu Blocklevel-Elementen), HTML zu bearbeiten und versteckte Elemente anzuzeigen .
Feuerwanze
Während Web Developer das erste Add-On ist, würde ich jedem Designer empfehlen, Feuerwanze steht an zweiter Stelle in Bezug auf die Nützlichkeit für Designer.
Mit Firebug haben Sie sofort die Möglichkeit, jede Webseite zu bearbeiten, zu debuggen oder zu überwachen . Mit Firebug haben Sie die volle Kontrolle über CSS, HTML und JavaScript auf jeder von Ihnen gewählten Seite. Und das Beste daran ist, dass jede Änderung, die Sie vornehmen, direkt und live erfolgt . So können Sie schnell verschiedene Änderungen ausprobieren und die Ergebnisse dieser Änderungen sofort sehen.
Wie die meisten der besten Add-Ons für Firefox, Firebug geht über seine grundlegende Funktionalität hinaus und bietet eine Vielzahl von Optionen, die es jedem Benutzer leicht machen, ihre Verwendung dieses Add-Ons vollständig anzupassen. Zu den zusätzlichen Funktionen und Optionen von Firebug gehören Tastenkürzel, die Möglichkeit, zu steuern, wie und wo der Firebug-Bearbeitungsbereich angezeigt wird, visuelle Anleitungen zum Bearbeiten von CSS, Analyse der Netzwerkaktivität und anpassbare Protokollierung für JavaScript .
Colorzilla
Als Webdesigner wissen Sie nie, wann Sie beim Surfen im Internet Inspiration finden werden. Zum Beispiel können Sie eine Website betrachten und stoßen auf eine Farbe, die Sie wirklich mögen.
Wenn Sie schnell und effizient den genauen HSV - und RGB - Wert für dieses Werkzeug herausfinden möchten, sollten Sie den ColorZilla Erweiterung.
Das ColorZilla-Add-on verfügt über eine Online-Pipette , mit der Sie ganz einfach den genauen Wert einer bestimmten Farbe bestimmen können. Neben der Online-Pipette bietet ColorZilla einige zusätzliche Funktionen, die für die meisten Webdesigner nützlich sind, wie zum Beispiel einen DOM-Farbanalysator und einen Online-Paletten-Viewer . Der DOM-Farbanalysator ermöglicht es Ihnen, Elemente auf der Seite zu finden, die einer bestimmten Farbe entsprechen, und die CSS-Regeln zu ermitteln, die eine bestimmte Farbe angeben, während Sie in der Online-Palettenanzeige Farbpaletten mit Lesezeichen versehen und freigeben können.
Feuerschuss
Obwohl Ihr Betriebssystem zweifellos über eine integrierte Bildschirmaufnahmefunktion verfügt, bedeutet dies nicht, dass die Standardbildschirmaufnahme alle Funktionen aufweist, die Sie möglicherweise benötigen.
Kann beispielsweise die Standardbildschirmanzeige Ihres Betriebssystems Teile einer Webseite erfassen, die sich außerhalb des Browserfensters befinden?
In den meisten Fällen wird die Antwort auf diese Frage nein sein. Glücklicherweise gibt es ein Firefox-Add-on, das diese Funktion zusammen mit einer Vielzahl anderer nützlicher Funktionen bietet.
FireShot ist ein erweitertes Screen Capture Add-On für Firefox . Zusätzlich zu der Möglichkeit, eine ganze Webseite zu erfassen (auch wenn Teile der Webseite aufgrund der Einschränkungen Ihres Browserfensters nicht sichtbar sind), können Sie mit FireShot Anmerkungen direkt in Ihre Webseite einfügen Screenshots.
Feuerschuss gibt Ihnen mehrere Möglichkeiten, Ihre Screenshots zu bearbeiten. Sie können nicht nur in einer Vielzahl von Dateiformaten gespeichert werden, sondern sie können auch auf Ihrem Computer gespeichert, per E-Mail an andere gesendet oder auf dem kostenlosen FireShot-Hosting-Server gespeichert werden. Aufgrund seiner breiten Palette an Funktionen hat dieses Add-on über einhundertfünfzigtausend aktive Benutzer angezogen und sich als unschätzbar für Webdesigner und andere Internetprofis erwiesen.
CSS-Validierer / HTML-Validierer
Als Designer möchten Sie sicherstellen, dass all Ihre harte Arbeit von den Besuchern leicht erreicht und ihnen richtig angezeigt werden kann. Eine der einfachsten Möglichkeiten, um sicherzustellen, dass diese beiden Aufgaben erfüllt werden, ist die Validierung Ihres gesamten Codes .
Obwohl es sich um zwei separate Add-Ons handelt, sollten sowohl der CSS-Validator als auch der HTML-Validator im Browser eines Web-Designers installiert sein. Sobald die Add-Ons installiert sind, CSS-Validierung kann über das Menü Extras aufgerufen werden, während auf den HTML-Validator über die Firefox-Statusleiste zugegriffen werden kann.
Jedes Add-On validiert den Code anhand der entsprechenden W3C-Standards . Während der CSS-Validator lediglich eine Standardvalidierung des Codes durchführt, bietet der HTML-Validator einige zusätzliche Funktionen.
Wenn Sie den HTML-Validator verwenden, können Sie die Validierung direkt im Browser durchführen (wobei Fehler als Statusleisten-Symbol angezeigt werden), die Quelle mit Erläuterungen zu Fehlern nach der Validierung oder eine Validierung mit vorgeschlagenen Lösungen für Fehler anzeigen.
Browser Fenster Resizer
Als jemand, der Designs für das Internet erstellt, ist eines der frustrierendsten Probleme, mit denen Sie zweifellos konfrontiert sind, Designs zu erstellen, die auf einer Vielzahl von Bildschirmgrößen funktionieren.
Da Sie nicht wissen, ob ein Besucher Ihre Arbeiten mit 640 × 480, 800 × 600, 1024 × 768, 1280 × 1024 oder 1600 × 1200 ansehen wird, liegt es in Ihrer Verantwortung, Designs zu erstellen, die mit all diesen Auflösungen arbeiten .
Während es verschiedene Möglichkeiten gibt, deine Arbeit mit unterschiedlichen Auflösungen zu betrachten, habe ich den Browser gefunden Fenster Resizer Add-on ist der effizienteste Weg, um diese Aufgabe zu erfüllen. Nachdem Sie dieses Add-On heruntergeladen und installiert haben, können Sie das Browserfenster sofort auf eine der oben aufgelisteten Standardauflösungsgrößen skalieren.
So können Sie sehen, ob Ihr Design für Besucher, die nicht die gleiche Auflösung wie Sie verwenden, gut aussieht. Das Beste an diesem Add-On ist, dass Sie, wenn Sie es in Verbindung mit anderen Add-Ons in dieser Liste verwenden (speziell Firebug), wenn Sie sehen, dass etwas nicht richtig angezeigt wird, sofort Anpassungen an Ihrem Code vornehmen können und sehen, ob das das Problem behebt, ohne das aktuelle Browserfenster zu verlassen.
Kennen Sie andere gute Erweiterungen für Designer? Zögern Sie nicht, uns zu kommentieren und uns Feedback zu geben.