Descargar para leer sin conexión
Subido porJosé Ramón Cerquides Bueno
Presentacion carmenppt
Este documento describe el diseño y desarrollo de una aplicación HbbTV para solicitar, consultar y cancelar citas médicas a través de la televisión. Explica el estándar HbbTV, el entorno de desarrollo utilizado, y el funcionamiento de la aplicación mediante comunicaciones AJAX con el sistema de citas médicas InterS@S. Finalmente, propone posibles mejoras futuras como añadir más tipos de documentos de identificación o guardar usuarios registrados.
Más contenido relacionado
Presentacion carmenppt
- 1. DISEÑO Y DESARROLLODE APLICACIÓN HBBTV PARA PETICIÓN DE CITA MÉDICA 23 de Julio de 2014 Sevilla María del Carmen Rodríguez Segovia Tutor: Jose Ramón Cerquides Bueno
- 2. Objetivo del TFG Diseño y desarrollo de aplicación HbbTV para la petición de cita médica en InterS@S Solicitar, consultar y cancelar la cita a través de Internet… …y ahora también a través de la TV. ¿Cómo? Diseño y desarrollo de aplicación HbbTV para petición de cita médica 2
- 3. Estado del artede la TVi = + adicional TVi híbrida = contenidos + broadcast Smart TVs Televisión interactiva (TVi) contenido contenidos broadband Internet + Web 2.0 + VOD, OTTC…+ apps diseñadas para una plataforma Diseño y desarrollo de aplicación HbbTV para petición de cita médica 3
- 4. Problemática ¿Por quécrear HbbTV? (1) Cada fabricante usa su propia plataforma/navegador. (2) Portal de aplicaciones controlado por el fabricante. (3) En TVi híbrida, canales broadcast y broadband por separado. Hybrid Broadcast Broadband TV Estándar industrial (ETSI TS 102 796) e iniciativa promocional Diseño y desarrollo de aplicación HbbTV para petición de cita médica 4
- 5. El estándar HbbTV Basado en estándares existentes Perfil del navegador Transporte de señalización y aplicaciones Especificación CE-HTML APIs JavaScript XHTML, DOM, CSS TV Profile Diseño y desarrollo de aplicación HbbTV para petición de cita médica 5
- 6. El estándar HbbTV Arquitectura del sistema BC independent apps BC related apps Diseño y desarrollo de aplicación HbbTV para petición de cita médica 6
- 7. HbbTV en España:la TDT híbrida Especificación española que integra TDT e Internet. Diseño y desarrollo de aplicación HbbTV para petición de cita médica 7
- 8. HbbTV en Europay el mundo Estándar dominante para TV interactiva, TV híbrida y contenidos OTT País Maduro Desarrollado Creciendo Alemania X España X Francia X Austria X Polonia X Bélgica X Dinamarca X Finlandia X Hungría X Holanda X Republica Checa X Suiza X en Europa. Interes aumentando en America del Norte, America del Sur y Rusia. Diseño y desarrollo de aplicación HbbTV para petición de cita médica 8
- 9. Desarrollo de aplicacionesHbbTV ¿Que hace falta? Para escribir páginas web, es suficiente un editor de texto plano. Pero, ¿cómo sabremos que funcionan? Diseño y desarrollo de aplicación HbbTV para petición de cita médica 9
- 10. Desarrollo de aplicaciónde cita médica Entorno de trabajo Portatil Asus Vivobook S400CA Máquina virtual Debian ejecutada en VirtualBox Editor de texto Bluefish FireHbbTV Firebug y Tamper Data Objetivo, requisitos y limitaciones ➡ Pedir, consultar o cancelar la cita médica. ➡ Interacción fácil. ➡ Número limitado de botones. Widget Cita Médica Salud Responde Cita médica en 7RM Diseño y desarrollo de aplicación HbbTV para petición de cita médica 10
- 11. Ciclo de vidade la aplicación mostrarDias.html mostrarHoras.html Interacción del usuario con la aplicación Cerrar mostrarCita.html citaCancelada.html destroyApplication() Abrir index.html login.html createApplication() 6 archivos de vistas 1 archivo de funciones 1 archivo de estilo 5 archivos para comunicarnos con InterS@S index.html Diseño y desarrollo de aplicación HbbTV para petición de cita médica 11
- 12. Funcionamiento de laaplicación Comunicación mediante key-events y Peticiones XMLHttpRequest PHP Generación de key-events (AJAX) cookies Sesiones curl (libcurl) Simple HTML DOM parser Respuesta InterS@S json.parse () Respuesta en formato JSON + cookies Diseño y desarrollo de aplicación HbbTV para petición de cita médica 12
- 13. Demostración Diseño ydesarrollo de una aplicación de HbbTV para petición de cita médica en el InterS@S Diseño y desarrollo de aplicación HbbTV para petición de cita médica 13
- 14. Posibles mejoras, líneasfuturas y conclusiones Opción de poder introducir otros documentos identificativos. Guardar usuarios que ya han usado la aplicación. Seguridad. Acceso a la BBDD de InterS@S. Conclusiones ➡ HbbTV aprovecha el auge de los Smart-TV, la amplia oferta de conexión de banda ancha que existe hoy en día y está concebido para beneficiar a todo el ecosistema televisivo, pero aun queda mucho que explotar. ➡ Gran mayoría de los internautas usa el PC para consumir contenido A/V. ➡ Implementar mejoras de la aplicación y probarla en un dispositivo real. ➡ Gran satisfacción personal. Diseño y desarrollo de aplicación HbbTV para petición de cita médica 14
- 15. Muchas gracias porla atención Diseño y desarrollo de aplicación HbbTV para petición de cita médica 15
Notas del editor
- #2 Mi nombre es Carmen Rodríguez Segovia y a continuación voy a exponer mi TFG, titulado Diseño y desarrollo de aplicación HbbTV para petición de cita médica.
- #3 El objetivo del trabajo fin de grado es el diseño y desarrollo de una aplicación HbbTV para solicitar, consultar y cancelar una cita a través de internet. El servicio andaluz de salud ya nos permite realizar estos trámites y otros a través de InterS@S, una oficina virtual que nos da la posibilidad de hacer trámites online en relación con la asistencia sanitaria. Luego pretendemos proporcionar estos mismos servicios pero a través de un televisor. La idea es intentar cerrar en cierta medida la brecha digital y poner al alcance de una parte de la población que no tiene soltura con el ordenador e Internet, servicios tan cómodos como es el que nos proporciona intersas. ¿Como haremos esto? Con HbbTV.
- #4 ¿Y que es HbbTV nos estaremos preguntando? Antes de ahondar en el concepto de HbbTV es necesario explicar brevemente que es la TV interactiva, que es la tvi hibrida, y que son los smart tv. La TVi hace referencia a un nuevo concepto de ver la televisión, en el que el usuario final puede ver y disfrutar de contenidos adicionales a los que nos ofrece la TV clasica, que tradicionalmente ha venido siendo un medio de comunicación unidireccional. El verdadero valor de la TVi es que el usuario puede participar e interactuar con estos contenidos adicionales, decidiendo el si quiere verlos o no. La TVi híbrida hace referencia a los televisores que pueden recibir tanto contenido broadcast (red de radiodifusion) como contenido broadband (red de banda ancha). Por último, queda definir el concepto de Smart TV o connected TV. Este termino hace referencia a las televisiones o los set-top boxes que integran Internet y las características de la Web 2.0 y representan un claro ejemplo de la convergencia entre ordenadores y aparatos de televisión o set-top boxes.El término Web 2.0 hace referencia a los sitios webs en los que el usuario deja de ser un usuario pasivo, y pasa a ser un usuario activo, que pueden participar y contribuir en el contenido de la web. Además, pretenden ofrecer Video on demand, over the top content, además de acceso a las redes sociales, y la descarga de aplicaciones diseñadas para una plataforma en concreto. Entre estas plataformas, podemos encontrar tanto especificas del fabricante como podrían ser las Smar TV de LG, Samsung, o Sony,, y también plataformas creadas para multiples fabricantes como Google TV o Yahoo! Connected TV.
- #5 Como hemos visto, el hecho de que existan multitud de plataformas da lugar a una serie de problemas. En primer lugar, cada fabricante usa su propia plataforma o navegador, con un perfil con los servicios que el pretende comercializar y con las características técnicas que el ha implementado, de manera que una aplicación desarrollada para una determinada plataforma hay que reescribirla para otra plataforma. En segundo lugar, el portal de aplicaciones esta controlado por el fabricante del televisor, y el usuario no puede quitar ni añadir contenidos. Por último, en la TV híbrida los canales broadcast y broadband van por separados, de manera que si visualizamos contenido broadband perdemos de vista el contenido broadcast y viceversa. Como alternativa a estas plataformas privadas, se pretende crear un estándar abierto para televisión interactiva e hibrida, surgiendo así HbbTV. HbbTV es tanto un estándar industrial como una iniciativa promocional que busca aunar los servicios de radiodifusion, IPTV y la difusion de contenido de banda ancha al usuario final a traves de connected TVs y set top boxes. HbbTV nace en 2009 a partir de la asociacion de un proyecto francés y un proyecto aleman y en 2010 se funda el consorcio HbbTV, formado por mas de 60 miembros, entre los que se encuentran sobre todo empresas de radiocomunicación y de electronica de consumo. El objetivo del consorcio es crear un estándar abierto para la TV híbrida . hbbTV no es el primer estándar para televisión interactiva o híbrida. Anteriormente ya se habían creado otros estándares, como MHP, DAVIC o MHEG, pero ninguno se ha implantado con totalidad.
- #6 El estándar intenta adaptarse a las tecnologias disponibles en vez de implementar nuevos desarrollos técnicos, por lo que se basa en estándares y tecnologías web ya existentes. En este diagrama se puede observar la relación del estándar HbbTV con las distintas tecnologias en las que se basa. Así de la OIPF obtenemos el perfil del navegador y las APIs de JavaScript para usar en entornos de televisión. De la CEA obtenemos la especificación CE-HTML, que es una especificación para dispositivos de electronica de consumo, basada en estándares existentes de la W3C, como XHTML, DOM y CSS TV Profile. Por último, de DVB obtenemos el transporte para la señalización y aplicaciones.
- #7 El esquema general de un sistema híbrido es el que se muestra en la figura. El sistema debe de ser capaz de conectarse a dos redes en paralelo. Por un lado a la red broadcast, que es por donde recibe contenido audiovisual lineal, señalización y datos de aplicación.Por otro lado el terminal se puede conectar a Internet a traves de la red de banda ancha, con la cual se establece una comunicación bidireccional, y se recibe contenido audiovisual no lineal, además de datos de aplicaciones. Junto con este esquema, se definen dos tipos de aplicaciones. Por un lado aplicaciones BC related, que viajaran junto al contenido broadcast ya que están asociadas a un servicio de radiodifusión y por otro lado, aplicaciones BC independent, ya que no están asociadas a ningún servicio broadcast.
- #8 En cuanto a HbbTV en España, tenemos la especificación TDT híbrida, que integra el TDT e Internet. Essta especificación recoge los acuerdos del Foro de la TV digital en el que participan fabricantes de equipos, cadenas de TV y las principales empresas del sector audiovisual. Recoge los acuerdos de dicho foro, y además contempla el seguimiento por parte de los fabricantes y cadenas de televisión del estándar europeo HbbTV. La TDT híbrida nos permite acceder a contenidos al pulsar el botón rojo. Ya hay muchos canales de televisión que han desarrollado su propia aplicación HbbTV, pero entre todos ellos destaca RTVE, que ofrece programación a la carta de TVE, y la 2, además de Clan, Todo Deportes e Informativos 24H.
- #9 Al contrario que anteriores iniciativas para TV interactiva, HbbTV se está convirtiendo rápidamente en el estándar dominante para TV interactiva, TV híbrida y distribución de contenidos OTT en Europa. La implantación es mucho mas solida en Europa Occidental, con los servicios mas avanzados ofrecidos en Alemania España y Francia. En cuanto al resto del mundo, el interes en HbbTV está aumentando en america del norte, america del sur y rusia, aunque ya se ha implantado en países como australia, Malasia y vietnam.
- #10 Actualmente no existe mucha información acerca del desarrollo de aplicaciones HbbTV. Para realizar este proyecto lo que hemos hecho ha sido estudiar el código fuente de distintas aplicaciones y sacar conclusiones de ellos. Las aplicaciones HbbTV están basadas en HTML, por lo que para desarrollarlas no es necesario ningún sistema ni software especial, nos basta con un editor de texto plano. En cuanto a las tecnologías necesarias, dependerán de la envergadura de nuestra aplicación, abarcando desde XHTML, CSS y JavaScript hasta PHP o AJAX. Para probar las aplicaciones creadas, lo ideal sería hacerlo en un dispositivo real, pero esto es realmente dificil debido a que necesitaríamos que un proveedor de contenidos lo incluyera en sus servicios. De todas maneras, existen en el mercado simuladores de dispositivos HbbTV, como un emulador de Opera basado en una maquina virtual para Virtual Box, o el plugin FireHbbTV para Firefox. Éste ultimo es más comodo, ya que al instalarlo en el navegador nos permite interactuar con mas herramientas de desarrollado que proporciona firefox, como firebug, y en el sistema operativo que deseemos. Además nos proporciona otras funciones, como indicarnos el area segura, que es el area a partir de la cual no se deben de colocar contenidos importantes, ya que el area de visualización de cada televisor es distinto. tambien nos permite cambiar la relación de aspecto, y para interactuar con la aplicación, basta con el teclado, que simula los botones de un mando a distancia corriente.
- #11 Una vez que hemos hablado del estándar y del desarrollo de aplicaciones, comenzaremos a describir la aplicación que nosotros hemos creado. Para el desarrollo de esta aplicación, hemos empleado un portátil asus, en el que se ha instalado una maquina virtual Debian sobre el software Virtual Box. Para escribir la aplicación hemos empleado el editor de texto bluefish, y para probarla, el plugin de firefox firehbbtv, además de firebug y tamper data, otros dos plugins que nos han resultado muy utiles a la hora de depurar el código. Se pretende crear una aplicación para HbbTV desde la que se pueda pedir, consultar, o cancelar la cita en caso de tenerla asignada en el SAS. Existen aplicaciones similares, sobre todo para los smartphones, tanto oficial como la de Salud Responde, como no oficiales. También hemos encontrado aplicaciones parecidas, como la del canal autonómico 7 región de murcia, o un proyecto de 2012 en e que se crea un widget para yahoo! connected TV. El requisito que le hemos impuesto a la aplicación es que sea fácil de interactuar con ella, pero nos encontramos con la limitación de que el simulador con el que trabajamos tiene un escaso número de botones, entre los que no se encuentran botones alfabeticos, lo que traerá sus correspondientes consecuencias.
- #12 Nuestra aplicación esta formada por dos partes principalmente: por un lado están los archivos que controlan la apariencia de la aplicación y su inteligencia por así decirlo, y por otro lado los archivos que usamos para comunicarnos con la página de InterS@S, que podemos considerar como un servidor intermedio, por que aunque no lo sea como tal, la comunicación que mantiene con InterS@S es totalmente transparente al usuario. Dentro de los archivos que controlan a la aplicación, tenemos 6 archivos HTML que muestran distintas vistas, 1 archivo javascript que contiene funciones comunes a todas las vistas y un archivo CSS de estilos. Cuando ejecutemos la aplicación, se creará una nueva aplicación mediante el método de createApplication(), al cual le tenemos que pasar un objeto de tipo Application, que habremos definido en el cuerpo de la página HTML. Dependiendo de donde la ejecutemos, la aplicación creada puede ser de cualquiera de los dos tipos que propone el estandar. Por ejemplo, si canal sur tuviese aplicación HbbTV, nuestra aplicación podría accederse desde un enlace de la aplicación de canal sur, creandose así como una aplicación hija. mientras que si la descargásemos desde el marketplace, cada vez que la abramos, se creará como una nueva aplicación. Al abrirla, la vista que mostraremos sera index.html. El resto de las vistas permiten al usuario interactuar con la aplicación, y finalmente, si el usuario decide cerrarla, también se hará desde index.html, pulsando el botón rojo y llamando al método destroyApplication, definido en la especificación de la oITF.
- #13 La aplicación creada puede ser de cualquiera de los dos tipos que propone el estandar. Por ejemplo, si canal sur tuviese aplicación HbbTV, nuestra aplicación podría accederse desde un enlace de la aplicación de canal sur, creandose así como una aplicación hija. mientras que si la descargásemos desde el marketplace, cada vez que la abramos, se creará como una nueva aplicación. El estándar también nos define que la interacción con la aplicación se debe de hacer mediante un dispositivo de entrada de datos, típicamente un mando a distancia obtenido junto al televisor. Al pulsar los botones de este mando, se generarán eventos de teclas, o como se llaman en el estándar key-events. Bien, pues a partir de esos key-events, el usuario final se comunicará con la aplicación HbbTV. La comunicación entre las distintas vistas de la aplicación se realizará pulsando los botones del mando. Además, necesitamos guardar datos para pasarlos de una vista a otra y esto lo conseguiremos mediante cookies. Cuando sea necesario guardar información, crearemos una cookie y cuando sea necesario acceder a ella, la rescataremos de la misma cookie. A continuación, la aplicación le comunica estos datos al servidor intermedio mediante peticiones XHR, que nos permite mantener una comunicación asíncrona con el servidor en segundo plano. Es el servidor intermedio quien se comunicará con el InterS@S a través de la librería libcurl, que nos permite transferir datos y soporta una multitud de protocolos, entre ellos http, https y ftp, entre muchos otros. La respuesta de InterS@S es interpretada por el servidor intermedio, gracias a la ayuda de Simple HTML DOM parser, una librería php que nos permite manipular código html de manera muy simple, gracias a la estructura en árbol de DOM. Finalmente, los datos de interes son convertidos a formato JSON, ya que gracias a la función de JavaScript json.parse, convertimos una cadena con notación JSON en un objeto JavaScript, el cual es muy facil de manipular. Estos datos son consumidos por la aplicación, y se muestra por pantalla al usuario para que pueda seguir interactuando. Por último, el mantenimiento de la sesión de InterS@S se consigue con libcurl, ya que tiene una opción para indicar las cookies que queremos usar. Las cookies de la sesión las obtenemos cuando iniciamos sesión en InterS@S, ya que en la cabecera HTTP nos devuelve las cookies y parseando el código la rescatamos, guardamos y usamos en el resto de las peticiones.
- #14 Coger cita, cerrar sesión, volver a entrar y cancelarla. Así mostramos como se coge la cita, y mostramos como se ve nada mas entrar. y tambien que pasa cuando la cancelamos. Sería interesante resaltar el hecho de que solo podemos introducir numeros, de que es muy facil de manejar (solo un par de botones). Quizas tambien mostrar si hay errores al introducir los datos del formulario.
- #15 Como se ha comentado en la demostración, solo permitimos el acceso con DNI debido a que el simulador no contempla la opción de pulsar botones alfabeticos. Sin embargo, el intersas permite acceder con otros documentos identificativos, como el pasaporte, o la tarjeta de extranjero, por lo que una posible mejora podría ser poder acceder con otros documentos a parte del DNI. Por otro lado, sería interesante contemplar la opción de guardar los usuarios que ya han iniciado sesión alguna vez. Esto lo podríamos implementar mediante la asignación de una contraseña local para cada usuario por ejemplo. Igualmente importante es el tema de la seguridad, ya que si decidiésemos probarlo en dispositivos reales, todas las peticiones al servidor intermedio deberían de hacerse con el protocolo HTTPS, para lo cual el servidor intermedio debería de tener un certificado SSL al igual que lo tiene el InterS@S. Por último y no menos importante, cualquier cambio efectuado en la página de InterS@S implica una modificación en nuestra aplicación. Esto hace que el mantenimiento de la aplicación sea una tarea muy pesada, ya que se depende de algo que no controlamos. Es más, hace cosa de una semana, cuando preparaba esta presentación, estaba probando la aplicación y no funcionaba el login. Al final lo que había pasado era que la página del InterSas había añadido dos parámetros adicionales que había que pasarle al servidor, y los tuve que añadir en mi aplicacion. La unica manera de no depender de la propia pagina, es tener acceso a la base de datos del Intersas, pero esto es bastante dificil se conseguir y se hallaba fuera del alcance del proyecto.