La importancia del color de fondo (accesibilidad)

Accesible

El color de fondo es muy importante, dado que no todo el mundo tiene velocidades de conexión altas como la banda ancha, sino que aun se conectan por modem.

Si nosotros planteamos un diseño con imágenes de fondo, debemos necesariamente colocarle un fondo de color por ejemplo de tipo #FFFFFF, por que esto nos permite que en el caso que no carguen las imágenes pueda el usuario visualizar la información ó enterarse de una previsualizacion del sitio. Ejemplo:

con_fondo

ese es el administrador de proyectos en el que e estado trabajando estos últimos 12 días, ahí podemos ver la interfaz… que maneja varias imágenes, esto el da un aspecto “bonito :P” creo yo. Ahora vamos a quitarle las imágenes para ver como se visualiza.

sin_fondo

:O si notamos se pierden las imágenes, pero el texto sigue totalmente legible, esto es importante en una web y en una aplicación de internet, por que mientras cargan las imágenes, aparece el color de fondo y esto a vos te da un tiempo extra. SI! un tiempo extra, por que el usuario no necesita que cargue la web completamente para poder comenzar a leer, escribir o navegar sobre la web creada.

 Si aun no sabes como colocar un fondo como imagen, ó si ya sabes y no sabes como colocarle el color a continuacion con un minitutorial te explicare.

Primero crea la clase:
.clase_fondo1{
}

Ahora, dentro de ella declara la propiedad BACKGROUND, de esta forma:
background:url(‘../img/fondo.png’);
Algunas personas dicen que debe ir sin las comillas, por que en el ie para mac crea problemas cuando tiene comillas, pero pues a mi me gusta con comillas, asi que vamos a colocarlo asi 😛 :

entonces el codigo quedaria asi:

.clase_fondo1{
      background:url(‘../img/fondo.png’);
}

Ya tenemos declarada la propiedad con la url de fondo, recorda que la direccion de ubicacion es relativa segun el directorio del archivo css. ahora vamos a colocarle un fondo, por ejemplo un color negro.

.clase_fondo1{
      background:url(‘../img/fondo.png’) #000000;
}

si ves, le agregue el codigo de la imagen despues de la declaracion del fondo, recuerda dejar espacio para que el IE en windows no te cree problemas.

y listo!.

Anuncios
Acerca de

Programador, usuario Linux e hincha de Millonarios de Colombia

Tagged with: , , , , , , , , , , , , , , , , , , , , , , ,
Publicado en accesibilidad, Css para principiantes, General, manuales, Trucos css

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Sígueme en Twitter
Categorías
Flickr Photos
A %d blogueros les gusta esto: