Entwicklungsumgebung: Welche Software brauche ich für eine Website?

Ich bin Webentwickler. Ja - ich weiß, sollte man bei dieser Homepage nicht unbedingt so laut sagen. Trotzdem ist es immer wieder erstaunlich, was man so erlebt, wenn man es dann doch mal sagt. Weshalb ich dann meine Entwicklungsumgebung vorstelle, dass verrate ich vorher natürlich.

Webentwicklung ist kein Hobby. Es ist ein Beruf, der aus einer Leidenschaft entsteht. Klingt arrogant? Ist es aber nicht. Kein Arzt möchte, dass ein Laie die Diagnose stellt oder sich selbst behandelt. Es würde auch fast keiner auf die Idee kommen. Nur bei Computern und Webentwicklung denkt wirklich jeder, dass er es kann, obwohl er es nie gelernt hat.

Unterschied zwischen Webentwickler und Möchtegern

„Homepage-Baukästen“ versprechen Ergebnisse in 5 Minuten. Software im Supermarkt gibt es für 20 Euro. Mit wenigen Tricks kann man eine Homepage in 1 Stunde bei Google auf Platz Eins stellen. Na klar – und die Erde ist eine Scheibe. Ach ja und nicht zu vergessen diese tollen Dienste, wo man alles gleich kostenlos bekommt: NPage, Jimdo, Wix, Beepworld und wie sie alle heißen.

Eine Homepage, die aus einer dieser Komponenten besteht, die ist einen Klick nicht wert und schon gar nicht die Mühe, die URL in den Browser einzutippen. Jeder Webentwickler, der es gelernt hat und sich kontinuierlich weiterentwickelt, ist sein Geld wert. Der Unterschied ist nicht nur zusehen, sondern spiegelt sich auch in den Ergebnissen (Bestellungen, Besucherzahlen, Umsätze) wieder. Sie gehen ja auch nicht mit der Hochzeitsgesellschaft in ein Restaurant, dass draußen eine Neonleuchtschrift über der Tür hat.

Wie kann eine Entwicklungsumgebung aussehen?

Was nicht funktioniert habe ich jetzt aufgezählt, wenn sie bis hier gelesen haben, dann stimmen sie mir anscheinend zu. Entweder sie haben selbst gemerkt, dass die Resultate sch… sind oder sie wundern sich noch, warum die erwarteten Ergebnisse ausbleiben. Wenn ich jetzt die Entwicklungsumgebung vorstelle, dann werden sie verstehen, warum Webentwickler das Geld wert sind, dass sie verlangen.

Websites werden nicht per Klick erstellt, sondern müssen programmiert werden. Die einfachste Entwicklungsumgebung ist ein PC (mit OS X, Linux oder Windows) mit einem Texteditor und einer FTP-Software. Zugegeben das ist recht mühsam, aber es reicht eigentlich aus. Der Rest ist im wahrsten Sinne des Wortes: Wissen. Auch wenn es oft „nur“ das Wissen ist, wonach bei Suchmaschinen gesucht werden muss.

Tools – die die Arbeit erheblich erleichtern

Natürlich gibt es auch Software für Webentwickler, die die tägliche Arbeit erleichtern. Hier ein paar Stichworte für eine IDE ( integrated development environment – integrierte Entwicklungsumgebung), die jeder Entwickler zu schätzen weiß:

Syntax-Highlighting & Syntax-Check
Code-Vervollständigung & Code-Verfolgung
Debugger & Profiler
Versionskontrolle
(S)FTP-Support
Unit-Tests
Query-Builder

Da gibt es schon einige schöne Dinge. Es reicht jedoch ein PC (mit Windows, Linux oder OS X), ein Texteditor und eine FTP-Software wirklich aus. Auf der nächsten Seite verrate ich Software (auch kostenlose) die diese „schönen Dinge“ haben.

So genug Einführung. Jetzt kommen die knallharten Fakten. Die Software-Tipps sind bei mir meist auf Windows-Software bezogen, wenn ich gute Allrounder oder OS X- bzw. Linux-Alternativen kenne, dann zähle ich sie auf.

FTP-Client: WinSCP, WS_FTP, TotalCommander

Eine Internet-Seite liegt auf einem Server. Ein Server ist ein PC, der an eine Internet-Leitung angeschlossen ist. Prinzipiell kann also jeder PC ein Server sein. Eine Website ist eigentlich nur eine Sammlung aus Dateien. Damit man diese Dateien auf den Server bekommt, muss ein Webinterface zur Verfügung stehen oder ein (S)FTP-Server auf dem Server installiert sein z.B. Jana-Server oder FileZilla.

Ein Webinterface reicht für ein oder zwei Dateien völlig aus. Es wird im Browser aufgerufen und mit wenigen Klicks sind die Dateien an der gewünschten Stelle. Doch je mehr Dateien es werden, desto besser ist ein FTP-Client. Ein FTP-Client ist auf dem eigenen PC installiert und stellt eine Verbindung zum FTP-Server her. Hier gibt es viele Clients. ich bevorzuge mittlerweile den kostenfreien FTP-Client WinSCP. Die Software bietet vielfältige Möglichkeiten und ist recht intuitiv zu bedienen. Eine weitere Möglichkeit ist das kostenpflichtige WS_FTP. Last but not least: TotalCommander. Dies ist ein Shareware-Dateimanager. Er ist quasi gratis, beinhaltet aber eine „Bitte spenden“-Meldung.

Entwicklungsumgebung: Netbeans, PHPEdit, Dreamweaver

Wir brauchen also einen FTP-Client um die Dateien auf den Server zu laden. Doch womit erstellen wir die Dateien? Bitte nicht nach „Homepage Software“ Googlen. Die Antwort von Google ist alles andere als befriedigend. „Homepage Baukasten X.0“, „Meine-Webseite-2.0.de“, „Web Designer 10.0“ oder „NetObjects“ wegwerfen oder an die Wand nageln mit roter Leuchtschrift: „Fehlkauf“ drüber.

Doch was verwendet ich dann? Eine richtige Entwicklungsumgebung! Entwicklungsumgebungen sind jedoch immer nur so gut, wie der Zweck für den sie eingesetzt werden. iPhone-Apps in PHPEdit zu programmieren kann man machen, sollte man aber nicht. PHPEdit der Firma Waterproof eignet sich aber hervorragend zur Entwicklung von Websites mit HTML, CSS, PHP und mySQL. Es ist jedoch nicht kostenlos. Dafür bietet es all die aufgezählten tollen „Nice-to-Haves“ von der ersten Seite und noch einiges mehr. Kostenlos hingegen ist Netbeans. Für Websites reicht die HTML5 & PHP – Variante völlig aus. Übrigens gibt es Netbeans für OS X, Linux und Windows.

Die wohl teuerste Möglichkeit ist Dreamweaver aus dem Hause Adobe. Teuer heißt in diesem Falle nicht unbedingt gut. Besonders in Sachen Versionierung, Datenbankanbindung und Projektverwaltung lässt dieses Tool große Wünsche offen. Auch die Live-Ansicht funktioniert bei Webprojekten mit Datenbanken nur bedingt.

Versionierung mit TortoiseSVN

Für die Versionierung kenne ich nur eine wirklich gute Software: TortoiseSVN. Sie ist kostenlos und integriert sich fast vollständig in den Explorer von Windows. Mit einem Rechtsklick steht alles zur Verfügung. Auch dies ist ein Client. Der Server ist ja bereits bei RepositoryHosting.com.

Jetzt könnten wir theoretisch loslegen. Doch ich sagte ja, dass ich meine komplette Umgebung vorstellen werde. Dazu gehören auch Datenbank-Tools, Grafiksoftware und diverse Browser.

Datenbank-Tools wie phpmyadmin, HeidiSQL und NaviCat

In Netbeans und auch PHPEdit sind Datenbank-Schnittstellen integriert, doch bei größeren Datenbanken stoßen diese schnell an ihre Grenzen. Außerdem bieten sie keine großartigen Darstellungsoptionen für die Tabellen. Auf vielen Webservern ist deshalb phpmyadmin – ein Webinterface für mySQL-Datenbanken – vorinstalliert. Das stößt jedoch besonders bei Backups schnell an die Grenzen.

NaviCat ist hingegen genau für diese Aufgaben prädestiniert, jedoch auch nicht ganz billig. Für Webentwicklung reicht normalerweise die MySQL-Version aus. Es gibt sie jedoch auch für andere Datenbank-Systeme wie Oracle, SQLite, PostgreSQL und einige mehr. Es gibt Versionen für OS X, Windows und Linux.

HeidiSQL ist ein kostenloses Datenbank-Tool, dass MSSQL- und MySQl-Datenbanken unterstützt. Es ist eigentlich für Windows läuft jedoch mit Wine auch auf Linux und OS X.

Grafiksoftware: Gimp, Ulead PhotoImpact, Photoshop

Grafiksoftware wird benötigt zum Erstellen von – wer hätte es gedacht – Grafiken. Zwar gibt es dank CSS die Möglichkeit große Teile des Designs ohne Grafiken umzusetzen, aber ganz ohne kommt keine ansprechende Website aus. Man sollte jedoch auch nicht immer gleich zu Grafiken greifen, wenn es nicht nötig ist.

Das Beste zuerst: Ulead PhotoImpact X3. Dies ist eine Software, die ursprünglich von der Firma Ulead entwickelt wurde und später von Corel übernommen. Die Software gibt es nicht mehr über Corel zu kaufen und sie wird auch – leider – nicht mehr supportet. Sie funktioniert jedoch immer noch und ist bei Ebay meist noch zu bekommen. Günstige, gute und leicht zu bedienende Software.

Gimp ist eine kostenlose Grafiksuite mit einer großen Community und vielen Plugins. Sie reicht im Umfang lange nicht an Adobe Photoshop heran, die Bedienung ist jedoch in vielen Sachen ähnlich.

Adobe Photoshop bzw. die Creative Suite inkl. Illustrator und InDesign sind die richtig teuren Profi-Werkzeuge. Das Ergebnis ist bei richtiger Bedienung berauschend, der Preis jedoch auch.

Browser: Safari, Internet Explorer, Firefox, Chrome und Opera

Jeder Browser interpretiert eine Website anders. Verantwortlich dafür sind die unterschiedlichen Entwickler und unterschiedlichen Engines. Was im Firefox klasse aussieht, dass könnte im Internet Explorer gar nicht dargestellt werden. Dazugehören z.B. Farbverläufe, abgerundete Ecken und sogar Schriften. Deshalb ist es wichtig, die neue Internetseite in wirklich jedem Browser anzuschauen.

Der Hinweis auf der Website: „Diese Internetseite ist optimiert für … “ zeugt von höchster Unprofessionalität. Der Website-Betreiber hat Sorge zu tragen, dass die Website in jedem Browser richtig dargestellt wird und die Inhalte gut lesbar sind. Einen Besucher zu zwingen, einen anderen Browser zu verwenden, ist nicht nur unmöglich, sondern auch eine Frechheit. Das wäre so als würde mir der Staat sagen, dass ich die Autobahnen nur benutzen darf, wenn ich Volkswagen fahre.

Die fünf größten Browser sind Safari, Firefox, Chrome, Internet Explorer und Iron. Opera liegt mittlerweile sogar hinter dem Android-Browser zurück. Eine aktuelle Verteilung in Deutschland kann man auf browser-statistik.de finden. Nicht nur jeder Browser interpretiert eine Website anders, sondern auch die unterschiedlichen Versionen tun dies. Alle Versionen aller Browser zu installieren, wäre jedoch der pure Wahnsinn und außerdem würde sich das Betriebssystem tierisch freuen. Deshalb gibt es Cross-Browser-Testing-Plattformen wie BrowserStack.

Mit diesem Rüstzeug lässt es sich ganz ordentlich arbeiten. Eine Website mit HTML, PHP, mySQL-Datenbank, CSS und JavaScript ist damit gut zu realisieren. Feinheiten und Tool-Optimierung gibt es in einem neuen Artikel.