El documento habla sobre conceptos básicos de diseño de sitios y páginas web como la diferencia entre sitio y página, aspectos de usabilidad y accesibilidad, tipos de estructura de sitios web, niveles y navegación. También menciona consejos sobre diseño lógico, tipos de enlaces y prototipado para probar el diseño antes de la implementación final.

1. Diseño de Sitios y Páginas Web

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

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. 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 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 necesita Comercio

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? Dos conceptos claves Usabilidad Accesibilidad 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 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ño F. 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”

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. Es la forma que tendrá el Sitio Web con sus secciones, funcionalidades y sistemas de navegación Estructura de un sitio Web Tipos 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. 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

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 5 Nivel 4

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

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

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