Style-Guide

• Vorwort
• Voraussetzungen
• Die Icons im einzelnen
• Aufbau einer Seite
• Aufbau der Navigationszeile
• Aufbau der Iconzeile
• Wie lesen Sie ein Buch, ein Zeitung oder ein Lexikon?
• Die Reihenfolge der Blöcke
• Der Auswahlblock
• Der Listenblock
• Der Zurückblock
• Der Sprachenblock
• Der Übersichtsblock
• Der Abspann
• Wie erstellt man eine Seite?

Vorwort

Nun, dies ist die zweite Rohfassung des neuen Style Guide. Er ist nicht die beste Erfindung seit geschnittenem Brot, aber als erste Arbeitsunterlage nicht schlecht.
Ich hatte die erste Fassung am 7. November 1994 fertiggestellt und nun liegt eine Überarbeitung vor. Einiges hat sich durch täglichen Gebrauch und Anwendung an verschiedenster Stelle, mit mehr oder minder komplexen Umfeld bewährt. Dies ist nun eine Beschreibung, die den Großteil aller Problemstellungen abdeckt. Falls Du Fragen hast, schick mir einfach eine Email.
Die Icons entstanden 1994 auf einer Silicon Graphics Iris Indigo mit dem Programm SOFTIMAGE V2.6. Leider habe ich heute nicht mehr den Zugang zu dieser Maschine (aber wer mir eine spenden will, oder mir die Möglichkeit gibt, vor einer zu arbeiten, ... ist willkommen).
-mat- brandy, Email

---

Voraussetzungen

1. Der Dokumentenbaum des WWW-Baumes liegt unter /home/www.
2. Die Icons wurden gemäß meiner Vorgabe dort installiert.
   (cd /home/www; tar xvzf icons.tar.gz)
   Dadurch liegen die Icons in /home/www/icons, was einer Lage im URL-Baum von /icons entspricht.
   Man kann die Icons auch an anderer Stelle installieren, aber dann muß einiges an Transferarbeit selbst geleistet werden.
3. Kenntnisse im Umgang mit HTML und der Idee der Strukturierung von Texten in höheren Abstraktionsebenen (flach, verkettete Listen, ...)

---

Die Icons im einzelnen

• [Erklärung der Icons] Hier werden die einzelnen Icons alle aufgeführt und erklärt, wie man sie einbaut.
• [Hilfefunktion für die Icons] Dies ist die sogenannte Schnelle Hilfe für den Benutzer der Seiten, damit er kapiert, was die Icons tun.

---

Aufbau einer Seite

Sehen wir uns doch einfach erst einmal eine Beispielseite an (91990 Bytes). Die Seite hat folgenden logischen Aufbau (Zahlen in roten Punkten):

1. Eine Zeile mit Navigationsangaben und Datum der letzten Änderung
2. Ein <HR>
3. Eine Zeile mit Icons hintereinander (Reihenfolge wird später erklärt).
4. Ein <HR>
5. Der eigentliche Inhalt des Dokuments.
6. Ein <HR> (momentan nicht zu sehen)
7. Der Abspann mit Copyright für die Seite, Autor und Email-Klemmbrett. (momentan nicht zu sehen)

Aufbau der Navigationszeile (1)

Hier sollte eine möglichst knappe Orientierungshilfe für den Benutzer geboten werden, dabei hat es sich bewährt, hier die Tiefe des Dokuments im Hierarchiebaum anzuzeigen. D.h., zuerst der Name des Servers, dann den der Homepage, eventuell den Namen eines Abschnitts und dann den Namen des jetzigen Dokuments. Am Ende folgt das Datum der letzten Änderung der Seite. Als Trenner wird das "*" verwendet.
Für TeXniker: Servername * section * subsection * subsubsection * title * Letzte Änderung: ...

Aufbau der Iconzeile (3)

Wie wir schon im Beispiel gesehen haben, sind mehrere Icons hintereinander gesetzt. Die Icons haben unterschiedliche Funktionen, so verbindet Icon 1 (rote Zahlen im grünen Kreis) immer mit der Hilfeseite. Icon 2 verbindet mit der Spitze des Serverbaums, Icon 3 mit der aktuellen Homepage und Icon 4 geht ein Schritt zurück, das gleiche kann zwar auch der Funktionsknopf des Browsers (5) übernehmen, aber dieses Zurück (4) ist kontextfrei.
Eine vollständige (so selten, wie sie auftritt) Iconzeile sieht folgendermaßen aus:

Doch die Stärke dieser Anordnung liegt nicht nur in der Reihenfolge, sondern auch darin, daß nur die Icons sichtbar sind, die auch eine Funktion haben.
Dies ist jedoch Handarbeit, irgend jemand muß schließlich den Icons sagen, wann sie sichtbar sind und wann nicht. Schwieriger ist es, die richtigen Verbindungen herzustellen, dazu müssen wir erst einen Abstecher in die Theorie der Wissensrepräsentation machen.

Wie lesen Sie ein Buch, ein Zeitung oder ein Lexikon?

Auf ganz unterschiedliche und dennoch ähnliche Weise.
Sie lesen meistens linear, also den Buchstaben folgend, doch ermüdet uns langes, lineares Lesen. Der Text braucht also etwas, was die Linearität aufbricht und ihn so strukturiert. Ein gut strukturierter Text läßt sich viel schneller erfassen, aber wie strukturiert man einen Text und dann auch noch gut?
Indem man ihn in Sinnabschnitte unterteilt. Und eine Reihenfolge bei den Sinnabschnitte einführt und einhält. Und genau hier setzen die Icons an. Sie sind geschaffen worden, um anhand nicht sprachlicher Symbolik, dem Leser eine Führung zu geben, die im das Erschließen des Textes erleichtert.
Warum sage ich in den Icons nicht einfach [Zurück]? Ganz einfach, ich müßte sofort alle Icons ins Englische übersetzen und vielleicht auch noch ins Hinterindische. Als ich diese Icons erzeugt habe, machte ich mir einige Gedanke darüber, wie jemand, egal welche Sprache er spricht, diese Icons erkennt und aufnimmt. Es mußte etwas, wie eine Zeichensprache sein, etwas was sich (fast) wie von selbst erklärt. Ich hoffe, es ist mir gelungen.

Die Reihenfolge der Blöcke

Es gibt 5 Blöcke innerhalb der Iconzeile. Die Blöcke stehen in folgender Reihenfolge:

1. Der Auswahlblock.
2. Der Listenblock.
3. Der Zurückblock.
4. Der Sprachenblock.
5. Der Übersichtsblock.

Der Auswahlblock

Er enthält nur 2 Icons, eins für das "Erste Element" einer im Dokument vorkommenden Auswahlliste und eins für das "Letzte Element". Es hat sich herauskristallisiert, daß es erst dann sinnvoll ist, diesen Block darzustellen, wenn die Auswahlliste größer als ein Bildschirminhalt (ca. ab mehr als 5 Listeneinträgen) ist.
[Beispielgraphik, 58981 Bytes, entspricht in der Illustration dem Dokument 1]

Der Listenblock

Diese 4 Icons realisieren die Sprünge innerhalb einer doppeltverketteten Liste von Sinnabschnitten. Dabei zeigen die Icons "Erstes Objekt" und "Letztes Objekt" im Dokument auf Anfang bzw. Ende der verketteten Liste. Die Icons "Nächstes Objekt" bzw. "Vorheriges Objekt" zeigen auf den Nachfolger bzw. Vorfolger. Eine Besonderheit tritt jeweils am Anfang und Ende der Liste auf. So ist am Anfang, der Vorfolger das übergeordnete Objekt und am Ende ist es der Nachfolger.
[Beispielgraphik, 64308 Bytes, entspricht in der Illustration dem Dokument 1.1]

Der Zurückblock

Er besteht aus zwei Icons, wobei das Erste häufig auftritt und auf das übergeordnete Objekt zeigt. Diese "1-Schritt-zurück"-Funktion ist im Gegensatz zur "Back"-Funktion des Browsers unabhängig von der Historie. Z.B., wenn man in einem deutschen Dokument nach English wechselt, zeigt das "Zurück"-Icon jetzt auf das übergeordnete Objekt in englischer Sprache, der "Back"-Button des Browsers aber zeigt auf die deutsche Fassung des aktuellen Dokuments.
Das zweite Icon, das sogenannte "Zurück-zur-Auswahl", setze ich immer dann ein, wenn ich mehrfach geschachtelte, doppelt-verkettete Listen habe und ich eine Auswahl als übergeordnet ansehe. Auf diese Auswahl zeigt das Icon dann.

Der Sprachenblock

Dieser Block tritt nur auf, wenn von einem Dokument eine Übersetzung vorhanden ist. Grundlegend ist, daß das Icon für die aktuelle Sprache im aktuellen Dokument nicht auftritt. Sind mehr als eine Sprache für das Dokument vorhanden, gibt es zwei Möglichkeiten. Entweder man nennt alle Übersetzungen, oder man macht eine zyklische Liste (Deutsch -> Englisch -> Französisch -> Deutsch).

Der Übersichtsblock

Dieser Block enthält zwei Icons, die immer vorhanden sind. Dabei handelt es sich um das "ServerHomePage"-Icon und das "Hilfe-zu-den-Icons"-Icon. Es treten noch das "Homepage"- und das "Index"-Icon auf.
Dabei zeigt das "Homepage"-Icon auf die höchste Hierarchie-Ebene im Kontext, z.B. auf die Einstiegsseite einer Firma auf einem Server, der mehrere Firmen vertritt. Das "ServerHomePage"-Icon zeigt auf die höchste Hierachie-Ebene, auch außerhalb des Kontextes. Z.B., auf die Einstiegsseite einer Universität, die mehrere Server unterhält, aber eine allgemeingültige Einstiegsseite besitzt. Das "Index"-Icon, kann für Glossare, alphabetische Listen, etc. verwendet werden.
Das "Hilfe-zu-den-Icons"-Icon zeigt IMMER auf diese Seite.

Der Abspann (7)

Dem eigentlichen Abspann wird, je nach Länge der Seite, eine Kopie der oberen Iconzeile vorangestellt. Bei langen Seiten muß der Benutzer nicht mehr ganz zum Anfang der Seite zurück. Ihm bleibt eine Umkehr der Leserichtung erspart.
Der Abspann besteht aus einem <HR> und einer Abspannzeile. Diese Zeile enthält das Copyright (&copy; = ©) mit Jahreszahl für die Seite. Gefolgt wird diese Angabe vom Namen des Autors, wobei ein Link zur Homepage desjenigen gestattet ist. Danach erscheint ein "Klemmbrett"-Icon, das ein Link (mailto:...) realisiert.

---

Wie erstellt man eine Seite?

Um auf einfache Art und Weise neue Seite gemäß diesem Style-Guide erstellen zu können, hat es sich in der Praxis bewährt, mit vorgefertigten leeren Seiten zu arbeiten.
Dabei gibt es drei Varianten, und zwar:

1. Die komplette leere Seite.
   Bestens geeignet, bei kompletter Neuerfassung von Informationen.
2. Der Anfang der leeren Seite.
   Falls man ein altes Dokument umarbeitet, oder Ausgaben von Programmen, Dokumenten aus Konvertierungsprogrammen oder ähnliches bearbeitet. (Einfach: cat /home/www/icons/prefix.html altes.dokument /home/www/icons/suffix.html > neues.dokument.html).
3. Das Ende der leeren Seite.
   s.o.

Man sollte sich vom leeren Dokument eine Kopie an die Wurzel des Dokumentenbaumes (/home/www) legen und diese seinen Ansprüchen anpassen. Dabei gibt es einmalige und immer wiederkehrende Anpassungen.

Einmalige Anpassungen

Man ersetze:

• ZZZZ durch den Namen des Servers, Dienstes, etc.
• im HEAD-Teil des Dokument in der LINK-Anweisung, die Email-Adresse.
• im Abspann den Link zur Homepage des Autors und den Namen des Autors.
• im Link des Klemmbretts die Email-Adresse.

Immer wiederkehrende Anpassungen

Dabei handelt es sich um den Ersatz von YYYY zum Dokumententitel, welcher dann im TITLE steht, in der Navigationszeile und als H1 am Anfang des Dokuments.
Es muß das Datum der letzten Änderung eingesetzt und last, but not least, müssen die richtigen Icons "freigeschaltet" werden.

---

---

© 1994 -mat- brandy,