Diseño de Sitios y Páginas Web

1. Concepto de sitios Web y páginas Web2. 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 Webc) Niveles en un sitio Webd) Navegación en un sitio Web. Consejose) Tipos de enlaces Webf) Diseño lógico de un sitiog) Prototipación

INDICE

Sitios Web y Páginas Web

Sitio Web: Es un conjunto de archivo llamados páginas Web generalmentevinculadas 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

•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

Similitudes Comercio / Sitio WebSimilitudes Comercio / Sitio Web

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

Un Sitio Web necesitaComercio

Elementos de una página Web

Fuente: www.vectoralia.com/manual/html/elementos_web.html

¿Qué hace que un sitio Web sea fácil de usarlo e intuitivo para la mayoría de las

personas?

Dos conceptos clavesDos conceptos claves

UsabilidadUsabilidad AccesibilidadAccesibilidad

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

Objetivo y público objetivo

Implica

C. Qué necesitan

B. Para qué usan el sitio

D. Testar el sitio con los propios usuarios

E. Investigar cómo reaccionan ante el diseñoF. Cómo es su experiencia de uso

G. Cómo es el contexto de uso

MODELADO DEL USUARIO

Es determinar perfiles de usuarios en relación

a atributos comunes

Enlace: Perfiles de usuarios

A. Conocer cómo son Edad de la mayoría de los usuarios que podrían acceder al sitio.

Necesidades de información.

Conocimientos informáticos.

Ubicación geográfica.Idioma.Equipo de cómputo

Capacidad de adaptación al sistema de navegación.

Usos del sitio Web trabajo, divulgación, comercial, educativo

Uso intuitivo y efectivo. “Amigable”

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

Es la forma que tendrá el Sitio Web con sus secciones, funcionalidades y sistemas de navegación

Estructura de un sitio WebEstructura de un sitio Web

Tipos

Existe una página principaly de ahí se accede a otrogrupo de páginas y estas asu vez son nodo de otras(niveles). Es jerarquizada,compleja, y algo difícil paranavegar.Consejo no masde 3 niveles.

Arbol Listas

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.

Tiene las ventajas de las 2 anteriores. Las páginas están jerarquizadas en niveles, y en cada nivel se organizan como listas.

Mixta

Páginas todas conectadas entre si. Algo anárquica. ¡Ojo! no dejar enlaces inexistentes y que el usuario se pierda

Red

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 5

Nivel 4

Navegación en los sitios Web

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

Se refiere a las formas de acceder a los distintos contenidos del sitio

2- Contextual: Elementos relevantes que permitan mostrar la navegación en pantalla

Tipos de enlaces Web

Enlaces semánticos: Son enlaces entre páginas que tienen una relación de contenidos entre sí

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

“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

Enlace de navegación

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