Introduccin

Esta gua est pensada para terminar con estas dificultades, para que cualquier diseador
grfico, tenga o no experiencia tcnica web, adquiera los conocimientos necesarios que le
permitan disear cualquier sitio o pgina web, dando rienda suelta a su imaginacin y
creatividad, explotando todas las posibilidades que ofrece este medio. Pero, al mismo
tiempo cindose a las limitaciones tecnolgicas del momento, para que ningn
maquetador o programador competente jams mire su diseo y le diga "eso no se puede
hacer".

Dicen que las modas van y vienen, pero que el buen diseo es atemporal. Lamentablemente
para los buenos diseadores, las tecnologas tambin van y vienen (o evolucionan) y los
buenos diseos se tienen de adaptar a la tecnologa del momento, si no caducan.

Usabilidad

Un atributo determinante para la calidad de un sitio web es su usabilidad. Se trata de lograr

que los visitantes encuentren rpidamente aquello que buscan, con el mnimo esfuerzo por
su parte. Sea cual sea el contenido o la finalidad de nuestra web, navegar por ella debe
resultar una experiencia gratificante.

Web usable: es aquella en la que los usuarios pueden interactuar de la forma ms fcil,
cmoda, evidente y segura posible. Una web usable denota calidad, genera confianza y nos
diferencia positivamente de otras alternativas.

Los usuarios pasan mucho menos tiempo visitando una pgina web de lo que sus
diseadores desearan, por lo que hay que facilitarles las cosas al mximo. Cuando un
usuario encuentra que la navegacin por una web es cmoda, agradable y til, existen
mayores probabilidades de que la visite de nuevo en el futuro.

Lograr un buen nivel de usabilidad requiere combinar hbilmente una serie de elementos:
tecnologa, diseo, contenidos Aunque no existen recetas universales, he aqu algunos
criterios a tener en cuenta:

Crear una jerarqua visual clara en cada pgina. Debe percibirse a

simple vista cul es la importancia de los distintos contenidos, qu
relacin existe entre ellos, a qu tema o bloque pertenecen... La
colocacin, el tamao, la tipografa o los colores de los textos y de los
dems elementos de la pgina son los principales recursos a utilizar.

Dar el control al usuario. ste debe sentir en todo momento que sabe
dnde est y que controla la situacin. Nada importante debera situarse
a ms de dos clics de distancia. Los ttulos y contenidos de cada
apartado deben ser claros y visibles. Tambin son muy tiles los mens
de situacin, la navegacin por pestaas, las opciones de volver atrs o
 deshacer una accin, la visualizacin clara de las distintos pasos de un
proceso (la compra on-line, por ejemplo).

Facilitar la interaccin. Suele ser muy positivo que una web permita al
usuario hacer cosas: clicar, desplegar, abrir, mover... En todo caso, el
acceso y el uso de cualquier elemento de interaccin debe ser intuitivo,
rpido y fcil. No podemos permitirnos frustrar al usuario o hacerle
perder el tiempo.

Aprovechar las convenciones y llamar a las cosas por su nombre.

La mayora de usuarios tienen ciertas expectativas derivadas de su
experiencia navegando por internet. Saben, ms o menos, dnde se
sitan los mens, cmo funciona un buscador, para qu sirven
determinados botones, qu significan ciertos iconos o expresiones, etc.
As, hay que situar los contenidos donde el usuario espera que estn y
hacer que las cosas funcionen como se espera que lo hagan. Si
queremos sorprender o hacer algo diferente, hemos de asegurarnos de
que ello no suponga una complicacin innecesaria.

Simplificar. Hay que evitar la informacin superflua y minimizar todo

aquello que pueda confundir, abrumar o distraer innecesariamente. Para
ello, usaremos textos breves y concisos, haremos un uso racional de las
imgenes y animaciones, y crearemos mens claros, bien estructurados
y desplegables si hay muchas opciones a mostrar.

No hay que entender la usabilidad como un lastre para nuestra creatividad. Podemos
innovar y ser originales mientras no olvidemos que nuestro diseo debe estar centrado en
el usuario. l es el verdadero protagonista y hemos de asegurarnos de que comprender y
podr seguirnos el juego en todo momento.

Otros aspectos a tener en cuenta:

Situar los elementos importantes siempre a mano.

Los usuarios no siempre entran por la pgina principal (poner mens de

navegacin
en todas las pginas).

Dejar claro qu elementos son enlaces y cules no.

Aadir un buscador o un mapa del sitio web si ste tiene mucho

contenido i/o pginas.

Enlazar a cualquier informacin en menos de 3 clicks (o enlaces)

Mantener una coherencia en el diseo de toda la pgina.

 Seguir las reglas bsicas del buen diseo: seleccin de colores,
tipografas,
regla de los tercios

No distraer el usuario con excesivas animaciones o elementos que

parpadean.

Intentar que los contenidos no tengan faltas de ortografa.

No abrir nuevas ventanas del navegador innecesariamente...

Gua para diseadores grficos > Arquitectura de un sitio web

Arquitectura de un sitio web

Algunos dicen que disear para web es ms parecido a la arquitectura que al diseo grfico.
Como en una casa, antes de escoger los muebles, el color de las cortinas o la iluminacin,
es importante saber cmo estar estructurada la planta, cmo ser el saln, donde estarn
las habitaciones, como se acceder a ellas, donde estarn las ventanas... Asimismo en la
web, si la estructura no es slida e intuitiva, el arte de la pgina no sirve para nada.

Antes de empezar a trabajar en el aspecto puramente esttico de las pginas web,

imaginando animaciones impresionantes y grficos atractivos, es indispensables pensar en
la estructura del sitio web. Para eso, fundamentalmente, tendremos que:

Definir las secciones y pginas web que debe tener el sitio.

Escoger las secciones o pginas a las que podremos acceder desde la pgina
principal (o de inicio).

Decidir si alguna seccin o pgina tiene que destacar ms respecto las dems.

Distribuir el contenido a presentar entre las distintas secciones y pginas.

Concretar las distintas vas de acceso a cada una de pginas web del sitio (es
importante ofrecer mltiples maneras de acceder a la misma informacin).

Especificar el nmero de idiomas que dispondr el sitio web.

Para ayudar a concretar la estructura final del sitio web, muchos diseadores y
programadores web recomiendan hacer un esquema a mano alzada, con post-its o con un
simple programa de diseo del ordenador, que nos permita realizar cambios fcilmente a
medida que redescubrimos mejores estructuras para nuestro sitio web.

Ejemplo de la estructura de un sitio web en el que se detalla todas las pginas y el recorrido
para acceder a ellas.

Normalmente, el contenido de un sitio web se estructura en diferentes pginas web, pero

debemos mencionar una tendencia (no muy utilizada ni recomendada), llamada parallax
scrolling, que estructura todos los contenidos en una solo pgina web y permite que el
usuario acceda a ellos mediante enlaces internos o bajando por la barra de desplazamiento o
scroll.

Estructura de una pgina web

Una vez ya tengamos clara como estar estructurada la planta de la casa (sitio web a
disear), podemos empezar a disear la estructura de cada habitacin (pgina web),
decidiendo donde pondremos los muebles (contenido) y la decoracin (elementos grficos).
Con especial esmero tendremos que estructurar el saln de la casa (pgina principal), donde
recibiremos a todos nuestros invitados (usuarios), para que sea lo ms confortable posible
(diseo) pero tambin aporte el mximo de informacin sobre los anfitriones y sobre los
contenidos de las distintas habitaciones (usabilidad).

Para determinar la estructura de cada pgina web, tendremos que definir (entre otros):
 Qu tipo de web quiere el cliente: tipo tarjeta de visita, tipo catlogo, tipo anuncio
de revista, tipo juego, una combinacin entre las anteriores...

Qu tipo de informacin desea presentar el cliente: mucha imagen, mucha

informacin escrita...

Qu mensaje debera de recibir el usuario cuando abra la pgina principal.

Haca qu secciones del web se debera sentir atrado.

Qu elementos comunes deben presentarse en todas las pginas (por ejemplo

sistema de navegacin).

Qu contenido especfico debera presentarse en cada pgina.

De todos modos, antes de empezar a disear la estructura de una pgina web, deberamos
conocer las estructuras estndares utilizadas normalmente.

Gua para diseadores grficos > Estructura de una pgina web > Estructuras estndares

Estructura de una pgina web

Estructuras estndares
Uno de los aspectos ms importantes de las estructura de una pgina web es decidir dnde
posicionaremos los mens de navegacin y enlaces a otras pginas web y dnde
posicionaremos el contenido que van a consultar los navegantes. Existen diversos tipos de
estructuras estndares de pginas web que especifican la posicin de los mens de
navegacin y el contenido, mantenindose esta estructura y diseo durante toda la
navegacin por el sitio web.

Sin que sea sorprendente, los mens de navegacin acostumbran a posicionarse en los
mrgenes de la pgina, dejando los contenidos en el centro. Por defecto, las estructuras
estndares posicionan los mens de navegacin arriba o en los laterales, pero tambin
existen otras posibilidades:

Bloque de navegacin a la izquierda:

Permite presentar muchos mens o enlaces, pues cada lnea puede ser un enlace (por
ejemplo, el men de navegacin de esta gua). Tampoco supone mucho problema que los
mens se extiendan fuera de la pantalla, porque el usuario puede visualizarlos con la barra
de desplazamiento vertical. Este mtodo es ideal si los mens son administrables, pues el
diseo no se ver muy afectado si aumentan o disminuyen el nmero de enlaces.

Bloque de navegacin arriba:

Ideal si el sitio web no tiene demasiadas secciones. Los mens se sitan en lnea y ocupan
mucho espacio. Es fcil si los mens se despliegan con otros submens (es ms fcil la
navegacin que si los submens se abren lateralmente)
Bloque de navegacin derecha:

Las mismas ventajas que el men a la izquierda pero menos usado.

Combinacin de los anteriores:

Si tenemos muchos enlaces a presentar, siempre podemos utilizar cualquier combinacin de

los anteriores (arriba e izquierda; izquierda y derecha; arriba, izquierda y derecha;), sobre
todo si los mens se pueden agrupar en dos o tres grandes grupos.
Pie de pgina

El pie de pgina acostumbra a tener una gran importancia en las estructuras de los webs
actuales, donde se pueden repetir los mens de navegacin (para que el usuario no deba
subir por la pgina), situar los enlaces al aviso legal, copyright, redes sociales: facebook,
RSS, twitter o los datos de direccin y contacto.

Ejemplos de pie de pgina:

Pgina principal

La pgina principal es un caso especial, para la cual no existe una estructura estndar.
Aunque la pgina principal tambin se puede estructurar de un modo estndar, en la
mayora de sitios web, la pgina principal no se disea para presentar contenido, y ms bien
se imagina como escaparate de la empresa, en el que tambin se presentan los mens o
enlaces a las diferentes pginas o secciones del web.

Ejemplos de pgina principal:

Diseando la estructura
Conociendo las estructuras web ms utilizadas, ya podemos empezar a dibujar la estructura
especfica de nuestra pgina web, dibujando y posicionando a nuestro gusto los bloques de
mens, contenido, grficos, y los sub-bloques dentro de cada uno de los anteriores.

Cada diseador tendr su propio mtodo para plasmar la estructura imaginada de una
pgina web a la pantalla de su ordenador. Aqu transcribimos el mtodo de trabajo
especfico de un diseador: Comienzo por bosquejar algunos posibles diseos sobre
papel. Despus de unos pocos de estos bocetos, decido cual me gusta ms o cual se adapta
mejor a los requisitos del cliente y el salto al Photoshop (o freehand), y uso la herramienta
de rectngulo para bloquear las reas que he marcado en mi papel. Una vez que he
definido mi diseo, experimento con los colores de fondo y de los rectngulos hasta tener
un esquema de color slido. Y sigo trabajando con pxeles hasta que, finalmente, tengo un
borrador para mostrar al cliente.

Ejemplo de diseo de la estructura:

Trabajando con bloques rectangulares

La estructura de una pgina web se sub-divide en bloques rectangulares, dentro de los

cuales vamos a posicionar los diferentes elementos de diseo o contenido. Ms tarde, al
aplicar diseo sobre estos rectngulos podemos enmascararlos eliminando los bordes o
utilizando formas curvas, pero es importante conocer que cualquier estructura web est
basada en rectngulos horizontales (no en diagonal).

A pesar de todo, el diseo de la estructura web no finaliza al posicionar los diferentes

bloques, porque tenemos de definir como se adaptaran y comportaran en funcin de la
resolucin de pantalla.

Adaptacin del bloque principal

Bloque principal: recuadro exterior que engloba toda la estructura de pgina web, es decir,
no existe ningn recuadro o bloque secundario que rebase el bloque o recuadro principal.

Bloque secundario: cada uno de los recuadros que componen el bloque o recuadro
principal.
Existen tres maneras distintas de adaptar el bloque principal en funcin del tamao de la
pantalla:

Fijo:

El bloque se disea con un tamao fijo que no se va a modificar en funcin del tamao de
la pantalla. Es el ms fcil de disear y maquetar porqu los elementos del diseo o bloques
secundarios siempre estarn en la misma posicin y mantendrn el mismo ancho.

Si diseamos un bloque principal fijo, podra ser bueno tomar como referencia la resolucin
de 1024x768, aunque el ancho del bloque principal debera de ser ms pequeo, pues el
navegador se necesita algunos pixeles para los mens, mrgenes y barras de
desplazamiento. As pues, deberamos de disear un bloque principal de un ancho mximo
de 990 pixeles. Si queremos que todo el contenido aparezca en la pantalla y no aparezcan
barras de desplazamiento verticales, la altura mxima del diseo debera de ser entre 600 y
650 pixeles (depender mucho del espacio que ocupen los mens del navegador del
usuario).

Fluido o lquido:

Con independencia de la resolucin de una pantalla, un bloque principal fluido ocupa un

porcentaje horizontal de la pantalla, normalmente el 100% (aunque tambin puede ocupar
el 90% centrado, o alineado a la izquierda o derecha). Normalmente, al disminuir la
resolucin o tamao de una pantalla, el bloque fluido se estrecha horizontalmente pero se
alarga verticalmente para poder presentar toda la informacin que contiene. A su tiempo,
los bloques secundarios dentro de un bloque principal fluido pueden tener un ancho fijo o
fluido y tener una posicin fija o fluida.

Estructuras distintas - Diseo sensible:

El diseo sensible (del ingls: responsive design) es una opcin cada vez ms utilizada en
el diseo web actual es crear estructuras del bloque principal distintas, reacomodando los
contenidos en funcin de la resolucin de la pantalla. Esto puede ser muy til cuando
consideremos el acceso a nuestro web a travs de telfonos, que tienen resoluciones de
pantallas muy pequeas. Algunos navegadores para mviles reestructuran el diseo de los
webs de un modo eficiente, pero si queremos asegurar la buena visualizacin y diseo de
nuestro web a cualquier resolucin, deberemos de crear varias estructuras en funcin de la
resolucin de la pantalla.

En un diseo sensible, no aparecern barras de desplazamiento horizontales (scroll) hasta

resoluciones muy pequeas.
Podemos decidir las medidas a las cuales se presentaran las diferentes estructuras del
bloque principal en funcin del diseo planteado, pero tambin podemos determinarlas
consultando las pantallas ms utilizadas actualmente:
Adaptacin de bloques secundarios
Si la estructura es fija, no tendremos que pensar cmo se van a adaptar los bloques
secundarios en funcin de la resolucin de la pantalla, pues los bloques secundarios se
posicionaran en la pantalla del usuario dnde lo hagamos diseado. En cambio, si la
estructura es fluida, tendremos que definir cmo se van a comportar cada uno de los
bloques secundarios. Metafricamente, si tenemos una casa cuyas medidas y estructura
pudiera modificarse, tendramos que decidir cmo se deberan de adaptar y posicionar los
muebles (o bloques) a cada posible medida de la casa.

Cada bloque puede estar integrado por sub-bloques ms recuadros, de los cuales tambin
tendremos que prever cmo se comportaran. Tenemos que pensar muy bien cmo se van a
adaptar porque si un bloque o conjunto de bloques no cabe dentro de otro bloque, se
producir un error (los navegadores lo intentarn representar con resultados imprevistos).
En general, debemos definir el comportamiento en anchura y posicin de cada bloque
secundario en funcin de la resolucin de pantalla (o en funcin del ancho del bloque que
lo contiene).
Presentacin de los contenidos

Ahora podemos empezar a disear los muebles, es decir, disear en contenido en cada uno
de los bloques o recuadros anteriormente mencionados. Para eso, debemos de saber las
limitaciones tcnicas de cada uno de los elementos, es decir, cmo podemos disear las
imgenes, texto, animaciones...

Bloques
Los bloques o rectngulos descritos anteriormente, aparte de definirle su comportamiento,
les podemos definir diversos efectos:

Color o imagen de fondo*.

Mrgenes con los bordes y mrgenes con otros bloques.

Ancho y color del borde, se pueden tomar imgenes para representar el

borde, tambin se pueden redondear los vrtices.

Sombreados.

Transparencias.

Degradados de colores o de transparencias.

Cambiar el puntero cuando entra dentro del bloque.

Permitir que el usuario desplace el bloque a otra rea de la pantalla.

Cambiar los atributos de un bloque, o que aparezca o que se cierre a

partir determinadas acciones del usuario.

Otros (consultar con los maquetadores)

* Las imgenes de fondo, se pueden repetir horizontalmente, verticalmente, o en las dos

direcciones juntas, formando lo que se llama una textura. Estas texturas son
frecuentemente utilizadas en los fondos de las pginas web, otorgando una atmsfera muy
personalizada:

Ejemplo:
Tipografas
Tradicionalmente, el uso de tipografas en el diseo web ha sido un problema. Por defecto,
los navegadores web solo podan presentar el texto con las tipografas que el usuario tenga
instaladas en su sistema operativo (Windows, Mac, Linux,). Actualmente esta limitacin
se ha solucionado, pero los efectos web que se pueden realizar a las tipografas (negrita,
subrayado, alienacin) continan siendo muy limitados.

Imgenes con texto

Una posible solucin a este problema con las tipografas es utilizar imgenes, lo cual nos
permitir crear cualquier efecto que queramos a las tipografas.
Pero, aunque la utilizacin de imgenes sea muy til y utilizada para los ttulos, mens, y
otras partes del web, existen diversas limitaciones que tenemos que tener en cuenta.
Bsicamente, nunca se recomienda utilizar imgenes para presentar textos largos, porque:

La pgina web tardara mucho a cargarse.

Los buscadores no podran indexar el texto. Si el texto a presentar es corto (por

ejemplo un men) se puede poner un texto alternativo "detrs" la imagen, sin
penalizar en los buscadores.

El texto no se podra utilizar en bloques fluidos (Si el texto no es imagen

automticamente se adapta al espacio disponible).

El usuario no puede aumentar el texto y algunos pueden tener problemas de

legibilidad.

El texto sera complicado de actualizar.

Adems, si la pgina web es generada por un programa y se toma el texto de una base de
datos, es complicado utilizar imgenes para presentar el texto.

Tipografas web

Con las nuevas tecnologas web, los nuevos navegadores pueden presentar cualquier fuente
que queramos utilizar, como si se enviara la fuente junto al web. La ventaja, respecto la
utilizacin de imgenes es que el texto es encontrado mejor por los buscadores, adems se
puede utilizar para presentar textos desde bases de datos (Por ejemplo, los titulares
superiores de esta gua tienen la tipografa Ubuntu y estn generados con esta solucin
jquery).

De todos modos, la mayora de programadores web siguen utilizando las llamadas

tipografas seguras, definiendo un listado de tipografas que se van a intentar utilizar en
orden establecido (Si la primera fuente no est disponible en el ordenador del usuario, la
segunda fuente ser utilizada y as sucesivamente). Los grupos de fuentes ms utilizados
son los siguientes:

Verdana, Geneva, sans-serif

Georgia, Times New Roman, Times, serif
Courier New, Courier, monospace
Arial, Helvetica, sans-serif
Tahoma, Geneva, sans-serif
Trebuchet MS, Arial, Helvetica, sans-serif
Arial Black, Gadget, sans-serif
Times New Roman, Times, serif
Palatino Linotype, Book Antiqua, Palatino, serif
Lucida Sans Unicode, Lucida Grande, sans-serif
MS Serif, New York, serif
Lucida Console, Monaco, monospace
Comic Sans MS, cursive

Con independencia de la tipografa utilizada, deberemos definir su tamao. Normalmente,

las tipografas se trabajan en pxeles, que son equivalentes a puntos cuando la resolucin de
la pantalla es de 72 ppp (pxeles por pulgada). A modo de orientacin, trabajar con 11 o 12
pxeles facilita la lectura de la mayora de las tipografas, y casi nunca se trabaja con
tipografas menores a 8 o 9 pxeles.
Opcionalmente, en vez de trabajar con pxeles, podemos definir el tamao de una tipografa
como un porcentaje de la tipografa "media" definida en el ordenador del usuario.

Efectos en la tipografa

Por defecto, las caractersticas o efectos que podemos escoger en cualquier texto web son:

Color.

Normal, negrita, cursiva, subrayado...

Alinear a derecha, izquierda, centro, justificado

 Tamao de fuente. Se puede definir en pxeles o en un tamao relativo (pequeo,
grande...)

Espaciado de palabras, espaciado de letras, espaciado entre pargrafos...

Sombreados o gradientes de colores (solo en algunos navegadores web)

Otros (a consultar con el maquetador).

A parte de las anteriores posibilidades, el texto web tiene muchas limitaciones. Por ejemplo,
la mayora de navegadores no pueden representar texto en 3D o con un ngulo de rotacin
(por ejemplo a 45), slo sera posible hacerlo con imgenes, aunque eso plantea las
limitaciones ya descritas.

Comportamiento del texto con bloques

Otra limitacin a tener en cuenta al disear una pgina web es que el texto se puede adaptar
automticamente alrededor de bloques rectangulares (por ejemplo imgenes) que estn
alineados a la derecha o a la izquierda. Pero no es posible (o sera muy complicado) que el
texto se adapte automticamente alrededor de formas no rectangulares. Por ejemplo, si
tenemos que presentar un texto as, el texto se debera de presentar cmo una imagen, con
sus problemas asociados (descritos anteriormente). As pues, siempre es mejor disear
teniendo en cuenta estas limitaciones.

Imgenes
Formatos

Los formatos de imgenes que cualquier navegador web puede presentar son: .gif, .jpg y
.png:

GIF: Es un formato que conserva cada pixel de la imagen original, muy eficiente para
grficos sencillos con pocos colores. Permite entrelazar la imagen, es decir, presentarla con
mayor detalle a medida que el navegador la descargue. Permite crear animaciones y
transparencias del 100%.
PNG: Es un formato similar al GIF pero no permite crear animaciones. En cambio permite
degradados de transparencias.
JPG: Comprime mucho ms las imgenes que los anteriores formatos. Excelente para
trabajar con fotografas de muchos colores y texturas, porqu mantiene la calidad percibida
con pesos de imagen mucho ms bajos. No permite transparencias ni animaciones.

Teniendo en cuenta los formatos admitidos, las imgenes no pueden ser vectoriales ni
contener capas. Solo se trabaja con pxeles.
Guardar imgenes para web

Actualmente, la mayora de programas de tratamiento de imgenes tienen la opcin

"guardar para web". Estas opciones permiten definir transparencias, tamao y disminuir la
calidad de la imagen y sus colores.

Idealmente se tienen que guardar al tamao que se va a presentar en la pgina web, o no ser
que vayamos a permitir que la imagen se presente ms grande en navegadores con ms
resolucin. Es importante recordar que, con las conexiones de internet actuales, podemos
calcular muy orientativamente que por cada incremento de peso de 500Kb a 1Mb, una
pgina tarda un segundo ms a descargarse y abrirse. Para evitar pesos muy elevados de
pginas con muchas imgenes, puede ser positivo trabajar con imgenes pequeas que se
ampliaran cuando el usuario las seleccione o clique.

Si una imagen contiene texto, antes de guardarla es mejor ponerle el efecto anti-aliasing, un
ligero desenfoque en los bordes curvos que har ms suaves las transiciones entre los
colores.

Texto alternativo de las imgenes

Para que el web est bien posicionado en los buscadores, es importante pasar las imgenes
al maquetador junt con el texto alternativo que las define. Los buscadores toman este texto
alternativo como la descripcin o contenido de la imagen.

Enlaces web
Los enlaces web pueden ser texto o imgenes. Para diferenciarlos de otros elementos que
no son enlaces, el puntero (o ratn) cambia de la forma fecha a mano cuando se pasa por
encima. De todos modos, el diseo de la pgina web tambin debe de diferenciar los
enlaces utilizando colores distintos, subrayados, tipografas distintas, Por ejemplo,
debemos evitar que los enlaces no parezcan enlaces o que el texto resaltado se parezca a
enlaces.

Por defecto, podemos definir imgenes diferentes o efectos de tipografa diferentes segn
distintos eventos relacionados con el enlace:

El enlace no ha estado visitado por el usuario con anterioridad.

El enlace ha estado visitado por el usuario con anterioridad.

El puntero del usuario pasa por encima del enlace (eso sirve para
iluminar o destacar ms el enlace).
 El usuario clica sobre el enlace. Eso puede suceder tan rpido en algunos
navegadores que a la prctica no es se utiliza este evento.

Mens desplegables

Opcionalmente se puede programar que al pasar el puntero del usuario por encima de un
enlace (o al clicarlo) se abra un bloque situado por encima de los otros bloques (o tambin
se puede hacer que el nuevo bloque se haga espacio entre los otros bloques). Eso permitir
disear un men desplegable con nuevos enlaces listados en el bloque abierto. Deberemos
definir en qu posicin se va a presentar el nuevo bloque y la animacin que tendr al
abrirse.

Ejemplos de mens desplegables:

Formularios web
Los formularios web se utilizan para interactuar con el usuario de un modo ms
personalizado y obtener informacin proporcionada por l mismo. Un formulario siempre
capta la informacin y la enva a un programa web que la trata, aadindola a una base de
datos, enviando un correo electrnico o presentando nueva informacin al usuario en
funcin de la informacin introducida.
Un formulario web puede estar compuesto por los siguientes elementos:

Campo de texto: una lnea para introducir texto a la cual se puede especificar
longitud de caracteres a presentar, longitud mxima de caracteres a introducir, texto
que aparece al inicio (normalmente se presenta en blanco). Se puede definir como
contrasea, de modo que el texto introducido no se vea.

rea de texto: diversas lneas en las que se puede introducir texto. Se puede especificar
longitud en caracteres de la lnea, nmero de caracteres por lnea, texto o valor inicial.
Opcionalmente el campo de texto se puede presentar con opciones que permitan disear el
formato de la tipografa, insertar imgenes, presentar enlaces de modo que el programa
que capte la informacin la pueda tratar como codificacin html o web (ejemplo editor html
area: http://www.dynarch.com /projects/htmlarea/)

Botn: Se utiliza para enviar la informacin o para realizar otras opciones (por ejemplo,
poner en blanco todos los campos introducidos, comprobar la informacin como paso
previo). Por defecto se le define el nombre a presentar y la accin a realizar.
Gua para diseadores grficos > Presentacin de los contenidos > Formularios web

Presentacin de los contenidos

Formularios web
Los formularios web se utilizan para interactuar con el usuario de un modo ms
personalizado y obtener informacin proporcionada por l mismo. Un formulario siempre
capta la informacin y la enva a un programa web que la trata, aadindola a una base de
datos, enviando un correo electrnico o presentando nueva informacin al usuario en
funcin de la informacin introducida.

Un formulario web puede estar compuesto por los siguientes elementos:

 Campo de texto: una lnea para introducir texto a la cual se puede especificar
longitud de caracteres a presentar, longitud mxima de caracteres a introducir, texto
que aparece al inicio (normalmente se presenta en blanco). Se puede definir como
contrasea, de modo que el texto introducido no se vea.

rea de texto: diversas lneas en las que se puede introducir texto. Se puede
especificar longitud en caracteres de la lnea, nmero de caracteres por lnea, texto o
valor inicial. Opcionalmente el campo de texto se puede presentar con opciones que
permitan disear el formato de la tipografa, insertar imgenes, presentar enlaces
de modo que el programa que capte la informacin la pueda tratar como
codificacin html o web (ejemplo editor html area: http://www.dynarch.com
/projects/htmlarea/)

Botn: Se utiliza para enviar la informacin o para realizar otras opciones (por
ejemplo, poner en blanco todos los campos introducidos, comprobar la informacin
como paso previo). Por defecto se le define el nombre a presentar y la accin a
realizar.

Casilla de verificacin: Pequeo recuadro que se puede marcar o desmarcar.

Botn de opcin: Pequeo crculo que se puede marcar o desmarcar (siempre tiene que
existir un circulo de la lista marcado).

Lista / men: Listado de opciones que se pueden marcar (una o varias). El listado
puede estar desplegado, mostrando todas las opciones o se puede desplegar cuando el
usuario clique sobre el listado.

Campo de archivo o imagen: Similar al campo de texto, pero tiene un botn al

lado para que el usuario pueda explorar sus directorios y seleccionar un archivo o
 imagen a enviar. Se pueden definir los mismos valores que en el campo de texto y
botn.

Campo oculto: A veces es necesario enviar informacin que el usuario

no necesita ver, junto a la que introduzca el mismo. En este caso se
utilizan campos ocultos, que lgicamente no se tienen que disear.

Diseo de los elementos de un formulario

os distintos elementos de un formulario mencionados tienen un diseo por defecto que

muchas veces no encajar con diseos elaborados de una pgina web. As pues, cada uno de
los elementos se puede disear como si se tratara de un bloque (mrgenes, bordes, colores
de fondo,) y el texto se puede presentar con los mismos efectos definidos en la tipografa.

Tablas
Aunque las tablas son unos elementos especficos frecuentemente utilizados en las pginas
web, se pueden disear contemplando las mismas posibilidades y limitaciones que los
bloques secundarios, los cuales sern posicionados unos al lado de otros, creando filas. Al
mismo tiempo, las filas se irn posicionando unas debajo de las otras.

Ejemplos de diferentes diseos para tablas:

Animaciones
Todos los efectos mencionados anteriormente (posiciones de bloques, efectos de las
tipografas,) se pueden modificar de acuerdo a la secuencia temporal que queramos o de
acuerdo a una secuencia de acciones generadas por el usuario. Adems de modificar las
caractersticas de los bloques, de las tipografas, imgenes dentro de la secuencia
temporal (o de las acciones del usuario) tambin se pueden presentar nuevos bloques o
eliminar de existentes.

Las posibilidades son infinitas, nicamente limitadas por la imaginacin (y el trabajo de

maquetacin). Esta gran flexibilidad que permite animar los mdulos y las caractersticas
de cualquier elemento web ha provocado que la mayora de maquetadores estn dejado de
trabajar en flash, bsicamente porqu existen dispositivos que no reproducen el flash y
porqu las animaciones tambin sern reconocidas por los buscadores (no ocurra con el
flash).

Otros contenidos posibles

A parte de imgenes, texto, formularios, tablas, animaciones los bloques web tambin
permiten insertar:

Vdeos: Se pueden enlazar vdeos de Youtube, Vimeo o se pueden

presentar vdeos alojados junto al web. Si el video est alojado junto al
web, se pueden disear o personalizar los enlaces de "play", "stop",
"pause" aunque la maquetacin o programacin se puede complicar.
Muchos recomiendan no empezar el video hasta que el usuario no lo
seleccione.

Msica: Se puede poner msica en la web, con sus botones de "play",

"stop", "pause", seleccin de cancin Es necesario tener los derechos
de reproduccin o tener una cancin sin derechos. Muchos recomiendan
no activar la msica al cargar la pgina, que sea el usuario quien tome la
iniciativa.
 Calendarios: Se pueden actualizar automticamente a partir los
calendarios de Google, Microsoft Outlook El usuario tambin puede
actualizar sus calendarios a partir del calendario web.

Chat: Aplicacin para conversar on-line con otro usuario.

Elementos de redes sociales: Facebook, Twitter, google+...

Mapas de google.

Otros: Cualquier aplicacin existente en Internet se puede aplicar a su

diseo web. Si tiene en mente otra aplicacin no existente, consulte con
su maquetador.

Nuevas posibilidades: CSS3 y HTML5

Las posibilidades web estn en evolucin constante. Existen posibilidades ya definidas
(CSS3 y HTML5) que progresivamente van a ser reconocidas por todos los navegadores.
Algunas simplemente facilitaran el trabajo de maquetacin mientras que otras permitirn
nuevas posibilidades en el diseo. Javajan toma el compromiso de mantener actualizado
este libro con las nuevas tecnologas que se vayan implantando y que amplen las
posibilidades en el diseo web.

En teora, cualquier diseo, efecto, o posibilidad que usted vea navegando por Internet, se
puede realizar.

Pgina web programada para presentar un elemento

Antes de empezar a disear las pginas web de los elementos, tendramos que
preguntarnos:

Qu informacin de la base de datos deseamos presentar por cada elemento

(nombre, imagen, descripcin, precio, web, direccin...)

Cules son las dimensiones mximas y mnimas de las informaciones a presentar:

todas las imgenes tienen el mismo tamao? el texto a presentar tiene longitudes
muy diferentes dependiendo del elemento?

Existen informaciones que se pueden presentar para unos elementos y no

presentarse para otros? Por ejemplo, unos productos pueden tener rebajas y otros no,
unas empresas pueden tener direccin mail y otras no,...