Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Programme zur Website-Gestaltung

Programme zur Website-Gestaltung

Die Produktion von Webseiten ist ein komplexer Prozess. Im Folgenden stellen wir ein paar Programme vor, die bei der Planung und Erstellung helfen. Die Struktur folgt dem üblichen Arbeitsablauf eines Projekts. Zuerst die Planung, dann erste Layouts und die Überlegungen, wie man diese Layouts in HTML und CSS umsetzt. Nach der eigentlichen Umsetzung geht es normalerweise an die Fehlersuche, browserspezifische Probleme wollen beseitigt werden. Den Abschluss bilden ein paar allgemeine Anmerkungen, wie man sich eine lokale Entwicklungsumgebung einrichten kann und das eigentliche »Online stellen« der Website.

Soweit es mir möglich ist, stelle ich hier Programme für alle wichtigen Plattformen vor. Gehen wir gleich in medias res und beginnen bei einem oft vernachlässigten – aber essentiellem – Part der Website-Gestaltung, und zwar der…

Planung und Konzeption

Am Anfang einer Website steht die Struktur: was will man mitteilen, wie gruppiert man die Inhalte sinnvoll, welche Navigationspunkte wählt man, usw.. Neben Papier und Bleistift kommen hier vor allem MindMapper, wie das kostenlose, javabasierte Freemind (Win, Mac, Linux) oder Outliner wie beispielsweise OmniOutliner (Mac) zum Einsatz. Die Struktur, bzw. Sitemap einer Website kann man sehr gut grafisch darstellen. Geeignete Programme sind neben Visio (Win), das nur für den Mac erhältliche OmniGraffle – aber auch mit dem in OpenOffice (Win, Mac, Linux) integrierten Zeichenprogramm »Draw« lassen sich ansehnliche Ergebnisse erzielen. Ein sehr spezialisiertes Programm für diese Phase ist Denim (Win, Mac, Linux) – leider noch etwas fehlerbehaftet und einarbeitungsintensiv. Nach der Planungsphase geht es dann an die…

Gestaltung

Papier und Bleistift können hier ebenfalls nicht schaden. Jetzt schlägt aber auch die Zeit für Grafikprogramme, wie Photoshop (Win, Mac), Illustrator (Win, Mac), Fireworks (Win, Mac) oder den kostenlosen Programmen Gimp (Win, Mac, Linux), Paint.Net (Win) oder Inkscape (Win, Mac, Linux). Steht das Layout, überlegt man, wie man dieses Layout am besten per CSS umsetzt. Man teilt es in bestimmte Regionen auf und überlegt sich, wie man beispielsweise die Grafiken möglichst ohne unnötige, zusätzliche HTML-Elemente integriert. Veerle beschreibt diesen Prozess in Ihrem Artikel »Div thinking cap« sehr genau, leider nur in englisch.

Die vorgestellten Grafikprogramme bieten natürlich auch die Möglichkeit, direkt HTML-Code zu exportieren. Dies geschieht aber, indem die Layouts in einzelne Grafiken aufgeteilt werden, diese in Layouttabellen gepackt werden (eine Todsünde) und man – lapidar gesagt – aus einer Grafik lediglich viele kleine gemacht hat. Dies will man natürlich nicht.

Editoren

Hier muss man hauptsächlich zwischen Editoren unterscheiden, die einem WYSIWYG-Kapazitäten zur Verfügung stellen und denen, die hauptsächlich auf direkte Quellcode-Bearbeitung ausgelegt sind. Was nun besser ist, lässt die Gemüter oft hochkochen – ich persönlich habe nichts gegen die sogenannten WYSIWYG-Editoren wie Dreamweaver, GoLive, Frontpage oder das kostenlose NVU. Sie können einem Webdesigner und -entwickler eine Menge Arbeit abnehmen, beispielsweise bei der Siteverwaltung. So kann beispielsweise eine Datei umbenannt werden und alle Links auf diese Seite werden in allen anderen Seiten automatisch geändert. Die Qualität des Quellcodes, den diese Programme erstellen wird zweifellos immer besser. Ohne grundlegende HTML-Kenntnisse wird man allerdings auch mit diesen Tools schnell an seine Grenzen stoßen – so fortgeschritten diese auch sein mögen. Die echte Street-Credibility bekommt man eh nur durch den Einsatz von Editoren, bei denen man möglichst viel per Hand eintippt :-) Scherz beiseite – wer heute noch Editoren ohne diverse kleine Helferlein für HTML, CSS, … benutzt, hat eventuell eine masochistische Ader. Editoren wie TopStyle, Style Master, PSPad (Win), BBEdit (Mac), skEdit (Mac) oder (mein Favorit) Textmate (Mac) bieten vielfältige Hilfestellung bei der Erstellung von HTML-, CSS- und anderen Dateiformaten an. Ob Syntax-Highlighting (Farbliche Hervorhebung des Quellcodes), Typeahead (man tippt beispielsweise ein »b« und erhält alle Funktionen, Tags die mit einem »b« beginnen), Code-Schnipsel-Verwaltung oder Stapelverarbeitung – diese Programme stellen einem vielfältige Hilfestellung bei der Erstellung von HTML-Seiten, Stylesheets, PHP-Dateien, … zur Verfügung.

Fehler finden und beseitigen

Leider klappt es nur in den seltensten Fällen, dass man ein Layout umsetzt, Stylesheets bearbeitet, Grafiken und Hintergrundbiler einsetzt und sich dann sofort alle Elemente an den richtigen Stellen befinden – und das auch noch in einer Vielzahl von Browsern, Versionen und Plattformen. Genauer gesagt passiert sowas eigentlich nie – und daher helfen einem auch für diesen Teil des Arbeitsablaufs ein paar Programme. Für mich mittlerweile ein unentbehrliches Tool zur Fehlersuche ist XyleScope. Hier kann man sozusagen per Röntgenblick eine Seite durchleuchten, bestimmte Bereiche markieren und dabei sehen, welche CSS-Stile angewendet werden und noch vieles mehr. Das Programm ist allerdings nur für den Mac erhältlich. Eine Nummer weniger komfortabel – dafür aber auch für viele Plattformen verfügbar – ist der DOM-Inspector, welcher in Firefox integriert ist. Auch hier kann man sich die Baumstruktur eines HTML-Dokumentes anschauen, bestimmte Teile markieren und deren Eigenschaften ansehen.

Arbeitet man mit JavaScript ist es schon etwas schwieriger Fehler zu finden. Neben dem manuellen Ausgeben von Variablen (was sehr mühselig sein kann, je nach Umfang des Projektes) steht mit Venkman ein JavaScript-Debugger zur Verfügung, der einem ein paar graue Haare ersparen kann. Allerdings ist die Einarbeitung in das Programm nicht zu unterschätzen – vor allem dann, wenn einem das Prinzip von anderen Debuggern nicht geläufig ist.

Weiterführende Links

Lokale Entwicklungsumgebung

Falls Sie nur reine HTML-Seiten benötigen Sie nicht unbedingt einen Webserver. Aber das Problem beginnt schon, wenn Sie mit stammrelativen Links arbeiten wollen, das heißt relativ zum Hauptordner der Website (in etwa so <a href="/pfad/zur/datei.html">). Das funktioniert nur in einem Webserver. Falls Sie auch serverseitige Skriptsprachen, wie beispielsweise PHP benutzen möchten, kommen Sie auf gar keinen Fall um einen Webserver herum, da diese Dateien von einem Webserver verarbeitet werden müssen und erst dann den generierten HTML-Code an den Browser ausliefern.

Nur Chirurgen operieren am offenen Herzen, aus Gründen der eigenen Sicherheit bevorzugt ein Großteil der Webdesigner und -entwickler eine lokale Testumgebung. Am einfachsten geht das mit Rundum-Sorglos-Paketen wie XAMPP, das einem sehr bequem einen Apache Webserver vorkonfiguriert mit PHP als Skriptsprache, eine MySQL-Datenbank, phpmyadmin zur Verwaltung dieser Datenbank, den Mercury SMTP-Server und noch eine Vielzahl an PHPErweiterungen installiert. Natürlich kann man dies alles auch einzeln installieren – das könnte aber Neulingen schnell die Tränen in die Augen treiben, diese sind mit so einem Paket auf jeden Fall am besten beraten.

Wenn man in einem Team an einem Projekt arbeitet ist es eigentlich Pflicht mit einem Versionierungssystem zu arbeiten. Hier werden die Dateien zentral in einem Repository verwaltet und jedes Teammitglied arbeitet an einer lokalen Kopie. Die aktuellen Dateien holt man sich von dem zentralen Repository (auschecken) und nach dem Bearbeiten stellt man seine Fortschritte dem restlichen Team zur Verfügung, in dem man diese wieder in das Repository einchecked. Besonders hervorgetan hat sich hier das quelloffene Versionierungssystem Subversion, das für eine Vielzahl an Plattformen zur Verfügung steht.

Weiterführende Links

FTP-Programme

Um die Dateien dann letztendlich auf den eigentlichen Server zu übertragen, benötigt man in der Regel ein FTP-Programm. Hier gibt es natürlich eine Vielzahl an Programmen. Zunächst einmal der freie und quelloffene FileZilla (Win) oder Cyberduck für den Mac. Als kommerzielle Programme hervorzuheben sind meiner Meinung nach FTP Voyager (Win) und Transmit (Mac).

Kommentare

Martin Labuschin
am 05.12.2005 - 09:06

Ich selber nutze auch Filezilla, jedoch habe ich dort den Nachteil gefunden, wenn man die Dateien wieder runterlädt: Es werden Leerzeilen hinzugefügt. Also nach jeder zeile kommt eine leere Zeile, das macht manchmal die Fehlersuche schwierig, wenn man im Team arbeitet, denn die Zeilenangabe wird dann nämlich echt kompliziert.

Der Artikel ist aber sonst wirklich gut geworden. Vorallem die Programmme zur Website-Konzeption muss ich mir mal näher anschauen.

Permanenter Link

Jens
am 05.12.2005 - 10:39

Hi,

wenn du schon "auschecken" schreibst, soltest
du auch "eincheckt" schreiben. ;)

Sonst ein netter Artikel. Grüße, Jens

Permanenter Link

Pascal
am 05.12.2005 - 11:22

Hallo,

ganz toller Artikel wieder einmal.

Habt ihr Lust alle 24 Türchen kurz vor dem Jahreswechsel als PDF anzubieten?

Wäre ne tipptopp Auslage fürs Büroklo ;-)

Gruß Pascal

Permanenter Link

Martin Labuschin
am 05.12.2005 - 13:57

Dein Vorschlag mit den PDF-Versionen gefällt mir. Ich werde mich mal drum kümmern, das durchzusetzen. Besonders weil man manches vielleicht mal "Schwarz auf Weiß" braucht, um noch mehr Leute damit zu erreichen, ist das sehr sinnvoll.

MfG

Permanenter Link

Heiko
am 05.12.2005 - 17:14

Der Vorschlag mit dem PDF ist wirklich klasse. Als Editor vermisse ich den guten alten Texteditor ;o) Bei Versionssoftware, schwöre ich im übrigen auf WinCVS. Mit Abstand der beste Beitrag im Adventskalender bisher, Kompliment!

Permanenter Link

Uwe
am 05.12.2005 - 17:50

Ich habe bei der alten Version meiner Seite wirklich noch viel mit Hand gearbeitet. Empfehlen kann ich da wirklich Phase5 als Editor. Ist erste Sahne. Wird zur Zeit leider nicht weiterentwickelt.

Und zum upload kann ich ftp-uploader empfehlen. Damit lässt sich auch ein Projekt mit mehreren tausend Seiten ftp-mäßig gut hinkriegen.

Beides sind übrigens für privat freeware.

Permanenter Link

Milian Wolff
am 05.12.2005 - 17:56

Netter Artikel, werde die Konzeptionsprogramme mal durchgehen, sowas hat bisher mein Bleistift und Block erledigt, aber mal sehen, wie es sich in Zukunft entwickeln wird.

Aber Ihr habt aufjedenfall eins der wichtigsten Developer-Programme für HTML / CSS "debugging" vergessen:
Die Developer-Toolbar für Firefox / Mozilla, ohne die geht garnix mehr!

Permanenter Link

Till Krüss
am 05.12.2005 - 19:13

WinCVS und Maguma Workbench/Studio hätte sich als Ergänzung des Artikel noch gut gemacht.

Meine Favoriten sind: Dreamweaver 8, CuteFTP und natürlich die FF-Developer-Toolbar : )

Permanenter Link

Jens Meiert
am 05.12.2005 - 21:02

Als Entwicklungswerkzeug empfehle ich waermstens IntelliJ IDEA, wenn auch originaer eine Java-IDE.

Permanenter Link

Christian Simon
am 05.12.2005 - 23:31

Wirklich ein guter Artikel zu dem Thema.
Noch ein wirklich gutes Tool zum JS debuggen ist die Javascript Shell von Jesse Ruderman.

Permanenter Link

Stefan Walter (Autor)
am 06.12.2005 - 03:15

Hallo, freut mich dass der Artikel gut angekommen ist. Die WebDev-Toolbar wird noch in einem anderen Artikel näher vorgestellt, da gibts dann jede Menge kleiner Tools und Helferlein dieser Art ... immer schön weiter kommentieren, falls das mit den PDFs klappt, sollten die Kommentare auf jeden Fall mit aufgenommen werden, man kann ja nicht alle Programme kennen :)

Permanenter Link

Alexander Brock
am 06.12.2005 - 14:11

Ich verwende überhaupt keine FTP-Programme mehr, ich bin jetzt bei einem Provider, bei dem ich SSH und SCP-Zugriff habe und so alles als .tar.bz2 hochladen und dann entpacken kann. Das ist auf jeden Fall wesentlich schneller (und nebenbei auch sicherer) als Dateiupload über FTP.

Pakete wie XAMPP mögen zwar einfach zu installieren sein, aber ich finde es besser, alles selbst zu installieren, weil man dann versteht, wie das alles zusammenarbeitet. Mir hat dabei dieser Artikel sehr geholfen.

Permanenter Link

Dennis
am 06.12.2005 - 16:41

Ich möchte Alexander zustimmen - auch ich halte SFTP für eine besser Alternative FTP gegenüber.
Leider schaffe ich es nicht - zumindest bis jetzt - von normalem FTP wegzukommen, weil viele Provider einfach nur FTP anbieten. Für so einen Fall ist Filezilla sicherlich gut geeignet, wer allerdings so Features sucht wie Login per Public-Key Verfahren, dem kann ich WinSCP wärmstens empfehlen.

Permanenter Link

Alexander Brock
am 06.12.2005 - 17:53

Wenn wir schonmal bei Software sind: Putty für SSH

Permanenter Link

Gabi
am 07.12.2005 - 23:31

Ich arbeite nur noch mit dem Texteditor und Phase5. Meinen uralten Dreamweaver habe ich in Rente geschickt, als ich zu Anfang des Jahres mein erstes css-Layout erstellte. Und für meine kleinen Privatprojekte brauche ich noch keine Siteverwaltung.

Grafiken erstelle ich ausschließlich mit Paint Shop Pro, das sich seit der Version 3.12 - über 10 Jahre - nutze, mittlerweile habe ich Version 9.

XAMPP habe ich mir vor kurzem auch mal installiert, damit ich auch mal offline Wordpress-Themes basteln kann. Installation war wirklich absolut einfach.

Permanenter Link

yoram
am 13.12.2005 - 14:27

als alternative Lokale Entwicklungsumgebung zu XAMPP auf Mac OS X: MAMP - funktioniert sehr einfach ohne in den Eingeweiden des vorhandenen Apache Servers rumpfuschen zu müssen und vereint alles was man lokal zum Entwickeln braucht: Apache ServerMySQLPHP

Ansonsten: habe eine Werkzeug-Liste zusammengestellt, was - meiner Meinung nach - für Web-Entwickler wichtig sein könnte (unvollständig und Mac-zentriert, sorry): Web-Toolbox.

Permanenter Link

Uli
am 01.01.2006 - 18:51

Der Artikel hat mir gut gefallen, wie auch die anderen in diesem Adventskalender auch.

Sehr bemerkenswert finde ich den Abschnitt zum Thema Versionsverwaltung. Dies wird sehr oft vergessen. Nicht nur in Teams, sondern auch für 1-Personen-Projekte ist dies ratsam.

Servus Uli

Permanenter Link

Die Kommentare sind geschlossen.