trabajo fin de gradobibing.us.es/proyectos/abreproy/90063/fichero... · trabajo fin de grado:...

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


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


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


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


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


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.



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.



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.



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



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



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.



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.



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.



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



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



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,



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



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:



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…



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:



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)



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)



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.



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.



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



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



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



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



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.



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) ,



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.



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);



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>



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).



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.



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.



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 …).



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,



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.



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)



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



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



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.



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



} 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



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++) {



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();



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:



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.



í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.



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



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.



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.



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.



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:



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/



[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


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>

<link rel ="stylesheet" type ="text/css" href ="estilos.css" /> </head> <body>  <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;



//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 :{



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);



//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++;



<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" )));



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...



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" );



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 *



* 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>" ; }



} } //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?" )){



//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+ '&centro_ubicacion_agenda=' +info_sesion2.centro_ubicacion_agenda+ '&centro_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); } //]]>



</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. */



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



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 />



<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>



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>" ; } }



//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" ); }



} //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.



} 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) {



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);



} /************************************************** *************************** * 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); }



/************************************************** *************************** * 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;



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.*/



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); }



} 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;



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; }



. 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


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.



$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 );



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 );



/* 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" ;



$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



o=' . $domicilio_usuario . '&nuss_usuario=' . $nuss_usuario . '&nombre_usuario=' . $nombre_usuario . '&telefonos_usuario=' . $telefonos_usuario . '&desplazado=' . $desplazado. '&tarea_desc=' . $tarea_desc . '&centro_desc=' . $centro_desc . '&centro_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 );



$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 . '&centro_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 );



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 )));



$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);



/* 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. */



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' ); ?>

trabajo fin de gradobibing.us.es/proyectos/abreproy/90063/fichero... · trabajo fin de grado:...

Documents