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 Google Chrome Store bietet für diesen Zweck eine Anzahl von AddOns, von denen im Folgenden Einige vorgestellt und zur Nutzung empfohlen werden sollen.

SEOquake

Beispielhaft für die Vielzahl an SEO-Tools, die mittlerweile als Chrome-AddOns angeboten werden, soll hier explizit auf SEOquake hingewiesen werden. Mit dessen Hilfe können sehr schnell alle wichtigen Metriken einer Webseite eingesehen sowie ein vollständiges SEO-Audit (darunter Kompatibilitätsprüfungen, Linkberichte, Keyworddichte etc. pp.)  veranlasst werden.  Mit diesem kleinen, aber feinen Tool kann man sich als Webdesigner einen schnellen Überblick über den Optimierungsgrad seines Projektes verschaffen. Und das alles völlig kostenlos.

Zur Erweiterung:  Bild anklicken

SEO META in 1 CLICK

SEO META in 1 CLICK ist ein spezielles Tool, welches alle Meta-Tags und Meta-Daten der im Chrome-Browser aktuellen Webseite sowie die wichtigsten SEO-Informationen dazu übersichtlich in einem Fenster darstellt. Weiterhin sind über ETERNAL TOOLS eine große Anzahl von speziellen Werkzeugen erreichbar, mit dessen Hilfe die Webseite im Detail nach verschiedensten Gesichtspunkten analysiert und optimiert werden kann. Dieses Tool ist ideal, um bereits in der Entwicklungsphase den SEO-Optimierungszustand der Webseite einzuschätzen.

Zur Erweiterung:  Bild anklicken

AddOns zum Thema "Bildschirmvideos" und "Webinare" 

Manchmal möchte man Remote einen Freund oder Kunden etwas am Bildschirm zeigen oder erklären. Das kann entweder in Echtzeit mit einer Applikation wie "Anydesk" oder "Teamviewer" geschehen oder Sie erstellen eine kleine Videodatei, die Sie dann - z. B. über einen Link - zukommen lassen.

Loom - Video Recorder

Mit diesem komplett kostenlosen Tool können Sie per Mausklick Bildschirmvideos im MP4-Format aufnehmen und danach sofort freigeben. Die automatisch zum Video generierte URL wird nach Beendigung der Aufzeichnung sofort in die Windows-Zwischenablage geschrieben und kann dann z. B. per EMail versendet werden. Derartige Videos können Sie z. B. zur Leadsgenerierung (E-Mail-Marketing), zu Werbe- ud Servicezwecken (Anleitungen) und zur Produktpräsentation verwenden. 

Zur Erweiterung:  Bild anklicken

Startseite  Anwendungsgebiete  Cheetah-Sitebuilder  Mockup-Studio  Digital-Magazine-Editor  OnPage-SEO  Wordpress  3D-Photo-Editor-Studio  FAQ