Hoy comenzamos a estudiar una categoría de programas, llamados programas de autor, que posibilitan el maquetado y la composición de multimedias digitales. Esta clase comienza con una videoconferencia a la que podrás acceder desde el siguiente link.
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.
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!
Comenzamos por la etapa de Pre-producción. Te proponemos que pienses y elabores un guión, un story-board y un diagrama de flujo para realizar una multimedia digital. Para esto, te pedimos que hagas la multimedia con base en el Portfolio realizado en el TP4 de Tipografía 2 (elegir un portfolio de quienes integran el Grupo). Podés recuperar lo realizado en Tipo2. (Si no cursas o cursaste Tipografía 2, entonces podés realizarlo con la marca de taller y realizar la multimedia sobre el proceso de realización de la marca, o sobre las características del producto o servicio que la marca representa u otro tema que te parezca). Cualquiera sea tu elección, tu multimedia debe cumplir con las consignas que proponemos a continuación.
Considerá los siguientes requisitos y condicionantes para la multimedia:
Ser preparada para que se visualice en un proyector cuya resolución es de 1024 x 768 píxeles.
Incluir una animación 2D en formato gif (podés usar el gif realizado en la clase 8 o generar uno con el mismo tamaño en píxeles 600 x 600 px).
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 12 pantallas (frames)
Contener una proporción equilibrada entre texto y gráficos.
Permitir una navegación con alternativas de recorrido, es decir, no lineal o secuencial.
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
Actividad equipos (grupos).
Tenés tiempo de resolver estas actividades hasta las 13 hs de mañana viernes 10 de octubre.
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).
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.
¡Continuamos descubriendo más herramientas!
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.
¡Manos a la obra!
Como parte de la Producción, respetando el guión, el story board y el diagrama de flujo propuestos, deberemos pensar los criterios para preparar los insumos que necesitamos (gráficos de mapa de bits, ilustraciones, textos y otros). Es decir, si el destino es pantalla, en el caso de gráficos de mapa de bits: ¿cuál es la condición para lograr la mayor nitidez de visualización? ¿qué formato/s son apropiados? ¿cómo logro contribuir con el principio de economía de recursos computacionales? Una vez pensadas y respondidas estas interrogantes, procedemos a preparar los insumos a utilizar.
Ahora sí, teniendo los insumos listos, nos dedicamos de lleno a maquetar nuestra multimedia digital. Esperamos que configures al menos un estilo de texto y que uses la opción de estilos de color.
Una vez creados todos los elementos involucrados en la navegación, podemos colocar los vínculos desde el modo Prototype del programa, tal como te mostramos a continuación:
Vínculos y exportación.
Colocamos los vínculos y generamos el código embebido de nuestra maqueta (código html) y un archivo PDF.
TAREAS ASINCRÓNICAS
CONSIGNAS
Actividad equipo (grupo).
Tenés tiempo de resolver estas actividades hasta las 8 hs del jueves 16 de octubre.
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.
2
Cuando esté lista tu multimedia, te pedimos que la compartas copiando el código embebido (HTML) en el mural que está a continuación (consigná el nº de Grupo, por ejemplo Grupo 50). 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.
Si llegaste hasta acá, has recorrido toda la clase.