miércoles, 9 de febrero de 2011

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 en todas las paginas web en la parte del

      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 . 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.

  • Para Comentar Elige el Sistema de Comentario de tu Agrado:
    comentarios google
    comentarios blogger
    comentarios facebook

    Comparte este post con tus amigos!

    ...o también puedes seguir el blog en:

    No olvides suscribirte, para recibir todas mis actualizaciones, directamente a tu email.

    Ingresa tu correo electrónico:

    Recuerda confirmar tu suscripción, haciendo click en el enlace que recibirás por email.

    0 comentarios:

    Comparte tu opinión con los demás, deja un comentario. ↓

    Los comentarios son moderados, si contienen insultos o son ofensivos no se publicaran.

    Es muy importante saber tu opinion sobre lo que se publica en este blog asi que POR FAVOR DEJA TU COMENTARIO.

    Comentar es facil, simplemente escribe tu comentario en el cuadro de abajo, trata de comentar con tu perfil abilitado o donde dice Comentar como: selecciona Nombre/URL escribes tu nombre y listo!! (URL puede dejarse en blanco)

    :a   :b   :c   :d   :e   :f   :g   :h   :i   :j   :k   :l   :m   :n   :o   :p   :q   :r   :s   :t Add smileys to Blogger +

     

    ©2009 - 2013 Pichujitos | Theme diseñado por chicoloco123 para Fuutec.com | Ir arriba ↑