Home

Sitemap

Auswahlseite

Entwurfskriterien und Erfahrungsbericht über die Erstellung meiner Homesite auf fredriks.de

Diese Homesite ist seit Mitte 2000 im World Wide Web. Seitdem ist sie -aber das geht den meisten Homesites so- ständig umgebaut und erweitert worden.

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. Die Website ist nicht responsibel. Der Versuch, sie responsibel zu gestalten, ist gründlich fehlgeschlagen.

Im Laufe der Zeit habe ich einige Editoren ausprobiert.

Viele der jetzigen Seiten sind ursprünglich mit „Ulli Meybohms HTML EDITOR” entstanden. Dies ist ein komfortabler Freeware-Editor. Er ist quelltextorientiert, erfordert also gewisse HTML-Kenntnisse. Allerdings ist er für die Erstellung von HTML5-Webseiten gegenwärtig (Stand Ende September 2014) nicht geeignet, denn er wurde schon lange nicht mehr aktualisiert.

Für die Umcodierung von HTML-Dateien in PHP-Dateien bevorzuge ich das Freeware-Programm „Notepad++”. Sofern man über entsprechende Syntaxkenntnisse verfügt, ist dies Programm auch für die Neuerstellung von Webseiten für HTML5 bestens geeignet.

Wenn man im Quelltext herumbastelt, schleichen sich leicht Syntaxfehler ein. Im Web findet sich der W3C®Markup Validation Service. Er ermöglicht die Überprüfung einer Webseite auf Syntaxfehler.

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.

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.

Der Javascriptcode für die Farbumschaltung der Navigationsicons ist mit dem Closure Compiler optimiert. Der Closure Compiler bietet verschiedene Optimierungsstufen an. Hier erfolgt die Optimierung mit der Stufe „Simple”.:
Der Originalcode lautete:

function Md(Nr) {
var oldPic=document.images[Nr].src;
var off=oldPic.lastIndexOf("r");
if (off != -1) { /* Sicherheitsabfrage */
var newPic=oldPic.substring(0,off)+"b";
document.images[Nr].src=newPic+".gif";}}

function Mw(Nr) {
var Bild=document.images[Nr].src;
var on=Bild.lastIndexOf("b");
if (on != -1) {
var newPic=Bild.substring(0,on)+"r"+Bild.substring(on+1,Bild.length);
document.images[Nr].src=newPic;}}
Der Closure Compiler hat diesen funktiongleichen kürzeren Code erzeugt:
function Md(c) {
  var a = document.images[c].src, b = a.lastIndexOf("r");
  -1 != b && (a = a.substring(0, b) + "b",
document.images[c].src = a + ".gif");
}
function Mw(c) {
  var a = document.images[c].src, b = a.lastIndexOf("b");
  -1 != b && (a = a.substring(0, b) + "r" + a.substring(b + 1,
a.length), document.images[c].src = a);
}

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

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.

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.php 7189 Bytes 7258 Bytes
sitemap.php?f=2 1553 Bytes 1672 Bytes

PHP verwende ich seit Anfang 2013. Das Testen der mit PHP erstellten Seiten ist umständlich, da hierfür ein Webserver mit PHP-Unterstützung erforderlich ist. Man kann so etwas auch auf dem Windows-PC installieren. Ich verwendete zunächst auf dem Windows-PC dafür Jana2 als Webserver und den PHP-Server von http://www.php.net/downloads.php (abgerufen Ende Dezember 2012). Die Installation beider Pakete ist recht mühsam. Obwohl Jana2 gut funktioniert, bin ich im Herbst 2013 auf das ebenfalls als Freeware erhältliche Paket XAMPP umgestiegen. XAMPP lässt sich erheblich leichter installieren als Jana2.

Bei den mit PHP erstellten Seiten

  • wird der Seitenkopf mit den Navigationsverweisen und der Seitenüberschrift generiert,
  • wird beispielsweise bei Grafiken, Links und den Tabellen mit technischen Daten eine kompaktere Schreibweise verwendet,
  • habe ich in etlichen Fällen mehrere HTML-Seite in einer einzigen PHP-Datei untergebracht. Dadurch wird die Anzahl der zu verwaltenden Dateien reduziert und somit die Pflege der Homesite vereinfacht.
In der nachfolgenden Tabelle sind vier Beispiele für die mir genutzte alternative Schreibweise aufgeführt. Sie wird durch den Einsatz von PHP ermöglicht.
Beispiele für mit Hilfe von PHP verkürzter Schreibweise
In HTML: <tr><colspan=2>
In PHP: trd(2);
In HTML: <tr><td class=c><img src='Bederkesa_Moerser_Kreisbahn_2.jpg' width=400 height=202 alt='Bederkesa, Schienenbusse ex Moerser Kreisbahn'>
In PHP: lcimg('Bederkesa_Moerser_Kreisbahn_2.jpg','',400,202,'Bederkesa, Schienenbusse ex Moerser Kreisbahn);
In HTML: <tr><colspan=2><img src='Buegel03.jpg' width=660 height=411 alt='Fehmarnsundbrücke (21.11.2009)'>
<br>Von links nach rechts: Fuß- und Radweg, Fahrstraße für Kraftfahrzeuge, einspurige Bahntrasse hinter der rechten Betonmauer. Die Verspannung zwischen Fahrweg und Brückenbogen ist netzartig ausgeführt.</tr>
In PHP: trc2imgbr('Buegel03.jpg','',660,411,'Fehmarnsundbrücke (21.11.2009)',
'Von links nach rechts: Fuß- und Radweg, Fahrstraße für Kraftfahrzeuge, einspurige Bahntrasse hinter der rechten Betonmauer. Die Verspannung zwischen Fahrweg und Brückenbogen ist netzartig ausgeführt.');
In HTML: <a href='http://validator.w3.org/' target='_blank' title='Externer Link (neues Fenster)'>Validator</a>
In PHP: eElnk('http://validator.w3.org/','Validator');

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.

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.

ALT und TITLE: Als erzieherische Maßnahme für Webautoren wurde das ALT-Attribut für darzustellende Bilder als notwendig festgelegt. Es soll den Browser veranlassen dann - und nur dann - einen alternativen Text für ein Bild anzuzeigen, wenn das Bild nicht angezeigt wird. Damit soll auch dann eine Aussagen zum Bildhaft sichtbar sein, wenn der User-Agent (z.B. der Browser oder der Suchmaschinen robot) keine Bilder verarbeitet. Außerdem gibt es Benutzer, die das automatische Laden von Bildern bewusst deaktiviert haben.

Einige Bilder meiner Website - wie die Navigationssymbole - sind reine Dekoration. Hier enthält das ALT-Attribut mit alt="" eine leere Zeichenkette. Ich kann mir diese Vorgehensweise leisten, da ich unmittelbar beim Bild stets einen diesbezüglicher Text anzeigen lasse.

Zusätzlich zum ALT-Attribut verwende ich hin vielen Fällen das TITLE-Attribut. Dessen Verwendung ist nicht als notwendig festgelegt. Damit sollen hinterlegten Texte als Erläuterung in Form einer Sprechblase („Tooltip”) angezeigt werden, wenn man den Mauszeiger auf das Bild schiebt und eine kurze Weile wartet. Das TITLE-Attribut besitzen fast alle HTML Elemente. Es dient dazu, erklärende Informationen zu einem Element zu liefern. So kann man z.B. einen Link näher erläutern, ein Akronym aufschlüsseln oder weitere Informationen zu einem Bild liefern. Der Inhalt des Title Attributs wird dann als Tooltip dargestellt.

Beziehen sich das ALT- und das TITLE-Attribut auf dasselbe Bild, so sollten sie nicht den gleichen Inhalt haben, denn sie haben verschiedene Aufgaben.

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 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 Freewareversion beißt sich allerdings mit einigen PHP-Codierungen. Für den Fall, dass man PHP-Seiten damit überprüfen möchte, bietet der Softwarehersteller kostenpflichtige Varianten des Programms an.

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.

Bis vor einigen Jahren war es zuverlässiger, einen Link auf die Startseite der verlinkten Website zu setzen. Allerdings musste dann der Gast dort selbst nach dem gewünschten Thema suchen. Mittlerweile ist es nicht mehr zuverlässig, den Link auf die Startseite zu setzen: Wenn eine Website durch den ursprünglichen Benutzer aufgegeben wurde, so wird sie zunehmend mit anderem Inhalt weiter betrieben. Der neue Inhalt ist häufig Werbung oder aber der Versuch, den Domänennamen zu verkaufen.

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

Einige Websites sperren die Möglichkeit der maschinellen Überprüfung auf Vorhandensein einer Webseite und beantworten die maschinelle Anfrage mit dem  i Statuscode 403. Zu diesen Websites habe ich keine Links gesetzt. Es wird jedoch im Text auf diese Websites hingewiesen. Leider betrifft dies auch die deutschsprachige Wikipedia.

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, index.html oder index.php. Die möglichen Dateinamen gibt der Internethoster vor. Fehlt eine solche Datei, so kann unter Umständen das gesamte Inhaltsverzeichnis des betreffenden Verzeichnisses im Browser sichtbar gemacht werden. Der Inhalt einer solchen Datei „index.htm” in einem Unterordner kann sich auf einen Link auf die oberste Seite der Homesite - diese heißt auch index.htm, index.html oder index.php - beschränken, z.B. so:

<html><head></head>
<body>
<a href="../index.htm">Hier geht es zum Index der Homesite</a>
</body>
<html>
Häufig kann man diese Datei mit einem sinnvollen Inhalt füllen: Es kann eine Auswahlseite sein, mit der die Navigation innerhalb dieses Teils der Homesite gesteuert werden soll.

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 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.


Home

Sitemap

Auswahlseite

Die Navigation auf meiner Homesite

Die Navigation soll möglichst einfach und übersichtlich sein. Das wird durch Verwendung immer der gleichen Navigationssymbole in auffälliger roter Farbe erreicht. Die Symbole sind:
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

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 stehen die Dinge, die man benötigt, um den Inhalt der Seite zu erkennen und um die Seite sofort wieder verlassen zu können. Es ist 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 stehen Verweise auf das vorige und/oder das nächste Thema. Falls eine Themeneinteilung nicht vorgenommen wurde, stehen hier Verweise auf die vorige und/oder nächste Seite.
  • Bei Seiten mit Themeneinteilung stehen Verweise auf die vorige und/oder nächste Seite in einer weiteren unmittelbar folgenden Navigationszeile.

Die Verlinkung der Seiten

Die Verlinkung der Seiten erfolgt in bestimmten Strukturen. Die Strukturen lassen sich mit Kästchen gut veranschaulichen. Die Linien zeigen dabei die Verlinkungen, die Rechtecke stellen einzelne Seiten dar.

Die Links zu den Beispielen können angeklickt werden. Sie werden alle in dem gleichen Fenster dargestellt.

Bild: Baumstruktur
Baumstruktur

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

  • Baum,
  • Reihe und
  • Baum mit Reihe.
Bei der Baumstruktur hat jeder Abkömmling einen einzigen unmittelbaren Vorgänger.
Beispiele für Baumstrukturen sind:
  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. Eine Imagemap (Eine Grafik, die Links beinhaltet) bildet einen Knoten. Beispiel:  i Die Ringlinie
  4. Eine Gruppe von Vorschaubildern bildet einen Knoten. Beispiel:  i 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  i London's Underground.


Bild: Jeder mit Jedem
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:  i Elstertalbrücke.

Bild: Hotelstruktur
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  i 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.


Letztes Upload: 22.04.2017 um 06:05:20