Clase 9

Multimedia Digital

Hoy comenzamos a estudiar una categoría de programas, llamados programas de autor, que posibilitan el maquetado y la composición de multimedias digitales. Te compartimos la grabación de la videoconferencia de esta clase.

Procesos y recursos para producir Multimedias Digitales: guión, story board y diagrama de vínculos.

Para llevar adelante el diseño y producción de una obra multimedia, te proponemos una posible metodología de construcción. Esta metodología separa el proceso de construcción en 3 etapas: Pre-producción, Producción y Post-producción.

1

Pre-producción

En la pre-producción, que antecede a la producción, se realiza un análisis que permita identificar las características y los objetivos del mensaje que se quiere elaborar y el público que se quiere alcanzar. Se busca definir el carácter del producto: informativo, persuasivo, educativo, lúdico, otros. 

También se definen: la estrategia de comunicación (qué contenidos y encadenamientos lógicos usaremos), la estrategia creativa (diseño de interfaz, diseño de navegación y diseño del sistema de navegación) y la estrategia de medios (programas a usar, estructura de almacenamiento de insumos y sus características)

En esta etapa, previa se elaboran el guión, el story board y el diagrama de vínculos.

El guión

Es un escrito que explica la idea y la secuencia de pantallas que formarán parte de la multimedia. Así como las características y objetivos del mensaje  y las diferentes estrategias que se usarán.

El story board o guión gráfico

Es una representación visual del guión. Es un esquema gráfico de la idea desglosado por pantallas. Aunque describe el diseño de cada pantalla, no es equivalente a ella. Debe funcionar como un instrumento de comunicación que facilite la producción de la multimedia. Cada página puede incluir una parte gráfica más un detalle escrito que explique las características de los insumos y los vínculos. En muchos casos, los story boards están hechos de bocetos dibujados a mano y notas en los márgenes.Aunque también existen programas específicos para generarlos.

El diagrama de flujo o vínculos

Es una representación visual de las vinculaciones (links) entre las pantallas. Responde al diseño de los encadenamientos lógicos, es decir, de las posibilidades de navegación de la multimedia.

2

Producción

En esta etapa debemos decidir con qué programa y versión realizaremos la maquetación y la preparación de insumos. Para esto es importante identificar las características y condicionantes de las alternativas de programa para poder hacer una evaluación. Deberemos definir un sistema de denominación y guardado de los insumos. También realizaremos la preparación de los insumos teniendo como premisa el principio de economía de recursos.

En esta etapa utilizaremos herramientas como rejillas y módulos, según se haya diseñado la interfaz, para realizar la maquetación de cada página.

Te mostramos un ejemplo de rejilla basada en una modulación 4:3

También en esta etapa colocamos los botones con sus respectivos vínculos (links), y los demás vínculos que se hayan previsto (enlaces externos)

3

Post-producción

En esta etapa se procura detectar posibles errores o fallas, tanto en el texto como en la navegación  para corregirlas. Se considera una etapa muy importante y conviene que participen en ella varias personas, preferiblemente que no hayan intervenido directamente en la producción.

Por último se obtiene el formato de exportación o publicación, como por ejemplo un archivo autoejecutable o un archivo html para utilizar en otras plataformas on-line.

¡Manos a la obra!

Como parte de la Pre-producción, te proponemos que pienses y elabores un guión, bocetes un story-board de las pantallas de la multimedia y diseñes una diagrama de flujo de las pantallas que formarán parte de tu propuesta de multimedia digital. Para eso, te pedimos que, en tu propuesta incluyas el gif animado de marca que realizaste en la clase 8. La multimedia puede tratar sobre el proceso de realización de la marca, o sobre las características del producto o servicio que la marca representa, u otra que quieras, siempre y cuando cumpla con las consignas propuestas. 

Considerá los siguientes condicionantes para la multimedia:

  • Ser preparada para que se visualice en un proyector cuya resolución es de 1024 x 768 píxeles.
  • Incluir la animación 2D realizada en la clase 8.
  • Incluir al menos 1 ilustración y 3 gráficos de mapa de bits. Puede o no incluir videos y sonido. (Podés usar insumos que hayas realizado previamente)
  • Contener entre 6 y 10 pantallas (frames).
  • Contener una proporción equilibrada entre texto y gráficos.
  • Permitir una navegación no lineal, es decir con alternativas de recorrido.

Tené presente que, para la realización de la multimedia, será necesario que pienses en un posible público destinatario del mensaje de la obra. Esto deberá orientar las decisiones de diseño que vayas a tomar y deberá verse reflejado en el guión que realices.

TAREA SINCRÓNICA

CONSIGNA

Cuando tengas listos tú guión, story board y diagrama de vínculos cargalos en el aula virtual.

  • el guión como archivo pdf 
  • el story board y el diagrama de vínculos, como archivos de mapa de bits (si lo hiciste en forma manual y lo fotografiaste) o en formato pdf o de mapa de bits (si lo exportaste de algún programa).

Tenés tiempo hasta mañana viernes 4 de octubre a las 13hs.

Te presentamos Figma

Para maquetar nuestra multimedia digital usaremos Figma, un software privativo que ofrece alternativas de uso gratuitas y en condiciones de legalidad. Esta aplicación puede usarse en línea o descargar una versión para instalar en tu equipo. Esta aplicación tiene gran potencial en la creación de prototipos para el diseño de interfaz de usuario, con la característica que, en su versión online permite la colaboración en tiempo real.

Comencemos conociendo la forma de acceder y algunas características principales de su interfaz.

¡Manos a la obra!

Como parte de la Producción, una vez preparados los insumos necesarios (gráficos de mapa de bits, ilustraciones, textos y otros) podemos comenzar a maquetar nuestra multimedia digital en función de lo propuesto en nuestro guión, story board y diagrama de flujo realizados en la etapa anterior de pre-producción.

Además deberás trabajar configurando al menos un estilo de texto y usando la opción de estilos de color.

Herramientas de diagramación.

 

Comenzamos explorando las posibilidades de diagramación que nos ofrece el programa.

Insumos gráficos de mapa de bits.

 

En este video te explicamos cómo trabaja este programa los insumos de mapa de bits.

Estilos de color.

Estilos de texto.

Navegación.

En este video te mostramos cómo crear elementos gráficos que posibiliten la navegación.

Botones.

Ahora creamos las instancias de uso para los botones.

Una vez que he creado todos los elementos involucrados en la navegación, puedo colocar los vínculos desde el modo Prototype del programa, tal como te mostramos a continuación:

Vínculos y exportación.

Obtenemos el código embebido de nuestra maqueta (código html) y un archivo PDF.

TAREAS ASINCRÓNICAS

1

Cuando la maqueta de tu multimedia esté lista, deberás obtener: el código embebido HTML y un archivo PDF. Además deberás colocar en una carpeta comprimida todos los insumos de mapa de bits que usaste en la multimedia. El peso de la carpeta comprimida no debe superar los 5MB.

Luego cargalos en el Aula Virtual. La fecha de entrega es el lunes 14 de octubre las 8:00.

2

Cuando esté lista, te pedimos que compartas tu multimedia copiando el código embebido (HTML) en el mural que está a continuación (consigná tu nombre, apellido, registro). Desde el siguiente video te mostramos cómo publicar el código en el Padlet.

3

Ya se encuentra disponible en el aula virtual el Cuestionario Asincrónico 5, que tiene fecha de entrega el jueves 17 de octubre a las 8:00 hs.

 
Hecho con Padlet
 
Si llegaste hasta acá, has recorrido toda la clase.