Diseño y Desarrollo de Material Multimedia Aplicado

ESQUEMA DE LA PRESENTACION Sistemas Multimedia INTRODUCCION: CONCEPTOS BASICOS DISEÑO DE SISTEMAS MULTIMEDIA APLICACIONES DE LOS SISTEMAS MULTIMEDIA CINE GENERADO POR COMPUTADOR HUMANOS VIRTUALES: APLICACIÓN A LA COREOGRAFIA +

ESQUEMA DE LA PRESENTACION (I) CONCEPTOS BASICOS DE MULTIMEDIA DISEÑO DE SISTEMAS MULTIMEDIA APLICACIONES DE LOS SISTEMAS MULTIMEDIA CINE GENERADO POR COMPUTADOR HUMANOS VIRTUALES: APLICACIÓN A LA COREOGRAFIA +

Comparación del computador con el cerebro humano Hardware: Lo que tiene existencia física ( el cerebro biológico) Software: Lo conceptual (los pensamientos)

Comparación del computador con el cerebro humano (II) ROM (Read Only Memory) contiene instrucciones permanentes. (Respirar) Sistema Operativo: sabe cómo realizar procedimientos estándar (aceptar comandos, administrar memoria..) (Mente que habita y aprovecha: caminar, hablar) Aplicaciones: Procesos que sólo llamamos cuando necesitamos. (navegar un velero, bailar...)

Comparación del computador con el cerebro humano(III) Datos: información que manipulan los programas. (entrada: vista, oído..; salida: gestos, danza, habla..) Dispositivos de entrada: capturan los datos. Dispositivos de salida: muestran los datos. Salida: Impresora Entrada: teclado

Comparación del computador con el cerebro humano(IV) Cerebro humano: Decisiones y cálculos ¿memoria infinita? Computador: El microprocesador calcula y la memoria es limitada (RAM) Memoria RAM volátil (pierde información al apagar) Necesidad de almacenamiento fijo: pen-drive y disco duro. Disco duro

Comparación del computador con el cerebro humano(V) Bus de sistema: Extiende los caminos electrónicos del microprocesador a ranuras para tarjetas de video, sonido... (Sistema nervioso) Todos los elementos forman la mejor herramienta de productividad humana:

Plataformas para multimedia Multimedia: Integración de Múltiples medios Sonido (audio) Vídeo Texto Gráficos Animaciones Plataformas más comunes PC (Personal Computer), Macintosh de Apple, tablets, smartphones.

Presente y futuro multimedia Impacto en libros y revistas Libro de historia Libros de negocios Impacto en telecomunicaciones Internet Fax con voz, texto, sonidos Impacto en televisión Animaciones en vídeo Televisión mientras trabajas

Presente y Futuro multimedia (II) Impacto en software Ayudas con tutoriales de Vídeo Impacto en Educación Ayuda a profesores Estudiantes van a su ritmo. Ayuda a discapacitados

Comprenda la realidad virtual Traje electrónico de movimiento Multitud de sensores Casco con un monitor de computadora La pantalla del casco despliega habitación, edificio, ... Al caminar, la pantalla se actualiza Puede tocar objetos a su alrededor Ejemplo: compra de casas.

ESQUEMA DE LA PRESENTACION (II) CONCEPTOS BASICOS DE LOS SISTEMAS MULTIMEDIA DISEÑO DE SISTEMAS MULTIMEDIA APLICACIONES DE LOS SISTEMAS MULTIMEDIA CINE GENERADO POR COMPUTADOR HUMANOS VIRTUALES: APLICACIÓN A LA COREOGRAFIA +

ESQUEMA DEL CAPITULO Hay tres partes: Planteamiento de Proyectos Funciones de las Áreas de Trabajo Fases de Desarrollo de un Proyecto

ESQUEMA DEL CAPITULO Planteamiento de Proyectos Funciones de las Áreas de Trabajo Fases de Desarrollo de un Proyecto

Planteamiento del Proyecto Exige considerar y definir elementos agrupados en cuatro grandes áreas. AREA TECNICA AREA REDACCION AREA PRODUCCION AREA ARTISTICA

AREA DE REDACCION (I) Se definen los conceptos básicos del Proyecto Objetivos: Establecer el propósito o finalidad del Proyecto Exige justificar su adecuación al mundo digital Género: Situar el Proyecto en un marco de referencia Ficción Información Educación Promocional Expresión Artística Contenidos: Establecer con claridad que información pretende comunicarse Navegación: Diseñar la estructura de la información para facilitar la interactividad de los usuarios.

AREA DE REDACCION (II) (Estructura de Navegación) Diseñar la navegación exige definir el modo en que se comunicará la estructura (función de la Interfaz) ENLACE-Sistema básico de articulación de los nodos BUSQUEDA-Sistema propio que facilite navegación eficaz SECUENCIALIZACION- Privilegiar un orden de lectura de nodos JERARQUIA-Orden lógico de acceso a la estructura SIMILITUD-Asociar los nodos a partir de los elementos comunes MAPAS- Donde estoy? Donde he estado ya? Donde puedo ir? AGENTES-Recursos de guías y sistemas de ayuda.

AREA DE PRODUCCION Adecúa el Proyecto Interactivo al mercado, estudia su viabilidad, y establece las estrategias de desarrollo y distribución. Cliente/Patrocinador-El cliente encarga el trabajo y el patrocinador lo financia. Usuario-Personas para las cuales ha sido diseñada la aplicación. Presupuesto-Recursos humanos, materiales y técnicos se requieren. Marketing y Distribución-Modo de acceso de los usuarios a la aplicación. Plan de trabajo-Tareas y objetivos intermedios a desarrollar y disposición temporal de las tareas. Diagramas PERT ( Program Evaluation and Review Technique) Gantt diagrams

AREA TECNICA (I) Estudian y resuelven los aspectos asociados a su implementación en un medio digital. Características Soportes off-line Soportes on-line Transporte Pleno Depende acceso Almacenamiento Limitada Ilimitada Actual. Contenidos Nueva Edición Tiempo real Transparencia uso Mayor Menor Velocidad acceso Disponib.Tecnolog Ordenad. Multim. Ordenad. Conect. Coste difusión Estampado copias Hospedaje página Interactividad Plena

AREA TECNICA (II) Formatos Discernir en función del contenido, usuario y soporte, los formatos mas adecuados de: Texto Imagen Animaciones Audio Vídeo Considerar límites de capacidad o velocidad de acceso Maqueta Se elabora un prototipo que contiene solo desarrollos parciales.

AREA ARTISTICA (I) Realizan la definición estética del Interactivo. Estilo: Identidad Visual del Proyecto de acuerdo a los contenidos, género de la aplicación y usuarios destino. Aspecto general de la Aplicación: color, tipografía, composición. Predispone la actitud del usuario hacia la aplicación.(Carátulas) Diseño Gráfico de Interfaz: Interfaz gráfica de Usuario (Graphical User Interface, GUI) Conjunto de elementos que integran las pantallas (fondo, texto, gráficos en 2D y 3D, fotografías, animaciones, ventanas de vídeo,etc.)

AREA ARTISTICA (II) Principio fundamental: Funcionalidad. Principios generales del Diseño Gráfico de Interfaz: Transparencia Uso intuitivo, fácil de manejar Simplicidad Economía de Recursos Identidad Reconocible, memorable Equilibrio Armonía entre los elementos Unidad Estilística y Temática Coherencia Interna y Externa, adecuación Contraste Jerarquía entre los componentes

ESQUEMA DEL CAPITULO Planteamiento de Proyectos Funciones de las Áreas de Trabajo Fases de Desarrollo de un Proyecto

FUNCIONES DE LOS MIEMBROS DEL EQUIPO (I) documentalista PRODUCCION Programador REDACCION TECNICA Coordinador ARTISTICA guionista Especialistas Director de arte Diseñador

FUNCIONES DE LOS MIEMBROS DEL EQUIPO (II) En toda la industria audiovisual, la tarea se desarrolla en equipos. La complejidad demanda la participación coordinada de profesionales. Veamos diversos perfiles de trabajo: a veces una misma persona desempeña más de un perfil.

GUIA DE LAS FUNCIONES DE LOS MIEMBROS DEL EQUIPO (I) AREA DE PRODUCCION Coordinador Liderazgo del equipo Relación con el cliente Marketing del Proyecto Establecimiento del plan de trabajo Control del Calendario Elaboración de Presupuestos Gestión de Recursos Control del Resultado Productor Ejecutivo Gestión administrativa Marketing de la empresa Relación con los clientes Elaboración de presupuestos Gestión de recursos Director del Proyecto Liderazgo del equipo Establecimiento del plan de trabajo Control del calendario Control del Resultado

GUIA DE LAS FUNCIONES DE LOS MIEMBROS DEL EQUIPO (II) AREA DE REDACCION DOCUMENTALISTA Investigación Identificación y selección de fuentes Acceso y valoración de la Información Redacción de Borradores Revisión y corrección de textos GUIONISTA Elaboración del hipertexto Diseño de Navegación Definición del sistema de ayuda Definición de metáforas y mapas Creación de historias y personajes

GUIA DE LAS FUNCIONES DE LOS MIEMBROS DEL EQUIPO (III) AREA ARTISTICA Director de Arte Definición estética global Supervisión del diseño gráfico Coordinación con especialistas Control del estilo final Diseñador Gráfico Diseño de Interfaces Creación de elementos visuales Composición de pantallas

GUIA DE LAS FUNCIONES DE LOS MIEMBROS DEL EQUIPO (IV) AREA TECNICA Programador Compilación de la maqueta Integración multimedia Funcionalidad de la Navegación Operatividad del soporte Realización de pruebas Beta Especialistas Composición musical, edición y efectos de sonido Grabación, edición y postproducción digital de Video Fotografía y tratamiento digital de imágenes Creación de objetos, entornos y animaciones 2D y 3D Creación de entornos de realidad virtual

ESQUEMA DEL CAPITULO Planteamiento de Proyectos Funciones de las Áreas de Trabajo Fases de Desarrollo de un Proyecto

DESARROLLO Proceso gradual: partiendo de una idea original o una necesidad, se llega hasta la elaboración de un prototipo Tres fases sucesivas dentro del proceso: PRESENTACION PRELIMINAR ANTEPROYECTO MEMORIA Y MAQUETA Este sistema ayuda a organizar temporalmente las tareas del equipo e informar al cliente de la evolución del proyecto.

Fase I: Presentación Preliminar Objetivo: establecer la naturaleza del proyecto y su estilo general. Se definen las grandes líneas en todas las áreas. Se define un título comercial atractivo (estrategia de marketing) Se consigna la Denominación del equipo Se identifican las funciones de los miembros del equipo de trabajo. Se establece el soporte escogido Sinopsis o resumen del contenido del proyecto Identificar al cliente y el perfil del usuario final Se define de modo general la estructura de Navegación del hipertexto SE define el sistema de ayuda para guiar la navegación en el interactivo. Complejidad inversamente proporcional a la transparencia del sistema de navegación. Se dibujan los bocetos de las pantallas, estilo general del interfaz gráfico.

PRESENTACION PRELIMINAR TITULO COMERCIAL DENOMINACIÓN DEL EQUIPO RELACION DE MIEMBROS Y FUNCIONES SOPORTE GENERO SINOPSIS/OBJETIVOS CLIENTE/PATROCINADOR PERFIL DE USUARIO ESTRUCTURA DE NAVEGACION METAFORA SISTEMA DE AYUDA ESTILO GENERAL Y DISEÑO GRAFICO DE INTERFAZ

Fase II: Anteproyecto Se confirman algunos datos de la Presentación preliminar Anteproyecto: Guía para el desarrollo de la aplicación Se establecen los contenidos Se realiza el diagrama de la estructura hipertextual Se desarrolla el sistema de ayuda Se realizan los estudios gráficos de la interfaz El título comercial del proyecto se complementa con un eslogan o frase comercial Se planifica la distribución del producto La presentación del anteproyecto se acompaña de unos documentos adjuntos que configuran el diseño de la aplicación.

Anteproyecto: Documentos adjuntos (I) DIAGRAMA DEL HIPERTEXTO Esquema gráfico de la articulación del contenido editorial en nodos y enlaces Es necesario fragmentar el contenido editorial disponiéndolo en Zonas, Secuencias y Nodos Codificar las páginas Z1-S1-N4 El diagrama del hipertexto constituye el Mapa Interactivo. Z1-S1 Z1-S1-N1 Z1-S1-N3 Z1 Z1-S2 Entrada Z2-S1 Z1-S1-N2 Z1-S1-N4 Z2 Z2-S2

Anteproyecto: Documentos adjuntos (II) GUION DE CONTENIDOS Organiza de modo textual el contenido editorial del proyecto Utiliza la codificación del diagrama de hipertexto Formatos tradicionales del guión audiovisual: Una columna para proyectos de ficción Dos columnas (Imagen y sonido) para proyectos informativos y educativos

Anteproyecto: Documentos adjuntos (III) MODELO DE GUION INTERACTIVO A UNA COLUMNA Z1-S1-N2 (Codificación Zona-Secuencia-Nodo) Exposición descriptiva de localización, personajes y acciones PERSONAJE (diálogo del personaje) Alternativas de navegación: x/y/z Si x, luego Z1-S1-N3 (Nodo de destino) Si y, luego Z1-S2-N1 Si z, luego Z2-S1-N1 Z1-S1-N3 Exposición descriptiva...etc Z1-S2-N1 Exposición descriptiva....etc Z2-S1-N1 Exposición descriptiva...etc

Anteproyecto: Documentos adjuntos (IV) MODELO DE GUION INTERACTIVO A DOS COLUMNAS IMAGEN Z1-S1-N2 (Codificación) Exposición descriptiva de: Elementos gráficos Transcripción de textos Identificación de clips de vídeo (tiempo en segs) Alternativas: x/y/z Si x, luego Z1-S1-N3 Si y, luego Z1-S2-N1 Si z, luego Z2-S1-N1 SONIDO Identificación clips de audio (tiempo en segs) Efectos de sonido PERSONAJE / LOCUCION Diálogo del personaje

Anteproyecto: Documentos adjuntos (V) GUION DEL SISTEMA DE AYUDA Indica el tipo de sistema elegido Personaje que guía al usuario Secuencia previa de instrucciones o reglas del juego Sistema sensible al contexto Mapas de orientación y navegación También indica su funcionalidad Cuándo y cómo se hace visible al usuario

Anteproyecto: Documentos adjuntos (VI) STORYBOARD Guión gráfico de las zonas del interactivo Requiere cooperación entre las áreas: Área de redacción- aporta los textos literarios Área artística- ilustra en bocetos el arte de pantallas Área técnica- plantea la funcionalidad de la aplicación antes de programarla

Modelo de StoryBoard Codificación del nodo Boceto de pantalla Elemento Imagen Sonido Programación

Anteproyecto: Documentos adjuntos (VII) PLAN DE TRABAJO Secuencia temporal del conjunto de tareas a acometer en cada área Calendario de Ejecución del proyecto Es un plan de trabajo que permite controlar el ritmo de desarrollo Así se prevén la asignación de recursos humanos y técnicos

Fase III: Memoria y Maqueta Fase final del diseño, previa al desarrollo y producción Memoria: documento que recoge los informes, guiones, bocetos y experiencias para justificar la viabilidad del proyecto Compete al área de redacción y artística Maqueta: Comprobación de la operatividad en los soportes a utilizar (pruebas alfa y beta). Prototipo del interactivo

Fase III: Memoria y Maqueta PARTES DE LA MEMORIA PORTADA (Título, frase comercial, nombre del equipo, datos de contacto, fecha) INDICE INFORMES de los miembros responsables de las áreas Breve descripción del trabajo realizado Decisiones adoptadas y justificación Problemas superados Experiencia personal resultante Resto de DOCUMENTOS: plan de trabajo, estudio de costes, diagrama de hipertexto, sistema de ayudas ANEXOS: StoryBoard

Situación del Proyecto en cada Fase REDACCION Present. Prelim Anteproyecto Memoria y maq Objetivos Definidos Revisados Definitivos Género Definido Revisado Definitivo Contenidos Esbozados Borrador Redactados Navegación Modelo de hipertexto Hipertexto elaborado Hipertexto definitivo TECNICA Soporte Formatos Producidos Maqueta esbozada Nav. Definida y herramient esc Nav. Operativa y funcion prob ARTISTICA Estilo Esbozado Justificado Diseño Gráfico Bocetos pantallas Storyboard de la maqueta Storyboard de la Aplicación

Funciones de los miembros del equipo en cada fase Presentac prelim Anteproyecto Memoria y maq REDACCIÓN Identificar fuente Definir objetivos y género Análisis de productos similares Obtener documentación Redactar borrador Elaborar estructura hipert. Relación de fuentes utilizadas Corrección textos Edición storyboard ARTÍSTICA Esbozo estilo y análisis de estilos aplicables Bocetos pantallas Definición estilo gráfico y audiovisual Elementos interfaz Definición estrategia imagen del producto. Storyboard TÉCNICA Elección herramientas Identificación material audiovisual Pruebas navegación. Producción material original y adaptado Montaje maqueta

Guía para la Evaluación AREA REDACCION Consecución de finalidad del proyecto Claridad del planteamiento Adecuación al medio digital Alcance de la interactividad ofrecida AREA TECNICA Utilización de soportes complementarios Eficacia comunicativa de los formatos Eficacia para demostrar la funcionalidad Grado de desarrollo AREA ARTISTICA Grado de Unidad y coherencia interna Contribución a la transparencia de la Navegación Originalidad Interfaz Intuitiva

ESQUEMA DE LA PRESENTACION(III) CONCEPTOS BASICOS DE LOS SISTEMAS MULTIMEDIA DISEÑO DE SISTEMAS MULTIMEDIA APLICACIONES DE LOS SISTEMAS MULTIMEDIA CINE GENERADO POR COMPUTADOR HUMANOS VIRTUALES: APLICACIÓN A LA COREOGRAFIA +

Cine generado por computador Aplicaciones de los Sistemas Multimedia Cine generado por computador

Un poco de historia AÑOS 70 TV: Tecnologías "Anima" y "Scanimate“. 1973: Conferencia SIGGRAPH (Special Interest Group on Computer Graphics). “El Imperio Contraataca” 1976: “Alien” (Systems Simulation). Primera animación por computador en una película.

Un poco de historia AÑOS 80 Mejora del hardware. “Fractales” y “ray-tracing”. 1980: “Tron”. 1982: “Star Treck II: The Wrath of Khan”. Primer uso de paisaje generado por fractales 1985: “El joven Sherloch Holmes”. Primer carácter CGI. 1988: Uso de “morphing” en “Willow”. 1988: “Tin Toy”. Primera película animada creada completamente por ordenador y ganadora de un Oscar. 1989: “The Abyss”.Primer efecto de agua 3D digital

Un poco de historia AÑOS 90 1991: “Terminator II”. 100 elementos CGI, 5 minutos y medio de película. 1991: “La Bella y la Bestia”. CGI + animación mediante celdas. 1991: “Jurassic Park”. DID (Dinosaur Input Device) movido mediante “stop-motion”. 1995: “Toy Story”. Nominada al Oscar.

Un poco de historia EL FUTURO Incremento de velocidad del hardware. Diseño de nuevo software. Mejoras en el movimiento de Actores virtuales Mejoras en los paisajes 3D

Un poco de historia Ayer Junio 2001: “Final Fantasy: La película”. Primera película animada completamente en 3-D. Escaneado facial.

Un poco de Historia 2001- Shrek- Oscar a la mejor película de animación

Efectos especiales en películas TOY STORY Primera totalmente animada computador Colaboración entre Pixar y Disney

Efectos especiales en películas TOY STORY (II) Renderizado por Sun Microsystems 87 procesadores duales 30 procesadores cuaternarios 46 días de procesado 3 horas cada fotograma

Efectos especiales en películas INDEPENDENCE DAY IGO: Imágenes generadas por ordenador. Composición por capas. Fotogramas clave.

Efectos especiales en películas INDEPENDENCE DAY (II) Batalla aérea entre los cazas alienígenas y los F18

Efectos especiales en películas INDEPENDENCE DAY (III) La caída del rayo cósmico sobre la casa blanca

Efectos especiales en películas TITANIC Líquidos Océano digital Características agua (sw especial) Barco sobre el mar Humo velocidad y dirección Nubes y cielo

Efectos especiales en películas TITANIC (II) Actores Digitales características de los seres humanos 500 modelos virtuales control de puntos de movimiento

Efectos especiales en películas TITANIC (III) Escena premiada con el 1997 VFX HQ Award a la mejor escena:

Efectos especiales en películas MATRIX “Bullet Time”.

Efectos especiales en películas MATRIX (II) “Bullet Time”.

Humanos Virtuales: Aplicación a la Coreografía Aplicaciones de los Sistemas Multimedia Humanos Virtuales: Aplicación a la Coreografía Grupo MEGA Grupo de Multimedia Educativa de Alcalá Universidad de Alcalá *

PRESENTACION DEL GRUPO DE INVESTIGACION (I) +

PRESENTACION DEL GRUPO En el laboratorio. Coreógrafos e Ingenieros trabajando juntos +

TECNOLOGIA MULTIMEDIA Y DANZA ¿Y si la tecnología de computadores sirviera al mundo de la Danza....? ¿Por que no probar la experiencia? ¡Veamos los resultados! +*

Y bien,... ¿Qué necesitáis los Coreógrafos? Fase de Definición Fase de Desarrollo Fase de Test +

DIFERENTES CAMPOS DE APLICACION UNIDADES DIDACTICAS DE DANZA HUMANOS VIRTUALES: APLICACION A LA COREOGRAFIA *

UNIDADES DIDACTICAS Laban VIDEO HISTORIA Notas Musicales +

HUMANOS VIRTUALES: APLICACION A LA COREOGRAFIA Medicina Fisioterapia Deportes Juegos +

HUMANOS VIRTUALES: APLICACION A LA COREOGRAFIA (II) Educación en Danza Coreografía Análisis de Movimiento *

HUMANOS VIRTUALES: APLICACION A LA COREOGRAFIA (III) Creación de los Key-frames por Los usuarios El computador crea los pasos intermedios +

HUMANOS VIRTUALES: APLICACION A LA COREOGRAFIA (IV) Diferentes cámaras Zoom Posición Orientación +

HUMANOS VIRTUALES: APLICACION A LA COREOGRAFIA (V) Incorporación de Escenarios Virtuales Teatro Cervantes Real Modelo Virtual del Teatro Cervantes *

HUMANOS VIRTUALES: APLICACION A LA COREOGRAFIA(VI) Múltiples bailarines *

HUMANOS VIRTUALES: APLICACION A LA COREOGRAFIA(VII) Análisis de límites espaciales +

ANALISIS DE MOVIMIENTOS. INVESTIGACION EN EDICION DE VIDEO +

REALISMO DE MOVIMIENTOS NUEVO MODELADO +

Modelado Facial +

Sistemas de Deformación +

Movimiento de las manos Detalles de: Movimiento de manos Castañuelas *

Interdisciplinariedad Multimedia agrupa diferentes tipos de información Multimedia sirve para múltiples campos Multimedia debería unir múltiples mentes para lograr objetivos comunes en todas las áreas