hasematzel.de

Update 09.06.05: Aufgrund einiger wertvoller Kommentare habe ich die Liste erweitert. Vielen Dank an die Leute, die ihr Kommentar abgegeben haben.

Die Entwicklung von Webseiten und Web-Applikationen erfolgt (zumindest bei mir) vorrangig in Texteditoren. Trotzdem gibt es diverse Tools (on- und offline), die den Entwickler bei der Arbeit unterstützen können. Die nachfolgende Liste stellt allerdings nicht meinen Klon von Vitaly Friedmans “Essential bookmarks for web-designers and webdevelopers” dar, die in letzter Zeit durch alle Blogs ging. Ich möchte mich vielmehr auf Werkzeuge konzentrieren – weniger auf Resourcen und Infoseiten.

Ich arbeite bei der Entwicklung vornehmlich auf Windows-Systemen. Linux bleibt den Servern vorbehalten. Deshalb kann es sein, dass einige der hier verlinkten Applikationen nur auf einer Windows-Umgebung laufen. Soweit mir das bewusst ist, versuche ich diese entsprechend zu kennzeichnen.

Browser

Der Browser ist das zentrale Element der Web-Entwicklung. Darum ist es eigentlich Pflicht für jeden Entwickler, mindestens die auf seinem System verfügbaren Varianten zu besitzen und zu benutzen.

Mehrere Internet Explorer auf einem System (Windows)

Eigentlich ist das nicht möglich, aber Joe Maddalone hat es geschafft und bietet Versionen gepackt zum Download an. Die Browser werden nicht installiert, sondern in ein Verzeichnis entpackt und teilen sich mit der aktuell installierten Version des IE einige Bibliotheken. Beizeiten kann das zu Problemen und Abstürzen (des Browsers/der Engine) führen, für Tests eines Designs in den unterschiedlichen IEs sind diese CAB-Dateien aber unbezahlbar – gerade auch, weil der IE fuer verschiedene Unzulänglichkeiten besonders hinsichtlich CSS 2 bekannt ist.

Mozilla Firefox

Für mich die Nr. 1 unter den Entwickler-Browsern, gerade auch, weil er unzählige Extensions als Helferlein hat. Den Firefox gibt’s auf mozilla.org.

Opera

Der Browser aus dem Norden ist zweifelsfrei ein tolles Ding, ich benutze ihn allerdings nicht zum Surfen. Für den Entwickler jedoch, stellt er eine weitere Testmöglichkeit dar.

Wenn alle Stricke reissen: Browsershots.org

Hat man den notwendigen Browser zum Test nicht zur Hand, gibt’s immer noch browsershots.org. Dort liegt eine Engine zur Verfügung, die Webseiten mit dem gewünschten Browser “abfotografiert”.

Extensions – Erweiterungen

Kommen wir zu meinem derzeitigen Lieblingsthema: Was die Entwickler von Extensions für den Mozilla Firefox im Moment an Helferlein entwickeln, ist begeisternd.

Aardvark

Diese Erweiterungen ging auch in letzter Zeit durch alle Linklisten, alleine auf del.icio.us haben 909 Leute den Bookmark. Aardvark erweitert die Funktionen des Browsers massiv, in dem die Tastatur nach Aktivierung von Aardvark (pro Seite möglich) neu konfiguriert wird und mehrere Funktionen bereitstellt. So lassen sich z. B. beliebige Elemente einer Webseite entfernen oder mit einer Hintergrundfarbe ausstatten.

Für PHP-Entwickler: phpFS

phpFS erweitert die Suchbox des Firefox um die Suche in der PHP-Funktionsliste auf php.net. Merke: Mit STRG+K springt man im Firefox direkt in die Suchbox, in der man dann mit STRG+ARROWUP oder STRG+ARROWDOWN durch die Einträge scrollen kann.

Webdeveloper

Das ist die wohl nützlichste Erweiterung des Fuchses: Eine Sammlung von zahlreichen Tools, die das Entwickeln von Webseiten vereinfacht. Vom Echtzeit-Editieren der CSS-Angaben über das Löschen der HTTP-Authentifizierung, über das Markieren von einzelnen Elementtypen (z. B. zur Kontrolle von margins und paddings) bis hin zu Direktsprüngen auf wichtige Validierungsseiten ist alles enthalten.

Checky

… bietet den Direktsprung auf sehr viele Online-Validierungstools für HTML, CSS und Co., Accessibility-Prüfungen, Suchmaschinenoptimierung usw.

LiveHTTPHeaders

Ähnlich der Javascript-Konsole erzeugt diese Erweiterung das Abbild des derzeitig laufenden HTTP-Requests als Echtzeit-Log. Grandios um insbesondere in Applikationen den Datenaustausch zwischen Klienten und Server zu überprüfen. Es liessen sich aber auch schon diverse Netzwerkprobleme in einem komplexen WAN/Intranet analysieren!

Greasemonkey

Mit Greasemonkey kann ich lokales Javascript an beliebige Webseiten hängen und ausführen. Die Möglichkeiten sind unverstellbar. So lässt sich z. B. ein Request-Tracker für AJAX-Requests einbauen.

Neu: Live HTML Validator

Der HTML Validator befindet sich nach der Installation unten recht im Firefox/Mozilla- Fenster. Wenn aktiviert, überprüft die Erweiterung die dargestellte Seite auf Basis von Tidy und zeigt Fehler “live” an. Auch im “View Source”-Fenster (STRG+U) baut der HTML Validator zwei kleine Fenster am Fuss der Anzeige, in der Fehler und deren Erklärung angezeigt werden. Sehr hilfreich.

Dies sind meine Empfehlungen, Jörg Petermann hat zum Thema Firefox-Erweiterungen noch eine wesentlich ausführlichere Liste zusammengestellt.

FTP

Ich habe mich recht lange mit den vormals ziemlich bekannten Tools a la WS_FTP, CuteFTP etc. herumgeschlagen. Neben einem FTP-Client auf der Kommandozeile (der beizeiten immer mal wieder gebraucht wird), gibt es jetzt aber nur noch eine Wahl für mich: Filezilla. Das unglaublich vielseitige Programm ist auch des sFTPs/SSLs fähig, hat verschiedene Encryption-Module und kann auch gut mit Proxies!

Editoren

Editoren sind das A und O der Webentwicklung. Punkt. Professionell verwende ich Homesite und UltraEdit – beide Produkte kosten etwas. UltraEdit hat den Vorteil, dass es ein sFTP-Modul hat und auch gut mit TortoiseCVS umgehen kann, während mir Homesite persönlich irgendwie lieber ist. Aber das ist Geschmackssache. Eclipse hatte ich mal auf dem Rechner, das Ding ist aber zur reinen Web-Entwicklung ein echtes Schwergewicht.

Weaverslave

Privat verwende ich Weaverslave. Auch dieser Editor bietet alles, was das Herz begehrt und ist zusätzlich kostenfrei. Man kann Thomas Weinert gar nicht genug danken.

Open XML Editor

Wie der Name schon sagt: Ein kleiner, feiner Editor, der auch mit HTML/CSS/PHP usw. prima umgehen kann, aber erst in XML-Dateien seine Stärke ausspielt.

Weitere Software

Mal abgesehen von den “Grossen” (Photoshop etc.) gibt es auch noch ein paar kleine Programme, die auf keiner Entwickler-Platte fehlen sollten.

IrfanView

Der Tausendsassa für Bilddateien. Thumbnails im Batch erzeugen, Bilder konvertieren, *.ico-Dateien erzeugen, Bildverzeichnisse browsen – kann er alles und noch mehr.

Online-Werkzeuge

Werkzeuge online gibt es wie Sand am Meer. Zu zahlreich ist das Angebot, zu schwer zu finden (teilweise). Ich führe mal meine Favoriten an:

Designer’s toolbox

Viele, viele, viele kleine Helferlein.

Subterrane: lorem ipsum generator

Ich weiss, es gibt derer viele, aber irgendwie nutze ich immer diesen.

URLTrends

Guter Input für obligatorische Homepage- Schwanzlängenvergleiche.

ColorMatch

Feine Farbkombinationen (inkl. Export in zahlreiche Formate) sind mit diesem Tool eine Leichtigkeit.

Wayback Machine

Wollt ihr wissen, wie Webseiten früher mal ausgesehen haben? Schaut euch z. B. mal Amazon an ;)

Neu: Online CSS-Formatierer

Leider habe ich den Via-Link verloren, irgendwie bin ich gestern Abend auf einem Online-Tool zum Formatieren von CSS gelandet: Ich gebe einfach ein Stück CSS-Code oder den Verweis auf eine CSS-Datei an, wähle die Komprimierungsrate – und schon wird mein CSS gereinigt. Je nach Schreibweise kann man dabei über 50% Dateigrösse einsparen.

Habe ich was vergessen? Kenne ich vielleicht irgendwas noch nicht (argh!)? Schreibt es mir bitte in die Kommentare. Ich werde die Vorschläge dann in den Beitrag übernehmen.