Webdesigner und Website-Betreiber brauchen verlässliche Werkzeuge. Wir stellen Dir 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: 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 Manager → Show Plugin Manager). Für Mac OS X gibt es mit CotEditor einen ähnlichen Editor mit weniger Funktionen.
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 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, erfährst du hier (Schritte 1 und 2).
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ähle einfach im äußeren Kreis die Grundfarbe und probiere anschließend Variationen mit weiteren Farben. Im inneren Bereich des Kreises kannst Du Helligkeit und Kontraste bestimmen. Auf der rechten Seite werden die Ergebnisse in Echtzeit angezeigt. Mit einem Klick auf eine Farbe erscheinen die die dazugehörigen Farbcodes.
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 kannst Du Websites untersuchen, bearbeiten und debuggen. Um die Funktion in Firefox und Chrome zu aktivieren, drücke einfach die F12-Taste während Du Dich auf einer Website befindest (bei Safari: Einstellungen → Erweitert). Mit dem Inspektor von Firefox kannst Du bequem einzelne Elemente untersuchen und live bearbeiten. In Chrome sieht das Ganze ähnlich aus.
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ü → Entwickler-Werkzeuge → Bildschirmgrößen testen) und Chrome (Menü → Weitere Tools → Entwicklertools) sind vergleichbar, wobei Chrome bereits eine Auswahl beliebter Modelle bereithält. Dafür lassen sich bei Firefox individuelle Vorlagen speichern.
Entwicklertools von Chrome: Darstellung des STRATO Blogs auf einem iPhone 6