presentación sobre diseño web
DESCRIPTION
Desarrolla concpetos básicos sobre accesibilidad y usabilidad WebTRANSCRIPT
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