 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Directorio
|
Manuales
|
Scripts
|
FAQs
|
Programas
|
Artículos Copyleft
|
Actualidad
|
La Cosecha
|
Colabora
Alojamiento
|
Dominios.es
|
Micropagos SMS
|
Buscadores
|
Patentes, marcas
|
Creación web
|
Multimedia
|
Videos
Colores y hojas de estilo que ayudan
En este artículo podemos ver los colores y hojas de estilos que ayudan a los visitantes a navegar de una manera más fácil e intuitiva por un sitio web.
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.
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".
-
Curiosidad: Luego existe el "Alink" que es uno de los misterios del universo microsoft. He buscado informacion sobre que es esto, pero ni dentro
de microsoft lo explican de forma clara.
El ejemplo que presentan sobre como
funciona, en un explorer 5 en mac no funciona.
- Como trabajar con Alinks: msdn.microsoft.com/library/tools/htmlhelp/chm/htalink1.htm.
- Ejemplo de una pagina que usa el Alink: msdn.microsoft.com/library/tools/htmlhelp/chm/HTalink4.htm.
- Sumario sobre temas relacionados con el Alink: msdn.microsoft.com/library/tools/htmlhelp/chm/HTAlink.htm.
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.
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.
Seguir navegando a partir aquí:
+ 2 manuales relacionados+ 2 categorias relacionadas
+ 2 comentarios (Añadir)
+ 1 comentario no revisado
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de César Martín*
URL: http://www.unosaficionados.com Este artículo tiene licencia Copyleft. Puedes reproducirlo citando al autor y enlazando su página web. * Para consultas técnicas utilizar la lista de correo.
|
Manuales relacionados con este artículo
Dentro de Usabilidad en la web
Siguiente: B2B. Dar antes de recibir
Anterior: Los usuarios no son adivinos
Dentro de Talleres de diseño web
Categorias relacionadas
A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:
+ Entrar en Usabilidad+ Entrar en CSS
Comentarios de los visitantes
| Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar. |
| Se muestran 2 comentarios revisados |
Comentario de Manel
22/4/02
Hola.
Parece que los ejemplos de MS de los Alinks ya no funcionan. Quizás MS ha dado marcha atrás.
Parece que los ejemplos de MS de los Alinks ya no funcionan. Quizás MS ha dado marcha atrás.
Un saludo
Comentario de DEstrella
02/5/02
Alink: Active link
Funciona cuando se trabaja con marcos (frames), se mantiene el color especificado mientras el enlace se mantiene seleccionado después de hacer click en el.
mmmm... no encontré una manera mas simple de explicarlo, pero lo he usado y funciona... :D
 | Añadir un comentario del artículo |
| Comentarios sin revisar |
| Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente. |
 | Ver los comentarios no revisados |
| Añadir un comentario del artículo |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||||||
