Maggie Porturos persönliche Seiten
Tag 11
Kapitel 21 - Informierende Präsentationen
Alle HTML-Bücher der Welt machen aus Ihnen keinen guten Web-Designer, genausowenig wie Sie aus einem Buch auch nicht lernen können, Wasserski zu fahren. Sie lernen nur, indem Sie eigene Web-Präsentationen (und zwar ganz viele) schreiben und das Web mit einem Auge für das Mögliche und das Unmögliche betrachten. Wenn Sie das mit dem Wissen kombinieren, das Sie aus den früheren Kapiteln dieses Buches mitbringen, sollte Ihnen das eine gute Ausgangsposition verschaffen.
Als kleine Übung wollen wir in diesem Kapitel zwei echte Präsentationen betrachten:
Beide Präsentationen werden wir Seite für Seite und Link für Link betrachten und die Entscheidungen für Organisation, Design, HTML-Code, Grafikeinsatz, Kompatibilität mit unterschiedlichen Browsern und anderen Aspekten kommentieren. Nachdem Sie den Aufbau dieser Seite nachvollzogen haben, sollten Sie konkrete Ideen haben, wie Sie Ihre eigenen Präsentationen anlegen können.
Die Beispiele im Web
Die Darstellung dieser Beispiele auf Papier und eine Erklärung in einem Buch kann keinen Gesamteindruck verschaffen. Die beste Methode, wie Sie den Aufbau dieser Beispiele verstehen lernen, ist ihre Betrachtung mit verschiedenen Browsern. Glücklicherweise handelt es sich bei diesen beiden Web-Präsentationen um echte Beispiele. Sie erhalten sie unter der folgenden Adresse:
http://www.lne.com/Web/Examples/
|
Die Darstellungen ändern sich mit der Zeit, neue Informationen werden hinzugefügt, und die einzelnen Präsentationen werden immer weiter ausgeschmückt. Wenn Sie also das im folgenden Beschriebene nicht besonders interessant finden, sollten Sie trotzdem einen Blick darauf werfen. |
Maggie Porturos persönliche Seiten
Die erste Präsentation, die wir hier betrachten, beinhaltet einige wenige persönliche Seiten einer gewissen Maggie Porturo aus Boston.
Die Darstellung persönlicher Homepages variiert entsprechend der Person, die sie entwirft, ganz erheblich, und so sollte es auch sein. Wenn Sie eigene persönliche Webseiten erzeugen wollen oder schon etwas ähnliches gemacht haben, sollten Sie nicht annehmen, daß die hier gebotene Beschreibung der einzig gültige Standard ist. Ihre persönliche Präsentation soll nur Sie selbst reflektieren. Seien Sie kreativ!
|
Ähnlichkeiten zwischen Maggie Porturo und der Autorin sind rein zufällig. Wirklich. |
Die Homepage
Die Homepage mit den persönlichen Dateien von Maggie ist in Abbildung 21.1 gezeigt.
Abbildung 21.1: |
Als erstes fällt Ihnen an dieser Seite vielleicht auf, daß sie sehr grafikintensiv ist, mit dem Foto, den Icons und den Trennlinien. Es gibt zwar sehr viel Grafik auf der Seite, aber alle Bilder sind relativ klein (sowohl hinsichtlich der Größe als auch hinsichtlich der Farben). Keines der Icons und keine der Linien belegt mehr Platz als 500 Byte. Das größte auf der Seite ist das Foto mit 9,2 Kbyte, und das ist für Web-Verhältnisse noch relativ klein. Sie haben vielleicht den Eindruck, daß viele der Bilder überflüssig sind, aber es wurde viel Arbeit darauf aufgewendet, sie so klein wie möglich zu machen.
Als nächstes fällt die Titelzeile neben dem Bild auf. Die Ausrichtung mehrerer Zeilen neben einem Bild auszurichten ist eine Möglichkeit von HTML 3.2 und wie man im Anschluß sehen kann, enthält der Quelltext tatsächlich HTML-3.2-Features:
<IMG SRC="me.gif" ALIGN=LEFT ALIGN=MIDDLE ALT="">
<H1>Maggie Porturo and her all-singing, all-dancing home
page </H1>
<BR CLEAR=ALL>
Aber die Verwendung von neueren Tags bedeutet nicht unbedingt, daß das Dokument nur in Netscape und anderen Browsern, die diese HTML-3.2-Merkmale unterstützen, eingesetzt werden kann. Betrachten wir die Seite in Mosaic (siehe Abbildung 21.2).
Abbildung 21.2: |
Der Titel wird hier nicht neben dem Bild dargestellt, aber er beschreibt immer noch ganz offensichtlich die Seite, und das Design funktioniert immer noch. Durch das Testen Ihrer Seiten in mehreren Browsern können Sie alles so arrangieren, daß Ihr Design in unterschiedlichen Browsern funktioniert, während der Vorteil unterschiedlicher Funktionen genutzt werden kann.
Was hat es mit den Linien auf sich? Warum hat Maggie nicht einfach eine ganz normale Linie verwendet statt dieser seltsamen blauen Linie? Einige Leute mögen den Effekt farbiger Linien. Wieder handelt es sich um ein kleines Bild (514 Byte), und da es mehrfach vorkommt, muß es nur einmal geladen werden.
Aber wie sieht das Ganze in einem textbasierten Browser aus? Hier sehen wir den Quellcode:
<IMG SRC="line.gif" ALT="
_______________________________________________________________________"
>
Das nennt man in der Web-Welt auch einen »sneaky trick«. Wir hätten auch HR verwenden können; der Einsatz der grafischen Linie bedeutet, daß wir in textbasierten Browsern darauf hinweisen müssen, daß die Zeile existiert. Da wir in ALT keine HTML-Kennung eingeben können, müssen wir etwas anderes tun. Eine Zeile mit Unterstrichen funktioniert ganz gut.
Auf der nächsten Zeile der Homepage haben wir eine Meldung, daß diese Seiten noch in der Entstehungsphase sind. Ein entsprechendes Icon wird angezeigt (siehe Abbildung 21.3).
Abbildung 21.3: |
Diese Warnung wird heute für viele Webseiten eingesetzt, weil Ihre Leser daran erkennen, daß sich der Inhalt vielleicht noch ändern wird und daß es noch einige Ungenauigkeiten gibt. Wenn Sie diese Warnung verwenden, sollten Sie sicherstellen, daß der vorhandene Inhalt in sich konsistent ist. Beachten Sie insbesondere die folgenden Regeln:
|
Wenn Sie gerade angefangen haben, Webseiten zu entwickeln, scheinen Grafiken und Überschriften, die anzeigen, daß sich etwas gerade erst in Aufbau befindet, ganz nützlich zu sein. Allerdings haben sie im allgemeinen bei Web-Usern einen schlechten Ruf. Manche würden sogar von sich behaupten, daß sie sie hassen. Eventuell haben sie nämlich einiges an Zeit aufgewendet, um zu Ihrer Site zu gelangen und dort eine bestimmte Seite zu erreichen, nur um festzustellen, daß sie sich noch im Aufbau befindet. Am besten fahren Sie, wenn Sie es vermeiden, Seiten zu veröffentlichen, bevor diese fertig sind. |
Auf Maggies Seite haben wir nun mehrere Icons (siehe Abbildung 21.4).
Abbildung 21.4: |
Diese Icons bilden ein Link-Menü auf die verschiedenen Seiten auf dem Site. Interessant ist, daß die Icons zwar verschieden breit sind, der Autor jedoch die Grafik so modifiziert hat, daß sie alle dieselbe Breite haben, so daß der danebenstehende Text bündig ausgerichtet ist. Dazu werden die Icons entweder skaliert, wie es etwa bei dem Mail-Icon der Fall war, oder man fügt einfach freien Platz um das eigentliche Icon herum ein.
Die blaue Linie und der einfache Copyright-Vermerk (bei dem Link handelt es sich um einen einfachen mailto-Link) bilden das Ende der Homepage. Nun wollen wir die einzelnen Seiten betrachten.
Die Me-Seite - Wer bin ich?
Die Me-Seite enthält persönliche Informationen über Maggie (siehe Abbildung 21.5). Auf einen Blick erkennen Sie, welchen Beruf sie hat, wo sie wohnt, und erhalten weitere Angaben zu ihrer Person.
Jeder Abschnitt beschreibt einen Aspekt aus Maggies Leben. In einigen Abschnitten sind kleine Thumbnail-Bilder enthalten, die einen Link zu größeren Bildern besitzen. Der Abschnitt über Angus, die Katze, enthält ein kleines Thumbnail-GIF-Bild, das einen Link zu einem größeren JPEG-Bild besitzt. Maggie hat die Bildeigenschaften (Format und Größe) neben dem Thumbnail beschrieben, so daß Sie wissen, was Sie erwartet, wenn Sie diesem Link folgen (siehe Abbildung 21.6).
Abbildung 21.5: |
Abbildung 21.6: |
Beachten Sie, daß die Bilder für den Seiteninhalt nicht wesentlich sind. In textbasierten Browsern werden die meisten Bilder einfach ignoriert, auch wenn die Links zu den größeren JPEG-Bildern noch funktionieren.
(Sie wissen, in textbasierten Browsern können Sie Bilder herunterladen, um sie später zu betrachten. Nur weil die Bilder nicht auf dem Bildschirm gezeigt werden, heißt das nicht, daß man überhaupt nicht darauf zugreifen kann.)
Beachten Sie ebenfalls, daß Bilder, die keine größeren Pendants haben, auch keine Links besitzen. Warum sollte man einen Link auf etwas erzeugen, das nicht existiert?
Ganz unten auf der Seite haben wir schließlich ein Icon für die Rückkehr zur Homepage (siehe Abbildung 21.7). Durch das Icon und den Text wird schnell klar, wohin dieser Link führt.
Abbildung 21.7: |
Maggies Bücherseite
Als nächstes finden wir Maggies Books-Page in der Liste. Es ist immer gut, über seine Hobbies zu sprechen. Man weiß nie, wer die Seite liest; vielleicht hat er dieselben Hobbys und freut sich über die Information. Auf dieser Seite beschreibt Maggie ihre Lieblingsbücher und bietet einige Links auf andere Sites, wo man noch mehr darüber findet (siehe Abbildung 21.8).
Abbildung 21.8: |
Gerade die Links machen das Web zu dem, was es ist. Ohne Links zu anderen Sites wäre das Web relativ langweilig. Alles würde sich auf einem einzelnen Site befinden, ohne irgendwelche Verbindungen. Links auf andere Seiten sind also immer gut. Lassen Sie sich aber nicht hinreißen: Seitenweise Links können für Ihre Hotlists ganz gut sein, aber für andere Leute sind sie müßig. Wenn Ihre Leser einen Index wollen, dann benutzen Sie einen Index. Sie sind aus einem Grund auf Ihrer Site: Sie wollen etwas über Sie erfahren. Ihre persönlichen Seiten sollten von Ihnen erzählen und dann auf Sites verweisen, die Ihre Leser oder Sie interessant finden.
Das Layout dieser Seite wurde konsistent mit den zwei vorhergehenden Seiten entwickelt. Alle verwenden dieselben blauen Linien und Kopf- und Fußzeilen. Sie haben vielleicht auch bemerkt, daß die Überschrift der Books- und der Me-Seite dasselbe Icon tragen, wie auf der Homepage angegeben (siehe Abbildung 21.9). Diese kleinen Extras im Design machen mehrere einzelne Seiten zu einem Ganzen und vermitteln Ihrem Leser, daß er sich immer noch auf Ihrem Site befindet und es mit demselben Designer zu tun hat.
Abbildung 21.9: |
E-Mail für Maggie
Abbildung 21.10: |
Die Mail-Page enthält ein einfaches Formular, mit dem der Leser E-Mails an Maggie senden kann. Dieses Formular unterscheidet sich von einem einfachen mailto-Formular oder den eingebauten Mail-Funktionen Ihres Browsers, weil die Auswahl-Menüs dem Leser ermöglichen, mehrere witzige Angaben vorzunehmen (siehe Abbildung 21.10).
Diese Auswahl-Menüs sind zwar recht belanglos, aber sie passen zum allgemeinen Ton in der Präsentation. Niemand sagt, daß HTML und Webseiten ernst sein müssen. Das Web ist ein Kommunikationsmedium, und die unterhaltsame Kommunikation ist genauso wichtig wie die schnelle und klare Weitergabe von Informationen. Abhängig von den Zielen Ihrer Präsentation und den angesprochenen Lesern können Sie Entscheidungen über ihren Inhalt treffen. In diesem Fall hätte Maggie auch ein einfaches Mail-Formular aufnehmen können, aber das hätte viel weniger Spaß gemacht. Dieses Formular spiegelt ihre Persönlichkeit und ihren Sinn für Humor besser wider.
Das Gästebuch
Abbildung 21.11: |
Bei der letzten Seite handelt es sich um ein Gästebuch (siehe Abbildung 21.11), das Sie schon aus Kapitel 20, »Praktische Formulare und Skripten«, kennen. Hier haben wir dasselbe Gästebuchprogramm, wobei der HTML-Code für die Seite leicht verändert wurde, so daß er dem Design der restlichen Seiten besser entspricht. Diese Seite zeigt, wie Sie Code und Beispiele aus anderen Teilen des Webs für Ihre eigenen Seiten verwenden können.
Das ist alles! Damit haben Sie Maggies Seiten gesehen. Das sind zwar nur einige wenige, aber dennoch erfahren Sie dort schon eine ganze Menge über Maggie.
Wie unterscheidet sich eine Web-Präsentation einer Firma von der einer Privatperson? Erstens enthält sie keine persönlichen Informationen, und zweitens hat sie eine straffere Organisation. (Persönliche Seiten könnten auch eine straffere Struktur haben, aber ein paar lockere Seiten sind doch viel persönlicher.) Firmenseiten unterliegen strenger den Regeln eines konsistenten Designs und sollen insgesamt das Image der Firma widerspiegeln.
In diesem Abschnitt betrachten wir eine Präsentation für eine kleine Firma namens Beanpole Software Inc., die Web-Tools herstellt (das ist natürlich alles fiktiv). Diese Präsentation ist nicht so groß wie manche andere im Web, aber sie bietet fast dieselben Funktionen. Die meisten anderen Firmenpräsentationen weisen eine größere Tiefe auf, aber vom Inhalt her sind sie einander alle sehr ähnlich.
Die Homepage
Die Homepage für Beanpole Software sehen Sie in Abbildung 21.12.
Diese Homepage besteht aus zwei großen Abschnitten: dem Banner und den Icons mit den Links.
Abbildung 21.12: |
Die Überschrift (das Banner) fällt sofort ins Auge. Sie enthält das Firmenlogo sowie den Namen Beanpole Software Incorporated. Dazu gibt es mehrere Dinge zu sagen:
Wenn Sie aufgepaßt haben, fragen Sie sich vielleicht, wie textbasierte Browser den Firmennamen in der Grafik darstellen können.
Mit ALT-Text kann das folgendermaßen bewerkstelligt werden:
<IMG SRC="beanpole.gif" ALT="Beanpole Software Incorporated">
Aber das reicht noch nicht. Sie benötigen eine Hervorhebung, um zu zeigen, daß es sich hier um Beanpoles Homepage handelt. Diese Betonung erzielen Sie mit einem H1-Tag. Sie können jedoch keine HTML-Tags in den ALT-Text aufnehmen. Was also tun?
Es gibt einen Trick:
<H1>
<IMG SRC="beanpole.gif" ALT="Beanpole Software Incorporated">
</H1>
Wenn der ALT-Text für das Bild ersetzt wird, dann befinden Sie sich schon mitten in einer H1-Überschrift, so daß der ALT-Text als H1 interpretiert wird (siehe Abbildung 21.13; so sieht es in Lynx aus). Da dieses Tag nur aus einem Bild besteht, haben grafische Browser kein Problem damit. Sie zeigen das Bild einfach an und gehen weiter.
Abbildung 21.13: |
Wenn Sie ein Purist sind, werden Sie bemerkt haben, daß gemäß dem echten HTML kein Text in dieser Überschrift steht, und Programme, die einen Index für Überschriften erzeugen, bekommen dadurch möglicherweise Probleme.
Sie haben recht. In einem Roman gibt es auch keine Charakterentwicklung auf der Titelseite. In diesem Fall dient die gesamte Seite keinem anderen Zweck, als den Leser in die übrige Präsentation einzuführen. Es handelt sich nicht um ein Dokument mit unzähligen Überschriften und Inhalt, sondern nur um eine Übersichtskarte für die übrige Präsentation.
|
Ich will mir hier nicht selbst widersprechen. Es stimmt natürlich, daß einige strenge HTML-Editoren Probleme damit haben, wenn in einem H1-Tag kein Text steht. Aber in diesem besonderen Fall ist es für die Präsentation als Ganzes sinnvoll. Wieder müssen Sie als Web-Entwickler die Entscheidung treffen. Wollen Sie streng den HTML-Regeln gehorchen, oder wollen Sie sie ein bißchen zurechtbiegen? So lange Sie die Konsequenzen Ihrer Aktionen überschauen können und denken, daß der dabei erzielte Effekt die Konsequenzen wettmacht, können Sie die Regeln ein wenig abändern. |
Der zweite Teil der Seite besteht aus einer zweispaltigen Auflistung von Icons (siehe Abbildung 21.14). Handelt es sich hier nicht eher um eine Tabelle? Ja und nein. Diese Spalten werden durch vorformatierten Text realisiert. Sie sind so ausgerichtet, daß die Icons sinnvoll auf der Seite angeordnet werden. Deshalb wird der Link-Text auch in einer nichtproportionalen Schrift dargestellt.
Das sieht noch längst nicht so spektakulär aus, wie es sein könnte. Da der vorformatierte Text nicht umbrochen werden kann, haben Sie dasselbe Problem mit den Icons wie zuvor mit der Überschrift, wenn die Bildschirmbreite nicht ausreicht. Vielleicht treffen Sie diese Designentscheidung, um den Spalteneffekt für die Icons zu erzielen, ohne Tabellen neu anordnen zu müssen. Diese Seite sieht vielleicht lustig aus, aber sie ist HTML-2-konform (ich habe das überprüft).
Ein anderer Ansatz, die Icons auszurichten, ist, nun da HTML 3.2 nahezu überall verfügbar ist, die Verwendung von Tabellen. Tabellen sind relativ einfach zu erstellen und funktionieren in den meisten der aktuellen Browser. Um diese Methode anzuwenden, erzeugen Sie einfach eine Tabelle mit zwei Spalten und einem Icon in jeder Tabellenzelle. Indem Sie die Umrandung der Tabelle abschalten, erhalten Sie ein Ergebnis, das dem Ansatz mit vorformatiertem Text entspricht, allerdings mit einem wesentlichen Vorteil: Der Browser wird alles tun, um die Tabelle in das Fenster einzupassen - selbst wenn dieses sehr schmal ist.
Jedes Icon hat einen Link auf eine Seite und ein separates Thema. Es gibt natürlich die allpräsente What's-New-Seite, eine Suchseite sowie drei Icons für die Produkte von Beanpole. Diese Homepage ist also einfach nur eine Art Übersichtskarte für die restliche Präsentation.
Als erstes wollen wir in dieser Präsentation die Seite »What's New at Beanpole« betrachten. Wenn Sie diesen Link anwählen (das rot-gelbe Geburtstagsgeschenk, falls Sie einen grafischen Browser einsetzen), erhalten Sie die in Abbildung 21.15 gezeigte Seite.
Hier sehen Sie die erste Seite, die dasselbe Design wie alle Seiten auf diesem Site verwendet: Oben rechts befindet sich das Beanpole-Logo, daneben eine Überschrift und zum Text hin eine blaue Linie. Jede Seite dieser Präsentation folgt dieser Konvention, wie Sie gleich sehen werden.
Abbildung 21.15: |
In diesem Beispiel enthält die What's-New-Seite Informationen darüber, was es in der Firma Neues gibt. Einige Firmen verwenden What's New, um zu zeigen, was es im Web Site Neues gibt, oder um aktuelle Presseberichte darzustellen. Was Sie auf der What's-New-Seite unterbringen, bleibt Ihnen überlassen.
Beachten Sie, daß die Elemente auf What's-New-Seiten in umgekehrter Reihenfolge angezeigt werden, d.h. das neueste Element erscheint ganz oben. Dadurch können die Leser, die Ihren Site häufig besuchen, auf den ersten Blick Neuigkeiten erkennen. Sie müssen nicht das gesamte Dokument laden und dann nach unten blättern, um die neuen Informationen zu finden. Darüber hinaus können Sie die älteren Informationen unten im Dokument entfernen, indem Sie sie ganz löschen oder in einer separaten Datei ablegen, die Sie mit der ursprünglichen Seite verknüpfen.
Unten auf der Seite befindet sich eine Fußzeile mit zwei Trennlinien, einer Symbolleiste und einem Copyright-Vermerk. Auch diese Darstellung ist für alle Seiten konsistent und erscheint auf den meisten Seiten dieses Sites (siehe Abbildung 21.16).
Abbildung 21.16: |
Zuerst betrachten wir den Copyright-Vermerk. Wenn Sie viele Copyright-Informationen haben (mehr als eine oder zwei Zeilen), wollen Sie vielleicht eine Kurzform davon in die Fußzeile stellen und einen Link auf die vollständige Angabe erzeugen. Das bietet mehrere Vorteile gegenüber der Aufnahme aller Copyright-Informationen in Ihre Fußzeile:
Ein häufiger Trick vieler Web-Entwickler ist, das Netscape-Tag <FONT> einzusetzen, um die Schriftart soweit wie möglich zu verkleinern. Dann ist zwar alles angegeben, aber es belegt nicht mehr soviel Platz. Das trifft dann zwar in Netscape zu, aber in anderen Browsern ist die Darstellung immer noch groß und häßlich.
Jetzt wenden wir uns dem interessanteren Abschnitt der Fußzeile zu: der Symbolleiste, die Sie in Abbildung 21.17 noch einmal sehen.
Abbildung 21.17: |
Die Beanpole-Symbolleiste enthält fünf Icons, die demselben Design folgen wie das Firmenlogo und die Icons auf der Homepage. Jedes Icon stellt einen separaten Link auf eine separate Seite auf dem Server dar. Sie erkennen, wo Sie bereits gewesen sind, weil diese Links, im Gegensatz zur blauen Darstellung, lilafarben dargestellt werden. Die Icons liefern auch einen schnelleren Zugriff auf diese Seiten, als wenn Sie einen Abbildungsplan verwendet hätten. (Erinnern Sie sich, daß ein Abbildungsplan durch ein CGI-Programm hindurchgeleitet werden muß, um zu funktionieren, was prinzipiell langsamer als ein direkter Link ist.) Diese haben auch einen Vorteil gegenüber Client-Imagemaps: Wenn sie in einem Textbrowser, wie z.B. Lynx, angezeigt werden, ist jede Schaltfläche eine eigene Abbildung, die einen eigenen ALT-Text und Link haben kann. Eine Client- bzw. auch Server-Imagemap schließt Lynx-User von der Benutzung der Symbolleiste aus.
Abbildung 21.18: |
Abbildung 21.19: |
Wenn Sie die Bildschirmbreite verringern, werden die Icons in der Leiste in die nächste Zeile umbrochen (wie in Abbildung 21.18 gezeigt). Es gibt natürlich wenige Leser, die ihre Seiten in dieser Form darstellen. Aber beachten Sie, daß es Bildschirme gibt, die einfach nicht so breit sind wie Ihrer, und wenn Ihre Symbolleiste dann aus einem einzigen Bild besteht, könnte es sein, daß ein Teil davon rechts abgeschnitten wird.
Beachten Sie, daß es für jede Icon-Schaltfläche eine Beschriftung gibt (HOME oder NEWS). Diese Beschriftung hilft, die Aufgabe des jeweiligen Icons zu erkennen, die ansonsten vielleicht unklar wäre (was könnte ein grüner Klecks bedeuten?). Da diese Beschriftung Teil des Icon-Layouts ist, scheint sie nicht so sehr eine Beschriftung zu sein, sondern integraler Bestandteil des Icons.
Aber was ist mit den textbasierten Browsern, die überhaupt keine Icons verwenden? Keine Sorge. Jedes Icon hat einen zugeordneten ALT-Text, so daß jede »Schaltfläche« in einem textbasierten Browser genauso wie in einem grafikorientierten Browser selektiert werden kann (siehe Abbildung 21.19). Da Sie die Linien und den Copyright-Vermerk immer noch haben, stellt die Fußzeile als Ganzes einen wichtigen Teil des Seitendesigns dar, selbst in einer rein textorientierten Umgebung.
Die einzelnen Schaltflächen in dieser Symbolleiste werden wir später betrachten. Jetzt wählen wir HOME, um zur Homepage zurückzugelangen.
Alles über Beanpole
Als nächstes betrachten wir uns die Seite All About Beanpole Software, die Sie direkt unterhalb des What's-New-Icons finden (siehe Abbildung 21.20).
Abbildung 21.20: |
Über diese Seite ist nicht viel zu sagen. Sie folgt demselben Designstil, der auch bei der Beschreibung der What's-New-Seite erwähnt wird: Die Kopfzeile enthält das Icon und die große Überschrift, und in der Fußzeile finden wir dieselbe Symbolleiste.
Beachten Sie jedoch, daß die Kontaktadresse für die Firma sich ganz oben auf der Seite befindet, noch vor der allgemeinen Firmengeschichte. Damit sollte sichergestellt werden, daß jeder, der Beanpoles Telefonnummer braucht, sie sofort finden kann. Ein Argument übrigens auch dafür, die Kontaktadressen direkt auf der Homepage unterzubringen. Aber hier sind wir nur einen einzigen Link von der Homepage entfernt, also ganz oben, und die gesamte Information ist in wohlgeordneter, einfach zu überblickender Weise dargestellt.
Beanpole Author
Jetzt gehen wir zurück zur Homepage und springen weiter auf die Seite Beanpole Author (siehe Abbildung 21.21). Dies ist eine der drei Seiten über Beanpoles Produkte. Die beiden anderen sind Beanpole Server und Beanpole Networks. Für alle drei gibt es Icons auf der Homepage, so daß interessierte Leser die jeweilige Information direkt anwählen können.
Abbildung 21.21: |
Beanpole Author ist ein Tool zum Erstellen von HTML-Dokumenten, das auf dieser Seite beschrieben wird. Es liegt in drei Versionen vor: eine kostenlose eingeschränkte Version, die vom Internet heruntergeladen werden kann, eine kostengünstigere Version mit einigen komplexeren Funktionen sowie eine voll funktionsfähige und teurere Version, die zusammen mit dem Serverprodukt eingesetzt werden kann. Die Seite beschreibt alle drei Versionen.
Beachten Sie das Disketten-Icon nach der Beschreibung der kostenlosen Version (siehe Abbildung 21.22). Wenn die Software vom Internet heruntergeladen werden kann, dann soll es dem Leser möglich sein, das sofort zu tun. Machen Sie das ganz deutlich! Hier steht das Icon in einer eigenen Zeile, was darauf hinweisen soll, daß bei der Auswahl dieses Links etwas Besonderes passiert, in diesem Fall das Herunterladen der eigentlichen Software.
Abbildung 21.22: |
Ein Großteil der Seite enthält grundlegende Marketing-Informationen über die Produkte, aber interessant wird es ganz unten. Es gibt einen Abschnitt namens »Specifications« (siehe Abbildung 21.23), der Links zu einer Tabelle besitzt, aber dabei jeweils eine von drei verschiedenen Versionen dieser Tabelle anzeigt, abhängig davon, welche Funktionen Ihr Browser bietet.
Warum sollten Sie die Tabellen auf eine separate Seite auslagern? Mit der Tabelle auf einer eigenen Seite können Sie die Hauptseiten HTML-2-konform halten und ganz komplizierte Tabellen für Browser bereitstellen, die in der Lage sind, diese anzuzeigen. Auf diese Weise erhalten Ihre Leser keinen durcheinandergeratenen Text und müssen auch nicht darauf warten, bis irgendwelche Bilder geladen sind - statt dessen kann der Leser auswählen, wie er die Information sehen will, je nachdem, welchen Browser oder welche Verbindung er einsetzt. Aus der Perspektive des Lesers ist das optimal.
Natürlich ist das heutzuTage weniger ein Thema, da fast alle GUI-Browser Tabellen unterstützen. Dies bietet nur für Anwender eines Textbrowsers einen wirklichen Vorteil, die die Darstellung mancher Tabellen als sehr sonderbar empfinden könnten. Wenn Sie Tabellen und andere HTML-3.2-Merkmale zur Basis Ihrer Site machen wollen, wäre es eine Möglichkeit, zwei völlig alternative Sites zu erstellen: eine ausgefallene mit den neuesten Möglichkeiten und eine mit reinem Text, ideal für Anwender von Lynx und ähnlichen Browsern oder Anwender mit langsamen Internet-Zugängen. Sie könnten auf jeder Seite Ihrer Site eine Möglichkeit geben, zu der Nur-Text-Version umzuschalten. Die einzige Schwierigkeit dabei ist der gesteigerte Aufwand, den Sie bei der Pflege der beiden Kopien der Site haben im Gegensatz zur Pflege von nur einer Kopie.
Abbildung 21.23: |
Der größte Nachteil bei der Bereitstellung von drei Tabellenversionen ist, daß alle Veränderungen in allen drei Tabellen ausgeführt werden müssen. Somit müssen Sie statt einer Seite drei verwalten.
Abhängig von Ihrer Position im Kontinuum des Web-Entwicklers (erinnern Sie sich daran vom Tag 6, »Effektive Webseiten gestalten«?), wollen Sie davon vielleicht nur eine beibehalten, je nachdem, was Sie mit Ihren Seiten erreichen wollen.
Abbildung 21.24: |
Wie sehen die Tabellen aus? Die Abbildungen 21.24, 21.25 und 21.26 zeigen die einzelnen Versionen. Die GIF-Datei sieht der Tabellenversion verdächtig ähnlich. Es handelt sich um eine direkte Bildschirmaufnahme, wobei der Aufwand geringer wäre, sie zu verwalten und zu warten, als das Ganze in einem Bildverarbeitungsprogramm zu zeichnen.
Abbildung 21.26: |
Alle Produktseiten (die Seiten für Beanpole Server und Beanpole Networks) weisen ein ähnliches Format auf. Deshalb folgen wir ihnen an dieser Stelle nicht weiter, Sie können dies aber gerne noch alleine tun.
Jetzt kehren wir zurück zur Homepage und gehen weiter zur Suchseite (Search). Suchseiten sind für größere Sites immer ganz sinnvoll, wenn Ihr Leser möglicherweise etwas Bestimmtes sucht. Diese Seite sollte immer ganz oben in Ihrer Präsentation zu finden sein und möglicherweise gleichzeitig auch auf anderen Seiten. (Sie haben sicher schon bemerkt, daß die Suche auch in der Symbolleiste enthalten ist.) Die Suchseite für diesen Site sehen Sie in Abbildung 21.27 dargestellt.
Abbildung 21.27: |
Abbildung 21.28: |
Bei dieser Seite handelt es sich um ein einfaches Formular für die Eingabe von Suchschlüsseln. Darüber hinaus können Sie hier angeben, ob bei der Suche die Groß-/Kleinschreibung berücksichtigt werden soll und ob Sie eine And- oder eine OR-Suche durchführen wollen.
Wenn Sie in diesem Suchformular (es handelt sich dabei um ein sehr einfaches Beispiel) nach etwas suchen (beispielsweise Johan), erhalten Sie in etwa eine Seite zurück, wie sie in Abbildung 21.28 dargestellt ist. Sie können dann eine der aufgeführten Seiten auswählen und direkt dorthin verzweigen.
Nachdem Sie die ersten Seiten dieses Sites erkundet haben, kehren wir noch einmal zur Symbolleiste zurück. Abbildung 21.29 zeigt sie, falls Sie vergessen haben, wie sie aussieht.
Abbildung 21.29: |
Erinnern Sie sich, daß ich in Kapitel 8 erwähnt habe, daß die Symbolleiste wie eine Straßenkarte für die wichtigsten Komponenten des Sites benutzt wird. Da sie auf jeder Seite angezeigt wird, können Sie schnell und einfach zu diesen Komponenten gelangen. (Sie werden mehr über Symbolleisten in Kapitel 29, »Testen, Revidieren und Wartung von Web-Präsentationen«, erfahren.)
Beachten Sie die Positionen auf dieser Symbolleiste:
Das WAREZ-Icon zeigt auf eine Seite namens Beanpole Products (siehe Abbildung 21.30), wobei es sich um einen allgemeinen Überblick über die drei Beanpole-Produkte handelt. Die Icons (es sind dieselben wie auf der Homepage) zeigen auf die einzelnen Produktseiten, wie es schon auf der Homepage der Fall war. Darüber hinaus werden auf einer anderen Seite verschiedenste Informationen über die Firma gesammelt (etwa Presseberichte oder Verkaufsinformationen).
Abbildung 21.30: |
Das ist ein klassisches Beispiel für die Bereitstellung mehrerer Sichten auf denselben Inhalt. Für drei Produkte können Sie eine einzige Überblickseite verwenden oder aber sie separat auflisten. Diese Präsentation verwendet beide Methoden und stellt mehrere Möglichkeiten bereit, dieselbe Information von verschiedenen Positionen auf dem Site zu ermitteln.
Man könnte natürlich argumentieren, daß die Bezeichnung WAREZ für das Disketten-Icon eigentlich irreführend ist, weil nicht jeder weiß, was Warez bedeutet. (Es hat häufig auch einen negativen Beigeschmack, weil es sich ursprünglich auf raubkopierte Software bezog.) Ein besserer Name wäre beispielsweise Produkte oder Software. Aber das hätte nicht auf das Icon gepaßt - zu viele Buchstaben (ich weiß, das ist ein schlechtes Argument). Nicht alle Designentscheidungen, die Sie treffen, können gut sein. Deshalb gibt es auch die Funktionalitätstests sowie eine Wartung, die auch nach der Veröffentlichung Ihrer Präsentation noch wichtig sind.
Zusammenfassung
In diesem Kapitel haben wir zwei einfache Präsentationen vorgestellt - eine persönliche Homepage sowie eine Firmen-Homepage -, die unterschiedliche Ziele verfolgen, unterschiedliche Strukturen aufweisen und für die Realisierung dieser Ziele unterschiedliche Methoden einsetzen. In diesem Kapitel haben wir die Präsentationen schrittweise durchlaufen, auf Papier und Online, und Sie haben die Entscheidungen kennengelernt, die zu dieser Darstellung geführt haben, ebenso die Regeln, die bei der Entwicklung dieser Präsentationen befolgt wurden. Diese echten Beispiele sollten Ihnen helfen, Entscheidungen für Ihre eigenen Präsentationen zu treffen.
Fragen und Antworten
Frage:
Die Beispiele in diesem Kapitel sind sehr informativ, und ich habe viele Ideen für meine eigenen Präsentationen erhalten. Wo finde ich weitere gute Beispiele?
Antwort:
Im Web stehen Ihnen Millionen von Beispielen zur Verfügung. Sehen Sie sich um! Betrachten Sie die einzelnen Sites dabei mit den Augen eines Web-Entwicklers. Setzen Sie sich nicht einfach nur zurück und folgen den Links. Beachten Sie die Hinweise aus diesem Buch. Finden Sie sich gut im Site zurecht, bekommen Sie immer sofort das, was Sie suchen? Wissen Sie, wo innerhalb der Seiten Sie sich gerade befinden, oder verirren Sie sich zu leicht? Bietet die Site eine vernünftige Kombination aus Text und Grafik für langsame und schnelle Verbindungen? Wenn experimentelles HTML verwendet wird, ist das den Effekt wert, oder soll dadurch nur eine sonst leere Präsentation aufgewertet werden? Gibt es ein durchgängiges Design?
Wenn Sie auf einer Webseite einen nie zuvor gesehenen Trick erkennen, verwenden Sie View Source, um herauszufinden, wie man ihn realisiert hat. Wenn es sich dabei um ein CGI-Skript oder ein NCSA-Include handelt, erhalten Sie wahrscheinlich keinen Einblick, aber für viele Dinge kann der Quellcode schon eine hinreichende Erklärung bieten. Beachten Sie jedoch, daß viele der »Tricks« in HTML browserspezifisch oder unerlaubt hinsichtlich der HTML-Spezifikation sind. Denken Sie daran, wenn Sie die Tricks auf Ihren eigenen Seiten implementieren wollen.
Frage:
Ich weiß nicht, ob sich irgend jemand für meine Hobbys, meinen Job oder ein Foto von meinem Hund interessiert. Sind persönliche Homepages nicht eine Form von Narzißmus?
Antwort:
Natürlich. Dazu sind sie ja da. Hier haben Sie die Möglichkeit, jedem mitzuteilen, wie toll Sie sind, ohne denjenigen wirklich zu langweilen. Wenn sich jemand langweilt, dann kann er ja etwas anderes im Web erkunden. Es kostet ja nichts.
Sie können Ihre persönlichen Homepages aber auch für andere Dinge als die langweiligen Details Ihres täglichen Lebens nutzen. Sagen Sie Ihre Meinung! Sind Sie ein heimlicher Autor oder Künstler? Das Web bietet eine ultimative Methode, Ihre Werke selbst zu veröffentlichen. Es ist billig, braucht keine Werbung, und Sie erhalten ein unmittelbares Feedback von Ihren Lesern. Das Medium ist alles, wozu Sie es machen. Hier können Sie kreativ sein, unterhaltsam oder einfach nur Ihre Meinung kundtun. Sie können alles sagen, was Sie wollen, und Sie müssen nicht beweisen, daß Sie besser, lauter oder mehr im Recht sind als andere. Wo sonst ist das schon möglich? Oder wo können Sie das sonst noch, ohne daß man Sie anstarrt oder einsperrt?
Das Zusammenstellen einer persönlichen Homepage macht Spaß. Und das ist einer der wichtigsten Gründe, warum Sie im Web etwas veröffentlichen sollten.
Frage:
Die Icons auf der Beanpole-Homepage sind wirklich cool. Kann ich sie auch in meinen eigenen Präsentationen einsetzen?
Antwort:
Natürlich! Ich habe sie für dieses Buch und diese Präsentation entwickelt, und sie stehen im Web zur freien Verfügung. Wenn Sie sie verwenden, dann berücksichtigen Sie mich doch irgendwo in Ihrer Präsentation, und erzeugen Sie einen Link entweder zu meiner Homepage (http://www.lne.com/lemay/) oder zu den Seiten für dieses Buch (http://www.lne.com/Web/Books/).
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
