Gestaltung von Web-Seiten an der Humboldt-Universität

Wer einmal die Web-Seiten der HU durchblättert, wird feststellen, daß sie kunterbunter nicht sein könnten: Logo rechts, Logo links, Humboldt-Köpfe ohne Rand, Schriftzug eingefärbt, knallige Farben, rotierende Bilder ...

Das Bemühen um eine persönliche Note ist oft gepaart mit Spielerei und Benutzerunfreundlichkeit.

Corporate Design

Das entstehende Corporate Design der HU sollte für uns alle Anlaß sein, über die eigenen Web-Seiten nachzudenken; nicht, um sie zu einem langweiligen Einheitsbrei zu vermengen, sondern um dem Leser von außen deutlicher zu signalisieren: Wir sind eine Einrichtung, auch wenn diese aus sehr unterschiedlichen Teilen zusammengesetzt ist.

Das erste entscheidende Element wird das neue Logo der Humboldt-Universität sein. Pünktlich zum Jahreswechsel soll es feierlich eingeweiht werden. Das derzeitige Logo (zumindest der Teil mit den Humboldt-Köpfen) findet sich auf sehr vielen Web-Seiten der HU wieder. Also müssen sehr viele Seiten von sehr vielen Web-Administratoren im Herbst geändert werden, denn - und das sollte unser Mindestziel sein - es sollte nur eine technische Umsetzung dieses wichtigen Symbols an der Universität geben!

Der zweite wichtige Impuls zur Überarbeitung unserer Seiten wird die Festlegung der Hausfarbe sein. Verbunden mit der Farbfestlegung für Köpfe und Schriftzug (die zusammen das Logo der HU bilden) ist die Festlegung eines "Farbklimas". Das Farbklima wird beschreiben, welche Farben in Verbindung mit der Hausfarbe zu vermeiden und welche zu verwenden sind. So sollte zukünftig auch eine Web-Seite auf den ersten Blick als "zur-HU-gehörig" erkennbar sein.

Bleibt zu hoffen, daß die Autoren des Farbklimas wissen, wie wenige Farben wirklich Web-tauglich sind.

Das Rechenzentrum wird in Zusammenarbeit mit dem Referat Presse- und Öffentlichkeitsarbeit rechtzeitig die WWW-Seite mit den aktualisierten Vorschriften zur Verwendung des Logos erneuern (http://www.hu-berlin.de/formulare/logo.html).

Der dritte Aspekt ist die Festlegung der Hausschriftart durch das Corporate Design. Auf die Gestaltung von Web-Seiten wird dies nur langsam Einfluß gewinnen können. Eine Möglichkeit dazu bieten Style Sheet-Dateien, die einen Font für alle Web-Seiten vorgeben. Das Rechenzentrum wird eine solche Datei als Vorschlag auf der o.g. Seite ablegen. Leider werden Style Sheets noch nicht von allen Browsern korrekt interpretiert (in Netscape 4.5 wirken sie beispielsweise nicht auf den Inhalt von Tabellen). Deshalb muß ihr Einsatz zunächst sparsam erfolgen. Später werden sie die Arbeit jedoch stark erleichtern.

Inhalt

Auf den Inhalt kommt es an! Einige Web-Autoren scheinen zu vergessen, daß das Wichtigste jeder Präsentation im Netz nicht das Darstellen der eigenen Fähigkeiten in HTML und Javascript ist, sondern die inhaltliche Darstellung der Einrichtung. An erster Stelle stehen dabei Lehre und Forschung! Fehlen sollten darüber hinaus auch Expertenlisten, Telefon- und E-Mailbücher nicht. Allerdings kann der Aufwand dort durch einen Link auf das Zentrale Auskunftssystem der HU (ZAS-HU: http://www.hu-berlin.de/zas/) deutlich reduziert werden. Auf keinen Fall sollten die Adressen der Mitarbeiter/innen zusätzlich in einer lokalen Datenbank abgelegt werden, da die Daten in der zentralen Datenbank dezentral von den Verwaltungsleiter/innen der Einrichtungen aktualisiert werden. Bei Bedarf ist es durchaus möglich, unter Nutzung der zentralen Datenbank eigene Auswertungsskripte zu entwickeln.

Nutzen Sie auch verstärkt den zentralen Veranstaltungskalender (http://www.hu-berlin.de/veranst/
kalender.html
).

Seiten wie Gesetze oder Ordnungen, die möglicherweise oft ausgedruckt werden, sollten auch im .pdf-Format bereitgestellt werden.

Vergessen Sie bitte nicht, beim Verweisen auf Inhalte anderer Autoren deutlich zu machen, wer der Urheber des Inhaltes ist.

Bei aller Befürwortung starker Außendarstellung sollte aber auch den Mitarbeiter/innen des eigenen Hauses stets ein Anreiz dazu gegeben werden, die Seiten der eigenen Einrichtung immer wieder zu besuchen. Auf dem Weg zu beliebten Seiten werden oft Fehler und Ungereimtheiten auf anderen Seiten gefunden, die anschließend korrigiert werden können. (Das ist der Sinn der Veröffentlichung von Mensa-Plänen o.ä., die oft als überflüssig und zu arbeitsintensiv angesehen werden.)

Während bei gedruckten Broschüren akzeptiert wird, daß eine Aktualisierung erst zur nächsten Ausgabe erfolgen kann, werden von Web-Benutzern nur aktuelle Seiten als gute Seiten empfunden. Deshalb ist es wichtig, sich wirklich zu überlegen, ob schnell wechselnde Inhalte im WWW angezeigt werden sollen.

Java, Javascript, PHP3 & Co.

Wenn Sie eigene Skripte entwickeln möchten, achten Sie darauf, Java und Javascript nur an solchen Stellen einzusetzen, an denen kein Schaden entsteht, wenn ein Browser die jeweilige Sprache nicht interpretiert. Aus Sicherheitsgründen schalten dies viele Benutzer in ihrem Browser ab. Auch bei den Mitarbeiter/innen der Universitätsverwaltung sind Java und Javascript standardmäßig ausgeschaltet. Zwar weist die dortige Firewall nur universitätsfremde Anwendungen ab, aber die meisten Benutzer behalten natürlich die Standardeinstellungen bei. Auf keinen Fall gehören Java und Javascript auf die Startseite einer Fakultät oder eines Institutes, wenn ohne sie eine Navigation nur eingeschränkt möglich ist! Auch auf den nachfolgenden Seiten muß zu jeder Javascript-gesteuerten Navigation eine Alternative bereitstehen.

Als Ausweichmöglichkeit empfehlen wir PHP3, eine Erweiterung für Webserver, die es ermöglicht, relativ schnell dynamische Web-Seiten zu erzeugen. PHP ermöglicht die Einbindung verschiedener Datenbanken, z.B. Sybase, das vom Datenbankservice des Rechenzentrums im Rahmen einer Campuslizenz zentral angeboten wird.

Weitere Informationen zu PHP finden Sie unter der URL: http://www.php3.de. Gegenüber Java hat PHP auch den Vorteil, schneller in der Abarbeitung zu sein.

Einen weiteren Haken hat das Deaktivieren der Javascript-Darstellung im Browser jedoch noch: Auch die durch Style Sheets veranlaßten Layoutvorgaben werden dann nicht dargestellt.

Suche (über Suchmaschinen, Index und META-Tags)

Immer wieder stellen wir fest, daß beinahe jede Thematik im Netz erörtert wird. Mit der Fülle der Seiten schwindet jedoch zunehmend die Möglichkeit, alles wohlstrukturiert und in wenigen Schritten auffindbar zu machen. Oft ist die hausinterne Strukturierung, beispielsweise die nach Fakultäten, einem Außenstehenden unverständlich. Wer im eigenen Hause weiß schon, was sich hinter dem Begriff "Philosophische Fakultät IV" verbirgt? Für einen Fremden ist also oft unklar, welcher Unterpunkt sich hinter welchem Hauptpunkt verbirgt.

Aus meiner Sicht erhalten deshalb Suchmechanismen einen immer höheren Stellenwert. Wichtig ist es, neben der reinen Volltextsuche über einen oder mehrere Server, die keine oder nur minimale Prioritäten zwischen den Fundstellen setzt, auch eine Schlagwortsuche anzubieten, also das, was sich hinter dem Begriff "Index" bzw. "A-Z" verbirgt. Solche Register sind von außen leicht verständlich, und der Autor erhält damit die Möglichkeit, Prioritäten zu setzen, indem er angibt: Wenn jemand nach "Sammlungen der HU" sucht, erreiche er zuerst die Seite http://www2.hu-berlin.de/
sammlungen
/ und werde von dort aus weiterverwiesen an andere. Bei der reinen Volltextsuche wäre gerade diese Seite erst ganz am Ende aufgelistet worden, da sie auf einem entfernteren Server plaziert ist als andere. Es ist auch sinnvoll, manche Seiten unter mehreren verschiedenen Suchbegriffen anzugeben, etwa die Seiten "Dial In" im Rechenzentrum, die möglicherweise unter "Modem" oder "Einwahl in die HU" eher gesucht werden.

Bisher hat sich eine Variante der Indexbildung leider nicht durchgesetzt: Ein automatisch gebildeter Index, der sich aus den durch die Autoren vergebenen Meta-Begriffen zusammensetzt. Doch auch die Bedeutung der META-Tags wird in Zukunft weiter steigen. Diese Tags werden von den Autoren der Web-Seiten in den HTML-Code eingefügt. Später werden sie von den Suchmaschinen ausgelesen und gegenüber dem restlichen Text als vorrangig behandelt. Am wichtigsten sind die zwei Tags "keywords" und "description".

Wer sich über weitere sinnvolle Tags informieren möchte, kann die Seiten der Meta-Tags-Initiative "Dublin Core" lesen: http://purl.oclc.org/dc/. Hier finden Sie nicht nur eine Beschreibung der wichtigsten Meta-Angaben zu einem Dokument, sondern auch Möglichkeiten, diese Meta-Daten automatisch erstellen und in ein Dokument einfügen zu lassen. Es ist etwas zeitaufwendig, für ein Dokument ein ganzes Set von Meta-Daten zu erstellen, aber es ist ja auch gar nicht nötig, dies für jede einzelne Web-Seite zu tun. Wichtig ist es immer für die Startseite eines Themas. Ein Beispiel: Die Startseite der Sammlungen an der HU (http://www2.hu-berlin.de/sammlungen/) enthält (zum Zeitpunkt der Redaktion) keine Meta-Tags. Folglich wird sie sehr schlecht von der Suchmaschine behandelt und erscheint bei der Suche nach "Sammlungen" nur ganz am Rande. Die Priorität dieser Seiten ließe sich durch das Einfügen folgender Zeilen deutlich erhöhen:

<META NAME="Description" CONTENT="Sammlungen an der Humboldt-Universität zu Berlin">

<META NAME="KeyWords" CONTENT="Sammlungen, multimediale Datenbank">

Als Ergänzung zu einem solchen Index sollte eine Seite "Neues" (bzw. die Markierung eines Indexeintrages als "neu") auf keinem Web-Server fehlen, denn das Problem vieler Autoren ist auch das Bekanntmachen der eigenen Seiten.

Genauso wichtig ist es, dem Benutzer eines Suchformulars klar und einfach die Eingabemöglichkeiten darzulegen. Wer weiß schon, daß man in das zentrale Suchformular http://www.hu-berlin.de/suche_all.html auch Suchfolgen wie die folgenden eingeben kann:

keywords : Helmholtz

url : sammlungen

title : Veranstaltungskalender

Datenbankanbindung

Auf dem Sektor der Datenbanken hat sich in den letzten Jahren außerordentlich viel getan. Das resultiert aus dem stark gewachsenen Anspruch der Web-Benutzer an die Aktualität der angebotenen Daten.

Erfreulicherweise ist aber auch das Verständnis für die Ablage und Pflege von Seiten-Inhalten in Datenbanken gewachsen. Welcher Web-Administrator wäre schon in der Lage, die Anschriften aller Mitarbeiter der Universität an seinem Arbeitsplatz zu pflegen? Wer weiß am ehesten über die Entwicklung eines Forschungsprojektes Bescheid? Mehrere Datenbanken, die vor allem zentral angeboten werden, werden so mittlerweile dezentral gepflegt. Ob Studierendenstatistiken, Mitarbeiterlisten, Veranstaltungsübersichten, Übersichten über Forschungsprojekte oder Gebäudeverzeichnisse: Datenbanken bieten die Möglichkeit, Inhalte auf verschiedene Art und Weise zu präsentieren. Jede dezentral vorgenommene Änderung wird sofort, d.h. ohne weitere Konvertierung, im WWW sichtbar. So kann man gezielt nach Benutzergruppen unterscheiden und Inhalte getrennt nach Internet und Intranet differenziert darstellen. Gesteuert durch Skripte kann die Suche nach Inhalten gezielt in bestimmten Datenbankfeldern erfolgen, können Summen gebildet oder Texte neu zusammengestellt werden. Wie aber verfahren Suchmaschinen mit den Datenbankinhalten? Vorausgesetzt, ein Skript verweist auf den Inhalt eines Datenbankfeldes, verfolgt der Suchalgorithmus das Skript und findet ein gesuchtes Wort wie in einer normalen HTML-Datei. Es ist also sinnvoll, ein Skript mit allen verfügbaren Datenbankinhalten zu generieren (und dieses als "ausführbar" zu deklarieren), um über eine Volltextsuche auch die Elemente auffindbar zu machen, die über eine andere Suchoberfläche möglicherweise nicht zugänglich sind.

Eine andere Möglichkeit besteht darin, regelmäßig aus den Datenbankinhalten HTML-Files zu erzeugen und diese auf dem Web-Server abzulegen. Diese Verfahrensweise bietet sich für lokale Datenbanken an.

Sehr aufwendig, aber für kleinere Einrichtungen ein durchaus gangbares Verfahren, ist die Ablage kompletter Web-Sites in Datenbanken. Dies sichert eine einheitliche Präsentation nach außen unter gleichzeitiger Beteiligung mehrerer Autoren. Leider schränkt es die Kreativität der Autoren ein und macht zusätzlich abhängig von der Funktionstüchtigkeit eines weiteren Zwischenproduktes.

Server Side Includes

Bisher noch wenig genutzt werden die sog. "Server Side Includes" (SSI), dabei sind gerade sie eine Möglichkeit, sich Arbeit zu ersparen, indem man den Web-Server für sich arbeiten läßt. Ein klassischer Fall für ihre Anwendung ist die Zeile: "letzte Änderung:", die auf keiner Web-Seite fehlen sollte.

Das Datum der tatsächlichen letzten Änderung kann man über einen Parameter vom Server nachtragen lassen. Dazu muß man folgende Schritte tun:

a) An der Stelle, an der das Datum erscheinen soll, müssen folgende Zeilen eingefügt werden:

<!--#config timefmt="%d.%m.%y" -->

<!--#flastmod file="test.shtml" -->

b) Die Datei muß die Endung .shtml erhalten.

SSI leisten jedoch weitaus mehr. Interessenten können sich dazu auf folgenden Seiten näher informieren:

1. http://www.apache.org/docs/mod/mod_include.html
(Apache-Dokumentation)

2. http://www.zdnet.de/internet/artikel/tech/199906/
ssi_00-wf.html
(Internet Professional, Ausgabe 6/99)

Einziger Nachteil der SSI: Sie sind eine Spezialität des Apache Web-Servers.

Bilder

Bilder sind problematisch. Sie tauchen an allen möglichen Stellen auf, manchmal nur in der Funktion, eine Seite starren Textes durch etwas Witziges "aufzulockern", hin und wieder sogar unsichtbar, um die Anordnung der Seitenelemente in eine gewünschte Form zu bringen. Folgende Dinge sollte man berücksichtigen:

- Bilder grundsätzlich nur dort einsetzen, wo sie der Information dienen.

- ALT-Tag zu jedem Bild korrekt ausfüllen. Es dient auch dazu, einem blinden Benutzer den Inhalt der Seite zu erläutern!

- Möglichst keine Leer-Gifs verwenden.

- Bei großen Bildern sog. Thumbnails anbieten, die auf Wunsch das Originalbild sichtbar machen.

- Bei größeren Darstellungen Preview-Funktion nutzen.

- Bilder möglichst in komprimierter Form benutzen, z.B. im .jpg-Format.

- Große Bilder in kleinere zerteilen und nacheinander aufrufen.

- Bildgröße im aufrufenden HTML-Code fest vorgeben.

- Auf Hintergrundbilder weitestgehend verzichten.

- Bei interaktiven Bildern Benutzungsanleitung deutlich machen.

Performance

Hier noch einige Hinweise zur Steigerung der Effektivität und Ladezeit von Web-Seiten:

Tabellen

- Wie bei Bildern das Vorgeben der Anzeigegröße beschleunigt bei Tabellen das Vorgeben der Spaltenbreite die Anzeige, da die ersten Inhalte schon angezeigt werden können, wenn der Rest noch geladen wird.

- Wenn große Tabellen in mehrere kleine Tabellen aufgesplittet werden, können Teile der Seite bereits angezeigt werden, während andere nachgeladen werden.

- Möglichst keine ineinander verschachtelten Tabellen verwenden.

Navigation

- Navigationselemente sollten so einfach wie möglich gehalten werden. Dabei sollten nicht mehr als fünf gleichrangige Menüpunkte auf einen Blick angeboten werden.

- Die Seiteninhalte sollten dem Bildschirm angepaßt sein. Das Scrollen wird von Web-Benutzern als besonders lästig empfunden. Deshalb bitte auch auf kleinere Bildschirme Rücksicht nehmen.

- In der Regel sollte browserunabhängig entwickelt werden. Da dies aber bei der Unterschiedlichkeit der Browser sehr schwierig ist, können innerhalb des Intranets auch browserabhängige Features verwendet werden. Bei der Außendarstellung jedoch unbedingt darauf verzichten!

HTML-Code

- Einige Werkzeuge, die zum Erstellen von Web-Seiten benutzt werden, hinterlassen nach dem Ändern von Seiten unsauberen Quellcode. Es lohnt sich im Sinne der Performance auf jeden Fall, den HTML-Code manuell zu bereinigen und dabei leere bzw. andere unnötige Tags zu entfernen.

Streaming

- Sollen Videos oder Tonkonserven in eine Web-Seite eingebunden werden, empfiehlt sich die Anwendung von Streaming-Mechanismen, um dem Besucher einer Seite eine möglichst schnelle Bereitstellung zu sichern.

Katrin Lányi
katrin.lanyi@rz.hu-berlin.de