desktop.xsltXHTML-Darstellung einer "Bildergeschichte" für Desktop-Geräte2013-06-18HerbertSchiemannh.schiemann@herbaer.deSchiebeleisten
Eine "Schiebeleiste" ist ein rechteckiger Bereich (Inhaltsbereich),
der für die vollständige Anzeige zu hoch sein kann.
Man kann sich vorstellen, dass über dem Bereich ein Sichtfenster liegt,
durch das ein Ausschnitt des darunter liegenden Bereichs sichtbar ist.
Das Sichtfenster und der Inhaltsbereich sind gleich breit.
Wenn das Sichtfenster höher ist als der Inhaltsbereich,
dann wird der Inhaltsbereich in das Sichtfenster eingepaßt.
Er kann im Sichtfenster gestreckt und zentriert oder am oberen Rand
angeordnet werden.
In den meisten Fällen ist aber der Inhaltsbereich wahrscheinlich
höher als das Sichtfenster.
Oberhalb und unterhalb des Sichtfensters werden dann "Bewegungs-Schaltflächen"
angezeigt. Wenn der Mauszeiger auf die obere Schaltfläche zeigt,
dann wird der Inhaltsbereich "unter dem Sichtfenster" nach unten verschoben,
bis die obere Kante des Inhaltsbereichs und des Sichtfensters zusammenfallen.
Wenn der Mauszeiger auf die untere Schaltfläche zeigt,
dann wird der Inhaltsbereich unter dem Sichtfenster nach oben verschoben,
bis die Unterkanten des Inhaltsbereichs und des Sichtfensters zusammenfallen.
Ein Mausklick auf eine Schaltfläche hält die Bewegung des Inhaltsbereichs an
und startet sie wieder.
Ein Doppelklick auf eine Schaltfläche zeigt den oberen oder den unteren Rand
des Inhaltsbereichs an.
Die genannten rechteckigen Bereiche
(Inhaltsbereich, Sichtfenster und die beiden Bewegungs-Schaltflächen)
bilden zusammen einen umfassenden Bereich.
Eine Schiebeleiste ist somit eine Gruppe von fünf Bereichen.
Jeder Bereich entspricht einem HTML-Element mit einem
id-Attribut.
Die id-Werte sind zusammengesetzt
aus einem Präfix, das die Gruppe bezeichnet,
und einem Suffix, das das Element innerhalb der Gruppe bezeichnet.
Durch eine Konvention sind den fünf Elemente die folgenden Suffixe
zugeordnet:
_main
Der umfassende Bereich, der die Bewegungs-Schaltflächen und das Sichtfenster und
"darunter" den Inhaltsbereich enthält.
_frame
Das Sichtfenster.
Zusammen mit den Bewegungs-Schaltflächen füllt es den umfassenden Bereich aus.
_up
Die obere Bewegungs-Schaltfläche
_down
Die untere Bewegungs-Schaltfläche
_content
Der Inhaltsbereich.
Er ist als HTML-Element im Sichtfenster enthalten.
In einer Schiebeleiste wirken die Dokument-Struktur,
Cascading Stylesheets und JavaScript zusammen.
Die Bewegungs-Schaltflächen sind durch das Wort "mover"
im Attribut class gekennzeichnet.
Sie können aktiv oder inaktiv sein. Eine aktive Schaltfläche hat das Wort
"active" im Attribut class,
ein inaktive Schaltfläche das Wort "inactive".
Der anfängliche Zustand ist inaktiv.
Hier werden zwei Schiebeleisten verwendet:
die Abschnittsliste, Präfix ix_,
mit Verweisen auf die einzelnen Inhalts-Abschnitte
und die Leiste der Vorschaubilder, Präfix sl_.
Popup
Ein "Popup" kombiniert mehrere Elemente,
die ähnlich wie die Schiebeleisten durch ein gemeinsames Präfix
der id-Werte miteinander verbunden sind.
Die Suffixe sind:
_link
Bezeichnet den Knopf, der das eigentliche "Popup"-Fenster öffnet (anzeigt).
_frame
Das "Popup"-Element, das angezeigt wird, wenn der Anwender den Knopf drückt.
_close
Der Knopf, der das Popup-Fenster schließt (verbirgt).
Es ist möglich, dass derselbe Knopf ein Popup-Fenster öffnet und schließt.
Ich gehe hier von dem folgenden Anwendungsmuster aus:
Der Öffner (Schaltknopf _link) ist anfangs aktiv,
das Popup-Fenster wird nicht angezeigt. Beim Drücken des Öffners wird
das Popup-Fenster aktiv und der Öffner selbst inaktiv. Der Schließknopf
ist ein Teil des Popup-Fensters.
Bei einem Klick auf den Schließknopf
wird das Popup-Fenster inaktiv und der Öffner wieder aktiv.
Die class - Wörter
popact und
popinact zeigen den Zustand der Popup-Elemente
an. Weitere class - Wörter bezeichnen
die Funktion eines Popup-Elements (Öffner, Popup-Fenster, Schließer).
popact
Dieses Wort im Wert des Attributs class
kennzeichnet einen "Öffner" oder ein Popup-Fenster als aktiv.
Von einem "Popup" ist entweder der Öffner oder das Popup-Fenster aktiv.
popinact
Kennzeichnet einen Popup-Öffner oder ein Popup-Fenster als inaktiv.
popup
Kennzeichnet ein Popup-Fenster.
close
Kennzeichnet einen Schließknopf eines Popups.
Der "Schließen"-Knopf wird als Teil des Popup-Fensters
nicht zwischen "aktiv" und "inaktiv" umgeschaltet.
Hier verwende ich drei Popups:
set
Das Präfix set bezeichnet ein Popup, in dem der Anwender
Einstellungen vornehmen kann.
about
Das Präfix about bezeichnet ein Popup
mit Information über die Verantworlichen für die Website.
help
Das Präfix help bezeichnet ein Popup
mit einer kurzen Hilfe zu Tasten-Befehlen.
Attribute im erzeugten XHTML-Dokument
In der folgenden Liste steht der Platzhalter [section]
für die Kennung eines is:section - Elements
im Format s9+, wobei 9+ für die laufende Nummer des Abschnitts steht.
[jpg] steht für die Kennung eines
is:jpg - Elements,
den Bilddateinamen ohne die Endung .jpg.
Das erzeugte XHTML-Dokument verwendet die folgenden
id-Attribute:
audio
Das audio-Element zur Klangwiedergabe.
headerLeerer Abschnitt, Kopf der Seiteix_mainAbschnittsliste (eine Schiebeleiste)ix_up
Die obere Bewegungs-Schaltfläche der Abschnittsliste zur Bewegung nach oben
ix_frameDas Sichtfenster der Abschnittslisteix_contentDer Inhaltsbereich der Abschnittslisteix_down
Die untere Bewegungs-Schaltfläche der Abschnittsliste zur Bewegung nach unten
li_[section]
Der Eintrag zum Abschnitt [section]
in der Abschnittsliste.
sl_mainLeiste der Vorschaubilder (eine Schiebeleiste)sl_upDie obere Bewegungs-Schaltfläche der Vorschaubildersl_frameDas Sichtfenster der Vorschaubildersl_contentDer Inhaltsbereich der Vorschaubildersl_downDie untere Bewegungs-Schaltfläche der Vorschaubilderslides_[section]
Unterabschnitt der Vorschaubider
mit den Bildern zum Abschnitt [section].
div_[section]_[jpg]_[lnr]
Rahmen für das Vorschaubild mit der Datei-Kennung
(Dateiname ohne ".jpg")
[jpg].
[lnr] ist die Nummer des Bildes innerhalb
des Abschnitts, beginnend mit 0.
div_title
Die Titel-Leiste.
Sie besteht aus dem Logo (div_logo),
der Seiten-Überschrift (div_head),
dem Menüfeld (div_links)
und der Ton-Schaltfläche (div_sound).
div_headDie Seiten-Überschrift in der Titel-Leiste
Damit die voreingestellte Darstellung eines
h1-Elements mit einem oberen Rand
(margin) die "Geometrie" nicht stört,
ist das h1-Element in einem
div-Element verschachtelt.
div_logoFeld für das Logo in der Titelleistediv_linksMenüfeld mit Verweisen und "Knöpfen"views_linkDer Knopf öffnet das Fenster "Ansichten".help_linkDer Knopf öffnet das Popup-Fenster "Befehle".div_sound
Schaltfläche zum Starten und Beenden der Tonwiedergabe.
div_main
Der Haupt-Inhalt
mit dem Haupttext (ID mt_main)
oder dem Haupt-Bild (ID div_mainimg)
mt_mainDas umfassende Element für den Text der Abschnitte (Haupttext)div_mainimgAbschnitt (Rahmen) des Haupt-Bildesimg_mainDas Haupt-Bildspan_[jpg]_[lnr]Verweis auf ein Bild im Haupttextiimg_[jpg]_[lnr]Ein Inline-Bild am Ende des Haupttextesset_framePopup-Fenster "Einstellung ..."sel_imagesizeAuswahlfeld "Bildgröße" im Fenster "Einstellung ..."sel_viewAuswahlfeld "Bilddarstellung" im Fenster "Einstellung ..."sel_imgframeAuswahlfeld "Bildrahmen" im Fenster "Einstellung ..."sel_durationZahl-Eingabefeld "Anzeigedauer bei Bildlauf" im Fenster "Einstellung ..."sel_sequenceAuswahlfeld "Bildlauf" im Fenster "Einstellung ..."chk_globalMarkierungsfeld "Alle Bilder" im Fenster "Einstellung ..."inp_startSchaltfläche "Start" im Fenster "Einstellung ..."sel_slidesAuswahlfeld "Vorschaubilder" im Fenster "Einstellung ..."sel_menuAuswahlfeld "Menü" im Fenster "Einstellung ..."sel_evtsectAuswahlfeld "Abschnittwahl" im Fenster "Einstellung ..."sel_evtslAuswahlfeld "Bildwahl" im Fenster "Einstellung ..."sel_evtlinkAuswahlfeld "Verweis" im Fenster "Einstellung ..."about_frame
Info-Fenster: ein Popup-Fenster, das die Menschen hinter der Website nennt.
help_framePopup-Fenster "Befehle"views_framePopup-Fenster "Ansichten"footerLeerer Abschnitt, Fuß der Seite
Das erzeugte XHTML-Dokument verwendet neben den "Popup"-Wörtern
die folgenden Wörter in class-Attributen:
slideRahmen um ein Vorschau-Bildimglink
Verweis auf ein Bild im Text oder ein Inline-Vorschaubild
sectlink
Verweis (span-Element)
auf einen Abschnitt der Bildergeschichte.
Das zweite Wort das Attributs class
bezeichnet den Abschnitt, auf den verwiesen wird.
moverBewegungs-Schalter in der Vorschau-Leiste oder der Index-Leisteshown
Dieses Wort wird für Elemente verwendet, die ein- und ausgeblendet werden können.
shown bedeutet, dass das Element angezeigt werden soll.
paused
Dieses Wort wird für die Tonwiedergabe-Schaltfläche verwendet.
Es bedeutet, dass die Tonwiedergabe gestartet werden kann.
Javascript ersetzt paused
durch hidden, wenn der Klang (wahrscheinlich)
nicht abgespielt werden kann,
und durch playing,
wenn die Klangwiedergabe läuft.
Hier wird paused zu Anfang eingestellt.
machine
Der Wert kennzeichnet Hinweise
(div-Elemente) auf die maschinelle Übersetzung.
Jeder Abschnitt kann einen solchen Hinweis enthalten.
Von der Element-ID zum Dateipfad der Bilddatei
Wenn dieselbe Transformation mehrmals ausgeführt wird, sollten bei jedem Mal
dieselben id-Werte erzeugt werden.
Das erleichtert Verweise von "außen" auf bestimmte Elemente.
Die Funktion generate-id ist nicht geeignet.
Eine ID soll die folgenden Elemente eindeutig bezeichnen:
den Abschnitt (section im XML-Quelltext)ein Bildeinen Verweis auf ein Bild
Die Abschnitte werden einfach durchnummeriert.
Eine Kennung s[lnr] bezeichnet den Abschnitt
Nr. [lnr]: s12 bezeichnet den 12. Abschnitt.
Bilder (Bilddateien) sind durch das Attribut
jpg
/@src eindeutig
bestimmt.
Die jpg - Elemente verweisen auf eine Bilddatei.
Mehrere jpg - Elemente können auf dieselbe
Bilddatei verweisen. In der Darstellung gibt es zu einem
jpg - Element der Quelldatei einen Bildverweis im
Text und ein Vorschaubildchen, das ebenfalls auf das Bild verweist.
Es ist möglich, dass ein Abschnitt der Quelldatei kein
jpg - Element enthält.
Oft enthält der erste oder der letzte Abschnitt keinen Bildverweis.
In der Darstellung erscheint zu einem
Abschnitt ohne Bildverweis aber eine Leiste von Vorschaubildchen,
die aus jedem Abschnitt mit einem Bildverweis das erste Bild enthält.
Die id-Attribute der XHTML-Elemente,
die auf einem jpg-Element beruhen,
sind aus vier Komponenten zusammengesetzt:
Dem Namen des XHTML-Elements
(span oder div).
Der Kennung des Abschnitts in der Form
"s99".
Dabei steht 99 für die laufende Nummer des Abschnitts.
Der Kennung der Bilddatei (Dateiname ohne das Suffix .jpg)
Der laufenden Nummer des jpg-Elements
in der Quell-Datei
Die Komponenten sind durch Unterstriche ("_") verbunden.
Präfix des Pfades von JavaScript- und CSS-DateienPräfix des Pfades von Bild-Dateien
Am Ende eines Abschnittstextes, der mehr als einen Bildverweis enthält,
werden einige Vorschaubilder "inline" angezeigt.
Dieses Parameter ist die maximale Anzahl.
Wurzelelement der Bildergeschichte
Sprache ohne weitere Spezifikation
deHTML-Rahmen: Kopf
Ein Web-Browser würde möglicherweise die XHTML-Elemente title,
style und script
direkt interpretieren, deshalb der "Umweg" über
xsl:element.
stylesheeticon
var lng = "";
var prf_img = "";
var tellabout = {};
tellabout.subject = "";
tellabout.i_like = "";
onload = function () { initialize (); };
Die Anzeige besteht aus neun Abschnitten
(div-Elementen),
die direkt oder indirekt absolut positioniert werden.
Die genauen Positionen werden durch Javascript an das Anzeige-Fenster
angepasst. Die genannten Positionen sind die, die die begleitende
Javascript-Datei desktop.js in der Voreinstellung einstellt.
Die id-Attribute der Abschnitte sind:
div_title
Die Titelleiste am oberen Rand. Sie besteht aus drei Feldern:
dem "Logo" (ID div_logo),
dem Titel (ID div_head)
und dem "Menüfeld" (ID div_links).
Das Menüfeld enthält ein einziges div-Element
mit Innenabständen (padding).
So läßt sich die Höhe (height) des Menüfeldes einfacher
handhaben.
header
Der Bereich wird unterhalb des Titelleiste angezeigt,
wenn das Fenster groß genug ist.
CSS-Regeln füllen ihn mit einem Hintergrundbild.
ix_mainDie Abschnitsliste an der linken Seitesl_mainDie Vorschau-Bilder an der rechten Seitediv_main
Der Hauptinhaltsbereich:
enthält die Textabschnitte und das aktuelle Bild.
footer
Der Bereich wird am unteren Rand angezeigt,
wenn das Fenster groß genug ist.
CSS-Regeln füllen ihn mit einem Hintergrundbild.
set_framePopup-Fenster mit Optionen zur Anzeigeabout_frame
Das Info-Fenster nennt die Menschen hinter der Website.
help_frameDie Schnell-Hilfe zur Tastatur-Bedienungviews_frameDas Fenster mit Verweisen zu verschiedenen Ansichtenaudioauto