Você está na página 1de 27

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

TDM / A-02

Universidad Autónoma de Tamaulipas


Taller de Multimedia Facultad de Arquitectura, Diseño y Urbanismo
Licenciatura en Diseño Gráfico
Asesor / LDG Leonides Delgado Moya, MDD
Periodo 2010 - 1
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 Tamaulipas


Taller de Multimedia Facultad de Arquitectura, Diseño y Urbanismo
Licenciatura en Diseño Gráfico
Asesor / LDG Leonides Delgado Moya, MDD
Periodo 2010 - 1
¿Sitio web?
¿Página web?
¿Portal?
¿Blog?

Universidad Autónoma de Tamaulipas


Taller de Multimedia Facultad de Arquitectura, Diseño y Urbanismo
Licenciatura en Diseño Gráfico
Asesor / LDG Leonides Delgado Moya, MDD
Periodo 2010 - 1
Modelo aditivo de color RGB

verde

azul rojo

Universidad Autónoma de Tamaulipas


Taller de Multimedia Facultad de Arquitectura, Diseño y Urbanismo
Licenciatura en Diseño Gráfico
Asesor / LDG Leonides Delgado Moya, MDD
Periodo 2010 - 1
Variación en las resoluciones en los monitores
1152 1024 800 640

480

600

720
Universidad Autónoma de Tamaulipas
Taller de Multimedia Facultad de Arquitectura, Diseño y Urbanismo
Asesor / LDG Leonides Delgado Moya, MDD
Periodo 2010 - 1
768
Licenciatura en Diseño Gráfico
La resolución

Universidad Autónoma de Tamaulipas


Taller de Multimedia Facultad de Arquitectura, Diseño y Urbanismo
Licenciatura en Diseño Gráfico
Asesor / LDG Leonides Delgado Moya, MDD
Periodo 2010 - 1
72 dpi. Universidad Autónoma de Tamaulipas
Taller de Multimedia Facultad de Arquitectura, Diseño y Urbanismo
Licenciatura en Diseño Gráfico
Asesor / LDG Leonides Delgado Moya, MDD
Periodo 2010 - 1
¿Siempre pixeles?
Taller de Multimedia
Universidad Autónoma de Tamaulipas
Facultad de Arquitectura, Diseño y Urbanismo
Licenciatura en Diseño Gráfico
Asesor / LDG Leonides Delgado Moya, MDD
Periodo 2010 - 1
GIF JPEG PNG SVG Canvas
Universidad Autónoma de Tamaulipas
Taller de Multimedia (8 ó 24) Facultad de Arquitectura, Diseño y Urbanismo
Licenciatura en Diseño Gráfico
Asesor / LDG Leonides Delgado Moya, MDD
Periodo 2010 - 1
HCI

Universidad Autónoma de Tamaulipas


Taller de Multimedia Facultad de Arquitectura, Diseño y Urbanismo
Licenciatura en Diseño Gráfico
Asesor / LDG Leonides Delgado Moya, MDD
Periodo 2010 - 1
Interacción Humano-Computadora
HCI, por sus siglas en inglés, es el
estudio de la relación que existe entre
los usuarios humanos y los sistemas
de cómputo que usan para realizar
diversas tareas.

Universidad Autónoma de Tamaulipas


Taller de Multimedia Facultad de Arquitectura, Diseño y Urbanismo
Licenciatura en Diseño Gráfico
Asesor / LDG Leonides Delgado Moya, MDD
Periodo 2010 - 1
Interacción Humano-Computadora

Busca entender cómo funcionan los


usuarios, las tareas que necesitan
llevar a cabo y el modo en el que los
sistemas de cómputo necesitan estar
estructurados para facilitar el
cumplimiento de esas tareas.

Universidad Autónoma de Tamaulipas


Taller de Multimedia Facultad de Arquitectura, Diseño y Urbanismo
Licenciatura en Diseño Gráfico
Asesor / LDG Leonides Delgado Moya, MDD
Periodo 2010 - 1
Interacción Humano-Computadora
Para entender a los usuarios es
necesario entender los procesos,
capacidades y predilecciones que
pueden asociarse a las tareas que
desempeñan.

Esto involucra un entendimiento y


conocimiento de cosas como la
memoria, visión, cognición, oído,
tacto y habilidades motrices.

Universidad Autónoma de Tamaulipas


Taller de Multimedia Facultad de Arquitectura, Diseño y Urbanismo
Licenciatura en Diseño Gráfico
Asesor / LDG Leonides Delgado Moya, MDD
Periodo 2010 - 1
Interacción
Humano-Computadora
Interfaz Retorica de
de Usuario Interfaces

Arquitectura Diseño de
de Información Experiencia Información
de Usuario
Usabilidad UX Accesibilidad

Patrones Bits de Diseño de


información Personas
bosquejo de la idea
objetivo Universidad Autónoma de Tamaulipas
Taller de Multimedia
necesidades
Facultad de Arquitectura, Diseño y Urbanismo
Licenciatura en Diseño Gráfico
Asesor / LDG Leonides Delgado Moya, MDD
Periodo 2010 - 1
Interacción
Humano-Computadora
Interfaz Retorica de
de Usuario Interfaces

Arquitectura Diseño de
de Información Experiencia Información
de Usuario
Usabilidad UX Accesibilidad

Patrones Bits de Diseño de


información Personas
bosquejo de la idea
objetivo Universidad Autónoma de Tamaulipas
Taller de Multimedia
necesidades
Facultad de Arquitectura, Diseño y Urbanismo
Licenciatura en Diseño Gráfico
Asesor / LDG Leonides Delgado Moya, MDD
Periodo 2010 - 1
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, Universidad Autónoma de Tamaulipas
Taller de Multimedia
deben realizar la lista antes mencionada.
Facultad de Arquitectura, Diseño y Urbanismo
Licenciatura en Diseño Gráfico
Asesor / LDG Leonides Delgado Moya, MDD
Periodo 2010 - 1
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.

Universidad Autónoma de Tamaulipas


Taller de Multimedia Facultad de Arquitectura, Diseño y Urbanismo
Licenciatura en Diseño Gráfico
Asesor / LDG Leonides Delgado Moya, MDD
Periodo 2010 - 1
Interfacez Semiótica
Sobre una Maquina Expendedora de Productos

Sandra Ezquer Zuñiga


Rodolfo Alvarez Rivera
Leonides Delgado Moya
Alumnos

Maestria en Diseño Digital


Semiotica de las Interfaces

Mtro. Ernesto Peña Alonso


Asesor

Septiembre de 2009

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
Bits de Información / Patrones Sobre una Maquina Expendedora de Productos
1. El sujeto se llama Martha 26. Reproducción de sonidos de las 39. Para acceder a la cuenta en 52. El usuario puede elegir si su
2. Tiene 21 años acciones de compra, al introdu- necesario introducir nombre de nombre de usuario y contrase-
3. Estudia diseño grafico cir las monedas y/o billetes, asi usuario y clave de usuario ña sean recordados
4. Trabaja como sonidos de la maquina. 40. El usuario registrado podra 53. Mediante una pregunta secreta,
5. Tiene computadora en casa y 27. El credito aparecera en mone- sugerir nuevos productos, en ingresada en el perfil, el usuario
trabajo das aleatorias todo momento. puede asociar su contraseña a
6. Trabaja por proyectos 28. El usuario elige y arrastra de su 41. Beneficios de Estar registrado la pregunta
7. El usuario es experto credito las monedas y billetes 42. Describirle a los Usuarios no
8. Lee revistas en linea con los que hara la compra registrados, pueden obtener
9. Lee blogs 29. El cambio se entregara con crédito mediante tickets, que se
10. Familiarizado con interfaces monedas aleatorias obtienen al hacer compras en
similares (paquete adobe) 30. En caso de no arrastrar las las maquinas físicas. La clave
11. Conteo de consumo monedas la maquina simulara del ticket se introduce para
12. Preferencias de Usuario la accion obtener un crédito Bits Relacionados
13. e-mail 31. Los usuarios tienen la opcion 43. Una animación aleatoria para
A: 1-17
14. Nombre con apellidos de registrarse la entrega de cada grupo de
B: 18-23
15. nombre de usuario 32. El usuario registrado seleccio- productos.
C: 24-30; 34-36; 42-46
16. Sexo na sus preferencias 44. Descripción de los personajes
D: 31-33, 37-40
17. Pregunta secreta 33. Las cuentas de ususario llevan al verlos por primera ver. (con
E: 41, 47, 48
18. Familiarizado con interfaces un conteo de consumo opción a saltarla)
sociales 34. Por cada 50 consumos se boni- 45. La interfaz cambia de acuerdo a
F: 49-52
19. Llega hambriento después del ficara al usuario con un produc- la hora del día.
G: 41, 42
trabajo to de manera sorpresiva 46. Al estar el sistema inactivo, la
20. Diario consume bebidas y bo- 35. El usuario podrá visualizar una interfaz tornara a estar frio o
tanas lista de su compra, modificarla, borroso
21. Preferencia por el delaware añadir, eliminar 47. Regalos para el facebook entre-
punch 36. El usuario podrá visualizar su gados aleatoriamente una vez
22. Preferencia por las papas crédito por todo el proceso por semana
23. El usuario podrá visualizar indi- 37. d e compra 48. Tips para uso de la interfaz
cadores de los productos mas 38. Para registro se requiere nom- 49. Beneficio de estar registrad
vendidos bre, nombre de usuario, contra- 50. El usuario ingrea mediante un
24. Exhibir los productos de la seña, pregunta secreta, correo botón de entrar
máquina electrònico*, edad, sexo, ocupa- 51. Para acceder a su cuenta los
25. El usuario frecuente tiene la ción* (*información opcional) usuarios deben ingresar nom-
opcion de mantener un crédito bre de usuario y contraseña

UAT - FADU - Posgrado - Maestria en Diseño Digital - Semiótica de las Interfaces - interfaz a Nivel Semiótico + Septiembre de 2009 2 de 10
Interfaz a Nivel Semiotico
Patrones Priorizados Sobre una Maquina Expendedora de Productos

G El usuario puede elegir si su nom-


bre de usuario y contraseña sean
los que hara la compra
El cambio se entregara con mone-
nombre de usuario
Sexo
Los Usuarios no registrados,
recordados das aleatorias Pregunta secreta
pueden obtener crédito mediante
Mediante una pregunta secreta, Por cada 50 consumos se bonifica- Trabaja por proyectos
tickets, que se obtienen al hacer
ingresada en el perfil, el usuario ra al usuario con un producto de Lee revistas en linea
compras en las maquinas físicas.
puede asociar su contraseña a la manera sorpresiva Lee blogs
La clave del ticket se introduce
pregunta El usuario podrá visualizar una lista Familiarizado con interfaces simila-
para obtener un crédito
de su compra, modificarla, añadir, res (paquete adobe)

D B eliminar

Los usuarios tienen la opcion de


Familiarizado con interfaces socia- El usuario podrá visualizar su crédi- E
les to por todo el proceso Describirle al Usuarios no regis-
registrarse.
Preferencia por el delaware punch d e compra trados, pueden obtener crédito
Para registro se requiere nombre,
Preferencia por las papas Descripción de los personajes al mediante tickets, que se obtienen al
nombre de usuario, contraseña,
El usuario podrá visualizar indicado- verlos por primera ver. (con opción hacer compras en las maquinas físi-
pregunta secreta, correo elec-
res de los productos mas vendidos a saltarla) cas. La clave del ticket se introduce
trònico*, edad, sexo, ocupación*
Diario consume bebidas y botanas La interfaz cambia de acuerdo a la para obtener un crédito
(*información opcional)
Llega hambriento después del hora del día. Tips para uso de la interfaz
Para acceder a la cuenta en nece-
trabajo Al estar el sistema inactivo, la inter- Beneficio de estar registrad
sario introducir nombre de usuario
faz tornara a estar frio o borroso
y clave de usuario
El usuario registrado selecciona
C Regalos para el facebook entre-
Exhibir los productos de la máquina gados aleatoriamente una vez por *************************************
sus preferencias
En caso de no arrastrar las monedas semana Los Patrones se ordenaron de
Las cuentas de ususario llevan un
la maquina simulara la acción acuerdo al nivel de importancia del
conteo de consumo
El usuario registrado podra sugerir
Una animación aleatoria para la en- A conjunto dentro de la interfaz. Así
trega de cada grupo de productos. El sujeto se llama Martha mismo los bits en cada patron estar
nuevos productos, en todo mo-
El usuario frecuente tiene la opcion Tiene 21 años ordenados por:
mento.
de mantener un crédito Trabaja Indispensables
Beneficios de Estar registrado
Reproducción de sonidos de las Tiene computadora en casa y tra- Importantes

F acciones de compra, al introducir


las monedas y/o billetes, asi como
bajo
El usuario es experto
Agradables
Descartables
El usuario ingrea mediante un
sonidos de la maquina. Estudia diseño grafico *************************************
botón de entrar
El credito aparecera en monedas Conteo de consumo
Para acceder a su cuenta los
aleatorias Preferencias de Usuario
usuarios deben ingresar nombre
El usuario elige y arrastra de su e-mail
de usuario y contraseña
credito las monedas y billetes con Nombre con apellidos

UAT - FADU - Posgrado - Maestria en Diseño Digital - Semiótica de las Interfaces - interfaz a Nivel Semiótico + Septiembre de 2009 3 de 10
Interfaz a Nivel Semiotico
Patrones Boceto Sobre una Maquina Expendedora de Productos

G F

D
B
1. Produictos Ca-
tegorizados de
acuerdo al usua-
rio (Persona)
2. Debajo de
menor tamaño
una nube de los
productos más
comprados y/o
relacionados con
los productos
actualmente
visibles

UAT - FADU - Posgrado - Maestria en Diseño Digital - Semiótica de las Interfaces - interfaz a Nivel Semiótico + Septiembre de 2009 4 de 10
Interfaz a Nivel Semiotico
Patrones Boceto Sobre una Maquina Expendedora de Productos

B C 1. El usuario
1. El usuario podrá visualizar
podrá visua-
su crédito durante todo el
lizar una lista
proceso de compra
de compra,
2. El crédito aparecerá con
modificarla, eli-
monedas aleatorias
minar, añadir y
3. El usuario frecuente tiene
pagar.
un registro de su crédito
2. Exhibir los
4. El usuario elige y arrastra
productos de
de su crédito las monedas
la máquina que
y billetes para hacer la
ha elegido.
compra.
5. La cantidad de monedas y
billetes serán de acuer-
1. El Usuario registrado, al posicionar el cursor so- do al ticket o crédito del
bre un grupo de productos aparecerá una ventana usuario.
flotante mostrando las preferencias de consumo 6. El cambio se entregará
de los usuarios basándose en el conteo y prefe- con monedas aleatorias.
rencias de consumo.

A E

1. Una animación alea-


toria para la entrega
de cada grupo de
productos.

UAT - FADU - Posgrado - Maestria en Diseño Digital - Semiótica de las Interfaces - interfaz a Nivel Semiótico + Septiembre de 2009 5 de 10
Interfaz a Nivel Semiotico
Wireframes Sobre 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 6 de 10
Interfaz a Nivel Semiotico
Interfaz a Nivel Semiótico 1 - 3 Sobre una Maquina Expendedora de Productos

1. Reproducción de sonidos de las de manera sorpresiva regalos para 4. Al estar el sistema inactivo, la
acciones de compra, al introducir usuarios registrados de modo interfaz tornará a estar frío o
las monedas y/o billetes, así como aleatorio una vez por semana para borroso.
sonidos de la máquina análoga. su facebook.
2. Por cada 50 consumos se bonifi- 3. La interfaz cambia de acuerdo a la
cará al usuario con un producto hora del día.

UAT - FADU - Posgrado - Maestria en Diseño Digital - Semiótica de las Interfaces - interfaz a Nivel Semiótico + Septiembre de 2009 7 de 10
Interfaz a Nivel Semiotico
Interfaz a Nivel Semiótico 2 - 3 Sobre una Maquina Expendedora de Productos

1. El usuario que visite el sistema 2. AL mostrarse las casillas de regis-


podrá registrarse, con los datos tro, el restro de la pantalla tornara
proporcionados se generaran listas a transparente, dando la sensacion
de productos personalizadas así de inactividad. el click en está área
como su perfil. así como en la flecha indicando
arriba, ocultarán las opciones de
registro

UAT - FADU - Posgrado - Maestria en Diseño Digital - Semiótica de las Interfaces - interfaz a Nivel Semiótico + Septiembre de 2009 8 de 10
Interfaz a Nivel Semiotico
Interfaz a Nivel Semiótico 3 - 3 Sobre una Maquina Expendedora de Productos

1. Al Ingresar un usuario registrado automaticamnete


aparecerá el perfil y la caacteristicas del mismo, y en
el area de productos, estos apareceran de acuerdo a la
preferencia del usuario.

UAT - FADU - Posgrado - Maestria en Diseño Digital - Semiótica de las Interfaces - interfaz a Nivel Semiótico + Septiembre de 2009 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.

Você também pode gostar