TV App Development - Überblick und Einblick

1 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · info@netz98.de · www.netz98.de

TV App DevelopmentTV App Development

Überblick und EinblickÜberblick und Einblick

Christian MünchChristian Münch

Nutzen und Motivation für den Verbraucher

• Facebook, Twitter und Co. direkt am Fernseher

• Newsticker etc. mittels Bild in Bild Funktion

• Skypen ohne PC

• Musikprogramme

• Videoportale

• Fotoalben

• Spiele

• PayTV / Online Videotheken

– Videoload

– Maxdome

– ...

Was braucht ein Endverbraucher?

• Internetfähigen Fernseher

• Internetfähigen Blueray Player

• Spezielle Set-Top Box

Weltmarkt

• Verschiedene Hersteller / Systeme / Standards– Google TV

– Samsung internet@tv

– Toshiba Net TV

– LG Connected TV

– Philips NetTV

– Sony AppliCast und Bravia Internet TV

– Sharp AQUOS NET+

– Panasonic – Viera Connect

– Yahoo Connected TV

– Apple TV

– HbbTV

Bei der Entwicklung muss folgendes beachtet werde

• Die übliche Bildschirmauflösung beträgt 960x540 Pixel

• Es sollten keine Schriftgrößen benutzt werden die kleiner als 18pt sind.

• Bei Apps auf HTML/Javascript Basis werden nicht alle Befehle unterstützt.

Samsung internet@tv Apps

Überblick

• Entwicklung mit Javascript/HTML/CSS oder Flash

• SDK mit Emulator (Läuft nur unter Windows)

• Apps können über einen im Netzwerk freigegebenen Webserver direkt auf den Fernseher gespielt werden. Es muss nur ein verstecker Developer-Zugang aktiviert werden.

• Apps gibt es sowohl kostenlos als auch als Bezahlvarianten

• Länderabhängiger Apps-Store

• Community mit freien User-Apps

• SDK ist kostenlos nach einer Registrierung auf der Samsung TV Seite erhältlich.

• SDK unterscheidet sich zwischen den 2010er und 2011er Geräten.

• Die 2010er Anwendungen sollten auch auf 2011er Geräten laufen.

• 5 Millionen Downloads über den App Store in 14 Monaten (Stand 24.05.2011)

Grobaufbau von Samsung internet@tv Apps

Maple Browser

Application Manager

App App App

Samsung internet@tv App VerzeichnisstrukturLayouts (einfache <div> Elemente)

Eigene Javascript Bibliotheken

Javascript zum „beleben“ der Layouts.Erstellt Komponenten und enthält Szenenlogik.

Styles der Komponenten (Optik)

Resource, Assets, etc...

Beschreibung der Anwendung. Grundlegende Konfigurationen

Manifest Datei●Definiert Typ der Anwendung●Kategorie für App-Store●Meta-Informationen

Verschiedene Anwendungstypen

TV AppFull-screen application*

Single-wide application*

Ticker application*

* In Europa sind nur Full-screen zugelassen

Start der Anwendung / „Webseite“

app.json Datei

• Definition der Szenen

• Definition eines Themes für vorgefertigte Komponenten (zur Zeit gibt es nur einen Theme)

Initialisierungsdatei

• Definition der initialen Szene.

• Ähnlich der main() Methode bei C und Java.

• Definition von Containern die später mittels Javascript zu funktionalen Komponenten werden.

Scene („View“)

Stylesheet

XHR Beispiel aus dem Samsung App Development Guide

Event Handling

Konstante für Keycode. Dieser steht für eine Taste auf der Fernbedienung.

Es geht auch einfacher mit jQuery

Samsung internet@tv Emulator

Samsung TV App Beispiel

Yahoo Connected TV

Überblick – Yahoo Connected TV

• Entwicklung mit Javascript/HTML/CSS

• SDK mit Emulator (Läuft nur unter Ubuntu)

• Apps werden bei Yahoo eingespielt und können auf den eigenen Fernseher via Developer-Code zum Testen installiert werden.

• Apps gibt es sowohl kostenlos als auch als Bezahlvarianten

• SDK ist komplett Open Source.

• Läuft auf Endgeräten von verschiedenen Herstellern.

• Kann auf 8 Millionen Endgeräten laufen (Angabe von Yahoo).

• Zur Zeit 120 Apps verfügbar.

Yahoo Connected TV Verzeichisstruktur

Widget Icons für Widget-Leiste

Eigene Javascript Bibliothekfür Business Logik

Views mit Komponenten

Zusätzliche Dateien / Assets;Lokalisierung

Meta-Informationen

Yahoo Sidebar Widget Beispiel

Manifest

Initialisierungsdatei

Eventhandler

Sidebar View

Lokalisierung

Kontakt:

E-Mail: c.muench@netz98.deBlog: http://blog.muench-worms.deTwitter: cmuenchXing: https://www.xing.com/profile/Christian_Muench7

Danke!

TV App Development - Überblick und Einblick

Technology

einblick - sad.barmherzige.desad.barmherzige.de/fileadmin/user_upload/kh_schwandorf/einblick/WEB_KH...4 einblick 12/14 einblick 12/14 5 Die Implementierung der neuen Hauptfachabteilung

EINBLICK - cdn.wir-e.de

Einblick 2/2013

Einblick 33 high

Seminar im Grundstudium: Motion-Tracking in der Robotik · Friedrich-Alexander-Universität Erlangen-Nürnberg Stefan Wildermann 2 Überblick - Ziele Ziele: Einblick in die Welt der

Einblick 51

Einblick ins Skizzenbuch

RUNDBLICK EINBLICK

EINBLICK - LSH

Einblick 2019 - rbinternational.com · 2021. 2. 15. · Einblick 2019. 16,7 MILLIONEN KUNDEN 46.873 MITARBEITER RBI im Überblick Die Raiffeisen Bank International AG (RBI) betrachtet

Einblick 5

EINBLICK - Venenklinik

Das Agile Development Framework im Überblick im Uber… · > .NET, Codequalität und agile Methoden > MVP für C# in den Jahren 2010 und 2011 > Agile Development Framework (ADF)

Handbuch Wissenschaftskommunikation - Springer978-3-531-18927-7/1.pdf · V Von einem Handbuch erwarten Leserin und Leser Überblick und Einblick, Diskussion und Differenzierung, also

Hereinspaziert! Einführung und Development Überblick zum ...€¦ · ! 1980 Bericht Nord-Süd-Kommission ! 1980 Weltnaturschutzstrategie: »Living resource conservation for « Hans

Einblick 2010 September

EINBLICK - ahlenevangelisch.files.wordpress.com · GOTTESDIENSTE LiebeLeserinnenundLeser, EVANGELISCHEKIRCHENGEMEINDEAHLEN EINBLICK 3.3. Freitag 9.30 Hugo-Stoffers-Zentrum,Naechster

LEHRTER WOHNUNGSBAU EINBLICK

Handbuch - download.e-bookshelf.de · V Von einem Handbuch erwarten Leserin und Leser Überblick und Einblick, Diskussion und Differenzierung, also kurz alles, was zu einem Themenfeld

Einblick 3/2012