Upload
christian-muench
View
3.983
Download
1
Embed Size (px)
DESCRIPTION
Ein kurzer Einblick in das Zukunftsthema "TV Apps". Anhand von Code Beispielen gebe ich Beispiele für das System für Samsung Ferseher. Ebenso über das plattformübergreifende Konzept von Yahoo.
Citation preview
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
2 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
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
– ...
3 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
Was braucht ein Endverbraucher?
• Internetfähigen Fernseher
• Internetfähigen Blueray Player
• Spezielle Set-Top Box
4 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
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
5 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
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.
6 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
Samsung internet@tv Apps
7 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
Ü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)
8 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
Grobaufbau von Samsung internet@tv Apps
Maple Browser
Application Manager
App App App
9 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
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
10 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
Manifest Datei●Definiert Typ der Anwendung●Kategorie für App-Store●Meta-Informationen
11 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
Verschiedene Anwendungstypen
TV AppFull-screen application*
Single-wide application*
Ticker application*
* In Europa sind nur Full-screen zugelassen
12 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
Start der Anwendung / „Webseite“
13 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
app.json Datei
• Definition der Szenen
• Definition eines Themes für vorgefertigte Komponenten (zur Zeit gibt es nur einen Theme)
14 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
Initialisierungsdatei
• Definition der initialen Szene.
• Ähnlich der main() Methode bei C und Java.
15 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
HTML
• Definition von Containern die später mittels Javascript zu funktionalen Komponenten werden.
16 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
Scene („View“)
17 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
Stylesheet
18 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
XHR Beispiel aus dem Samsung App Development Guide
19 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
Event Handling
Konstante für Keycode. Dieser steht für eine Taste auf der Fernbedienung.
20 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
Es geht auch einfacher mit jQuery
21 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
Samsung internet@tv Emulator
22 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
Samsung TV App Beispiel
23 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
Yahoo Connected TV
24 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
Ü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.
25 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
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
26 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
Yahoo Sidebar Widget Beispiel
27 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
Manifest
28 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
Initialisierungsdatei
29 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
Eventhandler
30 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
Sidebar View
31 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
Lokalisierung
32 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
Kontakt:
E-Mail: [email protected]: http://blog.muench-worms.deTwitter: cmuenchXing: https://www.xing.com/profile/Christian_Muench7
Danke!