Disenoweb 464

Principios Bsicos
de
Diseo de Sitios Web
Ing. Fabio Garca Ramirez(fagarra@yahoo.com)

Seminario de Tecnologa de Punta VI Semestre
Tecnologa en Sistemas de Informacin
Fundacin Universitaria Tecnolgico Comfenalco
1
Principios Bsicos de Diseo de Sitios Web
Objetivo
Conocer
acerca de la teora y las

tcnicas de diseo de sitios web.
Ing. Fabio Garca Ramrez

El diseo web

Temtica
El diseo web. Concepto.
Caractersticas.
Construccin de sitios webs.
Ingeniera Web.
Requisitos de Calidad.
Modelo del proceso de desarrollo web.
Principios esenciales de un diseo web eficaz.


Que es?
Diseo grfico
Programacin
Cliente/Servidor
Comercio Electrnico


Es
un campo interdisciplinario muy

centrado en el usuario que incluye
influencias de las artes visuales, la
tecnologa, el contenido y la finalidad.

Caractersticas.
Contenido(informa o persuade al usuario).
Tecnologa(da funcionalidad al sitio).
Aspectos visuales(forma visual del sitio).
Aspectos econmicos(beneficios).

Caractersticas.
Finalidad(Econmica)
Usuarios
Contenido
Diseadores
Forma(Visual)
Funcin(Tecnologa)

Tendencias(errores comunes):
Construir a partir de los aspectos visuales(resulta
en un folletoware o panfletoware).
Enfoque tecnolgico(diseo arbol de navidad).

Errores imperdonables en los sitios webs:

Usar grficas demasiado grandes.
Emplear fondos inapropiados.
No ofrecerles algo gratuito a los visitantes.
No darles motivos para regresar al sitio.
No cambiar la apariencia del sitio ocasionalmente.
No ofrecer contenido interesante.
No llevar un registro de visitantes.
No promover el sitio.
10
Ingeniera Web.
Toma prestado muchos de los conceptos y principios bsicos de la

Ingeniera del Software, dando importancia a las mismas
actividades tcnicas y de gestin.
No es un clnico perfecto de la Ingeniera del Software.
La filosofa principal es la aplicacin de un enfoque disciplinado
para el desarrollo de un sistema basado en computadora.
La Ingeniera Web aplica un enfoque genrico que se suaviza con
estrategias, tcticas y mtodos especializados.
La Ingeniera Web est relacionada con el establecimiento y
utilizacin de principios cientficos, de ingeniera y de gestin, y
con enfoques sistemticos y disciplinados del xito del desarrollo,
empleo y mantenimiento de sistemas y aplicaciones basados en
Web de alta calidad.

11
Requisitos de Calidad.
La calidad se refiere a las caractersticas mensurables, que se

pueden comparar con estndares conocidos como longitud, color,
propiedades elctricas, maleabilidad, otros.
A nivel de software, existen unas mtricas tcnicas que
proporcionan una manera sistemtica de valorar la calidad
basndose en un conjunto de reglas claramente definidas.
Las mtricas o requisitos de calidad mas relevantes para evaluar la
calidad de los sistemas basados en Web son:
a. Usabilidad.
b. Funcionalidad.
c. Fiabilidad.
d. Eficiencia.
e. Capacidad de mantenimiento.

12
Modelo del proceso de desarrollo

web.
Definicin del problema.
Exploracin conceptual
Modelo en Cascada
Especificacin y anlisis
de los requisitos
Diseo
de prototipos
Materializacin y
Pruebas unitarias
Integracin y prueba
del sistema
Entrada en funcionamiento,
operacin y mantenimiento

13
Principios esenciales de un
Usted no es el USUARIO.
diseo
web
eficaz.
Los usuarios no son diseadores.

Disee para el usuario medio, pero tenga en cuenta las
diferencias.
La ejecucin de un sitio tiene que rayar la perfeccin.
Conoce y respeta las restricciones de la web y del
medio Internet.

14
Los sitios web debern respetar los principios GUI siempre que
diseo
web eficaz.
sean apropiados.
La navegacin es solamente un medio para conseguir un
resultado final.
Los elementos visuales influirn en gran medida en la
percepcin inicial del inters del sitio por parte del usuario.
No invente interfaces para crear marca.
Lo que ve es lo que desea(WYSIWYW).

15
El valor permanente del sitio viene determinado por
diseo
web
eficaz.
los aspectos visuales, el contenido, la tecnologa, la
facilidad de empleo y la consecucin del objetivo.
No existe una nica forma correcta de diseo web
que se adapte a todos los sitios.
El control debera estar en manos del usuario o al
menos debera parecerlo.

16
Resumen.
El diseo web es un campo interdisciplinar que
consta de cuatro elementos principales: contenido,
forma, funcin y finalidad.
El de seguir una metodologa, incluso bsica, de
diseo web puede ser extremadamente til.
No existe una nica forma correcta de diseo web
que se adapte a todos los sitios.

17
El proceso
de
diseo web

18
Temtica
Mtodo web ad hoc.
Modelo en cascada.
Modelo en cascada modificado.
Diseo de aplicacin conjunta(JAD).
Modelo de proceso IWeb.
Enfoque de un proyecto de un sitio web.

19
Mtodo web ad hoc.

Similar al mtodo codificacin y prueba.
Diseo al vuelo(realizar y publicar).
Mtodo informal(disea segn vas avanzando).
Planificacin escasa y limitada.
Adecuado para proyectos pequeos con escaso
mantenimiento.

20
Modelo en cascada.
de los requisitos
Diseo
de prototipos
Materializacin y
Pruebas unitarias
Integracin y prueba
del sistema

21
Modelo en cascada modificado.

de los requisitos
Anlisis de riesgos
en remolino
Diseo
de prototipos
Materializacin y
Pruebas unitarias
Integracin y prueba
del sistema

22
Diseo de aplicacin conjunta

(JAD, Joint Application Design).
1
El diseador habla con

los clientes para conocer
sus requisitos. Realiza el
primer prototipo.
El cliente prueba el
prototipo y sugiere
cambios y ampliaciones.
Si es correcto se publica.
El diseador prepara un
nuevo prototipo.
Volver al paso 2.

23
Modelo de proceso IWeb

Planificacin
Formulacin
Anlisis
Ingeniera
Evaluacin
del cliente
Generacin
de pginas
y pruebas

Diseo
arquitectnico
Diseo del
contenido
Diseo de
navegacin
Produccin
Diseo de
la interfaz
24
Enfoque de un proyecto de un
Objetivos
y problemas.
sitio
web.
Audiencia perfil del usuario.
Anlisis de requisitos.
Planificacin del sitio.
Fase de diseo.
Pruebas.
Puesta en funcionamiento.
Mantenimiento.

25
Objetivos y problemas.
Deben
ser claros.
Medibles.
Para determinarlos se realiza una
Tormenta de Ideas (BrainStorming).
Deben refinarse.

26
Objetivos poco claros:
Proporcionar un mejor servicio al
cliente.
Conseguir ms dinero abriendo un
mercado interactivo.

27
Objetivos bien declarados:
Desarrollar un sitio Web de ayuda y soporte tcnico que aumente la satisfaccin del
cliente, permitiendo un acceso 24/7 para cuestiones comunes y disminuyendo en un
25 por 100 la atencin telefnica prestada.
Crear un almacn interactivo de recambios de automvil que venda directamente al
consumidor productos por un valor mnimo de 10.000 dlares al mes.
Desarrollar un sitio Web que 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.

28
Audiencia perfil del usuario.

Cual es la audiencia potencial del sitio y sus motivos para
acceder al sitio.
Preguntas bsicas tales como: Dnde viven? Que edad tienen? Hombres
o mujeres? Que idioma hablan? Que conocimientos tcnicos poseen? Que obtienen del
sitio? Que desean ejecutar en el sitio? Cuando visitarn el sitio?
Para la mayora de los sitios hay muchos tipos de usuarios,

cada uno con diferentes caractersticas y objetivos.
Se recomienda elaborar un perfil del usuario.

29
Anlisis de requisitos.
Clase
de contenido a publicar.
Cual sera el aspecto del sitio.
Tecnologa a utilizar.
Restricciones tcnicas.

30
Planificacin del sitio.

Es plasmar en papel las especificaciones del sitio. Puede contener las
siguientes secciones:
Declaracin y anlisis de objetivos.
Anlisis de la audiencia.
Requisitos de contenido, tcnicos y visuales.
Diagrama de la estructura del sitio.
Personal requerido.
Duracin.
Presupuesto.

31
Fase de diseo.
Recopile el contenido, antes de abordar el diseo.
El diseo visual debe realizarse de arriba abajo(TopDown).
Realice prototipos en papel o en pantalla.
Tenga en cuenta el explorador(browser) a utilizar y las
dimensiones de la pantalla.
Realice un sitio simulado.

32
Pruebas.
Los sitios siempre tienen errores, de modo que
pruebe bien su sitio.
Las pruebas deben tener en cuenta todos los
aspectos del sitio, incluyendo el contenido, la
apariencia visual, la funcin y la finalidad.
Las pruebas ms importantes son las realizadas
por el usuario, y deberan realizarse en ltimo lugar.

33
Puesta en funcionamiento y
mantenimiento.
El desarrollo de un sitio web es un
proceso continuo: planificacin, diseo,
desarrollo, entrega y vuelta a empezar.

34
Resumen.
Los diseadores de sitios Web deben adoptar

una metodologa o modelo de procedimiento
que les gue durante el proceso de desarrollo
y les ayude a minimizar riesgos, a gestionar
la complejidad del proyecto y, en general, a
mejorar el resultado final.

35
Diseo para
los
usuarios

36
Temtica
Facilidad de empleo.
Los usuarios.
Caractersticas comunes de los usuarios.
Entornos del usuario.
Tipos comunes de usuarios.
Convenios Web.
Accesibilidad.

37
Es la facilidad con la que un grupo de usuarios puede

utilizar un sitio para conseguir objetivos determinados
con efectividad, eficacia y satisfaccin en un contexto
concreto de empleo(segn norma ISO).
Vara tanto como los usuarios que acceden al sitio.
Depende del tipo de sitio y de la familiaridad que
tenga el usuario con l.

38
Tenga en cuenta las siguientes directrices:

Sea consistente(interfaz sencilla de usar).
Simplifique al mximo el sitio y sus pginas.
Confe en la accin de reconocer, no en recordar.
Intente prevenir o corregir errores.
Proporcione informacin.
Concntrese en la velocidad.
No suponga que los usuarios leern las
instrucciones.
39
Los Usuarios.
Tratar de satisfacer sus necesidades.

Tenga en cuenta el usuario comn(no irse a los
extremos: novatos o expertos).
Los exploradores no utilizan los sitios, los utilizan las
personas.
No existe un tipo genrico de persona, pero suelen
tener caractersticas fsicas similares: visin,
memoria y reaccin a los estmulos.

40
Caractersticas comunes de los

usuarios: Visin.
Es la forma en que reciben la informacin del sitio Web.

Existen tres factores que afectan a la forma en que se
percibe el color: Matiz, saturacin y tonalidad.
Matiz: Grado de similitud entre un color y los colores
bsicos(rojo, verde y azul) o algunas de sus
combinaciones.
Saturacin: Hasta que punto un color difiere del
acromtico(blanco, gris o negro).
Tonalidad: Hasta que punto un color es ms claro o ms
oscuro que otro bajo las mismas condiciones visuales.

41

usuarios: Visin.
Evite el uso de texto, grficos y fondos de matices similares(en
vez de utilizar azul claro y azul oscuro, utilice en su lugar azul y
amarillo, o blanco).
Evite combinar texto, grficos y fondos con saturaciones
similares(en vez de utiliza un texto gris sobre un fondo rosado,
utilice un texto de color blanco sobre un fondo rosado, o
viceversa).
Ponga un contraste alto. Evite el uso de texto, grficos o fondos
de tonalidad similar(nunca utilice texto oscuro sobre fondo oscuro
o texto brillante sobre fondo brillante).
Asegrese que los colores que utilice para diferenciar elementos,
tales como vnculos, difieran claramente en dos atributos: matiz y
tonalidad(evite los vnculos que cambian de rojo a rosado).

42

usuarios: Memoria.
Los usuarios tienen tendencia a maximizar las ganancias y a

minimizar el trabajo.
El reconocimiento resulta ms sencillo que la memorizacin, de
modo que no obligue a los usuarios a memorizar informacin.
No utilice el mismo color para resaltar los vnculos visitados de
los que no lo han sido todava.
Elabore pginas que incluyan importantes diferencias visuales
con el resto de pginas.
Limite el nmero de opciones de importancia similar, tales
como vnculos, a grupos entre 5 y 9 elementos.
Pngase por objetivo la memorizacin de slo tres elementos o
pginas secuenciales.

43
Caractersticas comunes de los usuarios:

Respuesta y tiempo de reaccin.
El tiempo que un usuario esperar es

proporcional al beneficio obtenido.
Cuando los tiempos de respuesta para la
descarga de pginas sean superiores a 30
segundos, trate de proporcionar al usuario su
propia informacin del progreso, por ejemplo, una
barra de progreso del tiempo de descarga.
Esfurcese en conseguir que el usuario conozca
lo ms importante del contenido de una pgina
en un tiempo mximo de un minuto de carga.

44
Caractersticas comunes de los usuarios:

Respuesta y tiempo de reaccin.
Intente optimizar el acceso por teclado para

todas las pginas y no solamente para las
pginas de formulario.
Minimice la distancia que el usuario tiene que
desplazar el ratn entre elecciones sucesivas.
Minimice el desplazamiento del ratn entre la
zona de actuacin en la pgina principal y el
botn Atrs del explorador.
45
Entornos del usuario.
Cuando disee para los usuarios piense siempre

desde dnde estn accediendo al sitio.
Entre los entornos posibles se tienen: Oficina,
Casa, Cibercaf, puesto pblico(kiosko),
PDA(Asistente Personal).

46
Tipos Comunes de usuarios.
Desde el punto de vista de la utilizacin de un sitio Web,

existen tres tipos de usuarios: novatos, intermedios y
expertos.
Un usuario novato es el que tiene poco conocimiento de un
sitio, incluso, de cmo funciona la Web. Requiere ayuda extra.
Los usuarios expertos, son los que comprenden muy bien la
Web o el sitio. Requieren relativamente pocas ayudas y
preferirn hacer menos clics y consumir ms.
Los usuarios intermedios, son realmente el grupo ms
numeroso de usuarios de la Web. Entienden cmo funciona la
Web, pero no saben navegar de una manera eficiente.

47
Tipos Comunes de usuarios.
Trate de crear un sitio Web adaptable que

cumpla con los requisitos de los usuarios
noveles, de los intermedios y de los expertos.
Disee para el usuario intermedio si no es
posible desarrollar una interfaz Web adaptable.

48
Convenios Web.
No se desve de los convenios utilizados de
forma habitual en el desarrollo de interfaces
presentes en los sitios Web ms populares.
Algunas normas Web ms comunes son:
El logotipo situado en la esquina superior
izquierda le permitir volver a la pgina principal.
Los vinculos de texto se repiten en la parte
inferior de la pgina.
Vnculo para volver a la parte superior de la
pgina utilizado en pginas largas.
Los elementos sobre los que se puede hacer clic
son azules y se encuentran subrayados.
49
Convenios Web.
Los elementos secundarios de exploracin, tales

como un plano del sitio o un buscador, se
presentan de forma separada al resto de
elementos de exploracin.

50
Accesibilidad.
El World Wide Web Consortium(W3C) ha
promulgado unas cuantas sugerencias para mejorar
la accesibilidad(http://www.w3c.org/wai) :
Proporcione alternativas equivalentes para los
contenidos auditivo y visual.
Aclare el uso del lenguaje natural(abreviaturas,
definiciones, citas, etc).
Garantice que las pginas que utilicen nuevas
tecnologas se transforman adecuadamente.
Garantice la accesibilidad de las interfaces de
usuario incrustadas.
Disee con independencia de los dispositivos.
51
Resumen.
La facilidad de empleo es uno de los aspectos de un sitio

que no siempre se advierte a primera vista, pero que influye
enormente en la comodidad con que un usuario puede
realizar una determinada tarea cuando utiliza el sitio.
Intente crear una interfaz adaptable que pueda ser utilizada
por los tres grupos comunes de usuarios(novatos,
intermedios y avanzados), con el fin de obtener un sitio
funcional.

52
Tipos de sitios y Arquitectura

53
Temtica
Categoras
generales de sitios Web.

Estructura del sitio.
Tipos especificos de sitios Web.

54
Categoras generales de sitios
Web.
Sitio pblico: es un sitio cuyo acceso no est
restringido explcitamente a ningn tipo de usuarios.

Sitio intranet: es un sitio que est reservado a una
determinada organizacin y generalmente funciona
dentro de una red privada.
Sitio extranet: es un sitio Web al que puede acceder
una clase limitada de usuarios a travs de Internet.

55
Categoras generales de sitios

Sitios estticos: es aquel cuyo contenido es relativamente fijo,
Web.
en el que los usuarios no pueden modificar ni el aspecto ni el

mbito de los datos que observan.
Sitios interactivos: es aquel en el que los usuarios pueden
actuar directamente sobre el contenido del sitio o con otros
usuarios del mismo.
Sitios dinmicos: es aquel que sus pginas se generan en el
momento de la solicitud por parte del usuario.

56
Estructura del sitio.

Hay dos tipos de estructuras en cualquier sitio Web:
Lgica: es la forma como se relacionan entre s los documentos y define
los vnculos entre documentos.
Fsica: describe dnde se encuentra realmente un documento, mostrando,
por ejemplo, el camino al directorio del documento en un servidor Web o
su situacin en una base de datos(por ejemplo, c:
\inetpub\wwwroot\default.htm).
La estructura lgica de un sitio Web es ms importante para el usuario que
su estructura fsica.
Siempre que sea posible, evite dar a conocer la estructura fsica de los
archivos del sitio.

57
Estructura del sitio(Modelos).

Existen cuatro formas de organizacin lgica de los sitios Web:
Lineal: es una estructura secuencial similar a la que sigue la
informacin impresa(revistas, peridicos, etc).
Rejilla: es una estructura lineal doble, en la que sus elementos se
relacionan tanto vertical como horizontalmente.
Jerrquica: es la ms comn en la Web, similar a la estructura de
un rbol.
Tela de araa(Web): no sigue ninguna de las estructuras anteriores
y contiene muchos vnculos cruzados y saltos hacia delante.

58

Lineal
Pgina Principal
Pgina 1
Pgina 2
Pgina 3
Lineal con alternativas

Pgina 1
Pgina Principal
Pgina 4
Pgina 3
Pgina 2
Pgina 5
Lineal con opciones

Pgina Principal
Pgina 1
Pgina 2

Pgina 3
59

Rejilla
Camisas
Pantalones
Manga Corta
Lino
Cuero
Manga Larga
Dril
Lana

Chaquetas
60

Jerarqua estrecha
Empleos
Oferta
Hombres
Demanda
Mujeres
Ing. de Sistemas

Contadores
61

Jerarqua ancha
Pgina Principal
Servicios
Portales
Noticias
Banca

Viajes
62

Jerarqua mixta
Pgina Principal
Servicios
Descargas
Portales
E-mail
Todo en Uno
Banca
Nacional

Internacional
63

Arbol con entrada lineal
Productos
Pgina de
entrada o de
bienvenida
Pgina Principal
Verdadera
Servicios
Presentacin

Corporativos
Personales
Online
Catalogo
Mision, Vision
Staff
64

Web Pura
Productos
Mapa del Sitio
Servicios
Buscador
Principal
Contactos

65
Tipos especficos de sitios Web.

Los sitios pblicos se pueden clasificar en:
Comerciales: su finalidad principal es servir al usuario, de modo
que, de manera directa o indirecta, se beneficie a la
empresa(transaccin comercial).
Informtivos: su finalidad general es la distribucin de
informacin(los de grupos religiosos, organizaciones sin nimo
de lucro, los de noticias, los educativos, sitios del gobierno).
Entretenimiento: su finalidad es simplemente entretener a sus
visitantes. Tratan de vender una experiencia agradable.
Navegacionales: es el que tiene como finalidad ayudar a la
gente a no perderse en Internet(portales).
Comunidad: su finalidad es crear un punto central para que los
miembros de una determinada comunidad se congreguen y se
relacionen.

66
Tipos especficos de sitios Web.

Los sitios pblicos se pueden clasificar en:
Artstico: su finalidad es inspirar, iluminar o entretener a los
espectadores.
Personal: su finalidad es personificar al individuo en la Web.

67
Resumen.
Los sitios Web se pueden clasificar segn su

audiencia(pblicos, intranet y extranet) o
finalidad(comerciales, informativos, personales,
artsticos,entretenimiento, navegacionales y
comunidad).
La eleccin de la estructura correcta para un
determinado sitio es compleja y puede estar influida por
varios factores.

68

Disenoweb 464

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Disenoweb 464

Uploaded by

Copyright:

Available Formats

Principios Bsicos

Ing. Fabio Garca Ramirez(fagarra@yahoo.com)

Principios Bsicos de Diseo de Sitios Web

acerca de la teora y las

Ing. Fabio Garca Ramrez

Principios Bsicos de Diseo de Sitios Web

Ing. Fabio Garca Ramrez

Principios Bsicos de Diseo de Sitios Web

Ing. Fabio Garca Ramrez

Principios Bsicos de Diseo de Sitios Web

El diseo web. Concepto.

Ing. Fabio Garca Ramrez

Principios Bsicos de Diseo de Sitios Web

El diseo web. Concepto.

un campo interdisciplinario muy

Ing. Fabio Garca Ramrez

Principios Bsicos de Diseo de Sitios Web

Ing. Fabio Garca Ramrez

Principios Bsicos de Diseo de Sitios Web

Principios Bsicos de Diseo de Sitios Web

Construccin de sitios webs.

Ing. Fabio Garca Ramrez

Principios Bsicos de Diseo de Sitios Web

Construccin de sitios webs.

Errores imperdonables en los sitios webs:

Principios Bsicos de Diseo de Sitios Web

Toma prestado muchos de los conceptos y principios bsicos de la

Ing. Fabio Garca Ramrez

Principios Bsicos de Diseo de Sitios Web

La calidad se refiere a las caractersticas mensurables, que se

Ing. Fabio Garca Ramrez

Principios Bsicos de Diseo de Sitios Web

Modelo del proceso de desarrollo

Ing. Fabio Garca Ramrez

Principios Bsicos de Diseo de Sitios Web

Los usuarios no son diseadores.

Ing. Fabio Garca Ramrez

Principios Bsicos de Diseo de Sitios Web

Ing. Fabio Garca Ramrez

Principios Bsicos de Diseo de Sitios Web

Ing. Fabio Garca Ramrez

Principios Bsicos de Diseo de Sitios Web

Ing. Fabio Garca Ramrez

Principios Bsicos de Diseo de Sitios Web

Ing. Fabio Garca Ramrez

Principios Bsicos de Diseo de Sitios Web

Ing. Fabio Garca Ramrez

Principios Bsicos de Diseo de Sitios Web

Mtodo web ad hoc.

Ing. Fabio Garca Ramrez

Principios Bsicos de Diseo de Sitios Web

Ing. Fabio Garca Ramrez

Principios Bsicos de Diseo de Sitios Web

Modelo en cascada modificado.

Ing. Fabio Garca Ramrez

Principios Bsicos de Diseo de Sitios Web

Diseo de aplicacin conjunta

El diseador habla con

Ing. Fabio Garca Ramrez

Principios Bsicos de Diseo de Sitios Web

Modelo de proceso IWeb

Ing. Fabio Garca Ramrez

Principios Bsicos de Diseo de Sitios Web