metodologias / estructuras - personales.upv.espersonales.upv.es/moimacar/download/multimedia.pdf ·...

GUI/PROYECTO MULTIMEDIA

Dpto: EsculturaProfesor: Moisés Mañ[email protected]

METODOLOGIAS / ESTRUCTURAS

http://creativecommons.org/licenses/by/2.5/es/deed.es

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.


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.



Ejemplo de interfaz GUI

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


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


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


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


Precursor:

WINDOWS 1.01

Es un interfaz gráfico de entorno operativo de 16 bits.

Aparece en Noviembre del, 1985

1985


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

http://en.wikipedia.org/wiki/Image:SPSS.gif

http://en.wikipedia.org/wiki/Image:Example_radiobuttons_windows.png

PROYECTO MULTIMEDIA

Esta basado en la integración de disciplinas

PROYECTO MULTIMEDIA


TECNOLOGÍAS DE PROCESADODE TEXTOS

PROYECTO MULTIMEDIA


TECNOLOGÍAS DE PROCESADODE TEXTOS TECNOLOGÍAS SOBRE GRAFISMO

DIGITAL

PROYECTO MULTIMEDIA



DIGITALTECNOLOGÍAS SOBRE

VIDEO DIGITAL

PROYECTO MULTIMEDIA




VIDEO DIGITAL

TECNOLOGÍAS SOBRESONIDO DIGITAL

PROYECTO MULTIMEDIA




VIDEO DIGITAL

TECNOLOGÍAS SOBRESONIDO DIGITAL TECNOLOGÍAS SOBRE

PROGRAMACIÓN

PM


TECNOLOGÍAS SOBRE GRAFISMODIGITAL

TECNOLOGÍAS SOBREVIDEO DIGITAL


TECNOLOGÍAS SOBREPROGRAMACIÓN

PM






- TRATAMIENTO DE TEXTOS- CONFIGURACIÓN DE HIPERTEXTO- TEXTO CONFIGURADO CON BASES DE DATOS- TEXTO CON ANIMACIÓN

PM







- GRAFISMO VECTORIAL 2D + 3D

- GRAFISMO MAPA DE BITS

PM









- MONTAJE DIGITAL SECUENCIAS- SINCRONIZACIÓN CON SONIDO- INTEGRACIÓN GRÁFISMO DIGITAL EN EL MISMO ENTORNO

PM










- MONTAJE DIGITAL SECUENCIAS SONIDO- SINCRONIZACIÓN CON GRAFISMO E IMAGEN- COMPOSICIÓN Y EDICIÓN DIGITAL DE MÚSICA

PM










- 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


Diseño de

la Información

- Definir el producto ( Artístico, Comercial,......)

- Organizar el Contenido en Diagramas de Flujos.


Diseño de

la Información

Diseño de

la interacción

-Definir el producto ( Artístico, Comercial,......)


- Definir la Navegación ( Tipos de Interacción, Controles...)

- Trazar un Guión


Diseño de

la Información

Diseño de

la interacción

Diseño de

la presentación




- Trazar un Guión

- Definir el Estilo

-Crear una beta o prototipo


Diseño de

la Información

Diseño de

la interacción

Diseño de

la presentación




- Trazar un Guión

- Definir Estilo

- Crear una beta o prototipo


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?)




- Objetivos del Diseño:




- 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.




-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...




-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)



-Diagramas de Flujos:



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.



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



TAREAS DEL DISEÑO -Definir pantallas.

1

AREA DE NAVEGACIÓN

AREA DE TITULARES

AREA DE INFORMACIÓN

INTERACTIVA



TAREAS DEL DISEÑO

1



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



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



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.



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



NAVEGACIÓN

5Tipos de Estructuras

A) Jerárquica B) lineal C) lineal con jerarquía D) red



NAVEGACIÓN



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.



NAVEGACIÓN



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.



NAVEGACIÓN



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.



NAVEGACIÓN


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



NAVEGACIÓN


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



NAVEGACIÓN


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 ).



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.



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...)



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.


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.


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



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




- Trazar un Guión

- Definir Estilo

- Crear una beta o prototipo


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



ARTÍSTICO EXPERIMENTAL

Diseño de

la InformaciónDiseño de

la interacción

Diseño de

la presentación



COMERCIAL


ARTÍSTICO EXPERIMENTALDiseño de


la interacción

Diseño de

la presentación

PUNTOS A POTENCIAR DE FORMA EXPERIMENTALNOTA: Depende de la Naturaleza del Proyecto




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.




la interacción

Diseño de

la presentación

Idea - discurso Concepto navegación Elemento /navegación


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


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


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







Estructuras Artificiales

Creadas con la intervención del hombre.

- mapa de una ciudad.

- motores

- tipografía.





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.








Los elementos pueden ser:




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 ?)







Metáforas



Texto

- pasivo ( texto estándar)

- interactivo ( hipertexto)







Metáforas



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...)

PROYECTO MULTIMEDIA / INTERACTIVOProfesor: Moisés Mañ[email protected]

http://creativecommons.org/licenses/by/2.5/es/deed.es

metodologias / estructuras - personales.upv.espersonales.upv.es/moimacar/download/multimedia.pdf ·...

Documents