Nützliche Ressourcen
Chrome-Browser AddOns für Webentwickler
AddOns zu den Themen "Design", "Bilder" und "Farbgestaltung"
Der Chrome Webstore enthält Ressourcen in Form einer Vielzahl für den Webdesigner interessanter Browser-Erweiterungen, von denen einige besonders Nützliche hier kurz vorgestellt werden sollen. Das betrifft insbesondere AddOns hinsichtlich Bilder und Farbgestaltung sowie Webseitendesign.
ColorPick Eyedropper
Der ColorPick Eyedropper ist ein geniales Tool für Webentwickler, welches eine präzise Auswahl der Farbwerte eines Bildausschnitts auf dem Monitor durch eine einzigartige gezoomte Vorschau ermöglicht. Die Bedienung erschließt sich einem intuitiv. Zurückgegeben werden die HEX RGB- und die HEX HSL-Farbwerte. Sie können diese Werte über die Zwischenablage sofort in ihre aktuelle Builderall-Farbpalette übernehmen. Außerdem werden im Farbverlauf alle während einer Sitzung ausgewählten Farben gespeichert.
Zur Erweiterung: Bild anklicken
Image Downloader
Wenn Sie Bilder von einer Webseite in großen Mengen herunterladen müssen, können Sie das mit dieser Erweiterung ganz bequem tun. Sie müssen dazu nur den Chrome-Tab mit einer entsprechenden Webseite fokussieren und dann in der Browser-Erweiterungsleiste den Image-Downloader starten. In einer scrollbaren Listen werden Ihnen dann alle Bilder, die die Webseite enthält, angezeigt. Jetzt können Sie die Bilder markieren, die Sie gerne herunterladsen möchten. Anschließend brauchen Sie nur noch die Schaltfläche "Download" klicken, um den Downloadvorgang zu beginnen. Beachten Sie aber bei der Nutzung der heruntergeladenen Bilder für eigene Webprojekte eventuelle Urheberrechte.
Zur Erweiterung: Bild anklicken
Code Cola CSS-Tester
Mit diesem Tool haben Sie zur Laufzeit Zugriff auf die CSS-Dateien der im Browser angezeigten Webseite. Sie können dort mit der Maus einzelne Elemente wie Texte oder Bilder auswählen, deren Eigenschaften dann im Fenster von "Code Cola" angezeigt werden - und die Sie dort auch nach Belieben ändern können. Die Änderungen werden dabei sofort auf der Webseite sichtbar. Sie können auf diese Weise verschiedene Designvarianten visuell ausprobieren ohne dass Sie sie jeweils explizit in Cheetah codieren zu müssen. Das können Sie aber nachträglich tun, in dem Sie die entsprechenden Parameter notieren und anschließend im Sitebuilder umsetzen.
Zur Erweiterung: Bild anklicken
Chrome Designer Tools
Ist dieses Tool aktiviert, dann wird im Chrome-Browser links und oben ein Lineal angezeigt. Berührt man nun mit der Maus einzelne Bestandteile einer Webseite (z. B. ein Bild oder ein Textblock), dann wird dieser hervorgehoben und die horizontale und vertikale Ausdehnung in Pixel angezeigt. Auf diese Weise erhalten Sie Informationen, um beispielsweise Positionen und Abstände auf Webseiten zu messen. Mit Hilfe der Lineale können Sie weiterhin Hilfslinien hinzufügen, Anzeigeelemente auswählen und vergleichen sowie deren Versatz, Abstand und Größe anzeigen. Wenn Sie mit Chrome und Builderall arbeiten, sollte dieses Tool immer verfügbar sein...
Zur Erweiterung: Bild anklicken
Dimensions - Horizontale und vertikale Abstände messen
Diese nützliche Chrome-Erweiterung misst die Abmessungen von Ihrem Mauszeiger nach oben/unten und links/rechts, bis sie auf irgendeine Kontur (Rand) trifft. Wenn Sie also Abstände zwischen Elementen auf einer Website messen wollen, dann gelingt Ihnen das mit diesem Addon perfekt. Beachten Sie aber, dass es bei Bildern zu Abweichungen kommen kann, da sich dort die Farben von Pixel zu Pixel oftmals stark verändern.
Zur Erweiterung: Bild anklicken
WhatFont - Schriftarten auf Webseiten erkunden
Mit dieser Chrome-Erweiterung lässt sich der Name, die Fontfamilie, die Farbe, der Stil, die Größe und die Position der Schriftart bestimmen, die man gerade auf einer Webseite mit dem Mauszeiger berührt. Das ist immer dann sinnvoll, wenn man auf einer fremden Webseite eine Schriftart erspäht, die einem gefällt und man deshalb selbst verwenden möchte.
Zur Erweiterung: Bild anklicken
AddOns zum Thema "Suchmaschinenoptimierung"
Es ist eine gute Angewohnheit bei der Entwicklung von Webseiten bereits im Designprozess das Thema SEO im Auge zu behalten. Der