CONSTRUCCIÓN DE UN PROTOTIPO DE INTERFAZ GRÁFICA DE USUARIO PARA EL SERVICIO DE VIDEO BAJO DEMANDA

(1)

FACULTAD DE INGENIERÍA

ESCUELA DE INGENIERÍA VESPERTINA

CONSTRUCCIÓN DE UN PROTOTIPO DE INTERFAZ GRÁFICA DE USUARIO PARA EL SERVICIO DE VIDEO BAJO DEMANDA

MARCO ANTONIO ESTÉVEZ PERALTA DIYAR BAKIR VÁSQUEZ SILVA

Profesor Guía: LUIS ALBERTO GAETE MILLÁN

TESIS PARA OPTAR AL TÍTULO DE INGENIERO EN INFORMÁTICA Y GESTIÓN SANTIAGO - CHILE

JUNIO, 2014

(2)

i

FACULTAD DE INGENIERÍA

ESCUELA DE INGENIERÍA VESPERTINA

CONSTRUCCIÓN DE UN PROTOTIPO DE INTERFAZ GRÁFICA DE USUARIO PARA EL SERVICIO DE VIDEO BAJO DEMANDA

MARCO ANTONIO ESTÉVEZ PERALTA DIYAR BAKIR VÁSQUEZ SILVA

PROFESOR GUÍA : LUIS ALBERTO GAETE MILLÁN

PROFESOR INFORMANTE : RAÚL RIQUELME ROJAS

PROFESOR EXAMINADOR : JAIME PÉREZ-KALLENS LEYTON

TESIS PARA OPTAR AL TÍTULO DE INGENIERO EN INFORMÁTICA Y GESTIÓN

SANTIAGO - CHILE JUNIO, 2014

(3)

ii

DEDICATORIA

A nuestros maestros que en este andar por la vida, influyeron con sus lecciones y experiencias en formarnos como personas de bien y preparadas para los retos que pone la vida, a todos y cada uno de ellos les dedicamos cada una de estas páginas de nuestra tesis.

Afectuosamente para Tatanaz.

(4)

iii

AGRADECIMIENTOS

Agradecemos de forma especial a todas aquellas personas que contribuyeron en alguna medida el lograr cumplir una meta profesional muy importante de nuestras vidas.

A Dios, por darnos la oportunidad.

A nuestras mujeres, por su compresión y apoyo en cada momento de alegría, de encuentros y desencuentros vividos durante esta etapa de nuestras vidas.

Claudia y Melissa.

A mi Hija, por su compañía, alegría y amor incondicional.

Rebeca.

A nuestros Padres, por habernos entregado los valores y principios para enfrentar y superar los desafíos que se presentan en la vida.

Angélica, Rosa, Julio y Santiago.

A nuestro Profesor Guía, Sr. Luis Alberto Gaete Millán por su excelente disposición, apoyo y complicidad en nuestro proyecto de tesis.

A nuestros Profesores, por su entrega y disposición siempre cordial al transmitirnos sus experiencias para nuestro desarrollo en el mundo laboral.

A nuestros Compañeros y Amigos, por los momentos vividos durante todo el trayecto que compartimos en nuestra vida universitaria.

(5)

iv

ÍNDICE GENERAL

DEDICATORIA……….II AGRADECIMIENTOS………III ÍNDICE GENERAL...IV ÍNDICE DE FIGURAS ... VIII ÍNDICE DE GRÁFICOS ... X ÍNDICE DE TABLAS ... XI RESUMEN EJECUTIVO ... XII ABSTRACT ... XIII

CAPÍTULO I: INTRODUCCIÓN ... 1

1.1 Introducción... 1

1.2 Planteamiento del Problema ... 2

1.3 Objetivos ... 5

1.3.1 Objetivo General... 5

1.3.2 Objetivos Específicos ... 5

1.3.2.1 Objetivo de Obsolescencia ... 5

1.3.2.2 Objetivo de Rentabilidad ... 5

1.3.2.3 Objetivo de Costo de Oportunidad ... 5

1.4 Justificación... 6

1.4.1 Desarrollo Ágil ... 7

1.4.2 Usabilidad ... 8

1.4.3 Uniformidad ... 8

1.4.4 Escalabilidad ... 8

1.4.5 Disponibilidad ... 8

(6)

v

1.4.6 Fragmentación ... 9

1.5 Alcance y Limitaciones ... 9

CAPÍTULO II: MARCO TEORICO ... 11

2.1 Usabilidad ... 11

2.2 La Experiencia de Usuario ... 12

2.3 Diseño de la Interfaz Gráfica de Usuario ... 12

CAPÍTULO III: MARCO METODOLÓGICO ... 14

3.1 Programación Extrema ... 14

3.2 Normas Básicas de Usabilidad ... 15

3.3 Plataforma CloudTV H5 ... 16

CAPÍTULO IV: CONSTRUCCIÓN DEL PROTOTIPO DE GUI DE VOD ... 17

4.1 Fase I: Exploración ... 17

4.2 Fase Ii: Planificación de Entregas ... 18

4.3 Fase Iii: Iteraciones ... 19

4.3.1 Primera Iteración: Diseño de la Interfaz Gráfica de Usuario VOD ... 19

4.3.1.1 Análisis y Planificación ... 19

4.3.1.3 Implementación del Diseño ... 21

4.3.1.3l Diseño de la Maqueta del Prototipo ... 21

4.3.1.4 Pruebas ... 28

4.3.2 Segunda Iteración: Construcción de la Interfaz Gráfica de Usuario VOD ... 28

4.3.2.2 Diseño ... 30

(7)

vi

4.3.2.3 Implementación ... 31

4.3.2.4 Pruebas ... 43

4.3.3 Tercera Iteración: Navegabilidad de la Interfaz Gráfica de Usuario VOD ... 44

4.3.3.2 Diseño ... 45

4.3.3.3 Implementación ... 45

4.3.3.4 Pruebas ... 47

CAPÍTULO V: ANÁLISIS Y CONSIDERACIONES DE GESTIÓN ... 48

5.1 Análisis FODA: Interfaz Gráfica de Usuario con CloudTV H5 ... 48

5.2 Análisis de las 5 Fuerzas de Porter a GUI con CloudTV H5 ... 50

5.3 Análisis Financiero: El Caso VTR ... 52

5.3.1 Análisis de los Flujos de Caja ... 58

CAPÍTULO VI: CONCLUSIONES ... 59

REFERENCIAS BIBLIOGRÁFICAS ... 62

ANEXOS ... 63

Anexo I: Historia de la TV de Pago ... 64

Anexo II: La TV de Pago en Chile (Cable, Satelital e IPTV) ... 67

Anexo III: Video On Demand (VOD) ... 71

Anexo IV: La Interfaz Gráfica de Usuario de VTR en VOD ... 74

Anexo V: Historia de la Interfaz Gráfica de Usuario (GUI) ... 78

Anexo VI: Activevideo y la Plataforma CloudTV ... 83

(8)

vii

Anexo VII: Usabilidad ... 99

Anexo VIII: Casos de Estudio sobre Beneficios de la Usabilidad………..104

Anexo IX: Experiencia de Usuario………...106

Anexo X: Programación Extrema……….……114

Anexo Xi: Normas Básicas de Usabilidad……….125

(9)

viii

ÍNDICE DE FIGURAS

Pág.

Figura 1: La usabilidad como un atributo de la calidad del software. ... 11

Figura 2: Esquema general de una metodología ágil para desarrollo de software. ... 15

Figura 3: Pencil Software de Diseño de GUI. ... 21

Figura 4: Maqueta de la pantalla de inicio, prototipo GUI VOD. ... 22

Figura 5: Maqueta de la ventana emergente Descripción de Pelicula, prototipo GUI VOD. ... 23

Figura 6: Maqueta de la ventana emergente Descripción de Pelicula Extendida, prototipo GUI VOD. ... 24

Figura 7: Maqueta de la ventana emergente Visualización de Película, prototipo GUI VOD. . 25

Figura 8: Maqueta de la ventana emergente Bloqueo de Caratulas en Categoria Adultos, prototipo GUI VOD. ... 26

Figura 9: Maqueta de la ventana emergente Salida y Mensaje Publicitario, prototipo GUI VOD. ... 27

Figura 10: Diagrama de Caso de Uso, prototipo GUI VOD. ... 30

Figura 11: Resumen de las seis pantallas del prototipo de interfaz gráfica de usuario VOD .. 32

Figura 12: Pantalla de Inicio, prototipo GUI VOD. ... 33

Figura 13: Pantalla de Inicio, prototipo GUI VOD. ... 35

Figura 14: Ventana Emergente 1 – Descripción de Película, prototipo GUI VOD. ... 37

Figura 15: Ventana Emergente 2 – Descripción de Película Extendida, prototipo GUI VOD. . 38

Figura 16: Ventana Emergente 3 – Visualización de Película, prototipo GUI VOD. ... 39

Figura 17: Ventana Emergente 4 – Bloqueo de Caratulas de Categoria Adultos, prototipo GUI VOD. ... 40

Figura 18: Ventana Emergente 5 – Salida y Mensaje Publicitario VOD, prototipo GUI VOD.. 43

(10)

ix

Figura 19: Emulador de STB CloudTV H5 CloudTV Player. ... 44

Figura 20: Pantalla de Inicio, selección de categoría. ... 45

Figura 21: Pantalla de Inicio, preselección de película. ... 46

Figura 22: Ventana Emergente 1 – Descripción de Película, prototipo GUI VOD. ... 47

Figura 23: Componentes de una red HFC para prestar el servicio de VOD. ... 72

Figura 24: Categorias GUI VOD VTR. ... 75

Figura 25: Información de las peliculas en la GUI VOD VTR. ... 76

Figura 26: Visualización de Pelicula en GUI VOD VTR. ... 77

Figura 27: Arquitectura CloudTV H5 de AVN (ActiveVideo Networks). ... 85

Figura 28: Reproductor de previsualización de aplicaciones CloudTV Player. ... 90

Figura 29: Software WinSCP FTP utilizado para acceder a la cuenta FTP del Sandbox. ... 91

Figura 30: Descripción de ruta y puerto de acceso al servidor de aplicaciones Sandbox. ... 92

Figura 31: Plantilla recomendada por ActiveVideo. ... 93

. ... 101

Figura 33: Aspectos de usabilidad. ... 101

Figura 34: Elementos de la experiencia de usuario. ... 109

Figura 35: Panel de Morville que muestra las facetas de la Experiencia de Usuario. ... 111

Figura 36: Roles que intervienen en la Experiencia de cualidades del Panel de Morville. ... 113

(11)

x

ÍNDICE DE GRÁFICOS

Pág.

Gráfico 1: Flujo de Caja de Servicio VOD con CloudTV H5.………. 57 Gráfico 2: Suscriptores de TV de Pago Junio de 2013………... 70

(12)

xi

ÍNDICE DE TABLAS

Pág.

T 1 C P t t p I t z VO ……… 30

Tabla 2: Características t t z ……… 31

T A p m p C t VO ………... 53

T 4 C t STB……….. 54

T 5 R C t STB v P t m C TV H5………...….. 54

Tabla 6: Flujo de Caja de S v VO ( t m t )………. 55

Tabla 7: Flujo de Caja de Servicio VOD con Clou TV H5……… 56

Tabla 8 T p TV P Ch ………... 69

(13)

xii

RESUMEN EJECUTIVO

La Televisión de Pago se encuentra evolucionando hacia la Televisión Interactiva, por lo tanto debe adoptar herramientas que le son indispensables para facilitar la administración de aplicaciones, contenidos e interactividad con el cliente. Con ello se pretende dar un mejor servicio a los clientes, sólo logrando su cometido en la medida que dichas aplicaciones sean fáciles e intuitivas de usar, logrando a la vez una mayor celeridad y rapidez en los procesos de mantenimiento de dichas aplicaciones, lo cual redunda en mayor confiabilidad en la ejecución de las tareas que día a día efectúan los clientes.

Durante el año 2006 en Chile se implemento el servicio de VOD (video bajo demanda) por parte del Operador de TV-Cable VTR, luego la gran mayoría de la industria ha adoptado esta tecnología. Hoy VOD se presenta como el ambiente ideal para experimentar en el desarrollo de la Televisión Interactiva, ya que su dimensión al interior de la empresa es de menor impacto operativo en cuanto a la implementación de nuevas tecnologías y también por ser el servicio que presenta la mayor posibilidad de recuperar la inversión en un mediano plazo.

El presente trabajo de tesis consiste en la construcción de un prototipo de interfaz gráfica de usuario para el servicio VOD bajo la plataforma CloudTV H5 de ActiveVideo Network, para el análisis financiero se presentará como ejemplo el caso del Operador de TV-Cable VTR debido a su mayor participación de mercado, lo cual permite demostrar con mayor claridad en los análisis el impacto que tendría la implementación de esta tecnología en el desarrollo de la Televisión Interactiva. El prototipo de la GUI (graphics user interface) de VOD debe enfrentar varios desafíos, estos son, implementar normas de usabilidad que permita facilitar el uso del servicio, desarrollar una GUI que se visualice adecuadamente sobre la capacidad instalada existente, entregar una experiencia de usuario estándar frente a la fragmentación de dispositivos disponibles (STB, sintonizador de TV-Cable). Además de permitir la posibilidad de desarrollar dicha plataforma en Chile entregando la flexibilidad que los Operadores de TV-Cable necesitan para implementar la Televisión Interactiva.

Por último, la evaluación del proyecto entrega resultados alentadores en cuanto a su rentabilidad, quedando clara la gran la potencialidad de desarrollar la Televisión Interactiva en la plataforma CloudTV H5.

(14)

xiii ABSTRACT

The Pay Television is evolving into the Interactive Television, therefore must adopt tools that are necessary to facilitate the administration of applications, content and interactivity with the customer. This is to provide better service to customers, working as intended only to the extent that such applications are easy and intuitive to use, while achieving greater speed and quickness in the process of maintenance of these applications, resulting greater reliability in the execution of the tasks performed daily customers.

In 2006 in Chile service VOD (video on demand) by the TV-Cable operator VTR, then the vast majority of the industry has adopted this technology. Today VOD is presented as the ideal place to experience in the development of the Interactive Television, since its dimension into the company operational impact is minor in terms of the implementation of new technologies and also as room service that has the greatest ability to recover the investment in the medium term.

This thesis consists of the construction of a prototype graphical user interface for VOD service under the CloudTV H5 platform ActiveVideo Network, for financial analysis case Attendant TV-Cable VTR be presented due to their increased participation market, which can prove more clearly analyzes the impact that the implementation of this technology in the development of the Interactive Television. The prototype of the GUI (graphics user interface) VOD must face several challenges, these are, implement usability standards which will facilitate the use of the service, to develop a GUI that is displayed properly on the existing installed capacity, delivering a user experience standard against fragmentation of available devices (STB, Cable TV-Tuner ). In addition to allowing the possibility of developing such a platform in Chile providing the flexibility that TV-Cable Operators need to implement the Interactive Television .

Finally, the evaluation of the project delivers encouraging results in terms of profitability, it being understood along with the great potentiality of developing the Interactive Television in CloudTV H5 platform.

(15)

CAPÍTULO I INTRODUCCIÓN

1.1 Introducción

La historia de la interfaz gráfica de usuario ha evolucionado por dos factores: la investigación y el negocio. Su origen se remonta a la búsqueda de un método interactivo y amigable de acceder a los servicios y beneficios que presta un computador, permitiendo superar la interfaz de línea de comandos. El descubrimiento de dicha interfaz ha traído consigo muchos beneficios para aquellas empresas que han actuado astutamente aprovechando y explotando los hallazgos de ésta.

El ingreso del concepto de Televisión Interactiva¹ en el mercado de TV de Pago² en Chile³, se tradujo en una mayor competitividad, obligando a los operadores de TV-Cable a asumir el desafío de mejorar la experiencia de usuario así como la visualización del contenido de ésta, cabe mencionar que si bien el usuario va a medir su satisfacción por el contenido ofrecido, más que por la capacidad interactiva o su facilidad de uso, debemos recordar que ambos son factores diferenciadores determinantes. Esto conlleva a que actualmente los operadores de TV-Cable se ven ante la necesidad de disponer de una plataforma tecnológica que soporte el desarrollo de la interfaz de usuario y sus respectivas aplicaciones por parte del operador de TV-Cable o terceros, acelerando de esta forma la innovación e implementación de servicios, creando nuevas características, mejorando la experiencia de usuario y la lealtad de los suscriptores, entregándoles una experiencia de TV más avanzada e interactiva.

También, se debe tener en consideración que las decisiones que se tomen a este respecto repercuten directamente en la capacidad instalada de los operadores de

1 La televisión interactiva representa la adaptación de este medio de comunicación a un entorno en el cual el telespectador reclama mayor protagonismo y nuevos servicios que se adapten a sus preferencias. Uno de sus objetivos es abrir una nueva puerta de entrada a la información en los hogares.

2 Para mayor información leer Anexo I.

3 Para mayor información leer Anexo II.

(16)

TV-Cable siendo la más relevante los decodificadores (en adelante STB, del inglés Set Top Box), por ello para salvar esta situación se debe avanzar en tecnologías que permitan cumplir las necesidades de los usuarios y que brinden beneficios sobre la capacidad instalada actual de los operadores de TV-Cable.

La tesis que se presenta a continuación trata sobre la construcción de un prototipo de interfaz gráfica de usuario para el servicio VOD⁴ (video bajo demanda), bajo una plataforma tecnológica que se presenta como alternativa a los operadores de TV-Cable (CATV), para la construcción de aplicaciones en un periodo y costo razonable.

1.2 Planteamiento del Problema⁵

Con el auge de los smartphones modernos y tablets (por ejemplo iPad), los consumidores pueden buscar, navegar y ver contenido de vídeo a través de interfaces de usuario basadas en web. Mientras tanto, aquella pantalla que es la pieza central en la cual la mayoría de los consumidores ven videos, esta es, la familia de las pantallas de TV, parece estar atrapada en un túnel del tiempo.

Los operadores de TV-Cable tienen un contenido muy valioso que ofrecer a sus suscriptores hoy más que nunca, pero están presentando ese contenido a través de un Set Top Box (STB, sintonizador de TV-Cable) con una interfaz de usuario que se siente cada vez más obsoleta. Y no es sólo en su apariencia, su funcionalidad también se está quedando atrás. Los consumidores quieren una búsqueda simple, universal y contenidos útiles como las recomendaciones, ellos quieren una experiencia más intuitiva. Estas capacidades no sólo harán que los suscriptores estén felices y más leales, sino que también van a generar nuevos ingresos mediante la conexión más rápida con los contenidos y servicios monetizables.

4 Para mayor información leer Anexo III.

5 Para mayor información leer Anexo IV.

(17)

En la práctica los procesos de implementación de la Televisión Interactiva comienzan siempre por tomar servicios que no son el núcleo del negocio de la TV de Pago y que permiten un rápido incremento en los ingresos del operador de TV-Cable con el menor impacto sobre la infraestructura instalada, por lo tanto, el servicio elegido es VOD (video bajo demanda, que consiste en un servicio que ofrece un catálogo de películas en arriendo a través del STB). La gran cantidad de información disponible en VOD, junto con las distintas características de los usuarios que acceden a dicha información, como la gran competencia existente en el mercado, hacen crítico que el desarrollo de la interfaz gráfica de usuario para VOD deba contemplar no solo aspectos de funcionalidad sino también de usabilidad, tomando en cuenta que estas aplicaciones no solo deben tener como objetivo poner a disposición de los usuarios información exacta, sino orientar adecuadamente al usuario en su búsqueda, adecuando los caminos más apropiados para cada usuario de acuerdo con sus objetivos, sus conocimientos previos o sus necesidades y perfiles, de esta forma se lograría incrementar el número de transacciones del sistema VOD (arriendo de películas), lo cual implicaría un aumento en los ingresos a través del servicio.

La usabilidad en este contexto, se enmarca en una pregunta sobre si una interfaz de usuario es lo suficientemente buena para satisfacer las necesidades y requerimientos del usuario. Es decir, la usabilidad corresponde a una variable en el marco de la aceptación práctica de la interfaz gráfica de usuario. A , para que una interfaz gráfica de usuario pueda ser utilizada para alcanzar alguna tarea, tiene que cumplir con criterios de utilización (es decir referido a la funcionalidad: puede hacer lo que se necesita) y usabilidad (cuán bien los usuarios pueden usar esa funcionalidad de la GUI). La usabilidad considera todos los aspectos de una GUI (del inglés, Graphical User Interface) con el que el usuario puede interactuar y sus principales criterios de evaluación (operabilidad, comunicación contenido, etcétera.). Por ejemplo, la GUI debe cumplir una funcionalidad de presentar determinado tipo de contenido, pero este contenido debe ser presentado de una manera atractiva y sencilla al usuario y que además el aprendizaje de su uso y navegación sea intuitiva y fácil, para llevar a

(18)

cabo un proceso de acceso a su contenido de forma rápida y eficaz. Actualmente, la visualización de la actual interfaz de usuario de VOD es deslucida, pobre en detalles sobre el contenido que ofrece, poco llamativa, no muestra su contenido de forma atractiva para su consumo por parte del cliente (quien paga por acceder a ese contenido), además de estar enfocada solo en su funcionalidad y sin tomar en cuenta su usabilidad.

A lo anterior, se suma que los proveedores de la interfaz de usuario de VOD no prestan el servicio de personalización de la interfaz, lo cual, impide incorporar la imagen corporativa del operador de TV-Cable, ni permite que se pueda desarrollar una interfaz de usuario por terceros para que corra sobre sus plataformas, limitando cualquier iniciativa del área comercial de la compañía respecto de la interfaz de usuario, ya que solo atiende a su funcionalidad que es la de soportar el arriendo de películas a través del STB. De la misma forma limita la posibilidad de desarrollar aplicaciones o modificaciones a la interfaz de usuario de VOD que permitan brindar un mayor soporte y características a los clientes.

Otro punto es la lentitud en la innovación que provoca la fragmentación, esto es, los variados modelos de decodificadores (STB) los cuales tienen distintas capacidades de hardware, por lo tanto, con diferentes capacidades para soportar los requerimientos de hardware de las aplicaciones que se necesitan implementar.

Mientras la competencia presenta productos sustitutos de VOD operando en escalas de tiempo de días, tales como los servicios OTT como Netflix⁶, en su contraparte los operadores de TV-Cable que despliegan experiencias de video de última generación necesitan varios meses o incluso años. Además, se debe tener presente la fractura de la experiencia del usuario, dado que los operadores se basan en diferentes entornos para apoyar cada plataforma diferente (VOD, guía programática, otras aplicaciones), por lo tanto se hace más difícil crear una experiencia consistente y de marca para los suscriptores a través de todos los dispositivos administrados (STB).

6 Netflix es una empresa comercial de entretenimiento que vende streaming de películas y series de televisión a cambio de una cuota de suscripción mensual.

(19)

1.3 Objetivos

1.3.1 Objetivo General

Construir un prototipo de interfaz grafica de usuario para el servicio VOD, en HTML5, CSS3 y Javascript bajo la plataforma CloudTV H5 de la compañía ActiveVideo.

1.3.2 Objetivos Específicos

1.3.2.1 Objetivo de Obsolescencia

Presentar una interfaz gráfica de usuario que funcione en los STB que carecen de suficiente poder de CPU y memoria para interfaces de usuario avanzadas. Logrando una GUI atractiva y a su vez aumentando el periodo de vida útil, retrasando su obsolescencia (manteniendo la capacidad instalada) y evitando reinvertir en nuevos y costosos STB.

1.3.2.2 Objetivo de Rentabilidad

Verificar que se cumpla con las exigencias de rentabilidad de los inversionistas (tasa del 30% de retorno a la inversión) en el servicio VOD (arriendo de películas) al efectuar el análisis financiero de la implementación de la plataforma CloudTV H5 de ActiveVideo.

1.3.2.3 Objetivo de Costo de Oportunidad

Determinar la conveniencia de la implementación de la plataforma CloudTV H5 en el ámbito de la interfaz gráfica de usuario del servicio VOD para los Operadores de TV-Cable.

(20)

1.4 Justificación

En la actualidad el mercado de TV de Pago se encuentra en un periodo de implementación de la Televisión Interactiva, la cual consiste en que el televidente pasa a ser un actor activo capaz de escoger aquello que realmente le interesa y beneficiarse de los nuevos servicios ofrecidos a través de las aplicaciones que visualiza a través del televisor, actuando el control remoto como dispositivo de entrada.

La televisión por cable tradicional (el estándar CATV) en Chile está sufriendo una fuerte competencia por parte de aquellos competidores que se encuentran implementación la Televisión Interactiva en diferentes niveles de profundidad, por lo tanto, se presenta un escenario de sustitución tecnología en mercados de redes.

En este escenario debido a que el estándar instalado (CATV) tiene una participación de mercado muy elevada, el nuevo estándar Televisión Interactiva se concentra en incrementar su participación de mercado en lugar de mejorar su tecnología, facilitando con esta estrategia de forma considerable la sustitución. Dicho esto, debemos tener presente que esta es una carrera de largo aliento y que debido a la convergencia de tecnologías (Internet y Televisión) sabemos que a mediano o largo plazo se impondrá con diferentes niveles de profundización el nuevo estándar de Televisión Interactiva, entonces para enfrentar esta situación se propone avanzar en plataformas tecnológicas que permitan entregar a los usuario los beneficios más visibles de la Televisión Interactiva, que son una interfaz de usuario moderna junto a sus aplicaciones interactivas que presentan características de mayor utilidad y usabilidad que sus predecesoras que solo se enfocan en la funcionalidad, de esta forma se da inicio a la transición al nuevo estándar, por lo tanto, esto significa que en el mediano o largo plazo los proveedores de TV de Pago pasarán de la Televisión de Pago Tradicional (solo contenido, con aplicaciones básicas y funcionales) al nuevo estándar de la Televisión Interactiva, para así evitar perder su participación de mercado y sobre la misma intentar incrementarlo.

(21)

Cabe destacar que al enfrentar este proceso de sustitución tecnológica en un mercado de redes como el de la TV de Pago, se busca mantener y aumentar la participación de mercado, a través de un proceso de transición a una plataforma tecnológica que permita desarrollar y que conduzca a la Televisión Interactiva. Todo lo anterior siempre siendo llevado a cabo en un plazo y costo razonable.

Ahora, para efectuar la transición a la Televisión Interactiva los proveedores de TV de Pago suelen experimentar con un servicio que permita un bajo impacto sobre la infraestructura instalada a través de la mejora de la aplicación (funcionalidad) y de su interfaz gráfica de usuario (usabilidad y utilidad).

El servicio VOD es por definición el más apto para hacer pruebas e implementar nuevas tecnologías, ya que entrega una pronta retroalimentación con respecto a que si se está yendo en el camino correcto, al registrar un rápido incremento de los ingresos del operador de TV-Cable por el concepto de arriendo de películas, en respuesta a la implementación de la aplicación de VOD bajo el modelo de Televisión Interactiva.

Los beneficios de abordar una plataforma que permita el desarrollo del modelo de Televisión Interactiva por parte del Operador de TV-Cable permite los siguientes avances en la TV de Pago:

1.4.1 Desarrollo Ágil

Desarrollar en forma ágil las aplicaciones e interfaces graficas de usuario, que el desarrollo de prototipos de interfaz gráfica de usuario no supere los tres meses y que su diseño y/o codificación pueda ser llevado a cabo por el operador de TV-Cable o un tercero que este disponga e implementarlas en cualquier STB digital en una fracción del tiempo que, históricamente, ha sido necesario para nuevas aplicaciones y servicios.

(22)

1.4.2 Usabilidad⁷

Diseñar interfaces de usuario de acuerdo a las normas de la usabilidad que puedan ser aplicadas en la plataforma.

1.4.3 Uniformidad

Uniformar el aspecto de la interfaz gráfica de usuario, para ello se debe separar la presentación respecto del contenido, esto es, por ejemplo que un texto, titulo, botón, el color de fondo y contorno de una ventana, etcétera, sea modificable su presentación de forma independiente de su contenido.

La uniformidad permite que exista una consistencia de la interfaz grafica de usuario (un orden visual coherente en la totalidad de la interfaz gráfica de usuario, así como en sus patrones de navegación).

1.4.4 Escalabilidad

Escalar a nuevos servicios de manera eficiente, esto es, debe soportar una oferta de servicios con una experiencia de usuario avanzada con un impacto mínimo en la red, reduciendo la cantidad total de ancho de banda requerido en la red.

1.4.5 Disponibilidad

Ampliar la disponibilidad de los servicios de vídeo a la carta utilizando receptores digitales existen tes de los clientes.

7 Para mayor información leer Anexo XI.

(23)

1.4.6 Fragmentación

Entregar la interfaz de usuario consistente a través de ecosistema de dispositivos fragmentado, incluyendo diferentes marcas y modelos.

Al solucionar el problema de la fragmentación se logran ahorros significativos al utilizar la capacidad instalada actual al no tener la necesidad de renovar el parque de STB existentes.

1.5 Alcance y Limitaciones

La construcción del prototipo de interfaz gráfica de usuario para el servicio de VOD se hace bajo el supuesto de que se está desarrollando para el operador de TV-Cable VTR (CATV), esta decisión se debe a dos motivos, el primero es que de esta forma se diseña la GUI con una marca reconocida ampliamente en el mercado entregándole un rostro y apellido a la interfaz de usuario para efectos visuales de la misma, el segundo motivo es que se utilizará como ejemplo el caso de VTR para los análisis financieros de flujos de caja que permitan determinar la conveniencia de costo de oportunidad, así como de rentabilidad del proyecto, ya que tiene la mayor participación en la cuota de mercado que en Junio de 2013 fue de un 41,2% (fuente Subtel), por lo tanto, los resultados de las estimaciones que se harán para determinar los costos asociados al desarrollo de la Televisión Interactiva se vuelven más claros de interpretar.

La interfaz de usuario del servicio VOD se diseña bajo los requerimientos de un Operador de TV-Cable para determinar el tiempo de desarrollo de un prototipo que debe ser implementado en una plataforma que permita el desarrollo de aplicaciones en HTML5, CSS3 y Javascript, compatible con su actual capacidad instalada, permitiendo mantener su parque actual de decodificadores (STB).

(24)

Como metodología de desarrollo de software se utiliza la programación extrema, de la cual no se llevan a cabo tres fases, estas son, la fase de producción, mantenimiento y muerte del proyecto, ya que al tratarse de un prototipo no se aplican.

En el desarrollo y pruebas del prototipo se utilizan las herramientas Notepad++

(editor de texto), Wamp (servidor de páginas web local), Windows 7, Google Chrome, ActiveVideo Javascript Framework, CloudTV Player (para pruebas del prototipo, simula un televisor con STB y el control remoto del STB) y WinSCP FTP (cliente FTP).

(25)

CAPÍTULO II MARCO TEORICO

En el capítulo 2, se define el marco teórico, el cual la constituyen tres puntos relevantes y sus respectivas definiciones para entender este análisis. Estos puntos son: Usabilidad, Experiencia de Usuario y Diseño de la Interfaz Gráfica de Usuario.

2.1 Usabilidad⁸

El concepto de la usabilidad es algo que se debe tener muy en cuenta a la hora de comenzar el desarrollo de un proyecto, la usabilidad permite mejorar la interacción con el usuario, y eso ya es un elemento que hoy en día se hace indispensable. La usabilidad es un atributo que al ser implementada en un diseño de interfaz de usuario permite mejorar la eficacia, eficiencia y satisfacción de las necesidades del usuario.

A continuación en la figura nº 1 se visualizan los atributos de la calidad del software, donde la Usabilidad es parte de ella.

Figura 1: La usabilidad como un atributo de la calidad del software.

Fuente: ISO/IEC 9126

8 Para mayor información leer Anexo VII.

(26)

2.2 La Experiencia de Usuario⁹

Desde hace algunos años, se comenzó a hablar del término Experiencia de Usuario, el cual ha venido ganando mayor popularidad en el medio del profesional TI, dicho término se acuño en un intento de superar las limitaciones que tiene la usabilidad, un ámbito que no contempla con precisión el comportamiento emocional de los usuarios.

El concepto de Experiencia de Usuario (User eXperience, UX, en inglés) surge como una solución de diseño más integradora e inclusiva (Hassan, 2005) y un nuevo enfoque para el desarrollo de productos interactivos.

El objetivo del concepto de Experiencia de Usuario es representar un cambio emergente del propio concepto de usabilidad, la Experiencia de Usuario da un paso más de la optimización en el rendimiento respecto del usuario y la interacción (eficacia, eficiencia y facilidad de aprendizaje), se ocupa de la solución del problema estratégico de la utilidad del producto y el problema psicológico del placer y la diversión de su uso (D'Hertefelt, 2000).

2.3 Diseño de la Interfaz Gráfica de Usuario¹⁰

En el ámbito web el diseño de la interfaz de usuario es el diseño de sitios web enfocados en la experiencia de usuario e interacción.

La interfaz de usuario tiene un rol fundamental, ya que es el artefacto a través del cual el usuario recupera, consulta e interactúa con la información y contenidos. El diseño de interfaz involucra las disciplinas y conceptos propios del diseño, y los dirige a proporcionar al usuario interfaces útiles y atractivas

9 Para mayor información leer Anexo IX.

10 Para mayor información leer Anexo IV y V.

(27)

El diseñador de la interfaz de usuario debe comprender los conceptos propios de la usabilidad, los estándares y la accesibilidad para hacer de la interfaz de usuario un elemento que ayude al usuario y lo conduzca hacia lo que necesita.

Un buen diseño de interfaz de usuario debe incorporar con precisión las necesidades de los usuarios, y hacer del diseño un elemento que aporte a la experiencia de usuario y el cumplimiento de sus objetivos.

(28)

CAPÍTULO III MARCO METODOLÓGICO

Para efectuar el desarrollo e implementación del prototipo de interfaz gráfica de usuario de VOD se utiliza la metodología ágil de Programación Extrema (Extreme Programing, XP) en conjunto con la aplicación de normas básicas de usabilidad todo ello sobre la plataforma CloudTV H5.

3.1 Programación Extrema¹¹

La Programación Extrema o eXtreme Programing (de aquí en adelante se le llamará XP) es una de las llamadas metodologías ágiles y fue formulada por el ingeniero de software estadounidense Kent Beck.

Ésta metodología ágil fue seleccionado porque presenta características que se ajustan al proyecto, tales como adaptabilidad a los cambios de requerimientos realizados por el cliente, la simplicidad en el código, la reutilización del mismo, la retroalimentación con los usuarios para adecuar el producto en cualquier fase del desarrollo del proyecto, se adapta bien a proyectos de desarrollo de software de corta duración.

La Programación Extrema es una metodología ágil que se enmarca en el área de la ingeniería de software basado en el desarrollo iterativo e incremental, de esta forma la evolución de los requisitos y soluciones están dados por la colaboración de un grupo organizado y multidisciplinario.

El método XP se define como adecuado para proyectos con requisitos imprecisos y muy cambiantes, donde existe un alto riesgo técnico, por ello pone más énfasis en la adaptabilidad que en la previsibilidad. Los principios y prácticas son de sentido común pero llevadas al extremo, de ahí su nombre.

11 Para mayor información leer Anexo X.

(29)

Esta metodología se basa en una continua retroalimentación entre el equipo de desarrollo y el cliente, una fluida comunicación entre los integrantes del proyecto (incluye al cliente), la simplicidad en las soluciones entregadas y el valor para enfrentar los cambios.

A continuación en la figura nº 2 se diagrama el esquema de las metodologías agiles.

Figura 2: Esquema general de una metodología ágil para desarrollo de software.

Fuente: Wikipedia.

3.2 Normas Básicas de Usabilidad¹²

Ante la gran cantidad de contenidos que se les ofrecen y a los que tiene acceso actualmente un usuario, obliga a velar cada vez más por el binomio inmediatez-utilidad para ser más efectivos y provocar en él una satisfacción plena.

12 Para mayor información leer Anexo XI.

(30)

Primero la experiencia práctica por la fácil consecución de t v p m ( p ) t t t m t t v t íntimamente ligada con la percepción durante el proceso de interacción con la interfaz de usuario. Para ello existen una serie de normas básicas de usabilidad que se utilizarán en el diseño y construcción de la interfaz gráfica de usuario para que presente un aspecto cuidado a nivel formal, organizativo, visual y de contenidos.

3.3 Plataforma CloudTV H5¹³

El motivo de utilizar la plataforma CloudTV H5 de ActiveVideo se debe a que cumple con características y requerimientos que la convierten en una plataforma adecuada para la construcción de un prototipo de interfaz gráfica de usuario para VOD, logrando cumplir con las necesidades de uniformidad, usabilidad, agilidad en diseño e implementación, escalabilidad, disponibilidad y soluciona el problema del ecosistema de dispositivos fragmentados (diferentes modelos de STB) bajo una única GUI.

13 Para mayor información leer Anexo VI.

(31)

CAPÍTULO IV CONSTRUCCIÓN DEL PROTOTIPO DE GUI DE VOD

En el presente capítulo se presenta la descripción de los distintos pasos seguidos durante el desarrollo de la construcción del prototipo de interfaz gráfica de usuario para el servicio VOD.

La metodología ágil utilizada fue Programación Extrema debido a que presenta características que se ajustan a las necesidades de la construcción del prototipo de interfaz de gráfica de usuario, destacándose su adaptabilidad a los cambios de requerimientos de los usuarios, la simplicidad del código y la retroalimentación continua con los usuarios.

Ahora, solo se abarcaron las primeras tres fases de la metodología XP, ya que solo se trata de un prototipo que no pasará a producción, utilizándose como medio de análisis para plantear a la plataforma CloudTV H5 de ActiveVideo como una alternativa que permite dar solución al desafío de la televisión interactiva cubriendo las dificultades que se enuncian en los objetivos específicos de la Tesis.

Es necesario destacar que las iteraciones de la metodología comienzan a partir del diseño, luego la construcción y finaliza con la implementación de la navegabilidad de la interfaz gráfica de usuario, por lo tanto se realizaron tres iteraciones que son las necesarias para la construcción del prototipo de interfaz gráfica de usuario.

4.1 Fase I: Exploración

Esta fase duro una semana, durante la cual se efectuaron reuniones con el equipo de trabajo para la familiarización con el entorno y la definición de los requerimientos de la interfaz gráfica de usuario VOD, luego se realizaron reuniones con el cliente y los miembros del equipo del proyecto para efectuar el levantamiento de información sobre los procesos que intervienen en el proyecto.

(32)

A partir de estas reuniones se recopilaron los requerimientos generales del proyecto y las historias de usuario a desarrollar.

4.2 Fase II: Planificación de Entregas

Basado en las historias de usuario recopiladas durante las reuniones realizadas en la fase de exploración, se realizó la identificación de la prioridad de cada uno de las etapas que componen la interfaz de usuario VOD.

A partir de lo expresado por los usuarios, se creó un plan de proyecto que refleja la prioridad de cada etapa y el orden del desarrollo de cada uno de sus componentes.

Cada componente identificado corresponde a una iteración en la metodología de desarrollo.

Se acordó que al finalizar el desarrollo de cada iteración se realizan pruebas y una revisión del componente desarrollado y de acuerdo a cada caso, realizar las adecuaciones necesarias o dar por finalizada la iteración para pasar a la siguiente.

En el plan de proyecto se estableció un tiempo estimado del desarrollo de cada iteración, así como el orden de desarrollo y entrega de cada uno de los componentes del proyecto.

Dentro del plan de proyecto y de acuerdo con las prioridades expresadas por los usuarios se define el siguiente orden en las iteraciones:

 Diseño de la interfaz gráfica de usuario VOD.

 Construcción de la interfaz grafica de usuario VOD.

 Navegabilidad de la interfaz gráfica de usuario VOD.

(33)

4.3 Fase III: Iteraciones

A continuación se especifica cada una de las iteraciones realizadas.

4.3.1 Primera Iteración: Diseño de la Interfaz Gráfica de Usuario VOD

4.3.1.1 Análisis y Planificación

En la primera iteración se realizaron una serie de reuniones con el cliente para determinar las necesidades y requerimientos básicos del la interfaz de usuario.

Durante la primera iteración se recopiló las siguientes historias de usuario:

 HU-01-01: Contenido de la Interfaz

 Este prototipo es la UI para el servicio de VOD, en él se contienen las películas separadas en once categorías, desplegando quince carátulas de películas por categoría, siendo visibles de un golpe de vista hasta 10 carátulas por categoría.

 Además tiene cuatro niveles de profundización en el contenido:

 El primero despliega las carátulas de las películas según categoría.

 El segundo despliega un resumen de información sobre la película.

 El tercero despliega información detallada de la película, nombre de los actores (incluye sus fotografías), tráiler y películas recomendadas.

 Por último el cuarto nivel de profundización es la visualización de la película a pantalla completa (resolución 1024x768 px).

 Además, debe de disponer de un espacio para publicar publicidad.

(34)

 HU-01-02: Identidad Corporativa

 La interfaz de usuario debe reflejar la identidad, pertenencia de la empresa y presentar elementos de la imagen corporativa de la empresa .

 El logotipo debe estar ubicado en la esquina superior izquierda de la pantalla, ya que es un lugar destacado dentro de la GUI y todas las ventanas deben estar claramente identificadas.

 HU-01-03: Utilidad

 La interfaz de usuario debe ofrecer información sobre las actividades y servicios más recientes e importantes que está llevando a cabo la empresa (VOD, categoría “L M V t ”).

 Los usuarios deben encontrar fácilmente en la interfaz de usuario la información acerca de las actividades y servicios más importantes de la empresa (VOD, categoría “E t ”).

 HU-01-04: Visibilidad del estado del sistema

 La interfaz de usuario debe informar al usuario claramente el área y servicio al cual se encuentra accediendo.

 HU-01-05: Estética y diseño

 La interfaz de usuario debe utilizar jerarquías visuales para determinar lo importante con una sola mirada.

 Las imágenes contenidas en la interfaz de usuario deben tener tamaños adecuados que faciliten el acceso al servicio.

(35)

4.3.1.2 Diseño de la Maqueta del Prototipo VOD

Se procede a realizar el diseño de la estructura principal de la interfaz y sus ventanas subsiguientes a modo de maqueta. Se diseñó una pantalla mas cinco ventanas emergentes las cuales dan soporte al prototipo.

4.3.1.3 Implementación del Diseño

Para la implementación del diseño de la GUI se utilizó el software Pencil¹⁴ el cual se puede apreciar en la figura nº 3, este software permite diagramar pantallas de usuario sin necesidad de programarlas, de esta forma se puede presentar una maqueta de cómo será la interfaz de usuario al cliente y verificar si cumple con sus requerimiento o si ve que necesita agregar o modificar algún aspecto del diseño.

Figura 3: Pencil Software de Diseño de GUI.

Fuente: Elaboración propia.

14Para mayor información visitar el enlace: http://pencil.evolus.vn/

(36)

 Diseño de la Pantalla de Inicio VOD

Al seleccionar una categoría de películas del menú lateral izquierdo se traspasa el foco al área de las Caratulas de Películas, dando la opción de seleccionar cualquier caratula de la categoría preseleccionada para acceder a su información en la primera ventana emergente Descripción de Película.

A continuación en la figura nº 4 se ve el diseño del prototipo de la GUI para la pantalla de inicio.

Figura 4: Maqueta de la pantalla de inicio, prototipo GUI VOD.

La Pantalla de inicio cuenta con once categorías, donde dos de ellas están formadas por un filtro de las películas t t “E t ” categoría “L M V t ”.

El filtro de dichas categorías está definido en la definición de cada película, la cual tiene dos atributos de si corresponde a película t “E t ” / “L Más Visto.

(37)

Diseño Ventana Emergente nº 1 – Descripción de Película

Al seleccionar la caratula de una película se abre la primera ventana emergente (en el diseño figura con el borde destacado con color rojo) que permite una aproximación a la información resumida de la película seleccionada entregando a lo menos 5 atributos de ésta.

También entrega dos opciones a través t “V M ” “S ”, las cuales corresponden a visualizar más información sobre la película de forma extendida y salir de la ventana emergente, esta última opción cierra la ventana emergente y devuelve el foco al área de la pantalla de inicio dejando el foco en la última caratula de película previamente seleccionada.

A continuación en la figura nº 5 se ve el diseño del prototipo de la GUI para la pantalla desplegando la Ventana Emergente nº 1.

Figura 5: Maqueta de la ventana emergente Descripción de Película, prototipo GUI VOD.

(38)

 Diseño Ventana Emergente nº 2 – Descripción de Película Extendida

Al seleccionar la opción “Ver Más” de la ventana emergente Descripción de Película, se abre la segunda ventana emergente “Descripción de Película Extendida” (en el diseño figura con el borde destacado con color rojo), la cual permite acceder a mayor información sobre la película seleccionada, incluyendo la reproducción automática del trailer (sinopsis) de la película.

También entrega las opciones de arrendar la película y salir de la ventana emergente

“Descripción de Película Extendida” v ve a la pantalla de inicio, quedando preseleccionada la última caratula seleccionada.

Figura 6: Maqueta de la ventana emergente Descripción de Película Extendida, prototipo GUI VOD.

(39)

 Diseño Ventana Emergente nº 3 – Visualización de Película.

Al seleccionar la opción SD (estándar) o HD (alta definición) de la ventana emergente “Descripción de Película Extendida”, se procede a arrendar la película con su posterior reproducción en la tercera ventana emergente “Visualización de Película”.

Aquí al presionar el botón [ Back ] o [ Volver ] del control remoto se retorna a la pantalla de inicio del servicio VOD (los botones del control remoto se encuentran programados en la librería de ActiveVideo).

A continuación en la figura nº 7 se ve el diseño del prototipo de la GUI para la Ventana Emergente nº 3 donde se reproduce la película que ha sido previamente seleccionada para su arriendo.

Figura 7: Maqueta de la ventana emergente Visualización de Película, prototipo GUI VOD.

(40)

 Diseño Ventana Emergente nº 4 – Bloqueo de Caratulas en Categoría Adultos

Al seleccionar la opción Adultos del menú lateral de categorías de películas en la pantalla de inicio de VOD, se abre la cuarta ventana emergente Bloqueo de Caratulas en Categoría Adultos (en el diseño figura con el borde destacado con color rojo), la cual permite acceder a la visualización de las caratulas de películas para adultos con contenido sexual explicito previa una autentificación con el PIN del suscriptor de TV-Cable.

También entrega la opción de salir de la ventana emergente Bloqueo de Caratulas en Categoría Adultos, volviendo a la pantalla de inicio.

Figura 8: Maqueta de la ventana emergente Bloqueo de Caratulas en Categoría Adultos, prototipo GUI VOD.

(41)

 Diseño Ventana Emergente nº 5 – Salida y Mensaje Publicitario de VOD.

Al seleccionar la opción Salir del menú lateral de categorías de películas en la pantalla de inicio de VOD, se abre la quinta ventana emergente “Salida y Mensaje Publicitario de VOD” (en el diseño figura con el borde destacado con color rojo), la cual indica que se está saliendo del servicio VOD.

Esta ventana emergente tiene como función avisar al usuario que se encuentra a punto de salir del servicios VOD, junto con ello se aprovecha de publicitar que existen cientos de títulos que lo estarán esperando en su próxima visita.

También podría ser utilizado este espacio para publicitar otros servicios y/o eventos.

Figura 9: Maqueta de la ventana emergente Salida y Mensaje Publicitario, prototipo GUI VOD.

(42)

4.3.1.4 Pruebas

Una vez implementada la maqueta del diseño de la GUI se presenta para realizar pruebas respecto al cumplimiento de las especificaciones de las historias de usuarios.

Las pruebas consisten en un checklist respecto de cada una de las especificaciones de las historias de usuario, al cumplirse dichas especificaciones se satisface la prueba, dándose por terminada la primera iteración.

4.3.2 Segunda Iteración: Construcción de la Interfaz Gráfica de Usuario VOD

4.3.2.1 Análisis y Planificación

En la segunda iteración se realizó el levantamiento de información respecto a la construcción de la GUI.

Durante la segunda iteración se recopiló la historia de usuario:

 HU-02-01: Plataforma Tecnológica

 Desarrollar la interfaz de usuario bajo la plataforma CloudTV H5, utilizando HTML5, CSS3 y Javascript.

 Se debe implementar teniendo en cuenta la situación actual de la GUI VOD, logrando implementar y mejorar la Interfaz de usuario (UI renovada).

(43)

 Incluir publicidad, para mejorar la promoción del contenido, su usabilidad, permitiendo incluso publicitar contenido de terceros relacionados a la venta de contenidos (películas en el cine, ventas de DVD y/o BluRay, etcétera).

 HU-02-02: Caso de Uso Prototipo Interfaz de Usuario VOD

 El cliente es el actor principal del caso de uso en la GUI de VOD, interactúa con el prototipo de la GUI de VOD, para ello debe seleccionar en su control remoto el servicio VOD, luego se despliega la GUI de VOD dando acceso a la pantalla de inicio, en la cual puede seleccionar la categoría de las películas que desea arrendar, una vez seleccionada la película solicita su arriendo y debe confirmar dicha acción ingresando su contraseña.

Historia de Usuario Ver una Película en VOD Actor Principal Cliente

Personas involucradas e intereses

Cliente Quiere seleccionar una película para verla de forma inmediata en su televisor.

Prototipo UI VOD Quiere recibir peticiones de transacciones sobre visualización de películas.

Precondiciones El cliente suministra su contraseña.

Garantías de Éxito (Postcondiciones)

El cliente obtiene la reproducción de la película requerida.

Escenario Principal de Éxito (Flujo Básico)

1.- El cliente selecciona la categoría donde desea buscar una película.

2.- VOD da acceso a las películas de la categoría.

3.- El cliente selecciona la película que desea ver.

(44)

4.- VOD solicita la contraseña (no funcional).

5.- El cliente ingresa la contraseña y selecciona arrendar.

6.- VOD reproduce la película solicitada por el cliente.

Tabla 1: Caso de Uso Prototipo Interfaz de Usuario VOD.

4.3.2.2 Diseño

A partir de las historias de usuario se lleva a cabo el diagrama de caso de uso que indica el comportamiento de la interfaz gráfica de usuario y sus respectivos actores, como se puede apreciar en la figura nº 10.

Figura 10: Diagrama de Caso de Uso, prototipo GUI VOD.

(45)

4.3.2.3 Implementación

La implementación se lleva a cabo tomando como punto de partida las historias de usuario, las cuales son vertidas en la construcción de la interfaz gráfica de usuario utilizando HTML5 para la estructura, CSS3 para la presentación del contenido y Javascript para incorporar la interactividad que requiere la interfaz de usuario.

 Construcción de Prototipo VOD

Se construyen seis pantallas de la interfaz de usuario, donde cinco de ellas son ventanas emergentes, las cuales dan soporte al prototipo. A continuación se presentan en la tabla nº 2 las características de la GUI de VOD en alta definición (HD), como se trata de un prototipo se construyó con tres películas del catálogo en toda su profundidad esto es poster, actores, descripción de la película, reparto de actores, fotografías de los actores, sinopsis y la película como contenido.

Características de la GUI VOD HD

Resolución 1280 x 768

Pantallas, cantidad 6

Botones, cantidad 37

Imágenes, cantidad 187

Trailer (sinopsis), cantidad 3

Películas, cantidad 3

Tabla 2: Características y contenido de la interfaz gráfica de usuario.

(46)

A continuación en la figura nº 11 se resumen las seis pantallas del prototipo de GUI.

Figura 11: Resumen de las seis pantallas del prototipo de interfaz gráfica de usuario VOD Fuente: Elaboración propia.

 Pantalla de Inicio VOD

Para la programación del menú lateral derecho se utiliza librerías propietarias de ActiveVideo las cuales permiten definir una barra de navegación acotada, la cual puede ser navegada a través de las teclas del control remoto.

A continuación se visualiza en la figura nº 12 la pantalla de inicio del prototipo de interfaz gráfica de usuario para el servicio VOD.

(47)

Figura 12: Pantalla de Inicio en un Televisor, prototipo GUI VOD.

En la construcción de las seis pantallas del prototipo de GUI de VOD se utilizaron tres bibliotecas Javascript de ActiveVideo para su plataforma CloudTV, estas son:.

 av.js

 navigation.js

 keyboard.js

A continuación a modo de ejemplo se declara en Javascript la barra de navegación de las categorías de las películas:

nav = new av.Navigation();

nav.addSelector( '#id_menu_btn_estrenos',

'#id_menu_btn_lomasvisto',

'#id_menu_btn_infantil',

(48)

'#id_menu_btn_accion', '#id_menu_btn_drama', '#id_menu_btn_comedia', '#id_menu_btn_clasicos', '#id_menu_btn_terror',

'#id_menu_btn_cienciaficcion', '#id_menu_btn_musicales', '#id_menu_btn_adulto', '#id_menu_btn_salir');

Primero se define un nuevo elemento de tipo navegación, esto es, se indica que habrá un nuevo conjunto de botones a utilizar como objetos para la navegación dentro de la interfaz gráfica de usuario.

Los objetos a utilizar como opciones de la navegación de la interfaz de usuario son t HTML5 t “ ” botón, como se muestra a continuación en el siguiente ejemplo:

<button id="id_menu_btn_estrenos"> ESTRENOS </button>

 Pantalla VOD, Película Seleccionada – Descripción de Película

A continuación en la figura nº 13 se ve que una vez seleccionada la categoría

“E t ” p m p ionada en la primera película de la categoría.

(49)

Figura 13: Pantalla de Inicio, prototipo GUI VOD.

A continuación a modo de ejemplo se declara en Javascript la navegación de las caratulas de quince películas disponibles en una categoría:

nav_movie = new av.Navigation();

nav_movie.addSelector('#id_btn_0', '#id_btn_1', '#id_btn_2', '#id_btn_3', '#id_btn_4', '#id_btn_5', '#id_btn_6', '#id_btn_7', '#id_btn_8', '#id_btn_9', '#id_btn_10', '#id_btn_11', '#id_btn_12','#id_btn_13', '#id_btn_14');

Ejemplo en Javascript para la creación de los botones que componen las quince películas que se cargan por cada categoría. Además en la creación de cada botón se le agrega la imagen del poster de la película en forma dinámica.

(50)

var fbutton = document.createElement('button');

fbutton.id = 'id_btn_'+indice_n;

fbutton.className = "btn_movie";

fbutton.setAttribute('onfocus', 'cambiarAtributo(this, "focus");');

fbutton.setAttribute('onblur', 'cambiarAtributo(this, "blur");');

fbutton.setAttribute('value', video.id);

var img = document.createElement('img');

img.id = 'id_img_'+indice_n;

img.src = "images/poster/"+video.img_caratula;

img.className = "imgposter";

fbutton.appendChild(img);

allButtons[indice_n] = fbutton;

indice_n++;

for(var i=0; i<indice_n; i++) // De 0 a 14, existen 15 posiciones.

{

btnCaratulas.appendChild(allButtons[i]);

}

ReBuiltNav("poster");

(51)

 Pantalla VOD, Ventana Emergente 1 – Descripción de Película

Esta ventana emergente entrega la información básica de la película seleccionada.

Permitiendo profundizar aun mas sobre ella si se selecciona la opción Ver Más.

Todas las ventanas emergentes están programadas en Html5 y CSS3, se activan cuando el usuario realizar un evento Click (en el Control Remoto es cuando presionan el botón OK) en el botón que está programado para llamarlas, en este caso son los botones de Caratulas de Películas.

El ejemplo de la programación de una ventana emergente se puede apreciar más adelante en este documento en la descripción de la Ventana Emergente 4.

A continuación en la figura nº 14 se despliega la primera ventana emergente con la descripción resumida de la película.

Figura 14: Ventana Emergente 1 – Descripción de Película, prototipo GUI VOD.

(52)

 Pantalla VOD, Ventana Emergente 2 – Descripción de Película Extendida

Esta ventana emergente entrega mayor profundización en la información de la película seleccionado, incluso se reproduce de forma automática el trailer (sinopsis) de la película.

También se pueden ver las opciones de arrendamiento de películas en formato SD (estándar) o HD (alta definición).

A continuación en la figura nº 15 se despliega la segunda ventana emergente con la descripción completa de la película y con las opciones de arriendo, en esta ventana emergente se entregan una gran variedad de detalles relativos a la película seleccionada incluida la sinopsis de la película (trailer) y la descripción de la película de forma más amplia.

Figura 15: Ventana Emergente 2 – Descripción de Película Extendida, prototipo GUI VOD.

(53)

 Pantalla VOD, Ventana Emergente 3 – Visualización de Película

Una vez seleccionada la película y la opción para su reproducción, se comienza a transmitir la película a pantalla completa (full screen).

El servicio VOD es el que administra la reproducción de la película, así como todos los controles asociados a dicha reproducción, ahora para efectos de tener una continuidad en el prototipo y lograr ejemplificar en su totalidad la experiencia de la interfaz gráfica de usuario implementada para el se agregó la ventana modal

“V z Película” mp m t la plataforma de VOD.

A continuación en la figura nº 16 se despliega la tercera ventana emergente con la reproducción de la película.

Figura 16: Ventana Emergente 3 – Visualización de Película, prototipo GUI VOD.

(54)

 Pantalla VOD, Ventana Emergente 4 – Bloqueo de Caratulas Categoría Adultos

En Javascript se programa la captura de teclas del control remoto para determinar que está haciendo el usuario, lo cual permite saber que opción eligió y con ello gatillar la ventana emergente que corresponda, para ellos se utilizan los “id” de las etiquetas HTML5, sobre todo los “id” referidos a los botones de la interfaz de usuario.

L “ ” t z s en la figura nº 17 son los siguientes:

<button id="id_xxxbtn_entrar" class="xxx_btn_class">Entrar</button>

<button id="id_xxxbtn_salir" class="xxx_btn_class">Salir</button>

A continuación en la figura nº 17 se despliega la cuarta ventana emergente solicitando la contraseña de usuario para acceder a las categorías de adultos.

Figura 17: Ventana Emergente 4 – Bloqueo de Caratulas de Categoría Adultos, prototipo GUI VOD.

(55)

A t m mp HTML5 v t m “V t Em t 4” p v la figura nº 17 de la página anterior.

<nav class="nav-xxx"> ADVERTENCIA </nav>

CONTENIDO SOLO PARA MAYORES DE 18 AÑOS.

</footer>

<button id="id_xxxbtn_entrar" class="xxx_btn_class">Entrar</button>

<button id="id_xxxbtn_salir" class="xxx_btn_class">Salir</button>

</br>

<h2 class="dorado">Ingrese PIN y Presione (OK)</h2>

</div>

(56)

A continuación a modo de ejemplo se declara en CSS3 v t m “V t Em t 4” :

.modalDialog_xxx {

position: absolute;

font-family: Arial, Helvetica, sans-serif;

top: 0;

right: 0;

bottom: 0;

left: 0;

display: none;

pointer-events: none;

}

.modalDialog_xxx:target { display: inline;

pointer-events: auto;

}

.modalDialog_xxx > #id_div_openModal_xxx { width: 800px;

height: 508px;

position: absolute;

top: 206px;

left: 256px;

text-align:center;

background: black;

background: -moz-linear-gradient(#fff, #999);

background: -webkit-linear-gradient(#fff, #999);

background: -o-linear-gradient(#fff, #999); */

display: inline;

pointer-events: auto;

border-radius: 10px;

border:1px solid #D5A654;

}