mobile.xsltXHTML-Darstellung einer "Bildgeschichte" für Smartfons2014-08-25HerbertSchiemannh.schiemann@herbaer.de
Smartfone erfordern eine einfache Darstellung.
Alle anderen Anwender-Eingaben als die Auswahl („Click”) sind
umständlich. Deshalb vermeide ich sie.
Anpassungen an eine geänderte Fenstergröße sind nicht nötig und nicht nützlich.
Die Darstellung nutzt die Fläche, die das Smartfon-System zur Verfügung stellt.
Der Anwender kann durch „Spreizen” die Anzeige vergrößern,
aber das ändert nicht die Zahl der „logischen” Pixel, nur die Ansicht.
Der Mobil-Browser sendet kein Ereignis „Resize”.
Die Anzeigefläche ist klein.
Deshalb muss sich die Anzeige auf das Wesentliche beschränken:
Zu jedem Abschnitt wird der Text angezeigt,
darunter Vorschaubilder.
Die Vorschaubilder sind Verweise zu den „großen” Bildern.
Statt der Liste der Abschnitte zeige ich einen zusätzlichen Abschnitt
"Übersicht".
Dieser Abschnitt enhält Verweise auf andere Abschnitte.
Der Hintergrund der Verweise ist die Vorschau des ersten Bildes des "Ziel"-Abschnitts.
Ich gehe davon aus, dass eine Klangwiedergabe möglich ist.
Diese Transformation wird durch die Dateien
mobile.js und
mobile.css ergänzt.
Die Datei
mobile.stub verknüpft eine Bildergeschichte
mit dieser Darstellung.
Die Darstellung nutzt die folgenden ID-Werte:
audio
Das audio-Element.
d_links
Der Abschnitt mit Verweisen unterhalb des Titels.
audiolnk
Der „Schalter” für die Klangwiedergabe.
qv
Die "Übersicht":
Abschnitt mit Verweisen auf die Abschnitte mit Bildern.
Jeder Verweis enthält die Vorschau des ersten Bildes des Abschnitts
als Hintergrundbild.
sNN
Die ID des NN-ten Abschnitts
(section-Elements).
NN steht für eine ein- oder mehrstellige
Dezimalzahl
Die Darstellung nutzt die folgenden Werte des Attributs
@class:
paused
Der Schalter für die Klangwiedergabe ist mit diesem Wert markiert,
während die Klangwiedergabe nicht läuft.
playing
Während die Klangwiedergabe läuft,
setzt Javascript (Datei imgshow_mod.js)
das Attribut @class des Schalters auf diesen Wert.
sectlink
Wenn das Attribut
span/@class
mit dem Wort sectlink beginnt,
kennzeichnet es einen Verweis auf einen Abschnitt der Bildergeschichte.
inactive
Der Wert des Attributs section/@class
steuert die Darstellung des Abschnitts.
active
Der Wert des Attributs section/@class
wird durch Javascript (mobile.js)
zwischen inactive und active
umgeschaltet.
Präfix des Pfades von JavaScript- und CSS-Dateien
Wurzelelement der Bildergeschichte
Sprache ohne weitere Spezifikation
de
So merkt auch Chromium, dass die Ausgabe utf-8-kodiert ist.
HTML-Rahmen: Kopfstylesheeticon
onload = function () { initialize (); };audioauto
