Download - Internet@TV
11
Prez Flash :: Internet@TV
30 août 201130 août 2011
Kévin GrosselKévin Grossel
2 / 29© Klee Group Prez Flash Internet@TV
Introduction sur les Smart TV
Développer dans l’univers Samsung
Composition de l’application
Problèmes techniques liés au développement
Aperçu de la navigation dans l’application
Retour d’expérience
Sommaire
3 / 29© Klee Group Prez Flash Internet@TV
Smart TV
Nouvelle génération de TV
Connexions Wifi ou Ethernet pour partage de médias
Box
PC
Smartphone
Tablette
Différents services
Navigation: Internet@TV, Google TV, Yahoo TV
Vidéos: catch-up TV, VOD
Applications: news, webradios, sports…
4 / 29© Klee Group Prez Flash Internet@TV
Acteurs du marché
Constructeurs de téléviseurs
Samsung
LG
Sony
Développeurs d’applications pour Smartphone
Apple
Opérateurs téléphoniques
Orange
Free
Opposition des chaînes de télévision traditionnelles
5 / 29© Klee Group Prez Flash Internet@TV
Rendre « Smart » une TV
Téléviseur « Smart »
Samsung
Sony
LG
Panasonic
Boitier multimédia « Smart »
Toshiba: Toshiba Places
LG: ST600 Smart TV
Boxee
6 / 29© Klee Group Prez Flash Internet@TV
Standardisation
2010: les Smart TV représentaient 20%
des télévisions envoyées de par le monde
2014: DisplaySearch prévoit une
vente de 123 millions de Smart TV dans
le monde (58% des télés à écran plat)
Les Smart TV plus populaires que les TV 3D
7 / 29© Klee Group Prez Flash Internet@TV
Introduction sur les Smart TV
Développer dans l’univers Samsung
Composition de l’application
Problèmes techniques liés au développement
Aperçu de la navigation dans l’application
Retour d’expérience
Sommaire
8 / 29© Klee Group Prez Flash Internet@TV
Samsung
Plus grand Apps Store pour TV
Samsung SDK accessible au public
Forum d’aide pour les développeurs
9 / 29© Klee Group Prez Flash Internet@TV
Samsung SDK
Application Web
HTML 4
CSS 2
JavaScript 1.8
Fichier config.xml
Navigateur Maple (Markup engine Platform for Embedded Systems)
Application Manager: Smart Hub
10 / 29© Klee Group Prez Flash Internet@TV
Ergonomie
Navigation sur la page avec une télécommande
Navigation sur la page à gérer par le développeur de l’application
Ecriture par IME widget de Samsung
11 / 29© Klee Group Prez Flash Internet@TV
Introduction sur les Smart TV
Développer dans l’univers Samsung
Composition de l’application
Problèmes techniques liés au développement
Aperçu de la navigation dans l’application
Retour d’expérience
Sommaire
12 / 29© Klee Group Prez Flash Internet@TV
Application Klee
Présenter l’entreprise
Plaquettes
Offres de stages
Vidéos
Naviguer facilement et rapidement
Carrousels
13 / 29© Klee Group Prez Flash Internet@TV
Composition de l’application
Application séparée en 3 pages
Index.html : page des carrousels
Formulaire.html : page de postulation
Video.html : page pour visionner une vidéo
Librairies utilisées
jMyCarousel qui utilise jquery
Tutoriaux de Samsung: IME, Video
Ressources
Thème, offres de stage et vidéos de KTouchUnivers de Mike Gorodilin
Vidéos fournies par le tutoriel de Samsung
14 / 29© Klee Group Prez Flash Internet@TV
Index.html
Déplacement dans les carrousels
Agrandissement de l’image sélectionnée
Possibilité d’appuyer sur Postuler ou de Fermer l’image
15 / 29© Klee Group Prez Flash Internet@TV
Formulaire.html
Ecrire via l’IME de Samsung
Déplacement dans les champs
Envoi du formulaire
16 / 29© Klee Group Prez Flash Internet@TV
Video.html
Lire une vidéo
Possibilité de mettre en Pause, Avance Rapide, Retour en Arrière…
17 / 29© Klee Group Prez Flash Internet@TV
Recherche de données
Images et vidéos récupérées par XHR
Ajouter/supprimer/modifier sans modifier les pages de l’appli
Document comportant les sources en langage JSON
Langage léger
Simple à mettre en œuvre
18 / 29© Klee Group Prez Flash Internet@TV
Transfert d’informations
Transfert du numéro d’image ou de vidéo
Sauvegarde du numéro dans la requête
La requête est ajoutée à l’url de la page cible
Ajouter à la requête les informations de Smart Hub pour l’IME ?country=US&language=1&lang=en&modelid=VALENCIA&server=development&firmware=T-SPHAKRC-1000&remocon=1_35_259_0&area=USA
19 / 29© Klee Group Prez Flash Internet@TV
Introduction sur les Smart TV
Développer dans l’univers Samsung
Composition de l’application
Problèmes techniques liés au développement
Aperçu de la navigation dans l’application
Retour d’expérience
Sommaire
20 / 29© Klee Group Prez Flash Internet@TV
Problèmes techniques
Très peu de mémoire disponible pour les images (environ 1.3Mo)
Impossibilité de charger toutes les grandes images (200ko) dès le début
Incompatible avec certaines librairies (Highslide par exemple)
Créer l’élément image puis le détruire à la fin de la visualisation
Problème lors du changement de résolution (960*540 à 1280*720)
21 / 29© Klee Group Prez Flash Internet@TV
Test sur TV
Relier le téléviseur à l’ordinateur
Configurer les paramètres
22 / 29© Klee Group Prez Flash Internet@TV
Authentification par Samsung
Remplir des formulaires
Upload l’application
23 / 29© Klee Group Prez Flash Internet@TV
Introduction sur les Smart TV
Développer dans l’univers Samsung
Composition de l’application
Problèmes techniques liés au développement
Aperçu de la navigation dans l’application
Retour d’expérience
Sommaire
24 / 29© Klee Group Prez Flash Internet@TV
Navigation dans l’application
25 / 29© Klee Group Prez Flash Internet@TV
Navigation dans le formulaire
26 / 29© Klee Group Prez Flash Internet@TV
Navigation pour la vidéo
27 / 29© Klee Group Prez Flash Internet@TV
Introduction sur les Smart TV
Développer dans l’univers Samsung
Composition de l’application
Problèmes techniques liés au développement
Aperçu de la navigation dans l’application
Retour d’expérience
Sommaire
28 / 29© Klee Group Prez Flash Internet@TV
Retour d’expérience
Facile à développer pour développeurs web
Langages html, css et JavaScript
Nombreux tutoriaux
Manière de coder
Cheminement à suivre pour Samsung App Store
Communauté active sur le forum Samsung
Mises à jour régulières
Dizaine de posts par jour
29 / 29© Klee Group Prez Flash Internet@TV
Questions ?
Retrouvez nous sur le blog technique de Klee
http://blog.kleegroup.com/teknics
[email protected]@teKnics_Klee