Gästebuch überarbeitet geschrieben am 07.02.2016

Nach langer Zeit habe ich das alte, auf Flash basierende Gästebuch durch ein auf JavaScript basierendes ersetzt.

Alternativ funktioniert das natürlich auch ohne JavaScript.

Grafik

Am längsten hat die Auswahl und das Zeichnen der Figuren gedauert. Da sie im Gästebuch nur sehr klein zu sehen sind, konnte ich sie jedoch einfach halten:

Wichtig war, die Positionen der Köpfe, Oberteile und Unterteile gleich zu halten – so passt jeder Kopf auf jeden Körper.

Die Teile habe ich dann in einem großen Sprite angeordnet:

Der Vorteil ist, dass nur ein Bild geladen werden muss. Und wenn ich Lust habe, könnte ich das Aussehen durch Ersetzen der Sprite-Datei einfach ändern.

Technik CSS

Eine Herausforderung war, dass das Gästebuch auch ohne JavaScript funktionieren sollte. Deshalb habe ich mich dafür entschieden, die Figuren per CSS aufzubauen:

Wie im Screenshot zu sehen, ist jeder Eintrag einem Listenelement zugeordnet.

Mit den Tags ::before und ::after habe ich die Einzelteile der Figur zusammengesetzt.

Das Bild für die Beine hängt am li -Element, darauf ist mit ::before das Oberteil und mit ::after der Kopf gesetzt.

Da sich nicht ohne weiteres der Text in einer Box anzeigen ließ, habe ich mit einem div den textlichen Inhalt gekapselt.

Des Weiteren habe ich auch das Datum mit einem span -Element gekapselt – dies ist nur in der "ohne JavaScript"-Variante zu sehen:

Technik

Das Erklären der Scripte hinter dem Gästebuch erspare ich mir – es wäre zu komplex.

Es sei nur so viel gesagt: Es werden XML, JavaScript und PHP eingesetzt.

Es gibt eventuell noch einen kleinen Stolperstein – die Einträge werden ohne Moderation freigeschaltet. Ich werde es erst mal beobachten, ob das ausgenutzt wird (z. B. durch Bots) und dann noch weiter optimieren.

Eine andere Stolperfalle kann die Anzahl der Einträge sein – auf meinem iPad dauert das Aufpoppen der Eingabebox etwas. Als Lösung könnte ich nur die letzten 25 Einträge als Figuren darstellen.

Viel Spaß beim Ausprobieren.