Hinweis: Am 9. April beteiligen wir uns auf webkrauts.de am Naked CSS Day. Die Stylesheets sind an diesem Tag absichtlich abgeschaltet.

Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Webworking unter Linux

Webworking unter Linux

Webworking ohne Adobe-Produkte, fernab von Mac OS und Windows – geht das überhaupt? Die Linux-Fans unter den Webkrauts, Matthias Mees, Sandra Kallmeyer und Moritz Gießmann, wissen: Ja, es geht. Und stellen die passenden Tools vor.

2011. Die gesamte Webentwicklergemeinde ist fest in der Hand von Mac OS und Windows. Die gesamte? Nein. Eine kleine Handvoll wagemutiger Entwickler hat Linux für sich entdeckt. Drei davon stellen hier ihre Lieblingswerkzeuge vor, und wie die geneigte Leserschaft feststellen wird, fehlt (fast) nichts. Wer mal ohne größeren Aufwand in die Webentwicklung mit Linux hineinschnuppern möchte, kann sich eine sogenannte Live-CD von Ubuntu herunterladen und fröhlich losexperimentieren. Die meisten der beschriebenen Tools sind in den voreingestellten Software-Quellen frei erhältlich und mit einem Klick zu installieren. Viel Spaß!

Schriftverwaltung

Font Manager

Screenshot: FontManager

Ambitionierten Webtypografen hilft Font Manager, die systemseitig oder individuell installierten Schriftarten im Zaum zu halten. Über ein aufgeräumtes Interface zeigt es die Metadaten der Schriftart, die verfügbaren Zeichen sowie eine Schriftvorschau mit Beispieltext. Schriften können mit einem Klick aktiviert oder deaktiviert werden. Zudem lassen sich Fonts vergleichen und gesammelt als ZIP-Archiv exportieren.

Alternativen: Fonty Python, Font Matrix

Grafikbearbeitung

Gimp

So gewöhnungsbedürftig Gimp in puncto Interface auch sein mag, es ist die Alternative zu Adobe-Produkten (nicht nur) auf Linux-Systemen. Branchenstandard ist jedoch (ungeachtet dessen, dass Fireworks das richtigere Werkzeug wäre) Photoshop, dessen Plugins Gimp zwar nutzen und dessen Format es grundsätzlich importieren kann – aber eben nicht immer hundertprozentig.

Screenshot: Gimp

An sehr komplexen PSD-Dateien, welche noch dazu Ebeneneffekte verwenden, beißt Gimp sich (noch) die Zähne aus. Wer als Webdesigner oft PSD-Vorlagen umsetzen muss, wird also vorerst nicht um Photoshop in einer virtuellen Maschine herumkommen.

XnConvert

Ein einfaches Tool zur Batch-Konvertierung ist XnConvert. Neben über 500 Grafikformaten unterstützt es auch einige praktische Bildbearbeitungsoptionen wie z.B. das Hinzufügen von Wasserzeichen.

pngquant

PNG8 mit voller Alphatransparenz scheint bislang nur Fireworks-Nutzern vorbehalten zu sein. Für Linux gibt es jedoch ein Kommandozeilentool, das genau das leistet: pngquant reduziert die Anzahl der Farben auf maximal 256 und erhält dabei sämtliche Halbtransparenzen. Keine Angst vor der Kommandozeile, der Befehl, um z.B. ein PNG mit 64 Farben und voller Alphatransparenz zu erzeugen, ist denkbar einfach:
pngquant 64 meinbild.png. Das bekommt Ihr hin. Zumal der Lohn eine deutlich kleinere Dateigröße ist.

Trimage

Verlustfreie Verringerung der Dateigrößen von JPGs und PNGs bietet Trimage, ein grafische Oberfläche für vier kleine Kommandozeilentools: optipng, advpng, pngcrush und jpegoptim. Trimage wählt dabei automatisch die optimalen Einstellungen, justieren lässt sich hier nichts. Aber auch bei manuellem Einsatz der einzelnen Tools auf der Kommandozeile gelingt es nicht, kleinere Dateigrößen zu erzielen. Daher: Daumen hoch für Trimage.

Shotwell & Darktable

Screenshot: Darktable

Wer bei seinen Projekten das Glück hat, nicht mit Stockfotos arbeiten zu müssen, sondern mit individuell fotografiertem Material, wird sich über die unkomplizierte Fotoverwaltung Shotwell freuen. Eine automatische Sortierung nach Events, sowie ein intuitives Bewertungs- und Taggingsystem lassen schnell Ordnung in der Materialsammlung entstehen.

Wer eine professionelle Workflow-Lösung für RAW-Daten sucht, kommt mit Darktable auf seine Kosten: Die Bildverwaltung kommt mit einem ähnlichen Funktionsumfang daher wie Photoshop Lightroom, ist aber wie so vieles in der Linuxwelt völlig kostenfrei.

Inkscape

Inkscape ist ein leistungsstarkes Vektorgrafikprogramm, das auf SVG setzt und kommerzieller Software wie Adobe Illustrator durchaus das Wasser reichen kann.

MyPaint

Auch Webdesigner, die eigene Illustrationen mit Grafik-Tablets wie z.B. Wacom anfertigen, finden mit MyPaint eine professionelle Arbeitsumgebung, die kein Feature vermissen lassen dürfte. Da niemand von uns Autoren mit einem Wacom arbeitet, schreibt gern euren Eindruck in die Kommentare, falls ihr das Tool ausprobiert.

Farben

Agave

Agave vereint einen Farbwähler, eine Farbpalette sowie ein Werkzeug, um zur ausgewählten Farbe passende generieren zu lassen. Darüber hinaus bietet es eine Favoritenliste und (quasi als »Abfallprodukt«) eine Konvertierung zwischen Hex-, RGB- und HSV-Farbwerten. Ein sehr einfach gehaltenes Tool, das dennoch leistet, was es leisten soll.

Alternative: gpick

(S)FTP

Sitecopy

Das Kommandozeilen-Tool sitecopy bietet eine komfortable Möglichkeit, Webseiten »abzugleichen« – also nicht nur neue und geänderte Dateien auf den Server hochzuladen, sondern auch in der lokalen Kopie gelöschte Dateien vom Server zu entfernen. Dazu legt Ihr in der Konfigurationsdatei .sitecopyrc für jede Seite einen Eintrag mit den Zugangsdaten (FTP, HTTP oder WebDav) des Servers und dem Pfad zur lokalen Kopie an. Nun müsst Ihr den Abgleich einmalig initialisieren, danach genügt ein sitecopy -u , um die Seite aus einem Terminal heraus auf den neuesten Stand zu bringen.

Möglicherweise aufgrund der Kommandozeilenaffinität von Linuxsystemen sind grafische FTP-Clients tatsächlich etwas die ungeliebten, zäh bedienbaren Stiefkinder des Systems – uns zumindest gefällt keine der GUI-Alternativen so richtig gut. Der auch für Windows und OSX verfügbare FileZilla arbeitet zwar recht flott und deckt durchaus alle Funktionen ab, braucht jedoch (übrigens auf allen Systemen) eine zusätzliche Sicherheitsmaßnahme, da er ansonsten Zugangsdaten im Klartextformat ablegt.

Alternativen: gFTP, bareFTP, FileZilla, in Nautilus mounten, Midnight Commander

Code-Editoren

Was dem Koch das Messer, ist dem Webworker der Editor – ein extrem wichtiges, sehr individuelles Werkzeug. Wir stellen daher unseren jeweiligen Lieblingseditor kurz vor.

Sublime Text 2

Sublime Text glänzt neben einem schlanken Interface und zahlreichen Editorfunktionen durch Erweiterbarkeit über Plugins und etliche Funktionen zur Automatisierung wie etwa Bausteine und Makros. Die Version 2, obschon noch in der Beta-Phase, vereint die Leistungsfähigkeit der »großen« Editoren emacs und vi(m) mit einem zeitgemäßen Interface und einer vergleichsweise kurzen Einarbeitungszeit. Besonders angenehm, wenn auch sehr subjektiv: Sublime Text macht vieles von Hause aus »richtig« und intuitiv bedienbar, eine langwierige Einarbeitung oder Konfiguration ist nicht nötig.

Sublime Text ist kein reiner Linux-Editor, sondern auch für Windows und OSX verfügbar. Für eine Lizenz werden 59 US-Dollar fällig, allerdings darf kostenlos getestet werden.

Bluefish

Bluefish ist ein sehr flinker und leistungsstarker Editor mit einem schlanken »What You See Is What You Need« Interface, sowie Linux typischen, feingranulierten Konfigurationsmöglichkeiten. Bluefish ist ein Werkzeug für Puristen. Blitzschnelles gleichzeitiges Öffnen von mehreren hundert Dokumenten, ausgewählt über Patterns oder Regular Expressions, Verwalten von Projekten mit jeweils unterschiedlichen Einstellungen, Arbeiten mit Remote Files, sowie ein praktisches Template-System, das es erlaubt, z.B. das HTML5 Boilerplate als Ausgangsbasis für neue Dokumente zu hinterlegen, sind nützliche Features, die die tägliche Arbeit unterstützen. Bluefish ist angenehm zurückhaltend und kommt einem schlicht nicht in die Quere. Einzige Schwäche ist das zurzeit noch fehlende Syntax-Highlighting und Autovervollständigen für die neuen HTML5-Elemente. Hier wird aber sicher in nächster Zeit nachgebessert werden.

Kommodo Edit

Screenshot: Komodo Edit

Schnelle und intelligente Codevervollständigung für HTML5/CSS3/JS/PHP, Syntaxhighlighting für knapp 100 Sprachen, und eine ganze Menge Plugins. Das alles bietet das kostenlose Komodo Edit. Auch wenn das Interface nicht ganz so modern daher kommt, wie das von Sublime Text, punktet die Software spätestens bei Features wie der Suchfunktion, die problemlos mehrzeilige Codeschnipsel über ganze Ordnerstrukturen hinweg finden und ersetzen kann. Wem das noch nicht reicht, der kann remote in FTP-Ordnern arbeiten, und sich seine eigene Makro-/Snippetbibliothek anlegen.

Komodo Edit ist ebenso wie Sublime Text auch für OSX und Windows verfügbar. Wer noch mehr Features (z.B. integrierte Versionsverwaltung) braucht, sollte sich das kostenpflichtige Komodo IDE anschauen.

Alternativen: gedit, Aptana, Eclipse, emacs, vi(m), Quanta

Browser-Tests

ievms

Fast alle gängigen Webbrowser stehen auch unter Linux zur Verfügung, die Stolperfalle für Browsertests bleibt der Internet Explorer. Die Lösung naht in Form von ievms, einem Shellskript, welches (im Übrigen völlig legale) Images von Microsoft herunterlädt und mit Virtual Box verwendbare virtuelle Maschinen einrichtet. Nach recht langatmigen Downloads (je nach Netzanbindung) stehen bis zu drei virtuelle Windows-Versionen mit IE7, 8 und/oder 9 bereit, eine Lösung mit IE10 ist in Vorbereitung.

Screenshot: VirtualBox mit ievms

Lasst euch auch hier nicht von der Kommandozeile abschrecken. Eure Tätigkeit beschränkt sich auf das Kopieren und Einfügen einer einzigen Zeile. Der Rest läuft dann automatisch ab, während ihr ins Kino geht. Wenn ihr zurück kommt, sind drei virtuelle Maschinen fertig installiert und einsatzbereit.

IEs4Linux

Wer noch immer IE6 unterstützen muss, kann zusätzlich auf IEs4Linux zurückgreifen. Auch hierbei handelt es sich um die original Internet Explorer, die direkt von Microsoft herunter geladen werden. Allerdings setzt IEs4Linux nicht auf eine virtuelle Maschine, sondern auf WINE, was zur Folge hat, dass z.B. die proprietären IE-Filter nicht greifen. Dadurch ist das Testen von IE6-Fallbacks, die auf eben diese Filter setzen, nicht möglich, was den Nutzen deutlich einschränkt. Zudem wird das Tool seit IE7 nicht mehr weiter entwickelt. Ein Notnagel, der zum Glück an Bedeutung verliert.

Mobile Browser könnt Ihr über das Android SDK oder den Opera Mobile Emulator auch unter Linux recht gut testen, falls kein Android-Smartphone zur Verfügung steht – einen brauchbaren Simulator für das iPhone suchen Linux-Webworker allerdings leider vergebens.

Versionsverwaltung

Auch bei der Versionsverwaltung greifen die meisten Linux-User zur Kommandozeile, um git oder subversion zu steuern. Als Alternative lassen sich Versionsverwaltungssysteme in die gängigen Dateimanager Nautilus oder Thunar integrieren. Der Dateimanager zeigt dann Indikator-Icons zum Status der Datei, Funktionen könnt Ihr nach Rechtsklick per Kontextmenü aufrufen.

Alternativen: gitg, Giggle, SVN Workbench, RapidSVN, Dropbox

Kleine Helfer

FreeMind

Ein klassisches Mindmapping-Tool, z. B. zum Konzipieren von Website-Strukturen. Die fertige Mindmap lässt sich als HTML-Sitemap exportieren.

Meld Diff Viewer

Wie der Name vermuten lässt, ist Meld Diff Viewer ein Programm zum Vergleichen von Dateien, das in keinem Werkzeugkasten fehlen sollte.

gURLChecker

Ein kleines, aber leistungsstarkes Tool zum Überprüfen von URLs ist gURLChecker. Gerade bei größeren oder »gewachsenen« Projekten nützlich, um tote Links und fehlende Assets aufzuspüren.

PDF Shuffler

Ein klassisches one-thing-well Tool: Es kann beliebig viele PDFs per Drag & Drop aufnehmen und die einzelnen Seiten in der gewünschten Reihenfolge zusammenstellen (daher Shuffler). Löschen von Seiten ist natürlich auch möglich.

Calibre

Screenshot: Calibre

Zu guter letzt sei noch ein Tausendsassa empfohlen, der Ordnung in die stetig wachsende Bibliothek von Webdesign-Fachliteratur bringt: Calibre verwaltet nicht nur eure E-Book-Sammlung und synchronisiert sie mit jedem beliebigen Reader, sondern ist auch in der Lage, jedes E-Book-Format in jedes beliebige andere zu konvertieren und im integrierten Viewer anzuzeigen. Meta-Informationen lassen sich bearbeiten, Cover austauschen, RSS-Feeds als E-Books speichern und vieles mehr. Zudem macht ein integrierter Webserver die Sammlung überall verfügbar, wo eine Internetverbindung und ein Browser vorhanden sind.

Fazit

Linux ist schon lange nicht mehr das Nerd-Spielzeug, das es mal war. Eine vollwertige Webentwicklungs-Umgebung einzurichten ist mit wenigen Klicks erledigt und nach einer kurzen Umgewöhnungszeit habt Ihr schnell vergessen, dass Ihr jemals mit einem anderen System gearbeitet hat.

Eine interessante Aussicht für die nahe Zukunft: Ubuntu wagt als erste Linux-Distribution mit ein und derselben Oberfläche (Unity) den Schritt in die Welt der Tablets und Smartphones und verhandelt bereits mit den ersten Herstellern. Eine integrierte Lösung ähnlich Mac OS ist also auch in der Linux-Welt im Anmarsch. Dann wird es nochmal spannend. Vielleicht sehen wir den einen oder die andere in zwei Jahren mit einem Ubuntu-Laptop, Ubuntu-Tablet und Ubuntu-Phone im WLAN-Cafe sitzen, wer weiß?

Kommentare

Ingo van Peeren
am 14.12.2011 - 08:44

Ich würde da aus meinem Alltag noch ergänzen:

Als IDE-Alternativen gibt es natürlich noch z.B. Netbeans oder Geany.

Bei den kleinen Helferlein ist evtl. KDiff3 eine interessante Alternative zum Meld Diff Viewer.

Permanenter Link

Matthias Gutjahr
am 14.12.2011 - 09:49

Ein alternatives Grafikprogramm ist Pinta, ein mittlerweile recht ausgereifert Paint.NET-Klon. Das beste Screenshot-Tool scheint mir Shutter zu sein.

Ansonsten gibt es für Linux-Nutzer auch kostenpflichtige Tools, die ihr Geld wert sind, z.B. die IDEs von IntelliJ. Die basieren oft auf Java, aber das macht ja meistens nichts ;)

Permanenter Link

Jan Brinkmann
am 14.12.2011 - 11:25

Hi. Ich finde es gut das mehr Webentwickler Linux für sich entdecken. Ich arbeite seit vielen Jahren mit Linux auf meiner Workstation und bin absolut zufrieden.

Allerdings finde ich persönlich das speziell im grafischen Bereich Photoshop unheimlich stark ist. Gimp finde ich auch gut. Aber Grafiker arbeiten überwiegend mit Photoshop und es ist teilweise nicht möglich komplexe Layouts 1:1 so angezeigt zu bekommen wie in Photoshop selbst. Zudem hatte ich bei Layouts die mit CS5 oder CS5.5 erstellt wurden generelle Probleme beim öffnen der Datei. Daher habe ich dafür noch ein Macbook zusätzlich.

Hier noch einige Tools für die Linux Entwicklungsumgebung:

- Kiki
Wer reguläre Ausdrücke entwickelt kann diese damit viel einfacher erstellen und testen als direkt im Quellcode.

- MySQL Workbench
Damit kann man Tabellen erstellen, bearbeiten und Änderungen direkt auf einen MySQL Server übertragen.

- PhpStorm
Aus meiner Sicht die beste PHP IDE derzeit am Markt. Netbeans wird zwischendurch immer wieder durch "Scanning Projects" Vorgänge extrem langsam. Eclipse fand ich nicht so gut da immer irgendwas nicht richtig funktionierte (im Bezug auf PHP). Zudem ist bei PhpStorm die Git Integration unmittelbar vorhanden.

Permanenter Link

Janek Bevendorff
am 14.12.2011 - 11:54

Auf einen solchen Artikel habe ich schon lange gewartet. :-)
Einige der Tools kannte ich noch nicht einmal. Liegt vielleicht daran, dass ich meistens doch den Adobe-Krams in der VM nutze, weil Gimp zwar viel kann, aber nicht genug. Und weil ich das Interface auch nicht mag.

Mit Inkscape habe ich jedoch auch einige Zeit gearbeitet. Nicht in allen Belangen so komfortabel wie Illustrator, aber benutzbar (Illustrator bietet aber auch nicht immer die tollste UX).

Als Editor-Kombo nutze ich Komodo, Geany und vim. Komodo für das Arbeiten an richtigen Projekten, Geany für die schnelle Lösung für Einzeldateien und vim für die Kommandozeile.
Es gibt viele Leute, die bevorzugen Netbeans, aber ich halte Netbeans eher für das geringfügig bessere eclipse.

Was die Tablets angeht: das Problem ist meist der Wacom-Treiber. Der funktioniert zwar an sich und Wacom unterstützt die Entwickler wohl auch, aber bis ein neues Tablet-Model ordnungsgemäß funktioniert, dauert es so einige Zeit. Mein Intuos 4 funktioniert z.B. grundlegend, aber die LED-Anzeigen mit den Tastenbelegungen funktioniert noch nicht (wird aber dran gearbeitet). Ein paar andere teils mehr, teils weniger wichtige Featurs vermisse ich auch noch. Insgesamt sind Wacom-Tablets unter Linux nutzbar, wer aber wirklich den vollen Funktionsumfang mit allen Features, die so ein Tablet bieten kann, haben will, kommt um Windows oder OS X leider nicht herum.

Permanenter Link

Stefan
am 14.12.2011 - 12:17

Super, vielen Dank für die vielen Tipps. Da ich mittlerweile öfter Ubuntu einsetze kam der Artikel sehr gelegen :)

Permanenter Link

Nadine Zidek
am 14.12.2011 - 12:20

Hallo,

ich finde es super das auch Linux als Alternative zu MS und Mac erwähnt wird. Ich verwende seit über 16 Jahren Linux als Betriebssystem (seit SuSE Linux 7.1) und kann es mir nicht mehr vorstellen mit Windows zu arbeiten. Wenn man im Internet ein bisschen sucht, findet man haufenweise Tools und Programme im Bereich Design, Programmierung, Datenbankadministration usw.
Das einzige Programm was ich gekauft habe war von Adobe. Den Rest habe ich unter Linux for free :-)
Einzig bei Flash muss ich doch auf Mac oder Windows zurückkehren aber da gibt es auch Lösungen Adobe Produkte mit Wine zu starten.

Permanenter Link

Oliver
am 14.12.2011 - 12:57

Photoshop CS5 läuft auch wunderbar unter wine. Allerdings muss man leider mit der Original CD etwas tricksen. Google hilft. Pngout funktioniert auch sofort mit wine und viel andere Windows only Helferlein.

Erwähnen will ich noch die Kombi Kate/Konqueror/gwenview, die eine ganze Menge Programme hier ersetzen können. Die Bearbeitung von Textdateien über fish als wären sie am lokalen Rechner ist eine Sache, die ich nie wieder missen will. Auch das einfache zurecht schneiden oder bearbeiten von Grafiken ist damit kein Problem mehr.

http://en.wikipedia.org/wiki/PNGOUT
http://kate-editor.org/
http://www.konqueror.org/
http://de.wikipedia.org/wiki/Gwenview
http://de.wikipedia.org/wiki/FISH_%28Protokoll%29

Permanenter Link

momonster
am 14.12.2011 - 15:09

Also z.B. KDE kann von Haus aus (S)FTP, SSH und Webdav. Will heißen: Alle KDE-Programme können direkt auf einen FTP oder SSH-Server zugreifen. Der Dateimanager, der Editor, die Bildbearbeitung …
Problemloses Hin- und Herkopieren oder direktes bearbeiten auf dem Server … alles kein Problem. Unter Gnome ist das ähnlich problemlos möglich. Man benötigt also kein extra grafisches FTP-Programm.

Permanenter Link

René Fertig
am 14.12.2011 - 15:53

Hey, vielen Dank, dass ihr mal aufzeigt, dass es nicht nur Mac (und Windows) gibt und man damit wirklich arbeiten kann. Ich tue es nun schon seit mehr als 10 Jahren. Und ich muss sagen, dass ihr da einige interessante Tools in der Liste habt, die ich mir unbedingt mal ansehen muss.

Und wie Ingo benutze ich Netbeans als IDE und finde KDif3 angenehmer als Meld. Als Versionskontrollsystem kommt bei mir Mercurial (hg) zum Einsatz. Und für Backupzwecke rsync und unison.

Permanenter Link

Johannes Reichard
am 14.12.2011 - 18:57

Hi,
ihr habt einen klasse Werkzeugkasten zusammengetragen, den werde ich bei nächster Gelegenheit als Referenz weiterreichen, wenn mich jemand nach guten Tools für Linux fragt ^^.

Ich arbeite auch seit einem Guten Jahr als Webdesigner und habe noch einige Ergänzungen zu der Sammlung(Tools die ich für meine tägliche Arbeit sehr nützlich finde).

gcolor2:
Ein Farbwähler, eine Alternative zu agave.

XnView:
Leider kein OpenSource Programm und nur für den Privatgebrauch kostenlos, dafür jedoch die einfachste mir bekannte Möglichkeit psd Dateien unter Linux zu betrachten.

Da ich ein Konsolenfan bin nutze ich die üblichen verdächtigen: vim, subversion, git und einige skripte die pngcrush und jpegoptim benutzen

Gruß
Johannes

Permanenter Link

Pawel
am 15.12.2011 - 19:48

Mit meinem Wacomtablett kann ich Inkscape und MyPaint komfortabel nutzen und natürlich die gesamte Unity-Oberfläche.
Wichtig ist, dass die Treiber bereits im Kernel sind, das Tablet ist sofort nutzbar.

Inkscape ist sehr mächtig, der Verwendungszweck liegt m.E. mehr in der Erzeugung von SVG und ist damit stärker auf das Web spezialisisert und weniger auf Print, wo der Illustrator stärker punktet.
Es gibt mehr Bücher zum Adobe-Produkt.

Da das Arbeiten mit der Kommandozeile ist mächtig. Trotzdem schätze ich Zenity, um mir kleine grafische Tools zu schreiben und ich Dialogboxen benutzen kann. Damit kann man auch die o.g. Kommandozeilentools komfortabel verpacken.

Permanenter Link

Die Kommentare sind geschlossen.