Documentacin CloudTV H5 de Activevideo

Santiago de Chile, Enero de 2014

ndice
1. Introduccin........................................................................................................................3 2. Tecnologa...........................................................................................................................4
2.1 ActiveVideo y CloudTV H5......................................................................................................................4 2.2 Arquitectura CloudTV H5.........................................................................................................................5 2.3 Que e !uede "e arrollar con CloudTV H5..............................................................................................# 2.4 $equi ito !ara de arrollar con CloudTV H5............................................................................................# 2.4.1 $equeri%iento &' ico de Hard(are !ara el de arrollo.......................................................................# 2.4.2 $equeri%iento )' ico de *o+t(are !ara el de arrollo.........................................................................# 2.4.3 , tructura de !rogra%acin..................................................................................................................12.4.4 &uena !ractica ...................................................................................................................................11 2.4.4.1 "i e.ando !ara TV............................................................................................................................11 2.4.4.2 /)0eto incru tado 1 Tercera 2arte &ro( er 2lug3In ......................................................................11 2.4.4.3 Tie%!o de e0ecucin de gr'+ico generado ......................................................................................12 2.4.4.4 Ani%acione ......................................................................................................................................12 2.4.4.5 2rue)a y de!uracin..........................................................................................................................12 2.4.4.4 &i)lioteca AVHT56 y , tructura del !royecto...............................................................................13 2.4.4.# 2antalla de de!uracin.......................................................................................................................13

3. "i+erencia entre una !'gina 7e) convencional y CloudTV HT565..............................15

1! "ntroduccin
El presente informe tiene por finalidad dar a conocer y explicar brevemente la plataforma tecnolgica CloudTV H5 perteneciente a la empresa ActiveVideo.

2! Tecnolog#a
El desarrollo de las Demos ue se explica en este informe! tiene como base la plataforma tecnolgica de soft"are conocida como CloudTV H5! perteneciente a la empresa ActiveVideo! pero #en ue consiste esta tecnolog$a%

2!1 ActiveVideo $ CloudTV H5

ActiveVideo es una compa&$a de soft"are del 'ilicon Valley ue utili(a tecnolog$a basada en la nube para llevar las interfaces de usuario avan(adas para cable y de )*TV set+top boxes y dispositivos electrnicos de consumo conectados. El producto principal de la compa&$a! CloudTV! es una plataforma de soft"are ue elimina la necesidad de los operadores de cable y otros proveedores de servicios de video para crear y gestionar m,ltiples versiones de gu$as para cada dispositivo. ActiveVideo anunci en -./- la disponibilidad de una nueva versin de la plataforma CloudTV! CloudTV H5! ue puede llevar las interfaces de navegacin o las aplicaciones escritas en HT015 para descodificadores digitales o dispositivos de CE conectados. 1as me2oras en la plataforma CloudTV H5 ue reducen el anc3o de banda y aumentan el rendimiento fueron anunciados en 2unio de -./4. Adem5s! ActiveVideo introdu2o una familia de clientes ligeros ue pueden entregar experiencias de usuario consistentes en diversos dispositivos conectados. CloudTV se integra perfectamente a las infraestructuras de red existentes! y proporciona m5xima agilidad de implementacin para clientes ActiveVideo. Al mover recursos de renderi(ado de aplicaciones a la nube y el uso de un cliente com,n para apoyar a todos los servicios! CloudTV permite a los proveedores de servicios! proveedores de contenido y agregadores de contenidos para aprovec3ar una plataforma de soft"are ue es6 %odular + CloudTV clientes pueden alinear las necesidades de la plataforma y de mercado! desplegando slo los productos necesarios para los niveles de servicio espec$ficos. 1a ampliacin de la plataforma para crecer las capacidades de servicio y 3uellas de mercado simplemente re uiere la adicin de nuevos componentes. A&ierto + CloudTV utili(a interfaces nativas! basadas en la 7eb y formatos de v$deo! incluyendo HT01 y 801 para un r5pido desarrollo y despliegue de contenidos y aplicaciones! as$ como apoyo a los servicios de terceros y plataformas de aplicacin. Virtual + CloudTV se e2ecuta en un entorno de data center! ue proporciona dos venta2as clave de los clientes6 la capacidad de beneficiarse de los avances en la tecnolog$a de data center y escalar de forma din5mica el servicio simplemente agregando m5s recursos del data center a trav9s de infraestructuras de nube privada y p,blica.

2!2 Ar'uitectura CloudTV H5

1a *lataforma CloudTV H5 abarca los siguientes elementos esenciales6 Stitcher6 El 'titc3er es el cora(n de la plataforma CloudTV H5. Combina un motor de aplicacin! motor de streaming! y un gestor de sesiones clave para controlar y entregar toda la experiencia de los usuarios desde la nube. 'titc3er e2ecuta y devuelve las aplicaciones HT015 y genera 0*E:+-+y flu2os de v$deo H.-;< compatibles en funcin de cada cliente. CloudTV (ano Cliente)6 CloudTV =ano es una familia de clientes ue permite la entrega de experiencias de televisin uniformes avan(adas del CloudTV 'titc3er a un amplio sector de los 'T> digitales y dispositivos conectados! e incluso a los millones de 'T>s digitales de primera generacin ue existen 3oy en d$a. Estos clientes ligeros! apodado CloudTV =ano 1ite! CloudTV nano"are y CloudTV =ano! se descargan o preinstalan en cual uier 'T> digital o dispositivo de consumo. Env$an principalmente pulsaciones de teclas del control remoto del usuario 3acia arriba! 'uperando las limitaciones de recursos en cual uier 'T> cambiando la mayor parte del procesamiento de interfa( de usuario en el data center. Se))ion %anager6 El Administrador de sesin proporciona todas las funciones de administracin de sesiones y de control necesarios para iniciar! mantener y terminar sesiones CloudTV a cual uier cliente CloudTV. Tambi9n es el punto en cual uier sistema de control y gestin externos! tales como los sistemas de anc3o de banda! suscriptores y administracin de sistemas de integracin.

Tran)codi*icador6 El transcodificador proporciona la capacidad de incorporar uno o m5s elementos de v$deo en aplicaciones HT015 ingestando y transcodificando v$deo en formatos comunes de cual uier fuente en formato ?stitc3able? para su uso por el 'titc3er. "n)ight6 El recopilador de datos )nsig3t recibe y recopila todas las sesiones relacionadas con CloudTV y personali(a los eventos m9tricos usados por HT015. 'e conecta con los sistemas de almacenamiento y presentacin de datos en sentido ascendente ue se pueden utili(ar para llevar a cabo un an5lisis detallado de uso para cual uier aplicacin CloudTV HT015.

2!+ ,ue )e -uede De)arrollar con CloudTV H5

Como 3emos podido apreciar 3asta este momento! la plataforma tecnolgica CloudTV H5 esta dise&ada para brindar soluciones a los proveedores de servicios de cable! en este sentido las posibilidades de desarrollar aplicaciones son variadas! tales como6 V.@.D. :u$a *rogram5tica Aedes 'ociales *ublicidad Comercio Electrnico 0osaicos Despliegue 0ultipantallas Buegos Concursos Aplicaciones ,tiles para el usuario tales como6 )nforme del clima! )ndicadores burs5tiles! restriccin ve3icular! conversor de divisas! 0apas y locali(acin geogr5fica! flu2o y control de transito! etc. Entonces! dependiendo del contexto! es posible desarrollar un sinn,mero de aplicaciones y servicios ba2o la plataforma tecnolgica CloudTV H5.

2!4 .e'ui)ito) -ara de)arrollar con CloudTV H5

*ara desarrollar aplicaciones para la plataforma CloudTV H5 es necesario tener conocimientos en HT01! C'' y Bava'cript. Adem5s de contar con la infraestructura necesaria para montar un ambiente de desarrollo tanto a nivel de Hard"are como de 'oft"are.

2!4!1 .e'uerimiento) /0)ico) de Hard1are -ara el de)arrollo!

En t9rminos de Hard"are para desarrollar aplicaciones para CloudTV H5 es necesario contar con un computador lo m5s actuali(ado en lo ue a mercado se refiere y adem5s contar con un servicio de banda anc3a proporcionado por alguna compa&$a del rubro.

2!4!2 .e'uerimiento) &0)ico) de So*t1are -ara el de)arrollo!

En t9rminos de 'oft"are y teniendo en consideracin ue se desarrollo una aplicacin de pruebas! es necesario un sistema operativo 2indo1) 3 4ro*e)ional o superior. Como las aplicaciones est5n reali(adas ba2o HT015 solo basta con tener un editor b5sico de texto! como El /loc de (ota) proporcionado por el sistema operativo. Es posible y altamente recomendable para dar un orden y estandari(acin al cdigo el contar con alg,n editor de cdigo HT01 el cual simplifica muc3o las tareas del desarrollo.

En particular se recomienda usar editores como6 + Adobe Dream"eaver C'5. + CltraEdit + =otepad DD + Editor HT01 Descargar e instalar un servidor 7eb local ya ue es necesario para poder probar y depurar las aplicaciones. Altamente recomendable es 7A0* 'erver versin *H* 5.4 para 4- >its. un navegador adecuado para probar las aplicaciones desarrolladas en HT01 5. *or recomendacin de ActiveVideo lo me2or es usar 5oogle Chrome. Descargar! descomprimir e instalar en el directorio de traba2o del servidor "eb local! el ActiveVideo 6avaScri-t 7rame1or8 2!1!1 El ActiveVideo Bava'cript Erame"orF proporciona una amplia variedad de m9todos de ayuda! integraciones de A*) y funcionalidad a las aplicaciones dirigidas a la *lataforma CloudTV H5. Descargar e instalar en el e uipo de desarrollo la aplicacin CloudTV *layer! la ue simula una pantalla de TV en la cual poder probar las aplicaciones desarrolladas y ue deben estar en la plataforma virtual CludTV H5. En la p5gina para desarrolladores de Active Video se pueden descargar las versiones para 0ac y 7indo"s. Cna ve( descargado e instalado! se puede e2ecutar para ver como se aprecian las aplicaciones desarrolladas6

Descargar e instalar en el e uipo de desarrollo un cliente ET* ya ue las aplicaciones deben ser subidas a una cuenta en CloudTV H5. En particular Active Video recomienda usar 7in'C* ET*.

De igual forma es importante destacar ue se re uiere crear una cuenta de usuario en el sitio para desarrolladores de ActiveVideo debido a ue permite tener acceso a descargar e2emplos y programas ue no estan disponibles para todos los ue acceden al sitio. Ademas se re uiere crear una cuenta 'andbox Gespacio virtual en CloudTVH para poder subir las aplicaciones desarrolladas y poder probarlas usando el CloudTV *layer. Cuando se crea una cuenta 'and>ox se aprecia lo siguiente6

En la figura se describe la ruta y puerto de acceso al servidorI y la ruta de acceso para las aplicaciones desarrolladas. Estos datos son importantes para usar el cliente E*T como tambi9n CloudTV *layer.

De esta forma! considerando todos los puntos descritos anteriormente! es posible desarrollar aplicaciones para la plataforma CloudTV H5 de ActiveVideo.

2!4!+ E)tructura de -rogramacin!

1a forma recomendada y a la ve( la mas eficiente para programar aplicaciones para la plataforma CloudTV H5 es la ue consiste en estructurar la programacin en 4 capa(! HT015 como base para las aplicaciones! C'' para dar estilo y Bava'cript para las funciones. Adem5s! todas estas estructuras deben estar ba2o una plantilla o estructura de arc3ivos recomendada por ActiveVideo! la cual es posible descargar desde el sitio de desarrolladores de dic3a empresa. A continuacin se aprecia como es la plantilla de arc3ivos para el desarrollo6

Como se aprecia en la imagen! deben existir directorios para alo2ar los diferentes tipos de arc3ivos usados por las aplicaciones tales como html para las paginas 7eb! )cri-t) para los Bava'cripts de las funciones asociadas adem5s del Erame"orF de ActiveVideo! CSS para los arc3ivos de estilos! image) para las im5genes utili(adas en la aplicacin! video) para los videos a utili(ar en la aplicacin! con*ig) para los arc3ivos de configuraciones y finalmente! en la ra$( un arc3ivo inde9!html el cual dar5 inicio a la aplicacin. De esta forma es m5s ordenada y f5cil la programacin de aplicaciones orientadas a la plataforma CloudTV H5.

2!4!4 /uena) -ractica)!

En el desarrollo de aplicaciones para la plataforma ActiveVideo CloudTV H5! es importante entender ue existen normas y pr5cticas de dise&o ue se deben seguir! as$ como estar al tanto de algunas cosas ue se pueden evitar. 'iguiendo las me2ores pr5cticas mencionadas a u$ es posible evitar las trampas! crear cdigo limpio y reutili(able! y optimi(ar el rendimiento. Algunos de estos se aplican al dise&o 7eb y al dise&o para situaciones de anc3o de banda ba2o! mientras ue otros son espec$ficos para el desarrollo de la *lataforma CloudTV H5.

2!4!4!1 Di)e:ando -ara TV

A pesar de estar basado en la 7eb! las solicitudes de CloudTV H5 no son del mismo tipo ue las aplicaciones ue se pueden encontrar en cual uier sitio 7eb. 1as solicitudes deben ser navegadas a trav9s del uso del control remoto en lugar de un ratn y un teclado. 1os detectores de eventos deben ser utili(ados para las pulsaciones de teclas generadas por el control remoto y la interfa( de usuario tiene ue responder en consecuencia a dic3as acciones. El uso de estados de foco C'' permite a los usuarios reali(ar un seguimiento de su ubicacin en la pantalla ya ue la plataforma no viene e uipada con un cursor flotante como ocurrir$a en un ordenador com,n. 1a entrada de datos es algo ue tambi9n debe ser limitada con aplicaciones CloudTV H5. 1a mayor$a de los controles remotos no tienen teclados alfanum9ricos completos! por lo ue se re uiere del uso de un teclado en pantalla para introducir texto. Cual uiera ue 3aya usado un teclado en pantalla puede constatar lo incmodo ue puede ser ingresar grandes cantidades de texto. 1as Aesoluciones de pantalla de TV se limitan considerablemente en comparacin con las ue se encuentran en los ordenadores personales. Cno de los beneficios para el dise&o de aplicaciones en la televisin son las resoluciones exactas ue se conocen de antemano y pueden ser desarrolladas y probadas. Tener las 3o2as de estilo! ya sea a escala con la aplicacin por el uso de porcenta2es en los ob2etos o la aplicacin de diferentes gu$as de estilo para las distintas resoluciones son ambas soluciones aceptables.

2!4!4!2 ;&<eto) incru)tado) = Tercera 4arte /ro1)er 4lug>"n)

=o utilice ob2etos incrustados o cual uier tipo de ob2eto ue re uiere un plug+in externo para el motor 7ebJit. *lug+ins populares como Elas3 y Bava no son compatibles ya ue el uso de los mismos no se adapta a la magnitud re uerida para implementaciones CloudTV H5. Aecuerde ue cuando se e2ecuta una aplicacin! el v$deo se genera en el servidor al mismo tiempo ue GpotencialmenteH miles de otras aplicaciones en la nube! y todas estas salidas se transmite a un decodificador. Esta escalabilidad es lo ue limita el uso de los plug+ins. HT015! C''4 y Bava'cript permiten extensiones! y las aplicaciones inteligentes de dise&o comple2o! como el uso de ABA8 y los servicios "eb. *ocas veces existe una necesidad de utili(ar cual uier ob2eto incrustado de terceros.

2!4!4!+ Tiem-o de e<ecucin de gr0*ico) generado)

=o utilice @pen:1! 7eb:1! transformaciones en 4D o cual uier tipo de ob2eto o control ue normalmente podr$an utili(ar la unidad de procesamiento gr5fico G:*CH con un navegador "eb est5ndar. CloudTV H5 se e2ecuta sin la ayuda de una :*C y! si los gr5ficos se representan en tres dimensiones! el esfuer(o en la C*C se incrementa de forma exponencial! una ve( m5s! no se escala 3asta el nivel re uerido. Actualmente no 3ay gr5fica 4D asociada! por lo ue debe continuar con el uso de im5genes rasteri(adas G. Bpg!. *ng!. :ifH y las ilusiones y los m9todos utili(ados con ellos bien conocidos y fiables! para crear profundidad. Tambi9n evite el uso del elemento CanvasGlien(osH de 7ebJit. Al utili(ar las opciones de visuali(acin de gr5ficos est5ndar! como Kimg srcLimg.2pgM o Kdiv styleLbacFground6 urlGimg.2pgHM cada macroblo ue dibu2ado en la pantalla se almacena en cac39 en el sistema y se puede reconstruir sin tener ue volver a 3acerse a s$ mismo. 'in embargo! cuando se utili(a el lien(o y un 5rea gr5fica se actuali(a en tiempo de e2ecucin N realtime! esa imagen no se puede almacenar en cac39 y cada ve( subsiguiente ue se se&ala a la misma (ona! el motor se ve obligado a volver a dibu2ar esas mismas macroblo ues cada ve(. *or lo tanto! Canvas no es un uso eficiente de los recursos y en gran medida limita la escalabilidad de la plataforma.

2!4!4!4 Animacione)
Csando CloudTV H5 es posible crear animaciones interesantes y ,tiles ue me2oran la experiencia del usuario. 'in embargo! se debe tener cuidado al crear animaciones ue funcionan bien en un entorno de ba2o anc3o de banda. Ctilice las animaciones C'' en lugar de animaciones Bavascript siempre ue sea posible a la me2or calidad de representacin en la plataforma CloudTV H5. Animaciones de Bava'cript no se pueden predecir por el motor CloudTV H5 y disminuyen la escalabilidad.

2!4!4!5 4rue&a $ de-uracin

1as aplicaciones deber5n a2ustarse a los est5ndares 7eb y pueden ser desarrollados en su mayor$a con C3rome u otro navegador 7ebJit compatible con HT015. 'in embargo! siempre se debe probar la aplicacin ya sea en CloudTV player o en el dispositivo cliente Gdecodificador de cable! reproductor de blu+ray! roFu! etcH CloudTV player puede emular el mismo cliente ue va a implementar la aplicacin y siempre debe ser referenciado cuando se descubre un comportamiento errneo y reportarlo para dar el soporte necesario. 1as pruebas adecuadas y constantes aseguran ue la aplicacin funciona correctamente y ue se reali(an en la calidad ue usted espera.

2!4!4!? /i&lioteca AVHT%@ $ E)tructura del -ro$ecto

'e ofrece un frame"orF optativo! AVHT01! lo ue simplifica la codificacin de las tareas comunes! tales como logging! el seguimiento! el env$o de mensa2es a los clientes! la consulta de embudo! etc. Es posible utili(ar la estructura de proyecto predeterminada proporcionada por la plantilla de proyecto de aplicacin! incluyendo avconfig.2s! avlocali(e.2s y arc3ivos de configuracin primordiales para obtener la m5xima venta2a de la >iblioteca AVHT01.

2!4!4!3 4antalla de de-uracin

'iempre se debe incluir una pantalla de depuracin la ue se puede acceder a trav9s de una secuencia de cdigo secreto. Esto permitir5 a los usuarios informar sobre el n,mero de versin de la aplicacin u otra informacin importante al informar errores. 'i un problema con su solicitud surge en el campo! tendr5 ue ser capa( de determinar el n,mero de versin exacta de su aplicacin ue el usuario tiene acceso! con el fin de depurar.

2!5 HT%@5
El HT015 es la versin m5s nueva del 1engua2e de 0arcado de Hipertexto Gcdigo en ue se programan los sitios "ebH! y cambia los paradigmas de desarrollo y dise&o "eb ue se ten$an al introducir 3erramientas notables como eti uetas ue permiten la publicacin de arc3ivos de audio y video con soportes de distintos codecsI tags para ue los usuarios dibu2en contenidos en -D y 4DI cambios en los llenados de formulariosI y una "eb sem5ntica muc3o me2or aprovec3ada.

2!5!1 4or 'ue u)ar HT%@5!

Escribir p5ginas usando HT01 5 nos brinda varios beneficios! por e2emplo6 Al ser el cdigo m5s sencillo y simplificado! cargan m5s r5pido las p5ginas en el navegador. 1as p5ginas y los elementos ue contienen! se ven perfectamente en todos los navegadores. 1a gran mayor$a de los navegadores de los tel9fonos 'martp3one y las tabletas! son compatibles con HT015. 1os plugins! "idgets y botones ue ofrecen los desarrolladores de las redes como EacebooF! T"itter y otras! escritos en HT01 5 funcionan excelentemente! con m5s opciones ue los cl5sicos en 8HT01 o ue los iframes. Es posible insertar directamente videos en las p5ginas sin tener ue acudir a los iframes o usar la eti ueta ob2ect. HT01 5 incluye eti uetas orientadas principalmente a los buscadores! para facilitarles comprender el contenido de las p5ginas! lo ue nos beneficia! por e2emplo6 3eader! footer! article! nav! etc. *ermite la :eolocali(acion del usuario. @tras de las ra(ones es el empleo del microformato en las p5ginas "eb! ue algunos son totalmente incompatibles con otros lengua2es por lo ue no validan correctamente a no ser ue se use HT015.

+! Di*erencia entre una -0gina 2e& convencional $ CloudTV HT%@5!

A continuacin se despliega la diferencia entre una p5gina 7eb convencional y CloudTv 3tml56 (AVE5AC"A( Html5 CloudTV H5 Di)-o)itivo) de (avegacin Teclado! 0ouse y dispositivos touc3. Control Aemoto 'T>. @i&rer#a) @i&rer#a) =o aplica para navegacin. (avegacin Aleatoria 'e utili(an librer$as especiales propietarias de Activevideo para la navegacin. (avegacin "nducida Html5 2e&

Tiene un inicio y fin de la navegacin de la interfa( =o tiene un inicio o fin de la sesin de de usuario GC)H! la cual induce el logro de una navegacin sobre un sitio 7eb. transaccin! por e2emplo ver un trailer! acceder a la gu$a del CATV! etc9tera.

.E(D"%"E(T; Html5 CloudTV H5 B,uC A*ecta el .endimientoD "magen "magen El tama&o de la imagen afecta al El tama&o de la imagen afecta al 'ervidor Cliente G>ro"ser! procesamiento de Gprocesamiento de la imagen para efectuar el la imagen para descargarla y streamingH. visuali(arlaH. Animacin Animacin El movimiento de la animacin afecta El movimiento de la animacin afecta al 'ervidor al Cliente G>ro"ser! ciclos de Gciclos de procesador utili(ados por la animacin! procesador utili(ados por la m5s el procesamiento de 9sta para su env$o como animacinH streamingH. Sitio 2e& "nter*aE de F)uario GF"H 1a usabilidad esta limitada por el 1a usabilidad! siendo un 'T> compatible! esta computador y el anc3o de banda limitado por el anc3o de banda. disponible. De)-liegue del Sitio 2e& De)-liegue de "nter*aE de F)uario GF"H 'e despliegan ob2etos HT015. 'e despliega un streaming ue interact,a con el control remoto! renderi(ando solo a uellas 5reas en ue se ve afectado el streaming. Html5 2e&

D"SEI; J C;(ST.FCC"A( Html5 2e& Html5 CloudTV H5 (avegacin (avegacin 'e dise&a la navegacin para un computador! con interaccin 'e dise&a la navegacin para una 'T>! con aleatoria! con golpes de tecla y clic interaccin secuencial y exclusiva de golpes de tecla. del mouse. E9-eriencia de F)uario 4C E9-eriencia de F)uario TV 'u dise&o se enfoca a desplegar la mayor cantidad de informacin 'u dise&o es acotado para obtener r5pidamente el posible y relacionada para consulta contenido deseado. del usuario. De)-liegue de "n*ormacin De)-liegue de "n*ormacin El despliegue de una cantidad considerable de informacin no afecta la Experiencia de Csuario. 4o)icionamiento de Video =o Aplica. El despliegue de una cantidad considerable de informacin afecta la Experiencia de Csuario. *or lo ue debe ser acotada al tema ue trata la interfa( de usuario. 4o)icionamiento de Video 1os atributos 1eft! Top! 7idt3 y Heig3t deben ser m,ltiplos de /;.