Inhalt

Vorheriges Thema

Generelle Hinweise zum Anzeigen und Einbetten von Webinhalten

Nächstes Thema

Der Leafled Plugin-Shop

Die Leafled Plugin-Galerie

Die Leafled-Plugins erlauben eine elegante und flexible Erweiterung eigener Publikationen um HTML-basierende multimediale und interaktive Funktionen.

Plugins können durch den Anwender (externe Entwickler) selber erstellt werden und über die Plugin-Struktur in Publikationsseiten eingebettet werden. Der Aufbau und die technische Funktionsweise ist unter Die Plugins ausführlich dokumentiert.

Wichtiger Hinweis!

Die in den Beispielen verwendeten Inhalte unterliegen möglicherweise besonderen Rechte- und Lizenzvorgaben. Bitte beachten Sie daher bei Einsatz in Ihren Anwendungen unbedingt diese Vorgaben.

Je nach Produkt- und Projektumfang kann ein Teil dieser Plugins auch kostenpflichtig sein!

Gerne helfen wir Ihnen im Rahmen unserer Schulungs- und Projektdienstleistung bei der Umsetzung Ihrer Anforderungen. Wir unterbreiten Ihnen für diese Produkte und Dienstleistungen gerne ein individuelles Angebot.

Übersichtsliste

Hier eine kurze Übersicht der Plugins. Die Plugin-Pakete können einfach in die Medienverwaltung einer Publikation hochgeladen werden.

Nach Upload erscheinen diese dann direkt mit eigenem Icon in der Werkzeugleiste des Seiteneditors (  Plugins).

Symbol Name/Kurzbeschreibung Download
    HTML Text - Textobjekt mit HTML Funktionen html_text.zip
    Hyperlink Icon - Hyperlink mit Animation und Text hyperlink_icon.zip
    Fade Icon - Icons Ein/Ausblenden fadeicon.zip
    Fade Image - Bild Ein/Ausblenden fadeimage.zip
    Gallery - Bildgalerie mit zusätzlichen Funktionen gallery.zip
  plugin-panorama (Beschreibung in Vorbereitung) panorama.zip
  plugin-moveicon (Beschreibung in Vorbereitung) moveicon.zip
  plugin-moveimage (Beschreibung in Vorbereitung) moveimage.zip
    Flightboard - Lauftextanzeige wie am Flughafen flightboard.zip
  plugin-360 (Beschreibung in Vorbereitung) 360.zip

Generelles

Plugins sind platzierbare Seitenobjekte, vergleichbar zu den fest eingebauten Objektypen (Browser, Anker, Hyperlink, Bild, Galerie, Audio, Video) die einfach mit dem Portal Seiteneditor auf Publikationsseiten platziert werden können.

Diese Plugins können einfache bis komplexe, multimediale und interaktive Zusatzfunktionen zu Publikationen hinzufügen. Auch können Funktionalitäten von eingebauten Objekttypen durch umfangreichere Plugins ersetzt werden (z.B. “gallery”). Plugins können ihre Funktionalitäten auch später einfacher auf anderen Plattformen (WebApp, Desktop, Android, ...) zur Verfügung stellen.

Hochgeladene Plugins zeigen sich einfach unterhalb der fest eingebauten Objekttypen in der Werkzeugleiste des Seiteneditors.

_images/plugin-pageditor-toolbar.png

Die Platzierung eines Plugins ist über einen Klick auf das zugehörige Icon (hier werden die hinterlegten Standardwerte zur Platzierung verwendet) oder über Drag&Drop des Icons auf die Seitenfläche möglich.

Da ein Plugin wie ein typisches Seitenobjekt gehandhabt wird, stehen die normalen Eigenschaften/Parameter jedes Seitenobjektes wie Bezeichnung, Pos. Links, Pos. Oben., Breite und Höhe auch hier zur Verfügung.

_images/plugin-pageditor-properties.png

Diese können per Maus- oder direkte Tastatureingaben verändert werden (siehe auch   Allgemein e-Objekteinstellungen).

Die Objekt ID: ist ein interner, eindeutiger Identifikationsstring für diese Objektplatzierung. Diese kann in Verbindung mit goTo? SPF/URL-Aktion genutzt werden.

Über   Konfigurieren können alle individuellen die Plugin-Einstellungen gewählt werden. Jedes Plugin hat hier seine individuellen Vorgaben.

_images/plugin-pageditor-config.png

Über   Medien können Medien (optional, wenn benötigt) zugewiesen werden (siehe auch Medienverwaltung).

_images/plugin-pageditor-media.png

Die weiteren Eigenschaften Inhalte mit Seite zoomen, Inhalte an Rahmen anpassen und Hintergrund transparent entsprechen den bekannten Vorgaben für HTML-Objekte (siehe hierzu   Browser-Objekteinstellungen).

Mit Vollbildmodus aktivieren können sie den Fullscreen-Modus eines Plugins (wenn unterstützt) verwenden. Dieser erlaubt die Nutzung der kompletten Bildschirmgrösse für die Anzeige von Plugin-Inhalten, statt nur auf den platzierten Seitenrahmen beschränkt zu sein. Diese Funktionalität wird z.B. für umfangreiche Suchdialoge o.ä. verwendet.

Plugins werden i.d.R. komplett in eine Publikation eingebettet und stehen somit auch Offline zur Verfügung. Eine Sicherung der Publikation incl. eingebetteter Plugins als SPF-Archiv (siehe auch Der Medien Upload) und Rücksicherung bzw. Transfer auf einen anderen Portalserver ist somit auch möglich. Abhängig von der jeweiligen Plugin-Umsetzung kann aber eine anschliessende Änderung der individuellen Plugin-Konfiguration deaktiviert sein.

Die in verschiedenen Plugin-Konfigurationsdialogen enthalten Vorschau funktioniert soll bei der Einstellung der einzelnen Parameter helfen (Timing, Farben etc.). Die Darstellung ist jedoch nicht verbindlich da sich die technischen Rahmenbedingungen bei der Anzeige auf dem Geräte i.d.R. deutlich unterscheiden. Weiterhin stehen die Gerätespezifischen Funktionen der Plugins, wie z.B. die Bridge-Funktionaliät im normalen Browser nicht zur Verfügung.

  HTML Text - Textobjekt mit HTML Funktionen

Dieses Plugin erlaubt die Einbindung eines einfachen HTML-Textobjektes auf einer Publikationsseite.

Dieses Plugin ist bewußt einfach gehalten um die prinzipielle Funktionweise und Einsetzbarkeit der Leafled Plugins in einem ersten Schritt zu verdeutlichen.

Platzierung

_images/plugin-html_text-object.png

Konfiguration

Hier ist in einem großen Formularfeld die Eingabe des gewünschten HTML-Textes möglich. Im unteren Teil erfolgt die Anzeige der Texteingabe in einer Voransicht.

_images/plugin-html_text-config.png

Geräteanzeige

Die Seite mit dem platzierten HTML-Objekt würde auf dem Gerät folgendermassen angezeigt werden.

_images/plugin-html_text-device.png

Release Notes

Version 1.7 (verfügbar seit 23.04.2014)

  • Default HTML-Vorgabetext korrigiert. Jetzt erscheint das Plugin immer direkt nach dem Platzieren mit Klick auf Icon in der Werkzeugleiste.

  Fade Icon - Icons Ein/Ausblenden

Das Fade Icon Plugin erlaubt das Ein- und Ausblenden von Standard Icons mit eigenen Zeitvorgaben und Effekten. Für das Icon kann eine eigene Farbe und eine Ziel-Transparenz definiert werden. Das Icon wird automatisch an die verfügbare Breite bzw. Höhe eingepasst.

Ist ein zusätzlicher Hyperlink hinterlegt, so wird dieser beim Tap auf das Objekte ausgeführt.

Platzierung

_images/plugin-fadeicon-object.png

Konfiguration

Mit Doppelklick auf das Hyperlink Icon Seitenobjekt bzw. über den   Konfigurieren-Button können die individuellen Einstellungen vorgenommen werden.

_images/plugin-fadeicon-config.png

Individuelle Parameter

Symbol/Icon

Über dieses PopUp-Menu kann das gewünscht Symbol für das Objekt gewählt werden. Hier stehen alle Standard-Icons aus dem Fontawesome-Font zur Verfügung (siehe auch Integrierter Vektor-Zeichensatz “Font Awesome”).

Das Icon wird auf dem Gerät automatisch in die verfügbare Höhe und Breite des platzierten “Face Icon” Seitenobjektes eingepasst.

Farbe
Die Farbauswahl für das Hyperlink Icon sowie für die aktive Fläche des Hyperlink Icon Seitenobjekts. Die Eingabe erfolgt entweder als HTML-String (z.B. “#FFEE00” - 6 stellig) oder direkt über einen Farb-Picker (Google Chrome).
Transparenz
Über die angegebenen Wert (Regler) kann die Transparenz des angezeigten Icon eingestellt werden. Je weiter nach rechts (grösser) der Transparenzwert eingestellt wird, desto “durchsichtiger” ist das Icon.
Effekt (Easing)
Über ein PopUp-Menu kann ein individueller Effekt für Anzeige der Plugin-Transparenz gewählt werden. Mehr unter Easing Cheat Sheet (DE)
Einblendezeit (ms)
Diese Vorgabe bestimmt die Dauer des Einblendeffektes. Ist keine Einblendezeit (oder “0”) angegeben, so wird das Icon sofort angezeigt.
Anzeigedauer (ms)
Diese Vorgabe bestimmt die Dauer der “normalen” Anzeige. Ist keine Anzeigedauer (oder “0”) angegeben, so wird das Icon direkt nach dem Einblenden auch wieder ausgeblendet.
Ausblendezeit (ms)
Diese Vorgabe bestimmt die Zeit mit der das Icon nach Ende der Einblendezeit und Ablauf der Anzeigedauer wieder ausgeblendet wird. Ist keine Ausblendezeit (oder “0”) angegeben, so bleibt das Icon immer eingeblendet.
SPF/URL-Aktion
An dieser Stelle kann eine Hyperlink/URL-Aktion angegeben werden (siehe auch Die SPF-Aktions-URLs). Diese Aktion ist nur bei sichtbarem Icon aktiv.

Geräteanzeige

_images/plugin-fadeicon-device.png

Als Video-Download: Fade Icon auf dem Gerät

Release Notes

Version 1.3 (verfügbar seit 21.11.2013)

  • setzt Portal Release Version von mindestens Version 3.50 voraus
  • setzt einen App Release von mindestens Version 2.2.46 voraus
  • Verfeinerung der “Fade Icon” Grundfunktionen

  Fade Image - Bild Ein/Ausblenden

Fade Image erlaubt das Ein- und Ausblenden des ersten ausgewählten Bildes aus der Medienverwaltung mit eigenen Zeitvorgaben und Effekten. Für das Bild kann eine Ziel-Transparenz definiert werden.

Ist ein zusätzlicher Hyperlink hinterlegt, so wird dieser Link beim Tap auf das Objekt, solange es noch nicht ausgeblendet ist, ausgeführt.

Die Zuweisung des gewünschten Bilder erfolgt über die Medienliste des Seitenobjektes/Plugins. In diesem Plugin wird nur das erste zugewiesene Bild verwendet.

Platzierung

_images/plugin-fadeimage-object.png

Konfiguration

Mit Doppelklick auf das Fade Image Seitenobjekt bzw. über den   Konfigurieren-Button können die individuellen Einstellungen vorgenommen werden.

_images/plugin-fadeimage-config.png

Individuelle Parameter

Transparenz
Über die angegebenen Wert (Regler) kann die Transparenz des angezeigten Bildes eingestellt werden. Je weiter nach rechts (grösser) der Transparenzwert eingestellt wird, desto “durchsichtiger” ist das Bild.
Bild einpassen
Legt fest ob das Bild in den Objektrahmen eingepasst werden soll, so das es komplett zu sehen ist. Ansonsten wird das Bild in Originalgrösse eingesetzt und durch das Objektrechteck ggfs. rechts und unten beschnitten.
Effekt (Easing)
Über ein PopUp-Menu kann ein individueller Anzeigeeffekt für die Transparenz gewählt werden. Mehr unter Easing Cheat Sheet (DE)
Wartezeit (ms)
Diese Vorgabe bestimmt die Zeitdauer vor Einsetzen des Einblendeffektes. Ist keine Wartezeit (oder “0”) angegeben, so wird das Bild sofort angezeigt.
Einblendezeit (ms)
Diese Vorgabe bestimmt die Dauer des Einblendeffektes. Ist keine Einblendezeit (oder “0”) angegeben, so wird das Bild direkt ohne Effekt angezeigt.
Anzeigedauer (ms)
Diese Vorgabe bestimmt die Dauer der “normalen” Anzeige (mit dem angegebenen Transparenzwert).
Ausblendezeit (ms)
Diese Vorgabe bestimmt die Zeit mit der das Bild nach Ende der Einblendezeit und Ablauf der Anzeigedauer wieder ausgeblendet wird. Ist keine Ausblendezeit (oder “0”) angegeben, so bleibt das Bild dauerhaft eingeblendet.
Aktion
Hier kann jetzt der gewünschte Hyperlink, die SPF/URL-Aktion hinterlegt werden. Hier wird der Standard Hyperlink/SPF-URL-Aktionsdialog unterstützt. Mehr unter Angabe eines Hyperlinks oder SPF-URL Aktion
SPF/URL-Aktion
An dieser Stelle wird die interne, innerhalb der App und Plugins verwendete Hyperlink/URL-Aktion angezeigt. Dieses Feld dient zur Information ist selbst nicht veränderbar.

Geräteanzeige

_images/plugin-fadeimage-device.png

Als Video-Download: Fade Image auf dem Gerät

Release Notes

Version 1.2 (verfügbar seit 26.11.2013)

  • setzt Portal Release Version von mindestens Version 3.50 voraus
  • setzt einen App Release von mindestens Version 2.2.46 voraus
  • Verfeinerung der “Fade Image” Grundfunktionen

  Flightboard - Lauftextanzeige wie am Flughafen

Flightboard ist eine animierte Lauftextanzeige, wie die Anzeigetafeln an Flughäfen. Es können mehrere Textzeilen vorgegeben werden, die nacheinander angezeigt werden.

Seitenplatzierung und allgemeine Einstellungen

_images/plugin-flightboard-object.png

Beispiel-Konfigurationsdialog

_images/plugin-flightboard-config.png

Als Video-Download: Flighboard Preview Animation

Seitenanzeige auf dem Gerät

_images/plugin-flightboard-device.png

Als Video-Download: Flighboard Animation