SmartTV, SecondScreen, HybridTV – Introduction technique à la HbbTV & wireframing d’applications de HbbTV

by Posted on

SmartTV, SecondScreen, HybridTV - Introduction technique à la HbbTV & wireframing d'applications de HbbTVCopyright © IRT GmbH

Chez 3WDOC, nous continuons d’explorer les potentialités en terme de services à valeur ajoutée sur ce nouveau support qu’est la Télévision connectée, il en va de même pour la Radio car elle est connectée elle-aussi. La maturité de cette convergence tant attendue semble en partie achevée, c’est donc une nouvelle ère qui commence vraiment, celle où les médias historiques (Radio, Télévision, Presse) doivent se réinventer sur des plates-formes Web, Mobile et TV connectée liant les pratiques sociales du Web que sont le partage, la prescription et la recherche avec le métier historique de diffusion qui fût le leur. Cette métamorphose est un “mal” ou un “bien”, en tous les cas, elle est inéluctable pour tous ces médias. Chronologiquement, la télévision est le dernier média à subir ce “tsunami numérique” suite à un processus long mais inexorable, tant du point de technologique que des usages. Processus émaillée en vrac par l’apparition du haut-débit, l’émergence des codecs de compression de plus en plus performants, la mobilité et ses nouveaux terminaux, de l’émergence du HTML5 et du navigateur moderne “ROI”, du Cloud et de la virtualisation des services et des contenus (désintermédiation)… Bref d’une mutation profonde et tout azimuts dans l’écosystème de la diffusion et de la production d’images animées… Espérons juste que cette mutation qui a eu lieu sur d’autres marchés (téléphonie, finance) ne provoque ni catastrophe avec une concurrence acharnée entre producteurs couplé à une offre de contenus pléthorique de qualité médiocre, ni choice fatigue*, cette sorte d’épuisement du consommateur, du téléspectateur, constamment connectée et sollicitée donc finalement déboussolé.

Mais, la tendance à venir n’est pas notre propos du moment, tout à la joie que nous sommes à découvrir le nouveau défi enfin tangible que représente la télévision connectée en terme d’enjeux UX, de services à valeur ajoutée, de design, d’expérience et de technologie. Ces propos sont tout aussi applicables à la radio comme à la presse, mais chez 3WDOC, on se concentre depuis longtemps sur l’évolution de la télévision et de ses usages.

Expédions la définition de la HbbTV

…Ou plutôt résumons-là en des termes human-readable, ni trop verbose, ni dans un franglish de bonne aloi, non de préférence tout simplement dans des mots bien compréhensibles.

D’abord, tous les mots qui interpellent : Hybrid, TV, seamlessly, connected TVs, set-top boxes, standards & web technologies, manufacturers, compliant, devices que l’on traduit sans prétention par Hybrides, télévision, transparent, TV connectée, set-top boxes, normes et technologies web, fabricants, appareils, compatibles
Puis, une forme de définition plus conforme à l’usage (dans les 2 sens du terme) et par la négative, en pensant services ou produit fini comme dans un processus agile ou tout simplement intelligible :

HbbTV est une norme qui techniquement homogénéise les supports (TV, Radio et Web) afin de rendre possible l’introduction des usages liés au Web, notamment sociaux, que sont : la prescription, le partage et la recherche.
Toutefois, son avènement est tributaire de l’émergence d’un parc d’appareils (devices) compatibles. Pour le moment, ces appareils sont assez atomisés technologiquement parlant or comme la norme HbbTV, ces derniers sont un pré-requis à l’émergence de nouveaux services.

Le texte original de définition de la HbbTV

HbbTV (Hybrid Broadcast Broadband TV) is a new industry standard providing an open and business neutral technology platform that seamlessly combines TV services delivered via broadcast with services delivered via broadband and also enables access to Internet only services for consumers using connected TVs and set-top boxes. The founding members of the HbbTV consortium together with a large group of supporters jointly developed the HbbTV specification to create a global standard for hybrid entertainment services. Version 1.2.1 of this specification has been approved by ETSI as ETSI TS 102 796 in November 2012.

The HbbTV specification is based on existing standards and web technologies including OIPF (Open IPTV Forum), CEA, DVB and W3C. The standard provides the features and functionality required to deliver feature rich broadcast and internet services. Utilizing standard Internet technology it enables rapid application development. It defines minimum requirements simplifying the implementation in devices and leaving room for differentiation, this limits the investment required by CE manufacturers to build compliant devices.

Source : http://www.hbbtv.org/pages/about_hbbtv/introduction.php

Là encore tout est une question de recherche, à n’en pas douter, pour ceux d’entre vous que la technique ne rebute pas… Ils sont plus nombreux qu’on le croit, voici des fragments d’un excellent article, de 2010, sur la HbbTV de Klaus Merkel de l’IRT (Institut für Rundfunktechnik) de Munich. Article dont nous nous sommes largement inspirés pour savoir de quoi il en retourne techniquement sur la HbbTV.

Selon les termes mêmes de Klaus Merkel, les spécifications techniques de la HbbTV n’introduisent que peu de nouveaux éléments techniques. Ces spécifications sont d’ailleurs basées sur des normes déjà existantes.

Ce qui d’évidence présente, toujours selon cet article, l’avantage indéniable d’être économique en termes de coût de développement et donc de réduire considérablement le délai de mise sur le marché (time-to-market). L’article est écrit en 2010, nous sommes en 2013 et nous voyons fleurir chaque jour des services de télévision connectée !

Plus précisément, la HbbTV se base sur les 3 normes suivantes :

  • Le CE-HTML
  • Un “navigateur HbbTV” dont les spécifications inclues les recommandations de l’Open IPTV Forum
  • Les normes de la DVB (Diffusion Vidéo Numérique)

Les 3 fondamentaux techniques ou normes techniques de la HbbTV

Passons en revue rapidement, les 3 piliers techniques de la HbbTV

  • CE-HTML

    Tout d’abord, le CE-HTML, c’est le langage pour créer des IHM ou interfaces utilisateurs pour l’électronique grand public, traduction assez fidèle de user interface pages for Consumer Electronics (CE).
    C’est en en pratique, un des points de convergence entre Web et TV, puisque le CE-HTML s’appuie sur les normes définies par le W3C et définit le corpus HTML (profile) pour tous les appareils électroniques grand public (CE devices). On y retrouve donc les éléments bien connus du développement web : XHTML 1.0, DOM 2, CSS TV profile 1.0 et bien sûr la norme dont les spécifications sont connus sous le nom de ECMAScript-262, plus connu sous le nom de JavaScript. Ce CE-HTML est tout particulièrement optimisé pour le rendu de pages web HTML/JavaScript sur des appareils électroniques grand public (CE devices), notamment les écrans TV.

    Cela va plus loin encore dans l’utilisation des technologies Web, ainsi l’objet XMLhttpRequest est implementé dans le CE-HTML. Il est donc tout à fait possible de développer des applications HTML très similaires techniquement à celle du Web, truffé d’AJAX, s’appuyant sur JSON, bref ce qui fait grosso modo le web 2.0.

    Tout naturellement, toute l’expérience de développement acquises sur le Web ainsi que les bonnes pratiques d’ergonomie ou de UX experience sont donc approximativement transposables sur le HbbTV. On ne doit donc pas s’étonner de voir désormais l’arrivée en force de poids-lourds de la diffusion web sur la télévision, ces derniers y font offrent pratiquement la même expérience. On veut parler de Youtube et Google ou Orange et Dailymotion. On est donc bien dans entré dans la consommation ou l’expérience audiovisuelle multi-canal (web, mobile, TV connectée), car techniquement ce qui est vrai pour la télévision, l’est aussi pour les autres plate-formes.

    Plus prosaïquement, un dernier point d’importance sur le CE-HTML, il contient également les paramètres susceptibles de manipuler les touches des principales des télécommandes de téléviseur comme Flash en son temps pouvait pour permettre d’interagir avec les touches d’un clavier d’ordinateur mais c’est du passé maintenant !

  • Le navigateur de l’Open IPTV Forum (Open IPTV Forum browser profile)

    Il existe tout de même un hic, le CE-HTML ne convient pas nécessairement à tout les interfaces du monde de DVB (Digital Video Broadcast ou Diffusion Vidéo Numérique en langue française). C’est là que rentre en scène l’Open IPTV Forum, qui en Janvier 2009, a publié les spécifications d’un navigateur HbbTV. En substance, ces spécifications ont donné naissance à un navigateur qui convient pour des systèmes DVB sur IPTV mais aussi pour des systèmes DVB hybrides via des APIs.

    Ces API étayent des fonctions qui permettent une meilleure combinaison de l’image du téléviseur avec des pages HTML, pour syntoniser* (tune) la DVB pour la télévision ou pour des services de Radio afin d’ajouter des événements à la “timer list”, de lire les métadonnées DVB et toutes autres informations liées à la DVB.

    En conclusion, l’équation est simple : CE-HTML + le navigateur Open IPTV navigateur = le navigateur HbbTV

    syntoniser : réaliser une syntonie; accorder deux circuits oscillant sur une même fréquence. A comprendre dans un sens moins technique d’harmoniser.

    Source : http://www.oipf.tv/

    Pour mémoire, les principaux fabricants et opérateurs, acteurs de la “révolution numérique” sont membres l’Open IPTV Forum : Samsung, Ericsson, Sony Corporation, France Telecom, Telecom Italia, Philips ainsi que Abox42, Accenture Global Services Limited, Alcatel-Lucent, BBC, BluFocus, Broadpeak, DCC Labs, Deutsch Telekom, D-Link, Digitsoft.tv, Digital TV Labs, Dolby, DTG Testing Limited, DTS, DotScreen, Espial, Fraunhofer, Huawei, Humax, HwaCom, IRT, ITRI, KDDI, Mistserver.org, Motorola Mobility, Mstar Semiconductor, Nagra, Opera Software, PCCW, Penki Kontinentai, Perpetual Solutions, RAI, Rovi, Rogers, SES, STC, Stingray Digital Group, Testronics, The Weather Network, 3 Screen Solutions, TNO, Toshiba, TP Vision, UXP Systems, Verimatrix, WMC Global, Zenterio, Zyxel. Ce qui est plutot bien pour un organisme de normalisation !

  • La DVB (Diffusion Vidéo Numérique)

    L’existence d’un navigateur est certes la condition sine qua non, mais en matière de DVB (Diffusion Vidéo Numérique), il en faut en plus notamment en terme de capacité d’intégration, afin de renforcer le modèle économique du diffuseur (publicité) ou de garantir la qualité de service auprès du consommateur/utilisateur.

    Ces gages de qualité sont détaillés dans la norme DVB décrite dans “Signalling and carriage of interactive applications and services in hybrid broadcast/broadband environments” complétée en Mars 2009 et publiée par l’ETSI en Février 2010.

    Comme le titre l’indique, cette norme DVB définit la signalisation des applications qui seront exécutées dans un contexte de diffusion DVB multiplexes de services de Télévision ou de Radio. Cette signalisation est rendue possible via la table AIT (Application Information Table), diffusée pour chaque service du réseau qui véhicule une ou plusieurs applications interactives, et qui renseigne les caractéristiques de ces applications. Cette table AIT est renseignée elle-même par la table PMT (Programme Map Table) du service. (Il faut suivre…)

    Voyons plutôt maintenant ce qu’implique dans la fait, ce “jargon” un peu technique.
    L’AIT transporte la signalisation de toutes les applications qui sont censées fonctionner dans le cadre de ce programme/service. D’autres applications peuvent être autorisées à s’exécuter à ce programme/service, mais elles sont arrêtées, sauf si elles sont référencées dans l’AIT du programme/service. Concrètement, il est ainsi possible d’éviter, par exemple, que les programmes de télévision sont “hackés” par des applications tierces transportant de la publicité ou d’autres “overlays” – donc menacer à la fois le modèle économique du diffuseur (en interdisant sa publicité par exemple) et d’ébranler la confiance du spectateur dans l’intégrité de ce qui est vu sur l’écran .

    Une des applications signalée dans la table AIT peut être marquée comme “autostart”, ce qui signifie que cette application se lance automatiquement après le réglage du service correspondant.

    Afin de ne pas agacer le téléspectateur avec des “overlays” indésirables et autoriser une expérience uniforme pour le démarrage de l’application, l’application dessine une petite icône comportant un bouton rouge (Red Button) au démarrage puis qui disparaît au bout de quelques secondes.

    C’est sans doute la raison pour laquelle, la BBC a nommé ses services de télévision interactive : BBC Red Button et BBC Connected Red Button !

    Source : http://www.bbc.co.uk/aboutthebbc/insidethebbc/whatwedo/redbutton/

    Bien que l’application est active du point de vue technique, il ne se passe rien à l’écran jusqu’à ce que l’utilisateur appuie sur ce fameux bouton rouge (Red Button).

Table de rappel des acronymes de la HbbTV

Une table des abréviations, un viatique indispensable pour naviguer dans les concepts de la HbbTV, cités plus haut et pas toujours expliqués in-situ.

AbréviationsDéfinitions
AIT Application Information Table
API Application Programming Interface
CE Consumer Electronics
CSS Cascading Style Sheets
DOM Document Object Model
DSM-CC Digital Storage Media – Command and Control
DVB Digital Video Broadcasting
http://www.dvb.org/

ECMA European Computer Manufacturers Association
EPG Electronic Programme Guide
ETSI European Telecommunication Standards Institute
http://pda.etsi.org/pda/queryform.asp
HBB Hybrid Broadband/Broadcast
MHEG Multimedia and Hypermedia information coding Expert Group

http://www.impala.org/

HTML HyperText Markup Language
IBC International Broadcasting Convention

http://www.ibc.org/

IFA Internationale Funkausstellung (Berlin consumer electronics exhibition)
IPTV Internet Protocol Televison
IRT Institut für Rundfunktechnik GmbH (German broadcast technology research centre)

http://www.irt.de/

MHP (DVB) Multimedia Home Platform
MPEG Moving Picture Experts Group

http://www.chiariglione.org/mpeg/

PMT (MPEG) Programme Map Table
W3C World Wide Web Consortium

http://www.w3.org/

XHTML eXtensible HyperText Markup Language
XML eXtensible Markup Language

Source : http://tech.ebu.ch/docs/techreview/trev_2010-Q1_HbbTV.pdf

Le décalogue des bonnes pratiques dans la création d’un service de “Connected TV” par @javier_lasa

Comme il a été dit dans un article précèdent Cf voir ci-dessus, quelques bonnes pratiques à privilégier dans la conception d’application pour la télévision connectée. Les sources sont si rares que nous préférons les citer in-extenso…

Cette liste, sans être sans doute exhaustive, a le mérite d’être extrêmement synthétique et parlante.

10 Rules for Connected TV development

  1. Rule 1 # Define a strategy
  2. Rule 2 # Tv isnt a PC neither a mobile
  3. Rule 3 # Tech specs matter
  4. Rule 4 # Flattern information hyerachy
  5. Rule 5 # Navigation is key
  6. Rule 6 # Simplify user interface controls
  7. Rule 7 # Enable interaction and conversation
  8. Rule 8 # Testing and performance
  9. Rule 9 # Define advertising strategy and analytics
  10. Rule 10 # Enhance your project manager skills

Source : http://fr.slideshare.net/JavierLasa/10-rules-for-connected-tv-apps-development

Il est temps de passer de la théorie à la pratique…. Et de proposer une librairie de wireframing comme dans notre article précèdent sur la Google TV afin que chacun puisse s’approprier autant que faire se peut ces nouvelles interfaces.

Quelques écrans des applications de HbbTV en Europe

Un petit benchmark des applications disponibles en Europe qui nous servons de source d’inspiration.

Notre “mockup” d’application pour la HbbTV

Le seul écran de notre application HbbTV
SmartTV, SecondScreen, HybridTV - Introduction technique à la HbbTV & wireframing d'applications de HbbTV

La librairie complète sous Balsamiq Mockup
SmartTV, SecondScreen, HybridTV - Introduction technique à la HbbTV & wireframing d'applications de HbbTV

La librairie complète sous Balsamiq Mockup à télécharger

La version de cette librairie est à télécharger au format .zip ici. Pour fonctionner, elle nécessite d’utiliser Balsamiq Mockups 2.1.11 ou +. Télécharger HbbTV_TV-screen-v5.zip

Plus d’informations

Published by Bruno Flaven

By now, Bruno Flaven works as AI Coordinator. He has been a project manager in a wide variety of Internet business applications both in Mobile and in Desktop for 20 years now. You can find more information about his professional life on his personal website (www.flaven.fr) or his linkedin profile: https://www.linkedin.com/in/brunoflaven. He is currently working In France Media Monde (FMM) mostly on mobile applications (iOS and Android). He has also worked as P.O for a Backoffice project made with Symfony. He also made few trainings to facilitate the handling of the tools that he helps to make.

Related Posts