In der letzten Ausgabe des Web-Elch haben wir einige grundlegende Überlegungen zur Erstellung von Webseiten vorgestellt. Außerdem wurde kurz auf die Verbreitung der verschiedenen Browser, die zugrundeliegenden Standards und einige andere beachtenswerte Punkte eingegangen.
Doch wie kommt eigentlich die Webseite, egal nach welchem Standard, zu ihrem HTML-Code? Und was für weitere Programme benötigt man noch, um z.B. Grafiken für den Einsatz im Internet aufzubereiten? Auf diese Fragen will der Web-Elch im September näher eingehen.
Doch bevor man überhaupt damit anfängt mit einem Editor die erste Zeile HTML-Code zu schreiben, müssen in den meisten Fällen erst noch die für die Webseiten notwendigen Grafiken erstellt werden.
Hier hat der angehende Webdesigner die Wahl zwischen dem Standardprogramm Photoshop in der aktuellen Version 5.5 oder aber einem selbst zusammengestellten Bündel von spezialisierten Programmen, die meist ausdrücklich für den Einsatz bei der Webgrafikerstellung programmiert wurden. Adobe bietet mit dem neuesten Release des Photoshop nach langer Wartezeit nun endlich die nötigen Werkzeuge für die Optimierung von Grafiken speziell für das Internet.
Leider wird dies nicht durch eine weitreichende Überarbeitung des Hauptprogramms erreicht, sondern Adobe packt einfach das bislang nur mäßig erfolgreiche ImageReady mit in die Box. Somit muß der Anwender zur webgerechten Weiterbearbeitung der Grafiken in ein zweites Programm wechseln. Lediglich die bei Photoshop in früheren Versionen stark unterentwickelten Exportfunktionen für GIF- und JPEG-Dateien wurden zeitgemäß überarbeitet. Alle weiteren neuen Funktionen in Pgotoshop beziehen sich eher nicht auf den Bereich Webdesign. Dem mit circa 1.600 DM relativ teueren Programm zur Bildbearbeitung ist hier stark anzumerken, daß es eigentlich für die elektronische Erstellung und Aufbereitung von Bildern für klassische Medien wie z.B. dem Printbereich entwickelt wurde.
Auch nach dem Update werden die wichtigsten Deteiformate für das Internet vom Photoshop nur halbherzig unterstützt. Lediglich das beiliegende ImageReady ist für den Einsatz für das Web optimiert. Das ganze Paket wirkt durch die unvollkommene Integration beider Teile wie ein Schnellschuß von Adobe um im Webdesignbereich keine weiteren Marktanteile zu verlieren. Schließlich ist ImageReady schon seit längerer Zeit am Markt verfügbar, konnte sich aber als Einzelprodukt nie so recht bei den Webdesignern durchsetzen.
Ein großer Konkurrent für das Photoshop und ImageReady Duo kommt seit einiger Zeit aus dem Hause Macromedia.
Für 169$ im elektronischen Bezug bietet man dort das Programm Fireworks 2.0 an. Fireworks ist deutlich anzumerken, daß es nur mit der Ausrichtung auf den Einsatz im Webdesign entwickelt wurde. Es bietet unter einer gewöhnungsbedürftigen Oberfläche alle normalerweise in professionellen Grafikprogrammen bekannten Funktionen und Werkzeuge. Das z.B. aus Photoshop bekannte Arbeiten mit mehreren Ebenen (hier Layern) wird selbsverständlich auch unterstützt. Zusätzlich findet man eine große Zahl webspezifischer Funktionen wie z.B. Image-Slicing (d.h. Aufteilen eines Bildes in mehrere Bereiche und den Export als HTML-Tabelle), Zuweisung von Funktionen zu bestimmten Ebenen oder Bereichen (z.B. für die Erstellung einer Image-Map) und eine ausgezeichnete Export-Funktion.
Beim Export als GIF, JPEG oder PNG ist es möglich die Auswirkungen der verschiedenen Exporteinstellungen in bis zu 4 verschiedenen Fenstern anzuschauen und die beste Möglichkeit auszuwählen. Selbst an die Anzeige der Dateigröße und der durchschnittlichen Downloaddauer wurde gedacht.
Im Moment stellt Fireworks wohl das beste Allroundprogramm für das Gestalten und Aufbereiten von Grafiken für das Internet dar. Da es auf den Seiten von Macromedia als Trialversion zum Download angeboten wird, sollte sich jeder in diesem Bereich arbeitende Webdesigner dieses Programm näher anschauen.
Bei unseren Internetprojekten setzen wir Fireworks als Zusatzprogramm nach der Erstellung einer Grafik mit einem anderen Programm ein. Da Fireworks in der Lage ist nahezu jedes Grafikformat zu lesen, stellt es eine ideale Ergänzung zu Programmen wie Photoshop oder Corel dar. Aber auch einzeln eingesetzt ist es momentan die Empfehlung des Web-Elch.
Womit wir bei dem nächsten Programm, bessser Programmpaket, angekommen sind. Die diversen im Handel schon ab 99 DM erhältlichen Coreldraw Versionen bieten eine Komplettlösung zur Grafikerstellung und Bildbearbeitung an.
Mit Coreldraw lassen sich sehr einfach Elemente wie z.B. Buttons oder Menüleisten erstellen und relativ problemlos als GIF exportieren. Photopaint bietet im Vergleich zu Photoshop fast identische Funktionen wie dieses und kann auch dessen Dateien lesen und schreiben. Hier findet der Webdesigner alles zum Erstellen und Bearbeiten von aufwendigen Grafiken. Die Exportfunktionen von Photopaint bieten ausreichende Vorschaumöglichkeiten und liefern Ergebnisse, die sich nur den mit Fireworks erstellten und optimierten Grafiken knapp geschlagen geben müssen. Zudem ist die Bedienoberfläche der Corel-Programme gelungen und für Einsteiger leichter erlernbar als z.B. die Photoshop-Oberfläche.
Eine optimale, und so vom Webelch auch benutzte, Kombination ist die Verwendung von Corel und Fireworks. Mit Coreldraw und Photopaint werden die Bilder erstellt. In Fireworks wird die entstandene GIF oder JPEG Datei dann weiter optimiert oder z.B. mittels Image-Slicing bearbeitet. Und zusammen kosten diese Programme immer noch weniger als Photoshop alleine.
Aus dem Sharewarebereich kommen natürlich auch einige Programme zur Grafikbearbeitung, die wir nicht unerwähnt lassen möchten. So bietet z.B. Paint Shop Pro für knapp 100$ alle für die Bildbearbeitung und Grafikerstellung notwendigen Funktionen und ist durchaus mit den großen wie Photoshop oder Photopaint vergleichbar. Die Firma Ulead bietet auf bestimmte Einsatzgebiete bei der Grafikerstellung und -bearbeitung optimierte Tools an. Erwähnenswert sind hier der GIF Animator (39,95$) zur Erstellung von Animationen und der Smart Saver Pro (59,95$) als Tool zur Optimierung der Dateigröße und damit der Downloadgeschwindigkeit für JPEG, GIF und PNG Dateien. Ein großer Vorteil der Sharewareprogramme ist die Möglichkeit sie vor dem Kauf zu testen und somit besser entscheiden zu können, ob sie wirklich im täglichen Einsatz hilfreich sind. Am Ende dieses Artikels finden Sie Links zu den Seiten mit der Downloadmöglichkeit.
Weitere Shareware oder sogar Freeware finden Sie auch auf den TUCOWS Seiten. Dort sind alle möglichen und unmögliche Tools rund ums Internet nach Kategorien sortiert zum Download abrufbar. Vom Browser bis zum Grafikprogramm listet TUCOWS alle aktuellen Programme, nicht nur für Windows, sehr übersichtlich und schnell auf.
Nachdem die grafischen Elemente nun mit dem einen oder anderen oben erwähnten Programm erstellt worden sind, muß natürlich der HTML-Code der Seiten irgendwie erstellt werden.
An diesem Punkt scheiden sich die Geister. Einerseits gibt es WYSIWYG Tools, wie z.B. Frontpage, Golive und Co., andererseits daneben immer noch die reinen Editoren, wie z.B. Homesite. Da HTML ein reines Textformat ist genügt normalerweise ein beliebiger Editor zum Erstellen, er muß nur in der Lage sein ASCII Text ohne irgendwelche Steuerzeichen zu erzeugen.
Ein guter HTML-Editor sollte darüber hinaus aber noch weitere Funktionen bieten. So findet man meist eine integrierte Projektverwaltung und die Möglichkeit einen FTP Zugang aus dem Editor heraus aufzubauen. Auch die Überprüfung (Validierung) des HTML-Codes sollte möglich sein. Und gerade für den Einsteiger gehört eine ausführliche Hilfefunktion in das Pflichtenheft des Editors.
Der absolute Favorit des Web-Elch unter den HTML-Editoren ist Homesite 4.0 von Allaire.
Für 89$ im elektronischen Vertrieb ist es nicht nur sehr günstig, sondern bietet alle erforderlichen Funktionen. Neben der Verwaltung des Projektes und der FTP-Funktion findet man eine sehr gute und ausführliche HTML-Hilfe, eine eingebaute Vorschaumöglichkeit und natürlich eine konfigurierbare Validierungsfunktion. Da es sich im Prinzip um einen reinen Texteditor handelt, wird der Code beim Bearbeiten nicht verändert und kann völlig frei editiert werden. Im Editor sind diverse Eingabehilfen zu finden. So schließt Homesite auf Wunsch die Tags vollautomatisch, zeigt Listen der für einen Tag verfügbaren Funktionen an und unterstützt bei der Erstellung von Tabellen, Links, Formularen und anderen HTML-Objekten. Auch DHTML, JavaScript, ActiveX, CSF-Anweisungen (ColdFusion kommt auch von Allaire) und CSS lassen sich erstellen und bearbeiten.
Durch die offene Architektur des Programms ist es möglich, Homesite mit weiteren Funktionen zu erweitern. Da Homesite vor dem endgültigen Kauf getestet werden kann, ist es eindeutig die Empfehlung des Web-Elch.
Ein Vertreter der WYSIWYG-Editoren ist Adobes Golive. Eigentlich als Mac-Programm unter dem Namen Cyberstudio von der Firma Golive entwickelt und auf dieser Plattform sehr erfolgreich, wurde die Firma Golive von Adobe gekauft und das Programm in der 4.0 Version jetzt für Windows verfügbar gemacht. Golive verfolgt einen ganz anderen Ansatz als z.B. Homesite. Wie in einem klassischen Layoutprogramm läßt sich eine HTML-Seite völlig ohne eine Zeile eingegebenen Code über interaktive Funktionen gestalten. Golive bietet daneben die Möglichkeit des direkten Zugriffs auf den Code, der aber aufgrund der gänzlich anderen Funktionsweise dieses Programms nicht einfach zu lesen und per Hand zu ändern ist. Alle gängigen HTML-Dialekte werden selbstverständlich unterstützt. Auch können Seiten für verschiedene Browser automatisch optimiert und DHTML, CSS etc benutzt werden.
Wer einen Editor sucht, der in seiner Funktionsweise mehr einer Layoutprogramm, wie z.B. QuarkXpress ähnelt, ist mit Golive sicher nicht schlecht beraten. Von allen WYSIWYG Editoren produziert es den besten Code und bietet alle Funktionen, die man bei der Erstellung von HTML-Seiten benötigt. Natürlich fehlt auch hier eine – ausgezeichnete – Projektverwaltung und eine FTP-Funktion nicht. Der einzige Wermutstropfen ist der relativ hohe Preis von 400-500 DM und die fehlende Probeversion vor dem Kauf. Adobe bietet nur eine Trialversion für den Macintosh an.
An dem Lernen von HTML kommt man allerdings auch bei dem Einsatz von z.B. Golive nicht vorbei. Auch der beste WYSIWYG-Editor kann nicht alle Eventualitäten bei der Anzeige einer HTML-Seite in den vielen verschiedenen Browsern berücksichtigen. Wenn das Ergebnis bei der Betrachtung zu sehr von dem ursprünglich geplanten abweicht, muß der Webdesigner doch wieder in der Lage sein den HTML-Code zu lesen und von Hand anzupassen.
Von der Verwendung der in den meisten Office-Paketen mittlerweile angebotenen HTML-Funktionen sollte man, wenn man es denn ernst meint mit dem Webdesign, Abstand nehmen und diese nicht benutzen. Der erzeugte Code überzeugt bei genauer Betrachtung meist überhaupt nicht und ist oftmals unnötig aufgebläht. Eine Sonderrolle nimmt hier allerdings das zu Office 2000 mitgelieferte Frontpage von Microsoft ein. Für den Webdesign-Neuling ist Frontpage eine gute Möglichkeit einfach und schnell HTML-Seiten zu erstellen. Alle für einen HTML-Editor nötigen Funktionen sind vorhanden. Allerdings richtet sich Frontpage doch etwas zu sehr an den Microsoft-Produkten aus. Es funktioniert am besten in Verbindung mit dem Microsoft Internet Explorer als Browser und einem Webserver von Microsoft. Viel man hier weiter in das Webdesign einsteigen wirkt Frontpage eher hinderlich. In einer homogenen Microsoftumgebung, z.B. im Intranet, leistet es allerdings gute Dienste. Und um die Kenntnis von HTML kommt man trotz allem auch hier nicht vorbei.
Unter der schon im Text erwähnten TUCOWS-Adresse findet man zu dem Thema HTML-Editoren noch allerlei nützliche Sharewareangebote. Hier lohnt sich ein intensiver Blick.
Bei TUCOWS wird man sicherlich auch bei der dritten benötigten Programmgattung fündig. Will man nämlich nicht die in den meisten Editoren eingebaute FTP-Funktion zum Upload seiner erstellten Seiten benutzen oder der Lieblingseditor bietet gar keine solche Möglichkeit, findet man hier eine große Auswahl an FTP-Programmen aus dem Share- und Freeware Bereich.
Dieser Artikel konnte sicher nicht jedes auf dem Markt befindliche Programm berücksichtigen. Er sollte aber als Hilfe zur Orientierung und Entscheidung dienen können. Außerdem wollte der Web-Elch natürlich nur Programme besprechen, die er selbst schon einmal benutzt hat.
Der Web-Elch nutzt zur täglichen Arbeit schon seit einiger Zeit erfolgreich folgende Programme:
CorelDraw und Photopaint zur Erstellung und Bearbeitung von Grafiken
Fireworks zur Nachbearbeitung und Optimierung
Homesite um die HTML Seiten zu erstellen
Diese Auswahl ist stellt auch die Empfehlung des Web-Elch dar und kostet zusammen weniger als Photoshop alleine. Nicht schlecht …
Weiterführende Links zum Thema
Homesite von Allaire
Ulead, z.B. Smart Saver und GIF Animator
Informationen zu Frontpage
Adobe Photoshop 5.5
Adobe Golive 4.0
Fireworks von Macromedia
Paint Shop Pro
Der TUCOWS Server