Taller de

USABILIDAD y ACCESIBILIDAD Web

Planificacin Inicial
del Sitio Web

Objetivos:
definir las metas del proyecto; stas
deben ser generales y especficas, 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 travs de la venta directa (comercio
electrnico) o mediante la generacin 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 dilogos, aprendiendo
sobre ellos.
Ahorrar: ara reducir costes de servicio mediante
la automatizacin 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

Tecnologa:
qu servicios interactivos se incorporarn
al sitio y qu infraestructura se necesita
para sustentar dichos servicios.

Hardware: se refiere a los elementos fsicos del

sistema. En el caso ms 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.

Estticas

La arquitectura de un
sitio Web tiene tres
componentes principales:
un servidor Web,
una conexin de red,
y uno o ms clientes
(navegadores)

Dinmicas

La informacin est
almacenada en una base
de datos, y las pginas son
creadas dinmicamente.

Arquitectura Open Source:

Servidor Web Apache
Lenguaje de programacin
de aplicaciones: PHP
Bases de datos: MySQL

Arquitectura Microsoft:
Servidor Microsoft IIS
Lenguaje de programacin
de aplicaciones: ASP.NET.
Bases de datos: Microsoft SQL / MySQLc.

Arquitectura Java:
Servidor Web Tomcat.
Lenguaje de programacin aplicaciones: JSP.
Bases de datos: soporta sistemas de
varios fabricantes: Oracle, Microsoft SQL,
etc.

Definicin del Sitio Web

Arquitectura de Informacin.
La Arquitectura de la Informacin es el conjunto de
mtodos y herramientas que permiten organizar
los contenidos, para ser encontrados y utilizados
por los usuarios, de manera simple y directa.

Definicin del Sitio Web

Definicin de Contenidos del Sitio
Definicin de la Estructura del Sitio
Definicin de los Sistemas de Navegacin
Definicin del Diseo Visual Imagen

Definicin de Contenidos del Sitio

Una vez que se han identificado los objetivos del sitio

y la audiencia, se debe proceder hacer las definiciones
ms concretas que permitan decidir qu contenidos
son los que va a tener el sitio web que se desarrolle
Clasificacin orientada a la audiencia:
Clasificacin orientada a la tarea:
Clasificacin temtica:

Definicin 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 diseo.

Estructura: se refiere a la forma que tendr

el sitio web en trminos generales con sus
secciones, funcionalidades y sistemas de
navegacin. No considera ni incluye grficos
Diseo: se refiere a la solucin grfica que
se crear para el sitio, en la cual aparecen
colores, logotipos, vietas, y otros elementos de
diseo que permiten identificar visualmente al sitio.

Estructura

Se refiere a las conexiones y relaciones

entre pginas
Estructura secuencial
Estructura hipertextual
Estructura jerrquica

Mapa del Sitio

Se refiere al proceso de crear un rbol
de contenido en el que se muestre de
manera prctica cuntas secciones tendr
el sitio en desarrollo y cuntos niveles
habr 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 estn presentes en todo el sitio.

Definicin de los Sistemas

de Navegacin:
Sistemas de navegacin global: son aquellos
conjuntos de enlaces que estructuran el
contenido del sitio web en diferentes
secciones principales.

Sistemas de navegacin local: su funcin

es ofrecer el acceso a las sub-secciones del
sitio web. del sitio web.
Sistemas de navegacin contextual: suelen
estar integrados en el propio contenido, en
apartados o bloques, son aquellos sistemas
que permiten la navegacin transversal.

Caractersticas de los
Sistemas de Navegacin

Consistente: el sistema debe ser similar en todo

el sitio, en lo referido a su ubicacin y disposicin
en las pginas.
Uniforme: el sistema debe utilizar similares
trminos dentro del sitio.
Visible: el sistema debe distinguirse claramente
dentro del sitio.

Definicin del diseo visual

La recomendacin es trabajar en cuatro
etapas sucesivas e incrementales.

Diseo de las Estructuras

de Pginas: Wireframes
Los wireframes especifican la arquitectura y
organizacin de los contenidos y navegacin
de cada pgina o grupos de pginas.
Sirven de vnculo entre la estructura
del sitio web y su aspecto visual.

Diseo de interaccin
Por diseo de interaccin nos referimos
a la actividad y resultado de definir el
comportamiento interactivo del sitio web.
Diagramas de flujo

Bocetos de Diseo
Esta etapa consiste en la generacin
de dibujos digitales acabados de
la forma que tendrn las pginas
principales del sitio que se desarrolla.

Construccin del Sitio Web

Maquetacin HTML
En el caso de un sitio esttico, esta etapa
corresponder a la construccin del sitio y consiste
en generar todo el sitio en tecnologa HTML
utilizando los elementos grficos,imgenes y
contenidos reales.

En el caso de un sitio dinmico, en esta etapa

se generan las plantillas HTML queutilizarn
los desarrolladores de software para introducir
la programacin quegenerar los contenidos
de cada pgina. En este caso los contenidos de
pginaquedan almacenados en una base de datos
(textos, imgenes, archivos multimedia,etc.)

Programacin
Poco a poco se ha pasado de modelos basados en
pginas estticas a aplicaciones web de alta
complejidad que gestionan contenidos.
Partiendo de este planteamiento las tareas de
programacin se dividen en dos partes:

Programacin Front-end:
se trata de la programacin relacionada con el
interfaz de usuario. En este etapa se programan
las plantillas HTML definindose las reas de
contendido de cada una de ellas de modo que
posteriormente se pueda cargar la informacin
que corresponda a cada rea a travs del sistema
de administracin del gestor de contenidos.

Programacin Back-end:
se refiere a la programacin y configuracin del
sistema de administracin y las bases de datos
que soportarn la carga y publicacin de los
contenidos del Sitio Web

Taller de
USABILIDAD y ACCESIBILIDAD Web