ObjectCode GmbH
Couch Commerce: Marketing per Smart-TV
Wir bauen Apps.
ObjectCode
Jörg ViolaGründer und GeschäftsführerJava, Scala, JavaScriptWeb, App, Smart TV@joergviola
ObjectCode
Smart TV
Markt
• Was ist Smart TV?• Wer nutzt es?• Wofür?• Von wem kann
man lernen?
Usability
• Darstellung• Navigation• Eingabe
Technik
• Anbieter• Technologie-Stack• APIs• Entwicklungs-
prozess
?Was ist Smart TV?
Smart TV
HbbTV
Connected TV
Blu-ray
Set-Top-Box
IP-T
V
Web-TV
Net-TV
2nd Screen
Was ist Smart TV?
Für heute:
Smart TV Endgeräte erlauben den Konsum von Internet-Angeboten
parallel zum TV-Programm.
• mit dem Internet verbunden (WLAN)• Erweiterbar durch Apps
Smart TV
Facts
Anteil verkaufter Smart TVs: 50%
Davon tatsächlich verbunden: 59%
Mehr als einmal im Monat im Internet: >30%Quellen: ZVEI und Bitkom
Haushalte
500*
Apps
Anzahl der Smart TV Apps bei Samsung:
* Zum Vergleich: 800.000 im iOS AppStore
Wer nutzt‘s?
weiblich
männlich
Allg.
Smart TV 1.300 €2.000 €3.200 €5.500 €> 5.500 €
Quelle: Rovi Connected TV Advertising Field Study, Germany Phase 1, 2012
Akademiker: 38%
Eltern: 39%
©iStockphoto.com: NeustockImages
Wofür wird‘s genutzt?
Anderes
Soziale Netzwerke
Online Kanäle
Online Videothek
Surfen
Musik hören
Youtube
Archiv eines Fernsehsenders
Programmsuche
0% 5% 10% 15% 20% 25% 30% 35% 40%
Welche Inhalte?
1. Video2. Entertainment3. Information
©iStockphoto.com: MarsBars
Beispiel-Videos
BMW: http://bit.ly/11doVTIImmowelt: http://bit.ly/1455g9g
... und meine Webseite?
... und meine Webseite?
2nd Screen
Smartphone/Tablet
TV-Gerät • Programm-Infos• Socializing• Animiertes Shopping• Gelangweiltes Shopping
2nd Screen
• TV-Übertragungen live kommentieren• Reaktion auf Werbung belohnen• Gamification für TV-Werbung• Verlinkung von TV- und Web-Kampagne• Realtime Shopping• Social TV
Herausforderung:
• Gewähltes Programm erkennen
(Shazam, Zeebox, TVSync)
Usability
©iStockphoto.com: PhotonStock
Smart Hub
Foxtel
BILD
24
TVX
zubibu
Texteingabe
PIP
Usability
• Kontraste• Schriftgröße• Navigation• Texteingabe
Technik
©iStockphoto.com: metalhorse
Hersteller
LG – Toshiba - Panasonic
Philips - Sharp
Samsung
LG
Panasonic
ToshibaSharp
Philips
Sony
Sonstige
2
Technologie-Stacks
• Nativ (oft Java, Android)
• HbbTV
• HTML/CSS/JavaScript
©iStockphoto.com: alexsl
HbbTV
Sender
TV-Gerät
TV-Signal inkl. AI
Internet
Server
HbbTV
©hbbtv.pl
HTML/CSS/JS
TV-Gerät
AppStore
TV-Gerät
Server
App Bookmark
APIs
Feature Samsung NetTV Alliance
Content HTML5 CE-HTML oderHTML5
HTML5
Visuell CSS3 CSS2.1 + 3 (tw) CSS3 (tw)
Dynamik SquirrelFish ECMA-262 ed. 5 ECMA-262 ed. 5
Device APIs: Channel, Recorder Proprietär OIPF*-DAE ?
File API HTML5 HTML5 storage HTML5 storage
Payment Proprietär - -
Advertisement Proprietär - -
Share and Mobile Proprietär OIPF*-DAE -
Streaming Viele Codecs Viele Codecs Viele Codecs
DRM - OIPF*-DAE Widevine, PR
*: OIPF=Open IP TV Forum
CE-HTML
• Kein Flash• Keine kleinen Schriften oder Bilder• Mit Fernbedienung navigierbar• Highlight auf Navigationselementen• Nur Standard-Codecs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "ce-html-1.0-transitional.dtd">
Beispiel
Samsung App: Aktuelles Programm darstellen
Index.html
<html><head><script src="$MANAGER_WIDGET/Common/af/2.0.0/loader.js“/><script src="$MANAGER_WIDGET/Common/API/Widget.js“/><script src="$MANAGER_WIDGET/Common/API/TVKeyValue.js“/><script src="$MANAGER_WIDGET/Common/API/Plugin.js“/><script src="app/javascript/jquery-tv.js“/><script src="app/javascript/Main.js“/></head><body onload="Main.onLoad();“>
<div id="info"></div></body></html>
Main.js
Main.onLoad = function(){
tv.onLoad();info = document.getElementById("info");var s = "Infos:<br>";s += "Program title: "+tv.program().title + "<br>";s += "Program channel: "+tv.program().channel +
"<br>";info.innerHTML = s;
};
jquery-tv.js
tv.program = function() {var channel = deviceapis.tv.channel;return {
title : channel.getCurrentProgram().title,
channel : channel.getCurrentChannel().channelName
};}
config.xml
<widget><widgetname itemtype="string">pong</widgetname><description itemtype="string"></description><ThumbIcon itemtype="string“>icon.png</ThumbIcon><category itemtype="string">Games</category><fullwidget itemtype="boolean">y</fullwidget><ticker itemtype="boolean">n</ticker><width itemtype="string">960</width><height itemtype="string">540</height><autoUpdate itemtype="boolean">n</autoUpdate><ver itemtype="string">0.100</ver><childlock itemtype="boolean">n</childlock><login itemtype="boolean">y</login><cpname itemtype="string">Twitter</cpname><cpauthjs itemtype="string">Auth</cpauthjs>
</widget>
Packaging
Take away
Chancen
• Viele Geräte• Zielgruppe• Wenig Apps• Einfache Technik
Risiken
• Passende Inhalte• Usability• Viele Plattformen• Akzeptanz
Fragen?
©iStockphoto.com: drbimages