Beispiel eins: ein Firmenprofil
Beispiel zwei: eine Multimedia-Enzyklopädie
Beispiel drei: ein Einkaufskatalog
Beispiel vier: ein Online-Buch
Tag 6
Kapitel 12 - Beispiele für gutes und schlechtes Web-Design
In diesem Kapitel werden Sie einige einfache Beispiele von Seiten und Präsentationen kennenlernen, die Sie im Web finden könnten. (Tatsächlich werden Sie sie natürlich nicht im Web finden; ich habe diese Beispiele speziell für dieses Kapitel entwickelt.) Jede dieser Web-Präsentationen ist entweder typisch für eine Art, in der heutzutage Informationen im Web angeboten werden, oder sie zeigt eine Methode, um bestimmte Probleme zu lösen. Im einzelnen lernen Sie die folgenden Web-Präsentationen kennen:
Bei jedem Beispiel weise ich auf einige interessante Eigenheiten der Seiten hin und auch auf einige der Gesichtspunkte, die Sie bedenken sollten, wenn Sie ein ähnliches Thema oder Format gebrauchen wollen.
|
Der Code für diese Beispiele ist auf der CD-ROM enthalten, die diesem Buch beiliegt. |
Beispiel eins: ein Firmenprofil
Die Foozle Inc. stellt eine Vielzahl von Pullovern für alle Gelegenheiten her. (Sie war verantwortlich für den dämonischen Pullover, der in Kapitel 3, »Die Grundlagen«, erwähnt wurde.) In einem seltsamen Anfall ihrer Marketingabteilung entschied man sich dort, der erste Pulloverhersteller zu sein, der ein Firmenprofil im Web anbietet.
Wenn Sie mit Ihrem Browser zu dem Web-Server von Foozle gingen, so würde Ihnen die Foozle-Homepage präsentiert (Abbildung 12.1).
Von dieser nett gestalteten Homepage aus haben Sie mehrere Möglichkeiten, die in einem Verknüpfungs-Menü angeordnet sind. Sie werden in diesem Abschnitt nicht alle besuchen, sondern nur die, die interessante Eigenheiten bieten.
Abbildung 12.1: |
Was gibt's Neues bei Foozle?
Die erste naheliegende Verknüpfung von der Foozle-Homepage aus ist die Neuigkeiten-Seite. Diese Verbindung ist auf der Seite mit einer Zeitangabe versehen, welche die letzte Veränderung anzeigt.
Das Anwählen der Neuigkeiten-Seite bringt Sie, passenderweise, zur Seite »What's new at Foozle« (Was gibt's Neues) (Abbildung 12.2).
In rückwärtslaufender chronologischer Folge (vom neuesten Geschehnis an rückwärts) organisiert, enthält die Neuigkeiten-Seite Informationen über Interessantes aus der Foozle Inc. und ihrer Umgebung.
Abbildung 12.2: |
Diese Seite dient dazu, den Web-Kunden neue Produkte vorzustellen oder ihnen einfach Informationen über den Site, die Firma und andere Firmeninformation zur Verfügung zu stellen. Neuigkeiten-Seiten sind im allgemeinen nützlich für Sites, die oft und regelmäßig besucht werden, da sie es Ihren Lesern ermöglichen, neue, Ihren Site betreffende Informationen schnell und einfach zu finden, ohne danach suchen zu müssen.
Der oberste Punkt in der Liste der Neuigkeiten ist der Hinweis auf ein Papier über die Behandlung von Alpaka-Wolle, das vom wissenschaftlichen Direktor von Foozle auf einer Konferenz in Neapel präsentiert wurde. Dieser Punkt ist an eine Verknüpfung gebunden, was darauf hinweist, daß sich das Papier selbst auf der anderen Seite der Verknüpfung befindet, und siehe da, dort finden wir es auch (Abbildung 12.3)!
Abbildung 12.3: |
Alpaka-Wolle ist etwas Faszinierendes, doch wie geht's nun weiter? Die Verbindungen am Anfang der Seite deuten an, daß Sie zu einem Verzeichnis technischer Daten gehen können oder hoch zur Homepage. Da Sie die technischen Dokumente noch nicht gesehen haben, lassen Sie uns dorthin gehen.
Technische Daten
Der Abschnitt mit technischen Daten (Abbildung 12.4) besteht aus einer einfachen Liste der verfügbaren Dokumente, die Foozle publiziert hat und die technische Fragen der Herstellung von Pullovern behandeln. (Sie hätten wohl nicht geglaubt, daß es so etwas gibt, nicht wahr?)
Abbildung 12.4: |
Jede Verbindung führt Sie zu dem jeweils beschriebenen Dokument. (In der Abbildung ist [hoffentlich] zu sehen, daß Sie die Verbindung zu dem Dokument über Alpakas bereits besucht haben - im vorherigen Abschnitt.)
Von hier aus könnten Sie sich die Hierarchie herunterbewegen und nun jedes der Dokumente lesen oder zurück zur Homepage gehen. Das Zurückgehen würde Ihnen erlauben, die anderen Bereiche dieser Webseite zu erkunden, die Sie noch nicht besucht haben: einen Überblick über die Firma, Produktbeschreibungen oder eine Liste mit offenen Stellen.
Besonderheiten und Gesichtspunkte bei der Entwicklung dieser Web Site
Diese Web-Präsentation für ein einfaches Firmenprofil ist in Hinblick auf die Gestaltung recht unkompliziert; die Struktur besteht aus einer einfachen Hierarchie mit Verknüpfungs-Menüs für die Navigation zu den passenden Seiten. Sie auszuweiten, kann einfach dadurch erledigt werden, daß der Hierarchie zusätzliche »Zweige« hinzugefügt werden, indem man neue Verbindungen auf der obersten Seite einfügt.
Beachten Sie jedoch, welchen Pfad wir durch die wenigen Seiten dieser Web Site einschlugen. In einer klassischen Hierarchie besucht der Leser abwechselnd jeden Zweig, indem er weiter nach unten forscht und dann wieder einige Ebenen nach oben kraucht, um neue Seiten zu besuchen. Erinnern Sie sich noch an die Verknüpfung zwischen der Neuigkeiten-Seite und dem Papier über Alpaka-Wolle? Diese Verknüpfung brachte den Leser von einem Zweig (der Neuigkeiten-Seite) zu einem anderen (der technischen Sektion).
In diesem Beispiel gibt es aufgrund seiner Einfachheit kaum Verwirrung. Wenn es sich jedoch um eine wesentlich kompliziertere Hierarchie handelt, die mehrere Ebenen und Unter-Verzeichnisbäume besitzt, kann es verwirrend wirken, wenn Verknüpfungen sich über hierarchische Grenzen hinwegsetzen und es dem Leser erlauben, aus der Struktur auszubrechen. Nach ein paar seitlichen Verknüpfungen ist es schwierig, herauszufinden, wo Sie sich gerade in der Hierarchie befinden. Dies ist ein bekanntes Problem bei den meisten Hypertext-Systemen und wird oft als »verloren im Hyperraum« bezeichnet.
Es gibt nur wenige wirklich überzeugende Lösungen für dieses Problem des Verlorengehens. Ich ziehe es vor, dem Problem auszuweichen, indem ich versuche, keine seitlichen Verknüpfungen über die Hierarchiegrenzen hinweg zu erstellen. Wenn Sie sich an die feste Struktur der Hierarchie halten und nur Navigationsverknüpfungen zur Verfügung stellen, können die Leser normalerweise selber herausbekommen, wo sie sich befinden. Wenn nicht, haben sie meistens nur zwei Möglichkeiten: sich in der Hierarchie nach oben zu einem bekannten Punkt zu bewegen oder tiefer nach unten zu bohren, um detailliertere Informationen zu bekommen.
Beispiel zwei: eine Multimedia-Enzyklopädie
Die Multimedia-Enzyklopädie der Motorräder besteht aus einigen Webseiten, die ausführliche Informationen über Motorräder und ihre Hersteller bieten. Es ist die umfangreichste Sammlung im Web und enthält Fotografien, Klänge (Motoren-geräusche!) und Filme von vielen der aufgeführten Motorräder.
Der Index ist alphabetisch organisiert, mit einer Seite pro Buchstabe (A.html, B.html usw.). Die Homepage dieser Präsentation hilft bei der Navigation durch die Enzyklopädie.
Die Überblicks-Seite
Die Überblicks-Seite ist der Haupteintrittspunkt in die Enzyklopädie (Abbildung 12.5).
Abbildung 12.5: |
Diese Seite bietet zwei Wege an, um die Enzyklopädie zu benutzen: durch Anwahl des Anfangsbuchstabens einer Marke, die Sie interessiert, oder indem Sie eine der spezifischen Marken anwählen, die in der Liste selbst aufgeführt werden.
Wollten Sie also beispielsweise Informationen über die Motorradfirma Norton haben, so könnten Sie N für Norton anwählen und dann bis zu dem gewünschten Eintrag hinunterblättern. Da Norton indes einer der wichtigsten Hersteller und neben der N-Verbindung aufgeführt ist, könnten Sie statt dessen diese Verbindung anwählen und so direkt zu dem Eintrag für Norton gehen.
Der Eintrag für Norton
Jede individuelle Seite enthält Einträge für alle Marken, die mit dem jeweiligen Buchstaben beginnen. Wenn der Leser einen bestimmten Hersteller ausgewählt hat, führt die Verknüpfung direkt zu diesem Eintrag (z.B. zum Eintrag für Norton, der in Abbildung 12.6 gezeigt wird). Jeder Eintrag enthält Informationen über die Marke und die verschiedenen Motorräder, die sie in den letzten Jahren produziert hat.
Abbildung 12.6: |
Wo sind nun aber die Bilder? Wir hatten doch angenommen, dies sei eine Multimedia-Enzyklopädie, nicht wahr? Nun, zusätzlich zu dem Text, der Norton selbst beschreibt, enthält der Eintrag eine Liste externer Medien-Dateien: Abbildungen verschiedener Motorräder, Klangausschnitte, wie sie sich anhören, und Filme von berühmten Fahrern auf ihren Nortons (Abbildung 12.7).
Abbildung 12.7: |
Jede Medien-Datei ist im Text beschrieben und so verknüpft, daß Sie sie laden können, wenn Sie es mögen. Beispielsweise greift die Verbindung der 850 Commando auf eine JPEG-Abbildung dieses Modells zu (Abbildung 12.8).
Abbildung 12.8: |
Achten Sie auch darauf, daß an jenen Stellen im Text, an denen ein anderer Hersteller erwähnt wird, dieser Hersteller mit seinem eigenen Eintrag verbunden ist. So führt Sie beispielsweise die Anwahl des Worts BSA im letzten Absatz (aus Abbildung 12.7) zum Eintrag für BSA (Abbildung 12.9).
Abbildung 12.9: |
Auf diese Weise kann der Leser von Verknüpfung zu Verknüpfung und von Hersteller zu Hersteller springen und die Informationen der Enzyklopädie nach Lust und Laune erforschen.
Sind Sie dann einmal mit dem Blättern fertig, ist es immer wichtig, zu einem bekannten Punkt zurückkehren zu können. Zu diesem Zweck enthält jeder Eintrag in der Enzyklopädie eine »Zurück-zum-Überblick«-Verknüpfung. Die Vervielfältigung dieser Verknüpfung innerhalb eines jeden Eintrags bedeutet, daß der Leser niemals weit zum Anfang oder Ende der Seite blättern muß, um eine Verknüpfung zurück zur Übersicht zu finden.
Der Marken-Index
Zurück auf der Hauptseite, finden wir noch ein Merkmal, auf das ich hinweisen möchte: Der Überblick enthält auch eine Verbindung zum Marken-Index, einem Verzeichnis aller Hersteller von Motorrädern, die in der Enzyklopädie erwähnt werden (Abbildung 12.10).
Jeder Name im Index ist, wie Sie wohl erwarten, eine Verbindung mit dem Eintrag für diesen Hersteller in der Enzyklopädie selbst, wodurch Ihnen einfach ein anderer Weg offensteht, sich schnell durch das alphabetische Verzeichnis zu bewegen.
Abbildung 12.10: |
Besonderheiten dieser Web Site und Gesichtspunkte der Entwicklung
Wohl das beste Merkmal bei der Gestaltung dieser Enzyklopädie ist die Überblicks-Seite. In vielen Fällen würde eine Online-Enzyklopädie dieser Art Verbindungen von jedem Buchstaben des Alphabets anbieten und es dabei belassen. Wenn Sie nun über Norton-Motorräder lesen wollten, so würden Sie das »N« anwählen und dann hinunterblättern zu Norton. Indem er die Überblicks-Seite selbst mit Verbindungen zu einigen der beliebteren Motorradhersteller ausstattet, bietet der Autor dieser Webseite eine schnelle Referenz, durch welche die Zeit fürs Blättern abgekürzt wird und die seine Leser direkt dahin bringt, wohin sie wollen.
Das Hinzufügen eines Marken-Index ist gleichfalls ein netter Zug, ermöglicht er es den Lesern doch, direkt zum Eintrag eines bestimmten Herstellers zu springen - auch hier, um die Zeit zu verringern, die benötigt wird, um zu finden, was man sucht. Es ist der gleiche Inhalt wie in der Enzyklopädie. Die Übersichts-Seite liefert den Lesern einfach verschiedene Möglichkeiten, die gesuchte Information zu finden.
Die Enzyklopädie selbst ist nach einem locker geknüpften Gewebemuster strukturiert, das es den Lesern ermöglicht, nahezu überall hineinzuspringen und dann den Querverweisen zu folgen und so durch die verfügbaren Informationen zu streifen, wobei Sie Verbindungen zwischen Motorrädern und Marken und Motorradgeschichte aufdecken können, die in einer gedruckten Enzyklopädie nicht so einfach herauszufinden wären. Indem er alle zusätzlichen Medien extern anbietet, erlaubt es der Autor dieser Web-Präsentation nicht nur, die Enzyklopädie mit grafischen wie textbasierten Browsern gleichermaßen gut zu nutzen, sondern hält darüber hinaus auch die Größe der einzelnen Dateien für jeden Buchstaben klein, so daß sie schnell über das Netz geladen werden können.
Beachten Sie schließlich, daß jedes Verzeichnis bei allen Buchstaben eine Verbindung zur Überblicks-Seite enthält. Gäbe es mehr als eine einzige Verbindung, so würde dies die Seite überhäufen und schlecht aussehen. Da indes die einzige ausdrückliche Navigationsrichtung nach oben führt, ermöglicht diese einzelne Verbindung den Lesern, schnell und einfach aus der Enzyklopädie zurückzukommen, anstatt zum Anfang oder Ende des Dokuments blättern zu müssen.
Der wichtigste Gesichtspunkt beim Entwickeln einer Web-Präsentation dieser Art ist der Aufbau und die Pflege. Je nach der Menge des Materials, die Sie online zur Verfügung stellen wollen, kann die Aufgabe, es anzuordnen (verwenden Sie genau 26 Dateien, eine für jeden Buchstaben des Alphabets? Oder mehr? Oder weniger?) und die Verbindungen für alle Querverweise und alle externen Medien einzurichten, tatsächlich ziemlich ernüchternd wirken. Glücklicherweise muß eine Enzyklopädie dieser Art nicht allzuoft überarbeitet werden, so daß die Pflege, nachdem die Anfangsarbeit erledigt ist, nicht mehr so schwer ist.
Beispiel drei: ein Einkaufskatalog
Susannes Kakteen-Garten ist eine gewerbliche Baum- und Pflanzenschule, spezialisiert auf Aufzucht und Versand von Kakteen und Sukkulenten. Dort werden über 120 Arten von Kakteen und Sukkulenten sowie Bücher und andere kakteenbezogene Artikel angeboten. Abbildung 12.11 zeigt die Homepage von Susannes Kakteen-Garten.
Abbildung 12.11: |
Hier können die Kunden etwas Hintergrundinformationen über die Pflanzenschule selbst lesen, Informationen über Sonderangebote und neue Pflanzen bekommen, den Katalog durchblättern, Informationen über das Bestellen erhalten und die Kakteen oder Sukkulenten, die sie ausgewählt haben, tatsächlich auch bestellen.
Im Katalog blättern
Die Anwahl der Verbindung zum Blättern bringt die Kunden auf eine andere Menü-Seite, wo sie verschiedene Möglichkeiten haben, wie sie den Katalog durchgehen wollen (Abbildung 12.12).
Abbildung 12.12: |
Mit dem Angebot unterschiedlicher Wege durch den Katalog dient der Autor vielen verschiedenen Arten von Kunden. Jenen, die über Kakteen und Sukkulenten Bescheid wissen und nur eine bestimmte Art nachsehen wollen, wobei der alphabetische Index der passendste sein wird; jenen, die gerne eine - sagen wir mal - Oster-Kakteen mit rosa Blüten hätten, aber nicht sicher sind, welche bestimmte Art sie wollen (das Kategorien-Verzeichnis); und schließlich jene, die keinen Namen wissen oder sich darum nicht kümmern, aber etwas haben möchten, das hübsch aussieht (die Fotogalerie).
Die alphabetischen Verbindungen (A-F, G-R, S-Z) führen die Kunden zu einem alphabetischen Verzeichnis der zum Kauf angebotenen Pflanzen. Abbildung 12.13 zeigt ein Beispiel aus dem alphabetischen Katalog.
Abbildung 12.13: |
Jeder Eintrag nennt die lateinische oder wissenschaftliche Bezeichnung der Kaktee, den gewöhnlichen Namen, wenn es einen gibt, eine kurze Beschreibung, die Größe, die Bestellnummer und den Preis. Wenn eine Fotografie der Kaktee in der Fotogalerie des Katalogs vorhanden ist, wird eine Verbindung dorthin angeboten, so daß die Leser sehen können, wie die Pflanze aussieht, bevor sie sie kaufen.
Der Katalog enthält ebenso Querverweise für jeden gebräuchlichen Namen, soweit es ihn gibt. Die Verbindung führt Sie vom gebräuchlichen Namen zum primären Eintrag für die Kaktee. Wenn Sie also wirklich eine Pflanze namens Dornenkrone erwerben wollen, würde die Wahl dieses Eintrags Sie zu dem wahren Namen der Pflanze bringen, Euphorbia Milii.
Jeder Anschnitt des alphabetischen Katalogs enthält ebenfalls Navigationsverknüpfungen zurück zur Liste der Katalogansicht (»Im Katalog blättern«) und zurück zur Homepage.
Die zweite Ansicht des Katalogs (die von der »Im-Katalog-blättern«-Seite erreicht werden kann) ist die Kategorien-Ansicht. Die Anwahl der Kategorien-Ansicht würde sie auf eine andere Seite mit Menüs führen, welche die vorhandenen Kategorien aufführt (Abbildung 12.14).
Abbildung 12.14: |
Das Anwählen einer bestimmten Kategorie - sagen wir Orchideen-Kakteen - würde die Kunden zu einem Verzeichnis der in der Kategorie vorhandenen Pflanzen führen (Abbildung 12.15). Jedes Element in dem Kategorien-Verzeichnis sollte vertraut aussehen: Es sind die gleichen Elemente wie im alphabetischen Verzeichnis, sortiert in einer anderen Reihenfolge.
Abbildung 12.15: |
Aus dem Kategorien-Index können die Kunden zurückgehen zum Kategorien-Verzeichnis (eine Stufe nach oben) oder zurück zur Liste der Katalog-Ansichten (wie im Katalog geblättert wird, zwei Stufen höher). Von der »Im-Katalog-blättern«-Seite aus gibt es noch eine Ansicht zu erforschen: die Fotogalerie.
Die Fotogalerie ermöglicht den Kunden, viele der in der Pflanzenschule vorhandenen Kakteen durchzusehen, indem sie einen Blick auf ihre Bilder werfen, ohne ihren wissenschaftlichen Namen wissen zu müssen. Dieses Merkmal ist natürlich nur mit grafischen Browsern nutzbar, doch es bietet einen ausgezeichneten Weg, nach interessanten Kakteen zu suchen.
Die Seite mit der Fotogalerie (dargestellt in Abbildung 12.16) ist als Folge von Symbolen organisiert, in der jedes kleine Bildchen der Kaktee mit einem größeren JPEG-Gegenstück verbunden ist. Die Textbeschreibung jedes Bildes hingegen führt Sie zurück zu dem passenden Eintrag im Hauptkatalog.
Abbildung 12.16: |
Bestellungen
Nachdem die Kunden das Durchblättern des Katalogs abgeschlossen haben und wissen, welche Art von Kaktus sie bestellen wollen, können sie zurück zur Homepage von Susannes Kakteen-Garten springen, um herauszufinden, wie sie bestellen können. (Es ist der zweite Punkt der in Abbildung 12.11 dargestellten Liste.)
Die Seite zum Bestellen ist einfach etwas Text (Abbildung 12.17): Informationen darüber, wo man anrufen und wohin man Schecks senden kann, Tabellen mit Versandkosten, Hinweise dazu, wann die Pflanzen verschickt werden und so weiter.
Abbildung 12.17: |
Im Abschnitt zum schriftlichen Bestellen findet sich eine Verbindung zum Bestellformular. Das Formular selbst besteht aus einer PostScript-Datei, welche die Kunden zu Hause ausdrucken, dann ausfüllen und an die Pflanzenschule zurücksenden können. (Es handelt sich um eine externe Datei, die im HREF-Attribut der Verknüpfungs-Auszeichnung angegeben wird, genau so wie Sie eine andere Medien-Datei auszeichnen würden.)
|
Warum nicht online bestellen? Diese Seite hätte mit Leichtigkeit ein HTML-Formular enthalten können, mit dem Leser ihre Kakteen online bestellen können. Das habe ich hier noch nicht eingefügt, weil Sie dies noch nicht gelernt haben; das werden wir noch an Tag 8, »Live aufs Web gehen«, besprechen. |
Beachten Sie schließlich, daß der dritte Punkt der Homepage von Susannes Kakteen-Garten eine direkte Verbindung mit dem Bestellformular ist; sie wird hier angeboten, damit die Kunden nicht jedesmal über den zusätzlichen Schritt durch die Seite zum Bestellen und Versand gehen müssen.
Besonderheiten und Gesichtspunkte der Entwicklung dieser Web Site
Bei jedem Online-Einkaufsangebot bestehen die Ziele der Präsentation darin, es den Kunden zu ermöglichen, die zum Kauf angebotenen Dinge durchzublättern und diese dann zu bestellen. Beim Blättern ergeben sich wiederum verschiedene Anforderungen: Was ist, wenn ein Leser eine bestimmte Sache möchte? Kann sie schnell und einfach gefunden werden? Was ist, wenn jemand einfach nur die zum Verkauf stehenden Dinge durchsehen möchte, bis er etwas Interessantes findet?
Diese beiden Anforderungen beim Blättern in einem Online-Verzeichnis scheinen einander zu widersprechen, doch in diesem besonderen Beispiel wurde es ziemlich gut gehandhabt - mit Hilfe der unterschiedlichen Zugangsmöglichkeiten zum Inhalt des Katalogs (alphabetisch, über Kategorien, über Bilder). Diese mehrfachen Zugangswege sind in gewisser Hinsicht Umwege (ein zusätzliches Menü zwischen der obersten Ebene und dem Inhalt des Katalogs selbst), doch dieser kleine Umweg ist eine Verzweigung, die den unterschiedlichen Typen von Kunden hilft, ihre jeweiligen Absichten zu verwirklichen.
Vermutlich der härteste Teil bei Aufbau und Pflege von Webseiten wie diesen ist die Pflege des Katalogs selbst, besonders, wenn einzelne Einträge hinzugefügt oder entfernt werden müssen oder wenn die Preise häufig geändert werden. Hätte die Pflanzenschule nur eine Katalog-Ansicht (die alphabetische), so wäre das nicht so schlimm, weil die Änderungen direkt in den Katalog-Dateien durchgeführt werden könnten. Mit zusätzlichen Ansichten und den Verknüpfungen zwischen ihnen wird die Pflege des Katalogs jedoch wesentlich aufwendiger.
Diese Art der Einteilung wäre vermutlich am leichtesten zu pflegen, wenn der Katalog tatsächlich in einer Art Datenbank außerhalb der eigentlichen Webseiten gespeichert wäre. Datenbanken sind darauf konzipiert, mit solcher Art Information umzugehen und auf Abruf verschiedene Ansichten herzugeben. Wie aber verbinden Sie eine Datenbank mit den Webseiten?
Das Web bietet Mechanismen, um Programme auf der Server-Seite laufen zu lassen - Sie werden darüber etwas an Tag 10, »Alles über CGI-Programmieren«, lernen. Das könnte bedeuten, daß Sie, wenn Sie genügend Programmierfertigkeiten (und Vertrautheit mit Ihrer Datenbank) besitzen, ein Programm erstellen könnten, das Datenbankanfragen von einer Webseite aus ausführt und dann eine hübsch formatierte Liste mit den einzelnen Punkten auswirft. Wenn dann jemand auf der Webseite die alphabetische Liste anforderte, würde er eine automatisch generierte Liste bekommen, die genauso aktuell wie die Datenbank wäre. Um dies zu erhalten, benötigen Sie allerdings eine Datenbank, die sich mit Ihrem Web-Server unterhalten kann, und ob das möglich ist, hängt von dem System ab, unter dem Ihr Web-Server läuft. Und von Ihren Programmierfähigkeiten.
Eine alternative Lösung könnte darin bestehen, die Daten in der Datenbank zu lassen und sie dann ab und zu in Text umzuwandeln, der dann wiederum zu HTML konvertiert wird. Die Hauptschwierigkeit ist bei dieser Lösung natürlich, wieviel Arbeit die Konvertierung jedesmal bereitet, wenn gleichzeitig die Querverweise zu den anderen Seiten aufrechterhalten werden sollen. Könnte dieser Vorgang automatisiert werden, und wieviel Anfangsarbeit und tägliche Aufrechterhaltung wären erforderlich?
Bei dieser Art von Anwendung müssen Sie mit diesen Arten von Fragen und technischen Herausforderungen rechnen, wenn Sie Web-Präsentationen erstellen. Manchmal fordert ein Problem halt mehr, als nur Informationen für den Bildschirm zu konzipieren, zu schreiben und zu formatieren.
Beispiel vier: ein Online-Buch
In diesem letzten Beispiel werden wir uns ein Online-Buch namens Bread&Circuses (Brot&Spiele) anschauen. Dies ist ein Buch, das vielleicht schon gedruckt und dann in HTML konvertiert und mit wenigen Änderungen formatiert wurde - die buchähnliche Struktur wurde in HTML beibehalten, wobei jedes Kapitel seine eigene Webseite bekam. Dies ist auf dem Web nicht ungewöhnlich, nicht unbedingt bei Büchern, aber bei Papieren, Artikeln und anderen Arten linearer Information. Funktioniert es? Lesen Sie weiter.
Die Homepage von Bread&Circuses (siehe Abbildung 12.18) ist, passenderweise, ein Inhaltsverzeichnis, gerade so, wie es in einem richtigen Buch der Fall sein mag. Organisiert als verschachtelte Listen, ist dieses Verzeichnis ein ziemlich langes Verknüpfungs-Menü mit Verweisen auf die verschiedenen Abschnitte im Buch.
Abbildung 12.18: |
Leser, die am gesamten Inhalt, den das Buch zu bieten hat, interessiert sind, können einfach die Verbindung zu den Grundlagen anwählen und dann den ganzen Weg weiterlesen. Oder sie könnten einfach ein Thema auswählen und dann direkt zu diesem Abschnitt des Buchs springen.
Proofing
Die Verbindung mit Proofing führt den Leser zu der Datei für Kapitel 1 und blättert dann zu dem passenden Abschnitt in der Datei (dargestellt in Abbildung 12.19).
Abbildung 12.19: |
Die Leser können nun alles über das Aufgehen des Teiges lesen und so das Ende des Abschnitts erreichen. Darauf folgt der nächste Abschnitt »Shaping«. Und darauf folgt der Rest des Kapitels.
Schließlich, am Ende des Kapitels, gibt es Navigationsverbindungen zurück zum Inhaltsverzeichnis und weiter zum nächsten Kapitel (Abbildung 12.20).
Abbildung 12.20: |
Diese beiden Navigationsverbindungen erlauben es Ihnen, sich entweder linear durchs Buch zu bewegen, indem Sie die Verknüpfung mit dem nächsten Kapitel auswählen, oder sich zurück zum Inhaltsverzeichnis zu bewegen und einen anderen Abschnitt oder ein anderes Kapitel auszuwählen. Beachten Sie, daß in diesem Beispiel die Plazierung der Verknüpfungen nur am Ende jeder Kapiteldatei vorgenommen ist. Das Inhaltsverzeichnis macht es leicht, in die Mitte eines Kapitels zu springen, um jedoch wieder aus dem Kapitel herauszukommen, müssen Sie ganz nach unten blättern (oder mit Ihrem Browser zurückgehen).
Der Index
Am Ende des Inhaltsverzeichnisses befindet sich eine Verknüpfung zum Index (am selben Ort, an dem er auch in einem richtigen Buch wäre - am Schluß). Der Index ähnelt dem Inhaltsverzeichnis insofern, als er einen Überblick über den Inhalt bietet und Verbindungen zu bestimmten Stellen innerhalb des Buchs selbst. Wie ein gedruckter Index auch enthält die Online-Version eine alphabetische Liste der wichtigsten Themen und Wörter, jedes einzelne verbunden mit der Stelle im Text, an der es erwähnt wird (Abbildung 12.21).
Abbildung 12.21: |
Die Hefe wird viele Male in dem Buch erwähnt. Da Online-Bücher im allgemeinen keine Seitenzahlen haben, wird das Verbinden der Index-Einträge zu den verschiedenen Fundstellen zu einer rechten Fleißaufgabe, zumal der Autor bei jedem Eintrag ein wenig vom Zusammenhang beschreiben muß, anstatt ihn einfach blind zu verbinden (ganz abgesehen davon, daß all diese Anker innerhalb der jeweiligen Kapitel angebracht werden müssen).
Ist dieser Index also nützlich? Wie das Inhaltsverzeichnis hilft er den Lesern, an eine bestimmte Stelle des Inhalts zu springen. Doch ist es wie auch beim Inhaltsverzeichnis für die Leser schwer, wieder herauszukommen, wenn sie einmal im Buch drin sind - beim Index sogar noch schwieriger, da der Autor keine Navigationsverbindung am Ende eines Kapitels direkt zurück zum Index anbieten kann (Zu welchem Stichwort sollte sie führen?). Dies macht den Index nur unter bestimmten Umständen sinnvoll.
Besonderheiten und Gesichtspunkte der Entwicklung dieser Web Site
Das größte Problem, wenn man Bücher oder andere lineare Materialien online zur Verfügung stellen will, besteht darin, daß es schwieriger ist, sich darin zu bewegen, als es auf dem Papier war. Online können die Leser nicht so schnell und leicht über die Seiten huschen, wie sie es mit dem Papier machen können, und sie können sich auch nicht an Seitennummern und Kapitelüberschriften orientieren - was beides Anhaltspunkte sind, die das Sichzurechtfinden in gedruckten Büchern erleichtern. Aus diesem Grunde ist der springende Punkt, Überblicks-Seiten einzufügen, wie das Inhaltsverzeichnis in diesem Beispiel, um den Lesern zu ermöglichen, in den Inhalt zu springen und wieder zurück und zu finden, was sie wollen.
Was noch wichtiger ist, ist ein Weg, wieder herauszuspringen. In diesem Beispiel machte es das Inhaltsverzeichnis möglich, in den Inhalt zu springen, doch das Zurückspringen war weniger leicht, weil es nur wenige Navigationsverbindungen gab, abgesehen von jenen am Ende jeden Kapitels. Und zurück zum Index zu springen, erforderte zwei Verknüpfungen: zurück zum Inhaltsverzeichnis und dann weiter zum Index. Im gedruckten Buch ist dies kein Problem, wohl aber online.
Dieses Beispiel bot sowohl ein Inhaltsverzeichnis als auch einen Index. Verschiedene Ansichten desselben Inhalts sind normalerweise hilfreich, wie ich in den vorigen zwei Beispielen gezeigt habe, da sie Ihren Lesern verschiedene Möglichkeiten zu Verfügung stellen, auf welche Weise sie das gesuchte Thema finden können. Passen Sie jedoch bei Ansichten, die für den Druck beabsichtigt waren auf, da sie nicht immer sonderlich gut angewendet werden können. Zum Beispiel funktioniert ein typischer Index mit einem Wort oder Zitat und einer Liste von Seitennummern in einer Web-Präsentation nicht sonderlich gut, da es dort keine Seitennummern gibt. Ziehen Sie deshalb eine andere Methode in Betracht, mit der Informationen in Ihrem Dokument erreicht werden können.
Wenn Sie ein lineares Dokument zum Web konvertieren, könnten Sie auch in Versuchung geraten, zusätzliche nichtnavigierbare Verknüpfungen hinzuzufügen, wie z.B. Fußnoten, Zitate oder anderes verwandtes Material. Bedenken Sie bei solchen linearen Strukturen wie Hierarchien, daß die Struktur Ihren Leser oft davon abhalten kann, sich in Ihrem Material zu verirren oder in Verwirrung zu geraten. Verknüpfungen zu anderen Abschnitten des Buchs können deshalb Verwirrung hervorrufen und die Struktur aufweichen, die Sie so mühsam bei der HTML-Konvertierung zu bewahren versuchten.
Der begrenzte Einsatz solcher nichtnavigierbaren Verbindungen kann jedoch auch gut funktionieren - zum Beispiel ein ausdrücklicher Bezug im Text auf einen anderen Abschnitt des Buchs wie etwa: »Weitere Informationen über Hefe finden Sie unter >Hefe< in Kapitel eins«. In diesem Fall ist es klar, wohin die Verknüpfung gerichtet ist, und die Leser verstehen, wo sie sich befinden und wohin sie gehen, so daß sie Ihre Position in der Präsentation entsprechend einschätzen können.
Zusammenfassung
Ich habe hier nur eine Handvoll Ideen für die Verwendung und Strukturierung von Webseiten präsentiert; unbegrenzt sind die Variationen dieser Themen für die Webseiten, die Sie gestalten werden.
Vermutlich der beste Weg, um Beispiele zu finden für die Art von Webseiten, die Sie gestalten möchten, und wie sie aufgebaut werden, ist, ins Web hinauszugehen und dort herumzustöbern, was es so gibt. Richten Sie, während Sie blättern, Ihr Augenmerk neben der Beurteilung von Anordnung und Gestaltung einzelner Seiten und des Inhalts, den sie beschreiben, darauf, welche Struktur die Leute benutzt haben, um ihre Seiten zu organisieren, und versuchen Sie zu erraten, weshalb sie sich für die jeweilige Organisation entschieden haben. (»Die haben sich überhaupt nichts gedacht«, ist unglücklicherweise ein häufiger Grund für viele erbärmlich organisierte Webseiten.) Kritisieren Sie anderer Leute Webseiten unter dem Gesichtspunkt der Struktur: Ist es leicht, sich in ihnen zu bewegen? Haben Sie sich verirrt? Kommen Sie leicht von einer beliebigen anderen Stelle in der Präsentation auf eine bekannte Seite zurück? Wenn Sie für diese Präsentation ein Ziel gehabt hätten, haben Sie es erreicht, und wenn nicht, wie hätten Sie die Präsentation umorganisiert?
Das Lernen aus den Fehlern anderer Leute und zu sehen, wie andere Leute schwierige Probleme gelöst haben, kann Ihnen dabei helfen, Ihre eigenen Webseiten besser zu machen.
Fragen und Antworten
Frage:
Diese Web-Präsentationen sind echt toll. Wie lauten ihre URLs?
Antwort:
Wie ich zu Anfang des Kapitels bemerkte, sind die Web-Präsentationen, die ich hier beschrieben habe, Attrappen möglicher Web-Präsentationen, die es geben könnte (und Sie finden diese Attrappen auf der CD-ROM, die diesem Buch beiliegt). Obwohl viel von der Gestaltung und Organisation, die ich hier benutzt habe, durch real existierende Webseiten inspiriert wurde, gibt es diese Seiten nicht im Web.
Frage:
Drei der vier Beispiele hier haben eine Form hierarchischer Organisation benutzt. Sind Hierarchien so gebräuchlich, und muß ich sie benutzen? Kann ich nicht auch etwas anderes machen?
Antwort:
Hierarchien sind außerordentlich gebräuchlich im Web, doch das heißt nicht, daß sie schlecht sind. Hierarchien sind ein ausgezeichneter Weg, seinen Inhalt zu organisieren, besonders, wenn die Informationen, die man präsentiert, schon von Haus aus zu einer hierarchischen Organisation neigen.
Gewiß können Sie irgendwas anderes nehmen, um Ihre Präsentation zu organisieren. Doch die Schlichtheit von Hierarchien erlaubt es, sie schnell zu strukturieren, einfach zu durchmessen und leicht zu pflegen. Warum sich und den Lesern mehr Arbeit machen und den Versuch unternehmen, eine komplizierte Struktur über ansonsten einfache Informationen zu stülpen?
Copyright ⌐1998 by SAMS, einem Imprint der Markt&Technik Buch- und Software-Verlag GmbH.
Elektronische Fassung des Titels: HTML 4 in 14 Tagen, ISBN: 3-8272-2019-X
