Der erfolgreiche Web-Auftritt - Von der Idee bis zur Realisierung

Inhalt:

I Die Projektplanung
1. Beschreibung der Ziele - Was soll mit dem Projekt erreicht werden?
2. Die Zielgruppe - Wer soll mit dem Projekt angesprochen werden?
3. Die Konzeption - Wie soll das Ziel erreicht werden?

II Die Realisierung des Projekts
1. Der Einsatz von Grafiken für die Web-Seiten
1.1 Grafikformate
1.2 Die Einbindung von Grafiken in HTML
2. Das Layout der Websites
2.1 Seitenaufbau mit Hilfe von unsichtbaren Tabellen
2.2 Die Verwendung von CSS (Cascading Style Sheets)
4. Der Einsatz von Scriptsprachen

III Die Optimierung der Website

Vorwort

Zeitung, Radio und das Fernsehen sind angesehene Möglichkeiten um eine Firma in der Bevölkerung bekannt zu machen, ein Produkt zu verkaufen oder Dienstleistungen anzubieten. Ja, man kann sogar sagen, dass viele Firmen und Konzerne ohne diese Medien gar nicht existieren könnten.

Besonders erfolgreich sind erfahrungsgemäß Werbeauftritte, die die Vorteile vieler verschiedener Medien gleichsam Nutzen. Dadurch steigt der angestrebte Wiedererkennungswert des CorporateDesigns einer Firma.

In den letzten Jahren hat sich eine ganz neue Form des Werbemediums etabliert, welches das Verhalten der Verbraucher entscheidend verändert hat. Es spricht alle Sinne des Betrachters an und wird als „Erlebnismedium“ angesehen:

Das Internet.

Durch das Internet haben alle Firmen, egal ob Ein-Mann-Betriebe wie der Schuster von nebenan oder Megakonzerne wie z.b. Nokia, die Möglichkeit ihre Dienste vorzustellen und sogar direkt zu verkau- fen. Dabei kann auf viele verschiedene Realisierungsmöglichkeiten zurückgegriffen werden. Dem Bet- rachter werden Informationen per Text, Bild, Video und Ton nahe gebracht. Ebenfalls revolutionär für die Werbung ist die Möglichkeit, dass Anbieter und Nutzer innerhalb des Projekts direkt interagieren können.

Das Ausmaß, das das Internet bis heute angenommen hat, ist kaum überschaubar - Man spricht von mehr als 2 Milliarden Websites. So ist es auch kaum verwunderlich, dass das Internet zu einem großen Teil aus Müll (Trash) besteht.

Zu einem erfolgreichen Web-Auftritt gehören weitaus mehr als ein paar nette Fotos und Texte, die ohne Konzept zusammengestellt wurden. Für private Webs mag diese Möglichkeit vielleicht ausreichen, um jedoch einen gelungenen Web-Auftritt zu organisieren, der eine breite Kundschaft anspricht und „Stammbesucher“ schafft, werden fundiertes Fachwissen, Kreativität, ein systematisches Vorgehen und eine professionelle Konzeption benötigt.

Diese Facharbeit soll die wichtigsten Vorgehensweisen bei der Realisierung eines Web-Auftritts auf- zeigen:

- Worauf muss bei der Erstellung eines Webs geachtet werden? - Welche Möglichkeiten kann ich nutzen, um im Internet erfolgreich zu werden? · Wie kann ich diese Möglichkeiten nutzen?

Es soll ein Leitfaden für die Realisierung eines Web-Projekts gegeben werden, der eine Hilfe für WebMaster darstellen soll, die bereits erste Erfahrungen in Sachen Web-Design und Internet- Programmierung gemacht haben.

I Die Projektplanung

Bevor mit den praktischen Umsetzungen begonnen werden kann, muss das gesamte Projekt durch- strukturiert werden. Das heißt, es muss in Phasen aufgeteilt werden, denen dann verschiedene Um- setzungsmethoden und Ziele zugeordnet werden können. Internetseiten, für die kein schlüssiges Konzept erarbeitet wurde, erreichen fast nie den gewünschten Erfolg, da sie weder die richtige Ziel- gruppe ansprechen, noch wird klar, was mit den Internetseiten erreicht werden soll. So muss vor al- lem darauf geachtet werden, dass alle Parameter, die für einen Web-Auftritt notwendig sind, strate- gisch in ein System gegliedert werden, welches unter Berücksichtigung aller Voraussetzungen zum Ziel führt. (siehe Abb. 1).

Der Ablaufplan sollte folgende Punkte enthalten:

- Ziel und Zielgruppe festlegen - Seiten von anderen Anbietern analysieren - Stoffsammlung für den Inhalt - Strukturplan für das Web entwerfen - Grobes Layout entwerfen - Software auswählen (HTML-Editor, Grafikprogramme, FTP-Programme...)

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 1

1. Beschreibung der Ziele - Was soll mit dem Projekt erreicht werden?

Nur wenn die Ziele klar definiert sind, können sie auch erreicht werden. Soll das Web-Projekt lediglich eine Art elektronische Visitenkarte sein oder sollen klare Angebote und vielleicht sogar ein Verkausauftritt geschaffen werden? Die Grundvoraussetzungen sind dabei für jede Nutzung variabel, so dass die Definition der Ziele grundlegend für das gesamte Projekt ist.

2. Die Zielgruppe - Wer soll mit dem Projekt angesprochen werden?

Die meisten Webmaster schenken der Frage, wer das Angebot überhaupt nutzen soll, zu wenig Aufmerksamkeit. Diese Frage beeinflusst maßgeblich die optische und redaktionelle Gestaltung der Internet-Seiten. Da sich im Internet so ziemlich jede Zielgruppe finden lässt, wäre es durchaus ratsam ein Benutzerprofil zu erstellen. Folgende Fragen sollten dabei beantwortet werden:

- Wen will ich mit meinem Angebot erreichen? - Kenne ich die Zielgruppe? - Welche Ansprüche haben die Nutzer? Welche Erfahrungen bringen sie mit? - Welche technischen Rahmenbedingungen kann ich auf Seiten der Nutzer voraussetzen? - Mit welchen Inhalten und Diensten kann ich den Nutzer dauerhaft an die Website binden?

Bei der Beantwortung dieser Fragen und der Skizzierung des Nutzerprofils muss unbedingt darauf geachtet werden, dass man die Frage nicht nur aus der eigenen Perspektive sieht, sondern auch die Situation des typischen Nutzers mit einbezieht.

An dieser Stelle muss beachtet werden, dass eine Website für den Nutzer einen klar erkennbaren Nutzen bringen muss - an elektronischen Werbeprospekten ist niemand interessiert.

3. Die Konzeption - Wie soll das Ziel erreicht werden?

Wenn die Zielstellung eindeutig festgestellt wurde, setzt die Konzeptionsphase ein.

Eine Voraussetzung für eine gute Website ist der Informationsinhalt dieser Site. Da jetzt Zielstellung und Zielgruppe klar sind kann mit der Beschaffung dieser Inhalte begonnen werden. Welche Inhalte sind wichtig, welche brauchbar, welche sind bis aufs weitere nicht machbar und welche überflüssig? Besonders leicht wird es sein, wenn die Daten bereits in irgendeiner Form vorliegen und nicht erst redaktionell beschafft werden müssen. Falls die Inhalte erst zusammengetragen werden müssen, ist die „Merkzettelmethode“ ein geeignetes Mittel. Alles was für das Web relevant sein könnte wird auf- geschrieben. Was nachher wirklich verwendet wird, kann zu einem späteren Zeitpunkt bestimmt wer- den.

Alle Inhalte müssen gegliedert werden, so dass eine klare Struktur der Websiten entsteht und Naviga- tionssysteme darauf angewandt werden können. Hilfreich für die Erstellung einer solchen Struktur können einfache Blockdiagramme sein. So können alle geplanten Rubriken bereits jetzt miteinander verknüpft werden.

Man sollte die Strukturierung der Website nicht vernachlässigen, da damit spätere Änderungen und Aktualisierungen maßgeblich erleichtert werden können. Gerade statische Sites (ohne Dynamische Elemente durch Skript-Sprachen) müssen eine klar definierte, erweiterbare Struktur besitzen. Wichtig ist weiterhin, dass die Site überschaubar ist, da Tests gezeigt haben, dass User mit sehr breiten und tiefen Strukturen schnell überfordert sind.

Nachdem die Konzeptionsphase abgeschlossen wurde, muss ein exaktes Bild der Website entstanden sein: Es dürfen keine Fragen betreffend Inhalt, Aufbau und Design mehr offen sein, damit mit der eigentlichen Arbeit begonnen werden kann.

II Die Realisierung des Projekts

1. Der Einsatz von Grafiken für die Web-Seiten

1.1 Grafikformate

Die Einbindung von Grafiken in eine Website ist heutzutage unerlässlich. Da es jedoch notwendig ist die Ladezeit einer Website möglichst klein zu halten, muss man sich überlegen, welche Grafikforma- te günstig und welche ungünstig sind. Im folgenden soll ein Überblick über die verschiedenen Formate gegeben werden.

Das BMP- und das TIFF-Format

Diese klassischen Grafik-Formate sind aufgrund der großen Dateien für Web-Seiten völlig ungeeignet. Das BMP-Format speichert die Bildinformationen unkomprimiert. So kann ein Foto, welches im JPEG-Format eine Größe von 50 KByte hat, als BMP mehr als 700 KByte verbrauchen. Das TIFF-Format komprimiert die Bildinformationen zwar, liefert aber ebenfalls sehr große Dateien. Man sollte nicht völlig auf diese Datenformate verzichten, da sie sehr gute Bildqualitäten liefern. Es ist ratsam die Grafiken, die im Web verwendet werden sollen, als Sicherungskopie auch im BMP,TIFF oder ähnlichen Formaten abzuspeichern.

Das GIF-Format

Das GIF-Format wurde ursprünglich für den Online-Dienst Compuserve entwickelt, hat sich aber schnell als allgemeiner Standard etabliert. Da das GIF-Format maximal 256 Farben zulässt, eignet es sich besonders für Bilder mit geringer Farbtiefe (z.B. Navigationselemente, Logos, Banner). Das Ge- heimnis der geringen Datenmenge eines GIF-Bildes liegt in der Art und Weise wie die Bildinformatio- nen komprimiert werden. Für viele hintereinanderliegende Bildpunkte wird ein verkürzter Ausdruck verwendet: Die Kette „blau, blau, blau, blau, blau“ wird in den Ausdruck „5xblau“ umgewandelt. Eine weiterer Vorteil des GIF-Formats ist die Möglichkeit die Farbtiefe eines Bildes individuell anzu- passen. Hat man beispielsweise ein Bild, in dem nur 20 Farben vorkommen, so würde es nur unnötig Speicherplatz kosten, wenn man das Bild mit 256 Farben abspeichert. Daher ist es ratsam dieses Bild anzupassen:

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 2

InCorel Photo Shopkann man die Farbanzahl sehr leicht anpassen: Unter dem Menüpunkt ‚Bild / Farbformat ändern / Palette (8Bit)’ öffnet man ein Optionsfenster (Abb.2). Wählt man nun Palletentyp: Optimiert und Rastertyp: Geordnet, so kann man die Farbanzahl beliebig anpassen. Auf diese Weise kann man die Datenmenge um mehr als 50% reduzieren.

Das GIF-Format macht weitere Besonderheiten möglich, die für das Web-Design besonders attraktiv sind:

Interlacing:

Der Browser baut das Bild nicht wie üblich Zeile für Zeile auf, sondern stellt zunächst das Gesamtbild mit unscharfen Konturen dar. Nach und nach wird das Bild schärfer und der Surfer hat damit die Möglichkeit schon früh zu erkennen was geladen wird und worauf er überhaupt wartet.

Transparenz:

Das GIF-Format macht es möglich, dass eine Palettenfarbe transparent dargestellt wird. Baut man das Bild auf einer Website ein, so scheint überall, wo diese Farbe definiert ist, das Hintergrundbild durch. Dadurch kann eine Grafik optimal in die Website integriert werden und es entstehen keine Ecken und Kanten. Auch die Verwendung von effektvollen Schriftzügen ist damit kein Problem mehr

Das animierte Gif:

Innerhalb einer GIF-Grafik können mehrere Bilder hintereinandergelegt werden, die dann nach einer vorgegebenen Zeit abgespielt werden. Man sollte aber nur kleine Animationen im GIF-Format umsetzen. Für größere Filme bietet sich auf jeden Fall die vektororientierte Flash-Animation an.

Das JPEG-Format

Dieses Format ist für Fotos und farbintensive Grafiken besonders gut geeignet, da es Bilder immer mit einer Farbtiefe von 16,7 Millionen Farben darstellt. Um eine möglichst geringe Dateigröße zu er- halten wird ein sehr effektives Komprimierungsformat verwendet, das sich auf die Datenreduktion stützt. Beim Speichern von JPG-Dateien, kann der Anwender den Grad der Bildqualität bestimmen und dadurch angepasste Dateigrößen erreichen. Anders als beim GIF ist die Farbenreduzierung nicht möglich.

Das PNG-Format

Beim PNG (gesprochen „ping“) handelt es sich um eine gute Alternative zum GIF, da ebenfalls eine sehr effektive Komprimierung angewandt wird. Das PNG-Format bietet die Möglichkeit Bilder mit einer Farbtiefe von bis zu 16,7 Millionen Farben darzustellen. Weiterhin ist es möglich durch die Festlegung eines Alpha-Kanals eine abgestufte Transparenz zu definieren.

Da bisherige Browser-Versionen dieses Format noch nicht konsequent unterstützt haben, hat sich das „Portable Graphics Network“ noch nicht durchgesetzt.

Vektorgrafiken

Anders als bei Pixelgrafiken werden bei diesen Format nicht die einzelnen Bildpunkte gespeichert. Vektorgrafiken stützen sich auf mathematische Angaben und geometrische Formeln. Wird Beispiels- weise die Information „Kreis“ gespeichert, werden nicht Hunderte von Bildpunkte dargestellt, sondern lediglich die Umwandlung der Flächenformel des Kreises. Soll im Nachhinein der Kreis vergrößert werden, muss keine Grafikdatei mehr verändert werden. Es reicht aus die Variable „Radius“ anzupas- sen. Durch diese Methode können die Grafiken ohne Qualitätsverlust vergrößert und verkleinert wer- den.

Flash-Animationen beruhen auf Vektorgrafiken und sind daher eine optimale Möglichkeit um an- spruchsvolle Animationen mit sehr geringen Datengrößen zu erstellen. In Zukunft soll jedoch SVG (Scalable Vector Graphics) der Standard für Vektorgrafiken werden. Dieses Format kann per Quellco- de in eine XML-Datei (Nachfolger von HTML) integriert werden. Es ist also keine externe Datei mehr nötig.

1.2 Die Einbindung von Grafiken in HTML

Um eine Grafikdatei in eine Website zu integrieren wird der Img-Tag verwendet. Das Verzeichnis, in dem sich die Grafik befindet, und der Name der Datei werden mit dem Parameter src angeben. Weiterhin gehört es zum guten Ton des Webmasters die Breite (width) und die Höhe (hight) des Bildes mit anzugeben.

Weitere optionale Angaben sind: Alternativer Text (alt), Rahmenbreite (border), Grafikbezeichnung (name) und die Ausrichtung (align).

So könnte der Quellcode für die Einbindung einer Grafik aussehen:

<img src=“picture.gif“ width=100 hight=150 alt=“Mein Bild“ border=2 name=“Grafik1“ align=“center“>

2. Das Layout der Websites

2.1 Seitenaufbau mit Hilfe von unsichtbaren Tabellen

Viele Websites sehen aus wie einfache Textdokumente. Es wurde eine Überschrift festgelegt und danach folgt ein ewig langer Text, der ab und zu durch kleine Bilder unterbrochen wird. Es gibt keinen Surfer, der sich so etwas gerne anschaut und durchliest. Eine Website sollte ähnlich wie eine Zeitung strukturiert werden, da es damit möglich ist viel Inhalt auf einer kleinen Fläche, dem Bildschirm, darzustellen. Um eine Website in eine Tabelle einzubetten, ist es ratsam vorher ein sogenanntes Scribble zu zeichnen. Ein Scribble ist eine Skizze der Struktur der Website.

2.2 Die Verwendung von CSS (Cascading Style Sheets)

Der Nutzen von Style Sheets

Ein Web besteht oftmals aus mehr als nur aus zwei oder drei Seiten. Jede dieser Seiten enthält wie- derum formatierten Text, Hintergrundbilder, verschiedene Tabellen und andere HTML-Elemente. Da es ziemlich umständlich ist auf allen Seiten die erforderlichen Tag-Parameter einzutragen bzw. einheitli- che Layoutänderungen vorzunehmen, wurde eine Technik entwickelt, die dem Browser befiehlt welche Werte bestimmte HTML-Tags enthalten. Diese Technik wird als CSS (Cascading Style Sheets) be- zeichnet und erweitert mit seinen Funktionen die Möglichkeiten von HTML und bietet dem Webmaster mehr Gestaltungsfreiheit.

Ein Beispiel: Auf allen Seiten sollen Überschriften 1.Grades (<h1>) rot dargestellt werden. Mit herkömmlichen Mitteln müsste man auf allen Seiten die Überschriften um das Font-Tag erweitern:

<font color=red><h1>Überschrift</h1></font>

Verwendet man Style Sheets reicht es aus, nur eine einzige Änderung vorzunehmen. Das spart natürlich Arbeit und viel Zeit.

Mit Style Sheets lassen sich zahlreiche Elemente modifizieren:

- Schrift (Größe, Farbe, Schriftart...) - Abstände, Ränder, Ausrichtung - Hintergrundfarben und -bilder - Listen und Tabellen - Links - Absätze - Position von Elementen - Für den Internet Explorer: Mauszeiger und Spezialfilter.

Die Festlegung der Anweisungen und die Einbindung von CSS in die Website

Grundsätzlich gibt es zwei Möglichkeiten um Style Sheets in eine Website zu integrieren. Die Fest- legung der Werte kann innerhalb einer HTML-Datei erfolgen aber auch in einer externen css-Datei.

Um die Werte direkt in den einzelnen Websites zu integrieren wird in den Kopfteil einer HTML-Datei folgender Code geschrieben:

<style type=“text/css“> <!—

/*Definition der Anweisungen*/ //-->

</style>

Die Variante eine css-Datei anzulegen ist natürlich besser, da die Änderungen damit in allen beliebi- gen HTML-Dateien übernommen werden können. Das heißt, wenn man einen Wert innerhalb dieser css-Datei ändert, passt der Browser alle HTML-Dateien an, die mit dieser css-Datei verknüpft sind. Um eine css-Datei zu erzeugen reicht ein normaler Texteditor völlig aus. Es gibt zwar CSS-Editoren, die die Arbeit ein wenig erleichtern, wenn man sich jedoch einen Überblick über die verschiedenen Anweisungen verschafft, kann man ähnlich wie auch bei HTML den Quellcode manuell erstellen. Eine CSS-Datei hat keinen besonderen Aufbau - Es gibt also keinen Kopfteil, keinen eigentlichen Hauptteil und keine Festlegung in welcher Reihenfolge die einzelnen Anweisungen stehen. Am An- fang einer solchen Datei, sollte ein Hinweis auf den Autor und das Datum gegeben werden:

/* AUTHOR: Webmaster */

/* CREATION DATE: 01.01.2001*/

Darunter folgen die Anweisungen. Die Syntax:

HTML-Tag {Element1 : Wert;

Element2 : Wert;}

Hier nun einige Beispiele für solche Anweisungen:

Body {background-color:blue;

margin-right:200pt;}

h1 {font-weight: bold;

font-style: italic; font-size: 40pt; font-family : arial;}

u1 {list-style-image: url(ball.gif)}

Die Möglichkeiten, die mit CSS gegeben werden, sind natürlich viel größer. Darauf soll an dieser Stelle jedoch verzichtet werden.

Um eine HTML-Datei mit einer css-Datei zu verknüpfen reicht eine einzige Angabe im Kopfteil der HTML-Datei:

<link rel=stylesheet type=“text/css“ href=”dateiname.css”>

4. Der Einsatz von Scriptsprachen

III Der Upload und das Bekanntmachen der Seite

1. Der Upload der Web-Seiten

1.1 Organisierung der Dateien

Da ein Web aus vielen verschiedenen Dateien (z.B. HTML-Dateien, Java-Applets, Bilder, Flash-Filme, Download-Dateien, CGI-Programme...), ist es sinnvoll die Dateien in ein Verzeichnissystem zu integ- rieren. So kann man beispielsweise alle Bilder in einen Ordner mit dem Namen „IMG“ legen. Welche Namen für die Ordner verwendet werden ist jedem selbst überlassen, man sollte jedoch versuchen ein verständliches System zu entwickeln, die es erlauben das Web mühelos zu verwalten und mögli- cherweise auszuweiten.

Das Dateisystem sollte schon festgelegt sein, bevor die HTML-Dateien geschrieben werden, da man ansonsten bei der Verlinkung von Seiten oder der Festlegung von Bilddateien mühevolle Änderungen vornehmen muss. Eine weitere Möglichkeit um die Übersicht über die vielen Dateien zu behalten ist die Nummerierung der Dateien.

Herkömmlich werden Dateien nach inhaltlichen Aspekten bezeichnet, so wird das Bild eines Hundes Beispielswiese „hund.jpg“ genannt. Sinnvoller ist es, allen Dateien Nummern zuzuordnen und sie in einem Katalog zu beschreiben.

Achtung: Einige Provider (z.B. Compuserve) erlauben es nicht, HTML-Dateien in Unterordner zu legen. Beim Aufruf dieser Dateien erscheint eine Fehlermeldung („HTML Error 404: File Not Found“). Bilder und ähnliche Objekte können dennoch in Unterordnern gespeichert werden.

1.2 Der Umgang mit dem FTP-Programm (Beispiel: WS_FTP Pro)

Um die Dateien des Webs für jedermann zugänglich zu machen, d.h. im Internet zu veröffentlichen, müssen sie auf einem HTML-Server gespeichert werden. Der Transfer funktioniert mit Hilfe von FTPProgrammen mühelos vom heimischen Rechner (FTP = File Transfer Protocol).

FTP-Programme sind z.B.:

- Leech FTP - WS_FTP - Interarchy (für den Mac) - u.v.m.

An dieser Stelle soll der Umgang mit FTP-Programme am Beispiel WS_FTP gezeigt werden. Dieses Programm ist sehr leicht zu verstehen, und bietet zahlreiche Möglichkeiten, um die Datenstruktur des Webs zu organisieren.

Direkt nach dem Start des Programms erscheint folgender Bildschirm:

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 3

Das Programm ermöglicht es dem User mehrere Profile anzulegen. Das heißt, es können mehrere Accounts angelegt werden. Der Startbildschirm enthält folgende Optionen:

- Profile Name: Der Name unter dem das Profil gespeichert wurde. Mit ‚New’ kann ein neues Profil angelegt werden, mit ‚Delete’ wird das aufgerufene Profil gelöscht.

- Host Name/Address: hier wird die Adresse des FTP-Servers eingetragen, auf den die Daten übertragen werden.

- Host Type: Hier sollte immer ‚Automatic Detect’ angegeben werden. Es ist zwar möglich den Typ des Servers genau anzugeben, das ist jedoch nur nötig, wenn WS_FTP den Typ nicht automatisch erkennt.

- User ID und Passwort: An dieser Stelle werden die Daten eingegeben, mit denen man Zugang zum eigenen Account auf dem Server erhält.

- Account:

2. Das Bekanntmachen der Seite

V Literatur und Quellenverzeichnis