Manual de Usuario

1
 Índice de Contenido

1. Introducción ................................................................................... 11

2. Instalación y desinstalación ......................................................... 12

3. URL de acceso a las aplicaciones ................................................ 13

4. Reproducción de vídeos interactivos .......................................... 14

5. Editor Interactivo ............................................................................. 22

5.1 Navegación por la interfaz ................................................................... 22
5.2 Edición de una interactividad .............................................................. 26

VII
 Índice de Figuras
Figura 1) Selección de canal ............................................................................................................ 15
Figura 2 ) Selección de categoría .................................................................................................... 16
Figura 3 ) Selección de vídeo ........................................................................................................... 17
Figura 4 ) Reproducción de vídeo .................................................................................................... 18
Figura 5 ) Controles interactivos ...................................................................................................... 19
Figura 6 ) Ejemplo de capa interactiva ........................................................................................... 21
Figura 7 ) Cambio a otro vídeo en el reproductor .......................................................................... 22
Figura 8 ) Apertura de página web ................................................................................................. 23
Figura 9 ) Selección de canal en el editor ...................................................................................... 25
Figura 10 ) Selección de categoría en el editor ............................................................................. 26
Figura 11 ) Selección de vídeo en el editor .................................................................................... 26
Figura 12 ) Selección de interactividad en el editor ....................................................................... 27
Figura 13 ) Opciones crear/eliminar interactividad .......................................................................... 28
Figura 14 ) Interfaz general del editor ............................................................................................. 29
Figura 15 ) Lista de capas actuales ................................................................................................ 29
Figura 16 ) Edición de atributos generales ..................................................................................... 30
Figura 17 ) Selección de un nuevo tipo de capa ............................................................................ 31
Figura 18 ) Vista de edición de capa .............................................................................................. 32
Figura 19 ) Eliminación de una capa en la interactividad .............................................................. 33
Figura 20 ) Inserción de una nueva capa ....................................................................................... 33
Figura 21 ) Selección de intervalo I ................................................................................................ 34
Figura 22 ) Selección de intervalo II ............................................................................................... 34
Figura 23 ) Selección de color de activación y atributos ............................................................... 35
Figura 24 ) Edición de capa finalizada ............................................................................................ 36
Figura 25 ) Autocompletado del titulo .............................................................................................. 37
Figura 26 ) Botón pantalla completa ................................................................................................ 38

IX
 1. Introducción

En este documento se explicará con detenimiento como es el

funcionamiento del reproductor interactivo, así como la herramienta autor
Teledu.

No se entrará en cuestiones técnicas como por ejemplo conexiones

con el servidor, o cuales son los modelos utilizados por la herramienta.

El reproductor interactivo ha sido diseñado para funcionar en una gran

variedad de dispositivos diferentes como por ejemplo ordenadores, tablets
con entradas táctiles o incluso set top box con un control remoto. En
contraposición, la herramienta autora de vídeo solo ha sido diseñada para
su uso en PC y Tablet, careciendo de los controles necesarios para hacerlo
funcionar con un mando a distancia.

11
 2. Instalación y desinstalación

Todo el software ha sido implementado bajo un paradigma de

programación web, las llamadas ‘web apps’, por tanto no es necesario para
acceder a las aplicaciones tan solo necesitamos un navegador web, y la
url donde se encuentra alojada la aplicación.

No es necesario descargar la aplicación de modo local y podrías

realizar una edición en una máquina, guardar los cambios y terminar en otra
distinta.

En un principio debe de funcionar en todos los navegadores, aunque

al utilizarse las ultimas tecnologías dentro de lo que es la programación web,
tan solo podemos asegurar que la aplicación funcione al cien por cien de
fiabilidad con el navegador Chrome de Google, el cual es uno de los
precursores de estas tecnologías y estándares, por tanto se recomienda
encarecidamente su uso para ejecutar la aplicación.

Ambas aplicaciones carecen de necesidades o dependencias con

plugin o extensiones para el navegador (por ejemplo Flash) por lo que
tampoco es necesario descargar nada más.

12
 3. URL de acceso a las aplicaciones

Como se ha comentado en el anterior capítulo para acceder a las

aplicaciones tan solo necesitamos las URL que actúen como puerta de
acceso a los vídeos interactivos y al editor.

Evidentemente las URL cambiarán según estén en un dominio de

internet u otro, para ejemplificar como serían suponemos que esta alojado
de forma local en el PC, por tanto en ‘localhost’.

▪ /localhost/admin/ - Enlace al panel de administración de Django.

▪ /localhost/channels/ - Enlace a la aplicación de canales (vídeos

normales e interactivos)

▪ /localhost/channels/admin/imedia– Enlace a la aplicación ‘Editor

vídeos interactivos’.

13
 4. Reproducción de vídeos interactivos

Los vídeos interactivos están unificados con el resto de vídeos de ña

plataforma SiestaTVLearning, por lo que hay que acceder a la aplicación de
visualización de vídeos y buscar uno que posea interactividad.

A continuación se mostrará una simulación de búsqueda de vídeo y de

reproducción interactiva del mismo. En primer lugar accedemos a la
aplicación de vídeos y buscamos el canal deseado. La interfaz de selección
de canal es la siguiente:

Figura 1- Selección de canal

Podemos seleccionar el canal con las flechas de dirección (mando o

teclado) o con el ratón. Por ejemplo accedemos al canal ‘Siesta TV’. Una
vez accedemos al canal se nos muestra una lista con las posibles
categorías (parte izquierda) y a la derecha una lista con las ultimas
novedades de dicha categoría. Los vídeos interactivos pueden estar
mezclados con otro tipo de vídeos, aunque en el ejemplo de las capturas se
ha creado una categoría llamada ‘Contenido interactivo’ para
14
introducir ahí algunos vídeos interactivos para que experimente el usuario.

Figura 2 - Selección de categoría

Todas las pantallas a excepción de la de selección de canal posee en

la parte superior un buscador. El buscador puede utilizarse escribiendo con
el teclado (físico o virtual de los tablets) las palabras clave a buscar, o incluso
con el control remoto se podría utilizar el sistema de reconocimiento de voz
para escribir los términos de búsqueda.

Accedemos a esa categoría ‘Contenido interactivo’ para continuar

con el ejemplo.

La siguiente pantalla que se muestra es la de los vídeos del canal.

En esta pantalla se muestra a la izquierda una lista con los vídeos de la
categoría seleccionada y a la derecha una vista previa con un resumen
del contenido. A continuación una captura:

15
 Figura 3 - Selección de vídeo

Es importante destacar que en los vídeos interactivos aparece el

icono ‘interactividad disponible’ justo a la derecha de la etiqueta de la
duración del vídeo.

Los videos interactivos pueden disponer de alguna de las capas

interactivas siguientes:

• Texto – Un pequeño texto con formato en el color de

la fuente, tamaño , tipografía etc.
• Imagen – Una imagen o gif animado superpuestos encima del
video.
• Video – Funcionaría como las imágenes, se superpondría
un archivo de vídeo encima del video que se esta
reproduciendo.
• Audio – Con esta capa se añaden sonidos al vídeo, para
el usuario carece de importancia ‘practica’ ya que no
puede activar ninguna opción.

Todas las capas a excepción de la capa de audio pueden estar

rodeadas por un borde de color, esto indica que pueden contener
alguna función interactiva. Las funciones interactivas implementadas
son:

16
 • Pausa del video actual y apertura de una página web.
• Pausa del vídeo actual y cambio a otro vídeo.

¡Veamos un ejemplo!, seleccionamos el vídeo ‘BBC One – Human

planet’. Se nos pondría el reproductor a pantalla completa:

Figura 4 - Reproducción de vídeo

Todos los controles pueden ser accionados por su respectivo color

del mando, o por el icono que hay en pantalla. La barra de controles
desaparece a los 10 segundos, y vuelve a aparecer al realizar cualquier
pulsación de teclas.

Los controles son:

• Blanco – Pausa el vídeo y vuelve la pantalla de vista

previa, si se volviese a seleccionar el mismo vídeo
continuaría por donde se dejó.
• Verde – Ir hacia atrás en el video
• Azul – Reproducir/Pausar
• Rojo – Adelantar el video
• Amarillo – Mostrar más opciones (se implementará en un
17
 futuro, por ejemplo contendrá acciones como compartir en
Twitter)
• Negro – Activar los controles que manejan la interactividad.

Ahora, pulsaremos sobre el botón negro para cambiar a los

controles que manejan la interactividad, para ello los controles en pantalla
cambian mostrándose como aparecen en la siguiente captura.

Figura 5 - Controles interactivos

Ahora los controles cambian a los siguientes:

• Rojo, verde, azul y amarillo – Activación de las capas

interactivas.
• Negro – Cancelar los controles interactivos. Vuelve a los
controles clásicos.
• Blanco – En cao de haber algún vídeo en el historial de
navegación vuelve a él.

Veamos un ejemplo de capa interactiva. En la siguiente captura se

muestra una capa la cual tiene un enlace a otro vídeo:

18
 Figura 6 - Ejemplo de capa interactiva

Se aprecia que la capa interactiva tiene una capa con un borde en

verde, lo que quiere decir que abre una web o cambia a otro video. Vamos
a suponer que pulsamos el botón verde y activamos la acción. En este caso
pondrá un nuevo vídeo en el reproductor. Al usuario se le mostraría así:

Figura 7 - Cambio a otro vídeo en el reproductor

19
 Cambiaría el vídeo en el reproductor y mostraría un mensaje de
alerta en la parte superior mostrando el título del nuevo vídeo. Este
nuevo video podría contener interactividades o no. En el ejemplo de
arriba posee una capa con el borde azul que activaría otra acción.

Pulsamos sobre la capa azul y vemos que pausa el video y nos abre
una web:

Figura 8 - Apertura de página web

Podría ser que se abriera la web en la misma ventana, o en una

nueva pestaña como es el ejemplo de arriba. En el caso de abrir la
web en una nueva pestaña se pausa el vídeo para luego continuar con
su reproducción.

De esta forma podríamos ir enlazando videos con otros videos o

páginas web para ampliar la información acerca de los contenidos (ese
es el fin del proyecto).

Ahora podría pensarse que después de realizar un ‘salto de

20
contenido’ se pierde la información que estábamos viendo. Eso no es
así ya que se puede volver a la reproducción del vídeo anterior por el
instante donde se relocalizó del salto de dos
formas diferentes:

• Una vez que acaba el video que se esta reproduciendo

comprueba si puede volver a la reproducción de un video
anterior y salta automáticamente (puede configurarse en el
editor para que esto sea así o no).

• Pulsando en cualquier momento el botón blanco en los controles

interactivos.

Así conseguimos que el usuario disponga de toda la información

posible de una forma fácil e intuitiva y que no pierda el hilo del material que
esta visionando.

21
 5. Editor Interactivo

Para poder disponer de vídeos interactivos es necesario crearlos

previamente con un editor. En este capítulo mostraremos como se edita
de una forma fácil y rápida un video para añadirle elementos interactivos.

5.1 Navegación por la interfaz

La interfaz de navegación es muy similar a la de vídeos, la primera

pantalla muestra una lista de canales en vez del modo ‘en malla’ del
reproductor normal:

Figura 9 - Selección de canal en el editor

Como se puede ver en la captura también posee un buscador de

canales. La siguiente pantalla es la selección de categoría:

22
 Figura 10 - Selección de categoría en el editor

Luego la selección de vídeo:

Figura 11 - Selección de vídeo en el editor

23
 Una vez seleccionado un vídeo, nos mostrara una nueva pantalla una
lista con las interactividades creadas (tan solo estará activa una) con su
respectiva información a la derecha una vez es seleccionada:

Figura 12 - Selección de interactividad en el editor

Si se pulsase sobre el botón verde se mostraría una ventana para

crear/borrar nuevas interactividades en este vídeo.

Al pulsar sobre el botón de ‘más opciones’ esta es el cuadro de

dialogo que aparece en pantalla:

24
 Figura 13 - Opciones crear/eliminar interactividad

Como podemos ver podemos seleccionar el crear una nueva

interactividad (se crea una nueva asignándole como nombre la fecha y hora
actual, ya posteriormente se pueden editar sus atributos en el editor
interactivo) y eliminar la interactividad seleccionada.

Al seleccionar una interactividad se activa el editor mostrándose algo

parecido a la captura que hay a continuación (Escogemos la interactividad
previamente creada y editada):

25
 Figura 14 - Interfaz general del editor

En los siguiente capítulo se mostrará como funciona la

herramienta de edición.

5.2 Edición de una interactividad

Figura 15 - Lista de capas actuales

26
 Esta pantalla muestra al igual que todas el reproductor del video
principal con las respectivas capas superpuestas encima del mismo, es decir
que podríamos pulsar el botón ‘play’ y ver como queda el vídeo interactivo.

En la parte derecha, dispone de un listado con las capas que han sido
creadas para esa interactividad, así como dos botones, uno para agregar un
nuevo elemento y otro para editar las características de la interactividad.

En la parte inferior también al igual que el resto de pantallas se

muestra el cronograma de activación de capas. Este cronograma dispone
de dos botones para poder agrandar o disminuir el intervalo mostrado en el
mismo.

Otra característica de esta sección es que en la parte derecha se

muestra un pequeño resumen en caso de que pasemos el ratón por encima
del carril de la capa que queremos los detalles en el cronograma. La
información mostrada es el instante de inicio, el de fin, su descripción y si esta
activa o no.

Para hacer visualmente más atractivo este cronograma se colorea

del color asignado al borde de la capa, de esta forma podremos saber a
simple vista de una forma rápida si hay dos capas activas en el mismo
instante con el mismo color.

Se puede editar la configuración de la interactividad pulsando sobre

el segundo botón azul de la parte superior derecha, como por ejemplo, su
breve descripción, si esta activa o no, o si debe buscar el ultimo video en el
historial para volver a su reproducción una vez terminado este. La siguiente
captura muestra esa edición:

27
 Figura 16 - Edición de atributos generales

Posee tan solo los botones uno para guardar los cambios y
otro para cancelarlos.

Las capas pueden ser editadas pulsando sobre su nombre en la

lista, pero veamos un ejemplo de cómo crear una capa nueva (la cual ya
incluye su edición).

Pulsamos sobre el botón ‘Nueva Capa’ de la interfaz general y

elegimos el tipo de capa que queremos:

28
 Figura 17 - Selección de un nuevo tipo de capa

En caso de que se desee cancelar la creación de la nueva capa se

puede pulsar sobre el botón cancelar y se volverá a la lista de capas.
Seleccionamos por ejemplo la capa ‘Imagen’.

Una vez seleccionada el tipo de capa se activa la ventana de edición de

capa.

Figura 18 - Vista de edición de capa

29
 Ahí podemos editar todas las características posibles de la capa, por
defecto la capa se muestra durante 10 segundos comenzando en el instante
donde se encontraba el video en el momento de crear la capa, así por
ejemplo si le has dado cuando el vídeo se encuentra en el segundo 12, se
ocultará en el 22. En este ejemplo le hemos dado en el segundo 0 por lo que
se ocultará en el 10.

La interfaz posee dos botones, uno para guardar los cambios (el disco)
y otro para borrar la capa (la papelera). Si se pulsa el botón de guardar
cambios se guardan en el servidor y se vuelve a mostrar la lista de capas
creadas. En cambio si se pulsa sobre el icono de la papelera nos mostrará
un dialogo para advertirnos que en efecto se va a borrar la capa del sistema:

Figura 19 - Eliminación de una capa en la interactividad

Si pulsamos cancelar el sistema no borra nada, pero si pulsamos

‘aceptar’ borrará la capa y se volverá a mostrar la lista de capas creadas.

30
 Ahora, lo primero que debemos hacer es asignar un nombre
identificativo para localizar fácilmente la capa en la lista y en el cronograma,
y buscar el campo ‘Url Imagen’ para indicarle de donde va a obtener el
recurso. Una vez lo pongamos automáticamente lo carga en el reproductor:

Figura 20 - Inserción de una nueva capa

Ahora por ejemplo vamos a editar en que instantes tiene que

aparecer esa capa, supongamos que queremos que salta entre el segundo
1 y el 4, tenemos dos opciones, o ponemos el tiempo en el cuadro de texto
inicio y fin o utilizamos los botones ‘Ahora!’.

Si vamos a seleccionar valores muy bajos es fácil ponerlos en el

cuadro de texto, pero si estas en plena edición es más sencillo usar los
botones ‘Ahora!’, al pulsar esos botones, se introduce automáticamente el
instante de reproducción actual en la caja de texto. Mostremos una captura
después de haber escogido el intervalo.

31
 Figura 21 - Selección de intervalo I

Vemos que ya no se ve la capa y que el cronograma muestra su

instante de activación correcto, ahora avancemos en el vídeo hasta que salga
la capa para poder editarla, podemos pulsar el botón ‘play’ y esperar a que
llegue a ese instante, pulsar los botones de adelantar/retrasar video o
simplemente desplazar la barra de progreso.

Figura 22 - Selección de intervalo II

32
 Bien, ahora vamos a hacer que abra un enlace si se acciona la capa,
para ello rellenamos el campo ‘Enlace a web’ y escogemos un color de
borde. Su color de representación en el cronograma también cambiará para
adaptarse al borde.

También podemos utilizar las barras de desplazamiento para cambiar

la configuración de tamaño, posición, transparencia…

Figura 23 - Selección de color de activación y atributos

Una vez que hemos configurado la capa a nuestro gusto

guardamos los cambios. Ahora se nos mostrará la lista con las capas con la
nueva capa ya incluida:

33
 Figura 24 - Edición de capa finalizada

También podemos configurar que esta capa sea un enlace a otro

vídeo del sistema, para ello editamos el campo ‘Enlace a video’ en lugar de
‘Enlace a web’. En dicho campo tan solo tenemos que poner el nombre del
vídeo (perteneciente a nuestro usuario) al que queremos saltar cuando se
accione la capa. El campo de texto se va autocompletando, mostrando los
posibles títulos disponibles para ayudar al usuario a escribir correctamente el
título, a continuación mostramos un ejemplo:

34
 Figura 25 - Autocompletado del titulo

En el ejemplo anterior se ha escrito ‘fo’ y muestra las tres posibles

opciones:

• ComedyFootball
• HighlandstoHimalaysas – Training for Everest
• Fox Huntingwith a Golden Eagle

Seleccionamos el título y ya esta, no hace falta configurar nada más.

Como se ha podido comprobar es muy sencillo introducir nuevos

elementos en un vídeo del sistema, el resto de capas posee atributos
similares, solo queda decir que en el reproductor hay un botón para activar la
vista previa:

Figura 26 - Botón pantalla completa

35
 Para salir de ese modo solo hay que pulsar ‘ESC’. En el modo de
edición se ha desactivado las acciones de las capas, es decir que en vez
de abrir una web o cambiar de vídeo se le muestra en una ventana
emergente al usuario que se ha realizado dicha acción para simular su
funcionamiento.

36