Diseño y Desarrollo de Material Multimedia Aplicado
2
ESQUEMA DE LA PRESENTACION
INTRODUCCION: CONCEPTOS BASICOS
DISEÑO DE SISTEMAS MULTIMEDIA
APLICACIONES DE LOS SISTEMAS MULTIMEDIA
CINE GENERADO POR COMPUTADOR
HUMANOS VIRTUALES: APLICACIÓN A LA COREOGRAFIA
+
Sistemas Multimedia
3
CONCEPTOS
BASICOS DE
MULTIMEDIA
ESQUEMA DE LA PRESENTACION (I)
+
DISEÑO DE SISTEMAS MULTIMEDIA
APLICACIONES DE LOS SISTEMAS MULTIMEDIA
CINE GENERADO POR COMPUTADOR
HUMANOS VIRTUALES: APLICACIÓN A LA COREOGRAFIA
4
Comparación del computador con el cerebro humano
Hardware: Lo que tiene existencia física
( el cerebro biológico)
Software: Lo conceptual
(los pensamientos)
5
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...)
6
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
7
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(IV)
8
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:
Comparación del computador con el cerebro humano(V)
9
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.
Plataformas para multimedia
10
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
11
Impacto en software Ayudas con tutoriales de Vídeo
Impacto en Educación Ayuda a profesores Estudiantes van a su ritmo. Ayuda a discapacitados
Presente y Futuro multimedia (II)
12
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.
Comprenda la realidad virtual
13
ESQUEMA DE LA PRESENTACION (II)
DISEÑO DE SI
STEMAS
MULTIMEDIA
+
APLICACIONES DE LOS SISTEMAS MULTIMEDIACINE GENERADO POR COMPUTADOR
HUMANOS VIRTUALES: APLICACIÓN A LA COREOGRAFIA
CONCEPTOS BASICOS DE LOS SISTEMAS MULTIMEDIA
14
ESQUEMA DEL CAPITULO
Hay tres partes:
Planteamiento de Proyectos Funciones de las Áreas de Trabajo Fases de Desarrollo de un Proyecto
15
ESQUEMA DEL CAPITULO
Planteamiento de Proyectos
Funciones de las Áreas de Trabajo
Fases de Desarrollo de un Proyecto
16
Planteamiento del Proyecto
Exige considerar y definir elementos agrupados en cuatro grandes áreas.
AREA REDACCION
AREA ARTISTICA
AREA TECNICA
AREA PRODUCCION
17
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.
18
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.
19
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
20
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 Mayor Menor
Disponib.Tecnolog Ordenad. Multim. Ordenad. Conect.
Coste difusión Estampado copias Hospedaje página
Interactividad Menor Plena
21
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.
22
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.)
23
Principio fundamental: Funcionalidad. Principios generales del Diseño Gráfico de Interfaz:
AREA ARTISTICA (II)
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
24
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)
Coordinador
PRODUCCION
ARTISTICA
TECNICA REDACCION
Director de arte Diseñador
documentalista
guionista
Programador
Especialistas
26
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.
27
GUIA DE LAS FUNCIONES DE LOS MIEMBROS DEL EQUIPO (I)
AREA DE PRODUCCIONCoordinador•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
28
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•Revisión y corrección de textos
29
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
30
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
31
ESQUEMA DEL CAPITULO
Planteamiento de Proyectos
Funciones de las Áreas de Trabajo
Fases de Desarrollo de un Proyecto
32
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.
33
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.
34
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
35
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.
36
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.
Entrada
Z1
Z2
Z1-S1
Z1-S2
Z2-S1
Z2-S2
Z1-S1-N1 Z1-S1-N3
Z1-S1-N4Z1-S1-N2
37
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
38
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
39
Anteproyecto: Documentos adjuntos (IV)
MODELO DE GUION INTERACTIVO A DOS COLUMNASIMAGEN
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
40
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
41
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
42
Modelo de StoryBoard
Elemento Imagen Sonido Programación
Codificación del nodo
Boceto de pantalla
43
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
44
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
45
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
46
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 Definido Revisado Definitivo
Formatos Esbozados Definidos Producidos
Maqueta Navegación
esbozada
Nav. Definida y herramient esc
Nav. Operativa y funcion prob
ARTISTICA
Estilo Esbozado Definido Justificado
Diseño Gráfico Bocetos pantallas Storyboard de la maqueta
Storyboard de la Aplicación
47
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
48
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
49
ESQUEMA DE LA PRESENTACION(III)
APLICACIONES
DE LOS
SISTEMAS MUL
TIMEDIA
+
CINE GENERADO POR COMPUTADOR
HUMANOS VIRTUALES: APLICACIÓN A LA COREOGRAFIA
CONCEPTOS BASICOS DE LOS SISTEMAS MULTIMEDIA
DISEÑO DE SISTEMAS MULTIMEDIA
50
Aplicaciones de los Sistemas Multimedia
51
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.
52
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
53
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.
54
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
55
Un poco de historia
Ayer Junio 2001: “Final Fantasy: La película”. Primera
película animada completamente en 3-D. Escaneado facial.
56
Un poco de Historia
2001- Shrek- Oscar a la mejor película de animación
57
Efectos especiales en películas
TOY STORY Primera totalmente animada computador Colaboración entre Pixar y Disney
58
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
59
Efectos especiales en películas
INDEPENDENCE DAY IGO: Imágenes generadas por ordenador. Composición por capas. Fotogramas clave.
60
Efectos especiales en películas
INDEPENDENCE DAY (II) Batalla aérea entre los cazas alienígenas y los
F18
61
Efectos especiales en películas
INDEPENDENCE DAY (III) La caída del rayo cósmico sobre la casa blanca
62
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
63
Efectos especiales en películas
TITANIC (II) Actores Digitales
características de los seres humanos 500 modelos virtuales control de puntos de movimiento
64
Efectos especiales en películas
TITANIC (III) Escena premiada con el 1997 VFX HQ Award a la
mejor escena:
65
Efectos especiales en películas
MATRIX “Bullet Time”.
66
Efectos especiales en películas
MATRIX (II) “Bullet Time”.
67
Grupo MEGAGrupo de Multimedia Educativa de AlcaláUniversidad de Alcalá
*
Aplicaciones de los Sistemas Multimedia
68
PRESENTACION DEL GRUPO DE INVESTIGACION (I)
+
69
PRESENTACION DEL GRUPO
En el laboratorio.
Coreógrafos e Ingenieros trabajando juntos
+
70
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!
+*
71
Y bien,...¿Qué necesitáis los Coreógrafos?
Fase de Definición Fase de Desarrollo Fase de Test
+
72
DIFERENTES CAMPOS DE APLICACION
UNIDADES DIDACTICAS DE DANZA
HUMANOS VIRTUALES: APLICACION A LA COREOGRAFIA
*
73
UNIDADES DIDACTICAS
+
74
HUMANOS VIRTUALES: APLICACION A LA COREOGRAFIA
•Medicina
•Fisioterapia
•Deportes
•Juegos
+
75
HUMANOS VIRTUALES: APLICACION A LA COREOGRAFIA (II)
•Educación en Danza
•Coreografía
•Análisis de Movimiento
*
76
HUMANOS VIRTUALES: APLICACION A LA COREOGRAFIA (III)
•Creación de los Key-frames por Los usuarios
•El computador crea los pasos intermedios
+
77
HUMANOS VIRTUALES: APLICACION A LA COREOGRAFIA (IV)
•Diferentes cámaras
•Zoom
•Posición
•Orientación
+
78
HUMANOS VIRTUALES: APLICACION A LA COREOGRAFIA (V)
Incorporación de Escenarios Virtuales
Teatro Cervantes Real Modelo Virtual del Teatro Cervantes
*
79
HUMANOS VIRTUALES: APLICACION A LA
COREOGRAFIA(VI)
Múltiples bailarines
*
80
HUMANOS VIRTUALES: APLICACION A LA
COREOGRAFIA(VII)
Análisis de límites espaciales
+
81
ANALISIS DE MOVIMIENTOS.
INVESTIGACION EN EDICION DE VIDEO
+
82
REALISMO DE MOVIMIENTOS
NUEVO MODELADO
+
83
Modelado Facial
+
84
Sistemas de Deformación
+
85
Movimiento de las manos
•Detalles de:• Movimiento de manos• Castañuelas
*
86
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