smdesk.xslt XHTML-Darstellung einer Sitemap (Bilder) für Desktop-Computer 2014-02-18 Herbert Schiemann h.schiemann@herbaer.de
Attribute im erzeugten XHTML-Dokument Das erzeugte XHTML-Dokument enthält fünf Abschnitte (body/div-Elemente): Die Übersicht (div_main), das Einzelbild (div_img), "Klappfenster" "Einstellung" (set_frame), "Info" (about_frame) und "Befehle" (help_frame) und das "Hilfe-Fragezeichen" (btn_help). Die Übersicht enthält unter der Überschrift zwei Abschnitte: eine Übersicht über eine ausgewählte Bildergeschichte (ID div_details) und eine Übersicht über die Bildergeschichten (ID div_urls). Die ID-Werte sind: div_main Der Hauptabschnitt mit der Überschrift und den Übersichten. div_details Der Vorschaubilder-Abschnitt, ein Unterabschnitt des Hauptabschnitts (ID div_main). Er enthält zu jeder Bildergeschichte einen Unterabschnitt mit den repräsentierenden Bildern. Mittels Javascript und CSS-Regeln wird nur der Abschnitt zu einer ausgewählten Bildergeschichte angezeigt. det_SNR Die Bildergeschichten werden nummeriert. SNR steht für die Nummer einer Bildergeschichte. det_SNR ist die ID des Unterabschnitts (div-Element) von div_details zu der Bildergeschichte. Der Unterabschnitt enthält repräsentative Bilder der Bildergeschichte und Verweise auf die Bildergeschichte und deren Galerie-Ansicht. div_urls Ein Unterabschnitt des Hauptabschnitts (ID div_main). Er enthält zu jeder Bildergeschichte einen Eintrag. sto_SNR Die Übersicht über die Bildergeschichten (ID div_urls) enthält zu einer Bildergeschichte an der Position (lfd. Nummer) SNR einen Unterabschnitt mit der ID sto_SNR. but_SNR Der Abschnitt mit der ID sto_SNR enthält einen Knopf mit der ID but_SNR. Ein Klick auf diesen Knopf führt dazu, dass der Abschnitt mit der ID div_SNR angezeigt wird. div_img Das Feld (der Rahmen) des Einzelbildes. Es wird immer nur entweder der Hauptabschnitt oder das Einzelbild angezeigt. img_main Das Einzelbild. Die Quelle (Attribut src) wird durch Javascript gesetzt. set_frame Popup-Fenster "Einstellung". Das Dokument übernimmt die Einstellungen zum Bildlauf und zur Bilddarstellung, die zu einer Bildergeschichte gespeichert sind. Die hier vorgenommenen Änderungen werden nicht gespeichert. Die Eingabeelemente mit gleicher Funktion hier in der Sitemap und in einer Bildergeschichte müssen die selben ID-Werte haben. Dann werden die gespeicherten Einstellungen aus der Bildergeschichte hier übernommen. sel_imagesize Auswahlfeld "Bildgröße" zur Auswahl eines Verzeichnisses. Verschiedene Verzeichnisse enthalten die Bilder unter dem gleichen Dateienamen in verschiedenen Qualitäten. sel_view Auswahlfeld "Bilddarstellung" mit Optionen zur Anpassung der angezeigten Größe an das Bildfeld. sel_imgframe Auswahlfeld "Bildrahmen" mit Optionen zum Hintergrund (Bildrahmen). sel_sequence Auswahlfeld "Bildlauf": Optionen zur Reihenfolge der Bilder beim automatischen Bildwechsel. sel_duration Zahleingabefeld "Anzeigedauer": Wie lange soll ein Bild beim automatischen Bildlauf angezeigt werden? inp_start Die Schaltfläche "Start" (oder "Stop") im Fenster "Einstellung" startet oder beendet den automatischen Bildlauf und schließt das Fenster "Einstellung". about_frame Das Info-Fenster nennt die Menschen hinter der Website. help_frame Das Klappfenster "Befehle" zeigt die möglichen Tastatureingaben zur Steuerung der Anzeige und zur Navigation an. btn_help Das "Hilfe-Fragezeichen" Das erzeugte XHTML-Dokument verwendet die folgenden Wörter in class-Attributen: shown Kennzeichnet einen sichtbaren Abschnitt (div-Element), Gegensatz zu hidden. Der Hauptabschnitt (ID div_main) ist anfangs so gekennzeichnet. hidden Kennzeichnet einen verborgenen Abschnitt (div-Element), Gegensatz zu shown. Der Bildabschnitt (ID div_img) ist anfangs so gekennzeichnet, ebenso alle Unterabschnitte (ID det_SNR) des Vorschaubilder-Abschnitts (ID div_details). Die Wörter hidden und shown werden durch Javascript ausgetauscht. hilite Kennzeichnet in der Übersicht der Bildergeschichten (ID div_urls) den Abschnitt zu der hervorgehobenen Bildergeschichte, deren Vorschaubilder angezeigt werden (ID div_details). nohl Kennzeichnet in der Übersicht der Bildergeschichten (ID div_urls) die Abschnitte zu allen Bildergeschichten, deren Vorschaubilder nicht angezeigt werden (ID div_details). Das sind alle Bildergeschichten außer der hervorgehobenen. normal Ein Bild (img-Element) wird in seiner normalen ("natürlichen" Pixel-) Größe angezeigt. Das Wort bezeichnet die Anpassung der angezeigten Größe des Bildes an den enthaltenden Abschnitt (div-Element als Rahmen). Die anderen möglichen Wörter an Stelle von normal sind fullwidth und fullheight. popup Ein div-Element als Klappfenster: hier die div-Elemente mit den IDs set_frame (Einstellung), about_frame (Info-Fenster) und help_frame (Befehle). popinact Ein nicht aktives (verborgenes) Klappfenster (div-Element). popact Ein aktives (sichtbares) Klappfenster (div-Element). Die Wörter popinact und popact werden durch Javascript ausgetauscht. close Ein Knopf, der ein Klappfenster schließt, hier der Knopfe "Start" im Fenster "Einstellung" inlimg Ein div-Element, dessen Hintergrund ein Vorschaubild zeigt. transparent Dieses Wort wird durch Javascript zum Bildrahmen (div_img) gesetzt. Es bestimmt den Bildhintergrund. Der Wert wird nicht direkt, sondern durch Javascript gesetzt. Andere mögliche Werte an Stelle von transparent sind grey und black. grey Dieses Wort wird durch Javascript zum Bildrahmen (div_img) gesetzt. Es bestimmt den Bildhintergrund. Der Wert wird nicht direkt, sondern durch Javascript gesetzt. Andere mögliche Werte an Stelle von grey sind transparent und black. black Dieses Wort wird durch Javascript zum Bildrahmen (div_img) gesetzt. Es bestimmt den Bildhintergrund. Der Wert wird nicht direkt, sondern durch Javascript gesetzt. Andere mögliche Werte an Stelle von black sind transparent und grey.
Die folgenden beiden Parameter dienen dazu, aus der URL einer Bildergeschichte deren Kennung herauszufiltern. Zuerst wird die Zeichenfolge nach der Kennung geesucht: Danach wird die Zeichenfolge vor der Kennung gesucht: In einer URL eines Bildes folgt nach dieser Zeichenkette der Dateiname des Bilddatei. Lokalisierung abhängig von der Einstellung des Browsers Wurzel Der HTML-Rahmen. Ein Mausklick auf ein span-Elementen mit dem Attribut class = btn wirkt wie das Drücken der Taste mit dem Tastencode, den das Attribut data-code angibt. <xsl:value-of select="$title"/> style/shortcut_icon.png stylesheet style/smdesk.css style/common.js style/smdesk.js onload = function () { initialize (); };

?
Eintrag zu einem Dokument
Vorschau

▤▥
Die repräsentierenden Bilder zu einer Bildergeschichte Ein Bild: Mit Hintergrundbildern wird das Dokument schneller angezeigt als mit img-Elementen