tallermultimedia_03
DESCRIPTION
Breve Introducción a los por menores del Diseño web...TRANSCRIPT
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).
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
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.
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
¿Sitio web?
¿Página web?
¿Portal?
¿Blog?
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
Modelo aditivo de color RGB
verde
azul rojo
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
Variación en las resoluciones en los monitores
64080010241152
600
480
720
768
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
La resolución
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 Multimedia72 dpi.
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¿Siempre pixeles?
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 MultimediaGIF JPEG PNG
(8 ó 24)SVG Canvas
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
HCI
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
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.
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
Interacción Humano-Computadora
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.
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
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.
Interacción Humano-Computadora
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
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
Interacción Humano-Computadora
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
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
Interacción Humano-Computadora
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
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.
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
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
UAT - FADU - Posgrado - Maestria en Diseño Digital - Semiótica de las Interfaces - interfaz a Nivel Semiótico + Septiembre de 2009
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
UAT - FADU - Posgrado - Maestria en Diseño Digital - Semiótica de las Interfaces - interfaz a Nivel Semiótico + Septiembre de 2009
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
UAT - FADU - Posgrado - Maestria en Diseño Digital - Semiótica de las Interfaces - interfaz a Nivel Semiótico + Septiembre de 2009
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
UAT - FADU - Posgrado - Maestria en Diseño Digital - Semiótica de las Interfaces - interfaz a Nivel Semiótico + Septiembre de 2009
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
UAT - FADU - Posgrado - Maestria en Diseño Digital - Semiótica de las Interfaces - interfaz a Nivel Semiótico + Septiembre de 2009
Interfaz a Nivel Semiotico Sobre una Maquina Expendedora de ProductosWireframes
6 de 10
UAT - FADU - Posgrado - Maestria en Diseño Digital - Semiótica de las Interfaces - interfaz a Nivel Semiótico + Septiembre de 2009
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
UAT - FADU - Posgrado - Maestria en Diseño Digital - Semiótica de las Interfaces - interfaz a Nivel Semiótico + Septiembre de 2009
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
Interfaz a Nivel Semiotico Sobre una Maquina Expendedora de ProductosInterfaz a Nivel Semiótico 2 - 3
8 de 10
UAT - FADU - Posgrado - Maestria en Diseño Digital - Semiótica de las Interfaces - interfaz a Nivel Semiótico + Septiembre de 2009
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.
Interfaz a Nivel Semiotico Sobre una Maquina Expendedora de ProductosInterfaz a Nivel Semiótico 3 - 3
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.