Willkommen im STRATO Blog. Hier gibt es News und Tipps rund ums Hosting.

 

Menu

Veröffentlicht am: 29. Januar 2016

Werkzeug

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

Der Autor:

Autor: Christian Lingnau

Ich heiße Christian Lingnau und bin freier Redakteur für Hosting-Themen, insbesondere WordPress.

3 Kommentare

  1. Karsten Weng sagte am 29. Januar 2016 um 12:36:

    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
  2. Marko sagte am 16. März 2016 um 13:40:

    Sehr interessant 🙂

    Antworten

Hinterlasse eine Antwort

Bitte beachte, dass sich Dein Kommentar auf den Artikel beziehen sollte. Wenn Du ein persönliches Kundenanliegen besprechen möchtest, wende Dich bitte an unseren Kundenservice auf Facebook, Twitter oder über Hilfe & Kontakt.
Wir freuen uns, wenn Du uns Deinen Namen hinterlässt. So wissen wir, wie wir Dich bei unserer Antwort ansprechen können.
Wenn Du Deine E-Mail-Adresse einträgst, wirst Du per Mail über unsere Antwort informiert. Sie wird zum Schutz Deiner Daten aber nicht veröffentlicht. Beide Angaben sind freiwillig.

Hier bloggen

Lisa Kopelmann
ist Ansprechpartnerin für den Blog und berichtet über aktuelle STRATO Themen

Oliver Meiners
schreibt über alles, was für Dich als STRATO Kunde wichtig ist

Tobias Mayer
berichtet über Neuigkeiten aus dem Unternehmen

Michael Poguntke
schreibt über den Online-Speicher HiDrive, den Homepage-Baukasten, Webshops und Server

Christian Lingnau
bloggt über WordPress & andere CMS

Franz Neumeier
gibt Tipps zum erfolgreichen Bloggen

Sven Hähle
kennt sich bei Domains hervorragend aus

Patrick Schroeder
erzählt die Stories unserer Kunden

Ann-Christin Schmitt
schreibt über HiDrive, den Homepage-Baukasten und guten Websitecontent

Christian Rentrop
bloggt über Software-Themen

Phil Salewski
ist spezialisiert auf das Datenschutz- und Wettbewerbsrecht