DISEO DE UN SITIO WEB

Las fases a seguir para disear un buen sitio web son las siguientes:

a) DEFINIR LOS OBJETIVOS DEL SITIO

Lo primero que debe hacer uno cuando se dispone a realizar un sitio web es definir sus objetivos.
Para ello uno debe plantearse preguntas como:
A quin va dirigido el sitio web?
Qu va a ofreces el sitio web a sus visitantes?
Las respuesta a estas preguntas determina el contenido del sitio, tanto en el fondo (la informacin
que se va a publicar) como la forma (los tipos de medios que se van a utilizar para mostrar esta
informacin). Una vez definidos los contenidos del sitio habr que concretarlos en una serie de
medios: textos, fotos, grficos, animaciones, etc.
Algunos de estos medios ya estarn disponibles y slo habr que aplicarles algn tratamiento
(digitalizar, copiar y pegar o cambiar el formato), mientras que otros habrn de ser creados
expresamente para el sitio.

b) DEFINIR LA ESTRUCTURA DE LAS PGINAS

Una vez recopilada toda la informacin que se va a publicar en el sitio es preciso darle una
estructura, de forma que los distintos bloques de informacin aparezcan separados en pginas
independientes conectadas entre s. La estructura ms tpica para un sitio es la de rbol, con una
pgina principal en la raz del mismo y las dems pginas repartidas en los diferentes niveles del
rbol. La informacin ms relevante estar colocada en los niveles ms altos, que son ms
fcilmente accesibles, mientras que la informacin ms especfica aparecer en niveles ms
profundos.
En esta fase se puede crear un primer boceto del sitio web, dibujado a mano, que proporcione una
visin global de su estructura y del reparto de sus contenidos entre las diferentes pginas.

C) DISEAR LA INTERACCIN CON EL USUARIO

Despus de fijar la estructura del sitio hay que disear un mecanismo de navegacin que permita al
visitante desplazarse cmodamente por las pginas. Este mecanismo debe ser coherente y debe
garantizar que todas las pginas son accesibles y que el visitante no va a quedar atrapado en ninguna
de ellas.
Tambin se decidirn los elementos que se van a utilizar para facilitar la navegacin: Mens,
botones, barras de navegacin, etc. Se planteara, si es necesario la interaccin basada en
formularios y/o scripts dinmicos, en su caso se disearn los formularios para recoger informacin
del usuario.

D) DISEAR LA INTERFAZ GRFICA

En esta etapa se disea el aspecto visual del sitio web. Se comenzar eligiendo un estilo global de
diseo para el sitio que fijar aspectos tales como la combinacin de colores, los tipos de letra y la
composicin de las pginas. Se disear el formato de cada una de las pginas determinando la
distribucin de los distintos elementos que las componen (controles para la navegacin,
informacin fija, informacin variable).
Se disear los elementos grficos comunes a todas las pginas como lo son los iconos, botones,
barras de navegacin o imgenes de fondo. En esta fase se puede refinar el boceto inicial para
obtener otro donde los contenidos de las pginas aparezcan colocados en si lugar y estas ofrezcan
un aspecto muy parecido al que se desea al final.
Un aspecto muy importante en esta etapa es la utilizacin de representaciones visuales cercanas o
familiares al usuario relacionado con el tema de la pgina, a lo que se conoce como metforas.
Las metforas forman una importante ayuda al relacionar la pgina con el entorno del visitante, por
lo que se recomienda su uso constante.
Creacin de las pginas
Siguiendo las cuatro fases se puede garantizar la coherencia de las pginas tanto en el aspecto visual
como en el de navegacin, por lo que lo siguiente es iniciar con la creacin de cada una de las pginas
individuales que firman un sitio, tarea que consiste en colocar cada elemento de la pgina en el
lugar que le corresponde de acuerdo con el formato definido.
Antes de ello se debe decidir qu herramientas se van a utilizar para crear las pginas, ya que existen
mltiples programas para la edicin de pginas web, programas de diseo, programas de animacin,
etc. La decisin debe est basada en forma personal afectada por los factores como las preferencias,
disponibilidad, posibilidades, facilidad de uso, su costo o la documentacin existente.

Tambin se deber decidir si se van a utilizar tecnologas complejas como la programacin CGI o el
acceso a bases de datos, que exigen ciertos requisitos por parte del servidor de la web. En tal caso
habr que informarse de las tecnologas disponibles en el servidor del proveedor de acceso a
internet y optar por utilizar alguna de ellas o buscar otro proveedor que proporcione lo que se
desea.
Por ltimo, una vez que han sido creadas todas las pginas se deben considerar las siguientes tareas:

Comprobar a fondo las pginas para detectar posibles errores (enlaces equivocados,
pginas inaccesibles, etc.) antes de su publicacin.

Realizar si es posible prueba de usabilidad con usuarios reales.

Transferir las pginas (incluyendo todos los objetos que contienen) a su ubicacin definitiva
en el servidor web.

Dar de alta la pgina en distintos buscadores.

Una tarea que se prolongar durante todo el tiempo que el sitio est activo, es la tarea del
mantenimiento, que implica realizar actualizaciones peridicas (sobre todo de los contenidos) y
modificaciones puntuales de las pginas.

RECOMENDACIONES GENERALES PARA EL DISEO DE PGINAS WEB

A continuacin se enlistan un conjunto de recomendaciones, algunas de las cuales ya han sido
manejadas a lo largo del curso, se enlistan en forma detallada para lograr su mejor aplicacin incluso
se aaden algunas nuevas.
A) EL SITIO ofrecer una organizacin clara e intuitiva de la informacin (ndice, tabla de contenidos,
nueva informacin).
Crear una pgina principal de tamao no muy grande para que se cargue rpidamente.
Un mapa sensible con una metfora del sitio es una excelente opcin.
Organizar las pginas siguiendo una estructura jerrquica con distintos niveles y colocando la
informacin ms importante en los niveles ms altos.
Ofrecer un sistema de navegacin comprensible y visualmente clara (barra de navegacin, mapa
sensible).
Proporcionar informacin general sobre el sitio web.
Informar al visitante de la estructura del sitio web proporcionndole, por ejemplo, un mapa del
sitio.
Separar informaciones distintas en pginas distintas.

Indicar al visitante en qu parte del sitio se encuentra en cada momento. Por ejemplo, resaltando
el elemento de la barra de navegacin que corresponde a la pgina actual.
Utilizar un mismo estilo para todos los iconos del sitio, Si es posible conviene crearse uno mismo
sus propios iconos, ya que as se podrn disear viene de acuerdo con el contenido del sitio.
Mantener el mismo estilo de diseo en todas las pginas para dar una imagen uniforme al sitio
web.
Proporcionar un mecanismo de navegacin textual para los usuarios que naveguen con las
imgenes desactivadas.
Utilizar hojas de estilo en cascada para aplicar el mismo estilo a todas las pginas del sitio.
Ofrecer formas de realizar bsquedas en el sitio web.

B) SOBRE LAS PGINAS

Reducir el desplazamiento dentro de una pgina.
Usar tablas con bordes invisibles para formatear pginas con precisin.
Utilizar las marcas semnticas preferiblemente a las fsicas.
Utilizar mucho espacio en blanco.
No colocar demasiados objetos en una misma pgina, ya que al establecerse una conexin
independiente con el servidor para cada uno de ellos el tiempo de carga aumenta.
Dar a la pgina un ttulo significativo, ya que este texto es el que se almacenar en la libreta de
direcciones del visitante cuando agregue la pgina a su lista de favoritos.
Utilizar los elementos META del encabezamiento para proporcionar a los buscadores informacin
sobre la pgina. Incluir en la pgina informacin de contacto para el envo de comentarios o
sugerencias.
Indicar la fecha de la ltima actualizacin de la pgina para que los visitantes asiduos sepan cundo
se han producido cambios.
Incluir en la pgina informacin de contacto para el envo de comentarios o sugerencias.
Si la pgina ha dejado de mantenerse, indicarlo de alguna manera para evitar que los visitantes
pierdan tiempo volviendo o puedan recibir informacin obsoleta.

Disear las pginas pensando en distintos navegadores y plataformas. No abusar de elementos

que no estn ampliamente soportados o al menos hacer que las pginas sean entendibles sin ellos.
De otra forma se estar descartando de entrada a un buen puado de potenciales visitantes.
Crear distintas versiones de la pgina si es imprescindible hacer uso de caractersticas especficas
de un navegador concreto y utilizar un script para enviar de forma automtica al visitante a la pgina
adecuada a su configuracin.
Deben evitarse mensajes del tipo lo siento, su navegador no es capaz de visualizar esta pgina.

C) SOBRE EL TEXTO
No colocar demasiada cantidad, ya que el texto es ms difcil de leer en la pantalla que en el papel.
Si es preciso, colocar la informacin en varias pginas.
No utilizar muchas fuentes distintas en la misma pgina. Dos fuentes como mximo es lo
recomendable.
Utilizar fuentes de tamao suficientemente grande.
Utilizar fuentes estndar. Si es necesario colocar un texto con una fuente especial es preferible
crear un rtulo de texto.
No utilizar prrafos vacos para aadir espaciado vertical, ya que el efecto puede variar de un
navegador a otro. Usar en su lugar saltos de lnea o colocar los elementos mediante tablas para una
mayor precisin.
No abusar de las maysculas. El texto en minsculas resulta ms fcil de leer.
No abusar del texto intermitente, ya que puede llegar a ser molesto.

D) SOBRE LOS ENLACES (LINKS)

los enlaces deben poder identificarse con claridad. El usuario debe ser informado de alguna forma
sobre cules son los elementos activos de la pgina.
Indicar al usuario adnde le van a llevar los enlaces.
Limitar el nmero de enlaces dentro de una pgina.
Comprobar que todos los enlaces apuntan al sitio deseado antes de publicar la pgina.
No incluir espacios en blanco entre las marcas de comienzo y fin del ancla y el texto o imagen
activos, ya que esto puede producir un antiesttico efecto de subrayado al visualizarse el enlace.

Integrar el enlace en el texto de forma natural y sin interrumpirlo (evitar, por ejemplo, frases de
estilo de pulsar aqu para ir a tal sitio).
El texto enlazado debe ser breve.
Si el enlace est formado por una imagen y un texto simultneamente, conveniente que ambos
aparezcan juntos.
Es interesante usar un URL como texto del enlace, ya que as quedar constancia escrita del mismo
cuando se imprima la pgina.
Agrupar los enlaces relacionados entre s colocndolos mediante listas organizadas o mens
(grficos o textuales).
No dejar pginas hurfanas, sin enlaces. Siempre se debe proporcionar al menos una forma de
regresar a la pgina principal.
Mantener los enlaces al da.
No colocar enlaces a pginas no disponibles. Evitar el tpico icono de pgina en obras.

E) SOBRE LAS IMGENES

Utilizar el atributo ALT para proporcionar informacin a los usuarios que navegan sin imgenes
Utilizar los atributos HEIGHT y WIDTH para acelerar la presentacin de la pgina.
Evitar los bordes dentados y el efecto de halo en las imgenes transparentes.
Re escalar la imagen al tamao deseado (nunca hacerlo en la propia pgina con los atributos
WIDTH y HEIGHT), suavizndola antes para evitar el efecto de dentado.
Suavizar los colores para uniformar colores prximos adyacentes obtener y as un mayor grado de
compresin.
Disminuir el nmero de colores de la imagen (profundidad de color). Con esto disminuye el tamao
del fichero y se deja sitio libre en la paleta para otros colores.
Utilizar siempre que sea posible la paleta de colores web. Si se utiliza una paleta adaptativa es
necesario comprobar que la imagen se visualiza correctamente en el navegador.
Utilizar paletas comunes (superpaletas) para las imgenes que aparezcan simultneamente en la
pgina.

Probar con distintos formatos y relaciones de compresin al grabar la imagen con el fin de
encontrar la mejor relacin calidad/tamao.
Guardar las imgenes de gran tamao en modo entrelazado.
Incluir imgenes de baja resolucin para aquellas imgenes que puedan tardar en cargarse.
Colocar versiones reducidas de las imgenes que enlacen con las versiones completas en el caso
de que stas sean muy grandes o no vayan a ser accedidas por todos los visitantes.
Trocear las imgenes que van a ser reutilizadas en parte (por ejemplo, las barras de navegacin)
para aprovechar su almacenamiento en la memoria cach de la computadora.
Cargar imgenes en segundo plano. Si una pgina no carga imgenes nue- vas se puede aprovechar
para cargar alguna imagen en segundo plano, de forma que cuando se necesite la imagen sta ya se
encuentre en la memoria cach y se cargue rpidamente.
Como consejo final, la suma de los tamaos de todas las imgenes nuevas de una pgina (es decir,
sin contar las que se encuentran en la memoria cach) no debera exceder de los 50 o 60 K.

F) IMGENES DE FONDO
Utilizar fondos simples y discretos que faciliten la lectura de la pgina.
Utilizar imgenes con poca profundidad de color para que no consuman mucho espacio de la
paleta.
Utilizar preferentemente la paleta de colores web para evitar el tramado.
Modificar si es preciso el color del texto para que contraste claramente con el del fondo.
Asegurarse de que los colores quedan bien en distintas mquinas y con distintos navegadores
(sobre todo en pantallas de baja resolucin).
Utilizar conjuntamente los atributos BACKGROUND y BGCOLOR para que la pgina sea legible
mientras se carga la imagen de fondo.

G) ELEMENTOS MULTIMEDIA
No abusar de los sonidos de fondo, ya que pueden resultar molestos si se prolongan durante
mucho tiempo.
Utilizar animaciones vectoriales para crear efectos de animacin complejos, ya que tienen tamaos
ms pequeos que las animaciones GIF.

No abusar de los iconos animados, sobre todo si se usan como elementos meramente decorativos.
Utilizar mapas sensibles para crear una metfora del sitio web.
Utilizar el atributo ALT en los elementos AREA de los mapas sensibles.
Colocar controles de reproduccin para los clips de audio y vdeo.
Utilizar los elementos NOEMBED y NOSCRIPT para proporcionar un contenido alternativo a los
navegadores que no soporten los elementos EMBED y SCRIPT, respectivamente.
Proporcionar informacin para la descarga de los plugns necesarios para visualizar los objetos
incrustados.
No colocar directamente en la pgina objetos incrustados de gran tamao como los vdeos. Colocar
en su lugar un enlace, que podr estar asociado a una versin reducida del objeto, e informar del
tamao exacto del objeto enlazado.
No utilizar gratuitamente tecnologas complejas (por ejemplo, VRML).

H) MARCOS
Comprobar que las dimensiones de un marco son suficientes para mostrar su contenido en el caso
de que se eliminen las barras de desplazamiento.
No abusar del uso de marcos.
Usar TARGET=_top" o TARGET="_blank" al saltar a otras pginas para que stas se muestren en la
ventana completa del navegador.
Utilizar el elemento NOFRAMES para proporcionar un contenido alternativo a los navegadores que
no soporten marcos.

I) FORMULARIOS
Validar los datos introducidos por el usuario en el propio navegador mediante scripts para evitar
un procesamiento innecesario en el servidor.
Enviar el formulario a una direccin de correo electrnico para obtener los datos introducidos por
el usuario sin necesidad de escribir un programa CGI.
Utilizar tablas para alinear correctamente los elementos de entrada de un formulario.

J) PAGINAS DINAMICAS

Comprobar la visualizacin de la pgina en las configuraciones ms habituales.

Proporcionar alternativas para los navegadores que no soporten algunos elementos de la pgina o
indicar la configuracin necesaria para visualizarla correctamente.

EL DISEO CENTRADO EN EL USUARIO

Todas las recomendaciones enumeradas anteriores no hacen sino plasmar en detalles concretos lo
que debe ser una mxima en el diseo de todo sistema interactivo, como es el caso de un sitio web:
disear pensando en el usuario. Un sitio web debe ser ante todo usable, lo que equivale a decir que
los visitantes deben poder utilizarlo de manera simple, fiable y cmoda.
Para ello hay que tener en cuenta una serie de cuestiones generales que estn sacadas de la
experiencia diaria en el uso de pginas web, y que son las siguientes:
Los usuarios tienen muy poca paciencia con los sitios web con un diseo pobre.
Una buena organizacin da al usuario confianza de que va a encontrar aquello que busca y evita
que pierda su tiempo o se canse de buscar y abandone el sitio.
Los usuarios no quieren usar las barras de desplazamiento. la informacin que no aparece en
primer lugar en la pgina slo es accedida por las personas muy interesadas.
Los usuarios no quieren leer. La velocidad de lectura en una pantalla es mayor a una hoja de papel.
Los usuarios suelen pasar texto sin inters, como mensajes de bienvenida o de introduccin, y
buscan aquello que destaca, como los enlaces de hipertexto.
En resumen, se trata de ayudar a los visitantes a navegar y a encontrar la informacin que buscan
lo ms rpidamente posible. Teniendo en mente estas ideas al disear las pginas se conseguir un
sitio web usable en el que los visitantes se sientan a gusto y al que deseen volver ms tarde.