HbbTV-Applikationsentwicklung. Konzeption und Gestaltung einer E-Learning-Lerneinheit für das Praktikum für Nachrichtentechnik

Inhalt

Betreuer-Leitfaden

1. Der Versuchsaufbau

2. Das Praktikum – Konzept der E-Learning-Einheit

3. Aufgaben des Betreuers

4. Ablauf des Praktikums

5. Lösungen der Programmier-Aufgaben

Betreuer-Leitfaden

1. Der Versuchsaufbau

Wenn eine HbbTV-Applikation als fertige Anwendung vorliegt, muss diese für das Rundfunknetz bereitgestellt werden. Dabei gibt es zwei unterschiedliche Übertragungsmechanismen. Die HbbTV-Applikation kann über das Rundfunknetz übertragen, oder auch voneinem externen Web Server über das Breitbandnetz abgerufen werden. In beiden Fällen findet die Signalisierung der HbbTV-Applikation nach dem DVB-Standard ETSI TS 102 796 über das Rundfunknetz mittels AIT-Table statt.

Im Institut für Nachrichtentechnik wurde der Versuchsaufbau in einem einzigen Personal Computer als Kompakt-Lösung realisiert. Die HbbTV-Applikation wird auf dem Web Server gespeichert und kann dort von den Studenten editiert werden.

Die zwischengespeicherte TS-Datei mit den Audio-, Video- und Zusatzdaten, inklusive der AIT-Signalisierung, wird über den TS-Player ausgespielt.

Das Fernsehgerät empfängt das DVB-T-Signal und kann die HbbTV-Applikation vom Web Server anfordern. Die HbbTV-Applikation wird dann über IP übertragen.

2. Das Praktikum – Konzept der E-Learning-Einheit

Die Applikation stellt eine E-Learning-Einheit für Studenten der Technischen Universität Braunschweig dar. Die E-Learning-Einheit soll den Studierenden den Standard und die Funktionsweise von HbbTV erläutern und beispielhaft darstellen. Das Colloquium besteht aus zwei Teilen:

- Vermittlung theoretischen Hintergrundwissens im Skript, Printversion. Um das Skript durchzuarbeiten, haben die Studenten eine Woche Zeit.
- Der Aufgabenteil – realisiert als E-Learning-Umfeld: Eine HbbTV-Applikation
- Theorieteil/Quiz: Fragen zum Thema HbbTV – Abfragen des zuvor vermittelten Wissens
- Mail mit Erfolgs-Bestätigung und Statistik über Anzahl falsch gegebener Antworten an Tutor
- Informationsübermittlung – Zusammenfassung des Skriptes mit den wichtigsten Kernaussagen
- Praxisteil: Programmieraufgaben – zum vertiefenden Verständnis. Die Applikation selbst beinhaltet 8 Aufgaben, die die Studierenden am Entwicklungsrechner lösen müssen. Dabei muss der Quelltext der Applikation verändert werden.

3. Aufgaben des Betreuers

Für das HbbTV-Praktikum für Nachrichtentechnik existieren zwei Ordner:

- hbbtv_simpleApp

und

- hbbtv_simpleApp-Uebungsplatz

In dem Ordner: „hbbtv_simpleApp“ befindet sich eine funktionsfähige HbbTV-Applikation. Diese muss in dem Ordner „HbbTV“ auf dem Web Server des IfN gespeichert werden. Diese Applikation hält das Quiz bereit.

„hbbtv_simpleApp – Übungsplatz“ soll auf dem Entwicklungsrechner gespeichert werden. An diesen Quell-Dateien sollen sie Studierenden Übungsaufgaben ausführen.

Bei Betreuer-Wechsel muss die Mail-Ad des Empfängers in sendmail.php geändert werden.

- Cgi-bin
- sendmail.php
- $zieladresse à ändern.

Außerdem muss in dem PSD-Dokument: „telefonjoker.psd“ Name und Telefonnummer des Betreuers geändert werden. Dieses Dokument wird dann als JPEG abgespeichert unter: „telefonjoker.jpg

4. Ablauf des Praktikums

Teil 1:

Den Studierenden wird eine Woche vor dem Colloquium im Studenten-Pool des IfN die Printversion HbbTV-Skript ausgehändigt.

Teil 2:

Die Studierenden treffen sich in Kleingruppen im Studenten-Pool des IfN. Zunächst soll am Fernsehgerät die HbbTV-Applikation „hbbtv_simpleApp“ ausgespielt werden.

Mit dem Fernsehgerät: Loewe Connect 22 SL kann die Applikation ausgespielt werden.

Der DVB-T-Sender des IfN läuft auf dem UHF-Kanal 31 (Mittenfrequenz 554 MHz). Der Sendername lautet TUBS. Falls der Sender in der Programmliste noch nicht gespeichert ist, muss ein Suchlauf auf der Frequenz gestartet werden.

Die Studierenden sollen am Fernsehgerät das „Quiz“ durchspielen. Sobald die Studenten das Quiz durchlaufen haben, wird automatisch eine Mail an den Tutor versendet und auf den Übungsplatz weiter verlinkt. Die Studenten sollen nun am Entwicklungsrechner weiter arbeiten.

Teil 3:

Am Entwicklungsrechner sollen Programmier-Aufgaben bewältigt werden. Die zu erledigenden Aufgaben stehen in der Applikation, die Lösungen sind folgend aufgelistet.

Die CE-HTML-, JS- und CSS- Dokumente können am Entwicklungsrechner mit einem Editor modifiziert werden.

Wenn die Studierenden eine Aufgabe gelöst haben, soll die Applikation auf dem Web Server aktualisiert und auf dem Fernsehgerät getestet werden. Wenn die Navigation auf dem Fernsehgerät erwartungskonform funktioniert, ist die jeweilige Aufgabe erfolgreich gelöst. So wird nach jeder Aufgabe ein positives Feedback gegeben. An dem Entwicklungsrechner kann dann die nächste Aufgabe gelöst werden.

Opera TV Emulator

Am Entwicklungsrechner kann die HbbTV-Applikation mit dem Opera TV Emulator geöffnet und bedient werden. Um den Opera TV Emulator auf dem PC nutzen zu können, muss allerdings zunächst die Oracle VirtualBox installiert werden: https://www.virtualbox.org/wiki/Downloads

Im Anschluss kann der Opera TV Emulator runtergeladen und installiert werden: http://www.gugelproductions.de/blog/2012/hbbtv-auf-pc-mac-empfangen.html

Ausführung:

- Start des Opera TV Emulator’s, die Oracle VirtualBox wird automatisch geöffnet.
- In: Oracle VirtualBox auf den Icon: „Ändern“ klicken
- Gemeinsame Ordner: hier den Pfad der HbbTV-Applikation angeben („automatisch einbinden“ und„permanent einbinden“ aktivieren)
- Fenster schließen
- Im Fenster Oracle VM VirtualBox Manager kann nun der Opera TV Emulator mit Doppelklick gestartet werden – öffnet sich im externen Fenster
- Mit F1 kann eine URL manuell eingegeben werden. Um die lokal gespeicherte HbbTV-Applikation zu öffnen gilt folgende URL: file://localhost/mydata/sf_ (QWERTY-Tastatur)

Um den Opera TV Emulator zu bedienen, kann entweder die Tastatur verwendet werden, oder eine Web-Fernbedieung: Remote Control Widget, wird als Widget mitgeliefert und kann zusätzlich zum Opera TV Emulator installiert werden.

5. Lösungen der Programmier-Aufgaben

Aufgabe 1:

Erklärung:

Die Funktion 'function hbbtvlib_show()' sorgt dafür, dass die HbbTV-Applikation auf dem Fernsehgerät angezeigt wird.

Zudem fordert diese Funktion Keys über das Keyset object an. Das Keyset object erlaubt, auf Nutzereingaben (beispielsweise Betätigung der roten Taste auf der Fernbedienung), zu reagieren.

Mit dem try...catch-Statement kann während der Laufzeit verhindert werden, dass in kritischen Situationen Fehler auftreten. Definierte Fehler können abgefangen werden.

Der Try-Block enthält Code, der auf einen möglichen Laufzeitfehler geprüft werden soll. Er wird vollständig ausgeführt, es sei denn es wird ein Laufzeitfehler erkannt.

Der Try-Block enthält die Anweisungen, die ausgeführt werden sollen, während der Catch-Block den Code enthält, der bei einem Fehler ausgeführt werden soll.

Die Catch-Klausel hat Funktions-Charakter und erwartet einen Parameter „e“. Die Variable „e“ ist erforderlich, da über diese Variable letztlich die Reaktion des Scripts auf den aktuellen Zustand kontrolliert wird.

Aufgabe:

initialisiere die Funktion 'function hbbtvlib_show()' in hbbtvlib.js

Die Funktion 'function hbbtvlib_show()' sorgt dafür, dass die HbbTV-Applikation auf dem Fernsehgerät angezeigt wird. Zudem fordert diese Funktion Keys über das Keyset object an. Das Keyset object erlaubt, auf Nutzereingaben (beispielsweise Betätigung der roten Taste auf der Fernbedienung), zu reagieren.

Aufgabe: Die Anweisungen 'int_app.show();' und 'int_keyset.setValue(int_ksVisible);' sollen in den Try-Block der Funktion 'function hbbtvlib_show()' eingefügt und überwacht werden. Die Funktion soll dann den Rückgabewert 'true' zurückgeben. Die Catch-Klausel hat Funktions-Charakter und erwartet einen Parameter 'e'. Die Variable 'e' soll 'hbbtvlib_lastError' zugewiesen werden. Die Funktion soll dann den Rückgabewert 'false' zurückgeben. Wenn diese Funktion vervollständigt wurde, soll die Applikation auf dem Web Server gespeichert und auf dem Fernsehgerät getestet werden. Wenn die Applikation angezeigt wird und die Navigation mit der Fernbedienung funktioniert, ist die Aufgabe erfolgreich gelöst.

Lösung:

Ordner: js
Dabei: hbbtvlib.js
Zeile: 79

Funktion: function hbbtvlib_show()

function hbbtvlib_show() {
try {
int_app.show();
int_keyset.setValue(int_ksVisible);
return true;
}

catch (e) {
hbbtvlib_lastError = e;
return false;
}
}

Aufgabe 2:

Erklärung:

Typeof ist eine Abfragetechnik. Mit der Funktion Typeof wird die Existenz einer Variablen (eines Objektes) geprüft. Die Anweisung prüft, ob eine globale oder lokale Variable nach Boolean umgewandelt wahr ist.

Wenn kein Wert mit einer Variablen verbunden werden kann, also keine lokale oder globale Variable mit dem zu prüfenden Namen vorhanden ist, bricht das Script hier mit einem Ausnahmefehler ab, dann liefert der typeof-Operator immer undefined. Undefined ergibt in Boolean umgewandelt: „false“.

Wenn eine Nutzereingabe registriert wird, prüft der typeof-Operator welcher Variablen das Ereignis zugeordnet ist. Die Variablen sind KeyEvents zugewiesen, die umgehend ausgeführt werden.

In keycodes.js soll mit Typeof geprüft werden, ob KeyEvents vom Zuschauer ausgelöst werden. Der Rückgabewert ist „undefined“. Deklariert werden sollen VK_GREEN und VK_YELLOW. KeyEvent.VK_GREEN sowie KeyEvent.VK_YELLOW müssen zugewiesen werden.

Weiterhin sollen in der Funktion ‚ function handleKeyCode(kc)‘ in dem Dokument programmieren-2.js unter dem Fall ‚ VK_RED‘ die Fälle VK_GREEN und VK_YELLOW eingebunden werden. VK_GREEN verlinkt auf 'programmieren-1.html', VK_YELLOW verlinkt auf 'landing.html'.

Aufgabe:

Aufgabe 2: initialisiere Abfragetechnik: if (typeof(KeyEvent.VK_RED)!='undefined')

Wenn eine Nutzereingabe registriert wird, prüft der typeof-Operator welcher Variablen das Ereignis zugeordnet ist. Die Variablen sind KeyEvents zugewiesen, die umgehend ausgeführt werden.

Aufgabe: In keycodes.js soll mit Typeof geprüft werden, ob KeyEvents vom Zuschauer ausgelöst werden. Deklariert werden sollen 'VK_GREEN' und 'VK_YELLOW'. 'KeyEvent.VK_GREEN' sowie 'KeyEvent.VK_YELLOW' müssen zugewiesen werden. Der Rückgabewert ist 'undefined'. Weiterhin sollen in der Funktion 'function handleKeyCode(kc)' in dem Dokument programmieren-2.js unter dem Fall 'VK_RED‘ die Fälle 'VK_GREEN' und 'VK_YELLOW' eingebunden werden. 'VK_GREEN' verlinkt auf 'programmieren-1.html', 'VK_YELLOW' verlinkt auf 'landing.html'. Die Applikation soll auf dem Web Server aktualisiert und auf dem Fernsehgerät getestet werden. Wenn die Schaltflächen 'grün' und 'gelb' mit der Fernbedienung betätigt werden können, ist die Aufgabe erfolgreich gelöst.

[...]