Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
Sebastian Schietzold
11.03.2020
TU Dresden – Sachgebiet 7.5 Web und Video
Plone Digital Signage für die Info-Monitore an der TU Dresden [Update]
Plone Digital Signage für die Info-Monitore an der TU Dresden [Update]TU Dresden, Sachgebiet 7.5 / Sebastian SchietzoldPlonetagung Dresden / 11.03.2020
Folie 2 von 23
Digital Signage
Quellen (von links oben nach rechts unten):1 Media Arts (Wikipedia)2 Wesley Fryer (Flickr.com), CC BY 2.03, 4 Till Carlos (Flickr.com), CC BY 2.05 Antti Leppänen (Wikipedia), CC BY 4.0
https://de.wikipedia.org/wiki/User:Mediaartshttps://www.flickr.com/photos/wfryer/https://creativecommons.org/licenses/by/2.0/https://www.flickr.com/photos/137934932@N07/https://creativecommons.org/licenses/by/2.0/https://commons.wikimedia.org/wiki/User:A333https://creativecommons.org/licenses/by/4.0/
Plone Digital Signage für die Info-Monitore an der TU Dresden [Update]TU Dresden, Sachgebiet 7.5 / Sebastian SchietzoldPlonetagung Dresden / 11.03.2020
Folie 3 von 23
Digital SignageWarum?
Quelle:„Digital Signage. Die globale Studie. Chancen und Risiken.“, POPAI 2008
● Einstellen von ortsbezogenen und zeitlich gesteuerten Inhalten Veranstaltungsankündigungen, Raumänderungen, Warnungen→
● Fernsteuerbarkeit zentrales Einstellen von (zentralen) Informationen→
● Kostenvorteile gegenüber vergleichbaren Print-Kampagnen
● Werbewirksamkeit
Plone Digital Signage für die Info-Monitore an der TU Dresden [Update]TU Dresden, Sachgebiet 7.5 / Sebastian SchietzoldPlonetagung Dresden / 11.03.2020
Folie 4 von 23
Digital SignageKomponenten
Redaktion Content ManagementSystem
Datenbank(für Medien-Inhalte usw.)
Digital Signage Player Anzeige
Digital Signage Player Anzeige
Digital Signage Player Anzeige
Plone Digital Signage für die Info-Monitore an der TU Dresden [Update]TU Dresden, Sachgebiet 7.5 / Sebastian SchietzoldPlonetagung Dresden / 11.03.2020
Folie 5 von 23
Digital SignageIntegration in die Plone-Website
● Bestehendes Rechtesystem
● Bestehender Content
● Gewohnte Oberfläche für Redakteure
● Leichte Zuordnung von Bildschirmen (jeder bekommt eine URL)
Plone Digital Signage für die Info-Monitore an der TU Dresden [Update]TU Dresden, Sachgebiet 7.5 / Sebastian SchietzoldPlonetagung Dresden / 11.03.2020
Folie 6 von 23
Digital Signagean der TU Dresden
Plone Digital Signage für die Info-Monitore an der TU Dresden [Update]TU Dresden, Sachgebiet 7.5 / Sebastian SchietzoldPlonetagung Dresden / 11.03.2020
Folie 7 von 23
Digital Signage an der TU DresdenProblem & Zielstellung
Ist:
Keine Monitore oder „individuelle“, „eigenverantwortliche“ Lösungen (Mensa, Uni-Bibliothek, Fakultäten …)
Soll:● Campus-weite, einheitliche Ausstattung von Gebäuden mit Monitoren
● Jeweils ein Monitor für zentrale Informationen + ein Monitor für gebäudespezifische Informationen
● Rechtemanagement mit Rollenkonzept
● Templates
● Ablaufsteuerung
Plone Digital Signage für die Info-Monitore an der TU Dresden [Update]TU Dresden, Sachgebiet 7.5 / Sebastian SchietzoldPlonetagung Dresden / 11.03.2020
Folie 8 von 23
Digital Signage und Plone
Strategie:● Bereitstellung der Inhalte durch
existierende Plone-Installation
● Monitor-Inhaltstyp physischer ↔Monitor
● Endpoints via plone.rest
● Konfiguration im Abspielgerät:– Browser ruft „seine“ URL auf– React Web App (Player) startet– Player holt regelmäßig Folien ab
und spielt diese gemäß Ablaufplan ab
Redaktion Content ManagementSystem
Datenbank(für Medien-Inhalte usw.)
Digital Signage PlayerAnzeige
Digital Signage PlayerAnzeige
Digital Signage PlayerAnzeige
Plone Digital Signage für die Info-Monitore an der TU Dresden [Update]TU Dresden, Sachgebiet 7.5 / Sebastian SchietzoldPlonetagung Dresden / 11.03.2020
Folie 9 von 23
Entwicklung vontud.addons.monitor
Plone Digital Signage für die Info-Monitore an der TU Dresden [Update]TU Dresden, Sachgebiet 7.5 / Sebastian SchietzoldPlonetagung Dresden / 11.03.2020
Folie 10 von 23
tud.addons.monitorTeaser
Plone Digital Signage für die Info-Monitore an der TU Dresden [Update]TU Dresden, Sachgebiet 7.5 / Sebastian SchietzoldPlonetagung Dresden / 11.03.2020
Folie 11 von 23
tud.addons.monitorMonitor, Foliensatz, Folie
Monitor Hauptfoliensatz FolieFolieFolie
Sonderfoliensatz FolieFolieFolie
Sonderfoliensatz FolieFolieFolie
Plone Digital Signage für die Info-Monitore an der TU Dresden [Update]TU Dresden, Sachgebiet 7.5 / Sebastian SchietzoldPlonetagung Dresden / 11.03.2020
Folie 12 von 23
tud.addons.monitorFolieneditor
● WYSIWYG (gleiche Styles wie in der Enddarstellung)
● Feste Vorlagen
● Eingeschränkte Möglichkeiten
Plone Digital Signage für die Info-Monitore an der TU Dresden [Update]TU Dresden, Sachgebiet 7.5 / Sebastian SchietzoldPlonetagung Dresden / 11.03.2020
Folie 13 von 23
tud.addons.monitorZeitsteuerung
● Optional für Folien
● Fakultativ für Sonderfoliensätze
● Angelehnt an Terminlogik
● Wiederholungen jeder Art möglich
Plone Digital Signage für die Info-Monitore an der TU Dresden [Update]TU Dresden, Sachgebiet 7.5 / Sebastian SchietzoldPlonetagung Dresden / 11.03.2020
Folie 14 von 23
tud.addons.monitorSchaltzentrale
● Timeline zeigt Foliensätze und Folien
● Durchwandern der Zeitachse oder Springen zu bestimmtem Zeitpunkt mit Vorschau
● Einfärbung der zu einem bestimmten Zeitpunkt gültigen Foliensätze
● Verwendung von JS-Lib „vis-timeline“
Plone Digital Signage für die Info-Monitore an der TU Dresden [Update]TU Dresden, Sachgebiet 7.5 / Sebastian SchietzoldPlonetagung Dresden / 11.03.2020
Folie 15 von 23
tud.addons.monitorFolienarten
● Textfolie (kein Bild, ein Bild, zwei Bilder)
● Bildfolie
● Videofolie (Youtube, Vimeo, Magma)
● DVB-Folie (ÖPNV)
Plone Digital Signage für die Info-Monitore an der TU Dresden [Update]TU Dresden, Sachgebiet 7.5 / Sebastian SchietzoldPlonetagung Dresden / 11.03.2020
Folie 16 von 23
tud.addons.monitorRest-Schnittstelle
● Abstrahiert Zeitsteuerungen und Foliensätze weg
● Liefert zu einem Zeitpunkt X eine gültige Playlist
● Endpoints:
1. Monitor-Informationen (Bezeichnung, Standort, …)
2. Playlist (Playlit-Hash, ggf. Folien-UIDs und Modified-Daten)
3. Folie(n) (liefert Folie(n)-Inhalte und -Metadaten)
Plone Digital Signage für die Info-Monitore an der TU Dresden [Update]TU Dresden, Sachgebiet 7.5 / Sebastian SchietzoldPlonetagung Dresden / 11.03.2020
Folie 17 von 23
tud.addons.monitorPlayer
● React Web App als Resource folder ausgeliefert
● Logik an sich relativ „dumm“: Playlist holen, Folien darstellen
● Anzeige von Kopf- und Fußzeile
● Ablaufsteuerung:– regelmäßiges Abfragen der Playlist– neue Inhalte werden geladen und gecached– Jede Folie wird eine bestimmte Zeit angezeigt– Playlist wird ständig wiederholt
Plone Digital Signage für die Info-Monitore an der TU Dresden [Update]TU Dresden, Sachgebiet 7.5 / Sebastian SchietzoldPlonetagung Dresden / 11.03.2020
Folie 18 von 23
tud.addons.monitor
Demo
Plone Digital Signage für die Info-Monitore an der TU Dresden [Update]TU Dresden, Sachgebiet 7.5 / Sebastian SchietzoldPlonetagung Dresden / 11.03.2020
Folie 19 von 23
tud.addons.monitorStolperfallen
● Darstellung auf verschiedenen Auflösungen:– Grundsätzlich: Festlegung auf eine Auflösung und Skalierung– Skalierung mit Hilfe der Basis-Fontsize (und relativen Angaben „rem“) tut nicht!– Lösung: CSS transform (scale) und Event-Listener of window resize
● Scaling von IFrames:– Die festgelegte Auflösung kann für IFrame-Content ungünstig sein– CSS transform tut seinen Job Verkettung von scales→
● Editor: Echtes WYSIWYG fast unmöglich– Rendering von Schrift unterscheidet sich zwischen Systemen unterschiedliche Umbrüche→– Vorgabe: Gleicher Browser zum editieren wie für die Darstellung– Annähernd gleiche Ausgabe durch CSS Scaling
Plone Digital Signage für die Info-Monitore an der TU Dresden [Update]TU Dresden, Sachgebiet 7.5 / Sebastian SchietzoldPlonetagung Dresden / 11.03.2020
Folie 20 von 23
tud.addons.monitorStolperfallen
● React Player:– IFrames sagen nicht, wann sie fertig geladen haben müssen durchgängig im DOM →
behalten werden
● Berechnung aktueller Playlist– Berechnen von zeitlichen Überlagerungen mit Wiederholungen ist nicht easy– Leider keine einfach einzusetzende „fertige“ Lösung bekannt
● Rest-API– Abholen von mehreren (hunderten von) Folien via GET im Zweifel zig UIDs vs. →
Zeichenbegrenzung der URI (2048 Zeichen?)– Momentan: „GET“ Request mit POST-Payload
● Hoffentlich keine Stolperfalle: Pull statt push
Plone Digital Signage für die Info-Monitore an der TU Dresden [Update]TU Dresden, Sachgebiet 7.5 / Sebastian SchietzoldPlonetagung Dresden / 11.03.2020
Folie 21 von 23
tud.addons.monitorWo bekomme ich das?
● Keine Veröffentlichung in Aussicht
● Eng verzahnt mit anderen Paketen und Addons– Insbesondere auch mit CKEditor und eigenen Addons
● Sorry!
Plone Digital Signage für die Info-Monitore an der TU Dresden [Update]TU Dresden, Sachgebiet 7.5 / Sebastian SchietzoldPlonetagung Dresden / 11.03.2020
Folie 22 von 23
tud.addons.monitor
Fragen?
Plone Digital Signage für die Info-Monitore an der TU Dresden [Update]TU Dresden, Sachgebiet 7.5 / Sebastian SchietzoldPlonetagung Dresden / 11.03.2020
Folie 23 von 23
Digital Signage und Plone
Vielen Dankfür die Aufmerksamkeit!
TitelfolieMotivationVorteileGrobe ArchitekturDigital Signage in PloneTitel – Digital Signage an der TU DresdenSoll und IstArchitektur Digital Signate TUDTitel – Entwicklung von tud.addons.monitortud.addons.monitor – MotivationGrober InhaltstypenFolieneditorZeitsteuerungTimelineFolienartenREST-SchnittstellePlayerDemoStolperfallen 1Stolperfallen 2Open Source?Fragen?Vielen Dank!