Internet@TV

2 869 vues

Publié le

Présentation des enjeux de la télévision sur internet et exemple d'application réalisée sur Samsung TV

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 869
Sur SlideShare
0
Issues des intégrations
0
Intégrations
360
Actions
Partages
0
Téléchargements
13
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Internet@TV

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

×