UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

DATOS
Alfredo Gonzlez Estrada
alfge@uaq.mx alfge@yahoo.com.mx (442) 330

1930 (442) 192 1200 ext. 5926 Cubculo 28 (hasta arriba al fondo a la izquierda)

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

CURSO
Terico
4 unidades

Conceptos bsicos Proceso de diseo web Usabilidad Estructuras Dos exmenes 40% Tareas 10%

Prctico
Proyecto Final
Asistencia min. 80%

40% 10%

UNIDAD 1

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

QU ES EL DISEO WEB?
Qu es? Herramientas Tcnicas Proceso Quin lo hace? Diseo Grfico Informtica MKT Administracin Comunicaciones Asesores Para qu? Informativas Comerciales Entretenimiento Servicios Definicin de Diseo Web En un proceso que en base a tcnicas y herramientas permiten a un equipo multidisciplinario desarrollar sitios web el cual cuenta con un objetivo cuantificable.

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

PIRMIDE DEL DISEO WEB

$
Objetivo

CONTENIDO SERVICIOS

Tcnica Informtica

Visual Diseo Grfico

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

1.3 CONSTRUIR PARA LOS USUARIOS

Regla:
Los USUARIOS NO son DISEADORES WEB

Regla:
USTED NO es el USUARIO

Regla:
Disee para el usuario medio, pero tenga en cuenta las

diferencias

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

1.4 UTILIDAD Y FACILIDAD DE EMPLEO

Regla:
La ejecucin de un sitio tiene que rayar en la perfeccin

Conocer las tecnologas Regla:

Conoce y respeta las restricciones de la Web y del medio

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

1.4 UTILIDAD Y FACILIDAD DE EMPLEO

Complejo

Sitio creado dinmicamente

Aplicaciones basadas en Web

Simple

Sitio Web esttico

Sitio esttico con formulario

Acceso dinmico a datos a travs de Web

Centrado en el documento

Centrado en la aplicacin

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

1.5 LA INTERFAZ EN WEB

Interfaz Grfica de usuario (GUI)
Hipervnculos -> subrayados en color azul Men -> arriba o a la izquierda Titulo -> que tenga! Buscador -> arriba a la derecha Imagen grfica -> Correcta

Regla:
Los sitios Web debern respetar los principios GUI

siempre que sean apropiados

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

1.5 LA INTERFAZ EN WEB

Prestar la mxima atencin al contenido
Vnculos con nombres claros

http://198.215.30.28/jdoihf.html Ir a caractersticas del programa Para ver las caractersticas del programa de clic en el siguiente vinculo: http://www.info.com

Agrupar de forma lgica los botones

Ttulos claros y de acuerdo al contenido Elementos de navegacin consistentes

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

PRESTAR LA MXIMA ATENCIN AL CONTENIDO

Regla: La navegacin es solamente un medio para

conseguir un resultado final.

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

1.6 EL ASPECTO IMPORTA

Regla: Los elementos visuales influirn en gran medida

en la percepcin inicial del inters del sitio por parte del usuario.

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

EL ASPECTO IMPORTA
REGLA: EL VALOR PERMANENTE DEL SITIO VIENE DETERMINADO POR LOS ASPECTOS VISUALES, EL CONTENIDO, LA TECNOLOGA, LA FACILIDAD DE EMPLEO Y LA CONSECUCIN DEL OBJETIVO

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

1.7 EQUILIBRIO ENTRE FORMA Y FUNCIN

REGLA: NO INVENTE INTERFACES PARA CREAR MARCA.

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

QU ES UN BUEN DISEO WEB?

Regla: No existe una nica forma correcta de diseo

Web que se adapte a todos los sitios

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

SITIOS WEB EXITOSOS

Caractersticas positivas
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.

Caractersticas negativas
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18.

Buen Contenido 3 3 2 2 3 2 2 3 3 3 3 = 29 Atractivo visualmente 1 2 1 1 2 1 1 2 = 11 Fcil Acceso 3 3 1 1 2 1 = 11 Buena funcionalidad 2 1 2 = 5 Buena estructura 2 1 = 3 Imgenes complementarias Disponibilidad 3 Informacin actualizada 2 2 1 = 5 Seguridad 3 1 3 = 7 Mapa de sitio Que sea global Rpida 2 1 2 1 = 6 Portabilidad Navegacin fcil 1 URL apropiado 3 Compatibilidad, sin plugins 2 Informacin veraz Fcil de usar 1 1 3 3 3 3 = 14 Escalabilidad 2

Exceso de informacin Mal contraste de colores Informacin obsoleta Difcil acceso Saturacin de medios (informacin multimedia innecesaria) Mala seguridad Sin apoyo visual Mala Estructura Falta de actualizacin Idiomas no disponibles Ventanas emergentes Hipervnculos malos Usuario sin control Mal diseo Plataformas inestables Informacin sin soporte Exceso de plugins Falsa publicidad

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

LO QUE SE VE ES LO QUE SE DESEA

Regla: El control debera estar en manos del usuario o,

al menos, debera parecerlo

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

MODELO DEL MTODO WEB BSICO

(EL MODELO DE CASCADA)
Definicin del problema Exploracin del concepto Anlisis de requisitos Especificacin Diseo de prototipos Realizacin y pruebas unitarias

Integracin y ensayo del sistema Publicacin, explotacin y mantenimiento

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

MODELO DEL MTODO WEB BSICO

(EL MODELO DE CASCADA MODIFICADO)
Definicin del problema Exploracin del concepto Anlisis de requisitos Especificacin Diseo de prototipos Realizacin y pruebas unitarias Anlisis de riesgos en remolino

Integracin y ensayo del sistema Publicacin, explotacin y mantenimiento

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

DESARROLLO DE APLICACIN CONJUNTA (JAD: JOINT APPLICATION DESIGN)

1. El diseador habla con los clientes para conocer sus requisitos. Realiza el primer prototipo

2. El cliente prueba el prototipo y sugiere cambios y ampliaciones. Si es correcto, se publica.

3. El diseador prepara un nuevo prototipo. Volver al paso 2

Producto acabado

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

DEFINICIN DEL PROBLEMA EXPLORACIN DEL CONCEPTO

Los objetivos deben de ser claros Tormenta de ideas Refinar objetivos Audiencia Perfil de usuario

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

OBJETIVO
Mal diseado
Desarrollar un sitio Web que

Bien diseado
Desarrollar un sitio Web de

proporcione a los potenciales clientes de un restaurante de comida japonesa cierta informacin importante, tal como horario, men, ambiente y precios, y les anime a visitar el lugar o a hacer su pedido por telfono

informacin para un restaurante de comida japonesa que mensualmente proporcione a 300 potenciales clientes informacin importante , tal como horario, men, ambiente y precios, y les anime a visitar el lugar o a hacer pedidos por telfono.

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

AUDIENCIA
Usuarios
Donde viven Edad Sexo Idioma Conocimientos tcnicos Conexin Equipo Explorador

Para que se conectan

Que obtienen Que desean Cuanto tiempo entran Cada cuando En que paginas van a salir del

sitio Cuando volvern al sitio

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

PLANIFICACIN DEL SITIO

Breve declaracin de Requisitos visuales

objetivos Anlisis detallado de los objetivos Anlisis de la audiencia Anlisis de los escenarios de empleo Requisitos del contenido Requisitos tcnicos

Requisitos de distribucin
Diagrama de la estructura

del sitio Dotacin de personal Plazos de tiempo Presupuesto

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

REQUISITOS DE CONTENIDO
Contenido Misin y visin Organigrama Existe Si No Tipo Texto Texto Responsable L.A. Fulano de Tal Dir. Jefe Fecha de entrega 15/03/08 25/03/08 Observacio nes

Fotos Instalaciones

5/10

JPG

DG Perengano Fotografo X

15/03/08 20/03/08

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

DISEO
Sugerencia: Si es posible, recopile el contenido antes de abordar el

diseo

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

COMPOSICIN POR BLOQUES

Regla: El diseo visual debe realizarse de arriba hacia

abajo, empezando por la pgina principal, siguiendo por las pginas correspondientes a las subsecciones y finalizando por las pginas de contenido.

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

COMPOSICIONES
Sugerencia:

Tenga en cuenta siempre el borde de la ventana del explorador cuando desarrolle sus creaciones visuales.

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

COMPOSICIONES
Regla: No se case con sus prototipos de diseo. Escuche

a sus usuarios y vuelva a definir sus diseos.

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

EL SITIO SIMULADO
Ensamblar las pginas web con HTML, y posiblemente las

hojas de estilo; utilizar texto simulado. Una vez ensamblado, debe ser perfectamente navegable, sin contenido y con interactividad simulada.

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

IMPLANTACIN DE LA VERSIN BETA DEL SITIO

Cuando el prototipo es aceptable, es momento de

desarrollar el sitio real

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

TIPOS DE PRUEBAS
Pruebas de aceptacin visual Pruebas funcionales Revisin del contenido Pruebas de compatibilidad entre el sistema y el

navegador Pruebas de descarga Pruebas de aceptacin por parte del usuario

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

PRUEBAS
Las pruebas ms importantes son las realizadas por el

usuario, y deberan realizarse en ltimo lugar

UNIVERSIDAD AUTNOMA DE QUERTARO

Facultad de Informtica

PUESTA EN FUNCIONAMIENTO
DEL SITIO Y FASES POSTERIORES
El desarrollo de un sitio Web es un proceso continuo

planificacin, diseo, desarrollo, entrega y vuelta a empezar

Planificacin

Entrega

Diseo

Desarrollo