Die Themen Design und Kreativität am PC scheinen, zumindest aus kommerzieller Sicht, fest in den Händen des Unternehmens Adobe zu sein. Insbesondere die Entwicklungsumgebung Dreamweaver genießt unter Experten nach wie vor einen guten Ruf. Dessen Stellung in Arbeitsabläufen und Entwicklungsprozessen ist indes nicht mehr unangefochten. So schwören im Zeitalter von Content-Management-Systemen und Shop-Software zwar immer noch einige Designer auf solche Software-Monolithen, andere stellen deren Notwendigkeit aber deutlich in Frage, da immer mehr Tools und Hilfsmittel auch ausschließlich online angeboten werden.
Am Anfang steht die Idee
Am Anfang der Entwicklung stehen Ideen und ein Modell der zukünftigen Website. Solche frühen Entwürfe werden heute gern als Wireframes (Drahtgerüst) umgesetzt, oft auch als Mockup bezeichnet. Das Modell erlaubt Aufschluss über die spätere Seitenaufteilung und die Platzierung von Inhalten, ohne dabei ins Detail zu gehen. Welche Info-Container werden auf der Startseite benötigt? Wo sollen am besten Hauptnavigation und Werbebanner platziert werden? Mittels Klicken und Ziehen kann mit dem richtigen Programm rasch das Grundgerüst einer ganzen Site angelegt werden. Die Modellzeichnungen helfen dem Designer dabei, möglichst frühzeitig konzeptionelle Sackgassen zu erkennen, und liefern für die weitere Entwicklung den Bauplan.
Im professionellen Umfeld erleichtert es die Diskussion mit dem Auftraggeber, sich dabei nicht gleich in Detailfragen wie Farben oder Formen zu verstricken. Pencil ist kostenlos zu benutzen und liegt in Versionen für alle drei Betriebssysteme vor. Auf der Website des Projekts müssen Sie unter „Downloads“ suchen, bis Sie ein Paket für Ubuntu (Debian-Format) gefunden haben. Liegt die Installationsdatei aber erst einmal lokal vor, installieren Sie das Programm direkt über dasSoftware-Center.
Die Bedienung von Pencil ist in der Tat selbsterklärend: Nachdem Sie eine neue Datei angelegt haben, suchen Sie auf der linken Seite der Schablonen die passenden Elemente aus und ziehen sie auf die Arbeitsfläche. Hier verschieben und skalieren Sie die Elemente, bis sie Ihren Vorstellungen entsprechen. Beachten Sie dabei immer auch die Symbolleiste am oberen Rand des Bildschirms. Mit den Eingabefeldern verändern Sie die Eigenschaften eines Objekts. So wächst langsam eine Oberfläche zusammen. Ihre finalen Entwürfe exportieren Sie dann entweder als Grafik (PNG-Format) oder auch in HTML oder ODT, um die Entwürfe an anderer Stelle weiterzubearbeiten.
Schritt für Schritt zum Linux-Webserver-Administrator
Was wäre das Web ohne Bilder?
Das Design von Logos oder anderen Visuals liegt selten in den Händen des Webdesigners selbst. Wer aber vektorbasierte Zeichnungen benötigt oder solche bearbeiten muss, hat unter Linux letztlich nur eine Wahl. Das sehr mächtige und ausgereifte Programm Inkscape bietet dermaßen viele Funktionen, dass es erst mal eine Weile dauert, bis Sie damit produktiv arbeiten werden. Wem das flüchtige Entwerfen per Wireframe nicht so sehr liegt, der kann sein Design auch gleich pixelgetreu in Inkscape anlegen. Mittels eines Plug-ins lässt sich der Entwurf dann in einzelne Komponenten „slicen“. InForm eines Assistenten markieren Sie auf Ihrer Zeichnung die funktionalen Bereiche der Webseite – also zum Beispiel Kopfbereich, Fußzeile, Navigationsleisten. Beim Slicing entstehen Bruchstücke der Seite in Form von HTML- und CSS-Dateien, die Sie entweder als Vorlage in einer Entwicklungsumgebung verwenden oder auch direkt bearbeiten können. Das zeitaufwendige Programmieren des Grundgerüsts einer Seite oder eines Templates haben Sie dann bereits hinter sich. Inkscape ist auch dann nützlich, wenn Sie auf grafisches Material zurückgreifen müssen, das nicht als Vektorformat vorliegt. Liegen Schriftzüge und Logos nicht digital vor, können Sie solche etwa einscannen und dann in ein Vektorformat konvertieren.
Ausgefeilte Ebenentechnik, Script-Fähigkeiten, Bildfilter und Erweiterbarkeit durch Plug-ins – das sind die Attribute von Gimp , das Sie in den offiziellen Paketquellen jeder Distribution finden. Das Programm zur Bearbeitung von Bildmaterial unterschiedlicher Quellen besitzt allerdings eine steile Lernkurve. Selbst langjährige Nutzer von Photoshop werden sich schwertun, bis die wesentlichen Kommandos und Befehle sitzen. Die während desDesigns auftretenden Routinearbeitenwie Skalieren, Konvertieren oder Retuschieren von Bildern aller Art erledigt Gimp auf jeden Fall zuverlässig und spart den so Griff zu teuren kommerziellen Programmen.
Code is poetry?
Liegen die finalen Entwürfe vor, geht es an die konkrete Umsetzung der Ideen in Form von Code. In dieser Hinsicht hat sich in den vergangenen Jahren ein enormer Wandel vollzogen. Vorbei sind die Zeiten, in denen professionelle Entwickler ihren Kunden fix und fertige Webseiten ablieferten. Im Zuge agiler Projekttechniken wird eher auf die Geschwindigkeit während der Entwicklung Wert gelegt. Möglichst oft einen Zwischenschritt abzuliefern, um diesen rasch anhand der Kritiken von Benutzern und Zahlen aus der Webanalyse anzupassen, ist heute das Ziel. Um diese hohe Geschwindigkeit in der Entwicklung zu erreichen, kommen verstärkt Bibliotheken zum Einsatz, die eine schnelle Ausgabe von Quellcode erlauben. Bekannte Beispiele für solche Bibliotheken sind etwa Less oder auch Sass . Beide entlasten den Entwickler einerseits dadurch, dass er mit Variablen arbeiten kann. Zum anderen gibt es eigene Kürzel, die später beim Speichern und Exportieren in den Quellcode umgesetzt werden, der vom Webserver und Browser erwartet wird. In einer Vorlagendatei für ein CMS etwa werden häufig Werte redundant verwendet. Definieren Sie die Vorlage für einen Absatz und eine Überschrift, müssen Sie dort die Werte für die verwendete Schriftfarbe jeweils separat eintragen. In einer Entwicklungsumgebung, die zum Beispiel Less unterstützt, ist das einfacher lösbar:
/* Variables */ @dunkel: #515151; @hell: #FEFEFE; /* styles */ p { color: @dunkel; } h1 { background-color: @hell; }Wenn sich im Entwicklungsprozess die Farben ändern, muss dann lediglich eine Stelle bearbeitet werden.
Beim Export stimmt der Quellcode dann wieder. Um solche Schreibarbeiten zu erledigen, benötigen Entwickler einen Editor, der Tipparbeit spart und sich zugleich auch um das Exportieren des nötigen Quellcodes kümmert. Einer der leistungsstärksten Editoren, wenn auch wegen seiner Oberflächengestaltung eher etwas für Puristen, ist Emacs . Die Software istkostenlos und direkt aus den Paketquellenzu ziehen. Mit einer Erweiterung kann Emacs dann auch mit Code in Less umgehen ( https://github.com/purcell/less-css-mode ). Den notwendigen Compiler zur Erstellung der CSS-Dateien finden Sie ebenfalls in den Paketquellen.
Etwas zeitgemäßer präsentiert sich der Editor Sublimetext , den es für Linux, Mac und Windows gibt. Die proprietäre Software dürfen Sie unbegrenzt lange kostenlos ausprobieren, müssen aber für circa 50 Euro eine Lizenz erwerben, wenn Sie tatsächlich kommerziell mit der Software arbeiten wollen. Was dieses Werkzeug so interessant macht, ist die Erweiterbarkeit mittels eines Paketmanagers. Darunter sind auch solche Erweiterungen, die nicht nur den Quellcode übersichtlicher gestalten, sondern auch die Eingaben des Nutzers kompilieren.
Eine vollständige Entwicklungsumgebung (nicht nur für HTML & Co.) ist Aptana Studio . Nach dem Download entpacken Sie das Archiv an einem Ort Ihrer Wahl und starten die Umgebung mit Doppelklick auf die binäre Datei. Sie erhalten beim Schreiben des Codes Unterstützung in Form von grafischen Hervorhebungen im Quelltext sowie eine Vervollständigungsfunktion. Sie geben damit nur erlaubte Sprachelemente in den Code ein, und auch die Komplettierung von schließenden Elementen und Klammern erledigt die Software automatisch. Funktionen für die Vorschau oder das Kompilieren vervollständigen das System. Verglichen mit einem einfachen Editor ist die Lernkurve allerdings deutlich größer.
Nginx: Den unsinkbaren Webserver einrichten
Eine Software, mit deren Hilfe Sie schnell zu älteren (besseren) Versionen des Codes zurückkehren können, ist nicht nur praktisch, wenn Sie im Team arbeiten. Eine Versionskontrolle erweist sich auch für Einzelkämpfer als nützlich. Mit wenigen Mausklicks können Sie sich Veränderungen am Quellcode einer Site ansehen oder eine früheren Version aufrufen. Dazu wird der aktuelle Entwicklungsstand des Projekts an die Software übergeben. Danach ruft sich jedes Teammitglied eine Arbeitskopie ab und beginnt damit, die Dateien zu bearbeiten. In regelmäßigen Abständen übergeben die Bearbeiter wieder die aktuellen Versionen ihrer Dokumente an das System zurück. Damit entsteht eine neue Version, die erneut von den Mitgliedern der Arbeitsgruppe abgerufen werden kann. Die Arbeit mit einer Versionsverwaltung erfordert lediglich einige wenige Kommandos und dank vieler grafischerOberflächen im Zweifel nochnicht einmal diese. Unter Linux steheneine Reihe solcher Kontrollsysteme zur Auswahl, wobei sich Git inzwischen großer Beliebtheit und weiter Verbreitung erfreut. Das liegt unter anderem auch daran, dass das System verteilt betrieben werden kann und einen zentralen Server überflüssig macht.
„Responsives“ Gestalten
„Responsiv“ lautet eines der Zauberworte im aktuellen Webdesign. Gemeint ist, dass sich die Größe der Seiten und der Inhalte automatisch an die Display-Größen verschiedenster Endgeräte anpasst. Ob der Nutzer die Seiten nun mit dem Tablet oder seinem Smartphone besucht, sollte aus seiner Sicht keine Rolle spielen. Derzeit mangelt es Linux noch an Werkzeugen, die für diese Spezialaufgabe optimiert wurden. Die Entwicklungsumgebung Aptana besitzt zwar eine rudimentäre Vorlage für Designs, die auf HTML5 basieren. Dies aber bereits als Tool für responsives Design zu bezeichnen, wäre übertrieben. Viel besser sieht es beim Blick auf andere Betriebssysteme aber auch nicht aus. Wer responsiv gestalten will, hat die Wahl zwischen einer immer stärker wachsenden Zahl von Frameworks oder Werkzeugen, die auf dem Browser basieren. Eine umfassende Lösung gibt es derzeit nicht.
Fazit: Professionelles Webworking mit Linux? Das ist möglich, sofern man keine Scheu hat, sich in Programme einzuarbeiten und neue Pfade zu beschreiten. Dass eine solche Umgebung finanziell attraktiv ist, versteht sich dabei fast von selbst: Die meisten Werkzeuge sind kostenfrei zu nutzen und außerdem quelloffen.
Adobe –und keine Chance für Linux
Sie haben vor, sich von Ihrer Windows-Installation zu verabschieden? Wenn Sie weiterhin mit den gewohnten Produkten von Adobe weiterarbeiten wollen oder müssen, sieht das mit einem kompromisslosen Umstieg auf Linux nicht gut aus. Wie viele andere Hersteller hat Adobe sich in die Cloud orientiert und bietet Photoshop, Dreamweaver und andere Programme als Mietlösung an. Die für den Betrieb und die Lizenzüberprüfung notwendige Software steht allerdings nicht für Linux zur Verfügung, und auch Versuche, die Programme unter einer Umgebung wie Wine lauffähig zu machen, scheitern regelmäßig. Kurzum: Wer auf Adobe angewiesen ist, darf seine Windows-Partition trotz allem nicht voreilig löschen.