Taller de USABILIDAD y ACCESIBILIDAD Web

Planificación Inicial del Sitio Web

Objetivos:

definir las metas del proyecto; éstas deben ser generales y específicas, con el

fin de contar con el mayor detalle posible de lo que se desea conseguir.

Vender: como herramienta para incrementar las ventas, bien a través de la venta directa (comercio electrónico) o mediante la generación de contactos cualificados para cerrar la venta fuera del entorno digital.

Servir: como una herramienta para ofrecer serviciospre y post venta a los usuarios/clientes.

Hablar: como una herramienta para acercarse al cliente, estableciendo diálogos, aprendiendo sobre ellos.

Ahorrar: ara reducir costes de servicio mediante la automatización de procesos operativos.

Impactar: como una herramienta para construir y extender la presencia de marca en el mundo digital.

Audiencia: hacia qué grupo de personas estará enfocado el sitio.

- Encuestas- Arquetipos de usuarios- Escenarios de Uso

Tecnología:

qué servicios interactivos se incorporarán al sitio y qué infraestructura se necesita para sustentar dichos servicios.

Hardware: se refiere a los elementos físicos del sistema. En el caso más simple lo compondrá el servidor y los elementos de infraestructura de red.

Software: son los programas y aplicaciones que se necesitan para que se pueda ejecutar las funciones y tareas que se van a ofrecer a los usuarios del sistema.

EstáticasLa arquitectura de un sitio Web tiene tres componentes principales: un servidor Web,una conexión de red, y uno o más clientes (navegadores)

DinámicasLa información está almacenada en una basede datos, y las páginas son creadas dinámicamente.

Arquitectura “Open Source”:

• Servidor Web Apache• Lenguaje de programación de aplicaciones: PHP• Bases de datos: MySQL

Arquitectura Microsoft:

• Servidor Microsoft IIS• Lenguaje de programación de aplicaciones: ASP.NET.• Bases de datos: Microsoft SQL / MySQLc.

Arquitectura Java:

• Servidor Web Tomcat.• Lenguaje de programación aplicaciones: JSP.• Bases de datos: soporta sistemas de varios fabricantes: Oracle, Microsoft SQL,etc.

Definición del Sitio Web

Arquitectura de Información.La Arquitectura de la Información es el conjunto de métodos y herramientas que permiten organizar los contenidos, para ser encontrados y utilizados por los usuarios, de manera simple y directa.

Definición del Sitio Web

• Definición de Contenidos del Sitio• Definición de la Estructura del Sitio• Definición de los Sistemas de Navegación• Definición del Diseño Visual Imagen

Definición de Contenidos del SitioUna vez que se han identificado los objetivos del sitio y la audiencia, se debe proceder hacer las definiciones más concretas que permitan decidir qué contenidos son los que va a tener el sitio web que se desarrolle

• Clasificación orientada a la audiencia:• Clasificación orientada a la tarea:• Clasificación temática:

Definición de la Estructura del Sitio

Se realiza el proceso de identificar la forma que tendrá el sitio web que se está desarrollando.En este sentido es importante hacer una diferencia entre estructura y diseño.

Estructura: se refiere a la forma que tendrá el sitio web en términos generales con sussecciones, funcionalidades y sistemas de navegación. No considera ni incluye gráficos

Diseño: se refiere a la solución gráfica que se creará para el sitio, en la cual aparecencolores, logotipos, viñetas, y otros elementos de diseño que permiten identificar visualmente al sitio.

EstructuraSe refiere a las conexiones y relaciones

entre páginas

Estructura secuencialEstructura hipertextualEstructura jerárquica

Mapa del Sitio

Se refiere al proceso de crear un “árbol de contenido” en el que se muestre demanera práctica cuántas secciones tendrá el sitio en desarrollo y cuántos niveleshabrá dentro de cada uno.

• Secciones: se debe intentar que sean las menos posibles, con el fin de concentrar las acciones del usuario en pocas áreas.• Niveles: se debe intentar que el usuario esté siempre a menos de tres clicks del contenido que anda buscando. • Contenidos relacionados: se debe considerar que habrá funcionalidades que estén presentes en todo el sitio.

Definición de los Sistemas de Navegación:

Sistemas de navegación global: son aquellos conjuntos de enlaces que estructuran elcontenido del sitio web en diferentes secciones principales.

Sistemas de navegación local: su función es ofrecer el acceso a las sub-secciones delsitio web. del sitio web.

Sistemas de navegación contextual: suelen estar integrados en el propio contenido, enapartados o bloques, son aquellos sistemas que permiten la navegación transversal.

Características de los Sistemas de Navegación

• Consistente: el sistema debe ser similar en todo el sitio, en lo referido a su ubicación y disposición en las páginas.• Uniforme: el sistema debe utilizar similares términos dentro del sitio.• Visible: el sistema debe distinguirse claramente dentro del sitio.

Definición del diseño visual

La recomendación es trabajar en cuatroetapas sucesivas e incrementales.

Diseño de las Estructuras de Páginas: Wireframes

Los wireframes especifican la arquitectura y organización de los contenidos y navegación de cada página o grupos de páginas. Sirven de vínculo entre la estructura del sitio web y su aspecto visual.

Diseño de interacción

Por diseño de interacción nos referimos a la actividad y resultado de definir el comportamiento interactivo del sitio web.Diagramas de flujo

Bocetos de Diseño

Esta etapa consiste en la generación de dibujos digitales acabados de la forma que tendrán las páginas principales del sitio que se desarrolla.

Construcción del Sitio Web

Maquetación HTMLEn el caso de un sitio estático, esta etapa corresponderá a la construcción del sitio y consiste en generar todo el sitio en tecnología HTML utilizando los elementos gráficos,imágenes y contenidos reales.

En el caso de un sitio dinámico, en esta etapa se generan las plantillas HTML queutilizarán los desarrolladores de software para introducir la programación quegenerará los contenidos de cada página. En este caso los contenidos de páginaquedan almacenados en una base de datos (textos, imágenes, archivos multimedia,etc.)

ProgramaciónPoco a poco se ha pasado de modelos basados en páginas estáticas a aplicaciones web de alta complejidad que gestionan contenidos.Partiendo de este planteamiento las tareas de programación se dividen en dos partes:

Programación Front-end: se trata de la programación relacionada con el interfaz de usuario. En este etapa se programan las plantillas HTML definiéndose las áreas de contendido de cada una de ellas de modo que posteriormente se pueda cargar la información que corresponda a cada área a través del sistema de administración del gestor de contenidos.

Programación Back-end: se refiere a la programación y configuración del sistema de administración y las bases de datos que soportarán la carga y publicación de los contenidos del Sitio Web

Taller de USABILIDAD y ACCESIBILIDAD Web