Wie Sie responsives Digital Signage erstellen

In diesem Tutorial zeigen wir Ihnen, wie Sie Videos und Bilder aus MediaRSS-Quellen in einer HTML5-Seite für responsives Digital Signage einbauen.

Was bedeutet responsiv?

Webseiten responsiv gestalten zu können ist ein bedeutender Vorteile von HTML5/CSS3. Diese Technik ermöglicht es uns Digital Signage-Inhalte zu erstellen, welche sich automatisch an unterschiedliche Ausgabegeräte anpassen. Zum Beispiel ordnen sich die Inhaltselemente abhängig von der Orientierung (horizontal/vertikal) unterschiedlich an.

Das kann uns Zeit und Ressourcen sparen, da wir nicht mehr mehrere Dateien mit redundanten Inhalten zu pflegen brauchen. In unserem Beispiel ist es nicht mal nötig, extra Videos für Quer- oder Hochformat bereitzustellen. Dazu kommen noch die generellen Vorteile von HTML im Vergleich zu reinen Video oder Bildern. Zum Beispiel Interaktionen oder das unsere Texte abhängig von der Anzeigegröße skalieren können ohne pixeliger zu werden.

Die Zutaten für responsives Digital Signage

Zunächst benötigen wir einen RSS-Feed mit Videoinhalten. Dafür bietet sich der Feed der Tagesschau an. Wir gehen davon aus, dass Sie wissen was ein RSS-Feed ist. Falls nicht klicken Sie auf diesen Beitrag. Dort erfahren Sie mehr darüber.
Im Beitrag über CSS3-Lauftexte mit RSS stellten wir eine Technik vor, um komfortabel über die Yahoo Query Language RSS Feeds abzuholen. Diese werden wir hier ebenfalls einsetzen.
Über CSS3-Animationen mit keyframes berichteten wir hier ausführlicher. Wir werden in unserem Beispiel Keyframes benutzen, um zwischen die einzelnen Videos dezent ein- und auszublenden.

Der Beispielquellcode

Den kompletten Quellcode der in diesem Tutorials über responsives Digital Signage Design können Sie bei Github aufrufen.
Das Konzept bzw. die Arbeitsschritte sind schnell erklärt.

  1. Wir holen den RSS-Feed und das Hintergrundbild von dem Server der Tagesschau ab.
  2. Daraufhin bauen wir alle Nachrichtenblöcke (Artikel) der Seite mittels Javascript dynamisch auf und stellen diese auf unsichtbar.
  3. Sobald die Seite fertig geladen ist, blenden wir den erste Block ein und nach 15s wieder aus. Dann die nächste Nachricht usw.
  4. Sobald wir durch sind, startet wieder von dem ersten Block.

Wir werden Sie nun von unten nach oben durch die einzelnen Funktionen führen.

Der HTML Bereich

    <body onload="start()">
        <section id="feed">
        </section>
    </body>

Ist kurz und knackig. Innerhalb des section-Tags fügt später die Funktion createTickerOutput() die einzelnen Nachrichtenartikel ein.

Achtung!
Wir benutzen hier bewusst der Korrektheit halber das semantische Tag section und kein unspezifisches div. Theoretisch können wir nämlich noch zusätzliche Sektionen z.B. für Aufrufsysteme oder Interaktionsschaltflächen neben dem Feed oder überlagert anzeigen.

Der erste Befehl an den Browser nach dem Laden des Quelltextes (onload) lautet die Funktion start() aufzurufen.

Die Start() Funktion

Die start()-Funktion setzt das Hintergrundbild und ruft die Abholfunktion getRSS() mit der RSS-Url als Parameter auf. Sowohl für den Link zum Hintergrundbild als auch zum RSS benutzen wir Konstanten am Anfang des Skriptes ab Zeile 74.
Das hat folgenden Sinn: In SmilControl und anderen CMSen besteht die Möglichkeit seinen Usern sogenannte Templates mit Platzhaltern bereitzustellen. Die Benutzer können das Template dann komfortabel für ihren Playlisten/Kampagnen personalisieren. Zum Beispiel einen anderen Feed, Hintergrund und Anzeigezeiten einsetzen. In diesem Fall müssten Sie die Konstanten gegen Platzhalter austauschen, um aus unserem Beispiel ein HTML5-Template zu machen.

Das RSS verarbeiten

In dem Beitrag CSS3-Lauftexte mit RSS haben wir die Funktion getRSS() ausführlich beschrieben. Sie ruft bei Erfolg die Funktion handleTicker() auf. Diese reicht den Feed an createTickerOutput() weiter.
Dort erhält jeden Artikel einen Nachrichtenblock in folgendem Format.

<article class="slides">
	<h1>Überschrift der Nachricht</h1>
      <video muted loop> oder <img> - Tag
	<div>Nachrichtenbeschreibung</div> 
</article>

Die Funktion readEnclosure() prüft das enclosure-Tag des MediaRSS-Items. Ist es ein Videos kommt das video-Tag, bei einem Bild das img-Tag zum Einsatz. Videos bekommen zusätzlich die Attribute mute und loop. In der Regel ist Ton bei Digital Signage Installationen, abgesehen von Hintergrundmusik oft unerwünscht. Außerdem sollen die jeweiligen Videos in einer Endlosschleife laufen. Jeden Nachrichtenmeldung erscheint nämlich für 15s (Konstante _slide_duration), wir wissen aber nicht wie lang die Clips sind. Ein vorzeitiger Abbruch würde also nicht gut aussehen.

Nachrichtenmeldungen anzeigen

CreateTickerOutput() baut die HTML-Struktur vollständig auf. Danach setzt die Funktion displayTicker() das erstelle HTML in das eingangs beschriebene sections-Tag ein und ruft erstmalig showSlides() auf. Diese stellt die erste Nachricht auf sichtbar und startet gegebenenfalls das Video. Da die Konstante _slide_duration auf 15 steht, ruft sich die Funktion showSlides() nach 15 Sekunden selbst auf (Rekursion). Sie erkennt, dass gerade ein Nachrichtenartikel abgespielt wird, pausiert das Video und startet den nächsten Artikel.

Layout und Design einstellen

Bis jetzt kümmerten wir uns um die Programmlogik. Wenden wir uns nun dem eingangs versprochenen Design für responsives Digital Signage zu.

Schriftmaße

Um bei jeder Bildschirmauflösung gut lesbar zu sein müssen die Maße relativ sein. Früher realisierten wir das mit Prozent oder relativ zur Grund-Schriftgröße mit em oder rem. Das war oft umständlich und fehlerbehaftet. CSS3 führte glücklicherweise neue Maßeinheiten z.B. vw (Viewport width) und vh (Viewport height) ein. Diese beziehen sich wie der Name andeutet auf die Fenstergröße und vereinfachen das Handling besonders in Bezug auf Höhenänderungen enorm.

Medienabfragen

Ein weiteres Hilfsmittel für responsives Digital Signage stellen die sogenannten Medienabfragen (Media Queries) dar. Damit lassen sich das eines Dokuments für unterschiedliche Medientypen oder Medienmerkmale festlegen. Zum Beispiel die Bildschirmauflösung, ob es ein Drucker oder Bildschirm ist usw… In unserem Fall haben wir uns für die Unterscheidung über die Orientierung entschieden. Digital Signage Inhalte werden entweder quer- oder hochformatig dargestellt. Unsere Aufgabe ist es nun Werte zu finden, welche viele unterschiedliche Bildschirmauflösungen und Verhältnisse z.B: 16:9, 21:9 oder 9:16 ansprechend anzeigt. Dabei muss alle Information innerhalb des Sichtfeldes bleiben. Das kann übrigens selbst bei einfachen Inhalten zu einer anspruchsvolle Aufgabe werden.

Die Standardeinstellungen und das Fading

Bevor wir uns an die Medienabfragen machen, brauchen wir ein paar Standardeinstellungen

body
{
	background: #042650 no-repeat fixed; 
	background-size:cover;
}

Der Hintergrund ist dunkelblau fixiert und wiederholt sich nicht.
Ein eventuelles Hintergrundbild ist gestaucht, um den kompletten Anzeigebereich abzudecken. Das ist nicht unbedingt die beste Lösung, bei unserem dunklem Hintergrundbild aber noch akzeptabel.

h1
{
	color: #fff;
	font: bold 3.0vw sans-serif;
	text-shadow: 2px 2px 4px #000;
}

Für die Überschrift wählen wir eine fette serifenlose Standardschrift und versetzen sie mit einem dezenten Schattenwurf.

video, img
{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
div
{
	font: normal 2.2vw sans-serif;
	color:#fff;
	text-shadow: 2px 2px 4px #000;
}

Das Video und der normale Fließtext bekommen ebenfalls einen leichten Schattenwurf. Da die Schatten subtil sind, benutzen wir dort der Einfachheit halber Pixelwerte.

Fading

Die Übergänge werden zwischen den verschiedenen Nachrichtenblöcken grundsätzlich sanft übergeblendet. Dazu nutzen wir die in CSS3-Lauftexte mit RSS vorgestellte Keyframe-Technik.
Die Übergänge stellen wir so ein:

@keyframes fade
{
	from
	{
		opacity: 0;
	} 
	to
	{
		opacity: 1;
	}
}

und binden die Animation in in der Containerklasse slides ein

.slides
{
	clear: both;
	display:none;
	opacity: 0;
	animation: fade 1s linear forwards;
}

Zusätzlich stellen wir standardmäßig die Ansicht (display) auf none und zur Sicherheit die Deckkraft (opacity) auf 0.

Einstellungen für Querformat

Kommen wir nun zu den CSS-Einstellungen für das Querformat (landscape)

@media screen and (orientation:landscape)
{
	h1
	{
		font-size: 6vh;
		margin: 20vh 5vw 5vh 5vw;
	}
	video, img
	{
		float:left;
		max-width:40vw;
		width:60vh;
		margin: 1vh 0 0 5vw;
		border:1px solid #004;
	}

Die Überschrift sowie den Abstand vom oberen Rand machen wir abhängig von der Höhe des Anzeigebereiches. In dem Fall 6vh bedeuten 6% der Anzeigehöhe. Das hat folgenden Hintergrund: Wenn wir das Bild für eine Videowall in die Breite ziehen müssen z.B für ein 32:9 Verhältnis würden sowohl die Überschrift als auch das Bild oder Video viel zu groß werden und aus dem Anzeigebereich austreten. Um das einzudämmen setzen wir dem Wachstum Grenzen. Das Video soll zwar 60% der Höhe einnehmen aber nicht 40% der Breite überschreiten.

	div
	{
		float:left;
		font-size: 4vmin;
		line-height:5vmin;
		width:45vw;
		margin: 0 0 0 2vw;
		padding:0;
	}
}

Beim Fließtext wird es es etwas komplizierter. Er darf einerseits nicht zu groß werden, aber auch nicht zu klein. Wir schränken also die Maximale breite des divs auf 45% der Breite ein. Setzen aber bei der Schrift eine Minimalgröße vmin bedeutet das die Schrift immer mindestens 5% der Anzeigebreite oder -höhe betragen muss. So stellen wir sicher, dass Z.B. bei einem Seitenverhältnis von fast 1: 1 die Schrift noch lesbar bleibt.

Einstellungen für Hochformat

Die Einstellungen für Hochformat sind etwas einfacher, da wir in diesem Fall Überschrift Video und Fließtext untereinander anordnen können.

@media screen and (orientation:portrait)
{
	h1
	{
		font-size: 4.5vh;
		line-height:5.5vh;
		text-align:center;
	}

Die Überschrift wird zentriert und die Größe ist abhängig von der Höhe.

	video, img
	{
		width:90vw;
		margin: 0vh 0 4vh 5vw;
	}

Das Video nimmt 90% der sichtbaren Breite ein und hält Abstand zu dem Text unten.

	div
	{
		font-size:3vh;
		line-height:4.5vh;
		width:90vw;
		margin: 0 0 0 5vw;
	}
}

Der Fließtext nimmt ebenfalls 90% der Breite ein ist wie die Überschrift abhängig von der Anzeigehöhe.

Lohn der Mühen

Klicken Sie auf responsive-sample.html, um in Ihrem Browser unser responsives Digital Signage Beispiel live zu sehen. Verändern Sie beliebig die Größe Ihres Browserfensters. Sie werden feststellen, dass die Inhalte abgesehen von einigen extremen Seitenverhältnissen immer vollständig angezeigt werden.

Wir hoffen Ihnen einen interessanten Einblick für responsives Digital Signage gegeben zu haben. Sie können unser Beispiel gerne benutzen, verändern und weiterentwickeln.
Wenn Sie Fragen haben, nehmen Sie Kontakt zu uns auf. Außerdem würden uns über Verbesserungsvorschläge freuen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.