HP-Gestaltung

Homepage

Schilderungen meiner Erfahrungen die ich beim erstellen dieser Homepage gemacht habe. Anhand dieser Screenshots lässt sich recht gut erkennen, wie sich das Erscheinungsbild meiner Startseite bisher verändert hat:

alte Seite neue Seite Januar 2020

(2009 -> 2011 -> Januar 2020)

Die Farben des ersten Entwurfes, haben mir persönlich eigentlich ganz gut gefallen. Bis sich herausstellte, dass das wohl an meinen Monitor Einstellungen lag! Auf anderen Bildschirmen, sah es schon ziemlich bunt aus.
Das Foto auf der Index-Seite diente mir erstmal als Platzfüller, bis ich genug Material und Ideen für die Startseite zusammen hatte. Da die HP Stück für Stück wachsen sollte, gab es besonders am Anfang sehr viele Löcher zu stopfen.
Zu Beginn hatte ich mir überlegt, was alles auf die Page soll, welche Rubriken es geben soll und welcher Inhalt wofür bestimmt ist. Damit man ein Grundgerüst zum basteln hat. Also Startseite mit Navigationsmenü erstellen und dann auf Themen orientierte Seiten verlinken, die dann ihrerseits wieder auf Unterseiten verweisen.
Inzwischen ist das Menü mit den Links nach oben gewandert. So bleibt mehr Platz für den Inhalt , bei der von mir fest gelegten Seitenbreite. Das zeigt sich besonders bei mobilen Endgeräten wie Smartphones.

Title Footer

Zum erstellen meiner Homepage habe ich am Anfang den Composer verwendet (links), wechselte aber recht bald zum Editor Bluefish (rechts):

Im Composer kann man die Seiten im groben zusammen stellen. Während sich der Bluefish sehr gut zum editieren von HTML oder CSS (Cascading Style Sheets) eignet. Da meine Seite recht einfach gehalten ist, reichte zum erstellen der Composer vollkommen aus. Zum editieren meiner CSS-Menüs und zum bereinigen von Fehlern im Quelltext ist der Bluefish, wegen seiner Syntax Highlighting, jedoch besser geeignet.
Beim Composer handelt es sich um ein WYSIWYG-Editor ("What You See Is What You Get").
Sodas man direkt beim erstellen einer HTML-Seite schon sehen kann, wie sie einmal aussehen wird. Ohne den Quelltext editieren zu müssen. Was das arbeiten - besonders am Anfang - sehr erleichtert. Besonders wenn man nur ein paar Kleinigkeiten an einer Seite verändern möchte, lässt sich das mit dem Composer sehr gut umsetzen. Vergleichbar mit dem Composer, im Bereich der Handhabung, wären noch die Programme Nvu Composer und KompoZer. Bei beiden Programmen handelt es sich wohl um Weiterentwicklungen des Mozilla-Composers. Mehr Information findet man auf der Nvu-Homepage. Nach einer gewissen Einarbeitungszeit wird sich aber der Bluefish als weitaus geeigneter erweisen, da sich mit diesem Editor fehlerfreies HTML leichter erzeugen lässt. Außerdem verfügt er über einen größeren Funktionsumfang, was man mit der Zeit zu schätzen lernt.

Die Funktion meiner Seite habe ich mit den folgenden Browsern überprüft: Brave, Chrom, Firefox. Nach dem W3C sollten HTML und CSS valide sein.

Für mobilen Endgeräte, wie Tablets und Smartphone etc. sollte sich meine Seite leserlich darstellen lassen. Wer beim lesen auf einer Seite Probleme hat, möge sein Smartphone (oder was immer) quer halten ;)
Da ich selber kein Windows/Mac benutze, werde ich die Win/Mac-Browser nicht testen.

Einige Bilder älterer Seiten (Laufbrerichte zb.) sind zum Teil recht klein, da man sie nicht alle durch anklicken vergrößern kann. Die Originale einiger Fotos sind leider nicht mehr vorhanden, sodass ich nicht mehr auf diese verlinken kann.

CSS - Cascading Style Sheets

Im Laufe der Homepage Entwicklung kam es natürlich zu sehr vielen Umgestaltungen, Veränderungen und Erneuerungen. Was immer einen Haufen Arbeit mit sich brachte. Das wird sich sicher auch in Zukunft nicht wesentlich ändern. Da meine Homepage aber ein Hobby von mir ist, wollte und will ich mir nicht unbedingt unnötige Arbeit aufhalsen.
Und auf der Suche nach Möglichkeiten, die mir das Leben so einfach wie möglich machen, bin ich über Cascading Style Sheets (CSS) gestolpert.

CSS biete mir die Möglichkeit, per Syntax in Form von Stylesheets festzulegen, wie sich meine HP-Seiten verhalten sollen. Wenn ich zum Beispiel bei allen meinen Seiten die Überschriften von schwarz auf rot ändern möchte, müsste ich das bei (reinen) HTML-Seiten bei jeder Seite einzeln machen. Bei CSS müsste ich nur in der CSS-Datei den Farbwert für die Überschrift ändern, die Datei speichern und neu auf den Server hoch laden - fertig.
Die Änderung wäre dann für alle Seiten gültig, die an dieses Stylesheet gebunden sind. Im Beispiel unten würde ich die Hintergrundfarbe des Menüs ändern, in dem ich bei: .menucontainer - background-color:#7b7d8e; einen anderen Wert eintrage. Die Hintergrundfarbe aller Menüs auf allen Seiten, wäre damit angepasst.

Das würde dann in einem Stylesheet so aussehen:

.menutitle{
font-weight:bold;
text-align:center;
margin:2px;
}
.menucontainer {
border:1px solid #000;
background-color:#7b7d8e;
width:106px;
margin:10px;
}

Kürzliche Änderungen

Eine kurze Zusammenfassung der von mir gemachten Änderungen. Ich versuche möglichst zeitnah mit zuschreiben was sich auf meiner Seite verändert hat, um die einzelnen Schritte auch später noch nachvollziehen zu können. Wahrscheinlich werde ich aber nicht jede Kleinigkeit dokumentieren.

Oktober '24

Februar '21

Die Seite mit meinen Lauftouren wie folgt überarbeitet:

Februar '21

Januar '20

To-do-List

September '17

Februar '16

März '15

Februar '15

August '13

August '11

Januar '11

Mai '10

Oktober '09

Nachdem ich mit bedauern feststellen musste, dass sich meine Homepage mit älteren Internet Explorern schlecht bis gar nicht darstellen lies, habe ich mich dazu durchgerungen meine Seite etwas zu überarbeiten. Eigentlich hatte ich ja bereits im August damit begonnen meine Seite ein wenig aufzufrischen, so dass sie im IE 6.0 und 7.0 recht ordentlich aussah, aber eben nicht in den 5er Versionen. Da ich selbst bekanntlich kein Windows benutze, surfe ich nicht nur nicht mit dem IE, er würde nicht mal auf meinem System laufen. Was natürlich zur Folge hatte, dass ich lange nicht wusste, dass meine Seite schlecht IE kompatibel ist. Obwohl das HTML valide war (naiv gell)! Außerdem funktioniert die CSS-Angabe position: fixed; auch erst im IE7, weswegen ich beim Hintergrund für das <body>-Element etwas tricksen musste. Wie dem auch sei: habe ich die Situation genutzt, um die HP auf XHTML umzustellen. Wenn man eh schon einiges umarbeiten muss, kann man auch gleich mal richtig aufräumen.

Im Einzelnen habe ich folgenden Änderungen vorgenommen
(die Auflistung ist natürlich nicht vollständig):

August '09