Die besten kostenlosen Werkzeuge für Webworker

Die besten kostenlosen Werkzeuge für Webworker

Hosting-Angebot ansehen

Sechs Top-Programme für Webdesigner und Website-Betreiber

Webdesigner und Website-Betreiber brauchen verlässliche Werkzeuge. Wir stellen Ihnen sechs Top-Programme vor – für mehr Effizienz und Spaß bei der Arbeit im Web.


1. Datentransport: FileZilla

Der Klassiker unter den FTP-Clients heißt FileZilla. Mit der freien Software lassen sich bequem Dateien zwischen Computer und Webspace transportieren. FileZilla gibt es für alle gängigen Betriebssysteme. Wie die Verbindung zum Webspace eines STRATO Hosting-Pakets aufgebaut wird, beschreiben wir hier.

Filezilla
FileZilla: Im oberen Bereich ist der Verlauf des Datentransfers zu sehen, darunter links werden die lokalen Dateien und rechts der Webspace angezeigt.

2. Text-Editor: Notepad++

Notepad++ für Windows hat alles, was ein guter Text-Editor haben muss: Syntaxhervorhebung für die wichtigsten Sprachen, eine hohe Konfigurierbarkeit und viele praktische Features. Das Kontextmenü kann individualisiert werden, zusätzliche Funktionen lassen sich über den integrierten Plugin-Manager aktivieren. Tipp: Mit dem Plugin Autosave (2) werden offene Dateien automatisch gespeichert (Erweiterungen Plugin ManagerShow Plugin Manager). Für Mac OS X gibt es mit CotEditor einen ähnlichen Editor mit weniger Funktionen.

Notepad
Notepad++: Mit der Syntaxhervorhebung lassen sich Strukturen schnell erkennen. Die Miniaturansicht rechts sorgt für einen besseren Überblick.

3. Bildbearbeitung: Gimp

Es gibt viele kostenlose Bildbearbeitungsprogramme, doch kaum eins hat einen solchen Funktionsumfang: Werkzeuge, Filter, Ebenen, Masken, Plugins und vieles mehr. Mit der Einführung des Einzelfenster-Modus ist Gimp zudem deutlich nutzerfreundlicher geworden. Trotzdem haben Einsteiger eine steile Lernkurve vor sich. Darum gehen wir in einem anderen Beitrag auf die Grundlagen der Bildbearbeitung mit Gimp ein. Das Programm gibt es für Windows, Mac OS X und Linux-Betriebssysteme.

Gimp
Gimp im Einzelfenster-Modus: Werkzeuge (links), Leinwand mit Bild (Mitte), Ebenen (rechts)

4. Werkzeugkasten: WebMatrix 3

Zum Testen von Code, Plugins oder Aktualisierungen ist eine separate Umgebung hilfreich. Mit WebMatrix 3 lassen sich bekannte Anwendungen wie WordPress in wenigen Schritten lokal installieren. Doch damit nicht genug: Das Programm ist ein kompletter Werkzeugkasten zum Erstellen von Websites. Der integrierte Code-Editor schlägt Befehle vor, erkennt Syntaxfehler und beherrscht mehrere Frameworks und Sprachen. Praktisch sind die Website-Vorlagen sowie die Möglichkeit, Änderungen direkt im Browser anzuschauen.

WebMatrix 3 läuft allerdings nur unter Windows. Die Alternative XAMPP gibt es auch für Mac OS X und Linux. Das Tool hat zwar keinen Editor an Bord, ermöglicht aber das einfache Einrichten eines Apache Webservers mit Datenbank und den Skriptsprachen Perl und PHP. Wie Du WordPress mit XAMPP manuell installierst, erfahren Sie hier (Schritte 1 und 2).

Webmatrix
WebMatrix 3: Editor und virtuelle Server-Umgebung in einem

5. Farbwahl: Paletton

Beim Webdesign kommt es auf die richtige Farbkombination an. Das Online-Tool Paletton (früher: Color Scheme Designer) hilft bei der Suche nach passenden Farben. Auf der linken Seite befindet sich ein RGB-Farbkreis. Wählen Sie einfach im äußeren Kreis die Grundfarbe und probieren Sie anschließend Variationen mit weiteren Farben. Im inneren Bereich des Kreises können Sie Helligkeit und Kontraste bestimmen. Auf der rechten Seite werden die Ergebnisse in Echtzeit angezeigt. Mit einem Klick auf eine Farbe erscheinen die dazugehörigen Farbcodes.

Paletton
Paletton: Links wählst Du eine Farbe, rechts erhältst Du die aktuelle Farbkombination.

6. Entwickler-Werkzeuge der Browser

Mit den Entwickler-Werkzeugen der gängigen Browser können Sie Websites untersuchen, bearbeiten und debuggen. Um die Funktion in Firefox und Chrome zu aktivieren, drücken Sie einfach die F12-Taste, während Sie sich auf einer Website befinden (bei Safari: EinstellungenErweitert). Mit dem Inspektor von Firefox können Sie bequem einzelne Elemente untersuchen und live bearbeiten. In Chrome sieht das Ganze ähnlich aus.

FF Inspektor
Der Inspektor von Firefox ist ein mächtiges Tool zur Analyse von Websites.

Außerdem können wir mit den Entwickler-Werkzeugen testen, wie unsere Website auf Smartphones und Tablets aussieht. Die Möglichkeiten von Firefox (MenüExtrasWeb-EntwicklerBildschirmgröße testen oder Shortcut Strg+Umschalttaste+M) und Chrome (MenüWeitere ToolsEntwicklertools oder Shortcut Strg+Umschalttaste+I) sind vergleichbar, wobei Chrome bereits eine Auswahl beliebter Modelle bereithält. Dafür lassen sich bei Firefox individuelle Vorlagen speichern.

Chrome Entwicklertools
Entwicklertools von Chrome: Darstellung des STRATO Blogs auf einem iPhone 6

Autor: Christian Lingnau

  • Geprüfte Sicherheit

    Geprüfte Sicherheit
  • Service-Sieger

    Service-Sieger
  • Testsieger Webhosting

    Testsieger Webhosting
  • 24/7-Support (optional)

    24/7-Support
  • Deutscher Datenschutz

    Deutscher Datenschutz