Grafik/Layout

Zum Beginn der Entwicklung einer Website wird meist ein grafischer Entwurf angefertigt. Grafiksoftware für Linux gibt es für alle Bedürfnisse. Vom Pixelgrafik-Editor bis zur komplexen 3D Software ist alles vertreten, was ein Webdesigner benötigt.

• Gimp
  Pixelgrafik-Editor, der vom Funktionsumfang in Sachen Webdesign fast an Photoshop heran kommtund auch Photoshop-Dateien (.psd) öffnen kann.
• Inkscape
  Vektorgrafik-Editor mit sehr intuitiv bedienbarer Oberfläche. Besonders praktisch:Die Open Clip Art Library ist bereits im Programm integriert.
• Blender
  Professionelle 3D-Modelling und Rendering Software.

Alle, die auf Photoshop nicht verzichten können, haben die Möglichkeit es über die Windows Laufzeitumgebung Wine (Siehe Wine) zu betreiben. Photoshop CS2 läuft fast ohne Einschränkungen. An der Unterstützung für CS3 wird momentan gearbeitet.

Coding

Für Linux gibt es sowohl die große mächtige IDE mit vielen Features, als auch den kleinen, schnellen Editor für jeweils spezielle Einsatzzwecke.

• Geany
  Sehr schlanker und schneller, erweiterbarer Texteditor, der neben Syntaxhervorhebungauch eine Codevervollständigung für HTML/CSS bietet.
• Komodo Edit
  Codeeditor mit hervorragender Codevervollstädigung für viele Sprachen. Bietet eine gute Projektverwaltung und unterstützt Erweiterungen im Firefox-Add-on Format (.xpi).
• Aptana Studio
  Mächtige IDE,die mit zahlreichen Erweiterungen an die eigenen Bedürfnisse angepasst werden kann.

Allen, die nach dieser Auswahl noch keinen passenden Quelltexteditor gefunden haben, sei die Liste der Webeditoren für Ubuntu empfohlen.

Browser

Von Linux werden die meisten populären Browser nativ unterstützt. Neben Firefox, Opera und Google Chrome kann man mit dem Paket IEs 4 Linux sogar den Internet Explorer bis einschließlich Version 7 unter Linux starten. Leider gibt es noch keine Lösung für den IE8, was den Einsatz einer eines virtuell betriebenen Windows nötig macht (Siehe Virtualbox).

Tools

• Wine
  Windows Laufzeitumgebung, die das Ausführen von Windows-Software ermöglicht und sie nahtlos ins System integriert. Funktioniert leider nicht bei allen Programmen.
• Virtualbox
  Falls man ein Programm benötigt, für das es keine Linux-Alternative gibt und es auch nicht über Wine läuft, kann man mit Virtualbox ein Zweitbetriebssystem aufsetzen. Dieses Betriebssystem läuft dann parallel zu Linux und kann die gewünschten Programme ausführen.
• Filezilla
  Leicht zu bedienendes FTP-Programm, das unter Anderem auch SFTP unterstützt. FTP als Ordner einbinden.
• In Nautilus, dem Standard-Dateimanager von Ubuntu, ist es auch möglich einen Server direkt per FTP ins Dateisystem einzubinden. Nachdem man ftp://Benutzername@Serveradresse.de in die Adresszeile eingetragen, und mit dem FTP Passwort bestätigt hat, erscheint der Webserver wie ein normaler Ordner im Dateisystem.

Fazit

Ein Linux-System bietet, Anpassungsfähigkeit vorausgesetzt, alles was man als Webworker benötigt. Zudem ist es kostenlos und kann ohne Gefahr für ein bereits installiertes Betriebssystem via Live-CD ausprobiert werden. Früher noch als Nerdsysteme bezeichnet, sind viele Distributionen heute in puncto Benutzerfreundlichkeit und User-Interface auf dem gleichen Level wie die Marktführer der kommerziellen Produkte. Es lohnt sich also einen Blick über den Tellerrand zu werfen.

Weiterführende Links:

• Peter Kröner: Linux für Webworker
• Dead-Pixel Weblog: Webseiten in allen Browsern testen

• Firefox Add-ons für besseres Webdesign (9)
• Webseiten in allen Browsern testen (4)
• Twitter Clients für Ubuntu (2)
• Bald ganz frisch: Ubuntu 9.04 – Jaunty Jackalope (1)

Originalartikel vom 24. März 2008, Update am 28. Mai 2009

Webdeveloper Toolbar

Die Webdeveloper Toolbar ist die Allzweckwaffe unter den Firefox Add-ons. Die Toolbar nistet sich unterhalb der Lesezeichen-Symbolleiste ein und kann mittels Symbol in der Navigationsleiste ein- und ausgeblendet werden. Mit ihrer Hilfe kann man beispielsweise bestimmte Elemente der Webseite ausblenden, sie umranden lassen, sich den Quelltext anzeigen lassen, oder sich Informationen zu einzelnen Seitenelementen anzeigen lassen. Die Möglichkeiten der Toolbar sind so weitreichend, dass alle hier aufzuzählen den Rahmen sprengen würde.

Html Validator

Der Html Validator ist ein Tool, dass in der Statusleiste ganz unten rechts die Fehler und Warnungen zum Quelltext der Seite anzeigt. Klickt man doppelt auf die Anzeige öffnet sich ein neues Fenster in dem der Quelltext und eventuelle Fehler in der Validierung angezeigt werden. Mit einem Klick auf den jeweiligen Fehler gelangt man im Quelltext direkt zur fehlerhaften Stelle und es wird eine Erklärung des Fehlers angezeigt.
Funktioniert leider nicht unter Ubuntu 8 Bereinigte Ubuntu Version von Html Validator

Colorzilla

Colorzilla ist ein kleines Add-on welches einem, von der Statusleiste ausgewählt, die Möglichkeit gibt von jedem beliebigen Element der gerade besuchten Website die Farbe zu bestimmen und den zugehörigen Farbcode als Hexadezimal- oder RGB-Code anzeigen zu lassen.

Dust-me selectors

Dust-me selectors hilft einem dabei nicht mehr verwendete CSS-Klassen und ids zu finden um sie aus dem CSS-Code entfernen zu können. Das Tool setzt sich in der Statusleiste fest, von wo aus man es starten kann um durch die Webseiten zu navigieren, die durchsucht werden sollen. Die ungenutzten CSS Bestandteile werden abschließend in einem extra Fenster angezeigt.

Quick Java

Das Add-on Quick Java lässt einen auf Mausklick Java und Javascript ein und ausschalten. Das ist sehr praktisch, wenn man die Funktionalität einer Seite ohne Javascript, oder Java testen möchte um keine Nutzer auszuschließen, die es deaktiviert haben.

Firebug

Das mächtigste der hier vorgestellten Tools ist Firebug. Nach der Installation nistet es sich in der Statusleiste, in Form eines kleinen Käfers, ein und kann auf Klick aktiviert werden. Mit Firebug ist es unter anderem möglich, einzelne HTML Elemente und die darauf wirkenden CSS Regeln zu erkennen, zu ändern und JavaScript zu debuggen. Die Möglichkeiten sind hierbei so zahlreich, dass sie hier den Rahmen sprengen würden. Die große Besonderheit von Firebug ist, dass es selbst auch noch erweiterbar ist.

Pixel perfect

Eine der Erweiterungen für Firebug ist Pixel perfect. Das Add-on macht es möglich, den grafischen Entwurf einer Website halbtransparent über den Viewport des Browserfensters zu legen. An diesem Overlay können anschließend die Elemente der Website pixelgenau nach Vorlage ausgerichtet werden.

YSlow

YSlow, ebenfalls eine Erweiterung für Firebug, analysiert die Performance von Websites und deckt eventuelle Bremsen auf. Es zählt HTTP-Requests, analysiert Dateigrößen und benotet anschließend die Performance der Seite. Seit der neuesten Version ist auch das Bildoptimierungstool Smush.it enthalten, das die Dateigröße von Bildern unter Umständen drastisch verringern kann.

Firediff

Firediff merkt sich Änderungen, die mit Firebug am Code vorgenommen wurden und zeigt diese auf Wunsch an. Das ist vor allem dann praktisch, wenn man Firebug nicht nur zur Überprüfung des Codes, sondern auch zur Entwicklung einsetzt und die Änderungen in den Originalcode übernehmen will.

Das unvermeidliche Fazit

Wie eingangs erwähnt kann Firefox zum mächtigen Entwicklertool werden. Man muss allerdings aufpassen es nicht zu überladen, da mit jedem Add-on die Performance des Browsers beeinträchtigt wird.

• Webdesign mit Linux – Software für Webworker (7)
• Wordpress Plugin Tweetbacks 1.4.4 verursacht Performance Probleme (1)
• Wollt ihr ein Redesign im Entstehen beobachten? (10)
• Webseiten in allen Browsern testen (4)

Liste der Browser auf verschiedenen Betriebssystemen

Browser die die Renderingengine von anderen benutzen (z.B. Google Chrome von Safari, Iceweasel die von Firefox) werden nicht extra aufgeführt. Die Browser werden nur bei den Betriebssystemen aufgelistet für die es eine explizite Version gibt. Diverse Hacks und Emulatoren werden weiter unten besprochen.

Verfügbar für Windows, Mac OS X und Linux

• Mozilla Firefox (Gecko Engine)
• Opera (Presto Engine)

Verfügbar für Windows (ab XP) und Mac OS X

• Safari (Webkit [KHTML] Engine)

Verfügbar nur für Linux

• Konqueror
  Kann vernachlässigt werden, da Safari auf der KHTML Engine von Konqueror basiert.

Verfügbar nur für Windows

• Internet Explorer (Trident/MSHTML verschiedene Versionen)

Alle Browser auf einem System?!

Es gibt mehrere Möglichkeiten alle dieser Browser auf einem der Systeme zu verwenden.

Windows

Auf Windows ist es am einfachsten alle Browser zu installieren. Den Internet Explorer in verschiedenen Versionen kann man mit Multiple IEs (Versionen 3-6, 7 sollte auf dem System Standard sein) gleichzeitig installieren. Eine weitere Möglichkeit ist der IETester der momentan die Versionen 5.5, 6, 7 und 8 beta2 des Internet Explorers in einem Programm installiert. Für Safari, Opera und Firefox sind native Versionen vorhanden.

Mac OS X

Für Macs verfügbar sind momentan natürlich Safari, Firefox und Opera. Damit fehlen nur noch die verschiedenen Internetexplorer Versionen. Dies kann man sich mittels Parallels und einer darin installieren Windows (XP oder Vista) Version auf den Mac holen. Das kostet allerdings einen guten Batzen Geld, da sowohl Parallels als auch Windows Investitionen nicht frei erhältlich sind. (Naiver Gedanke eines Linux Jüngers ;-).
Manuela Hoffmann stellt in ihrem Blog auch eine Möglichkeit wie man Internetexplorer auf dem Mac installieren kann vor, ganz ohne Parallels.

Linux (Beispiel Ubuntu)

Nativ für Linux sind Firefox, Opera und Konqueror erhältlich, der in unserem Fall Safari ersetzt. Für die verschiedenen Internet Explorer gibt es verschiedene Wege. Man kann sein Glück mit Wine versuchen und IETester, oder Multiple IEs darüber installieren. Wine ist eine Open Source Implementierung der Windows API für Linux. Nicht alles läuft darüber reibungslos. Der IETester hat laut Wine Website ein “Bronze” Rating, die Multiple IEs habe ich bis jetzt im Verzeichnis nicht finden können.

Die besser Variante ist die Installation eines Windows XP oder Vista in einer virtuellen Maschine, wie z.B. der Virtual Box und darin IETester oder Multiple IEs. Allerdings ist auch das wieder mit Kosten verbunden. Jeder muss selbst wissen, ob er bereit ist für seine Tests Geld auszugeben. Allerdings sollte man falls man nicht selbst noch ein altes XP rumliegen hat einfach mal seinen Nachbarn, oder in der Familie rumfragen, wo man sicher fündig wird.

Screenreader

Wer seine Seiten auf die Funktionalität und Zugänglichkeit in Screenreadern überprüfen will, muss sich nicht gleich eine kostepflichtige Software wie Jaws besorgen. Für den Firefox gibt es das plattformübergreifende open source Add-on Firevox,mit dem sich Webseiten vorlesen lassen. Leider gibt es Firevox meines Wissens nach nur in Englisch, doch zum testen reicht das völlig aus. Wer es ganz ohne Installation will, sollte sich Web Anywhere anschauen. Web Anywhere ist ein online Screenreader, der die eingegebene Seite in einen Frame lädt und dann direkt vorliest. Die Software ist noch im Alpha Stadium, funktioniert aber schon ganz annehmbar. Wie Firevox, ist Web Anywhere nur auf Englisch.

Unterschiede

Trotz gleicher Basis Engine kann es sein, dass die Anzeige des gleichen Browsers auf unterschiedlichen Betriebssystemen nicht zu 100% gleich sind. Auch Versionsunterschiede (z.B. zwischen Firefox 2 und 3) sind noch zu beachten. Leider entspricht die Darstellung des IETester und Multiple IEs auch nicht vollständig dem Original. Unterschiede im gleichen Browser, gleicher Version, liegen höchstwahrscheinlich an den unterschiedlichen installierten Schriften auf den jeweiligen Systemen.

Danke an Daniel Hepper für die Anmerkung zu den Unterschieden.

Wenn nichts mehr hilft…

…dann hilft browsershots.org. Dieser Dienst stellt nach Eingabe einer URL Screenshots aller nur erdenklichen Browser in vielen verschiedenen Versionen auf verschiedenen Betriebssystemen zur Verfügung. Die kostenlose Version des Dienstes erfordert keinerlei Registrierung und gibt es auch auf Deutsch. Man kann abgesehen von vielen Browsern auch Auflösungen der Bildschirme/Farbtiefe und Technologien (JavaScript/Java/Flash) wählen, nach denen die Screenshots erzeugt werden sollen. Leider kann bei Screenshots die Funktion der Seite nicht überprüft werden und die Erstellung der Screenshots dauert je nach Browser relativ lange, was aber auch die einzigen Wermutstropfen des großartigen Dienstes sind.

• Webdesign mit Linux – Software für Webworker (7)
• Firefox Add-ons für besseres Webdesign (9)
• Twitter Clients für Ubuntu (2)
• Bald ganz frisch: Ubuntu 9.04 – Jaunty Jackalope (1)

• Verlosung: wieder ein 75€ AdWords Gutschein (3)
• Webdesign mit Linux – Software für Webworker (7)
• Tschüss Google Adsense (5)
• Verlosung: 75€ Google AdWords Gutschein (3)