Diseño y Desarrollo de Material Multimedia Aplicado.

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)

+


APLICACIONES DE LOS SISTEMAS MULTIMEDIA



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


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


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





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





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

+



CONCEPTOS BASICOS DE LOS 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


TOY STORY (II) Renderizado por Sun Microsystems

87 procesadores duales 30 procesadores cuaternarios 46 días de procesado 3 horas cada fotograma

59


INDEPENDENCE DAY IGO: Imágenes generadas por ordenador. Composición por capas. Fotogramas clave.

60


INDEPENDENCE DAY (II) Batalla aérea entre los cazas alienígenas y los

F18

61


INDEPENDENCE DAY (III) La caída del rayo cósmico sobre la casa blanca

62


TITANIC Líquidos

Océano digital Características agua (sw especial) Barco sobre el mar

Humo

velocidad y dirección Nubes y cielo

63


TITANIC (II) Actores Digitales

características de los seres humanos 500 modelos virtuales control de puntos de movimiento

64


TITANIC (III) Escena premiada con el 1997 VFX HQ Award a la

mejor escena:

65


MATRIX “Bullet Time”.

66


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

Diseño y Desarrollo de Material Multimedia Aplicado.

Documents

Transcript of Diseño y Desarrollo de Material Multimedia Aplicado.