Saltar la navegación

4. Diseño y programación

 

Un adecuado diseño de interfaz y de navegabilidad, con una fragmentación eficaz de los contenidos en múltiples formatos, favorece la participación activa del usuario y su interactuación con la historia que se está contando, eligiendo qué quiere ver y en qué orden (Gifreu, 2011). En ocasiones, esta narrativa no lineal del webdoc llega a resultar muy próxima a la mecánica lúdica del videojuego (Barrientos, 2017).

En lo que refiere al diseño del webdoc, las interfaces suelen atender a diferentes modalidades de navegación. De entre las más habituales, se puede emplear una presentación más simple basada fundamentalmente en la imagen o el vídeo y el uso del scrolling, mediante el cual los materiales se van desplegando a medida que nos desplazamos por la interfaz, frente a otras que incorporan infografía y otros recursos, empleando mecanismos de navegación más complejos como botones, recuadros o desplegables a partir de los cuales el espectador va accediendo a gráficos, vídeos, textos o mapas interactivos, entre otros contenidos adicionales.

Debido al auge y el impulso que ha tomado el webdoc en los últimos años, también han aparecido nuevas soluciones de edición y programación web y han decaído otras existentes. Generalmente, los proyectos de mayor envergadura suelen implementar un soporte técnico y programación web a medida, si bien las posibilidades que ofrece la web son muy grandes y proliferan soluciones asequibles que no exigen conocimientos avanzados de programación, como son los editores interactivos e, incluso, los gestores de contenidos o CMS (Content Management System), que a partir de las múltiples plantillas y recursos disponibles permiten administrar todos los contenidos web de forma eficiente, garantizando una buena experiencia de usuario y sin tener que dominar un lenguaje de programación en profundidad. 

El principal atractivo que ofrece un gestor dinámico de contenidos o CMS para el desarrollo de un documental interactivo es que se pueden crear historias sin tener que programar. Incluso existen múltiples diseños de plantillas previas que pueden ser personalizadas y que facilitan muchísimo la labor de edición en la web. Existen numerosos gestores de contenido, y muchos de ellos son gratuitos, siendo uno de los más conocidos y más básicos WordPress, o bien Joomla o Drupal. 

En cualquier caso el trabajo es prácticamente el mismo en todos los CMS; partiendo del diseño interactivo inicial planteado en la fase inicial del proyecto, se crean y se subdividen las diferentes páginas de la web. Cada página contendrá una sección o subapartado con un material o función específica, ya sean contenidos multimedia del documental u otros adicionales del portal web como créditos, descripción del proyecto, contacto, redes sociales, etc. Y entre cada página se crean enlaces que permiten navegar por todos los recursos.

Como alternativa a los gestores de contenido o CMS, encontramos los editores interactivos. Éstos no son softwares para crear páginas web, sino que están desarrollados expresamente para crear relatos interactivos que pueden soportar archivos de múltiple naturaleza, desde gráficos, documentos de texto hasta audio o vídeos. Pueden trabajar con múltiples formatos y permiten incorporar un cierto grado de interactividad en su exploración. El trabajo con editores interactivos se parece en gran medida al diseño web con CMS, ya que se crea una página principal que funciona como menú inicial, desde el que se puede acceder a otros contenidos enlazados por elementos interactivos incorporados en la propia interfaz como pueden ser botones o flechas de navegación. De este modo, podemos crear diferentes apartados o secciones a modo de páginas independientes que luego podremos interconectar mediante botones y facilitar la navegación de forma aleatoria desde un menú inicial. Finalmente, una vez que se ha concluido el diseño del proyecto interactivo, se puede subir a un servidor web para que funcione como una página o portal web perfectamente accesible por parte del usuario.

Con independencia de las subidas y bajadas de popularidad, e incluso de las apariciones y desapariciones del mercado, los softwares más destacados en la edición interactiva han sido Shorthand, Popcom, Zeega o Klynt. De entre todos estos, Klynt ha sido uno de los editores destacados durante mucho tiempo y ha servido de referencia. Una de las principales características de los editores multimedia interactivos habituales en la producción de webdocs reside en su capacidad para trabajar con texto, imágenes, contenidos de vídeo, gráficos y cualquier tipo de contenido web (Mac, 2014). La estructura del menú, la navegabilidad y la narrativa de los editores interactivos suelen ser muy comunes entre la mayoría, además de poder enlazar recursos de vídeo externos (como, por ejemplo, YouTube).

El funcionamiento habitual de un editor interactivo se articula en torno a la creación de diferentes escenas o secuencias que se van interconectando entre sí mediante una serie de recursos o mecanismos de navegación, que pueden ser por pulsación (botones), ventanas desplegables e incluso la programación de recursos y reacciones automatizadas. De este modo, hay escenas basadas en vídeo como entrevistas con planos recurso u otros bloques del documental que pueden enlazarse a una o más escenas desde un menú de selección al que podemos acceder desde la pantalla. El carácter versátil de estas aplicaciones y la capacidad de trabajo con diferentes formatos permite alternar escenas de vídeo con otras basadas en texto, audio, infografías, etc.

Figura 1. Interfaz del editor interactivo KlyntInterfaz del editor interactivo Klynt
Fuente: Gifreu, 2014

Existe un elemento común en todo el diseño de la plataforma del webdoc, con independencia del software o código de programación empleado, que lo constituye la página de inicio. Habitualmente, la página de inicio puede configurarse mediante la activación de un autoplay, de forma que el vídeo comience desde que se accede a la web, o bien personalizando acciones. En los editores interactivos quizá sea la pieza más fácil de diseñar y a partir de la cual se va elaborando todo el árbol de navegación interactiva. La práctica totalidad de editores interactivos ofrecen librerías de botones, ventanas y recuadros personalizables tanto en diseño como en comportamiento, lo que permite automatizar acciones y comportamientos durante la navegación. Desde aquí, se disponen y configuran los diferentes nodos, su interrelación y las diferentes acciones.

Son cada vez más numerosos los ejemplos de webdoc que desarrollan estas características, al mismo tiempo que amplían el potencial de este formato al introducir novedades que ayudan a repensar este tipo de formato. Sería el caso de Pregoneros de Medellín (Angela Carabalí & Thibault Durand. Grupo Carabalí, 2015). Este webdoc colombiano se anuncia como “La web documental interactiva de los que venden cantando en Medellín - Colombia”, integrando perfectamente el vídeo con los elementos de diseño gráfico esenciales para ubicar al espectador en el mapa de la ciudad y los emplazamientos donde transcurren las historias, a la que se van con infografías constantes en el webdoc, muy intuitivas y simples a la vez que eficaces.

Figura 1. Pregoneros de MedellínPregoneros de Medellín (Angela Carabalí & Thibault Durand, 2015)
Fuente: https://docubase.mit.edu/project/pregoneros-de-medellin/

Desde el inicio te invitan a navegar por el proyecto, llevando a una página interactiva donde puedes desplazarte sobre las calles de la ciudad del título. Para ellos debes mover el cursor del ratón, cruzándote con personas en un video que se activa al interactuar con la pantalla. Gracias al scroll vas avanzando desde la Plaza de Botero y te encuentras con personajes, infiriendo una gran inmersión por el tipo de filmación, de interacción así como el sonido que envuelve la propuesta. La primera es La Jale, que comienza a cantar. Esta información la sabemos porque se activa el audio de esta vendedora cantando y emerge una infografía sobre ella (ver imagen captura). Al cliquear sobre su nombre se activa la opción de ver videos. 

Lo interesante es que para verlos todos debes ir completando el visionado de otros videos, para lo cual debes seguir avanzando por el mapa. Este “desbloqueo” de cada uno de los quince videos –lo que en el webdoc se denomina “historias descubiertas”– supone una estrategia de gamificación muy estimulante para seguir avanzando en el visionado. Los videos tienen una duración de unos 5 minutos aproximadamente, y combinan planos recursos de la ciudad y de cada personaje andando por la calle, con planos más estáticos con los comentarios de los vendedores. Para no agotar al espectador, se ofrece un mapa a la izquierda, que permite ubicarlo en todo momento sobre el callejero de Medellín y guardar el recorrido hecho para contribuir al visionado (haciéndose una cuenta).

Otro caso muy significativo sería el de Las sinsombrero (Tania Balló, Manuel Jiménez y Serrana Torres, 2015), que busca recuperar la figura de aquellas mujeres artistas que participaron de la Generación del 27 y que fueron olvidadas deliberadamente por la historia. Esta propuesta de RTVE representa el modelo más habitual de webdoc con una página de inicio basada en la combinación de imagen y diseño gráfico (ya sea un pequeño fragmento del vídeo, un fotograma o una pieza gráfica a modo de cartel) que sirve de soporte para distribuir los diferentes botones de acceso a los contenidos, perfectamente integrados con la estética, como si de un elemento más del cartel se tratara.

Tras esta primera etapa, se pasa a una cartela informativa que indica cómo proceder con la navegación del webdoc, permitiendo visionar una pieza documental lineal, explorar a través de diferentes videos que fragmentan la narrativa, y participar. Dentro de este último apartado se encuentran dos juegos interactivos para ampliar conocimiento y una Wiki para ampliar información sobre estas mujeres. Para cambiar entre estas modalidades sólo hay que hacer scroll o bien cliquear sobre las flechas que aparecen.

Figura 2. Las sinsombreroLas sinsombrero (Tania Balló, Manuel Jiménez y Serrana Torres, 2015).
Fuente: https://www.rtve.es/lab

Entre las estrategias desarrolladas, una de las más significativas va en torno a lo participativo, ya que se invita a las personas usuarias a aportar testimonios e imágenes de mujeres olvidadas en redes sociales, usando para ello el hashtag #misinsombrero. Así, en la propia interfaz se recoge las imágenes de tuits subidos a la red social Twitter (ahora X). Esto supone parte de la expansión transmedia del proyecto, que se complementa con perfiles en Instagram o Facebook, un proyecto en Wikipedia o un documental lineal disponible en la plataforma RTVE.es

A medida que los proyectos son más ambiciosos e incorporan contenidos novedosos basados en los propios avances tecnológicos, las páginas de inicio cobran un mayor protagonismo, destacando el referente visual en el menú de acceso inicial junto a una estética interactiva mucho más elaborada. De barrio somos, historias de clubes en 360º (Patricio Irisarri, 2019) constituye un ejemplo bastante atractivo donde predomina la imagen como referente de la temática en el menú inicial (incluso fragmentos de vídeo en la pantalla de inicio), y que a la vez se encuentra integrada perfectamente con los elementos de diseño gráfico que conforman la interfaz (iconos, logotipo del proyecto, textos de los botones, etc).

Figura 3. De barrio somos / Historias de clubes en 360º De barrio somos / Historias de clubes en 360º (Patricio Irrisari, 2019).
Fuente: http://www.debarriosomos.com.ar

A pesar de la sencillez de su diseño, nos encontramos ante un proyecto fresco y moderno, que incorpora elementos novedosos como vídeos inmersivos, permite la descarga de un juego de mesa o la lectura de documentos de texto. Todo ello montado sobre un portal web basado en una plantilla de un gestor de contenidos (CMS). Con una plantilla web con disposición de scroll, partimos de una pantalla inicial a partir de la que se disponen todos los elementos y contenidos hacia abajo. Los botones del menú inicial permiten hacer un salto descendente hasta la parte inferior de la página donde se encuentre el apartado seleccionado. Esta disposición en scroll es muy habitual en plantillas básicas CMS que suele combinarse con la configuración de enlaces a otros contenidos dispuestos en otras páginas, tales como enlaces a vídeos de Youtube, etc.

Creado con eXeLearning (Ventana nueva)