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:
  1. Colores que ayudan a navegar.
  2. 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.

paleta web 216 colores con explicacion sobre calido - frio -  saturados

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.

ejemplo de botones con colores calidos - frios y diferentes constrastes

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.

    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.

    ejemplos de alertas y colores


    Enlaces de interes sobre los colores y la vision humana.
  • 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.
  • Compartir

    Comentarios

    Manel

    22/4/2002
    Hola.
    Parece que los ejemplos de MS de los Alinks ya no funcionan. Quizás MS ha dado marcha atrás.

    Un saludo

    DEstrella

    02/5/2002
    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

    nany

    14/11/2007
    aline es cuando una pasa por encima de el link este cambia de color eso es para saber que uno esta pasando por arriba de un link.

    zaira yaney

    18/4/2010
    felicitaciones
    el articulo que acabo de leer me parecio muy interante e útil me gustaría mucho si me lo puedes enviar a mi correo te lo agradecería
    sigas así

    MARIA FERNANDA

    17/3/2011
    CHIDO
    ESTO ES MUY INTERESANTE4 Y MUY DIVERTIDO CHICOS DIVIERTANSE LA VIDA ES CORTA