metodologias / estructuras - personales.upv.espersonales.upv.es/moimacar/download/multimedia.pdf ·...
Post on 26-Sep-2018
224 Views
Preview:
TRANSCRIPT
GUI/PROYECTO MULTIMEDIA
Dpto: EsculturaProfesor: Moisés Mañasmoimacar@esc.upv.es
METODOLOGIAS / ESTRUCTURAS
Interfaz gráfica de usuario
Graphical User Interfaz
GUIGraphical User Interfaz
En el contexto del proceso de interacción persona-ordenador, la interfaz gráfica de usuario (IGU), es el artefacto tecnológico de un sistema interactivo que posibilita, a través del uso y la representación del lenguaje visual, una interacción amigable con un sistema informático.
GUIGraphical User Interfaz
En el contexto del proceso de interacción persona-ordenador, la interfaz gráfica de usuario (IGU), es el artefacto tecnológico de un sistema interactivo que posibilita, a través del uso y la representación del lenguaje visual, una interacción amigable con un sistema informático.
La interfaz gráfica de usuario es un tipo de interfaz de usuario que utiliza un conjunto de imágenes y objetos gráficos (iconos, ventanas, tipografía) para representar la información y acciones disponibles en la interfaz.
Habitualmente las acciones se realizan mediante manipulación directapara facilitar la interacción del usuario con la computadora.
Surge como evolución de la línea de comandos de los primeros sistemas operativos y es pieza fundamental en un entorno gráfico.
GUIGraphical User Interfaz
GUIGraphical User Interfaz
Ejemplo de interfaz GUI
• Escritorio de Windows• Escritorio de MAC• X-Windows de Linux• Redhat Linux 5.0
GUIGraphical User Interfaz
Ejemplo de interfaz GUI
• Escritorio de Windows• Escritorio de MAC• X-Windows de Linux• Redhat Linux 5.0
GUIGraphical User Interfaz
Ejemplo de interfaz GUI
• Escritorio de Windows• Escritorio de MAC• X-Windows de Linux• Redhat Linux 5.0
GUIGraphical User Interfaz
Precursor:
Douglas C. Engelbart
Nace de la mano de Douglas C. Engelbart.
En 1960 desarrolló la primera interfaz gráfica en los laboratorios de XEROX.
Este desarrollo no era comercial, se encontraba dentro los proyectos de los laboratorios de de investigación de Xeros, hasta 1981
GUIGraphical User Interfaz
Precursor:
La estación de trabajo Xerox Star, conocida oficialmente como el "8010 Star Information System" (Sistema de Información Estrella 8010) fue introducida por Xerox Corporation en 1981.
XEROX START
Primer sistema comercial en incorporar varias tecnologías corrientes hoy en computadores personales:
• Pantalla con bitmaps• Interfaz gráfica de usuario basada en ventanas, iconos, carpetas• Ratón• Red Ethernet• Servidores de archivos• Servidores de impresoras • e-mail.
1981
GUIGraphical User Interfaz
Precursor:
Fundan la empresa en 1976 -> Steve Jobs y Steve Wozniak
APPLE MACINTOSH
Creen en la idea de un ordenador fácil de usar manejado por un ratón y teclado (Apple I, el primer ordenador de Apple -1976)
Con esta idea desarrollan "Lisa“en1983 >> [Local Integrated Software Architecture] (El nombre es en honor a la hija de Steve Jobs)
1984 : Se empiezan a comercializar sus equipos
1984
Lisa 2Apple I
GUIGraphical User Interfaz
Precursor:
WINDOWS 1.01
Es un interfaz gráfico de entorno operativo de 16 bits.
Aparece en Noviembre del, 1985
1985
GUIGraphical User Interfaz
PUI ZUIZooming User InterfaceParc User Interface
Son elementos gráficos como Ventanas, menus, radio bottons, Check box, etc..
Son sistemas en los que usuario interacciona por medio entornos graficos 3D +2D (2.5D)
Tipos
PROYECTO MULTIMEDIA
Esta basado en la integración de disciplinas
PROYECTO MULTIMEDIA
Esta basado en la integración de disciplinas
TECNOLOGÍAS DE PROCESADODE TEXTOS
PROYECTO MULTIMEDIA
Esta basado en la integración de disciplinas
TECNOLOGÍAS DE PROCESADODE TEXTOS TECNOLOGÍAS SOBRE GRAFISMO
DIGITAL
PROYECTO MULTIMEDIA
Esta basado en la integración de disciplinas
TECNOLOGÍAS DE PROCESADODE TEXTOS TECNOLOGÍAS SOBRE GRAFISMO
DIGITALTECNOLOGÍAS SOBRE
VIDEO DIGITAL
PROYECTO MULTIMEDIA
Esta basado en la integración de disciplinas
TECNOLOGÍAS DE PROCESADODE TEXTOS TECNOLOGÍAS SOBRE GRAFISMO
DIGITALTECNOLOGÍAS SOBRE
VIDEO DIGITAL
TECNOLOGÍAS SOBRESONIDO DIGITAL
PROYECTO MULTIMEDIA
Esta basado en la integración de disciplinas
TECNOLOGÍAS DE PROCESADODE TEXTOS TECNOLOGÍAS SOBRE GRAFISMO
DIGITALTECNOLOGÍAS SOBRE
VIDEO DIGITAL
TECNOLOGÍAS SOBRESONIDO DIGITAL TECNOLOGÍAS SOBRE
PROGRAMACIÓN
PM
TECNOLOGÍAS DE PROCESADODE TEXTOS
TECNOLOGÍAS SOBRE GRAFISMODIGITAL
TECNOLOGÍAS SOBREVIDEO DIGITAL
TECNOLOGÍAS SOBRESONIDO DIGITAL
TECNOLOGÍAS SOBREPROGRAMACIÓN
PM
TECNOLOGÍAS DE PROCESADODE TEXTOS
TECNOLOGÍAS SOBRE GRAFISMODIGITAL
TECNOLOGÍAS SOBREVIDEO DIGITAL
TECNOLOGÍAS SOBRESONIDO DIGITAL
TECNOLOGÍAS SOBREPROGRAMACIÓN
- TRATAMIENTO DE TEXTOS- CONFIGURACIÓN DE HIPERTEXTO- TEXTO CONFIGURADO CON BASES DE DATOS- TEXTO CON ANIMACIÓN
PM
TECNOLOGÍAS DE PROCESADODE TEXTOS
TECNOLOGÍAS SOBRE GRAFISMODIGITAL
TECNOLOGÍAS SOBREVIDEO DIGITAL
TECNOLOGÍAS SOBRESONIDO DIGITAL
TECNOLOGÍAS SOBREPROGRAMACIÓN
- TRATAMIENTO DE TEXTOS- CONFIGURACIÓN DE HIPERTEXTO- TEXTO CONFIGURADO CON BASES DE DATOS- TEXTO CON ANIMACIÓN
- GRAFISMO VECTORIAL 2D + 3D
- GRAFISMO MAPA DE BITS
PM
TECNOLOGÍAS DE PROCESADODE TEXTOS
TECNOLOGÍAS SOBRE GRAFISMODIGITAL
TECNOLOGÍAS SOBREVIDEO DIGITAL
TECNOLOGÍAS SOBRESONIDO DIGITAL
TECNOLOGÍAS SOBREPROGRAMACIÓN
- TRATAMIENTO DE TEXTOS- CONFIGURACIÓN DE HIPERTEXTO- TEXTO CONFIGURADO CON BASES DE DATOS- TEXTO CON ANIMACIÓN
- GRAFISMO VECTORIAL 2D + 3D
- GRAFISMO MAPA DE BITS
- MONTAJE DIGITAL SECUENCIAS- SINCRONIZACIÓN CON SONIDO- INTEGRACIÓN GRÁFISMO DIGITAL EN EL MISMO ENTORNO
PM
TECNOLOGÍAS DE PROCESADODE TEXTOS
TECNOLOGÍAS SOBRE GRAFISMODIGITAL
TECNOLOGÍAS SOBREVIDEO DIGITAL
TECNOLOGÍAS SOBRESONIDO DIGITAL
TECNOLOGÍAS SOBREPROGRAMACIÓN
- TRATAMIENTO DE TEXTOS- CONFIGURACIÓN DE HIPERTEXTO- TEXTO CONFIGURADO CON BASES DE DATOS- TEXTO CON ANIMACIÓN
- GRAFISMO VECTORIAL 2D + 3D
- GRAFISMO MAPA DE BITS
- MONTAJE DIGITAL SECUENCIAS- SINCRONIZACIÓN CON SONIDO- INTEGRACIÓN GRÁFISMO DIGITAL EN EL MISMO ENTORNO
- MONTAJE DIGITAL SECUENCIAS SONIDO- SINCRONIZACIÓN CON GRAFISMO E IMAGEN- COMPOSICIÓN Y EDICIÓN DIGITAL DE MÚSICA
PM
TECNOLOGÍAS DE PROCESADODE TEXTOS
TECNOLOGÍAS SOBRE GRAFISMODIGITAL
TECNOLOGÍAS SOBREVIDEO DIGITAL
TECNOLOGÍAS SOBRESONIDO DIGITAL
TECNOLOGÍAS SOBREPROGRAMACIÓN
- TRATAMIENTO DE TEXTOS- CONFIGURACIÓN DE HIPERTEXTO- TEXTO CONFIGURADO CON BASES DE DATOS- TEXTO CON ANIMACIÓN
- GRAFISMO VECTORIAL 2D + 3D
- GRAFISMO MAPA DE BITS
- MONTAJE DIGITAL SECUENCIAS- SINCRONIZACIÓN CON SONIDO- INTEGRACIÓN GRÁFISMO DIGITAL EN EL MISMO ENTORNO
- MONTAJE DIGITAL SECUENCIAS SONIDO- SINCRONIZACIÓN CON GRAFISMO E IMAGEN- COMPOSICIÓN Y EDICIÓN DIGITAL DE MÚSICA
- MONTAJE DIGITAL DE CONTENIDOS- GESTIÓN DE CONTENIDOS ( VIDEO / GRÁFICO/ TEXTO)- CONFIGURACIÓN DE FORMATOS / SISTEMAS
MULTIMEDIA ( DISCIPLINAS INTEGRADAS )
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de
la Información
- Definir el producto ( Artístico, Comercial,......)
- Organizar el Contenido en Diagramas de Flujos.
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de
la Información
Diseño de
la interacción
-Definir el producto ( Artístico, Comercial,......)
- Organizar el Contenido en Diagramas de Flujos.
- Definir la Navegación ( Tipos de Interacción, Controles...)
- Trazar un Guión
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de
la Información
Diseño de
la interacción
Diseño de
la presentación
- Definir el producto ( Artístico, Comercial,......)
- Organizar el Contenido en Diagramas de Flujos.
- Definir la Navegación ( Tipos de Interacción, Controles...)
- Trazar un Guión
- Definir el Estilo
-Crear una beta o prototipo
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de
la Información
Diseño de
la interacción
Diseño de
la presentación
- Definir el producto ( Artístico, Comercial,......)
- Organizar el Contenido en Diagramas de Flujos.
- Definir la Navegación ( Tipos de Interacción, Controles...)
- Trazar un Guión
- Definir Estilo
- Crear una beta o prototipo
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de la Información
Proceso de Clasificar sus objetivos comunicativos y organizar la información. > IDEA
1.A Organización del información. ( listas de Contenidos, plan de proyecto,
Crear un diagrama de Flujos ...)
2.A Planificación de recursos ( Presupuesto /recursos/Tiempo)
3.A Elección de la Herramienta. ( Online /Off line)
4.A Público ( necesidades e intereses del público)
5.A Objetivos. ( ¿ Que quiero Conseguir?)
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de la Información
Proceso de Clasificar sus objetivos comunicativos y organizar la información. > IDEA
- Objetivos del Diseño:
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de la Información
Proceso de Clasificar sus objetivos comunicativos y organizar la información. > IDEA
- Objetivos del Diseño:El Usuario quiere:
•1. APRENDER - Ser claro, sencillo,directo,reiterativo,utilizar pruebas y correcciones.
•2. DIVERSIÓN - Ser Variado, aleatorio e ingenioso
•3. COMPRENSIÓN - Explicaciones conceptuales , ilustraciones, gráficos, etc....
•4. EXPERIMENTACIÓN — Alto nivel de Interacción, control del usuario sobre acciones y hechos, imágenes y sonidos
•5. ACTUAR O COMPRAR.Opciones claras, teléfonos gratuitos, formularios claros de pedido interactivo.
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de la Información
Proceso de Clasificar sus objetivos comunicativos y organizar la información. > IDEA
-Objetivos del Diseño:
-Entorno:- Público: A que usuario se dirige (Edad, Género,etc...)
- Utilización: Uso doméstico, empresa, en grupo, solitario...
- Entorno: Ruidoso , Silencioso,etc...
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de la Información
Proceso de Clasificar sus objetivos comunicativos y organizar la información. > IDEA
-Objetivos del Diseño:
-Entorno:
-Diagrama de Flujos: Es un esbozo presentando como diagrama, con líneas que muestran las rutas de acceso entre sus partes.Diseño del Diagrama:
- El Contenido, organización y estructuras de la información.
- La utilización: Categorías temáticas y las rutas de acceso
La sencillez, diseño claro. Sencillez-Principio de economía de Guillermo de Ockham, SXIV)
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de la Información
-Diagramas de Flujos:
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de la Información
-Diagramas de Flujos:
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de la Información
Diseño de la interacción
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de la Información
Diseño de la interacción
La interacción en un proyectomultimedia, significa que el usuario, no el diseñador controla la secuencia, la velocidad y lo más importante, lo que
mirar y lo que ignorar.
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de la interacción
TAREAS DEL DISEÑO
-Crear un sistema, guía para orientar al usuario.
-Diseñar la navegación y rutas.
-Definir pantallas.
-Diseñar Controles para la interacción (botones)
-Crear un guión.
Todo esto esta basado en el diagrama de Flujos
1
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de la interacción
TAREAS DEL DISEÑO -Definir pantallas.
1
AREA DE NAVEGACIÓN
AREA DE TITULARES
AREA DE INFORMACIÓN
INTERACTIVA
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de la interacción
TAREAS DEL DISEÑO
1
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de la interacción
PUNTOS ATENER EN CUENTA
- Motivar para tener una experiencia .
- Crear un viaje interesante
- Dar controles a los usuarios que les permitan navegar.
- Hacer una experiencia clara e intuitiva. 2
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de la interacción
ORIENTACIÓN
Problemática de la frustración (“esto no lo puedo manejar”)
Esto se resuelve orientándolos desde el principio.
Consejos :
- Primeras pantallas proporcionaran al usuario información sobre lo que va a hacer, ver o experimentar.
- Necesita un equilibrio de imágenes y palabras que le proporcionen una guía.
3
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de la interacción
MAPAS DE IMÁGENES Y METÁFORAS. ( General)
1._Mapas . Tiene dos propósitos :
- Imágenes que representan un contenido.
- Imágenes que conducen hacia él.42._ Metáforas.
Tipo de imágenes , estas representan información.
Su función es crear significado.
( Ej: edificio= empresa, mapa= localización, impresora= imprimir)
Las metáforas funcionarán si el público esta familiarizado con ellas y con el contenido conceptual de la misma.
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de la interacción
MAPAS DE IMÁGENES Y METÁFORAS. -CREACIÓN DE ICONOS
4bTeorías de la semiótica que Marcus (*) aplica como guía para
cuatro niveles en el diseño de iconos .
1. Cualidades léxicas: Marcas generadas por computadora –silueta de píxeles, color, brillo, parpadeo.
2. Sintaxis. Apariencia y movimiento, líneas , patrones, partes modulares, tamaño, forma.
3. Semántica. Objetos representados –concreto frente abstracto, parte frente a todo
4. Pragmática. Legibilidad, utilidad, facilidad para identificarlo, facilidad para memorizarlo y agradabilidad a nivel global
5. Dinámica. Predisposisción a los clics. Resaltar, arrastrar, combinar.
(*) Marcus, Aaron, Graphic Design for electronic documents and User Interfaces, ACM, New York, 1992
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de la interacción
NAVEGACIÓN
5Tipos de Estructuras
A) Jerárquica B) lineal C) lineal con jerarquía D) red
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de la interacción
NAVEGACIÓN
5Tipos de Estructuras
A) Jerárquica B) lineal C) lineal con jerarquía D) red
La estructura jerárquica, es la típica estructura de árbol, en el que la raíz es la hoja de bienvenida, esta hoja se puede también sustituir por la hoja de contenido, en la que se exponen las diferentes secciones que contendrá nuestro sitio.
La selección de una sección nos conduce asimismo a una lista de subtemas que pueden o no dividirse.
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de la interacción
NAVEGACIÓN
5Tipos de Estructuras
A) Jerárquica B) lineal C) lineal con jerarquía D) red
La estructura jerárquica, es la típica estructura de árbol, en el que la raíz es la hoja de bienvenida, esta hoja se puede también sustituir por la hoja de contenido, en la que se exponen las diferentes secciones que contendrá nuestro sitio.
La selección de una sección nos conduce asimismo a una lista de subtemas que pueden o no dividirse.
Este tipo de organización permite al lector conocer en qué lugar de la estructura se encuentra, además de saber que, con forme se adentra en la estructura obtiene información más específica y que la información más general se encuentra en los niveles superiores.
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de la interacción
NAVEGACIÓN
5Tipos de Estructuras
A) Jerárquica B) lineal C) lineal con jerarquía D) red
La estructura lineal es la más simple de todas, la manera de recorrerla es la misma que si estuviésemos leyendo un libro, de manera que estando en una página, podemos ir a la siguiente página o a la anterior.
Esta estructura es muy útil cuando queremos que el lector siga un camino fijo y guiado, además impedimos que se distraiga con enlaces a otras páginas.
Por otra parte podemos causar a lector la sensación de estar encerrado si el camino es muy largo o poco interesante.
Este tipo de estructura sería válido para tours de visita guiada.
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de la interacción
NAVEGACIÓN
5Tipos de Estructuras
A) Jerárquica C) lineal con jerarquíaB) lineal D) red
Este tipo de estructura es una mezcla de la dos anteriores, los temas y subtemas están organizados de una forma jerárquica, pero uno puede leer todo el contenido de una forma lineal si se desea.
Esto permite tener el contenido organizado jerárquicamente y simultáneamente poder acceder a toda la información de una manera lineal como si estuviésemos leyendo un libro.
C) lineal con jerarquía
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de la interacción
NAVEGACIÓN
5Tipos de Estructuras
A) Jerárquica B) lineal D) red
La estructura de red es una organización en la que aparentemente no hay ningún orden establecido,las páginas pueden apuntarse unas a otras sin ningún orden aparente.
Este tipo de organización es la más libre, pero también es la más peligrosa ya que si no se informa al lector de en dónde se encuentra, puede perderse o puede no encontrar lo que anda buscando o no llegar a ver lo que le queremos mostrar.
C) lineal con jerarquía
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de la interacción
NAVEGACIÓN
5Tipos de Estructuras
A) Jerárquica B) lineal D) red
Por eso es muy recomendable asociar la estructura de las páginas con alguna estructura conocida, como por ejemplo la de una ciudad.
( asociar la metáfora creativa de la que partimos con la estructura ).
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de la interacción
NAVEGACIÓN
5Claves:
Minimizar el Viaje.
Crear el camino mas corto y sencillo entre dos puntos cualesquiera.
Minimizar la profundidad.
Crear una jerarquía con el menor número posible de niveles.
Minimizar la redundancia .
Evitar crear caminos múltiples al mismo lugar desde la misma pantalla.
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de la interacción
ACCESOS DIRECTOS
6Proporcionar el camino más sencillo entre dos puntos cualesquiera del producto
Tipos ( Menús , listas, líneas cronológicas, iconos, mapas, botones...)
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de la interacción
NIVELES DE ACCESO
7 -Acceso a un tema nuevo, puede ser un salto de magnitud y cambio de escenario completo.
-Acceso a un mismo tema: Cambios Sutiles
Para crear una guía utilizar un anclaje visual
- Titulares, fondos y otros gráficos.
Diseño de la interacciónPROCESO ELABORACIÓN PROYECTO MULTIMEDIA
UTILIZACIÓN
8- Quitar obstáculos.
- No ser reiterativo con los gráficos y los textos en la misma pantalla. Deje que el usuario pique lo que quiera.
- Proporcione información:
-Inmediata y apropiada, subrayar los textos los elementos, sonidos, etc....
- Ser Explicito:
-Hacer obvios los elementos lo que se puede actuar y los que no.
- Ser Flexible
-Deje que usuario use atajos o pueda salir cuando quiera.
Diseño de la interacciónPROCESO ELABORACIÓN PROYECTO MULTIMEDIA
GUION:
9 -Es una herramienta que hará que todo el grupo que trabaja en el proyecto funcione de acuerdo al proyecto.
-En el se proyectaran toda la navegación, diseño e interacción de la pieza final.
Diseño de la interacciónPROCESO ELABORACIÓN PROYECTO MULTIMEDIA
EN RESUMEN TEORIA NORMAN, DONALD (1)
10
(1) Norman, Donald A.The Psychology of Everyday things, Basic Books, New York, 1988
1. Formulación del Objetivo
2. Formulación de la intención
3. Especificación de la acción
4. Ejecución de la acción
5. Interpretación del estado del sistema
6. Evaluación del resultado
ETAPAS DE ACCIÓN, ORGANIZADAS CICLICAMENTE COMO UN MODELO EXPLICATIVO DE LA INTERACCIÓN PERSONA - COMPUTADORA
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Diseño de la interacción
TAREAS DEL DISEÑO
PUNTOS ATENER EN CUENTA ORIENTACIÓN
MAPAS DE IMÁGENES Y METÁFORAS.
NAVEGACIÓN
ACCESOS DIRECTOSNIVELES DE ACCESO
UTILIZACIÓN GUION
Diseño de
la Información
Diseño de
la interacción
Diseño de
la presentación
- Definir el producto ( Artístico, Comercial,......)
- Organizar el Contenido en Diagramas de Flujos.
- Definir la Navegación ( Tipos de Interacción, Controles...)
- Trazar un Guión
- Definir Estilo
- Crear una beta o prototipo
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
COMERCIAL
REUNIÓNINICIAL
Análisis del público
Análisis delambiente
Análisis delcontenido
Análisis delsistema
ANÁLISIS Metaseducativas
Objetivos deaprendizaje
Decisionesde contenido
Modelocognoscitivo
Prototipoen papel
Actividades deaprendizaje
DISEÑO EDUCATIVO DISEÑO INTERACTIVO
Requerimientosfuncionales
Metáfora yparadigmas
Diseño deinterface
Manejo
Mapas deNavegación
Pantallasde esquema
Prototipode trabajo
REVISIÓN
DESARROLLO
Guión ydiagrama de flujo
Guiones
Preproducciónde A/V
Postproducciónde A/V
PRODUCCIÓN
Integración ydesarrollo autoral Pruebas
Alfa
PruebasBeta
LANZAMIENTO
Evaluacióngeneral
Las líneas verticales indicanque el orden recomendadoes de arriba hacia abajo
Las cajas apiladas indicaneventos que pueden ocurrirsimultáneamente dentro de unafase.
Metodología de desarrolllo ydiseño de multimedia
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
ARTÍSTICO EXPERIMENTAL
Diseño de
la InformaciónDiseño de
la interacción
Diseño de
la presentación
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
ARTÍSTICO EXPERIMENTAL
COMERCIAL
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
ARTÍSTICO EXPERIMENTALDiseño de
la InformaciónDiseño de
la interacción
Diseño de
la presentación
PUNTOS A POTENCIAR DE FORMA EXPERIMENTALNOTA: Depende de la Naturaleza del Proyecto
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
ARTÍSTICO EXPERIMENTALDiseño de
la InformaciónDiseño de
la interacción
Diseño de
la presentación
Idea - discurso
La efectividad del discurso depende de la funcionalidad de la pieza sobre
ese discurso.
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
ARTÍSTICO EXPERIMENTALDiseño de
la InformaciónDiseño de
la interacción
Diseño de
la presentación
Idea - discurso Concepto navegación Elemento /navegación
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
ARTÍSTICO EXPERIMENTALIdea - discurso Concepto navegación Elemento /navegación
La relación del concepto navegación se da por una serie de pasos y características
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
ARTÍSTICO EXPERIMENTALIdea - discurso Concepto navegación
1- REFLEXIÓN
2 - ANALISIS DE LAS FORMAS
3 - DOCUMENTACIÓN
4 - ESTRUCTURAS
( creación de diagramas de flujos adaptados a la forma)
La relación del concepto navegación se da por una serie de pasos y características
Ej: pueden ser debididas en :
- nano estructuras (célula)
- macro estructuras ( tierra)
Elemento /navegación
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Idea - discurso Concepto navegación
4 - ESTRUCTURAS - Clasificación La relación del concepto navegación se da por una serie de pasos y características
Estructuras Naturales ( Bionavegación)
Aquellas creadas por la naturaleza sin la intervención del Hombre
- Cuerpo, flora, estructuras minerales
ARTÍSTICO EXPERIMENTALElemento /navegación
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Idea - discurso Concepto navegación
4 - ESTRUCTURAS - Clasificación La relación del concepto navegación se da por una serie de pasos y características
Estructuras Naturales ( Bionavegación)
Aquellas creadas por la naturaleza sin la intervención del Hombre
- Cuerpo, flora, estructuras minerales
Estructuras Artificiales
Creadas con la intervención del hombre.
- mapa de una ciudad.
- motores
- tipografía.
ARTÍSTICO EXPERIMENTALElemento /navegación
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Idea - discurso Concepto navegación
4 - ESTRUCTURAS - Clasificación La relación del concepto navegación se da por una serie de pasos y características
Estructuras Abstractas Subjetivas
Aquellas que proviene del ámbito de los sentidos
-olores
-emociones.
Estructuras Artificiales
Creadas con la intervención del hombre.
- mapa de una ciudad.
- motores
- tipografía.
Estructuras Naturales ( Bionavegación)
Aquellas creadas por la naturaleza sin la intervención del Hombre
- Cuerpo, flora, estructuras minerales
ARTÍSTICO EXPERIMENTALElemento /navegación
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Idea - discurso Concepto navegación
ARTÍSTICO EXPERIMENTALElemento /navegación
Los elementos pueden ser:
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Idea - discurso Concepto navegación
ARTÍSTICO EXPERIMENTALElemento /navegación
Los elementos pueden ser:Mapas imágenes:
- realístas ( capturadas del entorno sin intervenir en ellas, toma ) – Producen Veracidad
- generadas( mediante procesos digitales, 3D, retoque fotografito, collage Digital...)
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Idea - discurso Concepto navegación
ARTÍSTICO EXPERIMENTALElemento /navegación
Los elementos pueden ser:Mapas imágenes:
- realístas ( capturadas del entorno sin intervenir en ellas, toma ) – Producen Veracidad
- generadas( mediante procesos digitales, 3D, retoque fotografito, collage Digital...)
Metáforas
- generadoras de Sinónimos (¿papelera)
- generadoras de Antitesis.(papelera ?)
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Idea - discurso Concepto navegación
ARTÍSTICO EXPERIMENTALElemento /navegación
Los elementos pueden ser:Mapas imágenes:
- realístas ( capturadas del entorno sin intervenir en ellas, toma ) – Producen Veracidad
- generadas( mediante procesos digitales, 3D, retoque fotografito, collage Digital...)
Metáforas
- generadoras de Sinónimos (¿papelera)
- generadoras de Antitesis.(papelera ?)
Texto
- pasivo ( texto estándar)
- interactivo ( hipertexto)
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
Idea - discurso Concepto navegación
ARTÍSTICO EXPERIMENTALElemento /navegación
Los elementos pueden ser:Mapas imágenes:
- realístas ( capturadas del entorno sin intervenir en ellas, toma ) – Producen Veracidad
- generadas( mediante procesos digitales, 3D, retoque fotografito, collage Digital...)
Metáforas
- generadoras de Sinónimos (¿papelera)
- generadoras de Antitesis.(papelera ?)
Texto
- pasivo ( texto estándar)
- interactivo ( hipertexto)
La relación entre Elemento/ navegación puede ser
Intuitiva
Provocada por otro elemento que llame al usuario ( “pulsa aquí”)
Provocada por : guión discurso ( ampliación del menú)
Relación por similitud ( color , forma...)
PROCESO ELABORACIÓN PROYECTO MULTIMEDIA
ARTÍSTICO EXPERIMENTAL
PROYECTO MULTIMEDIA / INTERACTIVOProfesor: Moisés Mañasmoimacar@esc.upv.es
top related