Die Technik dieser Seiten

Speed

Wenn jemand auf den Gedanken kommt, www.lueneburg.name im Web aufzurufen, soll so schnell wie möglich etwas zu sehen sein!

Also keine gewaltigen Hintergrundbilder oder riesige Fotos. Und keine schicken Überschriften und Menüs aus Grafiken.
Manche Leute halten mich deswegen für paranoid, aber die kennen nur noch DSL, und ich will auch für ISDN oder gar 56k noch akzeptabel bleiben.

Aber trotzdem soll alles etwas netter aussehen als die Buchstabenwüsten des frühen Webs, als es sich noch um rein textorientierte Information handelte. Der Hintergrund wird aus einem sich wiederholenden jpeg-Bild gebildet, das nur 773 Byte groß ist. So gibt es nicht nur eine Hintergrundfarbe, sondern auch Textur! Schwierig ist es jedoch, kein Muster entstehen zu lassen, sondern eine scheinbar zufällige Verteilung der Pixel. Das wird durch die Balance zwischen Bildgröße und Hell-Dunkel-Verteilung der Grafik.
Weiter grafische Teile des Hintergrunds werden als kleine, sich wiederholende Bilder als Background-Image von <DIV>-Elementen mit dem Style "position:absolute" eingebunden.

Hervorhebungen, wie Überschriften oder Links sind <DIV>-Elemente, die nur über Schriftart, Schriftgröße und ggf. Hintergrundfarbe ihre Bedeutung erkennen lassen. Das kommt schneller als ein Bild, das geladen werden muß und kann genau so bunt sein.

Die Bilder sind notwendig. Es wäre zu langweilig, wenn der Text ganz ohne Auflockerungen herumsteht. Aber Auflockerung erreicht man auch mit kleinen Dateien. Die Images müssen im Bildbearbeitungsprogramm auf die Größe gerechnet werden, die sie auf der Seite haben werden. Auf keinen Fall mit den WIDTH- und HEIGHT-Attributen des <IMG>-tags verkleinern. Anschließend experimentiert man mit der Kompression, bis das Bild gerade noch so aussieht, wie es sein soll. Wichtig ist es auch, die Helligkeit der Gesamterscheinung der Seite anzupassen.
Alle diese Elemente dürfen auf der Seite nicht mehr oder weniger Wichtigkeit bekommen, als ihre Funktion erfordert.

Alle die beschriebenen Verfahren dienen dazu, die Ladezeit der ersten Seite der Website so kurz wie möglich zu halten. Es nervt ziemlich, wenn man auf Java-Filmchen und Monsterbilder warten muss, bevor überhaupt etwas zu sehen ist.

Drumherum

Der Gedanke war, eine Zeitung dar zu stellen; jedenfalls die erste Seite.
Auf dieser Site findet man eine Sammlung von Texten und Bildern. Das soll so symbolisiert werden.

Also sollte der Hintergrund etwas vergilbt und gefaltet aussehen. Dazu dient das background-image und die senkrechten und waagerechten Knicks. Die Knicks sind <DIV>-Elemente, die 100% hoch bzw. breit sind und so ungefähr in der Mitte der Seite angeordnet sind. Durch den Style "position:absolute" wird alles Folgende völlig unabhängig davon angezeigt. Sozusagen eine Ebene darüber. Sie nehmen genau ein Hintergrundbild unter- bzw. nebeneinander auf, damit alles schön gerade ist.
Auch die umgebogene Ecke oben links deutet das abgegriffene einer intensiv genutzten Ausgabe an. Damit sie Bilder oder Texte in der Titelzeile nicht wegdrängt, wird sie als <DIV> mit dem Style "position:absolute; left:0; top:0" eingebunden.

Die Aufteilung wollte ich ursprünglich ganz trendy mit <DIV>-Tags regeln, die mit dem Style "position:absolute" so angeordnet werden, dass nur durch Wechsel des Styles schnell umgebaut werden könnte. Das ergab aber unterschiedliche Darstellungen im Internet Explorer und Mozilla-basierten Browsern. Die Meinung darüber, was z.B. 20% der gesamten Breite sind, gingen so weit auseinander, dass entweder der Text in das Element rechts davon hinein floss oder eine zu große Lücke entstand!
Also musste die gute alte <TABLE> wieder her. Ein Umbau würde nun also nicht nur Style- sondern auch Strukturänderungen erfordern. Nicht sehr modern...

Alle Breitenangaben werden in Prozent festgelegt. So ist es egal, wie groß das Fenster ist. Auch beim Aufziehen der Ränder bleibt alles schön, wo es sein soll. Ich habe aber nicht getestet, wie das in älteren Browserversionen funktioniert!

Das Auseinanderperlen des Titels nach links und rechts geht so:
Jeder Buchstabe wird einzeln in <SPAN>-Tags aufgelistet:

<div class=kpfli1>
	<span id=kpli8 class=kpz>L</span><!--
	--><span id=kpli7 class=kpz>ü</span><!--
	--><span id=kpli6 class=kpz>n</span><!--
	--><span id=kpli5 class=kpz>e</span><!--
	--><span id=kpli4 class=kpz>b</span><!--
	--><span id=kpli3 class=kpz>u</span><!--
	--><span id=kpli2 class=kpz>r</span><!--
	--><span id=kpli1 class=kpz>g</span>
</div>
<div class=kpfre1>
	<span id=kpre1 class=kpz>N</span><!--
	--><span id=kpre2 class=kpz>a</span><!--
	--><span id=kpre3 class=kpz>c</span><!--
	--><span id=kpre4 class=kpz>h</span><!--
	--><span id=kpre5 class=kpz>r</span><!--
	--><span id=kpre6 class=kpz>i</span><!--
	--><span id=kpre7 class=kpz>c</span><!--
	--><span id=kpre8 class=kpz>h</span><!--
	--><span id=kpre9 class=kpz>t</span><!--
	--><span id=kpre10 class=kpz>e</span><!--
	--><span id=kpre11 class=kpz>n</span>
</div>

Die Darstellung wird zunächst über dieses Style ausgeschaltet:

.kpz {
	display:none;
}

var l = 0;
var r = 0;
function bstart() {
	window.setTimeout('titelaufRe()',50) // links
	window.setTimeout('titelaufLi()',70) // rechts
}

function titelaufLi() {
	l++;
	var e = document.getElementById('kpli'+l);
	if (e) {
		e.style.display = 'inline';
		window.setTimeout('titelaufLi()',50);
	}
}
function titelaufRe() {
	r++;
	var e = document.getElementById('kpre'+r);
	if (e) {
		e.style.display = 'inline';
		window.setTimeout('titelaufRe()',50);
	} else {
		document.getElementById('kpfunten').style.display='block';
	}
}

Die kleinen Skizzen sind übrigens in Powerpoint von Hand (genauer: von Touchpad) gemalt und in Gifs mit transparenter Hintergrundfarbe konvertiert.