Diseo de Sitios y

Pginas Web
 INDICE

1. Concepto de sitios Web y pginas Web

2. Concepto de Usabilidad y Accesibilidad de
un sitio Web.
3. Aspectos de Usabilidad a tener en cuenta:
a) Objetivos y pblico objetivo.
b) Tipos de estructura de un sitio Web
c) Niveles en un sitio Web
d) Navegacin en un sitio Web. Consejos
e) Tipos de enlaces Web
f) Diseo lgico de un sitio
g) Prototipacin
 Sitios Web y Pginas Web
Sitio Web: Es un conjunto de archivo llamados pginas Web generalmente
vinculadas entre si por enlaces, con un mismo contenido temtico, y organizadas
jerrquicamente. Generalmente tiene una pgina principal que se llama
index.html

Pgina Web: Es parte de un sitio Web y es un nico archivo con nombre propio.

Pgina Web

Sitio Web

Pgina principal:
Index.html
 Similitudes Comercio / Sitio Web

Comercio Un Sitio Web necesita

Un Nombre Un Nombre
Una direccin fsica en Una direccin virtual
determinado lugar (Dominio)
Un espacio fsico (Local) Un espacio fsico de
alojamiento (Hosting)
Organizar las mercaderas Organizar la informacin
dentro del local dentro del Sitio Web
Una Vidriera (Primera cara Una Pgina Principal
visible) (Primera cara visible)
Accesos internos a las Hipervnculos a las distintas
distintas ofertas que se Pginas publicadas.
comercializan
 Elementos de una pgina Web

Fuente: www.vectoralia.com/manual/html/elementos_web.html
 Qu hace que un sitio Web sea fcil de
usarlo e intuitivo para la mayora de las
personas?

Dos conceptos claves

Usabilidad
Es la capacidad de un sitio Web de
ser comprendido, aprendido y usado
por un usuario. Conjunto de tcnicas
orientadas a tal fin (diseo grafico,
estructura, publico objetivo,
navegacin y enlaces entre otros
Accesibilidad
Es la capacidad de acceso a un sitio Web y
sus contenidos por parte de todas las
personas independientemente de la
discapacidad (fsica, intelectual o tcnica)
que tengan o las relacionadas al contexto
de uso. Por ejemplo: textos alternativos en
imgenes (ALT), enlaces significativos, etc
 Objetivo y pblico objetivo
Implica

A. Conocer cmo son Edad de la mayora de los usuarios que podran

acceder al sitio.
B. Para qu usan el sitio Necesidades de informacin.
C. Qu necesitan Usos del sitio Web trabajo, divulgacin, comercial, educativo
D. Testar el sitio con los propios usuarios Uso intuitivo y efectivo. Amigable
E. Investigar cmo reaccionan ante el Capacidad de adaptacin al sistema
diseo de navegacin.
F. Cmo es su experiencia de uso Conocimientos informticos.
G. Cmo es el contexto de uso Ubicacin geogrfica.Idioma.Equipo de cmputo

Es determinar perfiles
MODELADO DEL de usuarios en relacin
USUARIO a atributos comunes

Enlace: Perfiles de usuarios

 Diseo lgico de un sitio Web
Luego de saber los objetivos se establece la organizacin lgica de las pginas
del sitio Web y la informacin que ir en cada una de ellas.
Para el diseo lgico se aplico metforas que implica utilizar ejemplos concretos y
familiares de la vida que me sirvan luego en la estructura del sitio. Por ejemplo un
rbol, libro, tienda entre otras.
De la estructura lgica de un sitio surgen los mapas de navegacin es decir la
estructura que tiene mi sitio Web y sus interconexiones
 Estructura de un sitio Web
Es la forma que tendr el Sitio Web con sus secciones, funcionalidades y
sistemas de navegacin

Tipos

Arbol Listas Mixta Red

Existe una pgina principal
y de ah se accede a otro
grupo de pginas y estas a
su vez son nodo de otras
(niveles). Es jerarquizada,
compleja, y algo difcil para
navegar.Consejo no mas
de 3 niveles.
La organizacin del Tiene las ventajas Pginas todas
sitio es totalmente de las 2 conectadas entre
opuesto al anterior.No anteriores. Las si. Algo anrquica.
existe una pgina raz pginas estn Ojo! no dejar
o principal. Ideal para jerarquizadas en enlaces
manuales o guas. niveles, y en cada inexistentes y que
nivel se organizan el usuario se
como listas. pierda
 Niveles de un Sitio Web
Se refiere a distancia mxima para alcanzar un determinado documento dentro de
un sitio Web. Es aconsejable no mas de 3 niveles.

Nivel 1

Nivel 2

Nivel 3

Nivel 4

Nivel 5
 Navegacin en los sitios Web
Se refiere a las formas de acceder a los distintos contenidos del sitio

Debe tener las siguientes caractersticas:

A-Consistente: El sistema de navegacin debe ser similar en todo el sitio

en su ubicacin y disposicin en las pginas.

B- Uniforme: Deben de usarse los mismos trminos en todas las pginas

para que el usuario se sienta seguro que va donde desea.

C-Visible: El sistema debe distinguirse claramente dentro del sitio

Tambin hay que considerar 2 elementos claves para la navegacin:

1- Textual: La navegacin se hace con elementos concretos: men, guas y

botones que digan con claridad la accin que van realizar
2- Contextual: Elementos relevantes que permitan mostrar la navegacin en
pantalla
 Tipos de enlaces Web

Enlaces semnticos: Son enlaces entre pginas que tienen una relacin de
contenidos entre s

De una importancia igual o superior a la conquista militar, la

evangelizacin de los pueblos indgenas recay en manos de los
Frailes dominicos, quienes mandaron construir, con mano de obra
esclava de origen indgena, numerosos templos iglesias y conventos.

Enlace semntico

Enlaces de navegacin: Solo sirven para conectar pginas entre s sin un

relacin explcita. Ej.: El enlace Volver o Pgina inicial o el camino recorrido
en el sitio

Enlace de navegacin
 Prototipado

Significa elaborar modelos o prototipos del sitio Web y por lo tanto no es

el producto final, pero sirve para observar si se van cumpliendo los
objetivos de usabilidad y accesibilidad. Luego de implementado se
desecha.

Segn el grado de fidelidad o calidad del prototipo se distingue entre:

Prototipado de alta fidelidad: El prototipo ser muy parecido al sitio

Web una vez terminado.
Prototipado de baja fidelidad: El aspecto del prototipo distar bastante
del que tenga el sitio Web final