Colores y hojas de estilo que ayudan a navegar.
Resumen:
- Colores que ayudan a navegar.
- Hojas de estilo (CSS). Ayudan a navegar.
1. Colores que ayudan a navegar.
Las pantallas de ordenador de los usuarios por lo general soportan miles de colores. Es raro encontrar monitores con 256 colores aunque
aun existen algunos y va siendo normal encontrar monitores con millones de colores.
La seleccion de "colores basicos" de nuestro site se debe mantener dentro del rango de 256 colores. Podremos ampliar el rango en
elementos no fundamentales (fotos, ilustraciones, etc) pero debemos asegurarnos que el 100% de la poblacion podra acceder a nuestro
site sin problemas.
A la hora de seleccionar los colores debemos identificar las partes del site.
A. Colores en la Barra de Navegacion.
Lo mejor es tener dos colores, para identificar el elemento activo de la barra de navegacion y para identificar los
elementos apagados. Es mejor si el elemento activo "avanza" sobre los demas elementos con lo que colores calidos (rojo, naranja) y
saturados se presentaran mas cercanos al usuario frente a colores frios (azul y verde) y poco saturados.
B. Colores en los enlaces.
Es recomendable conservar los colores estandar (azul subrayado). Si decides cambiarlo, recuerda lo siguiente:
Los links tienen 2 estados (sin pulsar y pulsado) por lo que tendras que elegir un color saturado para el estado sin pulsar
y otro menos saturado para el estado pulsado.
Sin visitar (Link): Es el color de un link antes de ser pulsado. El color azul es el normal.
Visitado (Vlink): Es el color que presenta un link cuando ha sido pulsado. El violeta (#CC33CC) es el normal.
Acitvado (Alink): Es el color del link cuando lo pulsamos.
Si decidimos cambiar el color de los links procura que el sistema
de color que elijas sea similar al estandar. Teniendo un color brillante para el estado de "no visitado" y un color mas oscuro para los "enlaces
visitados".
C. El Color de Fondo.
El texto corrido se lee mejor con fondo claro y texto oscuro. Lo mas recomendable es el fondo blanco (#FFFFFF) o el amarillo claro (#FFFFCC).
Otros colores claros son menos comodos para leer, pero si tu site no exige lecturas prolongadas, puedes usarlos para llamar
la atencion y conseguir una lectura mas compulsiva.
Para mensajes de alerta lo mejor es usar el fondo rojo (#FF0000) y el texto en blanco (#FFFFFF). El amarillo y negro es una combinacion que
llamara la atencion pero tiene un significado mas estatico. Por ultimo, no es recomendable la combinacion de rojo y negro.
Enlaces de interes sobre los colores y la vision humana.
Articulo de Lawrence J. Najjar (IBM Corp. Software Usability Department). Muy completo e interesante.
Respuestas a preguntas comunes sobre el color..
2. Hojas de estilo.
Las hojas de estilo (CSS), tecnicamente, son un documento que define el estilo del site (tipografia y colores basicamente). Al definir todo el estilo
en un unico documento actualizaciones y mejoras en el aspecto del site se simplifican y aceleran.
El documento se coloca en el servidor y se adjunta la llamada <link rel="stylesheet" href="MiHojaDeEstilo.css">
en todas las paginas web en la parte del <head>
Reglas basicas:
- Es mejor poner los tamaños de las fuentes en tantos por ciento (%) que en absolutos.
- Es mejor enlazar la hoja de estilo por que asi el usuario solo se la bajara una vez.
- No borres el subrayado de los enlaces solo por que puedes hacerlo.
- Que tu "estilo" sea por una mejor navegacion del site.
A continuacion vamos a comentar la hoja de estilo que usamos en este site. Vamos a comentar esta hoja de
estilo por que es sencilla y presenta mas o menos todos los elementos tipicos.
body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; background-color: #FFFFFF;}
td { font-family: Arial, Helvetica, sans-serif; font-size: 100%;}
Con estas dos primeras lineas se define la fuente a utilizar en todo el site. Todo el texto que este en la pagina
ira con el estilo definido en el "body" y todo el texto dentro de las tablas ira definido dentro del "td".
a:hover { color: RED; background-color: #FFFFCC;}
a:link { color: BLUE;}
a:visited { color: purple;}
En estas 3 lineas creamos el estilo de los enlaces. El "a:hover" es el estilo de los enlaces cuando nos colocamos encima de ellos. Esta opcion
solo funciona en Explorer, pero es muy interesante incorporarlo. El "a:link" es el estilo de los links cuando aun no han sido visitados y "a:visited"
es el estilo de los links cuando han sido visitados. Algunos utilizan la opcion de "text-decoration: none" que es para quitarle el subayado a los enlaces. No es recomendable.
.head { font-family: Arial, Helvetica, sans-serif; font-size: 160%;}
.head2 { font-family: Arial, Helvetica, sans-serif; font-size: 120%;}
En estas dos ultimas lineas hemos creado estilos especiales para la cabecera del articulo y las cabeceras en los parrafo. Para introducir este estilo,
podemos poner <font class="head2">. Como ves el tamaño esta definido en % con lo que el usuario es libre
de aumentar el tamaño de las fuentes en su navegador, pero el documento conservara las mismas proporciones.
Enlaces de interes sobre hojas de estilo.
Guia basica sobre las hojas de estilo.
Validador de hojas de estilo para saber si son compatilbes y cumplen los estandares.
ThinkTank. home / Colores y hojas de estilo (CSS) que ayudan a navegar.
Si quieres saber mas sobre como optimizar la web, enviame un e-mail.
|