View
2
Download
0
Category
Preview:
Citation preview
Trabajo Fin de Grado Grado en Ingeniería de las Tecnologías de Telecomunicación
Especialidad en Imagen y Sonido
Diseño y desarrollo de aplicación HbbTV para la
solicitud de cita médica
Autor: Mª del Carmen Rodríguez Segovia
Tutor: José Ramón Cerquides Bueno
Dpto. Teoría de la Señal y Comunicaciones
Escuela Técnica Superior de Ingeniería
Universidad de Sevilla
Sevilla, 2014
Area de conocimiento: Teoría de la Señal y Comunicaciones
Trabajo Fin de Grado
Grado en Ingeniería de las Tecnologías de Telecomunicación
Especialidad en Imagen y Sonido
Diseño y desarrollo de aplicación HbbTV para la
solicitud de cita médica
Autor:
Mª del Carmen Rodríguez Segovia
Tutor:
José Ramón Cerquides Bueno
Dpto. de Teoría de la Señal y Comunicaciones
Escuela Técnica Superior de Ingeniería
Universidad de Sevilla
Sevilla, 2014
Trabajo Fin de Grado: Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica
Autor: Mª del Carmen Rodríguez Segovia Tutor: José Ramón Cerquides Bueno
El tribunal nombrado para juzgar el Trabajo arriba indicado, compuesto por los siguientes miembros:
Presidente:
Vocales:
Secretario:
Acuerdan otorgarle la calificación de:
Sevilla, a de 2014
El Secretario del Tribunal,
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Índice
Mª del Carmen Rodríguez Segovia 6
ÍNDICE
Índice ............................................................................................................................................. 6
Tabla de ilustraciones .................................................................................................................... 8
Glosario ......................................................................................................................................... 9
Capítulo 1: Introducción .............................................................................................................. 11
Capítulo 2: Estado del arte de la televisión interactiva ............................................................... 12
2.1 Televisión interactiva ........................................................................................................ 12
2.2 Televisión Interactiva Híbrida ........................................................................................... 13
2.3 Antecedentes a HbbTV ..................................................................................................... 14
2.3.1 MHEG......................................................................................................................... 14
2.3.2 DAVIC ......................................................................................................................... 14
2.3.3 DVB-MHP (The Multimedia Home Platform) ............................................................ 14
2.4 Smart- TV .......................................................................................................................... 16
Capítulo 3: Hybrid Broadcast Broadband TV ............................................................................... 19
3.1 El Consorcio HbbTV .......................................................................................................... 19
3.2 El estándar HbbTV ............................................................................................................ 20
3.2.1 Aplicaciones ............................................................................................................... 21
3.2.2 Arquitectura del Sistema Híbrido .............................................................................. 22
3.2.3 Experiencia de Usuario .............................................................................................. 23
3.2.4 Otros Datos ................................................................................................................ 24
3.3 HbbTV en España: La TDT Híbrida .................................................................................... 25
3.4 HbbTV en Europa y en el Mundo...................................................................................... 28
3.5 Dispositivos HbbTV ........................................................................................................... 30
Capítulo 4: Desarrollo de Aplicaciones HbbTV ............................................................................ 32
4.1 Herramientas para el Desarrollo de Aplicaciones HbbTV ................................................ 32
4.2 Características básicas de cualquier aplicación HbbTV ..................................................... 35
4.2.1 Identificación de una aplicación HbbTV ..................................................................... 35
4.2.2 Ciclo de vida de una aplicación ................................................................................. 35
4.3 La Clase keySet .................................................................................................................. 37
Capítulo 5: Tecnologías Usadas en el Desarrollo de la Aplicación HbbTV para Pedir Cita en el
SAS ............................................................................................................................................... 38
5.1 CE-HTML ........................................................................................................................... 38
5.1.1 XHTML ........................................................................................................................ 38
5.1.2 CSS ............................................................................................................................. 39
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Índice
Mª del Carmen Rodríguez Segovia 7
5.1.3 JavaScript y AJAX ....................................................................................................... 39
5.2 PHP .................................................................................................................................... 41
Capítulo 6: Desarrollo de la aplicación HbbTV para la Petición de Cita en InterS@S ................. 43
6.1 Entorno de Trabajo ........................................................................................................... 43
6.2 Funcionamiento de la Aplicación ..................................................................................... 43
6.3 Código de la Aplicación HbbTV de Cita Médica ................................................................ 45
6.3.1 Archivos de la Aplicación ........................................................................................... 45
6.3.2 Comunicación entre distintas vistas de la aplicación ................................................ 50
6.4 Código PHP del Servidor Intermedio ................................................................................. 52
6.4.1. Conexión con el servidor de InterS@S con libcurl .................................................... 52
6.4.2 Parseando la respuesta del servidor con Simple HTML DOM parser ........................ 54
6.4.3 Datos JSON ................................................................................................................ 55
6.4.4 Mantenimiento y cierre de la sesión en InterS@S .................................................... 56
Capítulo 7: Posibles Mejoras De La Aplicación ............................................................................ 58
Capítulo 8: Conclusiones ............................................................................................................. 59
Capítulo 9: Referencias ............................................................................................................... 60
Anexo A ....................................................................................................................................... 63
Anexo B ....................................................................................................................................... 93
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica |Ilustraciones
Mª del Carmen Rodríguez Segovia 8
TABLA DE ILUSTRACIONES
Ilustración 1: Perfiles 1,2 y 3 de MHP ......................................................................................... 15
Ilustración 2: Logo de HbbTV ...................................................................................................... 19
Ilustración 3: Relación entre estándar HbbTV y otros estándares existentes ............................ 20
Ilustración 4: Ejemplo de aplicación autostart de botón rojo ..................................................... 22
Ilustración 5: Sistema general de la arquitectura híbrida ........................................................... 22
Ilustración 6: Logo de la TDT Híbrida .......................................................................................... 25
Ilustración 7: RTVE HbbTV (http://www.rtve.es/hbbtv/redbutton/) ........................................ 26
Ilustración 8: Telemadrid HbbTV
(http://abra4prodtelemadrid.abertistelecom.com/Telemadrid/index.html) ............................ 26
Ilustración 9: IB3 HbbTV (http://abra4.abertistelecom.com/IB3/index.html) .......................... 26
Ilustración 10: Orbyt TV HbbTV (http://www.orbyt.tv/portal/hbbtv/index.html) .................... 27
Ilustración 11: La Sexta HbbTV
(http://abra4prodtelemadrid.abertistelecom.com/lasexta/index.html) ................................... 27
Ilustración 12: TV Canaria HbbTV (http://abra4.abertistelecom.com/RTVC/index.html) ......... 27
Ilustración 13: Mapa de implantación de HbbTV en Europa en 2014 ........................................ 28
Ilustración 14: Estándar HbbTV en el mundo.............................................................................. 30
Ilustración 15: Aplicación HbbTV de RTVE en el plug-in FireHbbTV ........................................... 33
Ilustración 16: Mando a distancia de FireHbbTV ........................................................................ 34
Ilustración 17: Diferencias XHTML/HTML ................................................................................... 39
Ilustración 18: Página de inicio de la aplicación HbbTV para peticion de cita (con marco de área
de seguridad) ............................................................................................................................... 45
Ilustración 20: Detalle de formulario de login.html .................................................................... 46
Ilustración 19: Visión general del formulario y mensaje de error .............................................. 46
Ilustración 21: Detalle de la vista mostrarDias.html. Los apellidos del usuario se han tapado por
motivos de privacidad. ................................................................................................................ 47
Ilustración 22: Vista mostrarDias.html cuando se pulsa el botón rojo ....................................... 47
Ilustración 23: Detalle de la vista mostrarHoras.html. Los apellidos del usuario se han tapado
por motivos de privacidad........................................................................................................... 48
Ilustración 24: Detalle de la vista mostrarCita.html. Algunos de los datos se han tapado por
motivos de privacidad. ................................................................................................................ 48
Ilustración 25: Detalle de la vista citaCancelada.html ................................................................ 49
Ilustración 26: Página de InterS@S tras haber iniciado sesión ................................................... 57
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Glosario
Mª del Carmen Rodríguez Segovia 9
GLOSARIO
AJAX
Asynchronous JavaScript And XML
API
Application Programming Interface (en español, IPA, Interfaz de programación de aplicaciones)
CSS
Cascading Style Sheets
DAVIC
Digital Audio Video Council
DOM
Document Object Model
DRM
Digital Rights Management
DVB
Digital Video Broadcasting
ECMA
European Computer Manufacturers 'Association
EPG
Electronic Program Guide (Guía electronica de programas)
ETSI
European Telecommunications Standards Institute
FNMT
Fábrica nacional de la Moneda y Timbre
GUI
Graphical User Interface (Interfaz gráfica del usuario)
HbbTV
Hybrid Broadcast Broadband TV
HTML
HyperText Markup Language
IPTV
IP Television
ISO
International Organization for Standardization
JSON
JavaScript Object Notation
MHEG
ISO Multimedia and Hypermedia information coding Expert Group
OIPF
Open IPTV Forum
PHP
PHP Hypertext Pre-processor
PHP-CLI
PHP Command Line
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Glosario
Mª del Carmen Rodríguez Segovia 10
POO
Programación orientada a objetos
RIA
Rich Internet Applications
SAS
Servicio Andaluz de Salud
STB
Set-top boxes
TIC
Tecnologías de la Información y la Comunicación
TVi
Televisión Interactiva
URI
Uniform Resource Identifier (Identificador de recursos uniforme)
URL
Uniform Resource Locator
VOD
Video on demand
W3C
World Wide Web Consortium
XHR
XMLHttpRequest
XHTML
eXtensible HyperText Markup Language
XML
eXtensible Markup Language
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 1
Mª del Carmen Rodríguez Segovia 11
CAPÍTULO 1: INTRODUCCIÓN
HbbTV, surgido en el año 2009, pretende fusionar la televisión digital junto con
contenidos web, basándose en estándares ya existentes, para intentar reusar la
tecnología de los dispositivos actuales e intentar hacer el proceso de migración más fácil.
Hoy en día la gran mayoría de los dispositivos ofrecen este servicio, por lo que este
estándar y tecnología, aunque lentamente, está consiguiendo implantarse con fuerza en
Europa para convertirse en el estándar de televisión híbrida por excelencia.
El objetivo del trabajo propuesto es el estudio del estándar HbbTV en la actualidad y el
desarrollo de una aplicación para esta tecnología que permita a los usuarios solicitar,
consultar y cancelar la cita con su médico del Sistema Sanitario a través del televisor y
simplemente usando el mando a distancia como dispositivo de entrada.
El SAS ya permite realizar estos trámites y otros a través de InterS@S, un servicio de
atención personal del Sistema Sanitario Público de Andalucía a través de Internet.
InterS@S está pensado como una oficina virtual, con la intención de proporcionar
servicios de información personal y tramitación on-line en relación con la asistencia
sanitaria.
La idea de crear esta aplicación es, en cierta medida, intentar cerrar la brecha digital1 en
cierta medida, ya que, servicios tan cómodos para el usuario como los que nos
proporciona InterS@S, son difíciles de acceder a ciertos grupos de la población, como
podrían ser los ancianos, que no están familiarizados con el ordenador e Internet,
mientras que la televisión es parte de su día a día y les es más fácil aprender nuevas
funcionalidades de ésta.
Para conseguir esto se realizaran peticiones desde la aplicación principal a un servidor
web intermedio, que será quien se comunicará con el servidor de InterS@S. El servidor
intermedio le comunicará las respuestas y datos obtenidos de InterS@S a nuestra
aplicación, que llegará al usuario a través del televisor.
1 El término de brecha digital, entre otras acepciones, hace referencia a las diferencias que hay entre grupos de la población según su capacidad para utilizar las TIC de forma eficaz, debido a los distintos niveles de alfabetización, carencias y problemas de accesibilidad a la tecnología.
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 2
Mª del Carmen Rodríguez Segovia 12
CAPÍTULO 2: ESTADO DEL ARTE DE LA TELEVISIÓN INTERACTIVA
2.1 TELEVISIÓN INTERACTIVA La televisión interactiva (TVi o iTV en inglés) hace referencia a un nuevo concepto de ver la televisión. En esta nueva forma de ver la televisión, el usuario puede disfrutar de contenidos y servicios adicionales que se suman a los contenidos de la televisión convencional, que tradicionalmente ha venido siendo un medio de comunicación unidireccional. Entre los servicios que nos puede proporcionar la TVi, que pueden ser ofrecidos tanto por el radiodifusor como por los fabricantes de terminales o por terceros, podemos agruparlos en tres tipos de servicios diferentes:
• Servicios de información: son aquellos que ofrecen una información independientemente del programa audiovisual que se está emitiendo en ese momento.
• Servicios ligados a la programación: son aquellos que complementan la programación audiovisual que se está emitiendo (puede ser una película, una serie o incluso publicidad) con contenido adicional (como por ejemplo una sinopsis de la película, o más detalles acerca del producto anunciado).
• Servicios transaccionales: son aquellos que ofrecen la posibilidad de enviar y recibir información personalizada y exclusiva del usuario.
Por lo tanto, el verdadero valor de la TVi consiste en darle al usuario la oportunidad de participar y de interactuar con los contenidos que está recibiendo, con la gran ventaja de que es el usuario el que decide si quiere ver estos contenidos o no. El nivel de televisión interactiva lo marca el elemento final con el que estamos interactuando, de manera que podemos distinguir tres tipos de interactividad:
• Interactividad con el set-top box2: se trata de una interactividad local, ya que es el radiodifusor el que envía el contenido adicional, y el usuario el que accede a él, sin hacer uso del canal de retorno3. Un ejemplo de este servicio ampliamente conocido por todos es la consulta de la EPG.
• Interactividad con el operador de red: son aquellos servicios que permiten una televisión a la carta, pero requieren un canal dedicado de transmisión.
• Interactividad con el proveedor de contenidos: en esta modalidad de interacción, el usuario está en contacto directo con el proveedor de contenidos mediante el uso del canal de retorno. La naturaleza de este canal de retorno puede ser muy variada (líneas telefónicas, SMS, conexión a internet mediante el STB…)
2 Set-top box (STB), decodificador o receptor de televisión. Es el aparato encargado de la recepción y/o decodificación de las señales de televisión (analógicas o digitales) para ser mostrada posteriormente en un dispositivo de televisión. 3 Con canal de retorno nos referimos al medio por el cual el usuario se comunica con el proveedor de servicios o contenidos.
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 2
Mª del Carmen Rodríguez Segovia 13
Esta televisión interactiva comienza a desarrollarse fuertemente a partir del apagón analógico4 y la consiguiente llegada de la televisión digital, ya que esta última permite incorporar fácilmente a la señal broadcast 5 el flujo de datos para los contenidos adicionales, aportando información al usuario y permitiéndole adaptar el producto a sus necesidades. Estos flujos de datos son recibidos y decodificados por los STB, haciendo así necesaria la creación de estándares que definan los sistemas a utilizar (formato de las tramas, arquitectura de protocolos, características de los equipos…). Además la interactividad requiere que los STB se puedan programar y actualizar dinámicamente, para lo que existen diferentes soluciones en el mercado, entre ellas la definición de una capa de software intermediario, sobre el cual se ejecutan las aplicaciones transmitidas junto con las señales audiovisuales. Esta capa de software intermediario es más comúnmente conocida con el nombre de middleware.
2.2 TELEVISIÓN INTERACTIVA HÍBRIDA Cuando hablamos de un terminal híbrido nos estamos refiriendo a un dispositivo, en este caso un televisor, que puede recibir tanto contenidos broadcast, a través de una red de radiodifusión, como contenidos broadband6, a través de una conexión de banda ancha doméstica, gracias a una plataforma de software que permita ejecutar servicios que unan ambas redes. Es por la segunda red (broadband) por la que llegaran las aplicaciones y contenidos multimedia y no multimedia y, a su vez, nos proporcionará el canal de retorno, para poder mantener una comunicación con el radiodifusor o con el proveedor de servicios/contenidos, dependiendo del caso. Este concepto de TVi híbrida surge con el gran auge que está teniendo la conexión de banda ancha, ya que los usuarios consumen cada vez más contenidos multimedia elegidos por ellos mismos. Así, los fabricantes de televisores deciden hacer que sus dispositivos puedan servir contenido multimedia procedente de Internet, además de los contenidos audiovisuales clásicos, surgiendo así los primeros terminales híbridos. El acceso a los contenidos de Internet se lleva a cabo usando el navegador instalado en el dispositivo, y además empiezan a aparecer las primeras aplicaciones propias del fabricante desarrolladas con CE-HTML7.
4 El apagón analógico es el término con el cual se conoce al cese de las emisiones analógicas de los operadores de televisión alrededor del mundo. 5 Usaremos los términos broadcast o radiodifusión indistintamente para referirnos a la emisión de señales de televisión o radio. 6 Usaremos los términos broadband o banda ancha indistintamente para referirnos a los servicios de banda ancha. 7 Estándar basado en XHTML para diseñar páginas web para dispositivos de consumo electrónico.
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 2
Mª del Carmen Rodríguez Segovia 14
2.3 ANTECEDENTES A HBBTV A consecuencia de la aparición de la TVi y posteriormente de la TVi híbrida, las organizaciones de normalización empiezan a promover la creación de estándares que regulen las características de estos sistemas.
Hasta ahora han existido diferentes softwares o estándares, que podemos clasificar en función de si son de propiedad privada o públicos. Pasaremos a nombrar y definir brevemente los que son de propiedad pública en orden cronológico de aparición en el mercado.
2.3.1 MHEG MHEG es un estándar abierto de middleware diseñado específicamente para poder desarrollar servicios de TVi digital. La ISO lo desarrollo y estandarizó a mediados de los años noventa. Conceptualmente, MHEG quiso ser para las aplicaciones multimedia lo mismo que HTML representa para las páginas web, es decir, pretendía proporcionar un formato común de intercambio, el cual pudiera ejecutarse en cualquier receptor. De este estándar se crearon varias versiones, de las cuales las dos primeras (MHEG-1, MHEG-3) no triunfaron debido a que los conceptos en los que se basaban eran muy complicados y la industria aún no estaba lista para las características que ofrecían. Más tarde crearon MHEG-5 (versión simplificada de MHEG-1, con algo más de implantación, ) y MHEG-6, que tampoco se extendió pero sirvió de base para crear el estándar DAVIC. Para más información, consultar [1].
2.3.2 DAVIC Este estándar se creó en 1998 poco después de MHEG-6., añadiendo una serie nueva de APIs Java a MHEG-6 y soporte al Java Media Framework, para controlar la reproducción multimedia. Aunque no fue posible crear una aplicación Java pura para los receptores DAVIC, las APIs Java ya eran capaces de controlar más elementos del receptor que cualquiera de los otros estándares.
2.3.3 DVB-MHP (The Multimedia Home Platform) MHP es un sistema intermediario o middleware abierto, diseñado por DVB y estandarizado por la ETSI. MHP utiliza el lenguaje de programación Java para sus aplicaciones y define la plataforma conocida como DVB-J, basada en la máquina virtual de Java (JVM: Java Virtual Machine). Esta plataforma busca ser común para las aplicaciones interactivas de la televisión digital e independiente tanto del proveedor de servicios interactivos como del receptor de televisión utilizados. Por lo tanto, el requisito fundamental de MHP era que hubiese interoperabilidad total entre las aplicaciones y las distintas implementaciones del estándar. Los radiodifusores necesitaban saber que las
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 2
Mª del Carmen Rodríguez Segovia 15
aplicaciones iban a comportarse de una forma consistente y predecible en cualquier plataforma que cumpliese con el estándar MHP. Como una de las características fundamentales de MHP era que debía dar soporte para facilitar la migración de los servicios interactivos ya existentes hacia los nuevos, además de ser independiente del hardware, se definieron en el estándar tres perfiles distintos en función de las capacidades de los STB:
1. Enhanced Broadcast Profile: definido en la versión de MHP 1.0, este perfil no incluye canal de retorno, por lo que está pensado para aplicaciones que proporcionen una interactividad local. La descarga de las aplicaciones es a través del canal broadcast. Este perfil nos puede proporcionar servicios como la selección entre distintos audios o la EPG, por ejemplo.
2. Interactive Broadcast Profile: este segundo perfil también está definido en MHP 1.0 e incluye un canal de retorno, permitiendo la comunicación con el proveedor de servicios interactivos. Este perfil nos permitía aplicaciones de video bajo demanda, comercio electrónico o tele voto, entre otros.
3. Internet Access Profile: el tercer perfil, definido en MHP 1.1, además de cumplir las capacidades de los dos perfiles anteriores, permite el acceso a Internet.
Además, MHP se propuso extender el estándar a otras redes de transmisión. Así surge GEM MHP (Globally Executable MHP), que permite que otros cuerpos de estandarización u organizaciones pudieran definir especificaciones basadas en el estándar MHP. A pesar del gran abanico de posibilidades que nos ofrece MHP, la gran mayoría de aplicaciones que hemos podido ver son, sobre todo, referentes a la EPG, y la gran mayoría de los usuarios finales ignoran estas posibilidades de la TDT, dato que se refleja en el escaso porcentaje de receptores TDT vendidos con MHP.
Ilustración 1: Perfiles 1,2 y 3 de MHP
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 2
Mª del Carmen Rodríguez Segovia 16
Si tenemos que buscar la razón por la cual MHP no acaba de triunfar o de implantarse puede ser debido a que, al estar basada en una máquina virtual de Java impone la necesidad de unas características en el receptor (procesador, memoria RAM, … ) que encarece el precio de los receptores interactivos. Esto, sumado a la poca información que se ofrece acerca de estas tecnologías, y al escaso desarrollo de aplicaciones, hacen que los usuarios no muestren interés en invertir más dinero en algo que no van a usar. Para más información, consultar [2][3].
2.4 SMART- TV Una vez definidos los conceptos de TV interactiva, TVi híbrida y haber hablado de los
antecedentes de HbbTV, solo nos queda definir el concepto de Smart-TV antes de
ahondar en el estándar de HbbTV.
El termino de Smart TV (algunas veces también lo podemos encontrar como Connected
TV) hace referencia a las televisiones o los set-top boxes que integran Internet y las
características de la Web 2.08 y representan un claro ejemplo de la convergencia entre
televisores y aparatos de televisión o set-top boxes.
A parte de las características tradicionales que nos ofrece cualquier aparato de
televisión corriente, las Smart TV buscan proporcionarnos streaming de video bajo
demanda (VOD), over-the-top content9, el acceso a las redes sociales y la posibilidad de
instalar o usar aplicaciones diseñadas específicamente para un televisor entre otros.
Las aplicaciones que usan las Smart-TV pueden estar precargadas en el dispositivo o se
pueden actualizar o instalar nuevas aplicaciones a través de un “app marketplace”, al
igual que en los denominados Smart-phones.
Por lo tanto cuando hablamos de Smart-TV nos estamos refiriendo a un televisor o a un
set-top box para un televisor que nos ofrece mayor habilidad computacional y
conectividad que un aparato de televisión tradicional.
Como acabamos de comentar, las Smart-TV permiten al usuario instalar o ejecutar en
sus televisores aplicaciones más avanzadas o plugins (añadidos) basados en una
plataforma específica.
8 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. 9 Over-the-top content hace referencia a la recepción de audio, video u otro contenido multimedia a través de internet sin que el proveedor de servicios se vea implicado en el control o distribución de dicho contenido.
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 2
Mª del Carmen Rodríguez Segovia 17
Las plataformas de Smart-TV suelen tener un SDK10 público y también pueden contar
con un NDK11 , además de un “app store” para que el usuario final pueda instalar o
desinstalar aplicaciones.
El objetivo del SDK público es que otras compañías y desarrolladores puedan crear
aplicaciones y comprobar su funcionamiento en cualquier dispositivo que soporte la
plataforma de Smart-TV o middleware12 para el que se escribió, independientemente
de quien sea el fabricante del hardware.
A continuación vamos a indicar algunas de las plataformas de Smart-TV que más
repercusión tienen en el mercado actual y que son usadas como framework o
middleware por los distintos fabricantes:
• Especificas del fabricante de plataformas de Smart-TV:
� LG Smart TV (de LG).
� Samsung Smart TV (de Samsung).
� Sony Internet TV (de Sony).
� Panasonic Viera Connect (de Panasonic).
� Phillips NetTV (de Phillips) basado en los estándares de OIPF.
� Web:TV (de Blusens).
• Plataformas disponibles para múltiples fabricantes:
� Boxee: bifurcación del software del centro de medios XBMC con una GUI
personalizada y un marco propio para aplicaciones adaptadas al televisor
doméstico.
� Google TV: plataforma para Smart-TVs basada en Android creada por
Google, Intel, Sony, y Logitech para crear TVi.
� MeeGo para Smart-TV: proyecto creado por Intel, Nokia y Linux, creado
a partir de una bifurcación XBMC. Permite ejecución de aplicaciones,
tiene incorporado el acceso a otras redes sociales, juegos, y muchas otras
características propias de las Smart-TV.
� Existen otras muchas más, como Yahoo! Connected TV de Yahoo!,
EMAGINE de Select-TV y Mediaroom de Microsoft.
Como vemos, existen actualmente multitud de plataformas para Smart-TV, lo cual
conduce a una serie de consecuencias y problemas, que pasamos a enumerar:
1) Por un lado, cada fabricante utiliza su propio navegador/plataforma con un perfil
adaptado a los servicios que él pretende comercializar y con el conjunto de
características técnicas que ha querido implementar. Esto significa que una
10 Un software development kit (kit de desarrollo de software en español) es un conjunto de herramientas de desarrollo de software que permite al programador crear sus propias aplicaciones para un sistema concreto. 11 Un native development kit es una herramienta que permite al programador desarrollar partes de su aplicación para Android usando lenguajes de programación como C o C++. Está pensado para usarse junto al SDK correspondiente. 12 Middleware es un software que asiste a una aplicación para interactuar o comunicarse con otras aplicaciones, software, redes, hardware y/o sistemas operativos.
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 2
Mª del Carmen Rodríguez Segovia 18
aplicación no solo se tiene que reescribir para otra plataforma, sino que además
hay que tener en cuenta el dispositivo para el que se está fabricando (por
ejemplo, el modelo de mando), dificultando así el desarrollo de aplicaciones.
2) El portal de aplicaciones de Internet del fabricante está controlado por el
fabricante del televisor, sin que los consumidores puedan añadir o quitar
contenidos de ese portal.
3) Por último, en el plano de la televisión híbrida, ambos canales (broadcast y
broadband) van por planos separados, de manera que, cuando se visualiza un
programa de televisión se pierde la navegación y cuando se activa la parte
broadband, se pierde la señal de televisión en directo o se sobre-impresiona con
contenido que no tiene nada que ver con la emisión.
Como alternativa a estas plataformas de propiedad privada, se pretende establecer un
estándar abierto para la televisión híbrida, surgiendo así HbbTV.
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 3
Mª del Carmen Rodríguez Segovia 19
CAPÍTULO 3: HYBRID BROADCAST BROADBAND TV
Hybrid Broadcast Broadband TV [4](HbbTV de aquí en adelante) es tanto un estándar
industrial (ETSI TS 102 796) como una iniciativa promocional que busca aunar los
servicios de radiodifusión (broadcast), IPTV, y la difusión de contenidos web
(broadband) al usuario final a través de Connected TVs (Smart TVs) y set-top boxes.
HbbTV nace en 2009 a partir de la asociación de dos proyectos: el proyecto francés H4TV
y el proyecto alemán German HTML Profille y su primera demostración se realiza en la
televisión francesa para el evento deportivo de Roland Garros de ese mismo año.
La norma ya se ha implementado en varios países europeos, y la gran mayoría de los
televisores conectados que se vendieron en Europa Occidental implementan ya el
estándar HbbTV. Destacan sobre todo la implantación en Alemania donde hay más de
dos millones de receptores activos HbbTV y España y Francia, cuyo número de adeptos
no deja de crecer.
3.1 EL CONSORCIO HBBTV El consorcio de HbbTV, establecido oficialmente en 2010, está formado por más de 60
miembros, entre los que se encuentran, sobre todo, empresas de radiodifusión y
numerosas empresas de electrónica de consumo, siendo el objetivo común el crear
servicios que los broadcasters quieren ofrecer cumpliendo con las capacidades de los
dispositivos de electrónica de consumo de hoy en día. Además, entre los miembros,
también se encuentran organizaciones de normalización, editores de middleware, y
laboratorios de prueba. El objetivo del consorcio es establecer un estándar para la TV
vía radiodifusión y TV vía banda ancha para el hogar, a través de una única interfaz de
usuario, creando así una plataforma abierta.
Entre los principales miembros del grupo destacan empresas como: Abertis Telecom,
ANT Software Limited, Digital TV Labs, EBU (European Broadcasting Union), France
Ilustración 2: Logo de HbbTV
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 3
Mª del Carmen Rodríguez Segovia 20
Televisions, Institut für Rundfunktechnik GmbH, OpenTV Inc, Opera, RTL Group,
Samsung, SES ASTRA S.A, Sony Corporation, Television Française 1 – TF1 y TPVision.
Como resultado del trabajo desarrollado por el consorcio HbbTV, hasta el día de hoy se
han publicado dos versiones del estándar: HbbTV versión 1.0 (Estándar ETSI TS 102 796
v1.1.1 [5]) y HbbTV versión 1.5 [6](aun no estandarizada).
3.2 EL ESTÁNDAR HBBTV La especificación HbbTV ha sido desarrollada por miembros de la industria para intentar
competir con el gran abanico de contenido multimedia que llega hoy en día al usuario
final. La especificación está basada en estándares existentes y en tecnologías web,
incluyendo el OIPF [7], CE-HTML, W3C [8], y la especificación de DVB de señalización de
aplicaciones ETSI TS 102 809 [9].
A continuación mostramos un diagrama en el que podemos ver la relación entre HbbTV
y otros estándares.
Ilustración 3: Relación entre estándar HbbTV y otros estándares existentes
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 3
Mª del Carmen Rodríguez Segovia 21
Por lo tanto el estándar intenta adaptarse a las tecnologías disponibles en lugar de
implementar nuevos desarrollos técnicos, construyendo su norma en base a distintas
especificaciones de los organismos anteriormente citados.
Así, el OIPF define el perfil del navegador y nos proporciona APIs de JavaScript para
entornos de televisión, además de definir los formatos de audio y video.
Por otro lado, la CEA nos proporciona las APIs JavaScript para servicios bajo demanda y
la especificación de CE-HTML, que define las funciones básicas del navegador, basado
en estándares de W3C web comunes. Usa XHTML 1.0, DOM 2, CSS TV 1.0, y Java, además
de objetos XMLHttpRequest. Está optimizado para renderizar HTML/Javascript en
páginas web en los dispositivos de CE, en concreto, las pantallas de televisión. También
aporta otros elementos, como la definición de códigos de las teclas del mando a
distancia.
Finalmente, el transporte de señalización y aplicaciones viene dado por DVB.
Además de la especificación, le acompaña un banco de pruebas destinado a los
fabricantes, que proporciona una serie de tests para comprobar la implementación de
HbbTV en dispositivos, tanto para el hardware como para el software que implementen
la especificación HbbTV.
Las aplicaciones para HbbTV están basadas en HTML, pero utilizan solo un subconjunto
de los estándares web, de manera que los desarrolladores deben de usar herramientas
especiales de validación.
A continuación, vamos a detenernos más detalladamente en algunos de los puntos que
consideramos más importantes del estándar y que han tenido más relevancia en el
desarrollo de este proyecto.
3.2.1 Aplicaciones Los terminales híbridos que se definen en el estándar [5] deben de poder descargar y
ejecutar aplicaciones que son definidas como una colección de documentos que
constituyen un servicio interactivo. Los documentos que conforman una aplicación son
documentos HTML, JavaScript, CSS, XML y archivos multimedia. En el apartado 4.1 del
estándar (ETSI TS 102 796), se contemplan los siguientes tipos de aplicaciones:
• Broadcast-independent (BC-independent): son aplicaciones que no están
asociadas con ningún servicio broadcast. Este tipo de aplicaciones se descargan
vía broadband y acceden a todos los datos a través de esta misma vía.
• Broadcast-related (BC-related): asociadas con uno o más servicios broadcast, o
uno o más eventos broadcast en un servicio. Estas aplicaciones se pueden
ejecutar automáticamente (serian aplicaciones del tipo autostart) o se pueden
ejecutar por requerimiento del usuario. La descarga de este tipo de aplicaciones
puede ser vía broadband o broadcast y se puede acceder a sus datos por
cualquiera de las dos vías. Dentro de las aplicaciones de tipo autostart,
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 3
Mª del Carmen Rodríguez Segovia 22
encontramos las aplicaciones de botón rojo, que son aquellas que se inician
mostrando pantalla de un icono de un “botón rojo”.
3.2.2 Arquitectura del Sistema Híbrido En cuanto a la arquitectura general del sistema y los componentes necesarios de un
terminal híbrido, el estándar [5] los define en el apartado 4.2.
En primer lugar, el terminal híbrido debe tener la capacidad de conectarse a dos redes
en paralelo. Por un lado puede estar conectada a una red broadcast DVB (DVB-T, DVB-S
o DVB-C). A través de esta conexión broadcast el terminal híbrido puede recibir
contenido A/V estándar (denominado contenido A/V lineal), datos de aplicación y datos
de señalización de aplicación, de manera que aunque el terminal no esté conectado a
una red broadband, pueda recibir aplicaciones BC-related.
Adicionalmente, el terminal híbrido puede estar conectado a Internet a través de una
interfaz broadband, lo que nos permite una comunicación bidireccional con el
proveedor de contenidos. En este interfaz, el terminal puede recibir datos de
aplicaciones y contenido A/V no lineal.
Ilustración 4: Ejemplo de aplicación autostart de botón rojo
Ilustración 5: Sistema general de la arquitectura híbrida
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 3
Mª del Carmen Rodríguez Segovia 23
3.2.3 Experiencia de Usuario El estándar [5] establece en el apartado 5.2, que el usuario debe controlar las
aplicaciones interactivas mediante un dispositivo de entrada, típicamente obtenido
junto con el terminal. Ésta interfaz puede ser desde un mando a distancia convencional
hasta un controlador de videojuego, una pantalla táctil o un mando a distancia muy
reducido.
A los datos de entrada del usuario, se les llama key-events, o eventos asociados a teclas.
A continuación mostramos una tabla de los botones o key-events que son más
relevantes para el usuario final a la hora de usar o ejecutar una aplicación interactiva:
Tabla 1: Usos asociados a los distintos key-events
Botón o key-event Uso
TEXT, TXT o botones de similares características
Debe de ejecutar la aplicación de teletexto digital y/o el teletexto estándar.
Botón rojo Normalmente muestra o esconde una aplicación autostart BC-related.
Botón amarillo, botón verde y botón azul
Uso variable definido por la aplicación.
4 botones de navegación (arriba, abajo, derecha e izquierda)
Uso variable definido por la aplicación. Normalmente movimiento o navegación por listas.
Botón ENTER o OK Uso variable definido por la aplicación. Normalmente para seleccionar algún elemento que este enfocado o para la confirmación de acciones.
Botón ATRÁS Uso variable definido por la aplicación, normalmente para volver atrás un paso en la aplicación.
Dos botones de selección de programas (P+ y P-)
Si están disponibles se selecciona el siguiente o el anterior canal de radiodifusión en la lista interna de canales, lo que puede derivar en la terminación de la aplicación que está corriendo en ese momento.
WEBTV o botón de similares características
Si está disponible, abre un menú que proporciona acceso a aplicaciones BC-independent.
EXIT, TV o botón de similares características
Si está disponible termina la aplicación que está ejecutándose y vuelve al último canal seleccionado en el servicio broadcast.
Además en el apartado 10.2.2 del estándar [5], se establece que las key-events asociadas
a los distintos botones (de un mando a distancia corriente) que deben de estar
disponibles para las aplicaciones son las siguientes:
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 3
Mª del Carmen Rodríguez Segovia 24
Tabla 2: Botones y key events correspondientes
Botón Key event
4 botones de colores (rojo, verde, amarillo y azul)
VK_RED, VK_GREEN, VK_YELLOW, VK_BLUE
4 botones de flechas (arriba, abajo, izquierda y derecha)
VK_UP, VK_DOWN, VK_LEFT, VK_RIGHT
Botón ENTER o OK VK_ENTER Botón ATRAS VK_BACK
Play, stop, pause VK_STOP y VK_PLAY y VK_PAUSE o VK_PLAY_PAUSE
Búsqueda hacia delante / búsqueda hacia atrás
VK_FAST_FWD VK_REWIND
TEXT, TXT o de similares características No debe de estar disponible para aplicaciones.
Dos botones de selección de programas (P+ y P-)
No debe de estar disponible para aplicaciones.
WEBTV o botón de similares características No debe de estar disponible para aplicaciones.
EXIT, TV o botón de similares características No debe de estar disponible para aplicaciones.
Estos botones deben de estar disponibles y accesibles desde las aplicaciones a través del
objeto de JavaScript KeySet .
3.2.3.1 Acceso a aplicaciones interactivas
El usuario final puede acceder a aplicaciones interactivas de las siguientes maneras
(apartado 5.3.1 de [5]):
• Accediendo a aplicaciones autostart BC-related mediante la pulsación del botón
rojo.
• Ejecutando una aplicación de teletexto digital mediante el botón TEXT.
• Ejecutando una aplicación BC-independent mediante el portal de Internet del
fabricante, si lo hubiese.
• Ejecutando una aplicación a partir de un link en una aplicación que esté
ejecutándose (creándose por consiguiente una aplicación hija o hermana).
• Seleccionando un canal broadcast que tiene una aplicación autostart BC-related
que se ejecuta inicialmente en modo pantalla competa (normalmente solo usado
en radio o servicios de datos).
3.2.4 Otros Datos Además de lo anteriormente mencionado, el estándar aborda muchos más temas que
aquí hemos omitido, como formatos de imágenes, vídeos, protocolos soportados, ciclo
de vida de las aplicaciones, posibles estados de las aplicaciones autostart, etc…
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 3
Mª del Carmen Rodríguez Segovia 25
3.3 HBBTV EN ESPAÑA: LA TDT HÍBRIDA La TDT híbrida [11] es una especificación española de TV interactiva que integra TDT e
Internet. Es una tecnología que nos permite acceder pulsando el botón rojo a contenidos
ofrecidos por las cadenas TDT a través de internet, desde el mismo canal TDT.
Ilustración 6: Logo de la TDT Híbrida
La especificación TDT híbrida recoge los acuerdos del Foro de la TV digital [12], en el que
participan fabricantes de equipos, cadenas de televisión y las principales empresas del
sector audiovisual y está basada en las recomendaciones del citado foro y la declaración
de los radiodifusores respecto a los sistemas de protección de contenidos DRM.
Además contempla el seguimiento por parte de fabricantes y cadenas de televisión del
estándar europeo HbbTV.
Por lo tanto la TDT híbrida es una especificación que incluye a HbbTV 1.5, un sistema
DRM y valores por defecto de la especificación española. Los receptores que tienen
HbbTV activado por defecto y que son compatibles con HbbTV 1.0 son parcialmente
compatibles con la TDT híbrida.
Entre los canales y servicios que están implementando la TDT híbrida en el ámbito
nacional, podemos encontrar los siguientes: RTVE, GOL TV, VEO TV, Televisió de
Catalunya S.A., Telemadrid, EITB, Canal Sur, Televisión de Galicia, Radio Televisión
Canaria, IB3 Televisió de les Illes Balears, 7RM, Información TV, BadalonaTV, Lux
Mallorca, Vaughan Radio, Radio María y Radio Marca. De entre todos, RTVE parece
colocarse a la cabeza en cuanto al desarrollo de esta tecnología, contando con servicios
HbbTV para TVE, Clan, además de para La 2, Informativos 24h, y Todo Deportes.
También cuenta con un amplio tutorial en su página web oficial [13] de como ver estos
contenidos y en qué tipo de dispositivos pueden visualizarse, intentando acercar la
tecnología al usuario todo lo posible.
A continuación se muestran algunas capturas de pantalla de algunos de estos servicios:
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 3
Mª del Carmen Rodríguez Segovia 26
Ilustración 7: RTVE HbbTV (http://www.rtve.es/hbbtv/redbutton/)
Ilustración 8: Telemadrid HbbTV
(http://abra4prodtelemadrid.abertistelecom.com/Telemadrid/index.html)
Ilustración 9: IB3 HbbTV (http://abra4.abertistelecom.com/IB3/index.html)
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 3
Mª del Carmen Rodríguez Segovia 27
Ilustración 10: Orbyt TV HbbTV (http://www.orbyt.tv/portal/hbbtv/index.html)
Ilustración 11: La Sexta HbbTV
(http://abra4prodtelemadrid.abertistelecom.com/lasexta/index.html)
Ilustración 12: TV Canaria HbbTV (http://abra4.abertistelecom.com/RTVC/index.html)
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 3
Mª del Carmen Rodríguez Segovia 28
En el desarrollo de la TDT híbrida, juega un papel muy importante Abertis Telecom, que
ha sido reconocida como entidad certificadora para los fabricantes de receptores. Como
entidad certificadora Abertis Telecom realiza las pruebas necesarias y comprueba que
se cumplan las especificaciones técnicas adecuadas por parte de los fabricantes que
participan en el desarrollo de la TDT híbrida. Los dispositivos que cumplan las
condiciones necesarias estarán certificados con el logo de la TDT híbrida, indicando que
pueden ofrecer el servicio.
Las comunidades en las que más televisores conectados se están vendiendo son Madrid,
Cataluña, Comunidad Valenciana, Navarra y Murcia, y a la cola podemos encontrar
Castilla La Mancha, el País Vasco, Rioja y Cantabria.
Estos servicios se obtienen mayoritariamente a través de la TDT (acaparando el 98% de
los servicios disponibles), aunque también los podemos encontrar vía satélite, IPTV y
cable.
3.4 HBBTV EN EUROPA Y EN EL MUNDO 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, con el respaldo de la EBU.
El siguiente mapa refleja la situación de implantación del estándar en Europa en el año
2014:
Ilustración 13: Mapa de implantación de HbbTV en Europa en 2014
Como vemos, HbbTV se encuentra implantada en Alemania, Francia, España, Bélgica,
Suiza, Holanda, Austria, Dinamarca, Polonia, la República Checa y Finlandia. En estado
de pruebas se encuentran Noruega, Suecia, Rusia occidental, Hungría y Turquía.
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 3
Mª del Carmen Rodríguez Segovia 29
En la siguiente tabla [14] mostramos el estado en el que se encuentra HbbTV por países:
Tabla 3: Estado de HbbTV en Europa
País HbbTV
maduro HbbTV
desarrollado HbbTV en
crecimiento
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
Por lo tanto, vemos que la implantación es mucho más sólida en Europa Occidental, con
los servicios más avanzados ofrecidos en Alemania, España, Francia y Polonia.
En Alemania, donde los servicios HbbTV han estado disponibles desde 2009, la
plataforma de HbbTV ZDF genera hoy en día más de 2,5 millones de accesos al día. Esta
gran aceptación del servicio se refleja en que el 60% de los televisores vendidos en este
país durante el pasado año 2013, soportaban HbbTV.
En Francia se estima que en el año 2013 había unos 500,000 televisores que soportaban
HbbTV, ofreciendo estos servicios a través de DVB-T/T2, satélite gratuito, satélite de
pago, cable e IPTV.
En Reino Unido, Freesat (compañía que ofrece los servicios de televisión digital por
satélite en este país) anunció que se iban a lanzar al mercado una serie nueva de
receptores con soporte para HbbTV.
Además se estima que los países del centro y el este de Europa podrían determinar un
impulso definitivo al desarrollo de éste estándar.
En cuanto al resto del mundo, el interés en HbbTV está creciendo, sobre todo en América
del Norte, América del Sur y en Rusia. En Australia, Freeview (plataforma de la TDT de
Australia) ha migrado este año desde MHEG-5 hasta HbbTV. También Malasia y Vietnam
han adoptado HbbTV como parte de sus emisiones DVB-T2, y Tailandia y Singapur están
considerando activamente adoptar HbbTV tras sus respectivos apagones analógicos. Por
último Sudáfrica también se encuentra entre los países que están lanzando HbbTV.
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 3
Mª del Carmen Rodríguez Segovia 30
Ilustración 14: Estándar HbbTV en el mundo
3.5 DISPOSITIVOS HBBTV
Aproximadamente el 93% de los Smart-TV o Connected-TV que se encuentran a la venta
soportan HbbTV.
Así, televisores que son de clase media o alta, vendidos entre los años 2012, 2013 y
2014, y de al menos 32 pulgadas, son muy susceptibles a implementar esta tecnología.
Entre los principales fabricantes que ofrecen TV híbrida y soportan la TDT híbrida
española, se encuentran: Samsung, Sony, LG, PHILIPS, Panasonic, Toshiba, Vestel,
Loewe, Grundig y Televés.
Veamos algunos ejemplos de estos dispositivos:
PHILIPS 40PFL8008K/12
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 3
Mª del Carmen Rodríguez Segovia 31
Samsung UE65F9000SLXXC - TDT-híbrida lo marca como parcialmente compatible [11]
LG 55EA980 - TDT hibrida lo marca como parcialmente compatible [11]
Televisores Loewe, marca alemana y pioneros en la apuesta por HbbTV
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 4
Mª del Carmen Rodríguez Segovia 32
CAPÍTULO 4: DESARROLLO DE APLICACIONES HBBTV
Debido a la escasa información y falta de material disponibles acerca de cómo
programar una aplicación web para HbbTV, el procedimiento empleado para entender
cómo se desarrolla una aplicación HbbTV se ha basado fundamentalmente en el estudio
y comprensión de código fuente de otras aplicaciones, como por ejemplo el test-suite
de MIT-xperts [15], una empresa alemana que se dedica a proveer contenido interactivo
basado en los estándares HbbTV y MHP.
A continuación describiremos los aspectos más importantes que hay que tener en
cuenta a la hora de desarrollar una aplicación HbbTV.
4.1 HERRAMIENTAS PARA EL DESARROLLO DE APLICACIONES HBBTV Para escribir una aplicación HbbTV no es necesario ningún sistema ni programa en
especial, ya que se trata de escribir una página web, con las características propias de la
especificación HbbTV, algunas de las cuales ya hemos nombrado en el apartado 3.2 y
otras se podrán conocer en el apartado 4.2 de este documento.
A parte de esto, los conocimientos que debemos tener dependen de la envergadura de
nuestra aplicación, abarcando desde tecnologías web estándares, como HTML, CSS y
JavaScript, hasta PHP, AJAX, y el conocimiento exhaustivo del protocolo HTTP si se
pretende hacer uso de las funciones de descarga y streaming.
En cuanto a la prueba de las aplicaciones desarrolladas, lo ideal sería poder hacerlo en
un terminal de televisión híbrido, como algunos de los que se han mostrado arriba.
Desafortunadamente, para hacer esto, necesitaríamos que un broadcaster nos la
enlazara en su propia aplicación (en el caso de ser una aplicación BC-related), o que
nuestra aplicación se publicase en el respectivo app-market del fabricante de la
televisión en cuestión (en el caso de ser BC-independent).
Afortunadamente, para probar las aplicaciones HbbTV ni siquiera hace falta un terminal
real, ya que existen una serie de herramientas disponibles en Internet que simulan ser
un terminal HbbTV, pudiendo así ejecutar las aplicaciones HbbTV en ellos.
Entre estas herramientas podemos destacar la máquina virtual de Opera para ser usada
con Virtual Box (HbbTV emulator) que proporciona un entorno de prueba para
aplicaciones HbbTV basada en la especificación 1.1.1 de HbbTV (errata 2). Usa el
navegador Opera con el complemento DragonFly.
Por otro lado tenemos un plugin para el navegador Firefox llamado FireHbbTV. Además
de su facilidad para ser instalado y ejecutado, se trata de una herramienta muchísimo
más flexible que el emulador de Opera, ya que al ejecutarse en el propio navegador nos
da la posibilidad de trabajar con un gran número de herramientas para desarrollador
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 4
Mª del Carmen Rodríguez Segovia 33
que dispone Firefox, como por ejemplo FireBug13 o Tamper Data14. Esta extensión de
Firefox funciona inyectando las APIs más comunes de HbbTV de manera dinámica (a
medida que se van ejecutando) sobre el navegador.
Entre todas las opciones de las que dispone, destacan:
• Soporte de los tipos de <object> específicos de HbbTV.
• Soporte del tipo MIME específico de HbbTV.
• Muestra el “área segura”.
• Cambio de la relación de aspecto (16:9 o 4:3).
• Escala el documento HbbTV acorde al tamaño de la ventana, indicando el
tamaño de re-escalado.
• Permite simular el mando a distancia con el teclado.
• Además permite simular Stream Events DSM-CC e incluye algo de soporte para
el protocolo DVB.
• Vamos a mostrar algunas capturas de pantalla para familiarizarnos con el plug-
in.
A pesar de que ya las hemos nombrado arriba, vamos a ahondar en dos características
de este plugin: el área segura y el mando a distancia.
El área segura es una región de dimensiones 1152 x 648 píxeles. Esta área está indicada
con una línea discontinua y lo que nos indica es la zona límite a partir de la cual no
13 FireBug es una extensión del navegador Firefox creada y diseñada para desarrolladores y programadores web, que permite analizar, editar, monotorizar y depurar el código fuente, CSS, HTML y JavaScript de una manera instantánea y a la vez que estamos ejecutando la página web. 14 Tamper Data es una extensión para el navegador Firefox, que nos permite, entre otras cosas, ver las cabeceras HTTP/HTTPS y parámetros POST.
Ilustración 15: Aplicación HbbTV de RTVE en el plug-in FireHbbTV
Área segura
Mando Relación de aspecto
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 4
Mª del Carmen Rodríguez Segovia 34
deberíamos colocar contenido importante, ya que en cada televisor varía la superficie
de visualización y los contenidos que caen fuera del área de seguridad podrían quedar
fuera de la pantalla y no verse.
La segunda característica en la que vamos a profundizar es la conversión entre mando a
distancia y teclas. Para ver que teclas corresponden a qué botones en el mando a
distancia, solo tendremos que pulsar sobre “Remote Control” y podremos observar lo
siguiente:
Ilustración 16: Mando a distancia de FireHbbTV
Como podemos ver, disponemos de un mando a distancia básico, con las teclas de los
botones de colores, números, las flechas de navegación, botones OK y atrás, y controles
de vídeo básicos (play, pause, stop, y búsqueda hacia delante y hacia atrás), por lo que
nuestra aplicación se verá condicionada por el uso exclusivo de estos botones.
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 4
Mª del Carmen Rodríguez Segovia 35
4.2 CARACTERÍSTICAS BÁSICAS DE CUALQUIER APLICACIÓN HBBTV
4.2.1 Identificación de una aplicación HbbTV Cualquier aplicación HbbTV debe incluir al principio del documento las siguientes líneas,
que identifican correctamente una aplicación HbbTV:
<?xml version="1.0" encoding="UTF-8"?> <meta http-equiv="Content-Type" content="application/vnd.hbbtv.xml+xhtml; utf-8" /> <!DOCTYPE html PUBLIC "-//HbbTV//1.1.1//EN" "http://www.hbbtv.org/dtd/HbbTV-1.1.1.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
La primera línea se trata de la declaración XML. No es obligatoria, pero se recomienda
encarecidamente que los documentos XHTML incluyan la declaración. La codificación de
los caracteres elegida es UTF-8, que soporta un amplio abanico de caracteres.
En cuanto a las tres últimas líneas se tratan de la declaración del tipo MIME, seguida de
la declaración del DOCTYPE y de la etiqueta de comienzo <html> , tal y como se
especifica en la especificación TS 102 796.
4.2.2 Ciclo de vida de una aplicación
- Creación de una aplicación
Al comienzo del cuerpo de la página de nuestra aplicación es necesario definir dos
objetos del tipo Application . Son objetos específicos de HbbTV y un navegador
normal no sabe interpretarlos.
En primer lugar, el objeto del tipo application/oipfApplicationManager sirve
para controlar el ciclo de vida de la aplicación, por lo tanto es necesario declararlo.
<object type="application/oipfApplicationManager" id="applicationManager" style="position:absolute; left:0px; top:0px; width:0px; height:0px;"> </object>
Aunque el objeto se crea en CE-HTML, se gestiona con funciones JavaScript. Las
siguientes líneas de código suponen un ejemplo de cómo obtener este objeto para
poder controlar su ciclo de vida y definir aplicaciones hijas o hermanas.
//Se asume que el objeto de tipo application/oipfAp plicationManager ya //ha sido instanciado en el árbol DOM con el ID “ap plicationmanager”. var appMgr = document.getElementById(“applicationma nager”); var app = appMgr.getOwnerApplication(Window.documen t); var hija = app.createApplication( uri_aplicacion_hi ja, true ); var hermana = app.createApplication( uri_aplicacion _hija, true );
Como podemos ver, para crear una aplicación hija o hermana, haremos uso del método
Application createApplication( String uri, Boolean createChild) ,
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 4
Mª del Carmen Rodríguez Segovia 36
que recibe como parámetros una cadena con el URI15 de la aplicación a crear y un valor
booleano. Si lo que queremos es crear una aplicación hija lo pondremos a true, mientras
que para crear una aplicación hermana valdrá false. Con createApplication
crearemos la aplicación y se añadirá al árbol de aplicaciones ya existentes.
El objeto del tipo application/oipfConfiguration nos permite que elementos de
configuración del sistema se lean y modifiquen. Entre estos elementos se encuentran el
idioma de audio y subtítulos, mostrar la relación de aspecto y otras características
similares.
<object type="application/oipfConfiguration" id="co nfiguration" style="position:absolute; left:0px; top:0px; width :0px; height:0px;"> </object>
- Mostrar aplicación
Como se ha comentado antes, una aplicación se crea mediante el método
createApplication() . Una vez creada esta aplicación, podremos llamar al método
show() de la siguiente manera:
app.show();
La llamada a este método solo afecta la visibilidad de una aplicación. Si hay más de una
aplicación visible la llamada a este método no afectara la aplicación con respecto a otras
aplicaciones visibles.
- Esconder la aplicación
Al igual que existe un método para mostrar la aplicación, existe otro método para
esconderla: hide() . La llamada a este método se realizará de la siguiente manera:
app.hide();
La llamada a este método no afecta el ciclo de vida de una aplicación.
- Destruir la aplicación
Cuando vayamos a salir de la aplicación necesitaremos llamar al método
destroyApplication() , que termina la aplicación, la quita del árbol de aplicaciones
y libera recursos para otras aplicaciones. Cuando una aplicación se termina, todas sus
aplicaciones hijas también deben terminarse.
15 Un URI es un conjunto de caracteres que identifica los recursos de una red de forma unívoca. La diferencia con respecto a una URL es que estos últimos hacen referencia a recursos que, de forma general, pueden variar en el tiempo.
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 4
Mª del Carmen Rodríguez Segovia 37
4.3 LA CLASE KEYSET Además de los dos objetos ya definidos arriba y los encabezados que debe de tener
cualquier aplicación HbbTV, la OIPF establece en el apartado 7.2.5 de [10] una clase de
objetos, la clase keySet . Este tipo de objetos permite a las aplicaciones definir qué tipo
de key events quieren recibir.
Las teclas o botones más comunes se representan por constantes que están definidas
en esta clase y que mostramos en la siguiente tabla:
Nombre de la constante
Valor numérico Uso
RED 0x1 Usado para identificar el key event VK_RED. GREEN 0x2 Usado para identificar el key event VK_GREEN. YELLOW 0x4 Usado para identificar el key event VK_YELLOW. BLUE 0x8 Usado para identificar el key event VK_BLUE.
NAVIGATION 0x10 Usado para identificar los key events VK_UP, VK_DOWN, VK_LEFT, VK_RIGHT, VK_ENTER y VK_BACK.
VCR 0x20 Usado para identificar los key events VK_PLAY, VK_PAUSE, VK_STOP, VK_NEXT, VK_PREV y VK_FAS_FWD, VK_REWIND y VK_PLAY_PAUSE.
SCROLL 0x40 Usado para identificar los key events VK_PAGE_UP y VK_PAGE_DOWN.
INFO 0x80 Usado para identificar el key event VK_INFO.
NUMERIC 0x100 Usado para identificar los eventos numéricos, del 0 al 9.
ALPHA 0x200 Usado para identificar los todos los eventos alfabéticos.
OTHER 0x400 Usado para indicar los key events que no están incluidos en las constantes definidas en esta clase.
Para establecer los key events a los que nuestra aplicación debe atender, disponemos
del método setValue , al cual le pasaremos como parámetro la máscara (numérica por
ejemplo) de los eventos de teclas que deseamos recibir, por ejemplo:
myKeyset = myApplication.privateData.keyset; myKeyset.setValue(0x00000013);
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 5
Mª del Carmen Rodríguez Segovia 38
CAPÍTULO 5: TECNOLOGÍAS USADAS EN EL DESARROLLO DE LA
APLICACIÓN HBBTV PARA PEDIR CITA EN EL SAS
En este apartado incluiremos una breve descripción de los lenguajes de programación
usados para crear la aplicación HbbTV de petición de cita en el InterS@S.
5.1 CE-HTML CE-HTML define las funcionalidades básicas que debe soportar el navegador sobre el que se ejecutan las aplicaciones y que es el que tiene que implementar el terminal que quiera ser compatible con el estándar HbbTV. CE-HTML es un lenguaje basado en estándares W3C. Es una definición de lenguaje HTML para dispositivos de electrónica de consumo que usa XHTML 1.0, DOM 2, CSS TV 1.0 y JavaScript. De las tecnologías W3C también incorpora AJAX (XMLhttpRequest) que permite actualizar páginas web sin tener que volver a cargarlas por completo.
5.1.1 XHTML XHTML (eXtensible HyperText Markup Language) [16] es básicamente HTML pero
expresado como XML válido. Lo que quiere decir esto es que es más estricto a nivel
técnico, pero esto permite que posteriormente sea más fácil al hacer cambio o buscar
errores, entre otros.
El estándar de XHTML 1.0 incluye casi el 95% del estándar de HTML 4.01, y solo añade
pequeñas mejoras y modificaciones, de manera que las páginas y documentos creados
con XHTML son casi idénticas a las páginas y documentos HTML.
Las principales diferencias entre XHTML y HTML son las siguientes:
• Las etiquetas (tanto los elementos vacíos como los elementos no vacíos) siempre
deben de cerrarse:
� Incorrecto: <br>
� Correcto: <br />
• Los elementos anidados deben tener el orden correcto de apertura/cierre, es
decir, el que se abre ultimo debe cerrarse primero.
� Incorrecto: <em><strong>Texto</em></strong>
� Correcto: <em><strong>Texto</strong></em>
• Los nombres de elementos y atributos siempre deben de ir minúsculas y los
valores de los atributos encerrados entre comillas (dobles o simples):
� Incorrecto: <A HREF="http://www.domname.com">Domname</A>
� Correcto: <a href="http://www.domname.com">Domname</a>
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 5
Mª del Carmen Rodríguez Segovia 39
El objetivo de XHTML es avanzar en el proyecto de W3C de lograr una web semántica16,
donde la información y la presentación estén claramente separadas.
Ilustración 17: Diferencias XHTML/HTML
Una de las ventajas de separar el contenido de la presentación es que convierte a los
documentos XHTML en más flexibles, ya que se adaptan mejor a las diferentes
plataformas: pantallas de ordenador, pantallas de dispositivos móviles,…
Los documentos XHTML pueden tener extensión .xhtml o .html (en nuestro caso) entre
otras.
5.1.2 CSS CSS (hojas de estilo en cascada) es el lenguaje de hojas de estilo utilizado para describir
el aspecto y el formato de un documento escrito en un lenguaje de marcas, como
XHTML.
La información de este estilo puede ser adjuntada en un documento separado o en el
mismo documento HTML (tanto en la cabecera como en alguna etiqueta mediante el
atributo style ). En nuestro proyecto se han usado ambas opciones.
En CE-HTML se habla de CSS TV Profile 1.0 que se trata de un perfil de hojas de estilo
CSS que están configuradas para cumplir el perfil de las televisiones. El CSS TV Profile
especifica un perfil común para dispositivos de televisión, identificando un conjunto de
propiedades, valores, selectores y reglas CSS que mejor se ajusten a estos dispositivos.
El resultado de CSS TV Profile incluye la gran mayoría de CSS1, porciones de CSS2 y el
módulo de color de CSS3.
5.1.3 JavaScript y AJAX JavaScript es un lenguaje de programación que se usa principalmente para la creación
de páginas web dinámicas. Es un lenguaje de programación interpretado, es decir, que
no es necesario compilar los programas escritos con JavaScript para poder ejecutarlos,
sino que se pueden probar directamente en el navegador sin realizar ningún proceso
intermedio entre la programación y las pruebas.
16 La web semántica es un conjunto de actividades desarrolladas por el W3C, que tienden a la creación de tecnologías para publicar datos legibles por aplicaciones informáticas (máquinas en la terminología de la web semántica).
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 5
Mª del Carmen Rodríguez Segovia 40
JavaScript, aunque tiene una parte dedicada al servidor (Server-side JavaScript, SSJS), se
usa principalmente en el lado del cliente. Además es un lenguaje de programación
orientado de objetos17 y basado en prototipos18.
JavaScript fue creado inicialmente por Brendan Eich, y empezó a usarse en 1995, con el
lanzamiento del navegador Netscape 2.0. Inicialmente se le denomino LiveScript. El
nombre de JavaScript llega cuando Netscape y Sun Microsystems firman un acuerdo
para la creación de un nuevo lenguaje de programación. El nuevo nombre dio lugar a
equivocaciones, dando lugar a pensar que este lenguaje es una prolongación de Java.
Por otro lado Microsoft creo un dialecto de JavaScript, casi idéntico al lenguaje original,
al que nombro como JScript.
Para evitar problemas de incompatibilidades (JavaScript se había creado como una
implementación del estándar ECMAScript, por lo que cumplía este estándar, pero JScript
era incompatible en muchos de los casos), el W3C creo el estándar DOM19. En 1997 los
autores propusieron que JavaScript fuera adoptado como estándar de la ECMA (recibió
el nombre de EcmaScript [17]). Posteriormente la ISO también lo adopto como un
estándar (ISO 16262 [18]).
Todos los navegadores en la actualidad son capaces de interpretar el código JavaScript
integrado en las páginas web. Se interpreta en el agente de usuario a medida que las
sentencias van descargándose junto con el código HTML/XHTML.
El código JavaScript en HTML y XHTML [19] se encierra entre etiquetas <script> y se
puede incluir en cualquier parte del documento, aunque se recomienda incluirlo en la
cabecera de la página o en un archivo aparte.
Por otro lado, AJAX es una técnica de desarrollo web para crear aplicaciones interactivas
o RIA. Estas aplicaciones se ejecutan en el cliente y se usan para mantener una
comunicación asíncrona con el servidor en un segundo plano, sin interferir con la
visualización ni el comportamiento de la página. Así se realizan cambios sobre las
páginas sin necesidad de recargarla, mejorando la interactividad.
El lenguaje que se usa para las funciones de llamada de AJAX es JavaScript, mientras que
el acceso a los datos se realiza mediante el objeto de JavaScript XMLHttpRequest .
Dentro de este apartado cabe describir también el formato de intercambio de datos
JSON. JSON es un formato ligero para el intercambio de datos que no requiere el uso de
XML y usa la notación literal de objetos JavaScript.
17 La POO es un estilo de programación que usa objetos en sus interacciones para desarrollar aplicaciones y programas informáticos. Está basada en varias técnicas, entre las que destacan: herencia, cohesión, abstracción, polimorfismo, acoplamiento y encapsulamiento. 18 La programación basada en prototipos es un estilo de POO en el cual los objetos no son creados mediante la instanciación de clases, sino mediante la clonación de otros objetos y su extensión añadiéndole nuevas funcionalidades. 19 El DOM es una interfaz de programación de aplicaciones para acceder, añadir y cambiar dinámicamente contenido estructurado en documentos con lenguajes como JavaScript.
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 5
Mª del Carmen Rodríguez Segovia 41
El uso de JSON se ha extendido gracias a la simplicidad de parsear20 los datos JSON,
especialmente como alternativa a XML en AJAX. Una cadena de datos JSON se puede
analizar fácilmente con la función eval() o convertir a un objeto en JavaScript con la
función JSON.parse() .
Debido a que el uso de eval() plantea problemas de seguridad, JSON se emplea en
entornos donde el tamaño de flujo de datos entre cliente y servidor es de vital
importancia y la fuente de datos es explícitamente de fiar.
5.2 PHP PHP [20] es un lenguaje de programación de uso general del lado del servidor, diseñado
originalmente para desarrollar páginas web con contenido dinámico. El código es
interpretado por un servidor web con un módulo de procesador de PHP y es éste último
quien genera la web resultante. PHP puede ser usado en la gran mayoría de los sistemas
operativos y plataformas, además de en los servidores webs más populares, ya que
existe en versión CGI y módulo para Apache, todo de forma gratuita.
Fue creado por Rasmus Lerdorf en 1995. Actualmente sigue desarrollándose por The
PHP Group y sirve como estándar de facto para PHP ya que no existe una especificación
formal. Forma parte del software libre publicado bajo la licencia PHP.
PHP posee un gran parecido con los lenguajes más comunes de programación
estructurada como C y Perl, por lo que la mayoría de los programadores pueden crear
aplicaciones complejas con una curva de aprendizaje muy corta y sin tener que aprender
todo un nuevo grupo de funciones.
Cuando el cliente hace una petición al servidor para que le envíe la página web deseada,
el servidor ejecuta el intérprete PHP. El intérprete procesa el script que generará el
contenido de manera dinámica, se lo envía al servidor y éste, a su vez, se lo envía al
cliente.
Permite la conexión a diferentes tipos de bases de datos (tanto SQL como NoSQL), y
mediante extensiones es posible generar archivos PDF, Flash e imágenes en distintos
formatos. Aunque PHP está pensado para facilitar la creación de sitios webs, es posible
crear aplicaciones con una interfaz gráfica para el usuario y también puede ser usado
desde la línea de comandos (PHP-CLI).
El código PHP se puede insertar en cualquier parte de la página HTML/XHTML, incluso
dentro de las etiquetas, pero siempre tiene que estar insertado entre sus delimitadores:
<?php
…código php…
?>
20 Parsear viene de parser (o analizador sintáctico), que es una de las partes de un compilador que transforma su entrada en un árbol de derivación.
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 5
Mª del Carmen Rodríguez Segovia 42
Las sentencias deben acabar con punto y coma y las variables empiezan por el signo
dollar ($) sin ser necesario definir el tipo. En cuanto a estructuras de control, comparte
las mismas de otros lenguajes con sintaxis C (if , for , while …).
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 6
Mª del Carmen Rodríguez Segovia 43
CAPÍTULO 6: DESARROLLO DE LA APLICACIÓN HBBTV PARA LA
PETICIÓN DE CITA EN INTERS@S
El objetivo de este trabajo, es el diseño y desarrollo de una aplicación HbbTV para la
petición de cita en InterS@S. Actualmente, existen aplicaciones con este propósito pero
casi todas enfocadas a dispositivos móviles (como un smartphone o una tablet), aunque
también hemos encontrado aplicaciones parecidas a lo que se pretendía desarrollar
durante este proyecto, como la petición de cita médica ofrecida por el canal autonómico
7 Región de Murcia [21] y un proyecto desarrollado en 2012 para la petición de cita en
InterS@S a través de un widget de Yahoo! Connected TV [22].
6.1 ENTORNO DE TRABAJO Como ya se ha comentado anteriormente, para programar una aplicación HbbTV no es
necesario ningún programa ni software especial, pudiéndose programar en un editor de
texto plano, pero durante el desarrollo de este proyecto se ha usado un entorno de
trabajo en particular, que a continuación pasaremos a describir.
Para empezar hemos creado una máquina virtual en el software VirtualBox [23] con el
S.O. Debian 64 bit 7.5.0 (Debian Wheezy) [24]. Se ha escogido el uso de una máquina
virtual por la facilidad que representa ésta última en cuanto a la instalación de nuevos
módulos y configuración deseada del equipo.
Para escribir la aplicación hemos usado el editor Bluefish [25], un software editor HTML
multiplataforma POSIX y con licencia GPL, lo que le convierte en un software libre.
Bluefish está dirigido a diseñadores web y programadores y se enfoca en la edición de
páginas dinámicas e interactivas. Cuenta con características como rapidez, posibilidad
de abrir múltiples archivos simultáneamente, soporte para sub-patrones y patrones
predefinidos (para HTML, PHP, JavaScript, JSP, SQL, XML, Python, Perl, CSS, ColdFusion,
Pascal, R, Octave/Matlab) y diálogos para etiquetas HTML.
Para servir nuestras páginas web se ha utilizado el servidor HTTP Apache [26], un
servidor web HTTP de código abierto para plataformas UNIX y Microsoft Windows entre
otras, que implementa el protocolo HTTP 1.1 y la noción de sitio virtual. Apache presenta
características altamente configurables y desde 1996 es el servidor HTTP más usado.
Por último, para probar la aplicación desarrollada, se ha usado el navegador Firefox [27]
con el complemento FireHbbTV [28], además de otros complementos adicionales (como
FireBug [29] y Tamper Data).
6.2 FUNCIONAMIENTO DE LA APLICACIÓN La aplicación está pensada para que la navegación a través de ella sea lo más sencilla
posible. Así, en la mayoría de las vistas de la aplicación, solo son necesarios un par de
botones de colores o las teclas de navegación arriba/abajo para interactuar con ella,
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 6
Mª del Carmen Rodríguez Segovia 44
siendo solo necesario introducir datos cuando vamos a conectarnos con el servidor de
InterS@S. A continuación mostramos un diagrama de flujo simplificado de la aplicación.
SI
SI
SI
SI
SI
NO
NO
NO
NO
NO NO
Mostrar mostrarHoras.html
¿Cancelar cita?
Mostrar citaCancelada.html
Cerrar sesión
Mostrar mostrarCita.html
¿Hay cita? Mostrar mostrarDias.html
¿Botón verde
pulsado?
Validación de datos
¿Datos correctos?
¿Botón verde
pulsado?
Inicio
Mostrar index.html
Mostrar login.html
¿Botón rojo
pulsado?
Cerrar aplicación o ir a
index.html
¿Sesión
iniciada?
SI
NO
SI
Si queremos coger cita para otro día
Escogemos
un dia Escogemos
una hora
Y m
ost
ram
os
erro
res
en lo
gin
.htm
l
El botón rojo se puede pulsar desde cualquier vista, por eso se ha
representado como un proceso independiente. Solo se podrá
cerrar la aplicación desde index.html.
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 6
Mª del Carmen Rodríguez Segovia 45
El funcionamiento general de la aplicación consiste en que, cuando necesitamos
comunicarnos con el servidor de InterS@S, nuestra aplicación se comunica con el
servidor intermedio a través de peticiones XMLHttpRequest. El servidor intermedio es
el que se comunica finalmente con el servidor de InterS@S a través de la librería para
PHP libcURL. Los datos obtenidos de la página de InterS@S son parseados gracias a
Simple HTML DOM Parser y devueltos a la aplicación en formato JSON. La aplicación
opera con estos datos y muestra por pantallas los que son necesarios para la interacción
con el usuario.
6.3 CÓDIGO DE LA APLICACIÓN HBBTV DE CITA MÉDICA Los códigos de los documentos descritos en este apartado se pueden consultar en el
Anexo A.
6.3.1 Archivos de la Aplicación Los archivos que controlan la aplicación (que muestran los datos e interactúan con el
servidor de InterS@S y el usuario) son en total seis y a continuación describiremos
brevemente las acciones que realizan:
• index.html: Tan solo es una bienvenida a la aplicación y el único sitio desde donde
podremos cerrarla. La interacción se consigue con el botón verde (que nos
llevará a login.html para poder iniciar sesión) y el botón rojo, que servirá para
cerrar la aplicación.
• login.html: Formulario para la introducción de los datos personales del usuario
para conectar con InterS@S. Para navegar por el formulario bastaran las flechas
arriba y abajo y sabremos en que campo vamos a escribir, ya que se muestra
coloreado de un color diferente al resto. También es posible borrar los datos
introducidos mediante el botón ATRÁS (tecla backspace en el teclado). Esta
Ilustración 18: Página de inicio de la aplicación HbbTV para peticion de cita (con marco de área de seguridad)
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 6
Mª del Carmen Rodríguez Segovia 46
página se comunica con loginIntersas.php a través de una petición XHR y también
será la encargada de validar los datos introducidos en el formulario, y de mostrar
los errores (en el caso de que los hubiese) en relación a estos datos.
Ilustración 20: Detalle de formulario de login.html
• mostrarDias.html: se nos muestra una lista con los trece días siguientes en los
que podemos coger cita a partir del día actual. Para navegar por la lista solo son
necesarios las flechas arriba/abajo y el botón OK (tecla ENTER en el teclado) para
elegir el día. Una vez elegido el día se comunica con la página seleccionarCita.php
con una petición XHR. Desde esta vista también es posible cerrar sesión
mediante el botón rojo (lo que nos llevará de nuevo a index.html).
Ilustración 19: Visión general del formulario y mensaje de error
Atrás
Atrás
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 6
Mª del Carmen Rodríguez Segovia 47
Ilustración 21: Detalle de la vista mostrarDias.html. Los apellidos del usuario se han tapado por motivos de
privacidad.
Ilustración 22: Vista mostrarDias.html cuando se pulsa el botón rojo
• mostrarHoras.html: se muestra una lista con las horas que hay disponibles para
el día seleccionado. Si no hay horas disponibles se mostrará un mensaje
informando de esta situación. Para navegar por la lista se sigue el mismo
mecanismo que en mostrarDias.html. Solo son necesarias las flechas arriba y
abajo y el botón OK para seleccionar la hora a la que preferimos nuestra cita.
Una vez seleccionada, esta página le hace una petición XHR a asignarCita.php, y
se mostrara la vista mostrarCita.html. Desde esta vista también es posible
escoger otro día (botón azul) si no nos viene bien ninguna hora o cerrar sesión
(botón rojo), que nos llevará a index.html.
• mostrarCita.html: nos mostrará los detalles de la cita asignada. A esta vista
podemos llegar por dos medios distintos. En primer lugar, podemos llegar aquí
si ya había una cita asignada anteriormente, es decir, llegamos aquí a través de
login.html; o bien, podemos llegar a través de mostrarHoras.html, justo después
de elegir una cita. Desde esta vista podremos cancelar la cita (botón azul) o cerrar
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 6
Mª del Carmen Rodríguez Segovia 48
sesión. Si decidimos cancelar la cita, haremos una petición XHR a
cancelarCita.php.
Ilustración 24: Detalle de la vista mostrarCita.html. Algunos de los datos se han tapado por motivos de privacidad.
• citaCancelada.html: nos mostrará información acerca del estado de petición de
cancelación (si ha sido exitoso o no). Desde esta vista podremos volver a coger
otra cita (nos llevará a mostrarDias.html) o cerrar la sesión.
Ilustración 23: Detalle de la vista mostrarHoras.html. Los apellidos del usuario se han tapado
por motivos de privacidad.
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 6
Mª del Carmen Rodríguez Segovia 49
En todos los casos el cierre de sesión se realiza de la misma manera: se realiza una
petición XHR de la página en cuestión a cerrarSesion.php. Si la petición ha tenido éxito
volveremos a la vista de bienvenida.
Además de los seis archivos descritos anteriormente, nuestra aplicación se compone de
dos archivos adicionales:
• estilos.css: contiene parte de los estilos de la aplicación.
• funciones.js: contiene una serie de funciones JavaScript que son comunes a todas
las vistas, como la función que se encarga de hacer la petición XHR, funciones
para manejar las cookies y funciones para la validación del formulario de inicio
de sesión.
A pesar de que tenemos un archivo de presentación, la separación presentación-
contenido no es absoluta en nuestra aplicación. Se ha usado exhaustivamente el
atributo style en muchas etiquetas para establecer la presentación de ese elemento
(sobre todo en cuanto a su posición en pantalla se refiere). La razón por la cual se ha
hecho de esta manera no es más que la búsqueda de la sencillez a la hora de mover los
distintos elementos de la página.
Además, es conveniente destacar también que aunque tenemos un archivo con
funciones JavaScript, cada página tiene incluida en la cabecera (dentro de la etiqueta
<head> ) código JavaScript. Esto se debe a que todas las páginas tienen implementadas
acciones diferentes para las mismas teclas, por lo que la función de manejo de las teclas
es diferente en casa caso.
Veamos por ejemplo la función de manejo de teclas de index.html:
function handleKeyCode(kc) { if (kc==VK_GREEN) { //Si pulsamos el botón verde de nuestro mando, pa saremos a hacer login en la página del InterS@S. //Cargamos la vista de “login.html”. document.location.href='login.html'; } else if (kc==VK_RED) { //Si pulsamos el rojo salimos de la app. closeApp(); return true;
Ilustración 25: Detalle de la vista citaCancelada.html
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 6
Mª del Carmen Rodríguez Segovia 50
} return false; } Como vemos, aquí solo hemos implementado el botón verde y rojo, mientras que en
otras vistas es necesario implementar más botones, o los mismos pero con acciones
distintas.
Además de la función de manejo de teclas se han incluido las funciones propias que usa
cada página, por ejemplo muestraHoras() en el archivo mostrarHoras.html:
function muestraHoras() { //El número de horas lo obtenemos del objeto info_s esion2. var numeroHoras=info_sesion2.numerohoras; //Variable que indica el día escogido. var diaescogido='dias.dia'+eval(indice)+'.value'; document.getElementById('nom_paciente').innerHTML = "Estamos atendiendo a: " + info_sesion.nombre_usuario; if (numeroHoras == 0){ //Si no hay horas para el día escogido, lo mostram os por pantalla. document.getElementById("infodia").innerHTML=' En este momento no existen citas disponibles a través de In terS@S para el día ' + decodeURIComponent(eval(diaescogido)) + '. Pued e elegir un día distinto o bien ponerse en contacto con Salud Respo nde (902 505 060) o con su centro de salud.'; document.getElementById("infodia").style.left="25 0px"; document.getElementById("infodia").style.top="270 px"; document.getElementById("infodia").style.width="8 00px"; document.getElementById("infodia").style.textAlign ="center"; } else { document.getElementById("infodia").innerHTML='Hor as disponibles para el día ' + decodeURIComponent(eval (diaescogido)) + ':'; //Como no sabemos cuántas horas tendremos disponi bles ese día, tendremos que crear el menú de las horas dinám icamente. for(i=0; i< numeroHoras ; i++) { document.getElementById('menu').innerHTML += "<li id='hora"+eval(i)+"' name='hora"+eval(i)+"'>" + eval('horas.hora'+i+'.cadena') + "</li>"; } } }
Estas funciones propias de cada página también las podríamos haber incluido en el
archivo JavaScript funciones.js, pero esto provocaría que el archivo fuese
extremadamente largo y tuviésemos que cargar en cada página funciones que no vamos
a usar.
6.3.2 Comunicación entre distintas vistas de la aplicación Uno de los principales problemas con los que nos hemos encontrado a la hora de realizar
la aplicación ha sido el almacenamiento de datos que necesitábamos usar en otras
vistas. Veamos esto con un ejemplo para entenderlo mejor. Cuando introducimos
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 6
Mª del Carmen Rodríguez Segovia 51
nuestros datos en el formulario y nuestra página login.html hace una petición XHR a la
página loginIntersas.php, ésta página nos devuelve una serie de datos, como por
ejemplo los días disponibles en el caso de no haber una cita ya asignada.
Al hacer la llamada desde login.html, los datos que hemos obtenido son locales de ésta
página, en concreto de la función desde la que hemos ejecutado la petición XHR. Si
cambiamos a mostrarDias.html no tendremos estos datos, por lo tanto, ¿cómo
podremos mostrarle al usuario los días que tiene para elegir?
La solución a esto se ha implementado mediante cookies. Las cookies sirven para el
envío de información desde un sitio web hacia el navegador del usuario, de manera que
el sitio web puede consultar la actividad previa del usuario. La información guardada en
las cookies puede servir para autenticación, identificación de una sesión de usuario,
preferencias del navegador…
Las cookies forman parte de la cabecera HTTP enviadas al cliente desde el servidor y
tienen la forma general de: name=value; , donde name es el nombre de la cookie y
value es la información de la cookie. Detrás de value también puede aparecer la fecha
de expiración (fecha a partir de la cual se borran) o la ruta donde están guardadas (el
path ).
Por lo tanto, los datos que íbamos a necesitar en otras vistas (información de sesión,
datos del login, día elegido…) se han guardado en cookies. Para ello hemos hecho uso
del modelo DOM de nuevo (que nos devuelve las cookies mediante
document.cookie ) y la función setCookie definida en el documento funciones.js, y
que mostramos a continuación:
function setCookie(cname, cvalue, expires) { cookieStr = cname + "=" + escape(cvalue) + "; " ; if (expires){ expires = setExpiration(expires); cookieStr += "expires=" + expires + "; " ; } var path= "path=/" ; cookieStr += path + "; " ; document.cookie = cookieStr; }
Esta función recibe como argumentos el nombre de la cookie que vamos a guardar, el
valor y el tiempo de expiración (este último es opcional).
Para recuperar los datos guardados en una cookie basta con llamar a la función
getCookie pasándole como argumento el nombre de la cookie de la cual queremos
recuperar los datos. Esta función también está definida en funciones.js, y la mostramos
a continuación:
function getCookie(cname) { var name = cname + "=" ; var ca = document.cookie.split( ';' ); for ( var i= 0; i<ca.length; i++) {
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 6
Mª del Carmen Rodríguez Segovia 52
var c = ca[i].trim(); if (c.indexOf(name) == 0) return c.substring(name.length,c.length); } return "" ; }
Antes de cerrar la sesión será necesario borrar todas las cookies para no tener ningún
problema cuando volvamos a iniciar sesión.
6.4 CÓDIGO PHP DEL SERVIDOR INTERMEDIO Cuando nos referimos al servidor intermedio, nos estamos refiriendo a la parte de la
aplicación que se encarga de los diálogos con InterS@S. En realidad, este servidor
intermedio está bajo nuestro mismo servidor, de manera que realmente no es un
“servidor intermedio” como tal. A pesar de esto, nos hemos referido a él en todo
momento con este nombre, ya que la comunicación que establece con InterS@S es
totalmente transparente a nuestra aplicación, por lo que consideramos que actúa como
tal.
Los códigos de los documentos que describimos en este apartado se pueden consultar
en el Anexo B.
6.4.1. Conexión con el servidor de InterS@S con libcurl
cURL [30] es un software que proporciona una librería y una herramienta de línea de
comandos para transferir datos usando varios protocolos. EL proyecto cURL produce dos
productos, libcurl y cURL. En el desarrollo de este proyecto nos hemos centrado en el
uso de libcurl, aunque también se ha hecho uso brevemente de la herramienta para la
línea de comandos.
Libcurl es una librería libre para la transferencia de datos y soporta una multitud de
protocolos: FTP, FTPS, Gopher, HTTP, HTTPS, SCP, SFTP, TFTP, Telnet, DICT, FILE, LDAP,
LDAPS, IMAP, POP3, SMTP y RSTP. Además, soporta certificados HTTPS, HTTP POST,
HTTP PUT, subida de archivos vía FTP, proxies, cookies y autenticación
usuario+contraseña.
La librería es portable y funciona idénticamente en muchas plataformas, entre las que
destacan Windows, Mac OS X, Apple iOS, Android y Linux, entre muchas otras.
Además soporta SSL/TLS a través de OpenSSL (entre otros).
A continuación vamos a describir como se usa la librería libcurl en la web que se encarga
de realizar las consultas al InterS@S.
Para comenzar debemos iniciar una sesión cURL que se realiza de la siguiente manera:
$curl = curl_init();
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 6
Mª del Carmen Rodríguez Segovia 53
Una vez iniciada la sesión podemos especificar todos los parámetros que queramos de
los que la instrucción curl_setopt [31] nos permite. Lo primero que tendremos que
hacer es establecer la URL de destino:
curl_setopt ($curl, CURLOPT_URL, $url);
Además, podemos establecer multitud de opciones, entre las cuales nosotros hemos
establecido que la respuesta se almacene en una cadena de texto, que nos devuelva la
cabecera HTTP en la respuesta y además le indicamos el contenido de la cabecera User-
Agent. Veamos cómo se programarían estas opciones:
curl_setopt ($curl, CURLOPT_RETURNTRANSFER, true); //Con true, el resultado nos lo va a devolver en una cadena de tex to. curl_setopt ($curl, CURLOPT_HEADER, true); //Devuelve la cabecera HTTP en la salida.
curl_setopt ($curl, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.1) Gecko/20061204 F irefox/2.0.0.1');
Por otro lado, libcurl, por defecto, intenta detectar de forma automática la versión SSL
instalada en el servidor al que se realiza la petición, aunque a veces hay que establecerlo
manualmente. El servidor de InterS@S trabaja con la versión SSL 3.0 como indican en su
página, de manera que establecimos esta versión manualmente con la siguiente
instrucción:
curl_setopt ($curl, CURLOPT_SSLVERSION, 3);
Por otro lado, para identificarse en InterS@S es necesario un certificado clase 2 CA de la
FNMT o un DNIe [32]. En este caso hemos trabajo con la primera opción, ya que libcurl
nos proporciona multitud de opciones para usar certificados. Para empezar, hemos
comprobado que el certificado del servidor es válido, es decir, se comprueba que la CA
(autoridad certificadora) que lo firma está entre las CA reconocidas.
curl_setopt ($curl, CURLOPT_SSL_VERIFYPEER, true);
Para que esta comprobación fuese positiva, como el certificado del servidor de InterS@S
está firmado por la FNMT, fue necesario exportar su certificado raíz (FNMTClase2CA-
FNMT.crt) como certificado X.509 con cadena (PEM) e incluirlo en el servidor
intermedio. Es imprescindible que el certificado se guarde en este formato, ya que es el
formato que libcurl reconoce. A continuación le especificamos a la sesión curl donde
debe de buscar este certificado:
curl_setopt ($curl, CURLOPT_CAINFO, getcwd().'/FNMT Clase2CA-FNMT');
Con la herramienta Tamper Data, que ya hemos nombrado a lo largo de este
documento, se pudo comprobar que en la página de InterS@S las peticiones (como por
ejemplo la autenticación de usuario) se hacían con el método POST. Por lo tanto es
necesario indicarle a la sesión curl que vamos a usar el paso de parámetros por POST (ya
que por defecto cURL lo hace por GET) y también debemos de indicarle los parámetros
(en este caso sería la variable $campos) que queremos usar. Esto se hace con las
siguientes líneas:
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 6
Mª del Carmen Rodríguez Segovia 54
curl_setopt ($curl, CURLOPT_POST, true); curl_setopt ($curl, CURLOPT_POSTFIELDS, $campos);
Tras especificar todas las opciones deseadas, solo nos queda ejecutar la sesión cURL.
Puesto que antes establecimos que queríamos guardar la respuesta en una cadena de
caracteres, será necesario asociar esta instrucción a una variable de la siguiente manera:
$codigofuente=curl_exec($curl);
De manera que en $codigofuente tendremos la respuesta de la conexión. Antes de
abrir una nueva sesión curl es importante cerrar la sesión que ya teníamos abierta. Esto
se realiza con curl_close :
curl_close($curl);
6.4.2 Parseando la respuesta del servidor con Simple HTML DOM parser Como hemos comentado en el apartado anterior, la respuesta, es decir, todo el
documento HTML generado por el servidor, la tenemos guardada en una variable. De
esa cadena de caracteres solo nos interesan ciertos datos, que serán los que enviaremos
de vuelta en la petición XHR para finalmente mostrarlos por la aplicación.
A pesar de que es una cadena de caracteres, y que podríamos operar con ella con
funciones de PHP de manipulación de cadenas, hemos decidido usar la librería Simple
HTML Dom Parser [33]. Esta es una librería escrita en PHP5+ que nos deja manipular
código HTML de una manera muy simple. Requiere PHP5+ y nos permite buscar
etiquetas en la página HTML con selectores (de la misma manera que lo hace jQuery21)
y extraer los contenidos buscados en una sola línea.
Para usar esta librería hay que descargarla e incluirla en el directorio en el que está
nuestra web, además de incluirla en el fichero PHP mediante una directiva include :
include_once('simple_html_dom.php');
Una vez incluida, pasamos a crear un nuevo objeto DOM:
$html = new simple_html_dom();
Una vez definido el nuevo objeto podemos cargar HTML en él, tanto desde una URL
como desde una cadena de texto o un archivo. En nuestro caso, como ya sabemos, es
una cadena de texto, luego:
$html->load($codigofuente);
Una vez cargado el HTML en el objeto ya podemos pasar a buscar los elementos
deseados dentro de él. Esto se hace mediante find , especificando lo que estamos
buscando y también el índice del elemento encontrado. Por ejemplo, en una página, si
buscamos elementos con etiqueta <div> , podemos obtener muchos, pero indicando el
21 jQuery es una biblioteca JavaScript que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos de JavaScript y agregar interacciones para AJAX a páginas web.
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 6
Mª del Carmen Rodríguez Segovia 55
índice, nos quedaremos con el que nosotros realmente queremos. Una vez obtenido el
elemento deseado podemos acceder a atributos del elemento (por ejemplo href en el
caso de una etiqueta <a>) o también podemos acceder a cuatro atributos especiales,
que serían:
• tag : devuelve el nombre de la etiqueta.
• innertext : devuelve el contenido HTML de un elemento.
• outertext : devuelve el HTML exterior a un elemento.
• plaintext : devuelve el texto plano, sin etiquetas HTML.
Veamos un par de ejemplos de esto, extraidos de loginIntersas.php:
$matrizdatos['nombre_usuario']=trim($html->find ('i nput [name= nombre_usuario]',0)->value);
$matrizdatos['hora_cita']=utf8_encode($html->find ( 'strong [class = letra_justificante_cita_negrita_big]',1)->innertext );
Como vemos, en el primer caso hemos buscando el atributo value , mientras que en el
segundo hemos usado el atributo innertext .
Hay que tener en cuenta que el servidor se puede ralentizar si se cargan demasiados
objetos DOM simultáneamente, por lo que es muy importante que antes de cargar un
objeto DOM nuevo se elimine el que hemos usado, usando la función clear() de la
siguiente manera:
$html->clear();
6.4.3 Datos JSON Los datos parseados con Simple HTML DOM Parser son guardados en un array
asociativo 22 en PHP. Para poder disponer de estos datos en nuestra aplicación
necesitamos convertirlos a un formato que JavaScript pueda manejar con facilidad. El
formato elegido es JSON, para lo cual se hace uso de json_encode() , una función de
PHP que recibe como parámetros lo que queramos convertir a JSON (puede ser
cualquier cosa excepto un recurso23 ) y devuelve una cadena en formato JSON. La
llamada a esta función se realiza de la siguiente manera:
$json=json_encode($array);
Esta cadena JSON es devuelta a la página que me ha hecho la petición XHR de la siguiente
manera:
print($json);
Esta técnica es usada en todos los archivos que componen la aplicación web del servidor
intermedio.
22 Los arrays asociativos, a diferencia de los secuenciales, permiten que el acceso se haga a una clave, en vez de al elemento i-ésimo. 23 Un recurso es una variable especial que contiene una referencia a un recurso externo.
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 6
Mª del Carmen Rodríguez Segovia 56
6.4.4 Mantenimiento y cierre de la sesión en InterS@S - Mantenimiento de la sesión
Una de los aspectos más importantes, en referencia a la conexión con el servidor del
InterS@S, era el mantenimiento de la sesión en InterS@S en las sucesivas peticiones que
se harían desde el servidor intermedio (búsqueda de horas, asignación de cita,
cancelación de cita,…).
Para mantener la sesión inicial se optó por extraer la cookie de sesión en la cabecera
HTTP de la respuesta del servidor, y posteriormente, pasársela a la aplicación como si
fuese un dato más, así podríamos disponer de ella en futuras peticiones. Esto es viable
porque en cURL también podemos especificar, como parte de las opciones de la sesión
cURL, que se use una determinada cookie en la cabecera de HTTP request. Así, en las
sucesivas peticiones, añadiríamos otra opción más a la sesión cURL:
curl_setopt($curl, CURLOPT_COOKIE, $cookies_sesion) ;
En la línea de código de arriba, $curl sería la sesión cURL actual, y $cookies_sesion
sería la cadena de texto que contiene la cookie de la sesión de InterS@S.
En el apartado 6.3.2 ya hemos hablado de las cookies y de su formato, por lo que ahora
solo nos limitaremos a indicar como hemos extraído esta información de la cabecera.
Como ya se vio anteriormente, entre las opciones de la sesión cURL, establecimos que
nos devolviese la cabecera HTTP en la respuesta del servidor. Por lo tanto, tras ejecutar
la sesión cURL correspondiente (en este caso $curl2 ), la respuesta del servidor la
tenemos almacenada en $codigofuente2 . Para extraer las cookies de esta cadena
hemos usado funciones de manipulación de cadenas en PHP. A continuación mostramos
el fragmento de código con el que se consigue esto:
$start = strpos($codigofuente2, "Set-Cookie"); $end = strpos($codigofuente2, "Content-Type"); $parts = split("Set-Cookie: ",substr($codigofuente2 , $start, $end-$start)); $cookies = array(); foreach ($parts as $co){ $cd = split(";",$co); if (!empty($cd[0])) // Cada vez que se recorre el bucle se añade un el emento a la matriz de tamaño indeterminado $cookies[] $cookies[] = $cd[0]; } $cookies_sesion=implode(";",$cookies);
En las sucesivas peticiones se incluirá la opción para indicar qué cookies deben de usarse
y con esto, logramos mantener la sesión abierta.
- Cierre de la sesión
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 6
Mª del Carmen Rodríguez Segovia 57
Al igual que mantener la sesión abierta es importante también lo es el hecho de cerrarla
para poder iniciar sesión con otro usuario y que no nos cause problemas (ya que
InterS@S reconocería la sesión del usuario anterior si no la cerramos correctamente, y
no del actual, a pesar de que el hecho de iniciar sesión no haya dado problemas).
Cuando introducimos nuestros datos en la página del InterS@S, si son todos correctos,
el servidor genera una página de respuesta como la siguiente:
Ilustración 26: Página de InterS@S tras haber iniciado sesión
El enlace para cerrar la sesión es siempre el mismo, pero los parámetros que hay que
pasarle por POST son generados dinámicamente, por lo que es necesario extraerlos de
esta página inicial y devolverlos a nuestra aplicación HbbTV como un dato más para
poder cerrar sesión en cualquier momento.
La extracción del parámetro que hay que usar con POST se realiza en loginIntersas.php
con las siguientes líneas:
$aux=explode('<input type="hidden" name="id_us" val ue="', $codigofuente); $aux2=$aux[1]; $aux3=explode('" />',$aux2); $id_us_cierre=$aux3[0];
$id_us contendrá el parámetro necesario para cerrar la sesión. El cierre de sesión se
realiza en cerrarSesion.php.
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 7
Mª del Carmen Rodríguez Segovia 58
CAPÍTULO 7: POSIBLES MEJORAS DE LA APLICACIÓN
Como se ha comentado ya, en el desarrollo de la aplicación hemos tenido en cuenta el
entorno de prueba que nos proporcionaba FireHbbTV y los botones que ésta
implementaba. Así, al no poder introducir caracteres alfabéticos, hemos restringido el
acceso a InterS@S a usuarios que dispongan de DNI. El DNI se debe de introducir sin
letra, dejando el cálculo de esta a una función definida en el fichero funciones.js.
Sin embargo, la oficina virtual de InterS@S contempla la opción de introducir otros
documentos identificativos, como el pasaporte, la tarjeta de extranjero u otros, por lo
que una futura mejora podría ser la opción de poder identificarte con alguno de estos
otros documentos.
Por otro lado, tal y como se ha descrito en el apartado 5.1.1, XHTML busca separar lo
máximo la presentación del contenido, por lo que podríamos mejorar la aplicación
buscando la separación total de estas dos cosas. Así, la aplicación sería más fácilmente
modificable, y la presentación también.
Otra mejora que también podría implementarse es que se guarden los usuarios que ya
han usado la aplicación. Para intentar preservar la confidencialidad de cada usuario (a
pesar de que estemos hablando de un televisor, que normalmente tenemos en el hogar
y en un entorno familiar), podría establecerse una contraseña local para cada usuario, y
al escoger el usuario deseado, requerir que introduzca su contraseña, pero el resto de
los datos personales (número de la tarjeta sanitaria, fecha de nacimiento, y documento
identificativo) no haría falta introducirlos puesto que ya estarían guardados con
anterioridad.
Por último, habría que dedicarle especial importancia al tema de seguridad. Antes de
implementar la aplicación en un entorno real, sería necesario modificar la aplicación
para que todas las peticiones de la aplicación al servidor intermedio (que en este caso si
estaría alojado en un servidor intermedio de verdad) se hiciesen con el protocolo HTTPS.
Para poder hacer esto, el servidor intermedio debería de tener un certificado SSL.
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 8
Mª del Carmen Rodríguez Segovia 59
CAPÍTULO 8: CONCLUSIONES
Podemos concluir este trabajo resaltando que HbbTV se aprovecha del gran auge que
están teniendo las televisiones conectadas e inteligentes en cuanto a la opción preferida
para la compra por parte de los usuarios hoy en dia y también de la gran disponibilidad
y oferta en cuanto a conexión de banda ancha, ofreciendo finalmente una experiencia
de usuario muy buena.
El estándar, concebido para que beneficie a todo el ecosistema televisivo (no olvidemos
que se basa en tecnologías ya existentes y pretende que el proceso de migración sea lo
mas sencillo posible) permite a los broadcasters explotar la conectividad de los
SmartTVs, haciendo mejor la experiencia de usuario y permitiendo a los proveedores de
servicio ofrecer programas de alta calidad e interactivos, ceñidos al usuario final y
accesibles a través de una interfaz simple y unificada.
A pesar de esto, aun queda mucho potencial por explotar de HbbTV y sus aplicaciones
y además aun existe una brecha entre HbbTV y los SmartTV.
Otro detalle a tener muy en cuenta, es que casi el 90% de los internautas son conscientes
de la disponibilidad de contenido audiovisual online y el PC sigue siendo el protagonista
a la hora de acceder a estos contenidos. Como hemos visto, con la creación del estándar
se pretenden aunar las prestaciones que nos brinda el televisor con las prestaciones que
puede brindarnos el PC, haciendo así que converjan ambos términos y lograr que el
televisor llegue a suplantar al PC en el ámbito de consumo de contenido audiovisual.
A pesar de que la aplicación creada cumple los requisitos impuestos, y funciona a la
perfección en el ámbito donde se ha creado, cabe resaltar que si se decidiese seguir esta
línea de trabajo, sería de gran interés implementar las mejoras indicadas en el capítulo
8, además de las pruebas de un dispositivo real, por lo que aun quedaría mucho por
hacer.
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 9
Mª del Carmen Rodríguez Segovia 60
CAPÍTULO 9: REFERENCIAS
[1] Digital Terrestrial Television MHEG-5 Specification, ISO/IEC 13522-5, 1997. Disponible en: http://www.mheg.org/users/mheg/archives/doc/MHEG-5_Profile_Issue_1.pdf
[2] Jon Piesing, The DVB Multimedia Home Platform (MHP) and Related
Specifications. Disponible en: http://www.tijbc.com/pruebas-7419/I0782917.pdf
[3] Globally Executable MHP (GEM) Specification 1.1.1, DVB Document A103 Rev. 1, 2007. Disponible en: http://www.dvb.org/resources/public/standards/a103r1.tm3567r1.gem1.1.1.pdf
[4] Página web oficial de HbbTV. Disponible en: https://www.hbbtv.org/
[5] Hybrid Broadcast Broadband TV, ETSI TS 102 796 V1.1.1, 2010. Disponible en:
http://www.etsi.org/deliver/etsi_ts/102700_102799/102796/01.01.01_60/ts_102796v010101p.pdf
[6] HbbTV® Specification Version 1.5, HbbTV, 2012. Disponible en: https://www.hbbtv.org/pages/about_hbbtv/HbbTV-specification-1-5.pdf
[7] Página web oficial del OIPF. Disponible en: http://www.oipf.tv/
[8] Página oficial W3C España. Disponible en:
http://www.w3c.es/
[9] Digital Video Broadcasting (DVB); Signalling and carriage of interactive
applications and services in Hybrid broadcast/broadband environments, ETSI TS 102 809, 2010. Disponible en: http://www.etsi.org/deliver/etsi_ts/102800_102899/102809/01.01.01_60/ts_102809v010101p.pdf
[10] OIPF Release 2 Specification, Volume 5 - Declarative Application Environment,
OIPF, 2011. Disponible en: http://www.oipf.tv/docs/release2/v2.1/oipf-t1-r2-specification-volume-5-declarative-application-environment-v2_1-2011-06-21.pdf
[11] Página web oficial de la TDT híbrida. Disponible en: http://www.tdthibrida.es/
[12] Especificación de receptores de televisión digital terrestre para aplicaciones
interactivas, Foro Técnico de la televisión digital, 2012. Disponible en:
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 9
Mª del Carmen Rodríguez Segovia 61
http://www.televisiondigital.es/TDT/ForoTecnico/GrupoReceptores/ReceptoresTDT_interactivos.pdf
[13] Información acerca de la aplicación de “Boton Rojo” de RTVE. Disponible en: http://www.rtve.es/television/boton-rojo/
[14] Overview of Interactive Television services according to the HbbTV standard in
Europe, HbbTV Forum Nederland, 2014. Disponible en: http://hbbtv.nu/wp-content/uploads/2014/05/HbbTV_in_Europe_v5b_English.pdf
[15] Test-suite HbbTV Mit-Xperts. Disponible en:
http://itv.mit-xperts.com/hbbtvtest/
[16] XHTML. Disponible en: http://www.w3schools.com/html/html_xhtml.asp
[17] ECMAScript Language Specification, ECMA-262, 2011. Disponible en:
http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf
[18] ECMAScript language specification, ISO/IEC 16262:2011, 2011. Disponible en: http://www.iso.org/iso/home/store/catalogue_tc/catalogue_detail.htm?csnumber=55755
[19] Tutorial JavaScript de W3C Schools. Disponible en: http://www.w3schools.com/js/
[20] Página web oficial de PHP. Disponible en: http://php.net/
[21] Tríptico de información de los servicios interactivos de 7RM. Disponible en:
http://ficheros.7rm.es:3025/7RMtriptico.pdf
[22] M. León Bujes, “ Desarrollo de un Widget de Yahoo! para TV para la solicitud
de Cita Médica” , Proyecto fin de Carrera, Dpto. de Teoría de la Señal y Comunicaciones, Escuela Superior de Ingenieros de Sevilla, Universidad de Sevilla, 2012
[23] Página oficial de Virtual Box. Disponible en: www.virtualbox.com
[24] Página oficial de Debian. Disponible en: www.debian.com
[25] Página oficial de Bluefish. Disponible en: http://bluefish.openoffice.nl/index.html
[26] Página oficial de Apache HTTP Server Project. Disponible en: https://httpd.apache.org/
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Capítulo 9
Mª del Carmen Rodríguez Segovia 62
[27] Página de descarga del navegador Firefox. Disponible en:
http://www.mozilla.org/es-ES/firefox/new/
[28] Página de descarga del complemento para Firefox, FireHbbTV. Disponible en:
https://addons.mozilla.org/es/firefox/addon/firehbbtv/
[29] Página oficial de FireBug. Disponible en:
https://getfirebug.com/
[30] Página oficial de cURL. Disponible en: http://curl.haxx.se/
[31] Opciones de cURL. Disponible en: http://www.php.net/manual/en/function.curl-setopt.php
[32] Acceso a InterS@S. Disponible en:
https://ws003.juntadeandalucia.es/pls/intersas/servicios.infor_certificado_digital
[33] Simple HTML DOM Parser. Disponible en:
http://simplehtmldom.sourceforge.net/
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 63
ANEXO A
A continuación se incluye el código completo de la aplicación HbbTV para petición de
cita en el InterS@S que se ha desarrollado durante este proyecto. El orden de los
archivos indicados es el mismo que el seguido durante su descripción en el apartado
6.3.1, ya que se considera que facilita al lector la comprensión de los mismos.
index.html <?xml version ="1.0" encoding= "utf-8" ?> <!DOCTYPE html PUBLIC "-//HbbTV//1.1.1//EN" "http:/ /www.hbbtv.org/dtd/HbbTV-1.1.1.dtd"> <html xmlns ="http://www.w3.org/1999/xhtml" xml:lang= "de" lang ="de" > <head> <title> Cita médica en InterS@S </title> <meta http-equiv ="Pragma" content ="no-cache" > <meta http-equiv ="content-type" content ="Content-Type: application/vnd.hbbtv.xhtml+xml; charset=UTF-8" /> <meta name="author" content ="carmen" /> <meta name="description" content ="APP para HbbTV para la petición de una cita al servidor de InterS@S" /> <script type ="text/javascript" src ="funciones.js" charset ="UTF-8" ></script> <script type ="text/javascript" > //Funciones propias de "index.html". //<![CDATA[ //Esta función se ejecuta nada más cargarse la pági na. Crea el listener del teclado e inicia la aplicación. window.onload = function () { registerKeyEventListener(); initApp(); }; //Función que maneja los eventos asociados con la p ulsación de distintos botones en "index.html". function handleKeyCode(kc) { if (kc==VK_GREEN) { //Si pulsamos el botón verde de nuestro mando, pasa remos a hacer login en la página del InterS@S. //Cargamos la vista de “login.html”. document.location.href= 'login.html' ; } else if (kc==VK_RED) { //Si pulsamos el rojo salimos de la app. closeApp(); return true ; } return false ; } //Función que nos cierra la aplicación. function closeApp() { try { var app = document.getElementById( 'appmgr' ).getOwnerApplication(document); app.destroyApplication(); return ; } catch (e) { alert( 'Cannot destroy application' ); } } //]]> </script>
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 64
<!--Incluimos la hoja de estilos de CSS --> <link rel ="stylesheet" type ="text/css" href ="estilos.css" /> </head> <body> <!-- Definición de los dos objetos propios de la AP I para crear la app --> <object id ="appmgr" type ="application/oipfApplicationManager" style ="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px;" ></object> <object id ="oipfcfg" type ="application/oipfConfiguration" style ="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px;" ></object> <div id ="principal" > <div style ="left: 80px; top: 50px; width:600px;" ><img src ="images/junta_andalucia.jpg" width ="150" /></div> <div class ="cabecera" >Servicio Andaluz de Salud <br /> CONSERJERÍA DE IGUALDAD, SALUD Y POLÍTICAS SOCIALES </div> <div class ="letragrande" style ="text-align: center; left: 340px; top: 300px; width:600px;" >Bienvenido a la aplicación HbbTV del InterS@S </div> <div style ="top: 450px; left:460px;" ><img src ="images/botonverde.png" width ="70" /></div> <div class ="letragrande" style ="top: 460px; left:530px;" >Conectar </div> <div style ="top: 450px; left:670px;" ><img src ="images/botonrojo.png" width ="70" /></div> <div class ="letragrande" style ="top: 460px; left:740px;" >Salir </div> </div> </body> </html>
login.html <?xml version ="1.0" encoding= "utf-8" ?> <!DOCTYPE html PUBLIC "-//HbbTV//1.1.1//EN" "http:/ /www.hbbtv.org/dtd/HbbTV-1.1.1.dtd"> <html xmlns ="http://www.w3.org/1999/xhtml" xml:lang= "de" lang ="de" > <head> <title> Cita médica en InterS@S </title> <meta http-equiv ="Pragma" content ="no-cache" > <meta http-equiv ="content-type" content ="Content-Type: application/vnd.hbbtv.xhtml+xml; charset=UTF-8" /> <meta name="author" content ="carmen" /> <meta name="description" content ="APP para HbbTV para la petición de una cita al servidor de InterS@S" /> <script type ="text/javascript" src ="funciones.js" charset ="UTF-8" ></script> <script type ="text/javascript" > //<![CDATA[ /************************************************** *************************** * Variable globales que necesitamos en esta página . Extraemos la información* * necesaria de las cookies. Para ello haremos uso de la función getCookie. * * Las variables globales serán: * * - indice: variable que nos va a ayudar a moverno s por el formulario. * * - ok: Variable que pondremos a uno cuando todos los datos del formulario * * sean correctos. * * Además, tendremos una serie de variables “alerta ” que nos informaran de * * los errores introducidos en el formulario. * *************************************************** **************************/ var indice= 1; var ok= 0;
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 65
//Variables para las alertas del formulario var alerta1_1= 'Debe introducir su número de la tarjeta sanitaria. ' ; var alerta1_2= 'Debe introducir su fecha de nacimiento.' ; var alerta2_1= 'El número de la tarjeta sanitaria debe tener 12 dí gitos.' ; var alerta2_2= 'El número de la tarjeta sanitaria no es válido.' ; var alerta2_3= 'El número de la tarjeta sanitaria no es válido.' ; var alerta3= 'Ha introducido un carácter no válido en la fecha d e nacimiento' ; var alerta4= 'Fecha de nacimiento no válida.' ; var alerta5= 'Año incorrecto en la fecha de nacimiento.' ; var alerta6= 'Mes incorrecto en la fecha de nacimiento.' ; var alerta7= 'Día incorrecto en la fecha de nacimiento.' ; var alerta8= 'Debe introducir su DNI.' ; //Esta función se ejecuta nada más cargarse la pági na. Crea el listener del teclado e inicia el formulario en el primer campo. window.onload = function () {
registerKeyEventListener(); //Inicializamos el formulario para que el primer ca mpo seleccionado sea el primero.
document.getElementById(eval( '"' +indice+ '"' )).style.backgroundColor= "#e5dcd6" ; }; //Función que maneja los eventos asociados con la p ulsación de distintos botones. function handleKeyCode(kc) { if (kc==VK_GREEN) { //Si pulsamos el botón verde de nuestro mando, conectaremos con el InterS@S si todos los datos son correctos. //Recuperamos el valor de los datos introducidos. var nuss=document.getElementById( "1" ).innerHTML;
var dia=document.getElementById( "2" ).innerHTML; var mes=document.getElementById( "3" ).innerHTML; var anio=document.getElementById( "4" ).innerHTML; var dni=document.getElementById( "5" ).innerHTML; /* Funciones de validación del "formulario". Compro baremos que todos los campos se han completado con valores vali dos (excepto el del DNI para menores de 14 años). De no ser así, se muestra una alerta indicandonos los datos incorrectos */ nuss=Quita_blancos(nuss); dia=Quita_blancos(dia); mes=Quita_blancos(mes); anio=Quita_blancos(anio); dni=Quita_blancos(dni); if (nuss== '' ){ //Se debe de introducir el número de la SS. setInfo(alerta1_1); } else { if (dia== '' ||mes== '' ||anio== '' ){ //Se debe de introducir una fecha. setInfo(alerta1_2); } else { switch (validar_ss(nuss)){ case 1: //Debe introducir número tarjeta SS. setInfo(alerta1_1); break ; case 2: //Nº de la SS debe tener 12 dígitos. setInfo(alerta2_1); break ; case 3: //El número de la SS no es válido setInfo(alerta2_2); break ; default :{
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 66
switch (comprueba_fecha(dia,mes,anio)){ //Comprobamos si la fecha es correcta.
case 1: //Carácter no válido en la fecha de nacimiento setInfo(alerta3); break ; case 2: //Fecha de nacimiento no válida setInfo(alerta4); break ; case 3: //Año incorrecto en la fecha de nacimiento setInfo(alerta5); break ; case 4: //Mes incorrecto en la fecha de nacimiento setInfo(alerta6); break ; case 5: //Día incorrecto en la fecha de nacimiento setInfo(alerta7); break ; default : / /La fecha es correcta. Comprobamos el dni. if ((dni== '' )&&(mayor_edad( 14,dia,mes,anio)== true )){ //NO ha introducido DNI y es mayor de 14 años. setInfo(alerta8); //Debe introducir su dni } else { //Se ha introducido el dni, o no se ha introducido pero es menor de 14 años. if ((dni== '' )&&(mayor_edad( 14,dia,mes,anio)== false )) { //Si no se ha introducido pero es menor, todo OK. ok= 1; } else { //Si se ha introducido, le calculamos la letra y to do OK. letra=nif(dni); dni=dni + letra; ok= 1; } } } } } } } //Solo haremos la petición XMLHttpRequest si todos los datos que se han introducido son correctos en cuanto a sintax is (hasta que no los validemos contra el InterS@S no sabremos si son dat os reales). if (ok== 1) { //Restauramos el valor de ok, por si acaso los dato s introducidos no se encuentran en la BBDD de InterS@ S. ok= 0; //Creamos los datos que guardaremos en la cookie de inicio de sesión. La cadena se hace en formato JSON, para que al recuperar los datos, podamos parsearlo y convertirlo en un objeto para p oder acceder a los campos mas facilmente. if (dni== '' ) { //Si el dni esta vacio, y ok=1, es porque es menor de 14 años. var cadena_login= '{"nuss":"' +nuss+ '", "dia":"' +dia+ '", "mes":"' +mes+'", "anio":"' +anio+ '", "dni":""}' ; } else { var cadena_login= '{"nuss":"' +nuss+ '", "dia":"' +dia+ '", "mes":"' +mes+'", "anio":"' +anio+ '", "dni":"' +dni+ '"}' ; } //Creamos una cookie con los datos de inicio de ses ión para poder disponer de ellos en toda la web. setCookie( "datos_login" ,cadena_login);
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 67
//Creamos el objeto con el que haremos la comunicac ión XMLHttpRequest. peticion1={ metodo: "POST" , url: './conectarsas/loginIntersas.php' , params: 'id_us=' +nuss+ '&dia=' +dia+ '&mes=' +mes+'&anio=' +anio+ '&dni=' +dni+ '&origen=1' , success: function (requestObj){ console.log( "requestObj.readyState: " +requestObj.readyState+ " requestObj.status: " + requestObj.status); datosjson_web=requestObj.responseText; console.log ( "datos json web: " + datosjson_web); datosjson=datosjson_web.split( "SEPARADOR"); //En el primer JSON tengo los datos correspondiente s a la cita (si la hubiese) ó los parámetros de inicio de sesión. Objeto0 = JSON.parse(datosjson[ 0]); //En el segundo JSON tengo los datos de los días disponibles, o relleno en el caso de haber cita asi gnada. Objeto1 = JSON.parse(datosjson[ 1]); if (Objeto0.enlace_cancelar== "no hay cita que cancelar" ){ //Si no hay cita que cancelar comprobamos que los d atos introducidos son correctos. if (Objeto0.comprueba_acceso== "ok" ){ /* Si se ha accedido correctamente al servidor del InterS@S, guardaremos los datos JSON en cookies para poder acceder a ello s a lo largo del resto de la web. - infosesion: contiene los datos de inicio de sesi on. - dias: contiene los dias disponibles para coger c ita. */ setCookie( "infosesion" ,datosjson[ 0]); setCookie( "dias" ,datosjson[ 1]); //A continuación mostramos los días disponibles par a coger cita. document.location.href= 'mostrarDias.html' ; } else { //Si los datos introducidos no se han encontrado en la base de datos, mostramos un mensaje de alerta. setInfo(Objeto0.comprueba_acceso); } } else {
//Por el contrario, si hay una cita asignada previa mente /* Al igual que en el caso de no haber cita, guarda mos los datos de la cita en una cookie para poder acceder a ellos mas t arde.*/ setCookie( "cita" ,datosjson[ 0]); //Mostramos los datos de la cita asignada. document.location.href= 'mostrarCita.html' ; } }, error: function (){ console.log( "Error en la conexión" ); } } //Hacemos la petición XMLHttpRequest funcion_xmlhttprequest(peticion1); } } else if (kc==VK_DOWN) { if (indice >= 1 && indice <= 4) { indice++;
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 68
document.getElementById(eval( '"' +indice+ '"' )).style.backgroundColor= "#e5dcd6" ; document.getElementById(eval( '"' +(indice- 1)+ '"' )).style.backgroundColor= "white" ; } } else if (kc==VK_UP){ if (indice >= 2 && indice <= 5) { indice--; document.getElementById(eval( '"' +indice+ '"' )).style.backgroundColor= "#e5dcd6" ; document.getElementById(eval( '"' +(indice+ 1)+ '"' )).style.backgroundColor="white" ; } } else if (kc==VK_0) { document.getElementById(eval( '"' +indice+ '"' )).innerHTML+= "0" ; } else if ( kc==VK_1){ document.getElementById(eval( '"' +indice+ '"' )).innerHTML+= "1" ; } else if (kc==VK_2){ document.getElementById(eval( '"' +indice+ '"' )).innerHTML+= "2" ; } else if (kc==VK_3){ document.getElementById(eval( '"' +indice+ '"' )).innerHTML+= "3" ; } else if (kc==VK_4){ document.getElementById(eval( '"' +indice+ '"' )).innerHTML+= "4" ; } else if (kc==VK_5){ document.getElementById(eval( '"' +indice+ '"' )).innerHTML+= "5" ; } else if (kc==VK_6){ document.getElementById(eval( '"' +indice+ '"' )).innerHTML+= "6" ; } else if (kc==VK_7){ document.getElementById(eval( '"' +indice+ '"' )).innerHTML+= "7" ; } else if (kc==VK_8){ document.getElementById(eval( '"' +indice+ '"' )).innerHTML+= "8" ; } else if (kc==VK_9){ document.getElementById(eval( '"' +indice+ '"' )).innerHTML+= "9" ; } else if (kc==VK_BACK){ var campo = document.getElementById(eval( '"' +indice+ '"' )). innerHTML; var campo2=campo.substring( 0, campo.length- 1); document.getElementById(eval( '"' +indice+ '"' )).innerHTML=campo2; } else if (kc==VK_RED){ document.location.href= 'index.html' ; } } //Emplearemos esta función para establecer la infor mación de los errores en el formulario. function setInfo(alerta) { document.getElementById( 'info' ).innerHTML = alerta; } //]]> </script> <!--Incluimos la hoja de estilos de CSS --> <link rel ="stylesheet" type ="text/css" href ="estilos.css" /> </head> <body> <div id ="principal" > <div style ="left: 80px; top: 50px; width:600px;" ><img src ="images/junta_andalucia.jpg" width ="150" /></div> <div class ="cabecera" >Servicio Andaluz de Salud <br /> CONSERJERÍA DE IGUALDAD, SALUD Y POLÍTICAS SOCIALES </div> <div id ="login" style ="left:200px; top:220px; width: 800px; height: 300px ;" >
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 69
<span class ="letragrande" >Introduzca sus datos personales para acceder a InterS@S </span>
<div class ="letranormal" style ="left: 0px; top: 50px; width:300px;" >Introduzca su NUSS: </div> <div class ="letranormal" id ="1" style ="left: 0px; top: 70px; width:400px; height: 25px; border: 1px solid;" ></div> <div class ="letranormal" style =" left: 0px; top: 110px; width:400px;" >Introduzca su fecha de nacimiento(DD/MM/AAAA): </div> <div class ="letranormal" id ="2" style =" left: 0px; top: 130px; width:40px; height: 25px; border: 1px solid;" ></div> <div class ="letranormal" id ="3" style ="left: 50px; top: 130px; width:40px; height: 25px; border: 1px solid;" ></div> <div class ="letranormal" id ="4" style =" left: 100px; top: 130px; width:70px; height: 25px; border: 1px solid;" ></div> <div class ="letranormal" style ="left: 0px; top: 170px; width:600px;" >Introduzca su DNI sin letra(obligatorio para mayore s de 14 años): </div> <div class ="letranormal" id ="5" style ="left: 0px; top: 190px; width:400px; height: 25px; border: 1px solid;" ></div> <div class ="letraerror" id ="info" style ="left: 530px; top: 120px; text-align:center" ></div> </div> <div style ="top: 550px; left:460px;" ><img src ="images/botonverde.png" width ="70" /></div> <div class ="letragrande" style ="top: 560px; left:530px;" >Conectar </div> <div style ="top: 550px; left:670px;" ><img src ="images/botonrojo.png" width ="70" /></div> <div class ="letragrande" style ="top: 560px; left:740px;" >Atrás </div> </div> </body> </html>
mostrarDias.html <?xml version ="1.0" encoding= "utf-8" ?> <!DOCTYPE html PUBLIC "-//HbbTV//1.1.1//EN" "http:/ /www.hbbtv.org/dtd/HbbTV-1.1.1.dtd"> <html xmlns ="http://www.w3.org/1999/xhtml" xml:lang= "de" lang ="de" > <head> <title> Cita médica en InterS@S </title> <meta http-equiv ="Pragma" content ="no-cache" > <meta http-equiv ="content-type" content ="Content-Type: application/vnd.hbbtv.xhtml+xml; charset=UTF-8" /> <meta name="author" content ="carmen" /> <meta name="description" content ="APP para HbbTV para la petición de una cita al servidor de InterS@S" /> <script type ="text/javascript" src ="funciones.js" charset ="UTF-8" ></script> <script type ="text/javascript" > //<![CDATA[ /************************************************** *************************** * Variable globales que necesitamos en esta página . Extraemos la información* * necesaria de las cookies. Para ello haremos uso de la función getCookie. * * Las variables globales serán: * * - info_sesion: contiene la información de la ses ion abierta en InterS@S * * - dias: contiene la información de los días en l os que hay citas * * disponibles. * * Además, tendremos otras dos variables globales: * * - dia: almacenará el día escogido para mostrar l as horas de ese día. * * - i: almacenará el índice del día escogido (un v alor entre 0 y 13). * *************************************************** **************************/ var info_sesion=JSON.parse(decodeURIComponent(getCooki e( "infosesion" ))); var dias=JSON.parse(decodeURIComponent(getCookie( "dias" )));
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 70
var dia= false ; var i= false ; //Esta función se ejecuta nada más cargarse la pági na. Crea el listener del teclado, e inicia el menú que contiene los días a e legir. window.onload = function () { muestraDias(); menuInit(); registerKeyEventListener(); }; //Función que escribe en el cuerpo de la página los días disponibles para coger cita. function muestraDias(){ //A veces, dia0 está vacío, por lo que antes de pon erlo, comprobaremos si tiene un día o no. if (dias.dia0.value != null){ document.getElementById( 'menu' ).innerHTML += "<li id='dia0' name='dia0'>" + dias.dia0.cadena + "</li>" ;
} document.getElementById( 'menu' ).innerHTML += "<li id='dia1' name='dia1'>" + dias.dia1.cadena + "</li>" ; document.getElementById( 'menu' ).innerHTML += "<li id='dia2' name='dia2'>" + dias.dia2.cadena + "</li>" ; document.getElementById( 'menu' ).innerHTML += "<li id='dia3' name='dia3'>" + dias.dia3.cadena + "</li>" ; document.getElementById( 'menu' ).innerHTML += "<li id='dia4' name='dia4'>" + dias.dia4.cadena + "</li>" ; document.getElementById( 'menu' ).innerHTML += "<li id='dia5' name='dia5'>" + dias.dia5.cadena + "</li>" ; document.getElementById( 'menu' ).innerHTML += "<li id='dia6' name='dia6'>" + dias.dia6.cadena + "</li>" ; document.getElementById( 'menu' ).innerHTML += "<li id='dia7' name='dia7'>" + dias.dia7.cadena + "</li>" ; document.getElementById( 'menu' ).innerHTML += "<li id='dia8' name='dia8'>" + dias.dia8.cadena + "</li>" ; document.getElementById( 'menu' ).innerHTML += "<li id='dia9' name='dia9'>" + dias.dia9.cadena + "</li>" ; document.getElementById( 'menu' ).innerHTML += "<li id='dia10' name='dia10'>" + dias.dia10.cadena + "</li>" ; document.getElementById( 'menu' ).innerHTML += "<li id='dia11' name='dia11'>" + dias.dia11.cadena + "</li>" ; document.getElementById( 'menu' ).innerHTML += "<li id='dia12' name='dia12'>" + dias.dia12.cadena + "</li>" ; document.getElementById( 'menu' ).innerHTML += "<li id='dia13' name='dia13'>" + dias.dia13.cadena + "</li>" ; document.getElementById( 'nom_paciente' ).innerHTML = "Estamos atendiendo a: " + info_sesion.nombre_usuario; } //Esta función se encarga de buscar las horas dispo nibles al día elegido. Para ello hará uso de las peticiones XMLHttpRequest. function buscaHoras(){ //Creamos la cadena de parámetros que vamos a manda r al objeto xhr a partir de los objetos que hemos definido arriba. var cadena_params = 'cookie_sesion=' +info_sesion.sesion+ '&tipo_cita=' + info_sesion.tipocita+ '&diacita=' + dia + '&actividad_agenda=' + info_sesion.actividad_agenda+ '&modalidad_agenda=' +info_sesion.modalidad_agenda+'&codigo_agenda=' +info_sesion.codigo_agenda+ '&codigo_profesional=' +info_sesion.codigo_profesional+ '&domicilio_usuario=' +info_sesion.domicilio_usuario+ '&nuss_usuario=' +info_sesion.nuss_usuario+ '&nombre_usuario=' +info_sesion.nombre_usuario+ '&telefonos_usuario=' +info_sesion.telefonos_usuario+ '&desplazado=' +info_sesion.desplazado+ '&tarea_desc=' +info_sesion.tarea_desc+ '¢ro_desc=' + info_sesion.centro_desc+ '¢ro_codigo=' +info_sesion.centro_codigo+ '&nombre_profesional=' +info_sesion.nombre_profesional;
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 71
console.log( 'Cadena de parametros en la segunda peticion xhr:' + cadena_params); //Definimos el objeto que usaremos en la segunda pe ticion XHR. peticion2={ metodo: "POST" , url: './conectarsas/seleccionarCita.php' , params: cadena_params, success: function (requestObj2){ flag2= 0; console.log( "requestObj2.readyState: " +requestObj2.readyState+ " requestObj2.status: " +requestObj2.status); datosjson_web2=requestObj2.responseText; console.log (datosjson_web2); datosjson2=datosjson_web2.split( "SEPARADOR"); //Datos de la segunda petición al servidor. ObjetoDatos = JSON.parse(datosjson2[ 0]); //Almacenaremos los datos de la segunda petición al servidor para poder acceder a ellos en el resto de la web. setCookie( "infosesion2" ,datosjson2[ 0]); //Guardamos el índice del día escogido en otra cook ie. setCookie( "indicedia" , i); if (ObjetoDatos.numerohoras> 0){ //Si el número de horas disponibles para ese día es mayor que cero, guardamos las horas disponibles en una cookie para poder disponer de ellas en el resto de la web. setCookie( "horas" ,datosjson2[ 1]); document.location.href= 'mostrarHoras.html' ; } else { //Si no hay horas para un día, y antes hemos consultado otro día que si tenía horas, tendremos la cookie "horas" definida, así que será necesario borrarla para no tener probl emas en mostrarHoras.html eraseCookie( "horas" ); document.location.href= 'mostrarHoras.html' ; } }, error: function (){ console.log( "Error en la conexión" ); } } //Hacemos petición XHR funcion_xmlhttprequest(peticion2); } //Función que controla las acciones de las teclas. function handleKeyCode(kc) { if (kc==VK_ENTER) { //Cuando pulsemos el botón "OK" sobre un día, escogemos ese día. var liid = opts[selected].getAttribute( 'name' ); if (liid== 'dia0' ) { //Buscamos las horas del día 0... dia=encodeURIComponent(dias.dia0.value); i= 0; buscaHoras(); } else if (liid== 'dia1' ) { //Buscamos las horas del día 1... dia=encodeURIComponent(dias.dia1.value); i= 1; buscaHoras(); } else if (liid== 'dia2' ) { //Mostrar horas del día 2... dia=encodeURIComponent(dias.dia2.value); i= 2; buscaHoras(); } else if (liid== 'dia3' ) { //Mostrar horas del día 3...
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 72
dia=encodeURIComponent(dias.dia3.value); i= 3; buscaHoras(); } else if (liid== 'dia4' ) { //Mostrar horas del día 4... dia=encodeURIComponent(dias.dia4.value); i= 4; buscaHoras(); } else if (liid== 'dia5' ) { //Mostrar horas del día 5... dia=encodeURIComponent(dias.dia5.value); i= 5; buscaHoras(); } else if (liid== 'dia6' ) { //Mostrar horas del día 6... dia=encodeURIComponent(dias.dia6.value); i= 6; buscaHoras(); } else if (liid== 'dia7' ) { //Mostrar horas del día 7... dia=encodeURIComponent(dias.dia7.value); i= 7; buscaHoras(); } else if (liid== 'dia8' ) { //Mostrar horas del día 8... dia=encodeURIComponent(dias.dia8.value); i= 8; buscaHoras(); } else if (liid== 'dia9' ) { //Mostrar horas del día 9... dia=encodeURIComponent(dias.dia9.value); i= 9; buscaHoras(); } else if (liid== 'dia10' ) { //Mostrar horas del día 10... dia=encodeURIComponent(dias.dia10.value); i= 10; buscaHoras(); } else if (liid== 'dia11' ) { //Mostrar horas del día 11... dia=encodeURIComponent(dias.dia11.value); i= 11; buscaHoras(); } else if (liid== 'dia12' ) { //Mostrar horas del día 12... dia=encodeURIComponent(dias.dia12.value); i= 12; buscaHoras(); } else if (liid== 'dia13' ) { //Mostrar horas del día 13... dia=encodeURIComponent(dias.dia13.value); i= 13; buscaHoras(); } } else if (kc==VK_UP) { menuSelect(selected- 1); return true ; } else if (kc==VK_DOWN) { menuSelect(selected+ 1); return true ; } else if (kc==VK_RED) { //Si pulsamos el botón rojo mostraremos un aviso de que vamos a salir sin coger cita. if (confirm( "Va a abandonar la página sin coger cita, ¿está seguro?" )){ //Si ha pulsado OK, borramos las cookies (todas men os infosesion que contiene datos necesarios) y cerramo s la sesión. eraseCookie( "dias" ); eraseCookie( "datos_login" ); cierraSesion(); } else { //Si ha pulsado cancel, permaneceremos en la página } } else if (kc==VK_BLUE) { //Borramos las cookies antes de volver a login.html eraseCookie( "infosesion" ); eraseCookie( "infosesion2" ); eraseCookie( "dias" );
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 73
eraseCookie( "datos_login" ); eraseCookie( "indicedia" ); document.location.href= "login.html" ; } return false ; } //]]> </script> <link rel ="stylesheet" type ="text/css" href ="estilos.css" /> </head> <body> <div id ="principal" /> <div style ="left: 80px; top: 50px; width:600px;" ><img src ="images/junta_andalucia.jpg" width ="150" /></div> <div class ="cabecera" >Servicio Andaluz de Salud <br /> CONSERJERÍA DE IGUALDAD, SALUD Y POLÍTICAS SOCIALES </div> <div class ="letranormal" id ="nom_paciente" style ="top: 215px; left:100px;" ></div> <div class ="letrageneral" style ="left:400px; top:260px;" >Seleccione el día para el que desea su cita: </div> <ul id ="menu" class ="menu" style ="left: 450px; top: 300px;" > </ul> <div style ="top: 600px; left:520px; " ><img src ="images/botonrojo.png" width ="70" /></div> <div class ="letranormal" style ="top: 615px; left:590px;" >Cerrar la sesión </div> </body> </html>
mostrarHoras.html <?xml version ="1.0" encoding= "utf-8" ?> <!DOCTYPE html PUBLIC "-//HbbTV//1.1.1//EN" "http:/ /www.hbbtv.org/dtd/HbbTV-1.1.1.dtd"> <html xmlns ="http://www.w3.org/1999/xhtml" xml:lang= "de" lang ="de" > <head> <title> Cita médica en InterS@S </title> <meta http-equiv ="Pragma" content ="no-cache" > <meta http-equiv ="content-type" content ="Content-Type: application/vnd.hbbtv.xhtml+xml; charset=UTF-8" /> <meta name="author" content ="carmen" /> <meta name="description" content ="APP para HbbTV para la petición de una cita al servidor de InterS@S" /> <script type ="text/javascript" src ="funciones.js" charset ="UTF-8" ></script> <script type ="text/javascript" > //<![CDATA[ /************************************************** *************************** * Variable globales que necesitamos en esta página . Extraemos la información* * necesaria de las cookies. Para ello haremos uso de la función getCookie. * * Las variables globales serán: * * - info_sesion: contiene la información de la ses ion abierta en InterS@S. * * - info_sesion2: contendrá los datos de segunda p etición al InterS@S, * * entre ellos, el número de horas y las horas di sponibles para el día *
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 74
* escogido. * * - dias: contiene la información de los días en l os que hay citas * * disponibles. * * - indice: contiene el indice del día elegido. * * - horas: contiene la información de las horas di sponibles para el día * * escogido. * * Además, tendremos otras dos variables globales: * * - hora: almacenará la hora escogida * *************************************************** **************************/ var info_sesion=JSON.parse(decodeURIComponent(getCooki e( "infosesion" ))); var info_sesion2=JSON.parse(decodeURIComponent(getCook ie( "infosesion2" ))); var dias=JSON.parse(decodeURIComponent(getCookie( "dias" ))); var indice=getCookie( "indicedia" ); /* La cookie "horas" solo estará disponibles si el número de horas para el día
escogido es mayor que cero. Por lo tanto comprobare mos si está definida para crear el objeto horas. Si no estuviese definid a, e intentásemos crear el objeto, nos daría un error al parsear la c adena JSON.*/
if (getCookie( "horas" )){ var horas=JSON.parse(decodeURIComponent(getCookie( "horas" ))); } var hora= false ; /* Esta función se ejecuta nada más cargarse la pág ina. Crea el listener del teclado, e inicia el menú que contiene las horas e ntre las que podemos elegir.*/ window.onload = function () { muestraHoras(); menuInit(); registerKeyEventListener(); }; //Función que escribe en el cuerpo de la página un menú con las horas disponibles, o en el caso de no haber //horas disponibles, escribe un mensaje de informac ión. function muestraHoras() { //El número de horas lo obtenemos del objeto info_s esion2. var numeroHoras=info_sesion2.numerohoras; //Variable que indica el día escogido. var diaescogido= 'dias.dia' +eval(indice)+ '.value' ; document.getElementById( 'nom_paciente' ).innerHTML = "Estamos atendiendo a: " + info_sesion.nombre_usuario; if (numeroHoras == 0){ //Si no hay horas para el día escogido, lo mostramo s por pantalla. document.getElementById( "infodia" ).innerHTML= ' En este momento no existen citas disponibles a través de InterS@S para el día ' + decodeURIComponent(eval(diaescogido)) + '. Puede elegir un día distinto o bien ponerse en contacto con Salud Responde (902 505 060 ) o con su centro de salud.' ; document.getElementById( "infodia" ).style.left= "250px" ; document.getElementById( "infodia" ).style.top= "270px" ; document.getElementById( "infodia" ).style.width= "800px" ; document.getElementById( "infodia" ).style.textAlign= "center" ; } else { document.getElementById( "infodia" ).innerHTML= 'Horas disponibles para el día ' + decodeURIComponent(eval(diaescogido)) + ':' ; //Como no sabemos cuántas horas tendremos disponibl es ese día, tendremos que crear el menú de las horas dinámicame nte. for (i= 0; i< numeroHoras ; i++) { document.getElementById( 'menu' ).innerHTML += "<li id='hora" +eval(i)+ "' name='hora" +eval(i)+ "'>" + eval( 'horas.hora' +i+ '.cadena' ) + "</li>" ; }
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 75
} } //Función que maneja los eventos que ocurren cuando pulsamos los botones del mando. function handleKeyCode(kc) { if (kc==VK_ENTER) { var liid = opts[selected].getAttribute( 'name' ); //Como máximo, nos darán a elegir entre 13 horas, a sí que consideramos todos los posibles casos. if (liid== 'hora0' ) { //Elegimos la hora0... hora=encodeURIComponent(horas.hora0.value); asignaCita(hora); } else if (liid== 'hora1' ) { //Elegimos la hora1... hora=encodeURIComponent(horas.hora1.value); asignaCita(hora); } else if (liid== 'hora2' ) { //Elegimos la hora2... hora=encodeURIComponent(horas.hora2.value); asignaCita(hora); } else if (liid== 'hora3' ) { //Elegimos la hora3... hora=encodeURIComponent(horas.hora3.value); asignaCita(hora); } else if (liid== 'hora4' ) { //Elegimos la hora4... hora=encodeURIComponent(horas.hora4.value); asignaCita(hora); } else if (liid== 'hora5' ) { //Elegimos la hora5... hora=encodeURIComponent(horas.hora5.value); asignaCita(hora); } else if (liid== 'hora6' ) { //Elegimos la hora6... hora=encodeURIComponent(horas.hora6.value); asignaCita(hora); } else if (liid== 'hora7' ) { //Elegimos la hora7... hora=encodeURIComponent(horas.hora7.value); asignaCita(hora); } else if (liid== 'hora8' ) { //Elegimos la hora8... hora=encodeURIComponent(horas.hora8.value); asignaCita(hora); } else if (liid== 'hora9' ) { //Elegimos la hora9... hora=encodeURIComponent(horas.hora9.value); asignaCita(hora); } else if (liid== 'hora10' ) { //Elegimos la hora10... hora=encodeURIComponent(horas.hora10.value); asignaCita(hora); } else if (liid== 'hora11' ) { //Elegimos la hora11... hora=encodeURIComponent(horas.hora11.value); asignaCita(hora); } else if (liid== 'hora12' ) { //Elegimos la hora12... hora=encodeURIComponent(horas.hora12.value); asignaCita(hora); } } else if (kc==VK_UP) { menuSelect(selected- 1); return true ; } else if (kc==VK_DOWN) { menuSelect(selected+ 1); return true ; } else if (kc==VK_BLUE){ //Si queremos escoger otro día... //Borramos los datos de la cookie horas e indicedia , ya que corresponden al día escogido por primera vez. eraseCookie( "horas" ); eraseCookie( "indicedia" ); eraseCookie( "infosesion2" ); //Redirigimos a mostrarDias.html para poder escoger otro día. document.location.href= 'mostrarDias.html' ; } else if (kc==VK_RED) { //Si pulsamos el botón rojo mostraremos un aviso de que vamos a salir sin coger cita. if (confirm( "Va a abandonar la página sin coger cita, ¿está seguro?" )){
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 76
//Si ha pulsado OK, borramos las cookies y cerramos la sesion. eraseCookie( "dias" ); eraseCookie( "indicedia" ); eraseCookie( "horas" ); eraseCookie( "datos_login" ); eraseCookie( "infosesion2" ); cierraSesion(); } else { //Si ha pulsado cancel, permaneceremos en la página } } return false ; } //Función que se encarga de asignar la cita. Para e llo hará uso de las peticiones XMLHttpRequest. function asignaCita(hora){ //Creamos la cadena de parametros que vamos a manda r al objeto xhr a partir de los objetos que hemos definido arriba. var cadena_params = 'cookie_sesion=' +info_sesion.sesion+ '&horacita=' +hora+ '&codigo_agenda=' +info_sesion2.codigo_agenda+ '&modalidad_agenda=' +info_sesion2.modalidad_agenda+ '&actividad_agenda=' +info_sesion2.actividad_agenda+ '¢ro_ubicacion_agenda=' +info_sesion2.centro_ubicacion_agenda+ '¢ro_tarea_agenda=' +info_sesion2.centro_tarea_agenda+ '&profesional_agenda=' +info_sesion2.profesional_agenda+ '&nombre_usuario=' +info_sesion.nombre_usuario+ '&domicilio_usuario=' +info_sesion.domicilio_usuario+ '&telefonos_usuario=' +info_sesion.telefonos_usuario+ '&nuss_usuario=' +info_sesion.nuss_usuario+ '&tarea_desc=' +info_sesion.tarea_desc+ '&modalidad_agenda_servicio=' +info_sesion2.modalidad_agenda_servicio; console.log( 'Cadena de parametros en la segunda peticion xhr:' + cadena_params); var peticion3={ metodo: "POST" , url: "./conectarsas/asignarCita.php" , params:cadena_params, success: function (requestObj3){ console.log( "requestObj3.readyState:" + requestObj3.readyState+ " requestObj3.status:" + requestObj3.status); datosjson_web3=requestObj3.responseText; console.log ( "!!!!!!!!!!!!!!!!!!!!!!! datosjson_web3:" +datosjson_web3); var ObjetoCita = JSON.parse(datosjson_web3); if (ObjetoCita.comprueba_sesion== "ok" ){ //Creamos una cookie con los datos de la cita asignada, para poder acceder a ellos desde mostrarC ita.html setCookie( "cita" ,datosjson_web3); //Redirigimos la pagina a mostrarCita.html para que nos muestre los datos de la cita asignada. document.location.href= 'mostrarCita.html' ; } else { console.log ( "No se ha asignado cita" ); } }, error: function (){ console.log( "Error en la petición de cita" ); } } //Hacemos petición XMLHttpRequest funcion_xmlhttprequest(peticion3); } //]]>
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 77
</script> <link rel ="stylesheet" type ="text/css" href ="estilos.css" /> </head> <body> <div id ="principal" /> <div style ="left: 80px; top: 50px; width:600px;" >
<img src ="images/junta_andalucia.jpg" width ="150" /></div> <div class ="cabecera" >Servicio Andaluz de Salud <br /> CONSERJERÍA DE IGUALDAD, SALUD Y POLÍTICAS SOCIALES </div> <div class ="letranormal" id ="nom_paciente" style ="top: 215px; left:100px;" ></div> <div id ="infodia" class ="letrageneral" style ="left:400px; top:260px;" ></div> <ul id ="menu" class ="menu" style ="left: 450px; top: 300px;" > </ul> <div style ="top: 600px; left:410px;" ><img src ="images/botonazul.png" width ="70" /></div> <div class ="letranormal" style ="top: 615px; left:490px;" >Escoger otro día </div> <div style ="top: 600px; left:640px;" ><img src ="images/botonrojo.png" width ="70" /></div> <div class ="letranormal" style ="top: 615px; left:710px; " >Cerrar la sesión </div> </body> </html>
mostrarCita.html <?xml version ="1.0" encoding= "utf-8" ?> <!DOCTYPE html PUBLIC "-//HbbTV//1.1.1//EN" "http:/ /www.hbbtv.org/dtd/HbbTV-1.1.1.dtd"> <html xmlns ="http://www.w3.org/1999/xhtml" xml:lang= "de" lang ="de" > <head> <title> Cita médica en InterS@S </title> <meta http-equiv ="Pragma" content ="no-cache" > <meta http-equiv ="content-type" content ="Content-Type: application/vnd.hbbtv.xhtml+xml; charset=UTF-8" /> <meta name="author" content ="carmen" /> <meta name="description" content ="" /> <script type ="text/javascript" src ="funciones.js" charset ="UTF-8" ></script> <script type ="text/javascript" > //<![CDATA[ /************************************************** *************************** * Variables globales que necesitamos en esta págin a. Extraemos lainformación* * necesaria de las cookies. Para ello haremos uso de la función getCookie. * * Las variables globales serán: * * - info_sesion: contiene la información de la ses ion abierta en InterS@S * * - dias: contiene la información de los días en l os que hay citas * * disponibles. * * - cita: almacenará los datos de la cita asignada . * *************************************************** **************************/ var cita=JSON.parse(decodeURIComponent(getCookie( "cita" ))); /* Tenemos que diferenciar si hemos llegado a esta página tras haber cogido una cita o si por el contrario, hemos llegado por q ue la cita ya estaba cogida, ya que la forma de proceder es distinta en cada caso. */
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 78
if (getCookie( "infosesion" )) { //Si hemos cogido la cita justo antes de llegar aqu i, tendremos todas estas cookies disponibles. //En info_sesion2 tendremos una cadena en formato J SON con la información de la sesion más el numero de horas dis ponibles. var info_sesion=JSON.parse(decodeURIComponent(getCooki e( "infosesion" ))); var dias=JSON.parse(decodeURIComponent(getCookie( "dias" ))); } /* Esta función se ejecuta nada mas cargarse la pag ina. Crea el listener del teclado, y rellena los datos de la cita asignada.*/ window.onload = function () { rellenaCita(); registerKeyEventListener(); }; //Función que se encarga de escribir en el cuerpo d e la función los datos de la cita asignada. function rellenaCita(){ //A partir del objeto cita que hemos obtenido arrib a, vamos a rellenar los datos del justificante de cita. var nombre=cita.nombre_usuario.split( "Â" ); var ubicacion=cita.ubicacion.split( "Â" ); var nuss=cita.nuss_usuario.split( "Â" );
document.getElementById( "fecha_num" ).innerHTML=cita.fecha_cita; document.getElementById( "fecha_cadena" ).innerHTML=
cita.fecha_cita_cadena; document.getElementById( "hora" ).innerHTML=cita.hora_cita; document.getElementById( "orden" ).innerHTML=cita.orden; document.getElementById( "centro" ).innerHTML=cita.centro; document.getElementById( "ubicacion" ).innerHTML=ubicacion[ 1]; document.getElementById( "dir_centro" ).innerHTML=cita.direccion; document.getElementById( "profesional" ).innerHTML=cita.profesional; document.getElementById( "nombre_usuario" ).innerHTML=nombre[ 1]; document.getElementById( "nuss" ).innerHTML=nuss[ 1]; } //Funcion que maneja los eventos que ocurren cuando pulsamos los botones del mando. function handleKeyCode(kc) { if (kc==VK_BLUE) { cancelarCita(); } else if (kc==VK_RED){ //Borramos todas las cookies antes de volver a la página de inicio. eraseCookie( "infosesion2" ); eraseCookie( "dias" ); eraseCookie( "horas" ); eraseCookie( "indicedia" ); eraseCookie( "datos_login" ); cierraSesion(); } return false ; } function cancelarCita(){ //Creamos la cadena de parametros que le vamos a pa sar al objeto XHR //Para ello necesitamos obtener ciertos parametros del objeto cita. var enlace_cancelar=cita.enlace_cancelar; var matriz_enlacecancelar=enlace_cancelar.split( "&" ); var cadena_params= 'cookies_sesion=' +cita.sesion+ '&' +matriz_enlacecancelar[ 1]+ '&' +matriz_enlaceca
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 79
ncelar[ 2]+ '&' +matriz_enlacecancelar[ 3]+ '&' +matriz_enlacecancelar[ 4]+ '&' +matriz_enlacecancelar[ 5]; peticion3={ metodo: "POST" , url: './conectarsas/cancelarCita.php' , params: cadena_params, success: function (requestObj2){ console.log( "requestObj2.readyState: " +requestObj2.readyState+ " requestObj2.status: " +requestObj2.status); datosjson_cancelar=requestObj2.responseText; console.log (datosjson_cancelar); //Borro el valor de todas las cookies que tenemos h asta ahora, excepto la de infosesion, los datos del logi n, y los días por si acaso queremos volver a coger una cita en la próxima vent ana. eraseCookie( "infosesion2" ); eraseCookie( "indicedia" ); eraseCookie( "horas" );
/ /Creamos una cookie con la información que nos ha d evuelto la pagina de cancelación. setCookie( "info_cancelacion" , datosjson_cancelar); document.location.href= 'citaCancelada.html' ; }, error: function (){ console.log( "Error en la conexión" ); } } funcion_xmlhttprequest(peticion3); } //Función que nos cierra la aplicación. function closeApp() { try { var app = document.getElementById( 'appmgr' ).getOwnerApplication(document); app.destroyApplication(); return ; } catch (e) { alert( 'Cannot destroy application' ); } } //]]> </script> <link rel ="stylesheet" type ="text/css" href ="estilos.css" /> </head><body> <div id ="principal" > <div style ="left: 80px; top: 50px; width:600px;" ><img src ="images/junta_andalucia.jpg" width ="150" /></div> <div class ="cabecera" >Servicio Andaluz de Salud <br /> CONSERJERÍA DE IGUALDAD, SALUD Y POLÍTICAS SOCIALES </div> <div id ="contenedor_cita" style ="left: 100px; top: 200px; width:1100px; height:400px; border: 2px black;" > <div class ="letragrande" style ="text-align: center; background-color: #f9f9f9; width:1000px; border-bottom: 2px inset #f9 f9f9;" > Cita: Consulta de medicina familia </div> <div style ="width: 300px; top:50px; left: 10px;" > <p> <span class ="letranormal" >Día : </span> <span id ="fecha_num" class ="letragrande" ></span><br />
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 80
<span id ="fecha_cadena" class ="letranegrita" ></span> </p> <p> <span class ="letranormal" >Hora : </span> <span id ="hora" class ="letragrande" ></span> </p> <p> <span class ="letranormal" >Orden : </span> <span id ="orden" class ="letragrande" ></span> </p> </div> <div style ="width: 760px; top: 50px; left: 330px; " > <p> <span class ="letranormal" >Centro : </span> <span id ="centro" class ="letragrande" ></span> </p> <p> <span class ="letranormal" >Dirección : </span> <span id ="dir_centro" class ="letragrande" ></span> </p> <p> <span class ="letranormal" >Ubicación : </span> <span id ="ubicacion" class ="letragrande" ></span> </p> <p> <span class ="letranormal" > Profesional : </span> <span id ="profesional" class ="letragrande" ></span> </p> </div> <div id ="datos_usuario_justificante" style ="width: 760px; left: 330px; top:250px;" > <p> <span class ="letranormal" > Usuario : </span> <span id ="nombre_usuario" class ="letragrande" ></span> </p> <p> <span class ="letranormal" > NUSS : </span> <span id ="nuss" class ="letragrande" ></span> </p> </div> </div> <div style ="top: 600px; left:400px;" ><img src ="images/botonazul.png" width ="70" /></div> <div class ="letranormal" style ="top: 615px; left:470px;" >Cancelar cita </div> <div style ="top: 600px; left:640px;" ><img src ="images/botonrojo.png" width ="70" /></div> <div class ="letranormal" style ="top: 615px; left:710px;" >Cerrar la sesión </div> </div> </body> </html>
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 81
citaCancelada.html <?xml version ="1.0" encoding= "utf-8" ?> <!DOCTYPE html PUBLIC "-//HbbTV//1.1.1//EN" "http:/ /www.hbbtv.org/dtd/HbbTV-1.1.1.dtd"> <html xmlns ="http://www.w3.org/1999/xhtml" xml:lang= "de" lang ="de" > <head> <title> Cita médica en InterS@S </title> <meta http-equiv ="Pragma" content ="no-cache" > <meta http-equiv ="content-type" content ="Content-Type: application/vnd.hbbtv.xhtml+xml; charset=UTF-8" /> <meta name="author" content ="carmen" /> <meta name="description" content ="" /> <script type ="text/javascript" src ="funciones.js" charset ="UTF-8" ></script> <script type ="text/javascript" src ="keycodes.js" charset ="UTF-8" ></script> <script type ="text/javascript" > //<![CDATA[ /************************************************** *************************** * Variables globales que necesitamos en esta págin a. Extraemos lainformación* * necesaria de las cookies. Para ello haremos uso de la función getCookie. * * Las variables globales serán: * * - info_cancelacion: contiene la información de c ancelación. * * - datos_login: contiene los datos del login. * *************************************************** **************************/ var info_cancelacion= JSON.parse(decodeURIComponent(getCookie( "info_cancelacion" ))); var datos_login=JSON.parse(decodeURIComponent(getCooki e( "datos_login" ))); //Función que se ejecuta nada mas cargar la página. Muestra la info de cancelación y crea el listener del teclado. window.onload = function () { rellenaInfo(); registerKeyEventListener(); }; //Funcion que se encarga de rellenar la página con la información de la cancelación de cita. function rellenaInfo(){ if (info_cancelacion.informacion == "Su petición de cancelación de cita se ha procesado correctamente." ) { info_cancelacion.informacion = "Su petición de cancelación se ha procesado correctamente." ; document.getElementById( 'principal' ).innerHTML += "<div style='top: 600px; left:400px;'><img src='images/bo tonazul.png' width='70' /></div><div class='letranormal' style='top: 615px; left:470px;'>Coger otra cita</div>" ; document.getElementById( 'principal' ).innerHTML += "<div style='top: 600px; left:630px;'><img src='images/bo tonrojo.png' width='70' /></div><div class='letranormal' style='top: 615px; left:710px;'>Cerrar la sesión</div>" ; document.getElementById( "info" ).innerHTML=info_cancelacion.informacion; } else { document.getElementById( "info" ).innerHTML=info_cancelacion.informacion; document.getElementById( "info" ).style.textAlign= "center" ; document.getElementById( 'principal' ).innerHTML += "<div style='top: 560px; left:570px;'><img src='images/bo tonrojo.png' width='70' /></div><div class='letranormal' style='top: 575px; left:650px;'>Cerrar la sesión</div>" ; } }
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 82
//Función que controla las acciones de las teclas. function handleKeyCode(kc) { if (kc==VK_BLUE) { /* Si queremos coger otra cita, primero debemos de comprobar si venimos de cancelar una cita que ya estaba cogida, o si venimos de cancelar una cita que acabamos de coger. Esto lo podemos com probar facilmente comprobando si la cookie "dias" esta definida o no. Si esta definida, entonces redirijimos la pagina directamente a most rarHoras.html. */ if (getCookie( "dias" )) { document.location.href= 'mostrarHoras.html' ; } else { /* Si no esta definida, entonces tenemos que volver a hacer una conexión con loginIntersas.php para obtener los días en los que puedo coger cita. Borro antes las cookies que no quiero. */ eraseCookie( "cita" ); eraseCookie( "info_cancelacion" ); /* Ahora tengo que crear mi objeto JavaScript que c ontenga la petición de XMLHttpRequest. Los parámetros neces arios en este caso los sacamos de la cookie "datos_login". */ peticion4={ metodo: "POST" , url: './conectarsas/loginIntersas.php' , params: 'id_us=' +datos_login.nuss+ '&dia=' +datos_login.dia+ '&mes=' +datos_login.mes+ '&anio=' +datos_login.anio+ '&dni=' +datos_login.dni+ '&origen=1' , success: function (requestObj){ console.log( "requestObj.readyState: " +requestObj.readyState+ " requestObj.status: " + requestObj.status); datosjson_web=requestObj.responseText; console.log ( "datos json web: " + datosjson_web); datosjson=datosjson_web.split( "SEPARADOR"); console.log(datosjson); //En el primer JSON tengo los datos correspondiente s a la cita (si la hubiese) o los parámetros que tenemos que pasar a la siguiente página Objeto0 = JSON.parse(datosjson[ 0]); //En el segundo JSOn tengo los datos de los dias disponibles, o relleno en el caso de haber cita cog ida. Objeto1 = JSON.parse(datosjson[ 1]); if (Objeto0.enlace_cancelar== "no hay cita que cancelar" ){ //SI no hay cita que cancelar tendremos que mostrar la pagina mostrarDias para seleccionar un dia. if (Objeto0.comprueba_acceso== "ok" ){ var nombre = Objeto0.nombre_usuario; //Para poder disponer de los datos en las siguiente s paginas, guardaremos c ada una de las dos cadenas JSON en una cookie. Asi podemos pasarlas fácilmente al resto de las páginas donde las necesitemos. setCookie( "infosesion" ,datosjson[ 0]); setCookie( "dias" ,datosjson[ 1]); //Redirigo automaticamente a mostrarDias2.html si n o hay cita cogida. document.location.href= 'mostrarDias.html' ; } else { //Aqui los datos no pueden estar mal, porque estamos en cita cancelada, lo que quiere dec ir que el login lo hemos hecho antes de entrar aqui. Por lo tanto si ocurre un error es un error de conexion al servidor, pero no de datos, por lo que dejamos este bucle vacio. } } }, error: function (){ console.log( "Error en la conexión" ); }
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 83
} //Hacemos la peticion XMLHttpRequest funcion_xmlhttprequest(peticion4); } } else if (kc==VK_RED){ //Borro todas las cookies antes de salir. Algunas d e estas cookies puede que no existan, pero esto no ocasiona ra ningun problema. eraseCookie( "dias" ); eraseCookie( "datos_login" ); eraseCookie( "infosesion2" ); eraseCookie( "indicedia" ); eraseCookie( "horas" ); eraseCookie( "diaescogido" ); eraseCookie( "info_cancelacion" ); cierraSesion(); } } //]]> </script> <link rel ="stylesheet" type ="text/css" href ="estilos.css" /> </head><body> <div id ="principal" > <div style ="left: 80px; top: 50px; width:600px;" ><img src ="images/junta_andalucia.jpg" width ="150" /></div> <div class ="cabecera" >Servicio Andaluz de Salud <br /> CONSERJERÍA DE IGUALDAD, SALUD Y POLÍTICAS SOCIALES </div> <div id ="info" class ="letragrande" style ="left: 250px; top: 300px; width:800px; height:400px; border: 2px black;" > </div> </div> </body> </html>
funciones.js var opts = false ; //Variable para guardar el numero de opciones que n os ofrece el menu. var selected = 0; //Variable para guardar la selección del menu. /************************************************** *************************** * Función para inicializar la aplicación. Se basa en enlazar el documento * * CE-HTML a nivel DOM con el objeto del tipo oipfA pplicationManager. A * * partir de ahora podemos controlar el ciclo de vi da de la aplicación con * * los metodos definidos en el estándar. Además, ac tivamos los key-event * * que nuestra aplicación va a recibir. * *************************************************** **************************/ function initApp() { try { app = document.getElementById( 'appmgr' ).getOwnerApplication(window.document); app.show(); //Mostramos la aplicación.
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 84
} catch (e) { // ignore } //Activamos los botones rojo, verde, azul, amarillo , las teclas de navegación y las eventos numéricos. setKeyset( 0x1 +0x2 +0x4 +0x8 +0x10 +0x100 ); } /************************************************** ************************** * Función para inicializar el keySet. Recibe una má scara numérica que se * * encarga de activar los key-events que queremos qu e nuestra aplicación * * escuche. Función valida para dos versiones de Hbb TV distintas. * *************************************************** **************************/ function setKeyset(mask) { // for HbbTV 0.5: try { var elemcfg = document.getElementById( 'oipfcfg' ); elemcfg.keyset.value = mask; } catch (e) { // ignore } try { var elemcfg = document.getElementById( 'oipfcfg' ); elemcfg.keyset.setValue(mask); } catch (e) { // ignore } // for HbbTV 1.0: try { var app = document.getElementById( 'appmgr' ).getOwnerApplication(document); app.privateData.keyset.setValue(mask); app.privateData.keyset.value = mask; } catch (e) { // ignore } } /************************************************** ************************** * Función para registrar un evento del teclado. Lo hace a partir de la * * creación de un listener, que lo que hace es regis trar un evento a un * * objetivo especifico. * *************************************************** *************************/ function registerKeyEventListener() { document.addEventListener( "keydown" , function (e) { if (handleKeyCode(e.keyCode)) { e.preventDefault(); } }, false ); } /************************************************** ************************* * Función para inicializa la variable opts a partir del número de elementos* * "li" que tenemos en la página, y posteriormente i nicializa el menú. * *************************************************** ************************/ function menuInit() { opts = document.getElementById( 'menu' ).getElementsByTagName( 'li' ); menuSelect( 0); } /************************************************** *************************** * Función que se encarga de ir variando el aspecto del menú a medida que nos* * movemos por el. * *************************************************** **************************/ function menuSelect(i) { if (i<= 0) {
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 85
i = 0; } else if (i>=opts.length) { i = opts.length- 1; } selected = i; var scroll = Math.max( 0, Math.min(opts.length- 6, selected- 1)); for (i= 0; i<opts.length; i++) { opts[i].style.display = (i>=scroll && i<scroll+ 6) ? 'block' : 'none' ; opts[i].className = selected==i ? 'lisel' : '' ; } } /************************************************** ************************** * Función que se encarga de hacer peticiones XMLHt tpRequest. Recibirá como * * parámetro un objeto con todos los datos de la pe tición (método, URL, y * * parámetros). * *************************************************** *************************/ function funcion_xmlhttprequest(o){ //Creamos una nueva instancia de un objeto XMLHttpR equest. var xhr = new XMLHttpRequest(); xhr.autoRedirect = true ; /* Establece los parámetros de la petición que se r ealiza al servidor. Los parámetros necesarios son el método HTTP (GET O POST) empleado y la URL destino (puede indicarse de forma absoluta o relati va). Además, el tercer valor indica que la respuesta es asíncrona. Este pa rámetro se puede omitir, pero lo pondremos por claridad. */ xhr.open(o.metodo, o.url, true ); /* Para enviar parámetros mediante el método POST, es obligatorio incluir la cabecera Content-Type mediante la siguie nte instrucción.*/ xhr.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" ); console.log( "Parametros pasados para ser usados con el metodo P OST: " + o.params); /* onreadystatechange = se ejecuta este evento cada vez que readyState cambia su valor. -readyState: contiene un valor numérico entero qu e almacena el estado de la petición. -status: el código de estado HTTP devuelto por el servidor. */ xhr.onreadystatechange = function () { if (xhr.readyState === 4) { //readyState valdrá 4 cuando se han recibido todos los datos de la respuesta del servidor. if (xhr.status === 200 ) { //status valdrá 200 para una respuesta correcta. console.log( "La petición xhr tuvo éxito http: " +xhr.status); o.success(xhr); } else { console.log( "La petición xhr falló http: " +xhr.status); o.error(); } } }; /* El método send() es el que se encarga de enviar los parámetros al servidor. Los parámetros se envían en forma de cade na de texto con las variables y sus valores concatenados mediante el sí mbolo & (esta cadena normalmente se conoce como "query string"). */ xhr.send(o.params);
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 86
} /************************************************** *************************** * Función que se encarga de cerrar la sesión. Se h a definido aquí por que se* * usa desde todos los ficheros. Además siempre har an falta los mismos datos.* *************************************************** **************************/ function cierraSesion(){ //Recuperamos los datos de la cookie infosesion (si existiese) if (getCookie( "infosesion" )){ var info_sesion=JSON.parse(decodeURIComponent(getCookie ( "infosesion" ))); idus=info_sesion.id_us_cierre; sesion=info_sesion.sesion; } else { //Si infosesion no esta definida, entonces había un a cita cogida con anterioridad. var cita=JSON.parse(decodeURIComponent(getCookie( "cita" ))); idus=cita.id_us_cierre; sesion=cita.sesion; } //Creamos la cadena de parametros que pasaremos por el método POST. var cadena_params = 'cookie_sesion=' +sesion+ '&id_us=' + idus; console.log( 'Cadena de parametros en la peticion xhr para cerra r sesion:' + cadena_params); //Definimos el objeto que usaremos en la segunda pe ticion XHR. peticion_cierre={ metodo: "POST" , url: './conectarsas/cerrarSesion.php' , params: cadena_params, success: function (requestObj2){ console.log( "requestObj2.readyState: " +requestObj2.readyState+ " requestObj2.status: " +requestObj2.status); datosjson_web2=requestObj2.responseText; //Si la petición ha tenido exito, redirigimos a ind ex.html y borramos las cookies que aun quedaba por borrar. if (getCookie( "infosesion" )){ eraseCookie( "infosesion" ); } if (getCookie( "cita" )){ eraseCookie( "cita" ); } document.location.href= "index.html" ; }, error: function (){ //Si ha habido un error de conexión con el servidor... console.log( "Error en el cierre de sesion" ); } } //Hacemos peticion XHR funcion_xmlhttprequest(peticion_cierre); }
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 87
/************************************************** *************************** * Función que se encarga de crear una cookie. Reci be como parámetros el ID * * de la cookie, el value y la fecha de expiración (no es obligatoria). * *************************************************** **************************/ function setCookie(cname, cvalue, expires) { cookieStr = cname + "=" + escape(cvalue) + "; " ; if (expires){ expires = setExpiration(expires); cookieStr += "expires=" + expires + "; " ; } var path= "path=/" ; cookieStr += path + "; " ; document.cookie = cookieStr; } /************************************************** *************************** * Función que se encarga de convertir el tiempo de expiración recibido en un* * en una cadena de tiempo adecuada para una cookie . * *************************************************** **************************/ function setExpiration(cookieLife){ var today = new Date(); var expr = new Date(today.getTime() + cookieLife * 24 * 60 * 60 * 1000 ); return expr.toGMTString(); } /************************************************** *************************** * Función que se encarga de obtener el valor de un a cookie. Recibe como * * parámetros el ID de la cookie de la cual queremo s saber su value. * *************************************************** **************************/ function getCookie(cname) { var name = cname + "=" ; var ca = document.cookie.split( ';' ); for ( var i= 0; i<ca.length; i++) { var c = ca[i].trim(); if (c.indexOf(name) == 0) return c.substring(name.length,c.length); } return "" ; } /************************************************** *************************** * Función que se encarga de borrar una cookie. Rec ibe como parámetros el ID * * de la cookie que queremos borrar. * *************************************************** **************************/ function eraseCookie(c_name) { setCookie(c_name, "" ,- 1); } /************************************************** *************************** *************************************************** *************************** * FUNCIONES DE VALIDACIÓN DEL FOR MULARIO * *************************************************** ****************************************************************************** **************************/ function Quita_blancos(valor){ if ( typeof valor == "undefined" ){ return ( "" ); } else { var no_espacios; var longitud=valor.length;
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 88
for (i= 0;i<longitud;i++){ //Espacio blanco y tabulador if (valor.charAt(i)!= " " && valor.charAt(i)!= "\t" ) { if ( (i== 0) || ( typeof no_espacios == "undefined" )) { no_espacios=valor.charAt(i); } else { no_espacios=no_espacios + valor.charAt(i); } } } if ( typeof no_espacios == "undefined" ){ return ( "" ); } else { return (no_espacios); } } } //Comprueba si la sintaxis de la fecha es válida. function comprueba_fecha(dia,mes,anio){ if (anio.length!= 4){ return ( 3); //Año incorrecto en la fecha de nacimiento } if (mes< 1 || mes> 12){ return ( 4); //Mes incorrecto en la fecha de nacimiento } if (( dia< 1 || dia> 31) || (mes== 4 && dia> 30) || (mes== 6 && dia> 30) || (mes== 9 && dia> 30) || (mes== 11 && dia> 30) || (mes== 2 && es_bisiesto(anio) && dia> 29) || (mes== 2 && !es_bisiesto(anio) && dia> 28)){ return ( 5); //Día incorrecto en la fecha de nacimiento } return ( 6); } function es_bisiesto(anio){ if ((( anio % 4==0) && anio % 100 != 0 ) || anio % 400 == 0){ return true ; } return false ; } //Comprueba si el usuario es mayor de edad. Si lo e s, devuelve true, si no, false. function mayor_edad(edad,dia1,mes1,anio1){ hoy= new Date(); var dia=hoy.getDate(); var mes=hoy.getMonth()+ 1; var anio=hoy.getFullYear(); if ( (anio-anio1)>edad ){ return true ; } if ( (anio-anio1)==edad && (mes-mes1)> 0 ){ return true ; } if ( (anio-anio1)==edad && (mes-mes1)== 0 ){ if ((dia1-dia)<= 0 ){ /* En este caso devolvemos true porque la fecha de nacimiento introducida corresponde con un usuario m ayor de la edad pasada como parámetro.*/
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 89
return true ; } } /* Devolvemos false en caso contrario y no se muest ra un alert aunque no se haya introducido dni (no es obligatiorio ya que el usuario es menor de 14 años).*/ return ( false ); } //Comprobamos si el número de la SS es válido. function validar_ss(nuss){ if (nuss.length!= 12||nuss== " " ) { if (nuss.length== 0){ return ( 1); //Introduzca el número de la tarjeta sanitaria } else { return ( 2); //El Número de la Tarjeta Sanitaria debe tener 12 dígitos } } // Controlamos la Fecha de Nacimiento: var id1=nuss.substr( 0, 2); var id2=nuss.substr( 2, 8); var id3=nuss.substr( 10, 2); if (id1){ if ((!id1.match( /^(\s)*$/ )) && (!id1.match( /^(\s)*$/ )) && (!id1.match( /^(\s)*$/ ))){ if (!(id1== "\0" )){ if ( (id1> 0) || (String(id1).toUpperCase()== "AN" ) ){ if (String(id2).length< 8){ for (i=String(id2).length;i< 8;i++){ id2e= "0" + id2.value; } } if ((id2).charAt( 0)== "0" ){ if (String(id1).toUpperCase()== "AN" ){ provincia= 60 * 10000000 ; } else { provincia=id1 * 10000000 ; } } else { if (String(id1).toUpperCase()== "AN" ){ provincia= 60 * 100000000 ; } else { provincia=id1 * 100000000 ; } } dividendo=Number(provincia) + Number(id2); divisor= 97; resto=dividendo%divisor; if (resto < 10){ resto= "0" + resto; } if (id3.match( /^(\s)*$/ )){ id3=resto; } else { if (id3!=resto){ /*alert("El número de la Tarjeta Sanitaria introducido no es correcto");*/ return ( 3); }
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 90
} return ( 7); //correcto } else { return ( 3); //alert("El número de la Tarjeta Sanitaria introducido no es correcto"); } } else { return ( 3); //alert("El número de la Tarjeta Sanitaria introducido no es correcto"); } } else { return ( 7); //correcto } } else { return ( 7); //correcto } } // Calculamos la letra para el DNI introducido. function nif(dni) { numero=dni; numero = numero % 23; letras= 'TRWAGMYFPDXBNJZSQVHLCKET'; letra=letras.substring(numero,numero+ 1); return letra; }
estilos.css
body { margin : 0; font-family : sans-serif; } . letrageneral { font-size : 22px; } . letranegrita { font-size : 22px; font-weight : bold; } . letragrande { font-size : 24px; } . letraerror { font-size : 22px; color : red; } div { overflow : hidden; position : absolute; margin : 0; padding : 0; } #principal { left : 0px; top : 0px;
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 91
width : 1280px; height : 720px; background-color : #ffffff; } . cabecera { font-weight : bold; left : 500px; top : 100px; color : #006400; font-size : small; left : 235px; top : 110px; } . etiquetas_campos { font-size : 70%; font-weight : bold; color :#2D6F53; } #txtform { left : 300px; top : 250px; } #formulario { left : 600px; top : 300px; } img { border : 0; margin : 0; padding : 0; } ul. menu { padding : 0; margin : 0; position : absolute; width : 320px; } . menu li { display : none; overflow : hidden; width : 320px; height : 33px; text-align : center; padding-left : 11px; padding-top : 5px; font : 18px sans-serif; color : black; background-color : white; border : solid thin #006400; }
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo A
Mª del Carmen Rodríguez Segovia 92
. menu . lisel { font-weight : bold; color : #006400; background-color : #e5dcd6; }
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo B
Mª del Carmen Rodríguez Segovia 93
ANEXO B
A continuación se incluyen los códigos de los archivos que se encargan de comunicarse
con el servidor de InterS@S. El orden de aparición de los códigos de los distintos archivos
se ha elegido de tal manera que facilite al lector la comprensión de los mismos.
loginIntersas.php <?php //Incluimos la librería para parsear html include_once ( 'simple_html_dom.php' ); function loginintersas ( $url , $agente ) { //foreach recorre el array dado por $_POST (un arra y asociativo de variables pasadas al script actual a través del método HTTP P OST). //En cada iteración, el valor del elemento actual s e asigna a $valor y la clave a $nombre_campo. El puntero interno del array avanza una posición (así en la próxima iteración se estará observando el sig uiente elemento). foreach ( $_POST as $nombre_campo => $valor ){ //Con estas dos lineas estamos definiendo una varia ble por cada $nombre_campo que tengamos en el array $_POST $asignacion = "$" . $nombre_campo . "='" . $valor . "';" ; eval ( $asignacion ); } $curl = curl_init (); //Nueva sesion CURL $campos = "id_us=" . $id_us . "&dia=" . $dia . "&mes=" . $mes . "&anio=" . $anio . "&dni=" . $dni . "&origen=1" ; curl_setopt ( $curl , CURLOPT_URL, $url ); //Direccion de destino curl_setopt ( $curl , CURLOPT_RETURNTRANSFER, true ); //El resultado nos lo va a devolver en una cadena de texto. curl_setopt ( $curl , CURLOPT_FOLLOWLOCATION, false ); curl_setopt ( $curl , CURLOPT_USERAGENT, $agente ); curl_setopt ( $curl , CURLOPT_HEADER, true ); //Devuelve la cabecera en la salida. // Especificamos la versión de SSL para poder conec tar con el servidor de InterS@S curl_setopt ( $curl , CURLOPT_SSLVERSION, 3); /* Se comprobará que el certificado del servidor es válido verificando que la CA (Autoridad Certificadora) que lo expidió está entre las CA reconocidas.*/ curl_setopt ( $curl , CURLOPT_SSL_VERIFYPEER, true ); /* También se comprobará que el common name (CN) de l certificado de servidor se corresponde con el dominio al que nos e stamos conectando.*/ curl_setopt ( $curl , CURLOPT_SSL_VERIFYHOST, 2); /* Con la siguiente opción le indicamos a cURL que confíe en los certificados de servidor firmados por una CA cuyo c ertificado raiz es FNMTClase2CA-FNMT.crt.Por otra parte getcwd() es un a función de php que devuelve el directorio actual.*/ curl_setopt ( $curl , CURLOPT_CAINFO, getcwd (). '/FNMTClase2CA-FNMT' ); curl_setopt ( $curl , CURLOPT_POST, true ); curl_setopt ( $curl , CURLOPT_POSTFIELDS, $campos ); //Ejecutamos sesion CURL. En codigofuente tenemos g uardado una cadena de texto.
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo B
Mª del Carmen Rodríguez Segovia 94
$codigofuente = curl_exec ( $curl ); /* Comprobamos que los datos se han introducido cor rectamente (comprobamos que no hemos obtenido la página advirt iendo de la no coincidencia entre los datos introducidos y los almacenados en l a base de datos de InterS@S). */ $html = new simple_html_dom (); //Con load cargamos el contenido del string codigo fuente en la variable html. $html -> load ( $codigofuente ); //Me busca los elementos span de clase letra_genera l. El 0 es para que solo me devuelva la primera coincidencia. $compruebaerrordatos =$html -> find ( 'span[class=letra_general]' , 0)->innertext ; if ( $compruebaerrordatos =="Se ha producido un error al introducir los datos." ){ //Si entramos aqui es porque los datos no son corre ctos. $json2 ='{"enlace_cancelar":"no hay cita que cancelar","comprueba_acceso":"' . $compruebaerrordatos . '"}' ; curl_close ( $curl ); //Cerramos sesion CURL $html -> clear (); //Eliminamos el objeto html para no malgastar memoria print ( utf8_encode ( $json2 )); print ( "SEPARADOR"); print ( '{"segundoJSON":"RELLENO"}' ); } else { /* Queremos obtener la dirección para pedir cita co n el médico, la cual es generada dinámicamente. Para ello analiz aremos el contenido de $codigofuente, que no es más que una cadena de text o, haciendo uso de algunas funciones de php de manipulación de cadenas : */ $primerpaso =explode ( 'href="/citaInternet/inicio_citamedico.jsp?id=' , $codigofuente ); $segundopaso =$primerpaso [ 1]; $tercerpaso =explode ( '" target="_blank" onclick="completa_url(this.href);' , $segundopaso ); $idprimero =$tercerpaso [ 0]; //Ademas, también queremos obtener el id_us para po der cerrar la sesión cuando nos haga falta. $aux =explode ( '<input type="hidden" name="id_us" value="' , $codigofuente ); $aux2 =$aux [ 1]; $aux3 =explode ( '" />' , $aux2 ); $id_us_cierre =$aux3 [ 0]; // La url para pedir cita $url2 = "ws003.juntadeandalucia.es/citaInternet/inicio_cita medico.jsp?id=" . $idprimero ; curl_close ( $curl ); //Cerramos sesion CURL $html -> clear (); //Eliminamos el objeto html para ahorrar recursos del servidor. $curl2 = curl_init (); //Nueva sesion CURL curl_setopt ( $curl2 , CURLOPT_URL, $url2 ); //Direccion de destino curl_setopt ( $curl2 , CURLOPT_AUTOREFERER, true ); // Queremos la respuesta en una cadena de texto curl_setopt ( $curl2 , CURLOPT_RETURNTRANSFER, true );
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo B
Mª del Carmen Rodríguez Segovia 95
curl_setopt ( $curl2 , CURLOPT_FOLLOWLOCATION, false ); curl_setopt ( $curl2 , CURLOPT_USERAGENT, $agente ); /* Especificamos la versión de ssl para que funcion e con el servidor de InterS@S */ curl_setopt ( $curl2 , CURLOPT_SSLVERSION, 3); /* Igual que antes, se comprobará que el certificad o del servidor es válido comprobando que la CA (Autoridad Certific adora) que lo expidió está entre las CA reconocidas. */ curl_setopt ( $curl2 , CURLOPT_SSL_VERIFYPEER, true ); curl_setopt ( $curl2 , CURLOPT_SSL_VERIFYHOST, 2); curl_setopt ( $curl2 , CURLOPT_CAINFO, getcwd (). '/FNMTClase2CA-FNMT'); /*Obtenemos las cookies parseando la cabecera htt p de la petición. Para que la cabecera http esté incluida e n la respuesta que se obtiene establecemos a uno la opción CURLOPT_HEADER de la sesión cURL */ //Se incluye la cabecera http en la respuesta. curl_setopt ( $curl2 , CURLOPT_HEADER, true ); //Ejecutamos sesion CURL esta vez sin paso de parám etros por POST $codigofuente2 = curl_exec ( $curl2 ); /* Parseamos $códigofuente2 para quedarnos con las cookies que aparecen en la cabecera http (http response). La ca becera http enviada por el servidor tiene la siguiente estructura: HTTP/1.1 200 OK Set-Cookie: name=value Set-Cookie : name2=value2; Expires=Wed, 09 Jun 2021 10:18:14 GMT Content-typ e: text/html (content of page) */ $start = strpos ( $codigofuente2 , "Set-Cookie" ); $end = strpos ( $codigofuente2 , "Content-Type" ); $parts = split ( "Set-Cookie: " , substr ( $codigofuente2 , $start , $end - $start )); $cookies = array (); foreach ( $parts as $co ){ $cd = split ( ";" , $co ); if (! empty ( $cd [ 0])) // Cada vez que se recorre el bucle se añade un elemento a la matriz de tamaño indeterminado $cooki es[] $cookies [] = $cd [ 0]; } $cookies_sesion =implode ( ";" , $cookies ); curl_close ( $curl2 ); //Cerramos sesion CURL $curl3 = curl_init (); //Nueva sesion CURL $url3 ='ws003.juntadeandalucia.es/citaInternet/inicio_peti cion_cita.jsp' ; curl_setopt ( $curl3 , CURLOPT_URL, $url3 ); //Direccion de destino /* Establecemos el valor de las cookies en la nueva petición. Las cookies las hemos obtenido parseando la cabecera ht tp (http header de la anterior petición) */ curl_setopt ( $curl3 , CURLOPT_COOKIE, $cookies_sesion ); //Resultado en una cadena de texto curl_setopt ( $curl3 , CURLOPT_RETURNTRANSFER, true ); curl_setopt ( $curl3 , CURLOPT_FOLLOWLOCATION, false ); curl_setopt ( $curl3 , CURLOPT_USERAGENT, $agente ); curl_setopt ( $curl3 , CURLOPT_HEADER, false ); //Oculta encabezado curl_setopt ( $curl3 , CURLOPT_SSLVERSION, 3); curl_setopt ( $curl3 , CURLOPT_SSL_VERIFYPEER, true ); curl_setopt ( $curl3 , CURLOPT_SSL_VERIFYHOST, 2); curl_setopt ( $curl3 , CURLOPT_CAINFO, getcwd (). '/FNMTClase2CA-FNMT'); curl_setopt ( $curl3 , CURLOPT_POST, false ); //Ejecutamos sesion CURL $codigofuente3 = curl_exec ( $curl3 );
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo B
Mª del Carmen Rodríguez Segovia 96
/* Hay que obtener una matriz y después un JSON con los días de cita disponibles */ $html = new simple_html_dom (); $html -> load ( $codigofuente3 ); /*Comprobamos si hay cita pedida. Si la hay se gene ra un json con los datos de la cita.*/ //Si hubiese una cita pedida, tendriamos un enlace para cancelar la cita. $compruebacita =$html -> find ( 'a[class=enlace_cancelar_cita]' , 0)->href ; if ( $compruebacita != null ){ $matrizdatos [ 'id_us_cierre' ]= $id_us_cierre ; $matrizdatos [ 'sesion' ]= $cookies_sesion ; $matrizdatos [ 'comprueba_acceso' ]= "ok" ; $matrizdatos [ 'enlace_cancelar' ]= $html ->find ( 'a[class=enlace_cancelar_cita]' , 0)-> href ; $matrizdatos [ 'fecha_solicitud' ]= utf8_encode ( $html ->find ( 'span[class=letra_pequena_fecha]' , 0)-> innertext ); $matrizdatos [ 'fecha_cita' ]= utf8_encode ( $html ->find ( 'strong[class=letra_justificante_cita_negrita_big]' , 0)-> innertext ); $matrizdatos [ 'fecha_cita_cadena' ]= utf8_encode ( $html ->find ( 'span[class=letra_justificante_cita]' , 1)-> innertext ); $matrizdatos [ 'hora_cita' ]= utf8_encode ( $html ->find ( 'strong[class=letra_justificante_cita_negrita_big]' , 1)-> innertext ); $matrizdatos [ 'orden' ]= utf8_encode ( $html ->find ( 'strong[class=letra_justificante_cita_negrita_big]' , 2)-> innertext ); $matrizdatos [ 'centro' ]= utf8_encode ( $html ->find ( 'td[class=letra_justificante_cita_negrita]' , 0)-> innertext ); $matrizdatos [ 'direccion' ]= utf8_encode ( $html ->find ( 'td[class=letra_justificante_cita_negrita]' , 2)-> innertext ); $matrizdatos [ 'ubicacion' ]= trim ( utf8_encode ( html_entity_decode ( $html ->find ( 'td[class=letra_justificante_cita_negrita]' , 3)-> innertext ))); $matrizdatos [ 'profesional' ]= utf8_encode ( $html ->find ( 'td[class=letra_justificante_cita_negrita]' , 4)-> innertext ); $matrizdatos [ 'nombre_usuario' ]= trim ( utf8_encode ( html_entity_decode ( $html-> find ( 'span[class=letra_justificante_cita_negrita]' , 0)-> innertext ))); $matrizdatos [ 'nuss_usuario' ]= trim ( utf8_encode ( html_entity_decode ( $html ->find ( 'span[class=letra_justificante_cita_negrita]' , 1)-> innertext ))); $matrizdatos [ 'fecha_solicitud' ]= trim ( utf8_encode ( html_entity_decode ( $html -> find ( 'span[class=letra_justificante_cita]' , 4)-> innertext ))); curl_close ( $curl3 ); //Cerramos sesion CURL $html -> clear (); //Eliminamos el objeto html para no malgastar memoria $json =json_encode ( $matrizdatos ); print ( utf8_encode ( $json )); //print ($json); print ( "SEPARADOR"); print ( '{"segundoJSON":"RELLENO"}' ); } // Si $compruebacita=null es que no hay cita asigna da todavía else { for ( $i = 0 ; $i <= 13 ; $i ++) { $matrizdias [ 'dia' . $i ][ 'value' ]= $html ->find ( 'input[id=dia' . $i . ']' , 0)-> value ; $matrizdias [ 'dia' . $i ][ 'cadena' ]= utf8_encode ( $html ->find ( 'label[for=dia' . $i . ']' , 0)-> innertext ); } /* Array asociativo de datos. Como no hay cita asig nada, al elemento "enlace_cancelar" le asignamos la cadena " no hay cita que cancelar". Este valor será el que utilice el widget para saber si debe ir a la vista MostrarDias o la la vista CitaAsignada: */ $matrizdatos [ 'id_us_cierre' ]= $id_us_cierre ; $matrizdatos [ 'sesion' ]= $cookies_sesion ; $matrizdatos [ 'comprueba_acceso' ]= "ok" ;
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo B
Mª del Carmen Rodríguez Segovia 97
$matrizdatos [ 'enlace_cancelar' ]= "no hay cita que cancelar" ; $matrizdatos [ 'tipocita' ]= $html ->find ( 'input[name=tipocita]' , 0)-> value ; $matrizdatos [ 'actividad_agenda' ]= $html ->find ( 'input[name=actividad_agenda]' , 0)-> value ; $matrizdatos [ 'modalidad_agenda' ]= $html ->find ( 'input[name=modalidad_agenda]' , 0)-> value ; $matrizdatos [ 'codigo_agenda' ]= $html ->find ( 'input[name=codigo_agenda]' , 0)-> value ; $matrizdatos [ 'codigo_profesional' ]= $html ->find ( 'input[name=codigo_profesional]' , 0)-> value ; $matrizdatos [ 'domicilio_usuario' ]= $html ->find ( 'input[name=domicilio_usuario]' , 0)-> value ; $matrizdatos [ 'nuss_usuario' ]= trim ( $html ->find ( 'input[name=nuss_usuario]' , 0)-> value ); $matrizdatos [ 'nombre_usuario' ]= trim ( $html ->find ( 'input[name=nombre_usuario]' , 0)-> value ); $matrizdatos [ 'telefonos_usuario' ]= $html ->find ( 'input[name=telefonos_usuario]' , 0)-> value ; $matrizdatos [ 'desplazado' ]= $html ->find ( 'input[name=desplazado]' , 0)-> value ; $matrizdatos [ 'tarea_desc' ]= $html ->find ( 'input[name=tarea_desc]' , 0)-> value ; $matrizdatos [ 'centro_desc' ]= $html ->find ( 'input[name=centro_desc]' , 0)-> value ; $matrizdatos [ 'centro_codigo' ]= $html ->find ( 'input[name=centro_codigo]' , 0)-> value ; $matrizdatos [ 'nombre_profesional' ]= $html ->find ( 'input[name=nombre_profesional]' , 0)-> value ; curl_close ( $curl3 ); //Cerramos sesion CURL $html -> clear (); //Eliminamos el objeto html para no malgastar memoria $json2 =json_encode ( $matrizdatos ); print ( utf8_encode ( $json2 )); print ( "SEPARADOR"); $json =json_encode ( $matrizdias ); print ( utf8_encode ( $json )); } } } //Hacemos la llamada a la función loginintersas $codigofuente3 = loginintersas ( 'ws003.juntadeandalucia.es/pls/intersas/servicios.l ocalizar_usuario' , 'Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv :1.8.1.1) Gecko/20061204 Firefox/2.0.0.1' ); ?>
seleccionarCita.php <?php //Incluimos la librería para parsear html include_once ( 'simple_html_dom.php' ); function selecciondecita ( $url , $agente ) { foreach ( $_POST as $nombre_campo => $valor ){ $asignacion = "$" . $nombre_campo . "='" . $valor . "';" ; eval ( $asignacion ); } $campospost ='tipocita=' . $tipo_cita . '&diacita=' . $diacita . '&actividad_agenda=' . $actividad_agenda . '&modalidad_agenda=' . $modalidad_agenda . '&codigo_agenda=' . $codigo_agenda . '&codigo_profesional=' . $codigo_profesional . '&domicilio_usuari
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo B
Mª del Carmen Rodríguez Segovia 98
o=' . $domicilio_usuario . '&nuss_usuario=' . $nuss_usuario . '&nombre_usuario=' . $nombre_usuario . '&telefonos_usuario=' . $telefonos_usuario . '&desplazado=' . $desplazado. '&tarea_desc=' . $tarea_desc . '¢ro_desc=' . $centro_desc . '¢ro_codigo=' . $centro_codigo . '&nombre_profesional=' . $nombre_profesional ; /************************************************** ********************/ $curl0 = curl_init (); //Nueva sesion CURL curl_setopt ( $curl0 , CURLOPT_URL, $url ); //Direccion de destino /* Establecemos el valor de las cookies en la nueva petición. Las cookies se han enviado desde el Widget de Cita Médi ca por POST. */ curl_setopt ( $curl0 , CURLOPT_COOKIE, $cookie_sesion ); // Para que el resultado de la petición se almacene en una cadena de texto: curl_setopt ( $curl0 , CURLOPT_RETURNTRANSFER, true ); curl_setopt ( $curl0 , CURLOPT_FOLLOWLOCATION, false ); curl_setopt ( $curl0 , CURLOPT_USERAGENT, $agente ); curl_setopt ( $curl0 , CURLOPT_HEADER, false ); curl_setopt ( $curl0 , CURLOPT_SSLVERSION, 3); //Especificamos la versión de SSL /* Para que curl compruebe que el certificado del s ervidor es válido (que verifique que la CA o Autoridad Certificadora que lo expidió está entre las CA reconocidas) se asigna el valor true a la op ción CURLOPT_SSL_VERIFYPEER. */ curl_setopt ( $curl0 , CURLOPT_SSL_VERIFYPEER, true ); /* Comprueba que el common name (CN) del certificad o de servidor se corresponde con el dominio al que nos estamos conec tando. */ curl_setopt ( $curl0 , CURLOPT_SSL_VERIFYHOST, 2); /* Con la siguiente opción le indicamos a cURL que confíe en los certificados de servidor firmados por una CA cuyo c ertificado raiz es FNMTClase2CA-FNMT.crt.Por otra parte getcwd() es un a función de php que devuelve el directorio actual.*/ curl_setopt ( $curl0 , CURLOPT_CAINFO, getcwd (). '/FNMTClase2CA-FNMT' ); curl_setopt ( $curl0 , CURLOPT_POST, true ); curl_setopt ( $curl0 , CURLOPT_POSTFIELDS, $campospost ); //Ejecutamos sesion CURL $codigofuente0 = curl_exec ( $curl0 ); // Hay que obtener una matriz y después un JSON con los días de cita disponibles . $html = new simple_html_dom (); $html -> load ( $codigofuente0 ); $numerohoras =0; $hora ="" ; for ( $i = 0 ; $i <= 66 ; $i ++) { $hora =$html -> find ( 'input[id=hora' . $i . ']' , 0)-> value ; if ( $hora != "" ){ $matrizhoras0 [ 'hora' . $numerohoras ][ 'value' ]= utf8_encode ( $html ->find ( 'input[id=hora' . $i . ']' , 0)-> value ); $matrizhoras0 [ 'hora' . $numerohoras ][ 'cadena' ]= utf8_encode ( $html ->find ( 'label[for=hora' . $i . ']' , 0)-> innertext ); $numerohoras =$numerohoras +1; } } $matrizdatos0 [ 'numerohoras' ]= $numerohoras ; $matrizdatos0 [ 'codigo_agenda' ]= utf8_encode ( $html ->find ( 'input[name=codigo_agenda]' , 0)-> value ); $matrizdatos0 [ 'modalidad_agenda' ]= utf8_encode ( $html ->find ( 'input[name=modalidad_agenda]' , 0)-> value );
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo B
Mª del Carmen Rodríguez Segovia 99
$matrizdatos0 [ 'actividad_agenda' ]= utf8_encode ( $html ->find ( 'input[name=actividad_agenda]' , 0)-> value ); $matrizdatos0 [ 'centro_ubicacion_agenda' ]= utf8_encode ( $html ->find ( 'input[name=centro_ubicacion_agenda]' , 0)-> value ); $matrizdatos0 [ 'codigo_tarea_agenda' ]= utf8_encode ( $html ->find ( 'input[name=codigo_tarea_agenda]' , 0)-> value ); $matrizdatos0 [ 'profesional_agenda' ]= utf8_encode ( $html ->find ( 'input[name=profesional_agenda]' , 0)-> value ); $matrizdatos0 [ 'modalidad_agenda_servicio' ]= utf8_encode ( $html ->find ( 'input[name=modalidad_agenda_servicio]' , 0)-> value ); $json =json_encode ( $matrizdatos0 ); print ( $json ); print ( "SEPARADOR"); if ( $numerohoras >0){ $json2 =json_encode ( $matrizhoras0 ); print ( $json2 ); } else { print ( "SIN CITAS" ); } print ( "SEPARADOR"); curl_close ( $curl0 ); //Cerramos sesion CURL $html -> clear (); } //Hacemos la llamada a la función selecciondecita() $codigofuente4 = selecciondecita ( 'ws003.juntadeandalucia.es/citaInternet/seleccion_d e_cita.jsp' , 'Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.1) Gec ko/20061204 Firefox/2.0.0.1' ); ?>
asignarCita.php <?php //Incluimos la librería para parsear html include_once ( 'simple_html_dom.php' ); function citaasignada ( $url , $agente ) { foreach ( $_POST as $nombre_campo => $valor ){ $asignacion = "$" . $nombre_campo . "='" . $valor . "';" ; eval ( $asignacion ); } $curl5 = curl_init (); //Nueva sesion CURL $campos = 'horacita=' . $horacita . '&codigo_agenda=' . $codigo_agenda . '&modalidad_agenda=' . $modalidad_agenda . '&actividad_agenda=' . $actividad_agenda . '¢ro_ubicacion_agenda=' . $centro_ubicacion_agenda . '&codigo_tarea_agenda=' . $codigo_tarea_agenda . '&profesional_agenda=' . $profesional_agenda . '&nombre_usuario=' . $nombre_usuario . '&domicilio_usuario=' . $domicilio_usuario . '&telefonos_usuario=' . $telefonos_usuario. '&nuss_usuario=' . $nuss_usuario . '&tarea_desc=' . $tarea_desc . '&modalidad_agenda_servicio=' . $modalidad_agenda_servicio ;
curl_setopt ( $curl5 , CURLOPT_URL, $url ); //Direccion de destino //Establecemos el valor de las cookies en la nueva petición. curl_setopt ( $curl5 , CURLOPT_COOKIE, $cookie_sesion ); curl_setopt ( $curl5 , CURLOPT_RETURNTRANSFER, true );
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo B
Mª del Carmen Rodríguez Segovia 100
curl_setopt ( $curl5 , CURLOPT_FOLLOWLOCATION, false ); curl_setopt ( $curl5 , CURLOPT_USERAGENT, $agente ); curl_setopt ( $curl5 , CURLOPT_HEADER, true ); //Se incluye el encabezado en la salida curl_setopt ( $curl5 , CURLOPT_SSLVERSION, 3); /* Para que se compruebe que el certificado del ser vidor es válido verificando que la CA (Autoridad Certificadora)que lo expidió está entre las CA reconocidas ponemos la opción CURLOPT_SSL_VERIFY PEER a true. */ curl_setopt ( $curl5 , CURLOPT_SSL_VERIFYPEER, true ); curl_setopt ( $curl5 , CURLOPT_SSL_VERIFYHOST, 2); // Para que la FNMT sea reconocida como autoridad c ertificadora: curl_setopt ( $curl5 , CURLOPT_CAINFO, getcwd (). '/FNMTClase2CA-FNMT' ); curl_setopt ( $curl5 , CURLOPT_POST, true ); curl_setopt ( $curl5 , CURLOPT_POSTFIELDS, $campos ); $codigofuente5 = curl_exec ( $curl5 ); //Ejecutamos sesion CURL $html = new simple_html_dom (); $html -> load ( $codigofuente5 ); /* Comprobamos que la sesión no ha caducado. Si hub iese caducado lo que obtenemos, en lugar de los datos de la cita, es un mensaje de sesión caducada: */ $comprueba_sesion =trim ( $html ->find ( 'span[class=letra_contenido_info]' , 0)-> innertext ); if ( utf8_encode ( $comprueba_sesion )== "En estos momentos no podemos ofrecerle este servicio a través de Inters@s." || utf8_encode ( $comprueba_sesion )== "Su tiempo de sesión ha caducado. Por favor, identifíquese de nuevo en InterS@S." ){ $json2 ='{"comprueba_sesion":"' . $comprueba_sesion . '"}' ; print ( utf8_encode ( $json2 )); } else { /* Hay que obtener una matriz y después un JSON con los datos que se mostrarán en la vista correspondiente (los datos de la cita). */ $matrizdatos [ 'comprueba_sesion' ]= "ok" ; $matrizdatos [ 'enlace_cancelar' ]= utf8_encode ( $html ->find ( 'a[class=enlace_cancelar_cita]' , 0)-> href ); $matrizdatos [ 'fecha_solicitud' ]= utf8_encode ( $html ->find ( 'span[class=letra_pequena_fecha]' , 0)-> innertext ); $matrizdatos [ 'fecha_cita' ]= utf8_encode ( $html ->find ( 'strong[class=letra_justificante_cita_negrita_big]' , 0)-> innertext ); $matrizdatos [ 'fecha_cita_cadena' ]= utf8_encode ( $html ->find ( 'span[class=letra_justificante_cita]' , 1)-> innertext ); $matrizdatos [ 'hora_cita' ]= utf8_encode ( $html ->find ( 'strong[class=letra_justificante_cita_negrita_big]' , 1)-> innertext ); $matrizdatos [ 'orden' ]= utf8_encode ( $html ->find ( 'strong[class=letra_justificante_cita_negrita_big]' , 2)-> innertext ); $matrizdatos [ 'centro' ]= utf8_encode ( $html ->find ( 'td[class=letra_justificante_cita_negrita]' , 0)-> innertext ); $matrizdatos [ 'direccion' ]= utf8_encode ( $html ->find ( 'td[class=letra_justificante_cita_negrita]' , 2)-> innertext ); $matrizdatos [ 'ubicacion' ]= utf8_encode ( trim ( html_entity_decode ( $html ->find ( 'td[class=letra_justificante_cita_negrita]' , 3)-> innertext ))); $matrizdatos [ 'profesional' ]= utf8_encode ( $html ->find ( 'td[class=letra_justificante_cita_negrita]' , 4)-> innertext ); $matrizdatos [ 'nombre_usuario' ]= trim ( utf8_encode ( html_entity_decode ( $html-> find ( 'span[class=letra_justificante_cita_negrita]' , 0)-> innertext ))); $matrizdatos [ 'nuss_usuario' ]= trim ( utf8_encode ( html_entity_decode ( $html ->find ( 'span[class=letra_justificante_cita_negrita]' , 1)-> innertext )));
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo B
Mª del Carmen Rodríguez Segovia 101
$matrizdatos [ 'fecha_solicitud' ]= trim ( utf8_encode ( html_entity_decode ( $html -> find ( 'span[class=letra_justificante_cita]' , 4)-> innertext ))); $json =json_encode ( $matrizdatos ); print ( $json ); } curl_close ( $curl5 ); //Cerramos sesion CURL $html -> clear (); } //Hacemos la llamada a la función citaasignada() $codigofuente5 = citaasignada ( 'ws003.juntadeandalucia.es/citaInternet/cita_asigna da.jsp' , 'Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.1) Gec ko/20061204 Firefox/2.0.0.1' ); ?>
cancelarCita.php <?php //Incluimos la librería para parsear html include_once ( 'simple_html_dom.php' ); //Esta funcion no tiene parametro de URL ya que la URL se genera dinamicamente, y necesitamos extraer el contenido d e los parametros pasados por POST. function cancelaciondecita ( $agente ) { foreach ( $_POST as $nombre_campo => $valor ){ $asignacion = "$" . $nombre_campo . "='" . $valor . "';" ; eval ( $asignacion ); } /************************************************** ********************/ $curl0 = curl_init (); //Nueva sesion CURL $enlace_cancelar_completo ="ws003.juntadeandalucia.es/citaInternet/cancelar_cita.jsp?id_cita_cambiar=&id_cita=" . urlencode ( $id_cita ). "&nombreJSPCambiarCita=" . urlencode ( $nombreJSPCambiarCita ). "&hora_inicio=" . urlencode ( $hora_inicio ). "&fecha=" . urlencode ( $fecha ). "&nombre_usuario=" . urlencode ( $nombre_usuario ); curl_setopt ( $curl0 , CURLOPT_URL, $enlace_cancelar_completo ); /* Establecemos el valor de las cookies en la nueva petición. Las cookies se han pasado por POST desde el widget con el nombre cookies_sesion y en el bucle for del inicio de la función se han gua rdado en la variable $cookies_sesion. */ curl_setopt ( $curl0 , CURLOPT_COOKIE, $cookies_sesion ); curl_setopt ( $curl0 , CURLOPT_RETURNTRANSFER, true ); curl_setopt ( $curl0 , CURLOPT_FOLLOWLOCATION, true ); curl_setopt ( $curl0 , CURLOPT_USERAGENT, $agente ); curl_setopt ( $curl0 , CURLOPT_HEADER, true ); //Oculta encabezado // Se especifica la versión de SSL del servidor de InterS@S: curl_setopt ( $curl0 , CURLOPT_SSLVERSION, 3); /* Con la siguiente opción se exige la comprobación del certificado del servidor para lo cual se verificará que la CA (Autoridad Certificadora) que lo expidió está entre las CA rec onocidas. */ curl_setopt ( $curl0 , CURLOPT_SSL_VERIFYPEER, true ); /* Se comprueba que el common name (CN) del certifi cado de servidor se corresponde con el dominio al que nos e stamos conectando. */ curl_setopt ( $curl0 , CURLOPT_SSL_VERIFYHOST, 2);
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo B
Mª del Carmen Rodríguez Segovia 102
/* En esta opción de cURL se especifica el certific ado raiz de la FNMT (CA que expide el certificado del servidor al que estamos intentando acceder vía https). Con esto le decimos a cURL que es una CA reconocida. El certificado se obtiene de exportándolo desde Firefo x como certificado X.509 con cadena (PEM). Es fundamental que esté en este f ormato para que sea compatible con Curl. Por otra parte getcwd() es una función de php que obtiene el directorio actual. */ curl_setopt ( $curl0 , CURLOPT_CAINFO, getcwd (). '/FNMTClase2CA-FNMT'); curl_setopt ( $curl0 , CURLOPT_POST, 0); //curl_setopt ($curl0, CURLOPT_POSTFIELDS, $campos) ; $codigofuente0 = curl_exec ( $curl0 ); //Ejecutamos sesion CURL curl_close ( $curl0 ); //Cerramos sesion CURL // Hay que obtener una matriz y después un JSON con los días de cita disponibles $html = new simple_html_dom (); $html -> load ( $codigofuente0 ); /* trim() elimina los espacios del inicio y del fin al de la cadena, utf8_encode() pasa la codificación de ISO-8 859-1 a utf8, html_entity_decode() convierte las entidades html q ue haya en la cadena (como í) a su correspondiente carácter (í en este caso): */ $matriz [ 'informacion' ]= trim ( utf8_encode ( html_entity_decode ( $html ->find ( 'span[class=letra_contenido_info]' , 0)-> innertext ))); /* Con la función json_encode() de PHP obtenermos u na cadena en formato json a partir de la matriz asociativa $matr iz */ $json =json_encode ( $matriz ); print ( utf8_encode ( $json )); $html -> clear (); } //Hacemos la llamada a la función selecciondecita() $codigofuente4 = cancelaciondecita ( 'Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.1) Gecko/20061204 F irefox/2.0.0.1' ); ?>
cerrarSesion.php <?php //Incluimos la librería para parsear html include_once ( 'simple_html_dom.php' ); function cerrarsesion ( $url , $agente ) { foreach ( $_POST as $nombre_campo => $valor ){ $asignacion = "$" . $nombre_campo . "='" . $valor . "';" ; eval ( $asignacion ); } $campospost ='id_us=' . $id_us ; /************************************************** ******************/ $curl0 = curl_init (); //Nueva sesion CURL curl_setopt ( $curl0 , CURLOPT_URL, $url ); //Direccion de destino /* Establecemos el valor de las cookies en la nueva petición. Las cookies se han enviado desde el Widget de Cita Médi ca por POST. */
Diseño y desarrollo de aplicación HbbTV para la solicitud de cita médica | Anexo B
Mª del Carmen Rodríguez Segovia 103
curl_setopt ( $curl0 , CURLOPT_COOKIE, $cookie_sesion ); // Para que el resultado de la petición se almacene en una cadena de texto: curl_setopt ( $curl0 , CURLOPT_RETURNTRANSFER, true ); curl_setopt ( $curl0 , CURLOPT_FOLLOWLOCATION, false ); curl_setopt ( $curl0 , CURLOPT_USERAGENT, $agente ); curl_setopt ( $curl0 , CURLOPT_HEADER, false ); curl_setopt ( $curl0 , CURLOPT_SSLVERSION, 3); //Especificamos la versión de ssl /* Para que curl compruebe que el certificado del s ervidor es válido (que verifique que la CA o Autoridad Certificadora que lo expidió está entre las CA reconocidas) se asigna el valor true a la op ción CURLOPT_SSL_VERIFYPEER. */ curl_setopt ( $curl0 , CURLOPT_SSL_VERIFYPEER, true ); /* Comprueba que el common name (CN) del certificad o de servidor se corresponde con el dominio al que nos estamos conec tando. */ curl_setopt ( $curl0 , CURLOPT_SSL_VERIFYHOST, 2); /* Con la siguiente opción le indicamos a cURL que confíe en los certificados de servidor firmados por una CA cuyo c ertificado raiz es FNMTClase2CA-FNMT.crt.Por otra parte getcwd() es un a función de php que devuelve el directorio actual.*/ curl_setopt ( $curl0 , CURLOPT_CAINFO, getcwd (). '/FNMTClase2CA-FNMT' ); curl_setopt ( $curl0 , CURLOPT_POST, true ); curl_setopt ( $curl0 , CURLOPT_POSTFIELDS, $campospost ); //Ejecutamos sesion CURL $codigofuente0 = curl_exec ( $curl0 ); // Hay que obtener una matriz y después un JSON con los días de cita disponibles $html = new simple_html_dom (); $html -> load ( $codigofuente0 ); curl_close ( $curl0 ); //Cerramos sesion CURL $html -> clear (); } //Hacemos la llamada a la función selecciondecita() $codigofuente4 = cerrarsesion ( 'ws003.juntadeandalucia.es/pls/intersas/servicios.l ocalizar_usuario' , 'Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv :1.8.1.1) Gecko/20061204 Firefox/2.0.0.1' ); ?>
Recommended