Die besten kostenlosen Werkzeuge für Webworker

Die besten kostenlosen Werkzeuge für Webworker

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
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, erfährst du hier (Schritte 1 und 2).

WebMatrix 3
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
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: EinstellungenErweitert). Mit dem Inspektor von Firefox kannst Du bequem einzelne Elemente untersuchen und live bearbeiten. In Chrome sieht das Ganze ähnlich aus.

Firefox 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üEntwickler-WerkzeugeBildschirmgrößen testen) und Chrome (MenüWeitere ToolsEntwicklertools) 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
Schlagworte: ,

Teilen

  1. Avatar

    Marko sagte am

    Sehr interessant 🙂

    Antworten
  2. Avatar

    Karsten Weng sagte am

    Hier sind noch ein paar weitere nützliche kostenlose Online-Tools:

    > Gradient Generator: http://gradient.quasi.ink/
    > Simpler Texteditor: https://www.sublimetext.com/
    > Googles Material Design: https://www.materialui.co/
    > CSS Foto-Filter: http://www.cssfilters.co/
    > Code-Vergleich: http://www.quickdiff.com/
    > Links mit Sound: http://loudlinks.rocks/
    > Mediaqueries Beispiele: http://mediaqueri.es/12/
    > Skizzieren im Browser: https://www.draw.io

    Antworten

Sie können erst kommentieren, wenn Sie unseren Datenschutzbestimmungen und den Cookies zugestimmt haben. Aus Datenschutzrechtlichen Gründen dürfen wir andernfalls keine personenbezogenen Daten von Ihnen aufzeichnen.

Klicken Sie dazu einfach unten im Browser Fenster auf den blauen Button Akzeptieren. Nach dem Neuladen der Seite können Sie Ihr Kommentar schreiben.

 

Diese Webseite verwendet Cookies, um die Nutzung der Seite zu verbessern, den Erfolg von Werbemaßnahmen zu messen und interessengerechte Werbung anzuzeigen. Durch die Nutzung dieser Seite erklären Sie sich damit einverstanden. Informationen