pinw: Bildergeschichte als PinwandNach mehreren Jahren ist die bisherige Darstellung schon ein wenig Internet-historisch. Neue Standards haben sich entwickelt, die Bildschirme sind größer und das Netz schneller geworden. Die Website muss „fluffiger” werden.
Ich probierte eine pseudo-zufällige Verteilung der Bilder auf dem Bildschirm. Das war es! So ist die „Pinwand”-Darstellung (pinw) entstanden mit den Quell-Dateien pinw.xslt, pinw.js (Quelltext), pinw.css (Quelltext) und pinw.stub. Die Darstellung ist für einen großen Bildschirm (4k oder mehr) und ein schnelles Netz gedacht.
In der Pinwand-Darstellung wende ich einige neue Ideen an: die pseudo-zufällige Anordnung der Bilder, den Hilfemodus. die zentrale Seite für Einstellungen, das Laden von Bildern „im Hintergrund” und die „Likes”, eine zentrale Liste von Verweisen zu anderen Darstellungen und zentralen Inhalten der Website (/h/ln/l.xhtml, Datei l.xhtml.de).
Ich habe auch weiterhin keine Möglichkeit festzustellen, ob eine Besucherin der Website mit der Schaltfläche „Gefällt mir"” eine Nachricht an eine Freundin sendet. Grundsätzlich will ich Platzhalter für sprachabhängige Texte in der XSLT-Datei vermeiden. Deshalb verwende ich viele Symbole anstelle von Texten. Die Texte zur „Gefällt mir”-Nachricht aber ersetzen Platzhalter gleich bei der Anzeige der Bildergeschichte. So erfolgt bei einem Klick auf die Schaltfläche für eine „Gefällt mir”-Nachricht keine Anfrage an den Server. Das ist mir wichtig.
In dieser Darstellung verwende ich erstmals Klangsignale. Die Klangdateien finden sich unter /snd/. Klangsignale sind meist überflüssig wie das Quietschen der Räder des Einkaufswagens im Webshop, aber hier können sie als Bestätigung eines „Likes” sinnvoll sein. Klangsignale sind zunächst abgeschaltet, aber dier Surferin kann sie einstellen.NAME.ogg
Im Hilfemodus werden vor fast allen und nach vielen Benutzereingaben Hilfetexte angezeigt. Diese Hilfetexte werden von der URL /h/pinw/h.xhtml (pinw_help.xhtml.de) geladen, wenn der Hilfemodus zum ersten Mal aktiviert wird.
Neben den Hilfemodus-Texten gibt es Hilfetexte zu Tasteneingaben, die bei der ersten Anforderung von der URL /h/pinw/k.xhtml (pinw_keys.xhtml.de) geladen werden.
Leider habe ich es versäumt, den IDs der Hilfetexte ein Präfix zu geben, das sie als Hilfetexte kennzeichnet. Die Transformation pinw_help_keys.xslt zeigt eine Liste der IDs, die in den Hilfedateien verwendet werden. Die Transformation attrvals_pinw_xslt.xslt zeigt Attribut-Werte aus der Datei pinw.xslt.
Lokale Einstellungen (localStorage oder sessionStorage) zur Website können zentral (/sto/s.xhtml) eingegeben, angesehen und geändert werden. Die Quelltexte sind store.xhtml.de, store.js (Quelltext) und store.css. Die Transformation storage_keys.xslt liefert eine Liste von IDs, die in /sto/s.xhtml verwendet werden.
Der URL einer Bildergeschichte kann einen Fragment-Bezeichner („Hash”) enthalten. Die interpretierten Fragment-Bezeichner sind:
#sSECT,#s10Führt zur Pinwand zum Abschnitt mit der Nummer SECT.
#sSECT_IMGID_IMGPOS ,#s10_36jsyg34_4Führt zum Abschnitt Nummer SECT und von dort zur Diaschau mit dem Bild IMGID.
#rndimgshowFührt zur Übersichtspinwand.
#rndimgshow_sSECT,#rndimgshow_s10Führt zur Übersichtspinwand und von dort zur Diaschau mit dem ersten Bild des Abschnitt Nummer SECT.
Die ECMAscript-Datei pinw.js (Quelltext) ist umfangreicher als die ECMAscript-Dateien zu den bisherigen Darstellungen. Das Perl-Skript docframe_js.pl (Quelltext) erstellt in Verbindung mit docframe_db.xslt einen Rahmen für die Dokumentation (s. http://herbaer.de/xmlns/20200620/docframejs/, docframejs.rng).
Die ECMAscript-Datei pinw.js (Quelltext) enthält Codezeilen, die nur zur Veranschaulichung der Verteilung der Pinwandzettel dienen. Das Perl-Skript js_conditional.pl (Quelltext) entfernt „bedingten” Code aus einer ECMAscript-Datei.
Das Bash-Skript pinw_setup (Quelltext) installiert die Pinwand-Darstellung.
Der Pfad des Installations-Ziel von .htaccess-Dateien, XHTML-Dateien und einigen XSLT-Dateien wird im Kopf der Datei angegeben in einer „Verarbeitungsanweisung” der Form <?install location = ". Das Skript ZIELPFAD"?>pival.pl (Quelltext) gibt den ZIELPFAD aus.
Das Skript get_data.pl (Quelltext) liest vertrauliche Daten aus der Geheimnis-Datei.
Dadurch, das automatisch alle Bilder geladen werden, kommt es möglicherweise zu einem „Verkehrsstau” auf den Daten-Straßen.
Die bisherige Auflösung der Bilder ist nicht mehr zeitgemäß. Eine höhere Auflösung (1600 Pixel Seitenlängen) erfordert vorab weitere Bildbearbeitung, die verhindert, dass die Bilddateien zu groß werden. Das Vorab-Laden der Bilder in hoher Auflösung ist fragwürdig, zumindest muss es ein- und auszuschalten sein.