TallerMultimedia_03

Universidad Autónoma de TamaulipasFacultad de Arquitectura, Diseño y UrbanismoLicenciatura en Diseño Gráfico Periodo 2010 - 1

Asesor / LDG Leonides Delgado Moya, MDD

Taller de Multimedia

TDM / A-02

Hipertexto Hipertexto en informática, es el nombre

que recibe el texto que en la pantalla de una computadora conduce a su usuario a otro texto relacionado. La forma más habitual de hipertexto en documentos es la de hipervínculos o referencias cruzadas automáticas que van a otros documentos (lexias). Si el usuario selecciona un hipervínculo, hace que el programa de la computadora muestre inmediatamente el documento enlazado (links).




El hipertexto no esta limitado a datos textuales, podemos encontrar dibujos del elemento especificados, sonido o vídeo referido al tema u cualquier otro objeto.




¿Sitio web?

¿Página web?

¿Portal?

¿Blog?




Modelo aditivo de color RGB

verde

azul rojo




Variación en las resoluciones en los monitores

64080010241152

600

480

720

768




La resolución



Taller de Multimedia72 dpi.



Taller de Multimedia¿Siempre pixeles?



Taller de MultimediaGIF JPEG PNG

(8 ó 24)SVG Canvas




HCI




Interacción Humano-Computadora

HCI, por sus siglas en inglés, es elestudio de la relación que existe entrelos usuarios humanos y los sistemasde cómputo que usan para realizardiversas tareas.





Busca entender cómo funcionan losusuarios, las tareas que necesitanllevar a cabo y el modo en el que lossistemas de cómputo necesitan estarestructurados para facilitar elcumplimiento de esas tareas.




Para entender a los usuarios esnecesario entender los procesos,capacidades y predilecciones quepueden asociarse a las tareas quedesempeñan.

Esto involucra un entendimiento yconocimiento de cosas como lamemoria, visión, cognición, oído,tacto y habilidades motrices.





Experiencia de Usuario

UX

Interfaz de Usuario

Patrones Bits de información

bosquejo de la idea

objetivo

necesidades

Diseño dePersonas

Arquitecturade Información

Diseño deInformación

Usabilidad

Retorica deInterfaces

Accesibilidad





En el materia de Taller de Multimedia crearemos un “portafolio

de proyectos” utilizando (texto, gráficos, audio y video), todo

ello lo integraremos utilizando tecnologías de servidor (Ajax),

lenguajes de marcado o etiquetas (XHTML), Cascada de es-

tilos (CSS), y posiblemente, esto de acuerdo a sus proyectos

jQuery, XML, PHP y animaciones creadas en Adobe Flash. Para

ello trabajaremos inicialmente en la construcción textual y

gráfico de su portafolio, definiendo las características de cada

modulo y sección.

Para ello, les pido que para la siguiente clase, lleven consigo

los archivos (sólo para mostrar en *.JPG) y una lista textual de

los proyectos que han realizado tanto académico, como pro-

fesional; esta lista clarificarla en áreas, (logotipos, identidad,

ilustración, web, carteles, publicidad, animación y/o editorial)

recuerden que está lista será textual e impresa, así mismo

llevarán los archivos.

Si ya cuentan con un portafolio impreso o digital, tráiganlo

consigo para observarlo y valorarlo. Aunque cuenten con esto,

deben realizar la lista antes mencionada.




Así mismo, lleven su logotipo personal, empresarial o cualqui-

er otro que los represente, mismo que utilizará en clase para

generar el concepto gráfico y creativo de su portafolio. De no

contar con uno, les pido bocetar unas propuestas de nombre,

logotipo y digitalizarlo, para que cumplan con este apartado.

(Deben llevar los bocetos)

Bueno, por el momento es todo y lo necesario para comenzar

en forma su proyecto.

Por ultimo, si surge una duda, escríbanme para resolverla, así

mismo, les comenten a sus compañeros sobre este correo y

que aquellos que no me han escrito, lo hagan a la brevedad

para agregarlos a la lista de correos; para así, enviarles esta

información.

UAT - FADU - Posgrado - Maestria en Diseño Digital - Semiótica de las Interfaces - interfaz a Nivel Semiótico + Septiembre de 2009

Sandra Ezquer ZuñigaRodolfo Alvarez RiveraLeonides Delgado MoyaAlumnos

MAEStRiA En DiSEño DigitALSemiotica de las interfaces

Mtro. Ernesto Peña AlonsoAsesor

Septiembre de 2009

Interfacez SemióticaSobre una Maquina Expendedora de Productos


El sujeto se llama Martha1. Tiene 21 años2. Estudia diseño grafico3. Trabaja 4. Tiene computadora en casa y 5. trabajoTrabaja por proyectos6. El usuario es experto7. Lee revistas en linea8. Lee blogs9. Familiarizado con interfaces 10. similares (paquete adobe)Conteo de consumo11. Preferencias de Usuario12. e-mail13. Nombre con apellidos14. nombre de usuario15. Sexo16. Pregunta secreta17. Familiarizado con interfaces 18. socialesLlega hambriento después del 19. trabajoDiario consume bebidas y bo-20. tanasPreferencia por el delaware 21. punchPreferencia por las papas22. El usuario podrá visualizar indi-23. cadores de los productos mas vendidosExhibir los productos de la 24. máquinaEl usuario frecuente tiene la 25. opcion de mantener un crédito

Reproducción de sonidos de las 26. acciones de compra, al introdu-cir las monedas y/o billetes, asi como sonidos de la maquina.El credito aparecera en mone-27. das aleatoriasEl usuario elige y arrastra de su 28. credito las monedas y billetes con los que hara la compraEl cambio se entregara con 29. monedas aleatoriasEn caso de no arrastrar las 30. monedas la maquina simulara la accionLos usuarios tienen la opcion 31. de registrarseEl usuario registrado seleccio-32. na sus preferenciasLas cuentas de ususario llevan 33. un conteo de consumoPor cada 50 consumos se boni-34. ficara al usuario con un produc-to de manera sorpresivaEl usuario podrá visualizar una 35. lista de su compra, modificarla, añadir, eliminar El usuario podrá visualizar su 36. crédito por todo el procesod e compra37. Para registro se requiere nom-38. bre, nombre de usuario, contra-seña, pregunta secreta, correo electrònico*, edad, sexo, ocupa-ción* (*información opcional)

Para acceder a la cuenta en 39. necesario introducir nombre de usuario y clave de usuarioEl usuario registrado podra 40. sugerir nuevos productos, en todo momento.Beneficios de Estar registrado41. Describirle a los Usuarios no 42. registrados, pueden obtener crédito mediante tickets, que se obtienen al hacer compras en las maquinas físicas. La clave del ticket se introduce para obtener un créditoUna animación aleatoria para 43. la entrega de cada grupo de productos.Descripción de los personajes 44. al verlos por primera ver. (con opción a saltarla)La interfaz cambia de acuerdo a 45. la hora del día.Al estar el sistema inactivo, la 46. interfaz tornara a estar frio o borrosoRegalos para el facebook entre-47. gados aleatoriamente una vez por semanaTips para uso de la interfaz48. Beneficio de estar registrad49. El usuario ingrea mediante un 50. botón de entrarPara acceder a su cuenta los 51. usuarios deben ingresar nom-bre de usuario y contraseña

El usuario puede elegir si su 52. nombre de usuario y contrase-ña sean recordadosMediante una pregunta secreta, 53. ingresada en el perfil, el usuario puede asociar su contraseña a la pregunta

Interfaz a Nivel Semiotico Sobre una Maquina Expendedora de ProductosBits de Información / Patrones

Bits RelacionadosA: 1-17B: 18-23C: 24-30; 34-36; 42-46D: 31-33, 37-40E: 41, 47, 48F: 49-52g: 41, 42

2 de 10


gLos Usuarios no registrados, pueden obtener crédito mediante tickets, que se obtienen al hacer compras en las maquinas físicas. La clave del ticket se introduce para obtener un crédito

DLos usuarios tienen la opcion de registrarse.Para registro se requiere nombre, nombre de usuario, contraseña, pregunta secreta, correo elec-trònico*, edad, sexo, ocupación* (*información opcional)Para acceder a la cuenta en nece-sario introducir nombre de usuario y clave de usuarioEl usuario registrado selecciona sus preferenciasLas cuentas de ususario llevan un conteo de consumoEl usuario registrado podra sugerir nuevos productos, en todo mo-mento.Beneficios de Estar registrado

FEl usuario ingrea mediante un botón de entrarPara acceder a su cuenta los usuarios deben ingresar nombre de usuario y contraseña

El usuario puede elegir si su nom-bre de usuario y contraseña sean recordadosMediante una pregunta secreta, ingresada en el perfil, el usuario puede asociar su contraseña a la pregunta

BFamiliarizado con interfaces socia-lesPreferencia por el delaware punchPreferencia por las papasEl usuario podrá visualizar indicado-res de los productos mas vendidos Diario consume bebidas y botanasLlega hambriento después del trabajo

CExhibir los productos de la máquinaEn caso de no arrastrar las monedas la maquina simulara la acciónUna animación aleatoria para la en-trega de cada grupo de productos.El usuario frecuente tiene la opcion de mantener un crédito Reproducción de sonidos de las acciones de compra, al introducir las monedas y/o billetes, asi como sonidos de la maquina.El credito aparecera en monedas aleatoriasEl usuario elige y arrastra de su credito las monedas y billetes con

los que hara la compraEl cambio se entregara con mone-das aleatoriasPor cada 50 consumos se bonifica-ra al usuario con un producto de manera sorpresivaEl usuario podrá visualizar una lista de su compra, modificarla, añadir, eliminar El usuario podrá visualizar su crédi-to por todo el procesod e compraDescripción de los personajes al verlos por primera ver. (con opción a saltarla)La interfaz cambia de acuerdo a la hora del día.Al estar el sistema inactivo, la inter-faz tornara a estar frio o borrosoRegalos para el facebook entre-gados aleatoriamente una vez por semana

AEl sujeto se llama MarthaTiene 21 añosTrabaja Tiene computadora en casa y tra-bajoEl usuario es expertoEstudia diseño graficoConteo de consumoPreferencias de Usuarioe-mailNombre con apellidos

nombre de usuarioSexoPregunta secreta Trabaja por proyectosLee revistas en lineaLee blogsFamiliarizado con interfaces simila-res (paquete adobe)

EDescribirle al Usuarios no regis-trados, pueden obtener crédito mediante tickets, que se obtienen al hacer compras en las maquinas físi-cas. La clave del ticket se introduce para obtener un créditoTips para uso de la interfazBeneficio de estar registrad

*************************************Los Patrones se ordenaron de acuerdo al nivel de importancia del conjunto dentro de la interfaz. Así mismo los bits en cada patron estar ordenados por:

IndispensablesImportantesAgradables Descartables

*************************************

Interfaz a Nivel Semiotico Sobre una Maquina Expendedora de ProductosPatrones Priorizados

3 de 10


g

D

F

B

Interfaz a Nivel Semiotico Sobre una Maquina Expendedora de ProductosPatrones Boceto

Produictos Ca-1.

tegorizados de

acuerdo al usua-

rio (Persona)

Debajo de 2.

menor tamaño

una nube de los

productos más

comprados y/o

relacionados con

los productos

actualmente

visibles

4 de 10


CB El usuario 1.

podrá visua-

lizar una lista

de compra,

modificarla, eli-

minar, añadir y

pagar.

Exhibir los 2.

productos de

la máquina que

ha elegido.

El Usuario registrado, al posicionar el cursor so-1.

bre un grupo de productos aparecerá una ventana

flotante mostrando las preferencias de consumo

de los usuarios basándose en el conteo y prefe-

rencias de consumo.

Una animación alea-1.

toria para la entrega

de cada grupo de

productos.

El usuario podrá visualizar 1.

su crédito durante todo el

proceso de compra

El crédito aparecerá con 2.

monedas aleatorias

El usuario frecuente tiene 3.

un registro de su crédito

El usuario elige y arrastra 4.

de su crédito las monedas

y billetes para hacer la

compra.

La cantidad de monedas y 5.

billetes serán de acuer-

do al ticket o crédito del

usuario.

El cambio se entregará 6.

con monedas aleatorias.

A E

Interfaz a Nivel Semiotico Sobre una Maquina Expendedora de ProductosPatrones Boceto

5 de 10


Interfaz a Nivel Semiotico Sobre una Maquina Expendedora de ProductosWireframes

6 de 10


Interfaz a Nivel Semiotico Sobre una Maquina Expendedora de ProductosInterfaz a Nivel Semiótico 1 - 3

Reproducción de sonidos de las 1.

acciones de compra, al introducir

las monedas y/o billetes, así como

sonidos de la máquina análoga.

Por cada 50 consumos se bonifi-2.

cará al usuario con un producto

de manera sorpresiva regalos para

usuarios registrados de modo

aleatorio una vez por semana para

su facebook.

La interfaz cambia de acuerdo a la 3.

hora del día.

Al estar el sistema inactivo, la 4.

interfaz tornará a estar frío o

borroso.

7 de 10


El usuario que visite el sistema 1.

podrá registrarse, con los datos

proporcionados se generaran listas

de productos personalizadas así

como su perfil.

AL mostrarse las casillas de regis-2.

tro, el restro de la pantalla tornara

a transparente, dando la sensacion

de inactividad. el click en está área

así como en la flecha indicando

arriba, ocultarán las opciones de

registro


8 de 10


Al Ingresar un usuario registrado automaticamnete 1.

aparecerá el perfil y la caacteristicas del mismo, y en

el area de productos, estos apareceran de acuerdo a la

preferencia del usuario.


9 de 10

*Todas las imagenes (gráficos y fotografias) y tipografias utilizadas enn este material gráfico son con fines didácticos, sin lucro. las imágenes y tipografías son propiedad de sus autores.

TallerMultimedia_03

Documents

Transcript of TallerMultimedia_03