jueves, 27 de octubre de 2011

09.- Estilo de enlaces, menús y vinculación de archivos CSS

Enlaces
Los enlaces constituyen la base de la hipertextualidad en el sitio web. Desde el punto de vista de la arquitectura de la información deben proporcionar toda la información que sea posible en relación a su título o descripción, idioma de la página de destino y marco o página en la que será cargado el enlace. Ello se consigue con la sintaxis que se muestra en la tabla1.

<a href='dirección URL del enlace' target='página de destino' hreflang='código de idioma ISO 639-1' title='título o descripción del enlace' rel='relación entre el documento y el recurso enlazado'>nombre de enlace</a>
 Tabla1. Enlace en HTML con todos sus atributos

Para asignar estilos a los enlaces se necesita utilizar CSS y señalar las propiedades para los 4 posibles estados en los que se puede encontrar un enlace. 1) estado (a:link) el enlace en estado normal; 2) estado (a:visited) el enlace fue visitado por el usuario; 3) estado (a:hover) cuando el cursor se mueve por encima del enlace; 4) estado (a:active) cuando el usuario presiona sobre el enlace sin soltar el botón del ratón. Todos estos estados se pueden definir, tal y como se muestra en la tabla2.

a:link    { color: #224a6a; font-size: 12px; font-family: arial; } 
a:visited { color: #236b6a; font-size: 12px; font-family: arial; } 
a:hover   { color: #4497da; font-size: 12px; font-family: arial; } 
a:active  { color: #44c5da; font-size: 12px; font-family: arial; }
 Tabla2. Enlaces con estilos CSS

El resultado de aplicar los estilos de la tabla2 a una lista de enlaces es el ejemplo presentado en el modelo1 de enlaces, que guarda todas las reglas y recomendaciones propuestas para la arquitectura de la información y su mayor accesibilidad.

Modelo1 de enlaces. Descargar página

Pero puede suceder el caso de que se necesiten distintos estilos de enlaces en la misma página. El problema de diferenciar distintos estilos en CSS y aplicarlos en los enlaces se resuelve, añadiendo un identificador para cada tipo de enlace, véase tabla3.

a:link.enlace1    { color: #224a6a; font-size: 12px; font-family: arial; } 
a:visited.enlace1 { color: #236b6a; font-size: 12px; font-family: arial; } 
a:hover.enlace1   { color: #4497da; font-size: 12px; font-family: arial; } 
a:active.enlace1  { color: #44c5da; font-size: 12px; font-family: arial; }
 Tabla3. Diferenciando dos estilos de enlaces

De esta forma, véase modelo2 de enlaces, se consigue crear tantos estilos de enlaces como fueren necesarios para una o muchas páginas distintas. Este método resulta de gran importancia cuando se diseñan menús con CSS, ya que a menudo en una misma página conviven múltiples estilos que atañen a muy diversas formas gráficas que adpotan los enlace.

Modelo2 de enlaces. Descargar página

Menús
Desde los comienzos de los primeros sitios web hasta la fecha una de las constantes que más preocupaciones causaron fue el asunto de los menús. Se han diseñado complejos menús en Java, Applets, sofisticados menús en Flash, Shockwave, pero en ninguno de los casos, resultaban accesibles, sencillos y suficientemente bien estructurados como para ser indexados con facilidad por cualquier webcrawler. Por ello en arquitectura de la información se aboga por un diseño lo más sencillo posible que favorezca una fácil lectura, con contraste adecuado, una correcta visibilidad, gran limpieza, simplicidad, funcionalidad y una coloración agradable en tonos fríos-mates-nobrillantes-opacos-escalares-gradientes-suaves-pasteles-grisaceos-blanquecinos-claros.

Modelo de menú horizontal. Descargar página

Modelo de menú desplegable vertical. Descargar página

Modelo de menú lateral. Descargar página

Vinculación de archivos CSS
En todos los ejemplos vistos hasta el momento, los códigos de estilo CSS están integrados en las páginas HTML. A modo de ejemplo es muy útil dicha disposición, pero en la vida real, lo normal es referenciar en el documento HTML el archivo CSS que contiene todos los estilos que se utilizarán a lo largo del sitio web. El código para su referenciación es el que se muestra en la tabla4. Como se puede observar no sólamente es posible enlazar un único archivo, pueden agregarse tantos como fueren necesarios. Ello dependerá del tipo de estilos o el uso de los estilos en cada archivo CSS. Por ejemplo un estilo1.css puede encargarse de la maquetación general del sitio. El estilo2.css se dedica a la presentación de textos y contenidos publicados y finalmente un estilo3.css para las distintas propiedades de los menús del sitio web.

<html>
<head>
<title></title>
<link rel='stylesheet' type='text/css' href='css/estilo1.css'/>
<link rel='stylesheet' type='text/css' href='css/estilo2.css'/>
<link rel='stylesheet' type='text/css' href='css/estilo3.css'/>
</head>
<body>
</body>
</html>
 Tabla4. Vinculación de archivos CSS

No hay comentarios:

Publicar un comentario