Este documento presenta conceptos clave sobre el diseño de sitios web, incluyendo: 1) La definición de sitios y páginas web, 2) Los conceptos de usabilidad y accesibilidad, importantes para que un sitio sea fácil de usar, y 3) Diferentes aspectos del diseño lógico de un sitio como la estructura, niveles, navegación y enlaces.

1. Agustín Rojas Flores

2. INDICE
1. Concepto de sitios Web y páginas Web
2. Concepto de Usabilidad y Accesibilidad de un sitio Web.
3. Aspectos de Usabilidad a tener en cuenta:
a) Objetivos y público objetivo.
b) Tipos de estructura de un sitio Web
c) Niveles en un sitio Web
d) Navegación en un sitio Web. Consejos
e) Tipos de enlaces Web
f) Diseño lógico de un sitio
g) Prototipación

3. Sitios Web y Páginas Web
Sitio Web: Es un conjunto de archivo llamados páginas Web generalmente
vinculadas entre si por enlaces, con un mismo contenido temático, y organizadas
jerárquicamente. Generalmente tiene una página principal que se llama
index.html
Página Web: Es parte de un sitio Web y es un único archivo con nombre propio.
Página Web
Sitio Web
Página principal:
Index.html

4. Similitudes CCoommeerrcciioo // SSiittiioo WWeebb
Comercio Un Sitio Web necesita
•Un Nombre
•Una dirección física en
determinado lugar
•Un espacio físico (Local)
•Organizar las mercaderías
dentro del local
•Una Vidriera (Primera cara
visible)
•Accesos internos a las
distintas ofertas que se
comercializan
•Un Nombre
• Una dirección virtual
(Dominio)
•Un espacio físico de
alojamiento (Hosting)
•Organizar la información
dentro del Sitio Web
•Una Página Principal
(Primera cara visible)
•Hipervínculos a las distintas
Páginas publicadas.

5. Elementos de una página Web
Fuente: www.vectoralia.com/manual/html/elementos_web.html

6. ¿Qué hace que un sitio Web sea fácil de
usarlo e intuitivo para la mayoría de las
personas?
DDooss ccoonncceeppttooss ccllaavveess
UUssaabbiilliiddaadd AAcccceessiibbiilliiddaadd
Es la capacidad de un sitio Web de
ser comprendido, aprendido y usado
por un usuario. Conjunto de técnicas
orientadas a tal fin (diseño grafico,
estructura, publico objetivo,
navegación y enlaces entre otros
Es la capacidad de acceso a un sitio Web y
sus contenidos por parte de todas las
personas independientemente de la
discapacidad (física, intelectual o técnica)
que tengan o las relacionadas al contexto
de uso. Por ejemplo: textos alternativos en
imágenes (ALT), enlaces significativos, etc

7. Objetivo y público objetivo
Implica
A. Conocer cómo son Edad de la mayoría de los usuarios que podrían
B. Para qué usan el sitio
C. Qué necesitan
Usos del sitio Web trabajo, divulgación, comercial, educativo
D. Testar el sitio con los propios usuarios
E. Investigar cómo reaccionan ante el
diseño
F. Cómo es su experiencia de uso
G. Cómo es el contexto de uso
MODELADO DEL
USUARIO
Uso intuitivo y efectivo. “Amigable”
Capacidad de adaptación al sistema
de navegación.
Es determinar perfiles
de usuarios en relación
a atributos comunes
Enlace: Perfiles de usuarios
acceder al sitio.
Necesidades de información.
Conocimientos informáticos.
Ubicación geográfica.Idioma.Equipo de cómputo

8. Diseño lógico de un sitio Web
Luego de saber los objetivos se establece la organización lógica de las páginas
del sitio Web y la información que irá en cada una de ellas.
Para el diseño lógico se aplico metáforas 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 lógica de un sitio surgen los mapas de navegación es decir la
estructura que tiene mi sitio Web y sus interconexiones

9. EEssttrruuccttuurraa ddee uunn ssiittiioo WWeebb
Es la forma que tendrá el Sitio Web con sus secciones, funcionalidades y
sistemas de navegación
Tipos
Arbol Listas
Existe una página principal
y de ahí se accede a otro
grupo de páginas y estas a
su vez son nodo de otras
(niveles). Es jerarquizada,
compleja, y algo difícil para
navegar.Consejo no mas
de 3 niveles.
La organización del
sitio es totalmente
opuesto al anterior.No
existe una página raíz
o principal. Ideal para
manuales o guías.
Mixta
Tiene las ventajas
de las 2
anteriores. Las
páginas están
jerarquizadas en
niveles, y en cada
nivel se organizan
como listas.
Red
Páginas todas
conectadas entre
si. Algo anárquica.
¡Ojo! no dejar
enlaces
inexistentes y que
el usuario se
pierda

10. Niveles de un Sitio Web
Se refiere a distancia máxima 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

11. Navegación en los sitios Web
Se refiere a las formas de acceder a los distintos contenidos del sitio
Debe tener las siguientes características:
A-Consistente: El sistema de navegación debe ser similar en todo el sitio
en su ubicación y disposición en las páginas.
B- Uniforme: Deben de usarse los mismos términos en todas las páginas
para que el usuario se sienta seguro que va donde desea.
C-Visible: El sistema debe distinguirse claramente dentro del sitio
También hay que considerar 2 elementos claves para la navegación:
1- Textual: La navegación se hace con elementos concretos: menú, guías y
botones que digan con claridad la acción que van realizar
2- Contextual: Elementos relevantes que permitan mostrar la navegación en
pantalla

12. Tipos de enlaces Web
Enlaces semánticos: Son enlaces entre páginas que tienen una relación de
contenidos entre sí
“De una importancia igual o superior a la conquista militar, la
evangelización de los pueblos indígenas recayó en manos de los
Frailes dominicos, quienes mandaron construir, con mano de obra
esclava de origen indígena, numerosos templos iglesias y conventos.”
Enlace semántico
Enlaces de navegación: Solo sirven para conectar páginas entre sí sin un
relación explícita. Ej.: El enlace “Volver” o “Página inicial” o el camino recorrido
en el sitio
Enlace de navegación

13. 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.
Según 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