Inhalt

Vorheriges Thema

Seite bearbeiten

Nächstes Thema

Angabe eines Hyperlinks oder SPF-URL Aktion

Die Seitenobjekte

Es stehen zur Anreicherung einer Publikation verschiedenste Objekte unterschiedlicher Typen zur Verfügung.

Neue Seitenobjekte können über diese Werkzeugleiste im Seiteneditor erzeugt werden. Es zeigen sich mindestens folgende Grund-Funktionen/Objekttypen auf der linken Bildschirmseite.

Weiterhin erlaubt ein Plugin Konzept individuelle, speziell entwickelte Seitenobjekte einzubinden. Mehr unter Die Plugins

Direkt nach dem Öffnen einer Seite, bzw. solange noch kein Objekt angewählt ist, werden auf der rechten Bildschirmseite nur die   Eigenschaften der Seite angezeigt.

../_images/page-edit-toolbar.png

Sobald ein Werkzeug mit einem Klick angewählt oder das Objekt mit Drag & Drop (aus der Werkzeugleiste heraus) auf der Seite platziert wurde, werden dessen individuelle Objekteigenschaften angezeigt.

../_images/page-edit-new-empty-webview.png

Wichtiger Hinweis zu fehlenden Objektinhalten!

Sollte ein Seitenobjekt rot-gestrichelt umrahmt sein, so ist hier noch kein Inhalt zugewiesen (z.B. fehlt hier die URL). Dieses würde dazu führen, das es in der App fehlerhaft oder auch gar nicht angezeigt werden kann.

Weiterhin ist es möglich, eine “Tiefenstaffelung” aller platzierten Objekte vorzunehmen. Somit ist es möglich z.B. ein eigenes Icon über einen Hyperlink zu legen, oder eine kleine Bildgalerie über eine andere zu legen. Diese Zuordnung zu Ebenen erfolgt über die Tastenkürzel des Seiteneditors. Sie können ein Objekt entweder ganz nach vorn (shift+alt+u), ganz nach hinten (shift+alt+j), eine Ebene nach vorn (alt+u) und eine Ebene nach hinten (shift+u) bewegen. Weitere Tastenkürzel finden Sie unter Übersicht der Tastenkürzel im Seiteneditor.

Für jeden Objekt-Typ gibt es individuelle Einstellungen, die weiter unten genau beschrieben werden, sowie die nachstehenden   Allgemein - Vorgaben.

  Allgemein

Objekt-Eigenschaften Info
Name/Bezeichnung Optionaler Beschreibungstext dieses Objektes. Dieser Text wird für interne Informationszwecke, bzw. zur späteren Anzeige in der App verwendet.
Pos. Links Abstand vom linken Seitenrand in Point
Pos. Oben Abstand vom oberen Seitenrand in Point
Breite Breite des Objektes in Point
Höhe Höhe des Objektes in Point

Über diese Eingabefelder können die einzelnen Seitenobjekte “point”-genau platziert bzw. in der Größe angepasst werden. Parallel dazu kann hier natürlich mit Drag & Drop gearbeitet werden.

Sehr hilfreich sind auch die Tastenkürzel zur Manipulation des Objektes. Eine Zusammenfassung finden sie unter Übersicht der Tastenkürzel im Seiteneditor.

Die Eingabe der Koordinaten erfolgt hier in “Point”. Dieses ist eine Bezugs-Maßeinheit um die Koordinatensysteme der Geräte, PDF-Seiteninhalt und der verschiedenen platzierten Medien in Übereinstimmung zu bringen. Dadurch wird eine korrekte Anzeige auf verschiedensten Geräten ermöglicht. Mehr hierzu unter Generelle Hinweise zu Koordinatensystem und Maßeinheiten.

  Browser

Zur Anzeige von Online-Webinhalten kann ein Browser-Seitenobjekt (wie ein eigenständiges Safari-Browserfenster) an beliebigen Stellen und in beliebiger Größe auf einer Seite platziert werden.

Der Inhalt der angegeben URL wird innerhalb dieses Rahmen “live” angzeigt.

../_images/page-edit-webview.png
Objekt-Eigenschaften Info
URL Die URL die beim Klick auf dieses Objekt innerhalb der Seite angezeigt werden soll. Hier z.B. “http://www.leafled.de/testen
Inhalte mit Seite zoomen   Inhalte werden beim Zoomen mit der Seite vergrößert. Die Anzeige kann hierdurch unscharf werden. Bitte achten Sie hier auf korrekte CSS-Styles und Bildauflösungen.
Inhalte an Rahmen anpassen   Web-Layouts werden in die Browser-Rahmen eingepasst, egal in welcher Größe diese Objekte ursprünglich angelegt wurden. Bitte beachten Sie das eine korrekte Ansicht immer abhängig von den eingesetzten HTML Elementen und CSS Style-Sheets ist und wir keine Gewähr für eine korrekte Anzeige übernehmen können.
Hintergrund transparent   Der Hintergrund dieses Objektes wird transparent durchscheinend geschaltet. Dieses erlaubt zusätzliche optische und gestalterische Effekte. Das Aktivieren dieser Option kann zu merklichen Leistungsverlusten innerhalb der App-Anzeige führen.

In dem Objektrahmen wird der über die URL angegebene Webseiteninhalt angezeigt. Abhängig von den weiteren Parametereinstellungen erfolgt Anzeige innerhalb der Publikationsseite. Es werden keine Browser-Navigationselemente eingeblendet.

Da Seiteninhalte gezoomt/vergrößert angezeigt werden können, müssen hier auch die richtigen Einstellungen für Inhalte mit Seite zoomen und Inhalte an Rahmen anpassen gewählt werden.

Auch die unterschiedlichen Bildschirmgrößen und Auflösungen der Endgeräte (iPhone, iPad, Retina) haben Auswirkungen auf die korrekte Darstellung. Weiterhin kann das Scroll- und Zoomverhalten innerhalb des Objektrahmens über Parameter in den eingebetteten HTML Seiten gesteuert werden.

Ist das Gerät offline, so bleibt die Anzeige im Rahmen leer.

  Anker

Anker-Objekte erlauben es Ihnen, verschiedene Bereiche einer Seite zu markieren.

Leser können dann mit einem Doppel-Tap mit maximaler Vergrößerung in diese Stelle hineinzoomen.

../_images/page-edit-anchor.png

Später können die Anker dazu benutzt werden, um via Hyperlink, genau zu diesem Rechteck auf der Seite einer Publikation zu springen.

  Bildergalerie

../_images/page-edit-gallery.png
Bildergalerie-Eigenschaften Info
Richtung Die Animation für den Bildwechsel kann entweder vertikal oder horizontal durchgeführt werden.
Dia-Modus Wird hier ein Wert (in Sekunden) angegeben, so erfolgt ein automatisches Abspielen der zugewiesenen Bilder als Diashow. Der angegebene Wert ist die Anzeigedauer je Bild. Ein Werte von ‘0’ würde das automatische Abspielen deaktivieren.
Transparenter Hintergrund Wenn transparente PNG Dateien verwendet werden, dann bleibt der Hintergrund (PDF-Inhalt und andere Objekte), an den transparenten Bildstellen sichtbar.

Bildliste bearbeiten

Über das PopUp-Menu Bilder: lassen sich entweder einzelne Bilder oder ganze Gruppen aus der Medienverwaltung zur aktuellen Galerie hinzufügen. Hier stehen JPG oder PNG Bilder zur Verfügung.

../_images/page-edit-gallery-images.png

  Löscht einzelne Bilder aus der Liste

Mit Drag & Drop können Sie die Reihenfolge der Bilder - und damit die Abspiel-Reihenfolge - bestimmen.

Wichtiger Hinweis zu Bildgröße!

Es ist empfehlenswert die einzelnen Bilder ungefähr auf die Breite und Höhe des platzierten Galerieobjektes herunterzurechnen um unnötige Ladezeiten, Speicherplatzprobleme und Anzeigeverzögerungen zu vermeiden.

  Video

../_images/page-edit-video.png
Video-Eigenschaften Info
Quelle Über ein PopUp-Menu kann eine Videodatei aus der Medienverwaltung zugeordnet werden.
Automatisch abspielen   Das Video wird beim Blättern auf die Seite direkt abgespielt.
Automatisch wiederholen   Das Video wird bis zum Verlassen der Seite endlos wiederholt. (z.B. für Animationen die so als Endlosfilm angezeigt werden)
Im Vollbildmodus abspielen   Das Video wird auf dem Geräte bildschirmfüllend abgespielt.
Steuerelemente zeigen   Es wird das Kontrollpanel im Videorahmen gezeigt um eine Bedienung (Start/Stop) zu erlauben.
Hintergrund abdunkeln   Das Videorechteck wird abgedunkelt hinterlegt um ggfs. Dokumenteninhalte im Hintergrund abzudecken.

Über das PopUp-Menu Quelle können Sie das gewünschte Video aus der Medienverwaltung zuweisen:

../_images/page-edit-video-source.png

Über die weiteren Einstellungen wird das Abspielverhalten auf dem Gerät definiert. Ist ein Videorahmen zu klein gewählt, so wird das Video im Vollbildmodus abgespielt.

  Audio

../_images/page-edit-audio.png
Audio-Eigenschaften Info
Quelle Über ein PopUp-Menu kann eine Audiodatei aus der Medienverwaltung zugeordnet werden.
Automatisch abspielen   Das Audio wird beim Blättern auf die Seite direkt abgespielt.
Automatisch wiederholen   Das Audio wird bis zum Verlassen der Seite endlos wiederholt. (z.B. Für Hintergrundmusik oder spezielle Effekte wie “tick-tack.mp3”)

Über das PopUp-Menu Quelle können Sie die gewünschte Audiodatei aus der Medienverwaltung zuweisen:

../_images/page-edit-audio-source.png

Über die weiteren Einstellungen wird das Abspielverhalten auf dem Gerät definiert.

  Bildobjekt

Über diesen Objekttyp können zusätzliche Bild-Dateien (PNG oder JPG) auf einer Seite platziert werden.

Diese Bildelemente werden auf einer Ebene oberhalb des PDF Hintergrundes angezeigt.

../_images/page-edit-picture.png

Ein Bildobjekt kann einfach über das PopUp-Menu Bildquelle: aus der Medienverwaltung auswählt werden. Es wird in den Rahmen eingepasst auf der Seite platziert.

../_images/page-edit-picture-choose.png

Diese Bildobjekte sind für die normalen Gesten (Tap, Wischen, etc.) nicht erreichbar! Sie können daher sogar als Bild-Overlays über zusätzlich platzierte Hyperlinks angebracht werden, um dem Leser eine mögliche Interaktivität anzuzeigen.

Die zugewiesenen Bilder werden immer in den Objektrahmen eingepasst. Die Einpassung erfolgt immer proportional, d.h. das ggfs. überstehende Teile werden für die Anzeige in der App abgeschnitten.

  HTML

Ähnlich wie in einem Browser-Objekt, können mit einem HTML-Objekt HTML/Javascript/CSS Inhalte auf einer Seite eingeblendet und ausgeführt werden.

Bei einem HTML können jedoch alle Inhalte und benötigten Resourcen direkt in die Publikation eingebettet werden, so dass die Inhalte auch Offline zur Verfügung stehen.

../_images/page-edit-webkit.png

Um ein HTML-Objekt platzieren zu können, muß vorher ein entsprechend vorbereitetes Paket in die Medienverwaltung hochgeladen werden (siehe Medienverwaltung). Das HTML PopUp-Menu erlaubt dann die Zuweisung des gewünschten Paketes.

../_images/page-edit-webkit-source.png

Über Index-Datei kann die innerhalb des Paketes aufzurufende HTML-Datei angegeben werden.

../_images/page-edit-webkit-index.png

Zusätzlich ist eine Parameterübergabe über diese URL möglich. Gibt man z.B. “crossword.html?solution=leafled&quality=best” an, so würde die “crossword.html” geöffnet und die Parameter “solution” mit dem Wert “leafled” und der Parameter “quality” mit dem Wert “best” an das HTML-Objekt übergeben werden.

Objekt-Eigenschaften Info
HTML Ein aus der Medienverwaltung bereitgestelltes HTML-Objekt
Index-Datei Eine erweiterte URL (inklusive Parameterstring). Ist hier nichts angegeben, so wird versucht eine in dem Paket eingebettete “index.html” anzuzeigen.
Inhalte mit Seite zoomen   Inhalte werden beim Zoomen mit der Seite vergrößert. Die Anzeige kann hierdurch unscharf werden.
Inhalte an Rahmen anpassen   Web-Layouts werden in die Objekt-Rahmen eingepasst, egal in welcher Größe diese Objekte ursprünglich angelegt wurden. Bitte beachten Sie das eine korrekte Ansicht immer abhängig von den eingesetzten HTML Elementen und CSS Style-Sheets ist und wir keine Gewähr für eine korrekte Anzeige übernehmen können.
Hintergrund transparent   Der Hintergrund dieses Objektes wird transparent durchscheinend geschaltet. Dieses erlaubt zusätzliche optische und gestalterische Effekte. Das Aktivieren dieser Option kann zu merklichen Leistungsverlusten innerhalb der App-Anzeige führen.

Dadurch das der volle Leistungsumfang von HTML5/CSS/Javascript und eines modernen Browsers zur Verfügung stehen, kann hierdurch jede erdenkliche Anwendung bzw. Interaktivität in eine Publikation eingebaut werden.

Detaillierte Information zu HTML-Objekten, Plugins und zur Einbettung von HTML/Online-Inhalten finden Sie unter HTML-Objekte, Die Plugins und Generelle Hinweise zum Anzeigen und Einbetten von Webinhalten.

  Plugins

Die Plugins erlauben das Einbetten von kleinen HTML-Anwendungen (erweiterte HTML-Objekte) auf Publikations-Seiten.

Die zusätzlich geladenen Plugins werden unten an die Werkzeugleiste angefügt.

In diesem Beipiel zeigen wir ein HTML Text-Plugin, welches es z.B. ermöglicht, beliebige auch dynamisch berechnete und formatierte HTML Inhalte, auf einer Seite zu platzieren.

../_images/page-edit-plugin-html_text.png
Objekt-Eigenschaften Info
HTML Text - Einstellungen   Konfigurieren... Button öffnet den individuellen Konfigurations-Dialog für jedes Plugin (hier HTML Text)
Inhalte mit Seite zoomen   Inhalte werden beim Zoomen mit der Seite vergrößert.
Vollbildmodus aktivieren   Leser können das Objekt beim Berühren auf Bildschirmgröße vergrößern. Der Plugin-Inhalt ist im Objektrahmen aktiv, aber eine Interaktion mit dem Plugin kann erst mit Tap auf das Objekt ausgeführt werden. Als Arbeitsfläche für das Plugin steht dann immer die volle Bildschirmgrösse zur Verfügung. Bitte beachten Sie das ein “responsives” Verhalten innerhalb des HTML-Contents dafür implementiert sein muß.
Inhalte an Rahmen anpassen   Plugin-Inhalte werden in den Objekt-Rahmen eingepasst. Bitte beachten Sie das eine korrekte Ansicht immer abhängig von den eingesetzten HTML Elementen und CSS Style-Sheets ist und wir keine Gewähr für eine immer korrekte Anzeige übernehmen können.
Hintergrund transparent   Der Hintergrund dieses Objektes wird transparent durchscheinend geschaltet. Dieses erlaubt zusätzliche optische und gestalterische Effekte.

Plugin konfigurieren

Über den Button   Konfigurieren... öffnet sich ein individueller Konfigurationsdialog für dieses Plugin. Hierüber können alle notwendigen Einstellungen vorgenommen werden.

../_images/page-edit-plugin-html_text-konfig.png

Im Normalfall hat ein Plugin einen Speichern und einen Abbrechen Button um die aktuellen Eingaben zu sichern oder zu verwerfen. Beide Aktionen schließen den Konfigurations-Dialog. Ein Klick neben den Dialog hat die gleiche Funktion wie Abbrechen.

Ein Konfigurationsdialog kann auch umfangreichere Einstellungsmöglichkeiten haben und sogar Vorschaufunktionen anbieten.

../_images/page-edit-plugin-flightboard-konfig.png

Medienliste bearbeiten

Je nach Implementation, kann ein Plugin die Zuweisung einer individuellen Medienliste für jede Objektplatzierung erlauben.

Über das PopUp-Menu Medien: lassen sich dann entweder einzelne Bilder oder ganze Gruppen aus der Medienverwaltung zum aktuellen Plugin hinzufügen. Diese Medien stehen dann innerhalb des Plugins über die entsprechende __medias_XXXXXX.json zur Verfügung. In diesem Beispiel wurde als Medienfilter der Typ image angegeben, daher sind andere Dateitypen ausgegraut.

../_images/page-edit-picture-choose.png

In der Liste der zugewiesenen Medien, können Sie jetzt mit Drag & Drop die Reihenfolge der Medien für die Verwendung bestimmen.

../_images/page-edit-plugin-medialist.png

  Löscht einzelne Medien aus der Liste

Ausführliche Informationen zu den Plugins und den technischen Rahmenbedingungen, finden Sie unter Die Plugins und Generelle Hinweise zum Anzeigen und Einbetten von Webinhalten.

Wichtiger Hinweis!

Der gesamte Funktionsumfang der Plugins unterliegt der Implementation und Verantwortung des Entwicklers bzw. Lieferanten!