Adapta tu Web a la luz del ambiente con JavaScript y CSS3

Hacer un sitio con buena usabilidad abarca muchas facetas, una de ellas es que sea cómodo y agradable de usarlo. Y algo que haría muy agradable la experiencia a cualquier usuario es no tener que desgastar la vista cuando está en la oscuridad ni forzar los ojos cuando hay mucha luz. ¡Ahora es posible adaptar el diseño a la luz!

Seguro que te ha pasado: vas por la calle un día con un tiempo perfecto, sol radiante, quieres mirar tu teléfono pero hay mucha luz, no puedes. Pones la mano alrededor de la pantalla tapándola, pero tampoco alcanzas a ver bien, levantas el teléfono poco a poco hasta ponerlo por encima de tu cabeza y miras hacia arriba, ya tienes que detenerte porque no eres capaz de caminar con esa postura.

Y por fin, agarrando el teléfono con las dos manos hacia arriba y mirándolo con fijeza como si estuvieras levantando la copa del mundo logras intuir lo que hay en la pantalla... ¿no sería más fácil si el diseño de un sitio web se adaptara en función del nivel de luz del ambiente?

El sensor de luz

Lógicamente el requisito fundamental para que esto sea posible es que nuestro dispositivo tenga sensor de luz, normalmente todos los nuevos smartphones y tablets cuentan con este sensor ubicado junto a la cámara frontal en muchos casos como el de la imagen:



Una vez tengamos esto, hacer nuestra web adaptable a la cantidad de luz que nos rodee es posible de dos formas diferentes:

• JavaScript
  
• CSS en el futuro
  

Cómo preparar los diseños adaptables a la luz ambiente

Para que los diseños sean coherentes con la luz ambiente, tenemos que usar colores de fondo y de letra que correspondan con la situación.

La norma es: para ambientes oscuros usaremos fondos oscuros y para situaciones de mucha claridad usaremos fondos claros. El color del texto será inverso al fondo.

Pero como siempre, usando un criterio lógico, en el caso de fondos oscuros se necesitará color de texto más claro para poder diferenciarse pero recordemos que si el entorno está en oscuridad, como por ejemplo cuando miramos el teléfono nada más abrir los ojos al despertarnos, tampoco es agradable que la letra tenga un color tan tan claro que igualmente sea incómodo.

Por lo tanto la claridad de la fuente debe ser diferenciable del fondo pero no tanto que resulte molesta. Aquí puedes ver este ejemplo de diseños para luz tenue, normal y abundante con tonos granates:

Adaptar el diseño con JavaScript

Simplemente tenemos que añadir a nuestro código la escucha del evento 'devicelight' con JavaScript que nos indicará cuánta cantidad de lux (medidad de luz) capta el sensor.

Después establecemos los límites de luz que diferenciarán si en el entorno hay una cantidad de luz pequeña, normal o abundante. En función de dicha cantidad cambiaremos la clase de nuestro body (o cualquier otro elemento html que deseemos modificar).

Para ello tenemos que haber declarado en nuestro archivo .css las diferentes clases que asignaremos a nuestro body dependiente de la luz que nos rodee.

Los límites de luz recomendables son los siguientes

• Luz tenue: -50 luxes
  
• Luz normal: 50 - 1500 luxes
  
• Luz abundante: 1500+ luxes
  

Código :

<script>
window.addEventListener('devicelight', function(e) {
  var lux = e.value;

  if (lux < 50) { // luz tenue
    document.body.className = 'tenue';
  }
  if (lux >= 50 && lux <= 1500) { //luz normal
    document.body.className = 'normal';
  }
  if (lux > 1500)  { // mucha luz
    document.body.className = 'luminoso';
  } 
});
</script>

Código :

body,
body.normal {
    /*fondo de luminosidad media*/
    background-color: #963F53;
    /*letra de color 
    levemente oscuro*/
   color: #111;
}
body.tenue {
   /*fondo oscuro 
   para ambiente de oscuridad*/
     background-color: #70011B;
     /*luz clara que resalte del fondo*/
   color: #fff;
}
body.luminoso {
   /*fondo claro 
   para ambiente de mucha claridad*/
     background-color: #fff;
     /*luz oscura que resalte del fondo*/
   color: #70011B;
}

Adaptar el diseño con CSS3

Una de las media queries más esperadas por implementar en la mayoría de navegadores y sistemas es "light-level", anteriormente llamada "luminosity". La documentación oficial puede verse en este enlace.

Con esta media query se podrá establecer el diseño de cada parte de nuestro .html sin necesidad de JavaScript, desde el mismo .css en función de los tres parámetros posibles que acepta "light-level".

• dim: Para una luz tenue, ambiente de oscuridad
  
• normal: Cuando la cantidad de luz que nos rodea es común
  
• washed: Para un ambiente muy luminoso que impida ver bien la pantalla
  

La estructura del código para esta media query sería así:

Código :

@media (light-level: normal) {
  p { background: url("texture.jpg"); color: #333 }
}
@media (light-level: dim) {
  p { background: #222; color: #ccc }
}
@media (light-level: washed) {
  p { background: white; color: black; font-size: 2em; }
}

Decimos que esta opción es para un futuro porque teóricamente en la actualidad sólo funciona en sistemas Android y en versiones de Firefox posteriores a la 22. Pero con el tiempo la posibilidad de cambiar el diseño con CSS3 en función de la luz del entorno será implementada en la mayoría de sistemas y navegadores.

Aun así cada dispositivo tiene unos niveles diferentes en su sensor, de modo que para lo que un teléfono sería un nivel de luz "dim" quizás para otro aún se mantenga como "normal".

En resumen

Si quieres hacer más agradable la experiencia de visitar tu sitio web recuerda que prepararlo para que se adapte a la luz y facilite su visualización hará que dé un salto en calidad.

Y en caso contrario...seguiremos levantando copas del mundo en los días de sol radiante.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.