Download pdf - TV App Development - Überblick und Einblick

1 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · 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.


HTML

• 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: [email protected]: http://blog.muench-worms.deTwitter: cmuenchXing: https://www.xing.com/profile/Christian_Muench7

Danke!