Category Archives: Technik-Tip

Eines der meisgenutzten Formate zur Erstellung von Bilschirmgrafiken ist das GIF. Das Graphic Interchange Format wurde von CompuServe in der zweiten Hälfte der achtziger Jahre für den Versand von Bilddaten über DFÜ und für die Darstellung auf dem Bildschirm entwickelt.

Die zwei Formate GIF87a und GIF89a unterscheiden sich nur in einem Punkt. GIF89a unterstützt auch Animationen zusätzlich zur Transparenz und Interlacing bei GIF87a. GIF ist im Gegensatz zum JPEG ein Dateiformat mit einer indizierten Farbtiefe von höchstens 8 bit. Das bedeutet in einem GIF können maximal 256 Farben genutzt werden. Da aber ein Browser auch nur 216 Farben sicher darstellen kann, bedeutet dies um die einigermaßen korrekte Darstellung eines GIFs auf verschiedenen Monitoren sicherzustellen, sollten in einem GIF auch nur diese 216 Farben der Browserpalette genutzt werden.

Natürlich sind heutzutage die meisten Grafikkarten (Röhren-Monitore haben praktisch keine festgelegte Farbanzahl, LCDs meist schon) in der Lage mehr als 216 bzw 256 Farben darzustellen, aber wenn nicht, werden GIFs mit anderen als den 216 sicheren Farben gedithert (gerastert) und unschön.

Wann sollte man nun aber ein GIF benutzen. Die Antwort ist relativ einfach. GIFs eignen sich hauptsächlich für Elemente wie z.B. Buttons, Schriftzüge, Headlines usw. Also all die grafischen Bestandteile einer Seite, die ohne größere Probleme auch mit 216 bzw 256 Farben erstellt und angezeigt werden sollen.

GIF komprimiert die Bilddaten verlustfrei unter Zuhilfenahme des LZW-Verfahrens, das von Unisys entwickelt wurde. Diese verlustfreie Kompression funktioniert zeilenweise. Das bedeutet mit horizontal verlaufenden Farbabschnitten erstellte Grafiken (z.B. unser Logo oben) komprimieren besser als vertikal unterbrochene Flächen (z.B. Gefängnisgitter). Alle in einer Zeile hintereinander auftretenden Punkte einer Farbe werden zu einem Datensatz zusammengefasst. Sollte in dieser Zeile die Farbe ständig wechseln, funktioniert diese Methode der Komprimierung nicht mehr effektiv und die Dateien werden größer.

Ein gutes Beispiel dafür ist der Vergleich bei der Kompressionsleistung eines Screenshots aus der letzten Ausgabe. Zuerst das Bild als GIF mit einer Größe von 55 KB:

und dann als JPEG-komprimiertes Bild mit 31 KB Größe:

Beide sind im Aussehen nahezu identisch, aber das GIF ist fast doppelt so groß und braucht somit auch etwa doppelt soviel Übertragungszeit. Das bei der verlustbehafteten JPEG-Komprimierung Bildteile verwaschen ist hier nicht so dramatisch. Für Fotos oder sonstige Echtfarbbilder ist das GIF-Format also nicht oder nur bedingt geeignet. Schon das Runterrechnen eines 24 bit Echtfarbbildes auf eine 8 bit Palette kann nicht – jedenfalls nicht ohne Qualitätsverluste – so durchgeführt werden, daß eine webkonforme Farbpalette verwendet werden kann.

Ganz anders sieht der Vergleich allerdings bei Grafiken aus, die mit einer 8 bit Palette erstellt wurden. Als Beispiel dient hierfür eine Grafik aus unserer Titelseite.

Als GIF ist das Bild 2 KB groß:

und als JPEG Bild ebenfalls 2 KB

Doch im Detail der JPEG Grafik sieht man, daß die verlustbehaftete JPEG-Kompression hier nicht die richtige Wahl ist

Diese entstehenden Artefakte lassen sich nicht vermeiden und sind gerade bei der Darstellung von Schriften in Menügrafiken unschön und stören beim Lesen. GIF ist also das Format der Wahl bei der Erstellung der meisten grafischen Elemente einer Webseite bis auf Fotos und Echtfarbdarstellungen. Daneben bietet das GIF-Format auch Transparenz- und Animationseffekte, die beim JPEG-Bild fehlen. Doch auf diese speziellen Eigenschaften des GIF gehen wir im nächsten Teil ausführlicher ein.

Ja und nun? Der Rechner ist gekauft, Leitungen sind vorhanden, etwas Grundwissen auch, Software ist installiert und läuft. Aber wie ist das nun mit den Internetseiten und dem Design? Hier hilft meist ein uraltes und oft schon vergessenes Hilfsmittel weiter. Das Buch.

Wie bei jedem anderen Lernprozeß ist es am besten die zu lernenden Dinge erst zu lesen, zu verstehen und dann in der Praxis (sprich am Rechner) auszuprobieren. Während der ersten Zeit des Webelch und weit davor, habe ich einen Großteil meiner Zeit mit dem Suchen und Lesen guter Literatur zum Thema Webdesign verbracht. Fündig wird man aber meist nicht in der Buchhandlung um die Ecke, sondern auf dem eigenen Schreibtisch. Die Erfahrung zeigt: Gute Webdesignliteratur ist englisch und meist nur über das Internet zu beziehen.

Wenn man eine Kreditkarte zur Verfügung hat (ist eh ein lebenswichtiges Hilfsmittel im Web), dann sollte man Fachliteratur über Amazon in den USA einkaufen. Die Bücher sind topaktuell und meist um Längen billiger als im deutschen Buchhandel. In den USA gibt es keine Buchpreisbindung, d.h. viele Bücher kommen mit Rabatten um die 20-40% in den Onlinehandel. Der Versand klappt innerhalb von maximal 4 Wochen völlig problemlos und ist relativ kostengünstig. Noch ist keine einzige Sendung verschollen oder falsch geliefert worden. Amazon bietet durch die hervorragenden Suchfunktionen und die ausgezeichneten Besprechungen einzelner Titel wirklich den perfekten Service rund ums Webdesignbuch.

Im folgenden eine kurze Liste mit einer Grundausstattung an guten und praxistauglichen Büchern. Es gibt natürlich viele weitere gute Titel, aber die vorgestellten reichen erstmal aus. Der Rest kommt beim Arbeiten oder wie der Lateiner sagt: Der Hunger kommt beim Essen. Einfach mal in Amazon stöbern. Dort findet man immer noch mehr gute Literatur.
Web Pages That Suck
Vincent Flanders und Michael Willis
ISBN 0-7821-2187-X
39 $

Das Top-Buch zum Thema: Warum sind manche Seiten einfach schlecht und wie vermeide ich die dusseligsten Fehler beim Webdesign. Von den beiden Autoren in launiger und freundlicher Weise erklärt.
Mehr dazu unter www.webpagesthatsuck.com
Designing Web Graphics.3
Lynda Weinman
ISBN 1-56205-949-1
55 $

Die gute Lynda ist eine der großen Damen des amerikanischen Webdesign und erklärt einfach und verständlich alles rund um das Erstellen von Bildern für den Webeinsatz. Auch manch anderer Programmiertrick wird verraten.
Mehr dazu unter www.lynda.com/dwg3
Web Navigation
Jennifer Fleming
ISBN 1-56592-351-0
34,95 $

Grundlegende Anmerkungen zum Planen, Organisieren und Gestalten von Inhalten und den dazugehörigen Navigationsschemata. Mit vielen Beispielen für gutes Design.
HTMl – The Definitive Guide
Chuck Musciano und Bill Kennedy
ISBN 1-56592-492-4
32,95 $

Nachschlagewerk zu den verschiedenen HTML-Standards und deren Umsetzung und Unterstützung in den diversen Browsern. Mehr ein Lexikon als ein Lehrbuch. Aber eine Hilfe neben dem Rechner.
Mehr dazu unter www.oreilly.com/catalog/html3/
JavaScript – The Definitive Guide
David Flanagan
ISBN 1-56592-392-8
39,95 $

Der einfachste Weg etwas mehr Interaktivität in HTML-Seiten einzubauen ist der Einsatz von JavaScript. Dieses Buch beschreibt die Sprache und ihre Möglichkeiten. Auch wieder hervorragend zum Nachschlagen geeignet.
Deconstructing Web Graphics.2
Lynda Weinman
ISBN 1-56205-859-2
39,99 $

Lynda ist recht mitteilungsbedürftigt. Insgesamt 6 ihrer Bücher stehen in meinem Schrank. In diesem hier nimmt sie beispielhaft einige Seiten auseinander und erklärt die dahintersteckende Programmierung und Grafikbearbeitung.
Mehr dazu unter www.lynda.com
Creating Killer Web Sites 2nd Edition
David Siegel
ISBN 1-56830-433-1
49,99 $

David Siegel wird oftmals kontrovers diskutiert. Ohne Zweifel ist er aber einer der großen Könner des Webdesigns. Er ist auch der Erfinder des berühmten SINGLE-PIXEL-GIF-TRICKS.
Mehr dazu unter www.killersites.com
Creating Killer Interactive Web Sites
ADJACENCY
ISBN 1-56830-373-4
49,99 $

Hier beschreibt das Team der Agentur ADJACENCY einige ihrer Projekte und erläutert die angewandten Techniken. Sehr interessant, auch wenn es nur um grosse Projekte für noch grössere Firmen geht.
Mehr dazu unter www.adj.com/killer
Secrets Of Successful Web Sites
David Siegel
ISBN 1-56830-382-3
49,99 $

Hier stellt Siegel wieder einige Projekte vor. Außerdem erhält man Tips und Arbeitshinweise zum Projektmanagment bei Webdesignaufträgen. Stellenweise dreht es sich mehr um Betriebswirtschaft als um Webdesign. Aber das eine geht meist nicht ohne das andere.
Mehr dazu unter www.secretsites.com
Ja und wenn man nach dem Lesen dieser dicken Wälzer noch Lust und Laune hat etwas am PC zu machen, sollte man unter http://www.teamone.de/selfaktuell/ den ständig aktualisierten HTML-Kurs von Stefan Münz durchlesen oder noch besser auf den eigenen Rechner downloaden. Beim Webelch ist das Programm jederzeit im Zugriff. Und ein großer Vorteil: Es ist in deutsch.

Da kommt eine Menge Zeug zusammen fürs Lernen, aber der Winter steht vor der Tür. Dann liest man gerne mal im warmen Zimmer. Leider sind trotz intensiver Suche irgendwie keine guten Bücher in Deutsch zu finden. Eine große Marktlücke für Autoren. Mal ran an die Tasten Jungs.

Und ganz wichtig eine kurze Schlußbemerkung. Mit Amazon ist immer www.amazon.com gemeint. Der deutsche Ableger liefert amerikanische Literatur meist nur zum aufgedruckten Preis umgerechnet in DM. Aber ist ja eigentlich klar. Amerikanische Bücher kauft man in Amerika. Wo sonst.

Im Grunde ist die Rechnerplattform bei der Erstellung und Betrachtung einer Internetseite egal. Beinahe jeder Computer und die meisten Betriebssysteme können die für das Webdesign notwendigen Arbeiten ausführen. Es reicht ein mehr oder weniger komfortabler HTML-Editor (ein Text Editor reicht auch), ein Grafikprogramm und zum Zugriff auf das Web ein Browser und ein TCP/IP Stack. Die gängisten Browser sind für meisten Hard- und Softwareplattformen erhältlich. Auch ein Editor und ein Grafikprogramm sind entweder extern erhältlich oder aber schon im Betriebssystem eingebaut. Steigen natürlich beim Nutzer die Ansprüche an die verwendeten Werkzeuge, scheiden bei Bevorzugung bestimmter Software einige Systeme aus. So ist z.B. das beliebte Photoshop oder Adobes Golive entweder nur für PC (Windows 9x, Windows NT) oder für den Apple Macintosh erhältlich.

Somit haben sich für den großflächigen Einsatz im Webdesign genau diese zwei Systeme qualifiziert. Zwischen den Anhängern der beiden Systeme kommt es im Dialog immer wieder zu Szenen, die einem Kreuzzug der einen oder anderen Seite für eine vermeintlich gerechte Sache gleichen.

Ist wirklich ein System besser als das andere? Oder handelt es sich hier nur um Schattenboxen? Der Web-Elch versucht anhand des Vergleiches der beiden Systeme etwas Licht in das Dunkel zu bringen. Wir stellen anhand einer Auflistung einiger wichtiger Bewertungsbereiche die Vor- und Nachteile der beiden Rechnerplattformen vor. Die Entscheidung müssen Sie dann aber trotzdem noch selber treffen. Denn soviel sei verraten: Das ideale System existiert nicht.
Leistungsfähigkeit
Erweiterbarkeit
Betriebssystem
Software
Bedienbarkeit
Preise
Fazit
Leistungsfähigkeit

Von einem modernen Rechner wird erwartet, daß er fast verzögerungsfrei auf Eingaben reagiert und subjektiv ausreichend schnell wirkt. Gerade bei der Grafikbearbeitung, die beim Webdesign häufig vorkommt, sollte die Arbeit mit den Programmem zügig von der Hand gehen.

Ein Windows-PC (kurz Wintel genannt) bietet meist einen Prozessor der neuesten Pentiumgeneration (Pentium II, Celeron oder PentiumIII) und verfügt über ein CD-ROM, eine ausreichend schnelle Grafikkarte und mehr oder weniger viel Arbeitsspeicher und Festplattenkapazität. Unter einer Ausstattung mit mindestens 128 MB Speicher sollte man allerdings kein System mehr anschaffen. Das gleiche gilt auch für die installierte Plattenkapazität. Bei Preisen von 300 DM für 15 GB ist hier Sparen nicht angesagt.

Die Art und Geschwindigkeit des Prozessors wird zwar in der Werbung immer groß hervorgehoben, ist aber nicht mehr so entscheidend. Ein Prozessor der o.g. Art mit mindestens 350 MHz ist ausreichend schnell. Mehr MHz sind meist nur Augenwischerei. Ein Auto wird schließlich auch nicht nur über die PS-Zahl verkauft. Hoffentlich …

Ein Macintosh (Mac) System ist nach der Umstrukturierung der Firma Apple nur noch von Apple direkt zu erhalten. Lizenz- oder Nachbauten wie bei den Wintel-Systemen gibt es hier nicht mehr. Der eingesetzte G3 oder G4-Prozessor mit Taktfrequenzen ab 350 MHz und die weiteren Austattungsmerkmale unterscheiden sich in der Leistungsfähigkeit nicht von den Wintel-Systemen. Auch wenn Apple immer wieder bei der Vorstellung eines neuen Systems behauptet, daß es schneller als jeder Intel-basierte PC ist. Bei der täglichen Benutzung nivelliert sich dieser auf dem Papier durchaus bestehende Unterschied wieder.

Eine vernünftige Ausstattung setzt auch hier wieder mindestens 128 MB Speicher und große Festplatten voraus. Aufgrund des eingesetzten Betriebssystems ist sogar eher ein größerer Arbeitsspeicher wünschenswert. CD-ROMs und die weitere eingesetzte Technik entsprechen leistungsmäßig dem Wintel-Pendant.

Die erste Runde geht somit unentscheiden aus. Sowohl Wintel als auch Mac sind ausreichend leistungsfähig für den Einsatz beim Webdesign.

Erweiterbarkeit

Der Wintel-PC war schon seit jeher durch eine offene Architektur jederzeit problemlos erweiterbar. Durch den Einsatz von ISA-, PCI- oder AGP-Steckkarten kann die Leistungsfähigkeit und Ausstattung an geänderte Anforderungen angepasst werden. Auch der Tausch von Prozessoren, die Erweiterung des Speichers oder der Einsatz weiterer Speichermedien (Festplatten, ZIP, CD-Brenner usw) ist ohne Schwierigkeiten möglich. Das auch extern Geräte wie Scanner, Modem, Drucker oder Bildschirme in reichhaltiger Auswahl zur Verfügung stehen, versteht sich in der Wintel-Welt praktisch von selbst.

Die ersten Mac-Systeme waren hingegen nur mit Modulen von Apple selbst aufrüstbar. Dies bedeutete einerseits gewisse Einschränkungen in der Auswahl der Erweiterungen, aber auch einen meist deutlich höheren Preis für eine Um- oder Aufrüstung.

Mit der Einführung der neuen Modelle auf PowerPC Basis setzt aber auch Apple vermehrt Standard (Wintel) Komponenten ein. PCI-Karten, Speicher, Festplatten und externe Geräte können mittlerweile fast beliebig eingesetzt werden. Nur ist oftmals die Unterstützung von Seiten der Hersteller im Bezug auf die Lauffähigkeit der Produkte im Mac (Treiber!!) nicht optimal. Bei einer auch für den Mac einsetzbaren Erweiterung muß man weiterhin mit etwas höheren Preise kalkulieren.

Im Bereich Erweiterbarkeit bildet sich ein kleiner Vorteil für Wintel. Hauptsächlich zurückzuführen auf die größere Verbreitung und die Vielfalt in diesem Hardwarebereich. Aber der Mac holt auf. Gerade nach dem Einsatz der USB-Technik für den Anschluß externer Geräte kommt Bewegung in den Markt und die Preise.

Betriebssystem

Das Wintel-System Windows ist mittlerweile in der Version 98 ein durchaus brauchbares und stabiles Betriebssystem geworden. Entgegen allen Vorurteilen, die meist eher Anti-Microsoft-Phobien entstammen, bietet es im Vergleich zum Mac mehr Möglichkeiten und unterstützt so z.B. echtes Multitasking. Auch die Verwaltung des Speichers ist besser gelöst und führt nicht so häufig zu Abstürzen. Da auch das neueste Windows immer noch auf einem DOS-Kern basiert, läßt sich auch 15 Jahre alte Software meist ohne größere Schwierigkeiten einsetzen. Allerdings überfordern die über die Jahr gewachsenen Möglichkeiten des Systems im Bezug auf die Konfiguration oftmals den Einsteiger oder Nur-Anwender.

Dem Mac-System (Version 8.6 ist aktuell) merkt man deutlich an, daß es langsam in die Jahre kommt. Apple versucht zwar schon seit Jahren das System auf moderne Füße zu stellen. Verwirrt aber den Anwender durch immer neue und nicht sehr stringente Entwicklungsstrategien. Multitasking funktioniert nur kooperativ. Ein amoklaufendes Programm kann durchaus den gesamtem Rechner abstürzen lassen. Auch die Speicherverwaltung ist nicht so optimal gelöst. Mac-Programme benötigen oft mehr eingebauten Speicher als vergleichbare Windows-Programme. Ob und wie alte Programme auf neuen Versionen des Betriebssystems laufen (Abwärtskompatibilität) gleicht meist eher einem Quiz.

Das Betriebssystem der Wintel-Systeme hat im Vergleich klar die Nase vor. Allen Rufen gegen ein Microsoftmonopol zum Trotz. Und hat nicht auch Apple ein Monopol beim eigenen Betriebssystem? Ob und wie neue Mac-Systeme sich verhalten und wie ihre Stabilität verbessert wird, erscheint im Moment leider immer noch etwas unklar. Trotzdem kann man natürlich auch mit dem Mac-System arbeiten und die anfallenden Aufgaben erledigen.

Software

Dieser Abschnitt fällt eher kurz aus. War es früher durchaus so, daß gerade im Bereich der Grafiksoftware der Mac einen klaren Vorteil ausspielen konnte, erscheinen mittlerweile die Programme in gleicher Version für beide Systeme.

Daten können zwischen Wintel und Mac problemlos ausgetauscht werden. Die Einbindung beider Systeme in gemeinsame Netzwerke stellt auch keine Hürde dar. Im Funktionsumfang gleichen sich z.B. Photoshop für den Mac und für Windows bis in Details. Die Bedienung der Programme ist natürlich aufgrund der verschiedenen Systeme durchaus unterschiedlich.

Ein klares Unentschieden. Weder Mac noch Wintel haben einen Vorteil bei der Softwareverfügbarkeit. Für beinahe jeden Zweck gibt es entweder identische Programme oder Programme mit gleichem Funktionsumfang. Programme für das Webdesign gibt es für beide Systeme in hoher Qualität.

Bedienbarkeit

Ein eher philosophisches Problem. Mac und Wintel lassen sich beide einfach bedienen. Durch die weite Verbreitung der Wintel-Systeme ist deren Bedienung natürlich scheinbar eingängiger. Aber ein langjähriger Mac-Anwender findet sich dort ohne Probleme zurecht. Umgekehrt gilt natürlich auch, daß der Mac für einfacher bedienbar gehalten wird. Aber diesen kann ein Wintel-Benutzer ebenfalls ohne größere Verrenkungen bedienen.

Beide Systeme haben über die Jahre immer wieder Ideen des jeweils anderen aufgenommen und für sich adaptiert. Nur die leidige Beschränkung der Apple-Maus auf nur eine Taste stört. Um die Funktion der zweiten oder dritten Maustaste des Wintel-PCs zu simulieren müssen immer noch die CTRL oder andere Tasten mitgedrückt werden. Dabei wäre es sicher für Apple einfach die Maus mit einer Taste mehr auszustatten.

Ob man es besser findet, daß die Menüleiste eines Programmes immer oben ist (Mac) oder am jeweiligen Programmfenster befestigt wird (Wintel) ist eher eine Geschmacksfrage, denn ein gravierender Bedienunterschied. Wer mit dem einen oder anderen System in die Computerei hineingewachsen ist, findet sein jeweiliges System zwar besser und einfacher. Aber im Grunde besteht kein Unterschied in der Bedienbarkeit.

Preise

Hier findet man die größten und vielleicht auch entscheidensten Unterschiede. Durch die enorme Vielfalt der Anbieter auf dem Wintel-Markt herrscht ein gnadenloser Verdrängungwettbewerb. Dieser Kampf um Marktanteile wird hauptsächlich über den Preis ausgetragen.

Ein typisches Wintel-System steht hier stellvertretend als Preisbeispiel:

IBM Pentium III 500MHz
128 MB Speicher
10,2 GB Festplatte
40x CD-ROM
16 MB Grafikkarte
Sound
Maus + Tastatur
17″ Monitor

2498,- DM (entnommen dem neuesten Vobis-Prospekt)

Oftmals findet man sogar ein ähnlich ausgestattes System für komplett unter 2000,- DM. Da man in so ziemlich jedem Elektromarkt, aber auch bei Aldi, einen Wintel-PC kaufen kann, lohnt sich der Preisvergleich.

Einen Mac gibt es hingegen nur von einem Hersteller. Apple hat alle Lizenzen für Nachbauten zurückgezogen und so zwar seine wirtschaftlich Lage massiv verbessert, aber auch jeglichen Wettbewerb unterbunden. Ein typischer Mac sieht in der Kalkulation daher etwas anders aus:

G3 Powermac 450 MHz
128 MB Speicher
9 GB Festplatte
24x CD-ROM
16 MB Grafikkarte
Sound
Maus + Tastatur
17″ Monitor

7067,- DM

Mehr als das Doppelte für den Mac. Sicher ist das Gehäuse schöner, aber diese Preise sind eigentlich unakzeptabel hoch.

Ein großer Minuspunkt für den Mac. Er ist meist einfach zu teuer. Auch Zusatzgeräte sind oftmals mehr als doppelt so teuer, wie das vergleichbare Wintelgegenstück.

Fazit:

Nach den Fakten eigentlich ein klarer Punktsieg für Wintel. Doch, bei der täglichen Arbeit des Webdesigners leisten beide Systeme gute Unterstützung. Sie sind gleichwertig. Nur der hohe Preis des Mac wirkt abschreckend.

Warum werden dann trotzdem beim Webdesign eher Macs als Wintel-PCs eingesetzt? Oftmals passiert Webdesign im Umfeld der Kreativen, also in Werbeagenturen usw. Diese Gruppen setzen schon seit jeher Mac-Systeme ein. Hier ist es eher ein historischer denn ein rationaler Grund auch weiterhin den Mac vorzuziehen.

Auch der Wintel-PC könnte dort problemlos eingesetzt werden. Es bleibt also doch eher bei einer Glaubensfrage. Oder besser wäre es in diesem Zusammenhang von dem persönlichen Geschmack zu sprechen. Schließlich fahren wir ja auch nicht alle japanische Kleinwagen nur weil es vernünftiger und preiswerter ist.

Man muß selber entscheiden, welches System man für das Webdesign einsetzt. Ein Fehlgriff ist keines von beiden.

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

Eine der häufigsten Fragen bei der Erstellung von Internetseiten.
Selbstverständlich soll im Idealfall jeder Betrachter ein optimales Ergebnis erhalten und die Seiten so sehen, wie es ursprünglich geplant war.

Doch in der Realität sieht eben alles anders aus als wie man Denken tut…

Die beiden großen Anbieter von Browsern Microsoft und Netscape haben im Laufe der Entwicklung ihrer Browser bis zu den derzeit aktuellen Versionen Internet Explorer 5 und Netscape 4.61 immer wieder eigene Erweiterungen eingeführt oder aber Vorgaben aus den Empfehlungen des W3C nicht oder nur unvollständig implementiert.

Somit kann es passieren, daß ein und dieselbe Seite auf einem dieser beiden Browser ein total anderes und nicht gewolltes Aussehen erhält.

Der erste Schritt bei der Erstellung einer crossbrowser-kompatiblen Seite ist daher immer:
Verzicht auf herstellerspezifische Funktionen,
wie etwa das BLINK-Tag des Netscape oder das MARQUEE-Tag von Microsoft. Der Verzicht auf diese und ähnliche Erweiterungen ist auch meist ein Gewinn für das Aussehen der Seiten.

Der nächste Schritt erfordert schon etwas mehr Aufwand:
Testen, testen und nochmals testen
und zwar auf allen erreichbaren Browserplattformen und noch besser auch auf verschiedenen Systemen mit unterschiedlichen Auflösungen, Grafikkarten oder sogar Betriebssystemen. So ist zum Beispiel die Helligkeit eines Bildes auf einem Applesystem völlig unterschiedlich zu der Darstellung auf einem PC Monitor. – Auf diesen interessanten Punkt werden wir in einem Schwerpunkt Grafik ausführlicher eingehen –
Auch sind Schriften auf verschiedenen Systemen oftmals sehr verschieden. Dies trifft sogar auf die Standardschrift des Browsers zu.

Der entscheidende dritte Schritt
Immer nach den vorgestrigen Standards programmieren
Dieser Tip hört sich zuerst etwas kurios an, da doch gerade im Internet die Entwicklung neuer Standards rasend schnell erfolgt. Aber, nicht jeder Ihrer Besucher installiert alle vier Wochen den neuesten Browser oder kauft sich einen größeren Monitor nur um Videos formatfüllend im Internet zu sehen. Außerdem dauert es immer relativ lange, bis ein neuer Standard sich wirklich etabliert hat.
Darum ganz klar, der Web-Elch Tip: Die Programmierung einer kompatiblen Seite sollte – bis auf wenige Ausnahmen – immer nach dem HTML 3.2 Standard erfolgen. Dieser ist zwar schon etwas älter, wird aber ohne größere Probleme von den meisten Browsern auch korrekt interpretiert.

Wenn es unvermeidbar ist besondere Funktionen zu benutzen, wie z.B. Javascript für den beliebten Effekt des Bildwechsel beim Überfahren mit der Maus (Rollover), sollte die Seite aber immer noch funktionieren, wenn der Betrachter keine dieser Funktionen mit seinem Browser ausführen kann oder aber wie im Fall Javascript diese Funktion in seinem Browser aus Sicherheitsgründen ausgeschaltet hat.

Die Programmierung mit neuen HTML-Erweiterungen wie CSS und DynamicHTML oder aber die Erstellung von XML-Seiten, wie es z.B. das neue Office 2000 als Dateiformat anbietet, sollte man soweit wie möglich vermeiden. Selbst die neuesten Browserversionen sind immer noch nicht in der Lage die Befehle des älteren CSS 1.0 Standards korrekt umzusetzen, ganz zu schweigen von CSS 2.0.

Was bleibt also?

Bei der Erstellung einer Seite müssen Sie ausgehend von ihrem Design entscheiden, wie sich dieses auf den gängigen Browsern darstellen läßt, ohne auf die allerneuesten HTML-Funktionen zurückgreifen zu müssen.

Als kleine Hilfe, welche Browser gerade in welchem Maß eingesetzt werden hat der Web-Elch die Logdateien von neun Internetangeboten über den Zeitraum von einer Woche ausgewertet.
Diese Auswertung ist zwar alles andere als repräsentativ, sie kann aber trotzdem eine gute Hilfe bei der Browserfrage darstellen:
Netscape 2.x 0,04%
Netscape 3.x 7,24%
Netscape 4.x 35,46%
IE 2.x 0,17%
IE 3.x 5,13%
IE 4.x 24,37%
IE 5.x 11,38%
Mosaic 0,00%
Lynx 0,00%
Sonstige 16,21%

Ausgewertet wurden 5150 Zugriffe über 1 Woche
Unter Sonstige fallen alle Browser, die sich nicht korrekt gemeldet haben oder aber auch Suchläufe von Indizierungsprogrammen wie Altavista, Yahoo o.ä..

Für den Ersteller einer Webseite bedeutet dies, daß die zu erstellenden Seiten auf Netscape ab Version 3 und Internet Explorer ab Version 3 lauffähig sein müssen. Und der kleinste gemeinsame Nenner dieser Browser ist die korrekte Umsetzung von HTML 3.2 und, bis auf den IE 3, auch der grundlegenden JavaScript Standards bis Version 1.2.

In der einschlägigen Fachliteratur aus den USA findet man auch noch häufig Hinweise auf AOL Browser und Browsern in Settop Boxen. Diese beiden Browserarten sind aber in Deutschland eher unüblich und sollten nur dann in die Überlegungen einbezogen werden, wenn sich das zu erstellende Internetangebot auch ausdrücklich an diesen Personenkreis richtet.

Sehr schön ist es allerdings, wenn neben einer normalen Version eines Internetangebotes auch immer eine abgespeckte und möglicherweise grafikfreie Version für Textbrowser oder Personen mit Sehproblemen angeboten wird.

Dieser Personenkreis surft häufig mit speziellen Programmen, die den Inhalt von Internetseiten vorlesen oder anderweitig aufbereiten. Auch mit einer kompatiblen Seite, die allerdings nur oder überwiegend aus Grafik besteht, hat dieser Personenkreis natürlich ernste Probleme. Darum sollte eine gewisse „text-only-version“ immer mit zu der Erstellung eines rundum gelungenen Internetauftrittes gehören.

Weiterführende Links zum Thema
Microsoft
Netscape
W3C HTML 3.2 Spezifikation
Browserwatch