Entwurfskriterien und Erfahrungsbericht über die Erstellung meiner Homesite

Für die Betrachtung ist eine Bildschirmbreite von 1024 Bildpunkten angesagt. Notfalls lässt sich der Inhalt auch bei einer Bildschirmbreite von 800 Bildpunkten anzeigen. Hat man nur 640 Bildpunkte Bildschirmbreite, bringt es keinen wirklichen Spaß mehr. Für eine Anzeige auf einem Mobiltelefon ist meine Website nicht gedacht.

Im Laufe der Zeit habe ich einige Editoren ausprobiert.

Fast alle der jetzigen Bestandteile sind mit „Ulli Meybohms HTML EDITOR“ entstanden. Dies ist ein komfortabler Freeware-Editor. Er ist quelltextorientiert, erfordert also gewisse HTML-Kenntnisse.

Wenn man im Quelltext herumbastelt, schleichen sich leicht Formfehler ein. Dagegen hilft tidy.exe, ein Fehlerkorrekturprogramm, das als Freeware von vielen Webseiten herunter geladen werden kann.

Java benutze ich überhaupt nicht. Ich hatte mich mit Java beschäftigt und auch ein wenig damit programmiert. Aber es bringt keinen Spaß zu sehen, dass die gleichen Applets bei dem einen Browser funktionieren und bei dem anderen nicht.

Javascript benutze ich nur sehr sparsam, und zwar im wesentlich bei den Navigationsicons. Es macht sich bei der Programmierung von Javascript störend bemerkbar, dass Javascript nicht von allen Browsern gleich behandelt wird. Deshalb muss man bei einigen Javascript-Funktionen die Browsertypen abfragen und je nach Browsertyp unterschiedliche Verarbeitungen vorsehen. Hinzu kommt, dass einige Benutzer Java und Javascript abgeschaltet haben. Sie sind wohl um die Sicherheit besorgt und ärgern sich über Pop-Up-Fenster. Einschalten von Javascript beim Internet-Explorer: Klick auf Extras > Internetoptionen. Dort unter „Sicherheit“ entweder auf Standardstufe klicken, oder unter „Stufe anpassen“ > „Scripting“ den Punkt „Active Scripting“ aktivieren.

Rückwärtssprünge mit Javascript lassen sich sehr einfach programmieren, indem man codiert:
<A href="javascript:history.back()">Zur vorigen Seite zurück</A>
oder
<A href="javascript:history.go(-1);">Zur vorigen Seite zurück</A>
Ich habe auf diese Möglichkeit weitgehend verzichtet, da sie genau dann nicht in meinem Sinne funktioniert, wenn der Besucher über eine Suchmaschine oder einen externen Link auf die betreffende Seite gelangt ist. Sie funktioniert auch nicht, wenn der Besucher bei seinem Browser Javascript abgeschaltet hat.

Cookies lassen sich mit Javascript recht einfach programmieren. Bei meiner Homesite werden aber keine Cookies gesetzt. Außerdem ist die Anwendung von Cookies umstritten.

Frames habe ich als nützlich empfunden. Da sie leider ab HTML 5 nicht unterstützt werden, habe ich Mitte Mai 2011 sämtliche Frames aus meiner Website entfernt. Vorhergehende Versuche mit eingebetteten Frames (iframes) ergaben keine befriedigende Darstellung, denn bei iframes muss man die Höhe in einem absoluten Maß angeben. Eine relative Höhenangabe in Prozent der Fensterhöhe ist bei iframes zumindest offiziell nicht zulässig. Bei den Frames kann der Benutzer per Maus die Trennungslinie zwischen den Rahmen verschieben. Bei den eingebetteten Frames (iframes) ist diese wertvolle Eigenschaft nicht vorhanden.

Nachtrag Ende Januar 2012: Auf den Seiten über das Flensburger Dampf-Rundum und über die Londoner Untergrundbahn und beim Englisch/amerikanisch-deutsches Eisenbahnvokabular sind nun eingebettete Frames vorhanden.

CSS: Die Stilvorgaben sind nützlich und tragen zu einem guten und einheitlichen Erscheinungsbild bei. Ich verwende sie u.a. zur Auswahl der serifenlosen Schrift. Angeblich sind auf Bildschirmen serifenlose Schriften besser lesbar als Schriften mir Serifen. Bei gedruckten Texten ist es genau umgekehrt.

Zur Unterstützung der Druckausgabe findet sich in einigen meiner Seiten ein Seitenvorschub. Der Befehl dazu lautet:
<br clear="all" style='page-break-before:always'>

Seitenaufteilung mittels CSS oder mittels Tabellen: Angeblich ergibt die Seitenaufteilung mittels CSS eine kürzere und übersichtlichere Codierung als die Seitenaufteilung mittels Tabellen. Bei meiner Homesite werden die Seiten weiterhin über Tabellen gegliedert. Eine versuchte Umcodierung führte mich zur Erkenntnis, dass die Seitenaufteilung mittels CSS keine übersichtlichere Codierung ergibt als die Seitenaufteilung mittels Tabellen. Die Dateilänge blieb fast unverändert:

Dateiname	Dateigröße mit CSS	Dateigröße mit Tabellen
sitemap.htm	7189 Bytes	7258 Bytes
impressum.htm	1553 Bytes	1672 Bytes

Hochladen (Upload): Um die geänderten Bestandteile an den Provider zu schicken, verwende ich das Programm “ftp-uploader”. Man kann es sich zum Ausprobieren als funktionsreduzierte Sharewareversion bei www.ftp-uploader.de herunterladen. Es führt den kompletten ftp-Vorgang durch und schickt nur die Dateien zum Server, die sich seit dem letzten Mal geändert haben oder die neu hinzugekommen sind. Außerdem beinhaltet es einen recht ordentlichen ftp-Klienten. Wenn die Homesite etwas umfangreicher geworden ist, reicht schnell die Sharewareversion nicht mehr aus und man kann sich dann gegen einen angemessenen Preis registrieren lassen.

Nachteilig ist lediglich, dass das Programm mit den Zeitumstellungen nicht einwandfrei klarkommt. Das Problem lässt sich dadurch entschärfen, dass man nach den beiden jährlichen Zeitumstellungstagen alle Dateien als „bereits hochgeladen“ deklariert.

Hintergrundbilder: Fast jeder Themenbereich hat sein eigenes Hintergrundbild bekommen. Es handelt sich hier zumeist um die Verkleinerung eines zum Thema passenden Bildes. Die Hintergrundbilder sind farbverfremdet, so dass die Farben blasser erscheinen. Damit man die Schrift trotzdem lesen kann, befindet sich die Normalschrift des Textteils auf einem hell gehaltenen Hintergrund ohne Hintergrundbild.

Zusatzfenster werden, sofern sie sich auf der eigenen Homesite beziehen, in einem einzigen immer gleichen Fenster gehalten. Das bedeutet, es erscheint nur ein einziges Zusatzfenster bzw. nur ein einziger weiterer Tabulator, solange man meine Homesite nicht verlässt.

Zugriffstatistiken: Auf der Indexseite (diese ist über „Home“ erreichbar) werden Zugriffstatistiken geführt. Sie sind nachvollziehbar: Durch Anklicken des Icons links unten auf der Indexseite kann sich jeder über den Umfang und Inhalt der Statistiken informieren. Ein Rückschluss auf die Identität des Benutzers ist nicht möglich.

Suchmaschinen: Praktisch alle externen Anfragen zu meiner Homesite kommen über Google. Daraus kann man schließen: Es reicht aus, sich bei einer einzigen Suchmaschine (eben bei Google) anzumelden.

Rechtschreibung und tote Links: Dazu habe ich noch keine befriedigende Lösung gefunden. Es ist mir bekannt, dass sich trotz Einsatz eines Prüfprogrammes viele Rechtschreibfehler auf den Seiten befinden. Ich verwende das Freewareprogramm „CSE HTML Validator Lite“, um die Rechtschreibung wenigstens etwas zu verbessern. Dies Programm lässt sich bei www.htmlvalidator.com zusammen mit zwei Wörterbüchern (deutsche Rechtschreibung vor und nach der Rechtschreibreform) herunterladen. Es führt zusätzlich eine Überprüfung der logischen Struktur der HTML-Seite durch.

Die Links habe ich zumindest bei der Erstellung der Seiten geprüft. Sporadisch erfolgt eine erneute Überprüfung mit dem Freeware-Programm xenu.exe. Zumeist führen die Links zu einer Unterseite einer Website, nicht auf die Startseite. Wenn sich die Adresse der Unterseite nicht geändert hat, ist dies die beste Möglichkeit. Zuverlässiger ist ein Link auf die Startseite der verlinkten Website. Allerdings muss dann der Gast dort selbst nach dem gewünschten Thema suchen.

Etwa einmal jährlich findet eine Überprüfung aller Seiten statt. Sie umfasst Korrektlesen, danach Rechtschreib- und Syntaxprüfung mit dem genannten „CSE HTML Validator Lite“ und abschließend eine Prüfung auf tote Links. Die letzte Überprüfung fand über den Jahreswechsel 2011/2012 statt und nahm weit über 100 Stunden in Anspruch. Meine Homesite umfasste am Jahreswechsel 2011/2012 ziemlich genau 1500 Webseiten. Das erklärt den hohen Zeitaufwand.

Wahrheitsgehalt: Ich versuche, nur Tatsachen und gelegentlich eine persönliche Bemerkung zu bringen. Tatsachen beruhen jedoch auf Quellen, und heutzutage ist neben eigener Anschauung und Literatur das Internet die Informationsquelle überhaupt. Bei gefundenen Widersprüchen oder Unsicherheiten über den Wahrheitsgehalt weise ich auf diese hin. Ich habe eine Seite als zentrales Quellenverzeichnis eingerichtet. Damit die Nachprüfung erleichtert wird, sind im Text entsprechende Verweise auf dies zentrale Quellenverzeichnis enthalten.

index.htm: Jedes Verzeichnis auf dem Server benötigt eine eigene Datei mit dem Namen index.htm. Fehlt diese Datei, so ist unter Umständen der gesamte Inhalt des betreffenden Verzeichnisses auf dem Server sichtbar, wenn man sich das entsprechende Verzeichnis mit ftp anschaut. Der Inhalt einer solchen Datei "index.htm" in einem Unterordner kann sich auf einen Link auf die oberste Seite der Homesite (die auch index.htm heißt) beschränken, z.B. so:

<html><head></head>
<body>
<a href="../index.htm">Hier geht es zum Index der Homesite</a>
</body>
<html>

Favoriten-Icon: Beim Internet-Explorer heißen die Lesezeichen bzw. Bookmarks „Favoriten“. Wenn Sie beim Internet-Explorer die Startseite meiner Homesite als Favorit abgelegt haben, sollte ein besonderes Icon angezeigt werden.

Dies wird durch eine 16 mal 16 Pixel große Datei mit dem vorgeschriebenen Namen favicon.ico im gleichen Verzeichnis wie die Startseite auf dem Webserver, und den Eintrag
<link rel="SHORTCUT ICON" href="http://www.fredriks.de/favicon.ico">
im Head-Bereich der HTML-Datei für die Startseite erreicht. Es handelt sich um die Datei index.htm. Das Verfahren ist im Web an mehreren Stellen beschrieben.

Downloadsperre für Bilder: Gelegentlich wundert man sich, wieso man von Webseiten die Bilder durch Anklicken mit der rechten Maustaste nicht herabladen kann. Der Trick ist ein einfacher Javascript, der auf der Webseite mit angegeben ist.

Der Script verhindert die Verwendbarkeit der Maustasten und des Contextmenues, die man zum Herabladen der Bilder benötigt. Der Surfer kann diese eher lächerliche Maßnahme dadurch umgehen, dass er entweder die Seite komplett herunterlädt, oder dass er Javascript abschaltet, oder im Cache des Browsers sich die entsprechenden Dateien sucht. Ich sehe keinen Sinn in einer solchen „Schutzmaßnahme“, denn sie verärgert ausgerechnet diejenigen, denen die Webseite so gut gefällt, dass sie Teile dauerhaft speichern möchten.

Platz im HTML-Code sparen

Der oben erwähnt „Ulli Meybohms HTML EDITOR“ ist ein Quelltexteditor. Er ermöglicht - im Gegensatz zu einem WYSIWYG-Editor - eine platzsparende HTML-Codierung. „WYSIWYG“ bedeutet „What you see is what you get“. Diese komfortableren HTML-Editoren fügen häufig unnötige HTML-Steuerzeichen in den HTML-Quelltext ein. Einige Beispiel unnötiger HTML-Elemente:

• target=""
  Wenn kein Sprungziel angegeben werden muss, braucht auch kein "target" aufzutauchen
  
  
• align="left"
  Die linksbündige Ausrichtung ist ohnehin Standard für alle Elemente
  
  
• color="#000000"
  Schwarze Farbe für die Schrift. Dieses Attribut ist unnötig, denn schwarz ist die Standardschriftfarbe
  
  
• font size="3"
  Die Standardgröße der Schrift braucht nicht extra definiert zu werden
  
  
• font face="Times New Roman"
  Diese oder eine vergleichbar wenig aussagekräftige Schrift wählt der Browser eigenständig
  
  
• align="top"
  und ähnliche Anweisungen in leeren oder wiederholten Tabellenzellen können entfallen. Wo kein Inhalt ist, kann er nicht ausgerichtet werden
  
  
• Tabellen
  Anweisungen für die Spaltenbreite (25% etc) brauchen nur in der ersten Zeile einer Tabelle gemacht zu werden
  
  
• Leerstellen, Einzüge und Zeilenzwischenräume
  zur Formatierung des HTML-Quelltextes verbrauchen Platz. Wenn die Struktur des HTML-Quelltextes so kompliziert ist, dass sich damit die Übersichtlichkeit erhöhen lässt, haben Sie etwas falsch gemacht! HTML ist eine einfache Beschreibungssprache, Verschachtelungen sind fehl am Platze
  
  
• Meta-Tags
  Meta-Keywords und Meta-Description vertragen jeweils nicht mehr als etwa 250 Zeichen. Angeblich ignoriert Google den Meta-Tag „keywords“.
  
  
• CSS und Javascript
  Mehrfach verwendete Style-Anweisungen (CSS) oder Javascripte können in eigene Dateien ausgelagert werden
  
  
• Erzwungene Leerzeichen
  Sollen mehrfache Leerzeichen unmittelbar hintereinander verwendet werden, denkt man an mehrere &nbsp; hintereinander. Häufig sind Alternativen wie blinde Tabellen, transparente GIF-Dateien, Größenangaben in Tabellenzellen, die Verwendung von Listen oder von Einzügen (<p style="margin-left:1cm; margin-right:1cm"> ... </p>) besser geeignet

	Zur Indexseite. Falls angegeben, befindet es sich links oben auf der Seite.
	Zur Sitemap. Falls angegeben, befindet es sich oben auf der Seite.
	Zur vorigen Auswahlseite zurück. Eine Auswahlseite ist eine Seite, die eine Verteilfunktion hat.
	Zur nächsten Auswahlseite vor.
		Zur vorigen Seite zurück.
		Zur nächsten Seite vor.
	Zurück zur vorigen Seite oder Auswahlseite.
	i	Zur Informationsseite des Themas oder für weitere Informationen zum Thema innerhalb meiner Homesite. Bei Verweisen auf fremde Websites entfällt das Informationssymbol.

Wenn der Mauszeiger darauf liegt, wird häufig die Farbe des Navigationssymbols mittels Javascript in blau geändert. Außerdem wird dann bei allen Links die Hintergrundfarbe in gelb verändert. Beides erleichtert die Bedienung bei Geräten mit schlecht sichtbarem Mauszeiger.

Die Navigationssymbole sind recht groß, denn je größer das Navigationssymbol, desto einfacher und schneller kann man es mit der Maus treffen. Die Navigationssymbole sind fast immer beschriftet, denn dies vergrößert die anklickbare Fläche. Die auf meiner Website benutzte Mindestgröße für Navigationssymbole beträgt 15*16 Pixel, die am häufigsten verwendete Größe ist 30*30 Pixel.

Bei vielen Links erscheint ein Hilfstext, wenn man den Mauszeiger darauf ruhen lässt. Der Hilfstext informiert über das Wesen des Links. Typische Hilfstexte sind

• Interner Link (neues Fenster)
• Interner Link (Zweitfenster)
• Interner Link mit Rückwärtslink hierher
• Interner Link ohne Rückwärtslink hierher
• Interner Link, Javascript ermöglicht Rückwärtssprung hierher
• Interner Link zur angegebenen Straßenbahnlinie (ohne Rückwärtslink hierher)

Dabei besagt „interner Link“, dass der Link zu einer Webseite innerhalb meiner Homesite führt. Ein „externer Link“ führt auf eine fremde Website.

Am oberen Rand jeder Seite befinden sich die Dinge, die man benötigt, um den Inhalt der Seite zu erkennen und um die Seite sofort wieder verlassen zu können, und zwar mindestens eines der Symbole:

• • "Zur Indexseite", meistens mit "Home" beschriftet
  • "Zur Sitemap"
  • "Zurück zur vorigen Seite oder Auswahlseite"
  • "Zur Infoseite"
• In der Mitte steht der Seitentitel. Er sagt was über den Inhalt der Seite aus.
• Unmittelbar rechts neben dem Seitentitel befinden sich entweder Verweise auf das vorige und/oder das nächste Thema. Falls eine Themeneinteilung nicht vorgenommen wurde, befinden sich hier Verweise auf die vorige und/oder nächste Seite.
• Bei Seiten mit Themeneinteilung befinden sich die Verweise auf die vorige und/oder nächste Seite am unteren Rand der Seite.

Baumstruktur

Links sind von oben nach unten drei Verknüpfungen dargestellt:

• Baum,
• Reihe und
• Baum mit Reihe.

1. Die Indexseite (Home) und die Sitemap. Die Indexseite führt zu den Hauptthemen, die Sitemap führt zu den Hauptthemen und zusätzlich zu den Unterthemen.
2. Die Seite, die Sie gerade lesen, ist der Abkömmling eines Knotens. Sie kommen zu dem Knoten zurück, wenn Sie oben rechts auf der Seite das Rückwärtssymbol anklicken.
3. Die Navigationsrahmen bei den Frames sind typische Knoten. Beispiel: London's Underground
4. Eine Imagemap (Eine Grafik, die Links beinhaltet) bildet einen Knoten. Beispiel: Die Ringlinie
5. Eine Gruppe von Vorschaubildern bildet einen Knoten. Beispiel: Amateurfunk

Reihenstruktur

Die Seiten werden in einer einfachen Folge angeordnet. Diese Struktur ist besonders leicht zu durchschauen. Nur ist der Zugriff etwas unbequem, denn wenn man nur eine einzelne Seite betrachten möchte, muss man sich durch andere Seiten hindurchklicken, um dahin zu gelangen.

Baum- mit Reihenstruktur

Hier werden die Vorteile der Baumstruktur (direkter Zugriff zu einzelnen Seiten) mit der leichten Verständlichkeit der Reihenstruktur verbunden. Ein Beispiel hierfür sind die Seiten über London's Underground.

Jeder mit Jedem

Diese einfache Struktur kann bei vielen Knoten unübersichtlich werden. Wenn nur drei Seiten miteinander so verbunden sind, ist sie jedoch ideal! Beispiel: Elstertalbrücke.

Hotelstruktur

Die Bezeichnung „Hotelstruktur“ ist einem großen Hotel nachempfunden: Es gibt einen Empfang (grün angedeutet), ein Treppenhaus und in jedem Stockwerk Zimmer. Man kann von jedem Zimmer unmittelbar zu den beiden Nachbarzimmern und zum Treppenhaus gelangen. Zum Empfang kann man ebenfalls unmittelbar von jedem Zimmer aus gelangen. Bei dem Thema Yorkshire dient die „Infoseite“ als Empfang. Sie verweist dort zusätzlich in Baumstruktur auf die einzelnen Stockwerke. Diese überlagerte Baumstruktur ist in der Grafik nicht angedeutet.