documental interactivo “l’oiseau migrateur”

Documental Interactivo “L’Oiseau Migrateur” Memoria de Projecto final de Master

Master universitario en Aplicaciones Multimedia Estudios de informática, multimedia y telecomunicación

Autor: Laura López Cuello Consultor: Manel Llopart Vidal

Profesor: David García Solórzano

15 de junio de 2015

Documental Interactivo “L’Oiseau migrateur” Laura López Cuello

2 / 49

Créditos/Copyright

Aplicación interactiva y trabajo final de master © Laura López Cuello

Reservados todos los derechos. Está prohibida la reproducción total o parcial de esta obra por

cualquier medio o procedimiento, como la impresión, la repografía, el microfilm, el trato informático o

cualquier otro sistema, así como la distribución de ejemplares mediante el alquiler, sin la autorización

escrita del autor o de los límites que autorice la Ley de propiedad Intelectual.

Material gráfico y montaje

© Punto y coma films

Reservados todos los derechos. Está prohibida la reproducción total o parcial de esta obra por

cualquier medio o procedimiento, como la impresión, la repografía, el microfilm, el trato informático o

cualquier otro sistema, así como la distribución de ejemplares mediante el alquiler, sin la autorización

escrita del autor o de los límites que autorice la Ley de propiedad Intelectual.


3 / 49

Dedicatoria

Este trabajo está dedicado a todas aquellas personas que aparecen en el documental y que de una

forma u otra han ayudado a su realización, en especial a los trabajadores del workshop en Zimbabwe

con los que tuve el placer de convivir durante un mes.


4 / 49

Agradecimientos Este proyecto no habría sido posible sin la colaboración de mi socia y amiga Lola Grand Vila, con la

que grabé todas las imágenes y que me ha ayudado y apoyado en la definición del guión narrativo y el

montaje.

También quiero agradecer a Manel Llopart Vidal que me instase a llevar a cabo este proyecto entre

todas las opciones presentadas.


5 / 49

Resumen Este trabajo de final de master ha consistido en la realización de documental corporativo interactivo

construido a partir del material ya rodado en Zimbabwe e Italia en marzo de 2014 para la empresa

francesa Arrosoir et persil, dedicada a la fabricación artesanal de objetos decorativos realizados con

materiales reciclados. El interactivo se construye a través de dos vertientes, por una parte un vídeo de

reproducción lineal dividida en módulos que consiste en las diferentes fases del proceso de

producción de una golondrina de metal, ordenados de forma inversa, y por otra, los diferentes videos

alternativos que van apareciendo a lo largo de la reproducción y que pueden ser consultados por el

usuario y que no interrumpen la reproducción principal. Estos videos alternativos ya fueron montados

con anterioridad como encargo de la empresa y el vídeo lineal dividido en modulos se ha realizado

especificamente para este trabajo. Además, se han incluido enlaces externos a la e-commerce de

Arroroir et persil que enlazan a los diferentes productos.

La construcción de la interactividad se ha realizado a través del programa especifico Klynt que ha

permitido un desarrollo fluido y sin incidencias, dando como resultado un producto atractivo, con una

navegación sencilla, y nada intrusiva, que da la opción al usuario de disfrutar del visionado lineal

tradicional de un documental o el de descubrir las nuevas formas de narrar historias que nos

proporciona la interactividad.

Abstract

This thesis has consisted in developing a corporate interactive documentary film, made from footage

recorded in Zimbabwe and Italy in march 2014, done for the french company Arrosoir et Persil that

manufacturates hand-made decoration objects made from recycled materials. The interactive is done

by two sides, on the one hand, by the modular even linear playback of the different production steps of

a metal swallow, and secondly, by the different alternative videos that were already mounted on order

by the company. The linear video divided in modules has been created specifically for this activity.

Furthermore, external links have been included to the different products of the Arrosoir et persil

e-commerce.

The construction of interactivity has been done using the specific software Klynt that has enabled a

smooth and efficient process without incidences, giving an atractive product with an easy and

non-intrusive navigation, that allows the user to enjoy the tradicional viewing of a documentary or to

discover the new storytelling ways given to us by interactivity.

Palabras clave

Documental interactivo, Zimbabwe, transmedia, documental corporativo, interactividad.


6 / 49

Índice

Capítulo 1: Introducción 8

1.Introducción/Prefacio ............................................................................................................... 8

2. Descripción/Definición ............................................................................................................ 9

3. Objetivos generales ............................................................................................................... 11

4. Metodologia y proceso del trabajo ........................................................................................ 12

5. Planificación .......................................................................................................................... 14

6. Presupuesto ........................................................................................................................... 16

7. Estructura del resto del documento ....................................................................................... 18

Capitulo 2: Análisis ........................................................................................................... 19

1. Estado del arte ....................................................................................................................... 19

Capitulo 3: Diseño ............................................................................................................. 22

1. Arquitectura general de la aplicación ..................................................................................... 22

2. Arquitectura de la informació y diagramas de navegación ..................................................... 24

3. Diseño gráfico e interfaz ........................................................................................................ 27

3.1 Estilos ............................................................................................................................... 28

3.2 Usabilidad ........................................................................................................................ 29

4. Plataformas y software utilizados .......................................................................................... 31

Capitulo 4: Demostración ................................................................................................. 36

1. Uso de la aplicación ............................................................................................................... 37

2. Tests ...................................................................................................................................... 38

Capitulo 5: Conclusiones y líneas de futuro ....................................................................... 43

1. Conclusiones .......................................................................................................................... 43

2. Líneas de futuro ..................................................................................................................... 45

Bibliografia ....................................................................................................................... 46

Anexos ............................................................................................................................. 48

Anexo A: entregables del proyecto ............................................................................................ 48

Anexo B: Currículum Vitae ......................................................................................................... 36


7 / 49

Figuras y tablas

Indice de figuras

Figura 1: Golondrina de metal protagonista de la historia ...................................................................... 8

Figura 2: Captura de pantalla que muestra la ordenación de material ................................................. 12

Figura 3: Captura de pantalla que muestra el diagrama de navegación .............................................. 22

Figura 4: Captura de pantalla del reproductor en funcionamiento ........................................................ 22

Figura 5: Captura de pantalla del fondo de la interfaz .......................................................................... 23

Figura 6: Diagrama interactivo de la aplicación .................................................................................... 27

Figura 7: Botón a vídeo alternativo ....................................................................................................... 28

Figura 8: Botón a link externo ............................................................................................................... 29

Figura 9: Botón de navegación ............................................................................................................. 29

Figura 10: Captura de pantalla prueba de configuración Filezilla ......................................................... 35

Figura 11: Secuencia inicial .................................................................................................................. 38

Figura 12: Configuración de links del footer ......................................................................................... 38

Figura 12: Configuración de menús ...................................................................................................... 39

Figura 13: Configuración de mapa ....................................................................................................... 39

Figura 14: Línea de tiempo de una secuencia en Klynt ........................................................................ 39

Figura 15: Botones de navegación en una secuencia .......................................................................... 40

Figura 16: Configuración de transiciones automáticas ......................................................................... 40

Figura 17: configuración overlay ........................................................................................................... 40

Figura 18: configuración _blank ............................................................................................................ 41

Figura 19: Información general del proyecto ........................................................................................ 41

Figura 20: Títulos de secuencia ............................................................................................................ 42

Figura 21: Compartir proyecto .............................................................................................................. 42

Figura 22: Vista de las miniaturas en el menú process ........................................................................ 42

Indice de tablas

Tabla 1 . Planificación por hitos y entregas .......................................................................................... 14

Tabla 2 . Guión literario video principal ................................................................................................ 24

Tabla 3 . Tabla comparativa software interactividad ............................................................................ 32


8 / 49

Capítulo 1: Introducción

1.Introducción/Prefacio

Este trabajo de final de master consiste en un documental interactivo realizado a partir de materiales

ya filmados el pasado año en Zimbabwe, Francia e Italia. El documental L’oiseau migrateur es un

documental corporativo realizado por Punto y coma films [1], donde la alumna es co-directora, para la

empresa francesa Arrosoir et persil [2], una compañía que fabrica figuras artesanales para la

decoración de jardines y patios. La empresa tiene su sede en Francia pero su workshop está

emplazado en Zimbabwe, África, donde son los propios artistas zimbabwenses los que fabrican el

producto de manera completamente artesanal, utilizando materiales reciclados y trabajando el metal

siguiendo los diseños del director de la empresa.

Este trabajo de final de master se ha presentado como una oportunidad única de dar salida a un

material que ya había sido grabado y por falta de tiempo había quedado renegado en un cajón a la

espera de ser convertido en un documental tradicional y que, finalmente, ha sido transformado en el

documental interactivo que aquí se presenta.

El documental “L’oiseau migrateur” pretende mostrar el proceso de creación y elaboración de un

producto, reflexionando sobre el poder del consumidor, a la vez que se humaniza la empresa,

poniéndole cara y nombre a los trabajadores que están detrás de cada uno de los objetos. Una

buena forma de presentar a todos los trabajadores, sin que resulte en exceso repetitivo, es la

interactividad, donde el usuario podrá seleccionar que contenidos ver y cuales no.

Figura 1: Golondrina de metal protagonista de la historia.


9 / 49

2. Descripción / Definición

La idea embrionaria de realizar el documental surgió de la necesidad de la empresa Arrosoir et persil

de acallar los rumores difundidos por la competencia donde se decía que los productos provenían de

la explotación infantil, así como de la curiosidad de los propios consumidores que se preguntaban la

procedencia de los productos que adquirían. Por esta razón, como se esperaba que el documental

tuviese la máxima difusión posible, internet se presentó como el medio más adecuado para ello, y por

consiguiente, las opciones que nos permitía la interactividad se presentaban realmente interesantes.

Gracias a la revolución digital se ha facilitado la expansión de nuevos formatos audiovisuales que

ofrecen nuevas posibilidades al público y el documental interactivo es uno de los géneros que se

encuentra en crecimiento y que se ha beneficiado de este nuevo modelo donde el espectador puede

interactuar con la historia [3,4]. La interactividad ofrece millones de opciones y alternativas al género

documental, creando una nueva forma de expresión artística y personal de gran interés para la

industria.

El documental está dividido en dos partes diferenciadas. La primera esta formada por una breve

introducción de cada uno de los empleados y de sus respectivas familias, unas presentaciones que

fueron pensadas para ser colgadas en la web de Arrosoir et Persil [2] y que fueron encargo de la

propia empresa. La segunda linea de trabajo, que ha sido creada especificamente para este trabajo,

consiste en un audiovisual más extenso, dividido en módulos, que engloba el proceso de creación de

uno de los productos: una golondrina de metal, así como varias reflexiones entorno a temas

aparentemente tan globales como el derecho al trabajo, el comercio justo o el mismo reciclaje. La

elección del producto de la golondrina no fue arbitrario, se pretendía hacer una analogía entre los

pájaros migratorios y los productos que adquirimos, de los que muchas veces desconocemos su

procedencia, y que en ocasiones han sido creados con materiales que nosotros mismos hemos

desechado, como es el caso que nos ocupa, donde los metales reciclados empleados para la

fabricación de los objetos se extraen de bidones de gasolina y otros materiales.

La línea argumental, que se encarga de aunar los diferentes elementos que conformarán el

documental interactivo, es el propio proceso de producción que se presentará en sentido inverso,

desde la venta del objeto en una feria de Milán, hasta la recogida de los bidones de los que se

extraerá el material para fabricar la golondrina. En los distintos procesos de producción iremos

conociendo a los artistas que conforman el proyecto. El usuario podrá decidir si quiere consultar el

material adicional durante la reproducción del documental, que serán, por ejemplo, las diferentes

historias de los trabajadores que van apareciendo, y volver automaticamente al punto donde se quedó

una vez reproducidos dichos contenidos.

Además, el documental conductor, es decir, el que muestra el proceso de producción, se encuentra

dividido en módulos o fases de producción que poseen sentido por ellos mismos y a través de los


10 / 49

cuales el usuario puede navegar, omitiendo aquellos módulos que no sean de su interés. De esta

forma, se le añade mayor interactividad y dinamismo al producto y no se obliga al usuario a visualizar

el documental íntegro.

Otra de las opciones que se ha introducido, al tratarse de un documental corporativo, es la opción a

compra de los diferentes productos que van apareciendo. Para evitar un márqueting agresivo, los

enlaces a los productos que se encuentran en la e-commerce no aparecen en el vídeo base, sino en

los diferentes vídeos adicionales donde conocemos a cada uno de los artístas, exceptuando la

compra de la golondrina protagonista, que aparece al final del documental.

Se ha pretendido que la interactividad no se convierta en un elemento forzado ni invasivo que

interrumpa el flujo tradicional de visualización, sino que sea el usuario quien decida aquellos

momentos en los que quiere pausar la reproducción para ampliar contenidos.

El abasto del proyecto ha sido el siguiente:

1. Edición del vídeo que conforma el eje vertebrador del documental interactivo, dividido en

módulos.

2. Diseño de la interfaz del documental y los elementos integradores (textos, imágenes, iconos,

etc)

3. Inclusión de vídeos adicionales, accesibles mediante interactividad, ya montados

previamente.

4. Desarrollo del mapa de navegación e implementación del documental interactivo en un

dominio web.

Se han excluido del abasto del trabajo de final de master el subtitulados al castellano/catalán del

material rodado. Las lenguas originales del documental serán inglés, francés e italiano. También se

excluyeron del abasto el retoque de color y de sonido.

El documental podrá ser consultado de forma online y gratuita en la siguiente dirección:

http://www.loiseaumigrateur.com


11 / 49

3. Objectivos generales

Objectivos de la aplicación/producto/servicio

• Desarrollar un documental corporativo interactivo a partir de material ya rodado.

Objectivos para el usuario

• Configurar un producto audiovisual de no-ficción que permita al usuario ampliar la información

de lo que esta visualizando, siempre que lo requiera y sin necesidad de interferir en la

reproducción del vídeo principal.

• Posibilitar la compra de los diferentes productos que aparecen en el documental al enlazarlos

con la tienda virtual de la empresa.

Objetivos personales del autor del TF:

• Integrar los conocimientos adquiridos durante el master, en especial los relacionados con la

interactividad y el desarrollo de plataformas web, con los conocimientos ya asimilados por la

alumna relacionados con el campo audiovisual.

• Crear un producto que pueda ser comercializado y que sirva como precedente para futuros

proyectos que serán presentados a posibles clientes en el seno de la empresa Punto y coma

films.


12 / 49

4. Metodología y proceso de trabajo

El punto de partida de este TF fue el material audiovisual ya rodado que se ha utilizado para la

realización del documental interactivo, más de 300GB de material que debía ser ordenado,

visualizado y sincronizado con sus respectivos audios.

Una vez ordenado siguiendo la pauta que se muestra en la figura 2, se visualizó todo el material con el

objeto de definir un guión argumental que serviria como base para dar continuidad al documental y

para introducir los diferentes vídeos adicionales. La ordenación del material permitia agilizar la

realización del script.

Figura 2: Captura de pantalla que muestra la ordenación del material

Una vez definido el guión narrativo, se contruyó un diagrama interactivo donde se incluían los vídeos

adicionales que ya habían sido montados con anterioridad.Tanto el guión definitivo como el diagrama

interactivo pueden consultarse en el apartado “diseño gráfico e interfaz” de este mismo documento.

Paralelamente, se realizó una búsqueda y posterior análisis de las herramientas y software necesario

para la realización de la parte interactiva. Por una parte, se buscaron aquellos programas creados

especificamente para el desarrollo de interactivos y se realizó un análisis de los más destacados, de

forma que se decidió apostar por el software Klynt [5]. La tabla elaborada se puede consultar en el

apartado “ Plataformas y software utilizado” . Por otra parte, también se realizó una búsqueda de un

dominio específico para contenidos dinámicos con espacio web ilimitado y se contrató el servicio

unlimited Plus de 1&1. Para la subida de los archivos a la web se hizo necesario instalar un programa

de FTP, en este caso Filezilla [6].

Para el montaje del vídeo base se empleó el software de edición de vídeo Premier pro y para la

sincronización de audio el programa Pluraleyes, que permitía una sincronización practicamente

automática de los clips de vídeo con los clips de audio y que ahorró muchas horas de trabajo. Para la

elaboración del montaje se hizo necesario realizar el script de todo el material, seleccionando solo


13 / 49

aquellos clips útiles para no sobresaturar el programa y para aligerar las tareas de montaje y

sincronización.

Fue necesario optimizar todos los vídeos e imagenes para web utilizando los programas Adobe

Photoshop y Adobe Encoder.

Se visualizaron los tres webinars de Klynt de más de dos horas de duración, junto con alguno de los

pequeños tutoriales que también se incluyen en su web, aunque se trataba de una faena tediosa,

resultó especialmente provechosa y didactica. También se hizo necesario visionar también un tutorial

de Filezilla. Durante su reproducción se realizaban pruebas de funcionamiento.

Las pruebas de funcionamiento se iban realizando a medida que se exportaban los diferentes

módulos del vídeo base y una vez acabados todos los módulos se empezó a desarrollar el interactivo

definitivo.

Se grabarón unas escenas que faltaban para acabar de matizar el guión de la linea base, finalmente

se descartó la grabación de un último módulo a modo de conclusión por falta de tiempo.

Para dar por cerrado el proceso se realizaron las pruebas de testeo para comprobar que todo

funcionara correctamente.


14 / 49

5. Planificación

La planificación final del trabajo ha sido la siguiente:

Nombre Duración Inicio Final

Hitos para primera entrega

25 días 30/03/2015 27/04/2015

Visualización del material 8 días 30/03/2015 07/04/2015

Selección del dominio 2 día 31/03/2015 02/04/2015

Guión narrativo vídeo estructural 4 días 04/05/2015 08/05/2015

Diagrama de navegación

interactivo

2 días 08/05/2015 10/04/2015

Selección de

plataforma/tecnología/técnica

4 días 13/04/2015 17/04/2015

Concepto general de diseño (

textos, imágenes, etc)

3 días 15/04/2015 18/04/2015

Pruebas de interactividad 8 días 19/04/2015 27/04/2015

Hitos para segunda entrega

26 días 28/04/2015 25/05/2015

Script 14 días 28/04/2015 11/05/2015

Visualización tutoriales 2 días 28/04/2015 30/04/2015

Rodaje material Milan 2 días 28/04/2015 30/04/2015

Mapa de navegación definitivo

(niveles, subniveles y

estructuración

1 día 28/04/2015 29/04/2015

Edición de video principal 14 días 29/04/2015 12/05/2015

Edición de videos (subniveles) 5 días 11/05/2015 16/05/2015

Diseño de la interfaz principal 1 día 17/05/2015 18/05/2015

Desarrollo del interactivo (I) 7 días 18/05/2015 25/05/2015

Hitos para tercera entrega 18 días 26/05/2015 15/06/2015

Montaje vídeo base 7 días 26/05/2015 02/06/2015

Montaje vídeo alternativo 1 día 01/06/2015 02/06/2015

Desarrollo del interactivo (II) 8 días 26/05/2015 03/06/2015

Testeo del interactivo 3 días 04/06/2015 07/06/2015


15 / 49

Corrección de errores 2 días 09/05/2015 14/06/2015

Redacción de la memoria 5 días 08/06/2015 13/06/2015

Preparación de la presentación 2 días 13/05/2015 15/06/2015

Defensa del proyecto 03/07/2015

Tabla 1 . Planificación por hitos y entregas


16 / 49

6. Presupuesto

Se divide el presupuesto en tres apartados, por una parte el proceso de rodaje, por otra el proceso de

postproducción y finalmente el desarrollo del interactivo. Como una parte del documental fue un

encargo de la empresa, se incluyen los gastos originales que suposo la grabación, asi como la

postproducción del trabajo encargado por la empresa Arrosoir et Persil y se separan de los gastos que

han supuesto o supondrían la realización del documental interactivo.

6.1 Presupuesto real

Equipo humano rodaje (13 días, 8 horas de rodaje a 15 euros la hora)

• Operador de cámara

• Técnico de sonido

Subtotal: 3.120 € Equipamiento técnico rodaje

• 2 Cámaras FULL HD + Objetivos (material de la productora)

• 2 Trípodes (250 €)

• Slyder (material de la productora)

• Micrófono cañon Rode + percha ( 800 €)

• Grabadora Zoom H4 ( material de la productora)

• 2 Disco duro Toshiba 1TB ( 160 € )

• MacBook Pro 2.66GHz Intel Core 2 Duo HARD DRIVE 4GB ( material de la productora)

Subtotal: 1.210 €

Equipo humano Postproducción entrega empresa (10 días 8 horas de edición a 15 € la hora)

• Montador

Subtotal: 1.200 €

Otros:

• Desplazamientos avión a Zimbabwe: 525 € por persona ( operador de cámara y técnico de

sonido)

• Dietas: cubiertas por la empresa

Subtotal: 1.050 €

Total Pago empresa: 6580 € + 21% iva (1381,8 €) = 7961,80 €


17 / 49

6.2 Estimación del coste

Equipo humano interactividad y posproducción documental (8 horas por día). Días calculados a partir

de la tabla de planificación de hitos.

• Montador 27 días (15 euros la hora) : 3240 €

• Guionista 4 días (15 euros la hora) : 480 €

• Auxiliar de montaje 22 días (8 euros la hora): 1408 €

• Operador de cámara 2 días (15 euros la hora): 240 €

• Desarrollador interactividad 36 días (15 euros la hora): 4320 €

• Diseñador interactividad 16 días (15 euros la hora): 1920 €

Subtotal: 11608 €

Equipamiento técnico Postproducción e interactividad

• iMac 27” 3.5GHz Quad-core Intel Core i7 HARD DRIVE 1TB Fusion Drive (material de la

productora)

Software Postproducción e interactividad

• Adobe Premier Pro ( software de la productora)

• Adobe Photoshop ( software de la productora)

• Adobe Encoder ( software de la productora)

• Pluraleyes (66,40 €)

• Klynt (59,29 €)

• Filezilla (gratuito)

• Dominio 1&1 (101,49 € anuales)

Subtotal: 227,18 € (iva incluido)

Total estimado: 11608 € + 21%i iva (2437,68 €) + 227,18 = 14272,86 €

Los gastos reales incurridos para la realización del documental han sido la adquisión de los

programas Pluraleyes, Klynt y el dominio de 1&1 que han sido asumidos por la productora Punto y

coma films.

Total real: 227,18 € (iva incluido)


18 / 49

7. Estructura del resto del documento

Capítulo 2 . Análisis

En este apartado se realiza un estudio de la situación del documental desde varias vertientes. Por una

parte se define y se nombran las características principales de este nuevo genero, se analiza su

producción a nivel nacional e internacional y se recogen las principales aplicaciones existentes para

su creación. Además se incluye una pequeña reseña al documental corporativo en particular.

Capítulo 3. Diseño

En este capítulo dedicado al diseño de la aplicación se presenta la estructura de la interfaz y se

incluyen tanto el guión narrativo del vídeo base como el diagrama interactivo de la aplicación.

También se expone el concepto general de diseño, su usabilidad y su navegación, asi como el

software empleado.

Capítulo 4. Demostración

En el apartado demostración se incluye el uso de la aplicación y se definen los test que se han llevado

a cabo antes de su publicación.

Capítulo 5. Conclusiones y líneas de futuro

Se analiza si los objetivos del trabajo se han cumplido y si la planificación y abasto han sido los

adecuados o si han sufrido modificaciones a lo largo del proceso. Además se plantea una línea de

actuación para mejorar la aplicación en un futuro próximo.


19 / 49

Capítulo 2: Análisis

1. Estado del arte

1.1 Características del documental interactivo

El genero documental es, junto con la ficción, uno de los dos macrogéneros institucionalizados por el

cine y la televisión. El documental es una expresión de un fragmento de la realidad, pero sin embargo,

en ocasiones se hace complicado diferenciar sus márgenes con los de la ficción. Es objeto de este

trabajo de final de máster abordar esta temática desde la perspectiva técnica-tecnológica, además de

la narrativo-textual, pues es necesario de un dominio de la técnica y la tecnología para poder crear

esta obra artística, que a su vez, se ven modificadas sus características gracias a dichas tecnologías.

Con la irrupción de las tecnologías digitales han aparecido nuevas formas de creación, producción y

distribución de producciones audiovisuales que han afectado directamente a las formas de

construcción y consumo de relatos audiovisuales.

En la actualidad, tanto el documental como el medio digital ya han recorrido parte de su camino de

forma separada y han llegado a un grado de maduración notable. Con su unión, cada género adopta

propiedades y características propias del otro, el documental aporta sus modalidades de

representación de la realidad y el medio digital unas nuevas modalidades de navegación e

interacción.

El documental interactivo, aprovechando estas nuevas tecnologías, se configura como un nuevo

formato que aún se encuentra en una fase de crecimiento y adaptación y que tiene como objetivo

romper con la linealidad imperante del discurso audiovisual clásico. Un híbrido entre un documental y

un interactivo que presenta posibilidades de creación prácticamente infinitas, pero que aún no dispone

de fronteras delimitadas y sus límites aún están por descubrir.

Este nuevo tipo de documental permite la comunicación en ambos sentidos, donde el usuario se

conforma como un elemento clave para este nuevo genero, adquiriendo características de autor,

convirtiéndose en el propio creador de su documental al ser capaz de controlar la navegación, la

información que visualiza y el orden del discurso, todo ello gracias a las ventajas que nos ofrece la

interactividad.

Así pues, el documental interactivo es un audiovisual que divulga algún aspecto de la realidad y que

contiene alguna una forma determinada de interactuar con la interfaz del sistema, a través de una

navegación no lineal, donde se rompe la estructura clásica de presentación, nudo y desenlace. La

historia se articula teniendo en cuenta las características propias del medio que lo sostiene, Internet:

la multimedialidad, la hipertextualidad y la propia interactividad.


20 / 49

1.2 Producción de documentales interactivos

Se ha querido realizar un análisis del panorama actual en relación con las empresas y productoras

que se dedican a la producción de documentales interactivos a nivel global, para valorar su inclusión

actual. Se han encontrado pocos actores, concentrados en pocos países que si que están apostado

fuerte por este nuevo formato. Es el caso de Canadá donde existen varias organizaciones que apoyan

y desarrollan el documental para nuevos medios como por ejemplo el National Film Board [7] o la

iniciativa DocSHIFT [8], además de gran cantidad de productoras multimedia como Upian [9]. En

EEUU, también abundan las productoras que se dedican a esta actividad como Honkytonk [10] ,

Submarine Channel [11] o Mediastorm [12].

Sin lugar a dudas los principales promotores a nivel internacional de estas nuevas formas de

documental están siendo las televisiones públicas, como ocurre con ARTE en Francia, con una amplia

variedad de documentales de alta calidad [13], que sirven como complemento de otros documentales

tradicionales emitidos en televisión o bien como entidades independientes. En el caso español, el

primer antecedente lo encontramos con Metamentaldos [14], un documental que se complementa con

una plataforma web. La película explica que es un documental, sus diferentes fases y conceptos,

unido a un interactivo con entrevistas, aula virtual con documentos descargables y un playlist para

seleccionar aquellos fragmentos que se quieren consultar. Dentro del departamento de innovación

audiovisual de la cadena pública española RTVE, encontramos también varios documentales en

diversos formatos mediáticos interactivos para el soporte de Internet, que se encuentran disponibles

en su página web [15].

Además, encontramos diversas asociaciones independientes que se dedican a promover el

documental interactivo como Interdocs [16], dentro de la celebración del festival de cine DOCs

Barcelona [17]. En el caso concreto de Cataluña, la televisión pública TV3 ha abierto diversas

convocatorias anuales de financiación de proyectos de no ficción interactiva para productoras

independientes [18].

En definitiva, nos encontramos con que aún existen pocos exponentes y que la mayoría se

concentran en lengua inglesa y francesa. En el ámbito latino se está investigando relativamente poco,

aunque algunas iniciativas recientes indican un interés creciente por este tipo de narrativa y cada vez

podemos encontrar más proyectos que indagan en esta nuevas formas de narración.

1.3 Software específico existente

Volviendo de nuevo a las tecnologías y herramientas para la realización de documentales interactivos,

nos encontramos con software que ha sido creado específicamente para su creación, nos centramos

en las aplicaciones Korsakow [19], 3WDOC Studio [20] , Zeega [21], Poscorn.js [22] y Klynt [23].


21 / 49

Korsakow permite, sin necesidad de tener conocimientos de programación, generar bases de datos

de videos que interactúen con los relatos de vídeo no lineales. Se crea una interfaz que permite

navegar por los diferentes clips o unidades narrativas a los que se les puede asignar un número de

apariciones determinadas dentro del documental. Aunque antes se presentaba como una herramienta

gratuita, actualmente se pueden obtener descuentos para pequeños proyectos y fines educativos.

3WDOC Studio permite crear contenidos interactivos personalizados a través de un menú, de forma

intuitiva, además posibilita la interacción con otros recursos web como Facebook o Twitter. Es un

reproductor realizado en HTML5 y facilita la edición con herramientas como wordpress o joomla.

Zeega y Popcorn.js son plataformas de edición multimedia que se están consolidando como las dos

grandes alternativas a la programación, ambas trabajan con HTML5 Y JavaScript.

Klynt es otra herramienta de edición y publicación de plataforma de historias interactivas que permite

conectarse con las plataformas como Facebook o Twitter para explorar nuevos formatos narrativos.

1.4 El documental corporativo

Finalmente, se ha considerado oportuno hacer referencia al documental corporativo, un nuevo

elemento muy próximo al vídeo promocional que aún no disfruta de un campo de estudio propio. El

documental corporativo nace para suplir las necesidades referentes a la responsabilidad social

corporativa de las empresas en el ámbito audiovisual, donde diferentes iniciativas, códigos, normas

están encaminados a promover un comportamiento más ético, sostenible y respetuoso con la

sociedad y el medioambiente. Se trata básicamente de humanizar a la empresa otorgándole valores

de marca y visibilidad más allá de la puramente comercial.


22 / 49

Capítulo 3: Diseño

1. Arquitectura general de la aplicación

1.1 Diagrama general de la reproducción

El diagrama final de la aplicación es el que se puede observar en la figura x, generado

automaticamente a través de Klynt. En apartados siguientes podremos analizar con más detalle su

funcionamiento.

Figura 3: Captura de pantalla que muestra el diagrama de navegación

1.2 Reproductor

El reproductor de la aplicación es minimalista y se reproduce al tamaño preconfigurado del proyecto

Klynt 970x545. Por el momento no se ha incluido la funcionalidad Responsible design. El reproductor

no distrae la atención del usuario y tiene pocas funcionalidades: Botón play/ pause y línea de tiempo

que se ocultan si no mantenemos el cursor encima.

Los elementos interactivos aparecen dentro del cuadro. En la figura X podemos ver los botones de

desplazamiento entre secuencias.


23 / 49

Figura 4: Captura de pantalla del reproductor en funcionamiento

1.3 Footer

En el margen inferior nos encontramos con el footer. Las opciones que se incluyen se explican con

más detalles en el apartado “uso de la aplicación”.

1.4 Skin

Se ha elegido un fondo neutro de color negro para la interfaz que contiene el reproductor.

Figura 5: Captura de pantalla del fondo de la interfaz


24 / 49

2. Arquitectura de la información y diagramas de navegación

2.1 Guión literario vídeo base

Se realizó el guión del vídeo base y se dividió en módulos. Cada color corresponde con cada uno de

los módulos. Los vídeos alternativos y presentación de los artístas ya estaban montados, por lo que

se incluye el guión de cada uno de ellos.

VIDEO

AUDIO

Feria de jardinería de Milán. Stand de Arrosoir

et Persil. Vemos a gente comprando productos.

- Rotulo: Milán, Italia.

Sonido ambiente

Voz off Alain

Feria de jardinería de Milán.Stand de Arrosoir et

Persil.

Una clienta se acerca, compra una golondrina y

pregunta a Alain ( jefe) sobre su procedencia.

Sonido ambiente y voz clienta y Alain.

(Hablan sobre la procedencia del producto y

sobre el workshop en Zimbabwe en Italiano)

Voz off Alain

Fundimos a:

Harare, Zimbabwe, exterior workshop.

Rellenado del container por los trabajadores con

todo el stock que se va a enviar a Europa.

Orden inverso ( de lleno a vacío) con acelerados

-Rotulo: Harare, Zimbabwe

Sonido ambiente ( trabajadores hablando en shona

– lengua oficial de Zimbabwe)

Voz off Alain

Imágenes de Zimbabwe( archivo)

(V.O) Alain

Harare, Zimbabwe

Busto parlante – Andy ( entrevista a la luz de las

velas)

Voz Andy – explicación de los cortes de luz

Harare, Zimbabwe

Busto parlante – Alain

Explicación producción

Imágenes de Zimbabwe: calles, ghettos, niños

bailando, mujeres sacando agua del pozo…

V.O Alain

(V.O) Andy + música Mbira (instrumento tradicional

africano)

( Habla sobre la situación política, económica y

social de Zimbabwe )


25 / 49

Harare, Zimbabwe

Imágenes presentación workshop vacío.

Música Mbira

V.O Alain Grand (jefe)

(Explicación fundación workshop)

Harare, Zimbabwe, Workshop

Imágenes stock

Música Mbira

V.O Alain Grand (jefe)

(Explicación fundación workshop)


Etiquetado y embalado golondrina

Música Mbira


Barnizado golondrina

Música Mbira


Pintado golondrina por Edwin

Música Mbira, funde a:

V.O Edwin presentación edwin


Llega la mujer del jefe con los niños y un pastel

de cumpleaños para Edwin el pintor

Sonido ambiente

Harare, Zimbabwe, ghetoo

Barnizado golondrina ( sin color) + limado

golondrina

Música Mbira


Control de calidad de los productos por Alain y

Enock

Sonido ambiente

V.O Presentación Enock hablando de su trabajo


Busto parlante Enok

Sonido ambiente

Enock hablando sobre (por definir)

Harare, Zimbabwe, ghetto

entrevista a Enock

Sonido ambiente

Enock hablando sobre el diseño de los productos


Ambiente workshop trabajo + bailes panganae

y Select

Sonido ambiente

Música Zimbabwe


Ensamblado golondrina por Inocent

Sonido ambiente

V.O Inocent hablando sobre su trabajo


Otros artistas trabajando con los sopletes en el

mismo espacio

Sonido ambiente

V.O Alain hablando sobre los derechos de los

trabajadores

PAY- DAY con Evermore Sonido ambiente

Imágenes Salomon trabajando en el workshop Salomon hablando sobre su salario

Harare, Zimbabwe, Workshop Sonido ambiente


26 / 49

Redondeo de piezas de la golondrina con

martillo por Diamont + imágenes de Diamont

trabajando


Diamont nos enseña la ropa de marca que se

compra en el mercadillo

Voz Diamont explicando que le gusta vestir con

ropa de marca

Harare, Zimbabwe, billares

Vemos a Diamont jugando a billar con el resto

de compañeros. Todos empiezan a bailar (

Hosman y Evans entre ellos)

Sonido ambiente + música Zimbabwe


Hosman y Evans trabajando

Sonido ambiente


Blessing cortando piezas con la cizalla.

Sonido ambiente


Doctor dibujando piezas en el metal

Sonido ambiente

V.O Doctor hablando sobre él y su trabajo


Doctor entrevista

Sonido ambiente

V.O Doctor hablando de la asociación


Evermore en su casa

Evermore habla sobre la asociacion


Salomon en su casa

Salomon confirma que al asociación no funciona

bien


Reunión de la asociación.

( se presenta el conflicto)

Sonido ambiente

Trabajadores discutiendo las ordenes del día


Corte de los bidones de gasolina.

Sonido ambiente

Conversación Alain con jefe de policia Sonido ambiente voz Alain


Reunión de la asociación 2

( se resuelve el conflicto)

Sonido ambiente

Nimes, Francia, Workshop

Alain haciendo los esbozos de la golondrina

V.O Alain hablando sobre el proceso creativo


Alain trabajando en una escultura con Evermore

Sonido ambiente


Enock llega con los bidones al workshop

Sonido ambiente

V.O Enock hablando del reciclaje

Busto parlante Alain Alain hablando del reciclaje


27 / 49


Plano del bidón de gasolina BP

Música ( por definir)

Tabla 2 . Guión literario video principal

2.1 Diagrama interactivo

Se adjunta diagrama interactivo en PDF.

Los enlaces en color negro representan las conexiones entre módulos, los enlaces rojos son los

enlaces a los vídeos alternativos que aparecen únicamente pausando la reproducción del vídeo

principal, y los enlaces en azul representan los enlaces externos a compra de producto.

Figura 6: Diagrama interactivo de la aplicación


28 / 49

3. Diseño gráfico e interfaz

3.1 Estilos

Se apuesta por un diseño minimalista pero efectivo para la realización del documental. Tipografías de

palo finas pero legibles en color blanco. Sin exceso de elementos gráficos que distraigan la atención.

Juegos de transparencias y sobriedad.

Todos los elementos gráficos introducidos, a excepción de las imágenes, están en escala de grises.

3.1.1 Botones

Todos los botones han sido creados desde Klynt, simplemente se exportaron las imágenes ya

optimizadas para web desde photoshop.

3.1.1.1 Los botones que enlazan a vídeos alternativos poseen la siguiente configuración:

• Fotograma del vídeo que se va a reproducir con una opacidad del 90%, un radio de 20% y

un tamaño de 191 x 107 px

• Tipografía Quicksant a 12 pt en negrita

• Sólido como base del texto color negro puro a 30% de opacidad, un tamaño de 193 x 32 px y

un radio de 20.

Figura 7: Botón a vídeo alternativo

3.1.1.2 Los botones que enlazan a links externos tienen la siguiente configuración:

• Foto del producto a comprar con una opacidad del 90%, un radio de 20% y un tamaño de

189 x 127 px

• Tipografía Quicksant a 12 pt en negrita

• Sólido como base del texto color negro puro a 30% de opacidad, un tamaño variable en

función de la longitud del texto que contiene y un radio de 20.


29 / 49

Figura 8: Botón a link externo

3.1.1.3 Los botones de dirección tienen un tamaño de 49 x 49 px y una opacidad del 30%. Tienen el

tooltip “previous step” y “next step” en función de la dirección de reproducción.

Figura 9: Botón de navegación

3.2 Usabilidad

3.2.1 Formas de interacción

• Control de reproducción de secuencias : El usuario puede navegar adelante y atrás entre

secuencias.

• Control sobre la reproducción de vídeos adicionales : El usuario puede decidir si visualizar un

contenido adicional mientras se encuentra en la reproducción de un vídeo principal.

• Control sobre el tiempo de reproducción de los vídeos : El usuario puede cambiar de módulo

sin esperar a que se acabe y cerrar la pestaña de reproducción de cualquier vídeo adicional.

• Posibilidad de pausar y desplazarse por la línea de tiempo de las secuencias : El usuario

puede desplazarse por la línea de tiempo de cualquier secuencia de vídeo y pausarla cuando

lo prefiera.

• Posibilidad de volver al inicio siempre que se requiera : El usuario puede volver a la pantalla

Home pulsando el botón Home, en cualquier momento de la reproducción.

• Posibilidad de compartir e insertar el documental : En cualquier momento de la reproducción

el usuario puede compartir en enlace del documental en varias redes sociales o incrustar un

reproductor con el documental en cualquier página que lo permita.


30 / 49

• Opción de compra en página externa : El usuario tiene la posibilidad de adquirir los productos

fabricados por los artístas gracias a los enlaces que aparecen en los vídeos adicionales y que

redireccionan a la e-commerce de la empresa.

• Posibilidad de visualizar en pantalla completa.

• Menús de selección de secuencias y vídeos adicionales : El usuario puede acceder a dos

menús “process” y “staff” para ver los contenidos sin necesidad de seguir la linealidad

establecida.

• Mapa interactivo : El usuario puede consultar un mapa interactivo donde ampliar o reducir la

visualización.

3.2.2 Navegación

Se ha pretendido que la navegación fuese lo más intuitiva y poco intrusiva posible. Una de las

principales metas era lograr una navegación fluida y con una interacción obligatoria por parte del

usuario mínima, es decir, que, por ejemplo, cuando se acabase de reproducir un módulo, se pudiera

pasar al siguiente de forma automática, sin necesidad de pulsar ningún botón. De igual forma, aunque

no se planteó en un inicio, se ha decidido que dicha navegación entre módulos también pudiese ser

controlada por el usuario, por ello se incluyeron botones de navegación adelante y atrás. Además, el

usuario dispone de un menú (process) desde el cual puede acceder a cualquiera de los módulos.

El contenido adicional aparece a medida que se reproducen los medios. Se puede acceder a cada

vídeo a través de un botón que aparece sobreimpreso en el vídeo del módulo que se está consultando

y que está activo y visible durante aproximadamente 20 segundos. Durante su aparición la

reproducción de ese módulo no se detiene y si el usuario decide visualizar ese contenido, el vídeo

principal se pone en pausa hasta que se acaba de visualizar el contenido adicional. Además, el

usuario tiene la posibilidad de consultar los vídeos adicionales de presentación de los artístas en el

menú “staff” que está siempre disponible.

En el apartado uso de la aplicación podemos conocer con más detalle las características de la

navegación.


31 / 49

4. Plataformas y software utilizados

4.1 Software interactivo

Después de una búsqueda de plataformas para la realización del presente trabajo, se acotó la

selección a los siguientes softwares para los que se realizo un análisis comparativo con el objeto de

determinar cual sería la herramienta más adecuada para el desarrollo del documental interactivo, en

función de los objetivos que se habían fijado.

SOFTWARE

USABILIDAD

COSTE

OBSERVACIONES

Korsakow

Mac y PC.

No son necesarios

conocimientos de

programación. Es open

source y construido en

Java.

Compatible con cualquier

navegador

La carga un poco lenta /

video entrecortado: en

función de la calidad de los

vídeos.

Aparece logo de la

aplicación al principio.

Posibilidad de compartir el

vídeo directamente en las

redes sociales durante

toda la reproducción.

Los subtitulos no ensucian

el video (aparecen debajo)

Se interrumpe la

reproducción para poder

seleccionar los siguientes

clips a visualizar.

Se puede introducir texto, y

enlaces a videos mientras

La versión 5

dispone de

versión de prueba

( con marca de

agua)

Precio para

proyectos de bajo

presupuesto $50,

para proyectos

académicos un

40% de

descuento ( hay

que enviar un

e-mail)

Para subirlo a la web ocupa

aproximadamente 300 MB en función

de la duración del documental.

Los vídeos adicionales (llamados SNU)

pueden tener una duración de 20

segundos a 2 minutos.

La nueva versión exporta archivos en

.fvl por lo que no es necesaria la

instalación de Shockwave Player para

su reproducción.

No se puede editar video, solo importar

vídeos ya montados.

Formatos compatibles: Video files:

.mp4 (codec: H.264) with AAC audio

Previews: .jpg, .gif, .png, .mp4 (H.264)

Startscreen: .jpg, .png, .gif

Audio files: .wav, .mp3

Subtitles: .srt


32 / 49

se reproduce otro vídeo.

Se puede cambiar el fondo

de reproducción.

Las miniaturas se pueden

reproducir. Pueden ser

texto.

La barra de reproducción

puede mostrarse o no.

Interfaz muy sencilla

3WDOC

Studio

Editor drag and drop, no

son necesarios

conocimientos de

programación.

Escenariza los elementos

multimedia (texto, fotos,

videos y botones) en el

espacio y el tiempo.

Funciona en HTML5.

Posibilidad de conectar con

redes sociales

Uso gratuito y

características

ampliables de

pago.

Posibilidad de convertir archivos de

audio y video en el mismo programa.

Los archivos se suben directamente al

servidor. Puedes descargarlas y

publicarlas en tu web.

Permite introducir todo tipo de

contenido web.

Estadísticas de google analytics.

Ofrece posibilidades ilimitadas de

personalización de diseño.

No funciona la descarga

Zeega

Muy básico. Para gran

público, estética similar a

vine. La aplicación es

on-line.

Gratuito.

Descartado por poco profesional.

Poscorn.js

Funciona con HTML 5

(framework)

Para profesionales

videógrafos y

desarrolladores web.

Necesarios conocimientos

de programación. Poco

intuitivo

Código y plugins

gratuitos (.js)

Permite introduir enlaces a videos,

páginas y otros contenidos mientras se

reproduce el vídeo principal sin

interrupciones.


33 / 49

Klynt

JavaScript HTML 5.

Profesional. Herramienta

intuitiva, Interfaz muy

personalizable y con

muchas posibilidades de

interacción, no solo a

través de links ( scrolls,

zonas activas, ect)

Versión de

prueba. 49€ para

estudiantes.

Visualmente muy atractivo, vistoso

pero simple.

Permite cargar psd para personalizar

la interfaz.

Mapas de navegación para facilitar la

visualización al usuario.

Conectividad con vimeo pro.

Tabla 3 . Tabla comparativa software interactividad

Justificación de la elección

• Finalmente, después de analizar las diferentes herramientas existentes más populares para la

realización de documentales interactivos se decidió apostar por Klynt para la realización del

proyecto.

• Las principales ventajas con respecto al resto de oferta son varias. Por una parte las múltiples

opciones que ofrece con respecto a la interactividad y la personalización de la interfaz y por

otra el precio razonable y el diseño intuitivo del editor. Además, de todas Las herramientas es

la que posee una estética más profesional y mayor compatibilidad con navegadores al

emplear la tecnología JavaScript HTML 5. Se visualizaron también varios proyectos

realizados con esta tecnología para confirmar que efectivamente permitia implementar las

opciones de navegación que interesaban.

4.2 Software edición de vídeo

Para el montaje de los diferentes vídeos se utilizó el software de edición Premier pro. Utilizado por la

autora en el desarrollo de su actividad profesional.

Para evitar problemas en la reproducción desde Klynt, ha sido necesario transformar los videos ya

exportados a una calidad máxima de 970x545 en Highest quality en H264, Audio en ACC a una

frecuencia de muestreo de 48,000Khz y una velocidad de 64 Kbps para que ocupasen entre unos 20

Mb y unos 50 Mb. Se ha utilizado el programa Adobe Encoder que permite modificar todas estas

opciones de compresión.

4.3 Software grafismos

Los botones-imagen también han sido optimizados para web, por lo tanto se han transformado


34 / 49

mediante Adobe Photoshop a JPG web a calidad media.

4.4 Software sincronización

Fue necesaria la sincronización de clips devídeo y audio. Para su realización y para evitar realizarlo

manualmente, ya que habría supuesto un esfuerzo considerable y un desvío de tiempo importante, se

descargó el programa de Red Giant Pluraleyes [24]. Este programa ha supuesto unainversión de 50 €

euros que se han sumado a los 60 € que ha costado Klynt. Pluraleyes ha resultado ser muy eficaz y

ha agilizado también las tareas de edición. Los archivos ya sincronizados se general en formato XML

que pueden ser exportados directamente a Premier.

4.5 Dominio

Se decide contratar un Hosting nuevo especial para proyectos interactivos y contenidos dinámicos y

crear un dominio llamado www.loiseaumigrateur.com con espacio web ilimitado. El servicio unlimited

Plus [25] ha sido contratado a través de 1&1 con la idea de utilizarlo también para otros proyectos de

la productora. Las características del servicio contratado son las siguientes:

• Un dominio incluido y subdominios ilimitados.

• Cuentas de correo ilimitadas

• Espacio web ilimitado

• Trafico ilimitado

• Bases de datos MySQL ilimitadas

• Acceso FTP: 10000

• Un acceso SSH

• Editor web y editor web móvil

• Protección antivirus

4.6 Software PHP

Para subir el interactivo se ha necesitado descargar un programa de FTP, en este caso se ha

empleado Filezilla por ser de uso gratuito y conocido por la autora. Se realizaron pruebas de subida

para confirmar que la solución PHP era la adecuada.


35 / 49

Figura 10: Captura de pantalla prueba de configuración Filezilla


36 / 49

Capítulo 4: Demostración 1. Uso de la aplicación

El usuario accede al documental interactivo después de haber introducido la url:

http://www.loiseaumigrateur.com/ en el navegador de su ordenador o tablet.

El primer vídeo que se reproduce automáticamente es un breve resumen del proceso productivo de la

golondrina de metal. Una vez finalizado el vídeo, automaticamente aparecen las opciones de

selección de idioma. Actualmente no existe ninguna de las versiones subtituladas por lo que cualquier

opción llevará a la reproducción sin subtitulos (multilanguage).

El primer módulo empieza a reproducirse y al minuto aparece en el margen superior izquierdo el

primer botón que reproducirá el primer video adicional y el vídeo principal seguirá reproduciendose. El

botón estará activo y visible durante unos treinta segundos aproximadamente. Si el usuario pulsa el

botón para acceder al contenido, automaticamente la reproducción del vídeo principal se detiene en el

punto en el que se ha pulsado el botón. El vídeo adicional se reproduce y cuando finaliza, la pestaña

se cierra y el video principal inicia la reproducción automaticamente en el minutaje en el que se pausó.

En todo momento el usuario puede cerrar la pestaña del vídeo adicional para continuar con la

reproducción principal. Una vez finalizado el módulo, automáticamente empieza a reproducirse el

siguiente, si no es de interés del usuario, puede saltar al siguiente módulo o al alterior a través de las

flechas laterales.

En el módulo “ About Zimbabwe” el usuario puede acceder a un mapa interactivo donde puede

localizar Zimbabwe en el mapa. El funcionamiento es el mismo que en los módulos anteriores.

En el módulo “Painting” accedemos al primer video adicional de artísta que incluye la posibilidad de

comprar uno de los productos que realiza ese mismo artísta, si clicamos el botón se abrirá una nueva

pestaña en el navegador que redireccionará a la compra del producto desde la e-commerce de

Arrosoir et persil.

El patrón se repite durante los nueve modulos que componen el documental. El módulo 10 indica el

final del visionado y ofrece la posibilidad de comprar la golondrina protagonista.

En el margen inferior izquierdo el usuario dispone de varias opciones:

• Home: Este botón redirecciona a la secuencia “Home” donde se elige el idioma de los

subtitulos.

• Process: En este menú el usuario puede ver todas las fases del proceso, divididas en

módulos y ordenadas. Se marcan con un “check” aquellas secuencias que ya hayan sido

visualizadas.


37 / 49

• Staff: En este menú el usuario puede acceder a todos los vídeos presentación de los artístas.

Se marcan con un “check” aquellas secuencias que ya hayan sido visualizadas.

• Credits: Aparece la información relativa al proyecto y los créditos.

• Punto y coma: Enlace externo a la web de la productora

En el margen inferior derecho el usuario dispone de las opciones siguientes:

• Fullscreen: Activa el modo “pantalla completa”

• Share: Abre un panel que ofrece varias posibilidades para compartir el documental o generar

un código de incrustación.

Además, durante toda la visualitzación, el usuario dispone de la barra de reproducción para avanzar

por la secuencia y el botón de pausa, en el margen inferior.


38 / 49

2. Tests

Las pruebas realizadas antes de la publicación se han dividido de la siguiente forma:

2.1 Navegación:

• Secuencia Inicial correctamente fijada, aparece el logo de una casa roja.

Figura 11: Secuencia inicial

• Los links del Footer funcionan correctamente

Figura 12: Configuración de links del footer

• Los menús “process” y “staff” muestran solo las secuencias que interesa que aparezcan.


39 / 49

Figura 12: Configuración de menús.

• El widged del mapa muestra la ampliación deseada

Figura 13: Configuración de mapa

• Comprobar que todas las secuencias empiezan y acaban donde deben.

Figura 14: Línea de tiempo de una secuencia en Klynt


40 / 49

• Comprobar todos los botones de navegación (next y preview)

Figura 15: Botones de navegación en una secuencia

• Comprobar todas las transiciones automáticas

Figura 16: Configuración de transiciones automáticas

• Comprobar todos los botones a vídeos adicionales con configuración overlay1

Figura 17: configuración overlay

1 Overlay es la opción que permite que los vídeos alternativos se reproduzcan pausando la reproducción del vídeo principal.


41 / 49

• Comprobar todos los links externos con target _blank2

Figura 18: configuración _blank

2.2 Información y datos

• Comprobación del idioma de la interfaz y la información general del proyecto.

Figura 19: Información general del proyecto

2 Target_blank es la opción que permite que un enlace externo se abra en una nueva pestaña.


42 / 49

• Comprobar los títulos de secuencia

Figura 20: Títulos de secuencia

2.3 Social

• Comprobar que funcionen todas las opciones para compartir en redes sociales

Figura 21: Compartir proyecto

2.4 Medios

• Comprobar la compresión de todos los fotos y vídeos

• Comprobar todas las miniaturas

Figura 22: Vista de las miniaturas en el menú process


43 / 49

Capítulo 5: Conclusiones y líneas de futuro

1. Conclusiones

Una vez finalizado el trabajo, se ha querido analizar si se han cumplido los objetivos planteados y si la

planificación y el abasto fijados al inicio han sido los acertados, para ello se recuerdan los objetivos

que se habían planteado al inicio del proyecto:

Objectivos de la aplicación/producto/servicio

• Desarrollar un documental corporativo interactivo a partir de material ya rodado.

Objectivos para el usuario

• Configurar un producto audiovisual de no-ficción que permita al usuario ampliar la información

de lo que esta visualizando, siempre que lo requiera y sin necesidad de interferir en la

reproducción del vídeo principal.

• Posibilitar la compra de los diferentes productos que aparecen en el documental al enlazarlos

con la tienda virtual de la empresa.

Objetivos personales del autor del TF:

• Integrar los conocimientos adquiridos durante el master, en especial los relacionados con la

interactividad y el desarrollo de plataformas web, con los conocimientos ya asimilados por la

alumna relacionados con el campo audiovisual.

• Crear un producto que pueda ser comercializado y que sirva como precedente para futuros

proyectos que serán presentados a posibles clientes en el seno de la empresa Punto y coma

films.

Se puede afirmar que todos los objetivos que se plantearon en un inicio se han cumplido de forma

muy satisfactoria, incluidos los personales. El resultado obtenido cumple con todas aquellas pautas

que merecian de especial atención, como por ejemplo el hecho de generar una interactividad para

nada intrusiva, sencilla pero a la vez eficaz, que permitiera tanto una visualización tradicional de

contenidos audiovisuales como el disfrute de las amplias posibilidades que nos ofrece el medio

interactivo.

El reto que suponía construir un puzzle interactivo a partir de un material ya grabado que no se

concibió como tal ha sido superado sin demasiadas dificultades. Al inicio del proyecto se planteó la

realización de un documental de unos 20 minutos, además de los materiales adicionales, y ha

resultado mucho más extenso, con prácticamente 45 minutos de duración. Ha faltado pues, capacidad

de síntesis o bien, una mejor estimación de duración inicial.


44 / 49

Las mayores dificultades han surgido con la planificación, donde inicialmente no se tuvieron en cuenta

tareas que requerían de un esfuerzo a considerar, como por ejemplo las tareas de visualización del

material, la visualización de materiales o la sincronización de audio y video. Por suerte, estos

imprevistos no han supuesto ningún impedimento a la hora de llevar a cabo con éxito el proyecto, a

pesar de haber tenido que dedicar mucho más tiempo del esperado para su realización. Por este

motivo también se decidió prescindir del montaje de varios vídeos adicionales y del último módulo que

faltaba por grabar y prescindir del retoque de color y de audio.

Han surgido cambios a lo largo del desarrollo con el objeto de mejorar la navegación y la

interactividad. En un principio se planteó el hilo conductor como un único vídeo, pero finalmente se

decidió dividirlo en módulos, cada uno con un proceso, para que el usuario también pudiera navegar

entre ellos. De igual forma, no pensaban incluirse los menús de Staff y Process y finalmente se apostó

por incluirlos en pro de mejorar la experiencia de usuario. También se cambió el modo en el que

aparecerían los enlaces a productos para que en ningún momento el usuario sintiera que estaba

siendo “obligado” a realizar ninguna compra.

El principal reto ha sido el hecho de conciliar la realización del TFM con el trabajo como autónomo,

pues en muchas ocasiones se ha visto alterada la planificación debido a rodajes o entregas de última

hora.

Así pues, el balance final es satisfactorio y se espera poder finalizar los últimos detalles para que el

producto quede completamente cerrado, tal y como se plantea en las líneas de futuro.


45 / 49

2. Líneas de futuro

Debido a la satisfacción con el producto obtenido tanto por parte del cliente Arrosoir et persil como de

la productora Punto y coma, se ha creado un plan de futuro para continuar con el proyecto que

engloba las acciones siguientes:

• Introducción de subtítulos: La introducción de subtítulos supone una inversión adicional

que actualmente no se puede asumir. La empresa Arrosoir et Persil se ha mostrado muy

interesada en continuar con el proyecto y asumir los gastos de subtitulado y traducción a

varios idiomas, entre ellos inglés, francés e italiano. Desde Punto y coma se financiaría el

subtitulado y traducción al español. El subtitulado implicaría que habría que crearse un

diagrama de navegación nuevo para cada idioma que quedaría enlazado desde la

secuencia Home.

• Mejora de los vídeos adicionales : Algunos de los vídeos adicionales, en especial las

presentaciones de los artístas, resultan reiterativos en forma y contenido con el vídeo

base por lo que se plantea rehacer alguno de ellos para lograr un mejor resultado global.

• Sintetización de los módulos : El documental se hace un tanto largo, en especial, al

haber sido pensado para el medio on-line. Se plantea reducir la duración de alguno de los

módulos para que ninguno supere los 3-4 minutos.

• Corrección del sonido : Las correcciones de sonido habían sido excluidas del abasto del

proyecto al no disponer de tiempo suficiente para ello. Se retocará el audio de todos los

vídeos y se volverán a incluir en su correspondiente secuencia.

• Corrección de color: Se excluyó del abasto por el mismo motivo que la corrección de

sonido. Se retocará el color de todos los vídeos y se volverán a incluir en su

correspondiente secuencia.

• Introducción de nuevos vídeos y materiales adicionales : Se grabarán más vídeos a incluir

en el proyecto. Se incluirán también las fotografías familiares de los trabajadores, así

como otros contenidos gráfico.

• Grabación del último módulo: Se grabará el último módulo que estaba previsto pero que

por falta de tiempo no ha podido realizarse.

• Adquisión de la versión pro de Klynt : Se plantea adquirir la versión profesional de Klynt

para ofrecer futuros documentales interactivos a otras empresas, de forma que se

ampliarán las características del producto sustancialmente.


46 / 49

Bibliografía

[1] Punto y coma films [sede Web]. España: Punto y coma films; 2015 [1 de febrero de 2015; 5 de

marzo de 2015]. http://filmspuntoycoma.com/.

[2] Arrosoir et persil [sede Web].Francia: Pep’s multimedia; 2013 [4 de marzo de 2015; 5 de marzo de

2015]. http://www.arrosoir-et-persil.fr/.

[3] Gifreu Castells, A. El documental multimèdia interactiu. Una proposta de model d’anàlisi.

Barcelona. Treballs de recerca dels programes de postgrau del Departament de Comunicació, UOC;

2010.

[4] Gifreu Castells, A. El documental interactivo: estado de desarrollo actual. Obra digital: revista de

comunicación. 2013 (4).

[5] Tutoriales Klynt [sede web] Francia [14 de abril de 2015] http://www.klynt.net/klyntwebinar-

catchup/

[6] FTP Filezilla. [sede web] EEUU [10 de abril de 2015] https://filezilla-project.org

[7] National Film Board. [sede Web]. Canada. [consulta: 9 de marzo de 2015] https://www.nfb.ca/

[8] DocSHIFT. [sede Web]. Canada. [consulta: 9 de marzo de 2015] http://doctoronto.ca/docshift

[9] Upian. [sede Web]. Canada. [consulta: 9 de marzo de 2015] http://www.upian.com/en

[10] Honkytonk [sede Web]. Canada. [consulta: 9 de marzo de 2015]

http://www.honkytonk.fr/index.php/about/

[11] Submarine Channel [sede Web]. EEUU. [consulta: 9 de marzo de 2015]

http://www.submarinechannel.com/

[12] Mediastorm. [sede Web]. EEUU. [consulta: 9 de marzo de 2015] http://mediastorm.com/

[13] ARTE, documentary “Syria”. [sede Web]. Francia. [consulta: 11 de marzo de 2015]

http://syria.arte.tv/accueil/fra


47 / 49

[14] Metamentaldoc [sede Web]. España. [consulta: 11 de marzo de 2015]

http://www.marcmolinos.com/#!metamentaldoc/c9z2

[15] Webdocs RTVE. [sede Web]. España. [consulta: 12 de marzo de 2015]

http://lab.rtve.es/index.html.

[16] Interdocs [sede Web]. España. [consulta: 13 de marzo de 2015] http://www.inter-doc.org

[17] DOCS Barcelona [sede Web]. España. [consulta: 13 de marzo de 2015]

http://www.docsbarcelona.com/

[18] Documentals Interactius TV3 [sede Web]. España. [consulta: 13 de marzo de 2015]

http://www.tv3.cat/documentals/interactius

[19] Korsakow. [sede Web]. Canada. [consulta: 17 de marzo de 2015] http://korsakow.org/

[20] 3WDOC. [sede Web]. España. [consulta: 17 de marzo de 2015] http://www.3wdoc.com/es/

[21] Zeega. [sede Web]. EEUU. [consulta: 17 de marzo de 2015] http://zeega.com/

[22] Poscorn.js [sede Web]. EEUU. [consulta: 17 de marzo de 2015] http://popcornjs.org/

[23] Klynt [sede Web]. EEUU. [consulta: 17 de marzo de 2015] http://www.klynt.net/

[24] Pluraleyes Red Giand[sede web] EEUU. [consulta: 10 de abril de 2015]

https://www.redgiant.com/products/pluraleyes/

[25] Alojamientos 1and1 tabla comparativa [sede web] España. [9 de abril de 2015]

http://www.1and1.es/alojamientoweb?ac=OM.WE.WE861K62988T7073a&s_kwcid=AL!3115!3!67732

580928!p!!g!!hosting&ef_id=VLAPZwAAAFWEBSJ6:20150427155655:s#hosting-system


48 / 49

Anexos

Anexo A: Entregables

• Diagrama interactivo : Se incluye en PDF el diagrama de navegación definitivo de la

aplicación.

• Proyecto premier : Se incluye el proyecto de premier donde se han montado los diferentes

modulos audiovisuales del proyecto.

• Script : Script escaneado del material visualizado y ordenado. Faena realizada previa al

montaje.

• Proyecto Klynt : Se incluye el proyecto interactivo realizado en Klynt y los archivos subidos

al servidor. Se ha omitido la carpeta “media” donde se encuentran todos los archivos

multimedia que forman parte del proyecto.

• Presentación: Se incluye en PDF la presentación del proyecto realizada en Power Point


49 / 49

Anexo B: Curriculum Vitae de la autora Laura López Cuello

Estudios oficiales

• Master en Aplicaciones multimedia UOC, on-line 10/2013- Cursando

• Licenciatura en Comunicación Audiovisual UAB, Barcelona 09/2009-09/2013

• CFGS Técnico superior de audiovisuales (perfil multimedia) EMAV, Barcelona

09/2007-06/2009

• Titulación oficial de inglés B2 Escuela Oficial de Idiomes Drassanes, Barcelona

10/2011-07/2013

Cursos y estancias en el extranjero

• Taller “La construcción documental en el campo audiovisual” (80h) EICTV San Antonio de los

Baños, Cuba 10/2014 – 11/2014

• Curso de sonido directo para cine y televisión (20h) Bande a part, Barcelona 07/2014

• Estancia en el extranjero: inglés nivel intermedio (60h) Incredible English. Goa, India

10/2013-11/2013

• Curso SEO y posicionamiento web (60h) Gesto Formación. Online 06/2012-09/2012

Experiencia profesional

• Puntoycoma films (12/2013 - actualidad) Co-fundadora y CEO

• Minimal Films (03/2013 - 09/2013) Montaje del documental “Els records glaçats” de Albert

Solé, nominado a los premios Gaudí.

• BCNmoviles (07/2012-11/2013 ) Editora de contenidos, SEO, community manager

• Creacions a la carta (10/2010 - 04/2012) Operadora de cámara, editora de videos y redactora

• Itaca Multimedia (01/2009 - 06/2009) Maquetadora de Aplicaciones multimedia

documental interactivo “l’oiseau migrateur”

Documents