|
House Style des Departements Informatik
Leicht abgespeckte Version für das ETH Web Office. Besten Dank.
Inhalt
Vorbemerkung
Richtlinien betreffend HTML
HTML-Prolog,
HEAD,
BODY,
Titel,
Überschriften innerhalb von HTML-Dokumenten,
Einrückungen,
Verweise (Links),
Formatierung,
Grafiken
|
Richtlinien betreffend Layout
Logos,
Dokumentenüberschrift,
Sprache,
Blinken, GIF-Animationen, Java(script)-Animationen,
ETH-Adressen,
Navigationshilfen,
Kopfzeile,
Fusszeile,
Farben
|
Weitere Style Guides
HTML-Validatoren
Diese Seite dient als Richtlinie, wie im D-INFK W3-Seiten gestaltet
werden sollen. Damit das ganze D-INFK auf dem W3 ein einheitliches
Erscheinungsbild hat, bitten wir alle, die eigene Seiten gestalten,
diesen Richtlinien zu folgen. Für weitere Informationen,
Anregungen und Kritik verwenden Sie bitte das Feedback-Formular.
Von allgemeinem Interesse ist auch das Merkblatt für Autoren
betreffend das elektronische Archivieren und Publizieren von
Dissertationen und Gelben Berichten auf dem FTP-Server des
Departements.
Auf dem Server des World Wide Web
Consortiums findet sich eine Beschreibung
von HTML und ein Style
Guide, der allgemeine Hinweise gibt, wie HTML-Seiten zu gestalten
sind.
Im folgenden sind einige Gestaltungselemente aufgeführt. Sie sind
konform mit der WWW-Politik
der ETH. Am einfachsten erstellen Sie eigene, House-Style konforme
Seiten, wenn Sie unsere Templates mit den
obligatorischen Einträgen verwenden.
HTML-Prolog
Gute HTML-Seiten beginnen mit einem SGML-Eintrag, der dem Client
beschreibt, welche Version von HTML verwendet wird. Das macht es vor
allem HTML-Validatoren einfacher zu entscheiden, ob die Seite Fehler
enthält. Die Seiten des Departements sind in HTML 3.2 abgefasst,
sie beginnen mit folgendem Eintrag:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
Nachdem festgelegt ist, welche HTML-Version verwendet wird, beginnt
die eigentliche HTML-Seite. Am Anfang einer solchen steht immer
<HTML>, welches am Ende immer mit
</HTML> abgeschlossen wird. (Viele Clients verlangen
das nicht, aber es gibt solche, bei denen es unbedingt notwendig
ist!)
Jede HTML-Seite enthät eine
HEAD- und eine BODY-Sektion.
HEAD
Die HEAD-Sektion beginnt mit <HEAD> und wird mit
</HEAD> abgeschlossen. Sie enthält Informationen
über die Seite.
Seiten des Departements enthalten folgende Elemente:
|
<TITLE>...</TITLE>
|
Titel des Dokuments
|
<META NAME="language" CONTENT="DE"> bzw.
<META NAME="language" CONTENT="EN">
|
Angabe zur Sprache des Dokumentes, die z. B. vom automatischen Übersetzer von AltaVista ausgewertet wird.
|
Diese Richtlinie sieht vor, dass im HEAD mindestens der Titel steht.
BODY
Die BODY-Sektion beginnt mit <BODY> und wird mit </BODY>
abgeschlossen. Sie enthält die eigentlichen Informationen der
Seite, also Text, Verweise, Bilder, Navigationshilfen, Fusszeile,
u.s.w.
Titel
- Der Titel ist auf allen Seiten obligatorisch!
-
Er hat immer die Form
<TITLE>ETH Zurich/Computer Science/ ...</TITLE> bzw.
<TITLE>ETH Zürich/Informatik/ ...</TITLE>.
- Der Titel steht als erstes in der HEAD-Sektion.
Überschriften innerhalb von Dokumenten
- Für Überschriften innerhalb von Dokumenten stehen die HTML-Tags <H2> bis <H6> zur Verfügung.
- Die Departementsseite verwendet für den in einer Seite am häufigsten wiederkehrenden Überschriftentyp die Folge <strong><em> ... </em></strong> verbunden mit Einrückungen bzw. graphische Überschriften.
Einrückungen
Für Einrückungen wird <BLOCKQUOTE> ... </BLOCKQUOTE> verwendet. Die Verwendung von <UL> ... </UL> für Einrückungen ist nach HTML-Standard nicht zulässig
Verweise (Links)
- Verweistexte sollen vielsagend sein. Verweistexte ala "ein link", "noch ein link", "hier" oder "klicken Sie doch mal" entsprechen schlechtem Stil. Verweistexte sollen den Textfluss nicht stören
- Verweistexte sind in der selben Sprache abgefasst, wie das übrige Dokument. Ausnahme: Der Verweistext zum anderssprachigen Dokument ist in der Sprache des Dokumentes abgefasst, das der Verweis referenziert.
- Es muss klar ersichtlich sein, was der Verweis auslöst. Wenn
grosse Dateien heruntergeladen werden, sollte der Verweis mit einer Warnung
versehen werden. Verweise in englischen Seiten, die auf deutsche Seiten zeigen,
sind wenn möglich mit einem entsprechenden Hinweis zu versehen.
- Verwenden Sie für Verweise, die auf eigene Seiten zeigen,
relative Adressen (einfacher beim Verschieben von Dateien).
- «Es ist sicherzustellen, dass Verweise ("Links") zu jeder Zeit aktuell und funktionell sind.» (Zitat Regeln und Empfehlungen zur WWW-Politik der ETH Zürich)
Formatierung
Statt physikalischer Formatangaben sollten logische verwendet
werden. Also nicht <B> sondern <STRONG>
und nicht <I> sondern <EM>. Nicht alle
Clients können alle physikalischen Formate anzeigen, aber
logische Formatangaben können sie auf andere abbilden.
Grafiken
- Verwenden Sie nicht zu viele und nicht zu grosse Graphiken, die
Kapazität der Netze ist beschränkt.
- Verwenden Sie wenn möglich immer dieselben Graphiken, diese
bleiben dann im Cache und belasten das Netz nicht mehr.
- Es ist HTML-Standard, dass jede Grafik einen sinnvollen Alternativ-Text
(ALT-Eigenschaft von
<IMG>)enthält. Dieser wird von Browsern einerseits
dargstellt, falls die Anzeige von Grafiken deaktiviert oder nicht
möglich ist. Andererseits zeigen Netscape und Internet Explorer
diese Texte auch als Tooltips zu dargestellten Grafiken an.
Logos
- Das ETH-Logo nur auf Seiten einbinden, welche oft direkt von
aussen referenziert werden.
- Das ETH-Logo wird via folgende HTML-Sequenz zur Verfügung gestellt:
|
<IMG SRC="http://www.inf.ethz.ch/pics/ETHLOGO.de.gif" ALT="ETH Zurich" HEIGHT="47" WIDTH="259">
|
|
|
<IMG SRC="http://www.inf.ethz.ch/pics/ETH.de.gif" ALT="ETH Zurich" HEIGHT="47" WIDTH="238">
|
|
- ETH Logos in anderen Grössen und Farben lassen sich mit dem ETH-Logo Generator erzeugen
- Das Departementslogo kann mit folgenden HTML-Tags in eigene Seiten eingebunden werden:
|
<IMG SRC="http://www.inf.ethz.ch/pics/Logo.gif" ALT="Department of Computer Science" HEIGHT="47" WIDTH="238">
|
|
|
<IMG SRC="http://www.inf.ethz.ch/pics/Logo.de.gif" ALT="Department of Computer Science" HEIGHT="47" WIDTH="238">
|
|
- Das ETH-Logo und das Departmentslogo stehen an prominenter
Stelle, vorzugsweise in einem der Eckpunkte des Dokuments.
Dokumentenüberschrift
- Eine <H1>-Überschrift ist auf allen Seiten obligatorisch! Sie steht am Anfang der Seite und nur dort.
- Anker (Link Targets) sind in einer Überschrift erlaubt und gut. Verweise in Überschriften hingegen sind keine schöne Sache.
Sprache
- Wichtige Seiten, welche auch für Externe bestimmt sind, sollen auf
Deutsch und Englisch angeboten werden. Dabei kann ein HTML-Präprozessor gute Dienste erweisen.
- Der Sprachtag im HEAD (<META NAME="language" CONTENT="DE"> für deutsche bzw. <META NAME="language" CONTENT="EN"> für englische Dokumente) hilft Suchmaschinen, die Sprache des Dokuments zu erkennen und einen geeigneten automatischen Übersetzer dafür anzubieten.
- Der Verweis auf die Seite in der anderen Sprache wird
vernünftigerweise im oberen Teil der Seite angebracht, bei einem Seitenkomplex immer am selben Ort. Departementsseiten haben den Verweis zur anderen Sprache immer im oberen rechten Eck.
Blinken, GIF-Animationen, Java(script)-Animationen
- Es mag durchaus Anwendungen geben, wo der Einsatz dieser Mittel notwendig und sinnvoll erscheint. Denken Sie aber beim Einsatz solcher Mittel bitte vor allem an den Leser der Seite. Wird er durch zu viele multimediale Eindrücke überfordert?
- GIF-Animationen und Java(script)-Animationen benötigen
Speicher und Bandbreite wegen ihrer eigenen Grösse. Java-Programme
benötigen zusätzlich noch Speicher wegen des Aufbaus der
virtuellen Javamaschine.
Departementsseiten kommen ohne solche Elemente aus.
ETH-Adressen
- Jeweils die genaue Adresse angeben.
- Für die Formatierung von Adressen stellt HTML den Tag <ADDRESS> ... </ADDRESS> zur Verfügung.
- Telefon und FAX-Nummern genügen auf der Departementsseite folgendem Schema: +41 (0) 1 632 xx xx (nur ein Plus zu Beginn)
- Adressangaben sind an der ETH wohldefiniert:
Max Muster
Institut für Mustererkennung
ETH Zentrum
CH-8092 Zürich
Telefon: +41 (0) 1 632 00 07
FAX: +41 (0) 1 632 00 00
Email: muster@inf.ethz.ch
|
Peter Pattern
Institute of Patternrecognition
ETH Zentrum
CH-8092 Zürich
Phone: +41 (0) 1 632 00 07
FAX: +41 (0) 1 632 00 00
Email: pattern@inf.ethz.ch
|
Navigationshilfen
«Jede Seite enthält als Orientierungshilfe einen
Verweis auf eine übergeordnete Seite (z.B. von einer
Institutsseite auf die Departementsseite).» (Zitat "Regeln und
Empfehlungen zur WWW-Politik der ETH Zürich
Die Seiten des Departements Informatik enthalten jeweils im oberen
rechten Eck eine "History" bis zur Einstiegsseite des
Departements.
-
«Jede Einstiegsseite der obersten drei Ebenen [der ETH -
darunter fallen auch Institute] enthält einen Verweis auf die
zentrale Einstiegsseite der ETH Zürich ("Home Page"). Geeignet
als Anker ist das ETH-Logo.» (Zitat "Regeln und
Empfehlungen zur WWW-Politik der ETH Zürich)
Auf den Seiten des Departements Informatik befindet sich jeweils im
unteren rechten Eck unter dem ETH Logo der Verweis zur Einstiegsseite
der ETH.
Ein Verweis zum Departement Informatik ist auf allen Seiten obligatorisch. Als Verweistext eignet sich das Logo des Departements Informatik. Als weitere Navigationshilfe wird empfohlen, einen Veweis zu einer (internen) Suchmaschine anzubieten.
Das Departement hat keine eigene Suchmaschine, es existiert aber eine Such-Seite, die für die Alta-Vista-Suchmaschine der ETH Zürich eine solche Abfrage generiert, dass das Resultat nur Dokumente des Bereichs .inf.ethz.ch enthält.
Kopfzeile
Die Kopfzeile der Seiten des Departements enthält
- den Verweis zur obersten Seite in Form des Departementslogos,
- einen Verweis zum anderssprachigen Dokument (falls vorhanden),
- eine "History" als Navigationshilfe,
- eine Verweis auf eine Suchmaschine im Bereich Departement Informatik.
Die Kopfzeile von Departementsseiten ist in der selben Sprache
abgefasst wie das übrige Dokument. Ausgenommen von dieser Regel
ist einzig der Verweis zum anderssprachigen Dokument.
Ein Beispiel für eine typische Kopfzeile von
Departementsseiten findet sich am Anfang dieses Dokumentes.
Fusszeile
Die Fusszeile der Departementsseiten enthält
- einen Verweis auf eine Kommentarseite (falls vorhanden),
- eine Emailadrese an den verantwortlichen Redakteur (die
verantwortlichen Reakteure) der Seite,
- einen Verweis auf eine Seite, die die Verantwortlichkeiten
gemäss WWW-Politik der ETH, Absatz 2.4 für das aktuelle Dokument festlegt,
- das Erstellungsdatum bzw. Datum der letzten Änderung der aktuellen Seite,
- das ETH-Logo, hinter dem sich ein Verweis auf die Einstiegsseite der ETH-Homepage verbirgt,
gegebenenfalls Hinweise auf zur Erstellung der Seite verwendete
Werkzeuge.
Die Fusszeile von Departementsseiten ist in der selben Sprache
abgefasst, wie das übrige Dokument.
Ein Beispiel für eine typische Fusszeile von Departementsseiten findet sich am Ende dieses Dokumentes.
Farben
Bei der Wahl von Farben sollte daran gedacht werden, dass nicht alle Leute Farbschirme haben, und dass Farbkombinationen auf Graustufenmonitoren teilweise kaum unterscheidbar sind.
Die auf den WWW-Seiten des Departements verwendeten Farben
entsprechen denen der ETH-Seiten. Es werden folgende Farben verwendet:
| Funktion |
Farbe |
RGB dez |
RGB hex |
| Text |
Schwarz |
000 000 000 |
000000 |
| Hintergrund |
Weiss |
255 255 255 |
FFFFFF |
| Verweisfarbe |
Blau |
000 000 192 |
0000C0 |
| Angewählter (aktiver) Verweis |
Grau |
153 153 153 |
999999 |
| Besuchter Verweis |
Violett |
153 000 051 |
990033 |
| Graphische Überschriften und Tabellenköpfe |
Dunkelgrau |
099 099 099 |
636363 |
| Strukturierung von Grafiken |
Hellblau |
102 204 255 |
66ccff |
| Strukturierung von Tabellen |
Hellgrau |
221 221 221 |
dddddd |
|
W3C HTML Validation Service
|
Der offizielle HTML-Validator des W3-Consortiums (validiert HTML 2.0, 3.2, 4.0)
|
|
Bobby
|
Ein vom W3-Consortium empfohlener Validator der Firma CAST (validiert auch Browser Dialekte). |
|
