Proyecto Multimedia

GUI/PROYECTO MULTIMEDIA
Graphical User Interfaz
Interfaz grfica de usuario
GUI

En el contexto del proceso de interaccin persona-ordenador, la interfaz grfica de usuario (IGU), es el artefacto tecnolgico de un sistema interactivo que posibilita, a travs del uso y la representacin del lenguaje visual, una interaccin amigable con un sistema informtico.
La interfaz grfica de usuario es un tipo de interfaz de usuario que utiliza un conjunto de imgenes y objetos grficos (iconos, ventanas, tipografa) para representar la informacin y acciones disponibles en la interfaz.
Habitualmente las acciones se realizan mediante manipulacin directa para facilitar la interaccin del usuario con la computadora.
GUI
Ejemplo de interfaz GUI
Escritorio de Windows Escritorio de MAC X-Windows de Linux Redhat Linux 5.0
GUI
Ejemplo de interfaz GUI
Escritorio de Windows Escritorio de MAC X-Windows de Linux Redhat Linux 5.0
GUI
Precursor:
Nace de la mano de Douglas C. Engelbart.
En 1960 desarroll la primera interfaz grfica en los laboratorios de XEROX.
Douglas C. Engelbart
Este desarrollo no era comercial, se encontraba dentro los proyectos de los laboratorios de de investigacin de Xeros, hasta 1981
PROYECTO MULTIMEDIA
Esta basado en la integracin de disciplinas
TECNOLOGAS DE PROCESADO DE TEXTOS
TECNOLOGAS SOBRE GRAFISMO DIGITAL
TECNOLOGAS SOBRE VIDEO DIGITAL
TECNOLOGAS SOBRE SONIDO DIGITAL
TECNOLOGAS SOBRE PROGRAMACIN
MULTIMEDIA ( DISCIPLINAS INTEGRADAS )
PM
- TRATAMIENTO DE TEXTOS - CONFIGURACIN DE HIPERTEXTO - TEXTO CONFIGURADO CON BASES DE DATOS - TEXTO CON ANIMACIN TECNOLOGAS DE PROCESADO DE TEXTOS - GRAFISMO VECTORIAL 2D + 3D
- GRAFISMO MAPA DE BITS

TECNOLOGAS SOBRE GRAFISMO DIGITAL
- MONTAJE DIGITAL SECUENCIAS - SINCRONIZACIN CON SONIDO - INTEGRACIN GRFISMO DIGITAL EN EL MISMO ENTORNO
TECNOLOGAS SOBRE VIDEO DIGITAL - MONTAJE DIGITAL SECUENCIAS SONIDO - SINCRONIZACIN CON GRAFISMO E IMAGEN - COMPOSICIN Y EDICIN DIGITAL DE MSICA TECNOLOGAS SOBRE SONIDO DIGITAL - MONTAJE DIGITAL DE CONTENIDOS - GESTIN DE CONTENIDOS ( VIDEO / GRFICO/ TEXTO) - CONFIGURACIN DE FORMATOS / SISTEMAS
TECNOLOGAS SOBRE PROGRAMACIN
PROCESO ELABORACIN PROYECTO MULTIMEDIA
Diseo de la Informacin
Diseo de la interaccin
Diseo de la presentacin
- Definir el producto ( Artstico, Comercial,......)

- Organizar el Contenido en Diagramas de Flujos.
- Definir la Navegacin ( Tipos de Interaccin, Controles...)

- Trazar un Guin
- Definir Estilo
- Crear una beta o prototipo
Proceso de Clasificar sus objetivos comunicativos y organizar la informacin. > IDEA
1.A
Organizacin del informacin. ( listas de Contenidos, plan de proyecto, Crear un diagrama de Flujos ...)
2.A 3.A
Planificacin de recursos ( Presupuesto /recursos/Tiempo) Eleccin de la Herramienta. ( Online /Off line)
4.A
5.A
Pblico ( necesidades e intereses del pblico)

Objetivos. ( Que quiero Conseguir?)
- Objetivos del Diseo:

El Usuario quiere:
1. APRENDER - Ser claro, sencillo,directo,reiterativo,utilizar pruebas y correcciones. 2. DIVERSIN - Ser Variado, aleatorio e ingenioso 3. COMPRENSIN - Explicaciones conceptuales , ilustraciones, grficos, etc.... 4. EXPERIMENTACIN Alto nivel de Interaccin, control del usuario sobre acciones y hechos, imgenes y sonidos 5. ACTUAR O COMPRAR.Opciones claras, telfonos gratuitos, formularios claros de pedido interactivo.
-Objetivos del Diseo: -Entorno:

- Pblico: A que usuario se dirige (Edad, Gnero,etc...) - Utilizacin: Uso domstico, empresa, en grupo, solitario... - Entorno: Ruidoso , Silencioso,etc...
-Objetivos del Diseo: -Entorno: -Diagrama de Flujos:

Es un esbozo presentando como diagrama, con lneas que muestran las rutas de acceso entre sus partes.
Diseo del Diagrama: - El Contenido, organizacin y estructuras de la informacin. - La utilizacin: Categoras temticas y las rutas de acceso
La sencillez, diseo claro. Sencillez-Principio de economa de Guillermo de Ockham, SXIV)
-Diagramas de Flujos:
Diseo de la interaccin La interaccin en un proyecto multimedia, significa que el usuario, no el diseador controla la secuencia, la velocidad y lo ms importante, lo que mirar y lo que ignorar.
TAREAS DEL DISEO -Crear un sistema, gua para orientar al usuario.
-Disear la navegacin y rutas. -Definir pantallas. -Disear Controles para la interaccin (botones) -Crear un guin.
Todo esto esta basado en el diagrama de Flujos
TAREAS DEL DISEO
-Definir pantallas.
AREA DE TITULARES
AREA DE INFORMACIN INTERACTIVA
AREA DE NAVEGACIN
TAREAS DEL DISEO
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.
ORIENTACIN Problemtica de la frustracin (esto no lo puedo manejar) Esto se resuelve orientndolos desde el principio.
Consejos :
- Primeras pantallas proporcionaran al usuario informacin sobre lo que va a hacer, ver o experimentar. - Necesita un equilibrio de imgenes y palabras que le proporcionen una gua.
MAPAS DE IMGENES Y METFORAS. ( General) 1._Mapas . Tiene dos propsitos : - Imgenes que representan un contenido. - Imgenes que conducen hacia l.
2._ Metforas. Tipo de imgenes , estas representan informacin. Su funcin es crear significado. ( Ej: edificio= empresa, mapa= localizacin, impresora= imprimir)
Las metforas funcionarn si el pblico esta familiarizado con ellas y con el contenido conceptual de la misma.
MAPAS DE IMGENES Y METFORAS. -CREACIN DE ICONOS Teoras de la semitica que Marcus (*) aplica como gua para cuatro niveles en el diseo de iconos . Cualidades lxicas: Marcas generadas por computadora silueta de pxeles, color, brillo, parpadeo. Sintaxis. Apariencia y movimiento, lneas , patrones, partes modulares, tamao, forma. Semntica. Objetos representados concreto frente abstracto, parte frente a todo Pragmtica. Legibilidad, utilidad, facilidad para identificarlo, facilidad para memorizarlo y agradabilidad a nivel global
4b
1. 2. 3. 4.
5.
Dinmica. Predisposiscin a los clics. Resaltar, arrastrar, combinar.
(*) Marcus, Aaron, Graphic Design for electronic documents and User Interfaces, ACM, New York, 1992
NAVEGACIN
Tipos de Estructuras
A) Jerrquica
B) lineal
C) lineal con jerarqua
D) red
NAVEGACIN
A) Jerrquica
B) lineal
D) red
La estructura jerrquica, es la tpica estructura de rbol, en el que la raz es la hoja de bienvenida, esta hoja se puede tambin sustituir por la hoja de contenido, en la que se exponen las diferentes secciones que contendr nuestro sitio. La seleccin de una seccin nos conduce asimismo a una lista de subtemas que pueden o no dividirse.
NAVEGACIN
A) Jerrquica
B) lineal
D) red
La estructura jerrquica, es la tpica estructura de rbol, en el que la raz es la hoja de bienvenida, esta hoja se puede tambin sustituir por la hoja de contenido, en la que se exponen las diferentes secciones que contendr nuestro sitio. La seleccin de una seccin nos conduce asimismo a una lista de subtemas que pueden o no dividirse. Este tipo de organizacin permite al lector conocer en qu lugar de la estructura se encuentra, adems de saber que, con forme se adentra en la estructura obtiene informacin ms especfica y que la informacin ms general se encuentra en los niveles superiores.
NAVEGACIN
A) Jerrquica
B) lineal
D) red
La estructura lineal es la ms simple de todas, la manera de recorrerla es la misma que si estuvisemos leyendo un libro, de manera que estando en una pgina, podemos ir a la siguiente pgina o a la anterior. Esta estructura es muy til cuando queremos que el lector siga un camino fijo y guiado, adems impedimos que se distraiga con enlaces a otras pginas. Por otra parte podemos causar a lector la sensacin de estar encerrado si el camino es muy largo o poco interesante.
Este tipo de estructura sera vlido para tours de visita guiada.
NAVEGACIN
A) Jerrquica
B) lineal
D) red
Este tipo de estructura es una mezcla de la dos anteriores, los temas y subtemas estn organizados de una forma jerrquica, pero uno puede leer todo el contenido de una forma lineal si se desea.
Esto permite tener el contenido organizado jerrquicamente y simultneamente poder acceder a toda la informacin de una manera lineal como si estuvisemos leyendo un libro.
NAVEGACIN
A) Jerrquica
B) lineal
D) red
La estructura de red es una organizacin en la que aparentemente no hay ningn orden establecido, las pginas pueden apuntarse unas a otras sin ningn orden aparente. Este tipo de organizacin es la ms libre, pero tambin es la ms peligrosa ya que si no se informa al lector de en dnde se encuentra, puede perderse o puede no encontrar lo que anda buscando o no llegar a ver lo que le queremos mostrar.
NAVEGACIN
A) Jerrquica
B) lineal
D) red
Por eso es muy recomendable asociar la estructura de las pginas con alguna estructura conocida, como por ejemplo la de una ciudad.
( asociar la metfora creativa de la que partimos con la estructura ).
NAVEGACIN Claves:
Minimizar el Viaje. Crear el camino mas corto y sencillo entre dos puntos cualesquiera. Minimizar la profundidad. Crear una jerarqua con el menor nmero posible de niveles. Minimizar la redundancia . Evitar crear caminos mltiples al mismo lugar desde la misma pantalla.
ACCESOS DIRECTOS Proporcionar el camino ms sencillo entre dos puntos cualesquiera del producto
Tipos ( Mens , listas, lneas cronolgicas, iconos, mapas, botones...)
NIVELES DE ACCESO
-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 gua utilizar un anclaje visual - Titulares, fondos y otros grficos.
UTILIZACIN
- Quitar obstculos. - No ser reiterativo con los grficos y los textos en la misma pantalla. Deje que el usuario pique lo que quiera. - Proporcione informacin: -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.
GUION:
-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 navegacin, diseo e interaccin de la pieza final.
EN RESUMEN TEORIA NORMAN, DONALD (1) ETAPAS DE ACCIN, ORGANIZADAS CICLICAMENTE COMO UN MODELO EXPLICATIVO DE LA INTERACCIN PERSONA - COMPUTADORA
10
1. 2. 3.
Formulacin del Objetivo Formulacin de la intencin Especificacin de la accin
4.
5. 6.
Ejecucin de la accin
Interpretacin del estado del sistema Evaluacin del resultado
(1) Norman, Donald A.The Psychology of Everyday things, Basic Books, New York, 1988
TAREAS DEL DISEO
MAPAS DE IMGENES Y METFORAS.
PUNTOS ATENER EN CUENTA
ORIENTACIN
NAVEGACIN ACCESOS DIRECTOS NIVELES DE ACCESO
UTILIZACIN
GUION
COMERCIAL
Diseo de
la Informacin
Diseo de
la interaccin
Diseo de
la presentacin
- Definir el producto ( Artstico, Comercial,......) - Organizar el Contenido en Diagramas de Flujos.
- Definir la Navegacin ( Tipos de Interaccin, Controles...) - Trazar un Guin
- Definir Estilo - Crear una beta o prototipo
Metodologa de desarrolllo y diseo de multimedia

DISEO EDUCATIVO DISEO INTERACTIVO Requerimientos funcionales ANLISIS Anlisis del pblico Anlisis del ambiente Anlisis del contenido Anlisis del sistema
Metas educativas Objetivos de aprendizaje Decisiones de contenido Modelo cognoscitivo Prototipo en papel
Metfora y paradigmas Diseo de interface Actividades de aprendizaje Manejo DESARROLLO Mapas de Navegacin Pantallas de esquema Guiones Prototipo de trabajo Integracin y desarrollo autoral Pruebas Alfa LANZAMIENTO Pruebas Beta Evaluacin general Guin y diagrama de flujo PRODUCCIN Preproduccin de A/V
REUNIN INICIAL
Postproduccin de A/V
REVISIN
Las lneas verticales indican que el orden recomendado es de arriba hacia abajo
Las cajas apiladas indican eventos que pueden ocurrir simultneamente dentro de una fase.
ARTSTICO EXPERIMENTAL
Diseo de la presentacin
COMERCIAL
Diseo de la Informacin Diseo de la interaccin Diseo de la presentacin
PUNTOS A POTENCIAR DE FORMA EXPERIMENTAL

NOTA: Depende de la Naturaleza del Proyecto
Idea - discurso
La efectividad del discurso depende de la funcionalidad de la pieza sobre ese discurso.
Idea - discurso
Concepto navegacin
Elemento /navegacin
Idea - discurso
Concepto navegacin Elemento /navegacin
La relacin del concepto navegacin se da por una serie de pasos y caractersticas
Idea - discurso Concepto navegacin
Elemento /navegacin
La relacin del concepto navegacin se da por una serie de pasos y caractersticas
1- REFLEXIN
2 - ANALISIS DE LAS FORMAS 3 - DOCUMENTACIN 4 - ESTRUCTURAS ( creacin de diagramas de flujos adaptados a la forma) Ej: pueden ser debididas en : - nano estructuras (clula) - macro estructuras ( tierra)
Elemento /navegacin
La relacin del concepto navegacin se da por una serie de pasos y caractersticas 4 - ESTRUCTURAS - Clasificacin
Estructuras Naturales ( Bionavegacin) Aquellas creadas por la naturaleza sin la intervencin del Hombre - Cuerpo, flora, estructuras minerales
Elemento /navegacin
Estructuras Artificiales Creadas con la intervencin del hombre. - mapa de una ciudad. - motores - tipografa.
Elemento /navegacin
Estructuras Artificiales Creadas con la intervencin del hombre. - mapa de una ciudad. - motores - tipografa.
Estructuras Abstractas Subjetivas Aquellas que proviene del mbito de los sentidos -olores -emociones.
Elemento /navegacin
Los elementos pueden ser:
Mapas imgenes:
- realstas ( capturadas del entorno sin intervenir en ellas, toma ) Producen Veracidad - generadas( mediante procesos digitales, 3D, retoque fotografito, collage Digital...) Metforas - generadoras de Sinnimos (papelera) - generadoras de Antitesis.(papelera ?) Texto - pasivo ( texto estndar)
- interactivo ( hipertexto)
La relacin entre Elemento/ navegacin puede ser Intuitiva Provocada por otro elemento que llame al usuario ( pulsa aqu) Provocada por : guin discurso ( ampliacin del men) Relacin por similitud ( color , forma...)

Proyecto Multimedia

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Proyecto Multimedia

Uploaded by

Copyright:

Available Formats

GUI/PROYECTO MULTIMEDIA

Graphical User Interfaz

Interfaz grfica de usuario

Graphical User Interfaz

Graphical User Interfaz

Ejemplo de interfaz GUI

Escritorio de Windows Escritorio de MAC X-Windows de Linux Redhat Linux 5.0

Graphical User Interfaz

Ejemplo de interfaz GUI

Escritorio de Windows Escritorio de MAC X-Windows de Linux Redhat Linux 5.0

Graphical User Interfaz

Nace de la mano de Douglas C. Engelbart.

En 1960 desarroll la primera interfaz grfica en los laboratorios de XEROX.

Esta basado en la integracin de disciplinas

TECNOLOGAS DE PROCESADO DE TEXTOS

TECNOLOGAS SOBRE GRAFISMO DIGITAL

TECNOLOGAS SOBRE VIDEO DIGITAL

TECNOLOGAS SOBRE SONIDO DIGITAL

TECNOLOGAS SOBRE PROGRAMACIN

MULTIMEDIA ( DISCIPLINAS INTEGRADAS )

- GRAFISMO MAPA DE BITS

TECNOLOGAS SOBRE PROGRAMACIN

PROCESO ELABORACIN PROYECTO MULTIMEDIA

- Definir el producto ( Artstico, Comercial,......)

- Definir la Navegacin ( Tipos de Interaccin, Controles...)

PROCESO ELABORACIN PROYECTO MULTIMEDIA

Proceso de Clasificar sus objetivos comunicativos y organizar la informacin. > IDEA

Planificacin de recursos ( Presupuesto /recursos/Tiempo) Eleccin de la Herramienta. ( Online /Off line)

Pblico ( necesidades e intereses del pblico)

PROCESO ELABORACIN PROYECTO MULTIMEDIA

Proceso de Clasificar sus objetivos comunicativos y organizar la informacin. > IDEA

- Objetivos del Diseo:

PROCESO ELABORACIN PROYECTO MULTIMEDIA

Proceso de Clasificar sus objetivos comunicativos y organizar la informacin. > IDEA

-Objetivos del Diseo: -Entorno:

PROCESO ELABORACIN PROYECTO MULTIMEDIA

Proceso de Clasificar sus objetivos comunicativos y organizar la informacin. > IDEA

-Objetivos del Diseo: -Entorno: -Diagrama de Flujos:

La sencillez, diseo claro. Sencillez-Principio de economa de Guillermo de Ockham, SXIV)

PROCESO ELABORACIN PROYECTO MULTIMEDIA

PROCESO ELABORACIN PROYECTO MULTIMEDIA

PROCESO ELABORACIN PROYECTO MULTIMEDIA

TAREAS DEL DISEO -Crear un sistema, gua para orientar al usuario.

Todo esto esta basado en el diagrama de Flujos

PROCESO ELABORACIN PROYECTO MULTIMEDIA

TAREAS DEL DISEO

AREA DE INFORMACIN INTERACTIVA

PROCESO ELABORACIN PROYECTO MULTIMEDIA

TAREAS DEL DISEO

PROCESO ELABORACIN PROYECTO MULTIMEDIA

PROCESO ELABORACIN PROYECTO MULTIMEDIA

PROCESO ELABORACIN PROYECTO MULTIMEDIA

PROCESO ELABORACIN PROYECTO MULTIMEDIA

Dinmica. Predisposiscin a los clics. Resaltar, arrastrar, combinar.

PROCESO ELABORACIN PROYECTO MULTIMEDIA

C) lineal con jerarqua

PROCESO ELABORACIN PROYECTO MULTIMEDIA

C) lineal con jerarqua

PROCESO ELABORACIN PROYECTO MULTIMEDIA

C) lineal con jerarqua

PROCESO ELABORACIN PROYECTO MULTIMEDIA

C) lineal con jerarqua

Este tipo de estructura sera vlido para tours de visita guiada.

PROCESO ELABORACIN PROYECTO MULTIMEDIA