Modul 4: Webangebotsoptik, Inhalte und Navigation

Nachdem Sie nun mit den wesentlichen Grundtechniken der Webseitenerstellung vertraut sind und erste Erfahrungen in der Seitenerstellung gesammelt haben, sollten Sie die Erstellung einer geowissenschaftlichen Website anpacken. Hierzu ist eine generelle Planung zu Inhalt, Layout, Struktur und Navigation Ihrer Site notwendig, um später nicht vor lauter Anpassungsnotwendigkeiten die komplette Übersicht zu verlieren und Ihre Site zu einer Dauerbaustelle zu machen.

Als Vorwissen für diesen Modul sollten Sie mit den vorhergehenden Modulen vertraut sein und erste Webseiten bereits selbst erstellt haben:

• Modul 1 macht Sie mit html-tags, links, Bildeinbau und Composer, dem html-Editor von Netscape vertraut
• Modul 2 behandelt u.a. http und ftp-Protokoll, URLs und Pfade, Bildformate und Bildbearbeitung
• Modul 3 behandelt Frame- und iFrame-Techniken

Zu diesem Kursmodul finden Sie folgende folgende Bausteine, die Sie am besten nacheinander durcharbeiten sollten.

Modul 4.1: Generelle Layout-Fußangeln durch html-Restriktionen, Benutzerhardware und Benutzereinstellungen

Wie Sie bereits wissen, beinhaltet die Standard- html -Sprache nur sehr einfache Layoutmöglichkeiten. Insbesondere wichtig hierbei sind folgende Einschränkungen:

Wesentliche Einschränkungen durch html-Befehlssatz:

• Text wird je nach Größe des Browserfensters des Benutzers an beliebigen Stellen umgebrochen (immer wieder anders, wenn der Benutzer die Fenstergröße ändert), es sei denn Sie geben einen Zeilenumbruch durch den Break-Tag <br> oder den Start eines neuen Abschnittes (Paragraphen-Tag <p>) ein. In "wyswyg"-Webeditoren (Composer, GoLive etc.) wird dies bei Benutzung des Layout-Modus automatisch eingefügt.
  Tipp: Zeilenumbruch in einer bestimmten Textstelle (z.B. Vor und Nachname sollen zusammenbleiben) können Sie durch Markieren der Stelle mit dem <nobreak> .....</nobreak>-Tag erreichen.
  
  

• Dieser automatische Umbruch gilt auch für Abbildungen, die nebeneinander angeordnet wurden. Ändert sich die Fenstergröße durch den Benutzer (oder hat der Benutzer nur einen sehr kleinen Bildschirm bzw. kleine Bildschirmauflösung, s.u.), werden Abbildungen, die Sie nebeneinander haben wollten, ggf. in eine zweite Reihe umgebrochen. Haben Sie darunter ggf. noch Abbildungsunterschriften, wird das Kuddelmuddel perfekt ( Beispiel)
  
  

• Wenn Sie Tabellen zur Layoutgestaltung verwenden, wird Zellen-Text, aber auch anderer Inhalt ebenfalls umgebrochen, sofern die Tabellengröße und Zellengrößen relativ (d.h. in % ) eingestellt wurden. Sie können dies verhindern, indem Sie absolute Größen in Pixel angeben. Dann kann es jedoch passieren, dass der Benutzer bei kleinem Bildschirm sehr weit nach rechts über die sichtbare Seite hinaus scrollen muss.
  
  

• Text können sie mit dem Standard-html-Befehlssatz nicht im Blocksatz angeben. Auch Spaltendarstellung ist nur mit Hilfe von Tabellen (ohne Rand) möglich. Verwendet der Benutzer ein sehr breites Browserfenster (siehe unten), ist die Schrift nur sehr schwer lesbar, da die einzelnen Zeilen über den ganzen Bildschirm verfolgt werden müssen.
  
  Tipp: Rücken Sie ihren Fließtext ein, so wie dies z.T. auch auf dieser Seite geschieht. Dadurch wird Ihre Seite zwar etwas länger, aber dafür besser lesbar. Der einzurückende Text steht dabei zwischen den Tags <blockquote> und </blockquote>. Listen (wie diese unordered list) sind automatisch eingerückt.
  (zu weiteren, über html hinausgehende Möglichkeiten kommen wir im Fortgeschrittenen-Teil dieses Kurses)
  
  

• Textgrößen können mit dem Standard-html-Befehlssatz nur relativ angegeben werden. Wie groß Ihr Text dann wirklich auf dem Benutzerbildschirm erscheint, wissen Sie nicht. Bei den Schriftarten haben Sie nur eine sehr kleine Auswahl (siehe unten)
  (zu weiteren, über html hinausgehende Möglichkeiten kommen wir im Fortgeschrittenen-Teil dieses Kurses)
  
  

• Sie können auf einer normalen html-Seite, wenn sie einmal aufgerufen ist, nur statischen Inhalt präsentieren (von kleinen GIF-Animationen abgesehen). Der Inhalt kann nach dem Aufruf nicht aktualisiert werden, ohne die Seite zu verlassen und auf eine andere html-Seite umzulenken ("umzulinken").
  
  Tipp: Durch die Verwendung von Frames, iFrames oder auch durch das Öffnen eines Zusatzfensters ("popup"-Fenster) können Sie Dynamisierung erreichen, ohne die Ausgangsseite zu verlassen. Siehe hierzu Modul 3.
  
  (zu weiteren, über html hinausgehende Möglichkeiten kommen wir im Fortgeschrittenen-Teil dieses Kurses)

Wesentliche Einschränkungen durch fehlende Benutzerdaten

Noch deutlich stärkere Einschränkungen ergeben sich durch das fehlende Wissen über die Hardware-, Software- und Einstellungsdaten des uns unbekannten Angebotsnutzers. Dies sind insbesondere:

• Bildschirmgröße bzw. Bildschirmauflösung des Benutzers.
  
  Erläuterung: ein großer Bildschirm mäßiger Qualität bzw. sehr einfacher Grafikkarte hat ggf. die gleiche oder gar schlechtere Auflösung wie ein kleiner Bildschirm mit guter Auflösung. Die Auflösung wird in dpi angegeben (d.h. dots per inch = Bildpunkte per Zoll). Kleine Monitore (z.B. 14 oder 15 Zoll) in Verbindung mit einfachen Grafikkarten können ggf. nur 640x480dpi Auflösung haben. Auch Benutzer von 17 Zoll Monitoren können ggf. eine derartige Auflösung eingestellt haben, damit die Bilddetails größer erscheinen. Sogenannte absolute Pixelangaben (also als Bild-, Tabellen- oder Framegrößen sind damit nicht in absolute cm-Angaben zu übersetzen, sondern beziehen sich auch wieder relativ auf die Bildschirmauflösung. Wir wissen also nicht, welche Monitorauflösung vom Benutzer eingegeben ist. Große Monitore in Verbindung mit guten Grafikkarten können ohne weiteres 1024x768 pixel Auflösung haben. Dort würde unser Browserfenster dann sehr viel an html-Seiteninhalt vertikal und horizontal aufnehmen können (natürlich auch wiederum abhängig davon, wieweit der Benutzer das Browserfenster aufgezogen hat. 800 x 600 Pixel ist aber wahrscheinlich am weitesten verbreitet, aber auch 640x480 ist teilweise noch verbreitet, wenn auch rasch abnehmend..
  
  Wir sollten also nach Möglichkeit unseren Seiteninhalt so unterbringen, dass eine Breite von 800 Pixeln ausreicht und auch die Länge einer einzelnen Seite ggf. daran angepasst ist. Letzteres hängt aber von der Art der Seite ab. Eine Portalseite sollte ggf. in ein einziges Browserfenster passen oder durch nur einmaliges Scrollen nach unten erfasst werden können. Bei einem fürs Web aufbereiteten wissenschaftlichen Artikel darf die Länge einer html-Seite aber ohne weiteres auch deutlich länger sein. Näheres hierzu finden Sie unter Verbindung von Inhalt und Layout (siehe unten).
  
  Das Seitenbreitenproblem ist insbesondere bei Arbeiten mit Frames zu berücksichtigen. Ggf. sollten Sie hier ein zweites Layout für kleinere Bildschirme/Auflösungen bei möglichst gleichem Inhalt kreieren.
  
  ! Hierzu ein Beispiel: hier finden Sie einige Screenshots derselben Seite (www.palaeo.de) unter verschiedenen Bildschirmauflösungen. Sehen Sie sich diese bitte unbedingt an, damit Sie eine Vorstellung der großen Unterschiede in der dadurch bedingten Darstellung von Seiten bekommen!
  
  

• Einstellung der Standard-Schriftgröße und Standard-Schriftart in den Browser-Voreinstellungen des Benutzers. Dies geschieht übrigens im Browser unter Menupunkt Datei / Optionen (oder Voreinstellungen) / Schrift. Hier das entsprechende Einstelllungsfeld im Microsoft Internet Explorer, Vers. 5.0 (für Mac):
  

Sie sehen, dass hier u.a. als Standardschriftgröße 14 Punkt eingestelt ist und als Standard-Schrift (proportional) Times New Roman (als Sans-Serif Schrift Arial, als Kursiv-Schrift Geneva etc.).

Wenn hier der Webbenutzer eine höhere Schriftgröße als Standard-Schrift eingegeben hat, werden unsere Seiten vielleicht in einer viel größeren Schriftart angezeigt, als wir dies geplant hatten und unser Layout wird möglicherweise stark verzerrt. Auch hierzu als Beispiel zwei Screenshots .

Tipp: Dieses Problem kann man ggf. durch Stilvorlagen bzw. Cascading Style Sheets (CSS) einigermaßen in den Griff bekommen, hierzu kommen wir in Teil B dieses Kurses.

Es mag auch sein, dass wir in Netscape Composer oder einem anderen Editor Schriften gewählt haben, die auf dem Computer des Users nicht installiert sind. Aus diesem Grund sollte man möglichst nur mit den sowohl auf Mac als auch auf PC weitverbreiteten Schriften Times New Roman (Serif) und Arial (sans serif) arbeiten, auch wenn andere Einstellungsmöglichkeiten vorhanden sein sollten.

Hinweis: dieser Text ist mit Sans Serif-Schrift geschrieben (Arial). Sans Serif-Schriften haben keine Querbälkchen (Serifen) etwa unter dem T oder dem i und sind auf Bildschirmen besser lesbar. Serif-Schriften sollen angeblich im Ausdruck besser lesbar sein. Hier zwei Beispiele:

Sans Serif (Arial): Trittbrettfahrer Serif (Times New Roman): Trittbrettfahrer

Definition von Hintergrundfarbe, Text und Linkfarben in den Voreinstellungen des Browsers:

Diese Einstellungen sind wieder unter Optionen bzw. Voreinstellungen in den jeweiligen Browsern definierbar. Auch hierdurch bekommen wir ggf. Probleme. Möchte der User unbedingt schwarzen Hintergrund als Voreinstellung ist er wohl selbst Schuld, wenn er kaum eine Seite lesen kann, da ja normalerweise schwarze Textfarbe verwendet wird. Wenn er aber ein beruhigendes Hellgrün vorzieht, würde er bereits bei dieser Schriftfarbe Leseprobleme bekommen. Nun, wir können wohl davon ausgehen, dass an diesen Voreinstellungen nur wenig gedreht wird. Aber auch hier kann unser Layout ggf. durcheinander gebracht werden.

Tipp: Auch dieses Problem kann man ggf. durch Stilvorlagen bzw. Cascading Style Sheets (CSS) in den Griff bekommen, hierzu kommen wir in Teil B dieses Kurses.

Browserversion und Plattformtyp des Benutzers: Auch hierdurch können Probleme auftreten. Die Verwendung alter Browser kann verhindern, dass iFrames (siehe dort) oder gar Frames angezeigt werden. Aber auch WWW-Dienste, die über Handheld-PCs, andere Organizers oder über TV-fähige Browser abgefragt werden, werden nur sehr kryptisch dargestellt und viele Formatoptionen sind nicht darstellbar.

Wie entscheide ich mich?

Im Kleingedruckten lasen Sie oben immer wieder den Hinweis, dass man mit Stilvorlagen, CSS oder anderen Möglichkeiten die o.a. Einschränkungen durch html oder die Benutzerausstattung/Einstellung ggf. überwinden könne. Nun, warum sollten Sie dann denn bereits beginnen, Webseiten in reinem html zu erstellen? Sollten Sie sich nicht zuvor mit den fortgeschrittenen Möglichkeiten vertraut machen, um gleich optimierte Seiten zu erstellen? Hierzu einige Punkte als Entscheidungshilfe:

• In reinem html geschriebene Seiten haben die wenigsten Probleme bei der Darstellung in den verschiedensten Browsern und auf den verschiedensten Plattformen
  
  

• Stilvorlagen und Cascading Style Sheets basieren auf zusätzlichen Seitenbeschreibungssprachen bzw. Skriptsprachen (CSS, JavaScript). Die Erstellung von Seiten, die diese Vorlagen verwenden, ist deutlich aufwändiger. Außerdem ist die Implementierung dieser Skriptsprachen je nach Browser und je nach Plattform unterschiedlich. Sehr viele Inkompatibilitäten treten auf und viele Workarounds sind notwendig (z.B. unterschiedliche Versionen für IE und NN). Außerdem kann es mit jeder neuen Browserversion passieren, dass viele Skripte und damit Layout-Optionen nicht mehr laufen (z.B. laufen derzeit auf NetscapeNavigator 6 für Mac kaum mehr Seiten mit dynamischen, javascript-basiertem dhtml). Der Zeitaufwand zur Optimierung und laufenden technischen Anpassung dieser Seiten kann enorm sein.
  
  

• Es hängt also auch von Ihrer verfügbaren Zeit ab, welche Methoden und Techniken Sie verwenden.
  
  

• Auch vom Inhalt hängt es ab. Viele Sites sollten sowieso laufend auch inhaltlich aktualisiert werden, da kann man dann ggf. auch eine technische Anpassung vornehmen. Andere Seiten, z.B. wissenschaftliche, online gebrachte Artikel haben ein bestimmtes Publikationsdatum, und sollten danach schon aus Referenz-Gründen nicht mehr geändert werden (ggf. kann man Nachträge machen, die auch datumsmäßig extra aufgeführt sind). Hier ist es sicherlich wichtig, eine TEchnik zu verwenden, die nicht laufend nachgearbeitet werden muss.
  
  

Hier ein kleiner Überblick zur potentiellen Fehleranfälligkeit der jeweiligen Technik. Wenn Sie noch nicht mit allen Fachbegriffen vertraut sind, darf ich Sie auf Kursteil B vertrösten, wo wir wieder auf diese Thematik zurückkommen.

Seitentyp	verwendete Technik	Möglichkeiten (u.a.)	häufigste Fehler	Zeitaufwand
Standard-Webseite	html 3.2	Webseiten aus Text, Bildern und Links, einfache Animationen (anim. gif)	fehlende "" oder fehlende bzw. falsch gesetzte < > im Quellcode, falsch codierte Sonderzeichen, falsche Pfade	relativ gering
Frames bzw. iFrames	html 3.2, html 4	Webseiten mit laufend sichtbarem Inhaltsverzeichnis. Dynamischer Wechsel von Inhalten auf Teilen der Browserseite	wie oben, zusätzlich falsche targets, fehlende Auflösung von Frames, versehentliches Fangen fremder Seiten in Frames	hoch
Webseiten mit clientseitiger Dynamik	html 4, dhtml, CSS, plugins, JavaScript, ggf. JavaApplets	genaue Layoutdefinitionen möglich (Textgröße, Position etc)., vielfältige technische Möglichkeiten, dynamischer Seitenaustausch, direkte Bildwechsel, Aniationen über gesamte Browserfläche uvm	zusätzlich: fehlerhafte Skripte, Inkompatibilitäten von Browsern und Plattformen, falsche Browerweichen etc.	Erstellung hoch bis sehr hoch (v.a. wegen Workarounds zu Inkompatibilitäten) Pflegeaufwand: ebenfalls hoch wegen Anpassungen an neue Browser
Webseiten mit Formularen und Datenbankanbindung	html 4, incl. Formularen, cgi-Programme, SQL oder ähnlich	dynamische Seitengenerierung aufgrund von Vorgaben/Optionsauswahl des Benutzers (z.B. Suchabfragen)	zusätzlich: fehlerhafte Datenbank-Marken in html-Seiten	hoch bis sehr hoch, wg. aufwändiger Testphase
Webseiten mit sonstigen serverseitig generierten Inhalten	html 4, SSI, php, asp oder ähnlich	wie oben, zusätzlich Passwortverwaltung, Zähler, Diskussionsforen, online-Terminnplaner uvm.	zusätzlich: fehlerhafte Verwendung der entsprechenden Script bzw. Programmiersprachen, falsches Servermanagement	für kleinere Anwendungen geringer Zusatzaufwand, ansonsten sehr hoch. Großer Aufwand bei evtl. Umzug der Seiten auf andere Server.

Mögliches Fazit:

• Wenn Sie vorhaben, auch beruflich in Richtung Webdesign, Webmaster oder Website-Administrator zu gehen, sollten Sie möglichst fit in allen Techniken sein.
  
  

• Wollen Sie optisch besonders anspruchsvolle und auch technisch interessante Seiten erstellen und verfügen Sie außerdem über genügend viel Zeit, können Sie alle Ihre Seiten mit fortgeschrittener Technik erstellen und weiterpflegen.
  
  

• Wollen Sie möglichst rasch und viele Seiten online bringen und dennoch optisch ansprechendes, jedoch relativ einfaches Design verwenden, erstellen Sie Ihre Seiten überwiegend in reiner html-Sprache. Es steht nichts dagegen, später auch einige optisch und technisch anspruchsvollere Seiten hinzuzufügen.
  
  

• Wollen Sie wissenschaftliche Inhalte mit komplexeren Animationen visualisieren, interaktive Abfragen (z.B. für Selbsttests) und dynamischen Inhalt generieren, müssen Sie sich auf alle Fälle mit weiteren technischen Möglichkeiten vertraut machen (Kursteil B).

Also, die Mischung, mit Anteilen, die Sie selbst definieren, ist wohl der richtige Weg.

Tipp: In den nachfolgenden Modulen finden Sie Anregungen. Wir diskutieren hierbei u.a. einige der durch den Kursleiter bzw. sein Team erstellten Websites in unterschiedlichen Zusammenhängen. Oder gehen Sie gleich zu Kursteil C (Was will ich, was kann ich?) und schätzen Sie selbst ein, was Sie machen wollen und können. Daraus ergibt sich in der Regel sehr rasch das zu verwendende Layout und die zu verwendende Technik.Kehren Sie dann ggf. hierher zurück.

>> zum nächsten Kursteil Modul 4.2: Moden im WorldWideWeb

<< Modul 3.3 (iFrames)