SlideShare ist ein Scribd-Unternehmen logo
TV App Development

    Überblick und Einblick




          Christian Münch

1             netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · info@netz98.de · 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
     – ...

2                               netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · info@netz98.de · www.netz98.de
Was braucht ein Endverbraucher?



•   Internetfähigen Fernseher
•   Internetfähigen Blueray Player
•   Spezielle Set-Top Box




3                               netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · info@netz98.de · 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
4                          netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · info@netz98.de · 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.




5                              netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · info@netz98.de · www.netz98.de
Samsung internet@tv Apps




6              netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · info@netz98.de · 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)
•




7                                   netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · info@netz98.de · www.netz98.de
Grobaufbau von Samsung
       internet@tv Apps



           App          App                        App


                 Application Manager


                   Maple Browser




8                    netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · info@netz98.de · www.netz98.de
Samsung internet@tv App
      Verzeichnisstruktur
      Layouts (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


9     netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · info@netz98.de · www.netz98.de
Manifest Datei
                               ●Definiert Typ der Anwendung
                               ●Kategorie für App-Store

                               ●Meta-Informationen




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


                             Full-screen application*
           TV App




                             Single-wide application*




                             Ticker application*




                                             * In Europa sind nur Full-screen zugelassen


11                    netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · info@netz98.de · www.netz98.de
Start der Anwendung / „Webseite“




12         netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · info@netz98.de · www.netz98.de
app.json Datei

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



13              netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · info@netz98.de · www.netz98.de
Initialisierungsdatei
                             •     Definition der initialen Szene.
                             •     Ähnlich der main() Methode
                                   bei C und Java.




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

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




15          netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · info@netz98.de · www.netz98.de
Scene („View“)




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




17   netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · info@netz98.de · www.netz98.de
XHR Beispiel aus dem Samsung App
            Development Guide




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



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




19             netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · info@netz98.de · www.netz98.de
Es geht auch einfacher mit jQuery




20                   netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · info@netz98.de · www.netz98.de
Samsung internet@tv Emulator




21                    netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · info@netz98.de · www.netz98.de
Samsung TV App Beispiel




22                  netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · info@netz98.de · www.netz98.de
Yahoo Connected TV




23           netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · info@netz98.de · 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.




24                         netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · info@netz98.de · www.netz98.de
Yahoo Connected TV Verzeichisstruktur



                                  Widget Icons für Widget-Leiste


                                  Eigene Javascript Bibliothek
                                  für Business Logik
                                  Views mit Komponenten


                                  Zusätzliche Dateien / Assets;
                                  Lokalisierung

                                  Meta-Informationen


25                  netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · info@netz98.de · www.netz98.de
Yahoo Sidebar Widget Beispiel




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




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




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




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




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




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


                     Kontakt:
                     E-Mail: c.muench@netz98.de
                     Blog: http://blog.muench-worms.de
                     Twitter: cmuench
                     Xing: https://www.xing.com/profile/Christian_Muench7



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

Weitere ähnliche Inhalte

PPTX
Confluence 4.1 Übersicht
PPTX
drivegood
PDF
Android Entwicklung
PDF
Wdsi 3G Wi Fi Data Offloading Dashboard Features
PDF
Mobile Applikationen - Juni 2013 - Cross-Plattform-Entwicklung
PPTX
PDF
S wifi presentation
Confluence 4.1 Übersicht
drivegood
Android Entwicklung
Wdsi 3G Wi Fi Data Offloading Dashboard Features
Mobile Applikationen - Juni 2013 - Cross-Plattform-Entwicklung
S wifi presentation

Ähnlich wie TV App Development - Überblick und Einblick (20)

PDF
Continous Integration in einem Open Source Projekt
PDF
Magento 2 Seminar - Christian Muench - Magerun2
PDF
ISD_2016_Solution_I_ Fabian_Reinhard
PDF
Uge Pres New Inhalt Es 090415
PPTX
Magento 2 - Module im Überblick
PDF
Abläufe mit Phing automatisieren
PDF
2012_10 SNoUG Building Social Software
PPTX
CCC beim 21. IndustrieTag InformationsTechnologie der Uni Halle
PDF
GIMIK Systeme - App Entwicklung, Softwareentwicklung, Software Outsourcing
PPSX
Enterprise mashups - Remix the Web. Create your own workplace.
PDF
MBS09 myheimat.de - life is local Dr. Martin Huber (Geschäftsführer gogol med...
 
PPTX
Silverlight 2.0 Prozess Editor
PPTX
Schnellübersicht Zeiterfassung Sap Business ByDesign
PDF
Artikel im Swiss IT Magazine: Marktuebersicht Web-Agenturen
PDF
ConventionCamp Hannover
PDF
E-Voting, die Sicherheit und die Rolle der Experten
PDF
Webinar: BigData - Vom Hype zum Nutzen
PDF
Die Cloud Telefonanlage von vio:networks
PDF
20100623 netzstrategen - bvda - google-vortrag
KEY
Social Media Monitoring mit datenwerks Opinion Tracker
Continous Integration in einem Open Source Projekt
Magento 2 Seminar - Christian Muench - Magerun2
ISD_2016_Solution_I_ Fabian_Reinhard
Uge Pres New Inhalt Es 090415
Magento 2 - Module im Überblick
Abläufe mit Phing automatisieren
2012_10 SNoUG Building Social Software
CCC beim 21. IndustrieTag InformationsTechnologie der Uni Halle
GIMIK Systeme - App Entwicklung, Softwareentwicklung, Software Outsourcing
Enterprise mashups - Remix the Web. Create your own workplace.
MBS09 myheimat.de - life is local Dr. Martin Huber (Geschäftsführer gogol med...
 
Silverlight 2.0 Prozess Editor
Schnellübersicht Zeiterfassung Sap Business ByDesign
Artikel im Swiss IT Magazine: Marktuebersicht Web-Agenturen
ConventionCamp Hannover
E-Voting, die Sicherheit und die Rolle der Experten
Webinar: BigData - Vom Hype zum Nutzen
Die Cloud Telefonanlage von vio:networks
20100623 netzstrategen - bvda - google-vortrag
Social Media Monitoring mit datenwerks Opinion Tracker
Anzeige

Mehr von Christian Münch (11)

PDF
DDEV - Extended
PDF
n98-magerun2 - Presentation 2020
PDF
Magento 2 Zertifizierung - Wissenswertes und ein paar Tipps
PDF
12 Factor Apps with PHP
PDF
Jenkins to Gitlab - Intelligent Build-Pipelines
PDF
Magento Headless - Stammtisch Rhein-Main
ODP
Magento auf der Kommandozeile: n98-magerun, ein netz98 Tool
ODP
Abläufe mit PHP und Phing automatisieren
ODP
Caching in PHP - Status Quo
PDF
INMON CMS Entwicklung / Funktionen
PDF
Php Schulung
DDEV - Extended
n98-magerun2 - Presentation 2020
Magento 2 Zertifizierung - Wissenswertes und ein paar Tipps
12 Factor Apps with PHP
Jenkins to Gitlab - Intelligent Build-Pipelines
Magento Headless - Stammtisch Rhein-Main
Magento auf der Kommandozeile: n98-magerun, ein netz98 Tool
Abläufe mit PHP und Phing automatisieren
Caching in PHP - Status Quo
INMON CMS Entwicklung / Funktionen
Php Schulung
Anzeige

TV App Development - Überblick und Einblick

  • 1. TV App Development Überblick und Einblick Christian Münch 1 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 2. 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 – ... 2 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 3. Was braucht ein Endverbraucher? • Internetfähigen Fernseher • Internetfähigen Blueray Player • Spezielle Set-Top Box 3 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 4. 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 4 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 5. 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. 5 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 6. Samsung internet@tv Apps 6 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 7. Ü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) • 7 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 8. Grobaufbau von Samsung internet@tv Apps App App App Application Manager Maple Browser 8 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 9. Samsung internet@tv App Verzeichnisstruktur Layouts (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 9 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 10. Manifest Datei ●Definiert Typ der Anwendung ●Kategorie für App-Store ●Meta-Informationen 10 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 11. Verschiedene Anwendungstypen Full-screen application* TV App Single-wide application* Ticker application* * In Europa sind nur Full-screen zugelassen 11 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 12. Start der Anwendung / „Webseite“ 12 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 13. app.json Datei • Definition der Szenen • Definition eines Themes für vorgefertigte Komponenten (zur Zeit gibt es nur einen Theme) 13 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 14. Initialisierungsdatei • Definition der initialen Szene. • Ähnlich der main() Methode bei C und Java. 14 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 15. HTML • Definition von Containern die später mittels Javascript zu funktionalen Komponenten werden. 15 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 16. Scene („View“) 16 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 17. Stylesheet 17 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 18. XHR Beispiel aus dem Samsung App Development Guide 18 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 19. Event Handling Konstante für Keycode. Dieser steht für eine Taste auf der Fernbedienung. 19 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 20. Es geht auch einfacher mit jQuery 20 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 21. Samsung internet@tv Emulator 21 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 22. Samsung TV App Beispiel 22 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 23. Yahoo Connected TV 23 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 24. Ü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. 24 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 25. Yahoo Connected TV Verzeichisstruktur Widget Icons für Widget-Leiste Eigene Javascript Bibliothek für Business Logik Views mit Komponenten Zusätzliche Dateien / Assets; Lokalisierung Meta-Informationen 25 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 26. Yahoo Sidebar Widget Beispiel 26 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 27. Manifest 27 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 28. Initialisierungsdatei 28 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 29. Eventhandler 29 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 30. Sidebar View 30 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 31. Lokalisierung 31 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de
  • 32. Danke! Kontakt: E-Mail: [email protected] Blog: http://blog.muench-worms.de Twitter: cmuench Xing: https://www.xing.com/profile/Christian_Muench7 32 netz98 new media GmbH · Haifa-Allee 2 · 55128 Mainz · [email protected] · www.netz98.de