¿Cómo cambiar el estilo de nuestro sitio dinámicamente? Parte IV – Final

Vemos la última parte de este mini-manual sobre cómo modificar dinamicamente los estilos CSS en nuestra página web. En esta última entrega terminamos el ejemplo de las horas del día.

Continuando con el tema de cambiar estilos dinámicamente en base a las horas del día. El primer estilo a desarrollar será el de la mañana, que contendrá colores más claros que el resto, empezando por un fondo basado en un gradiente circular que ira desde el blanco hasta un amarillo claro.

Código CSS para cambiar los estilos dinámicamente

 * {
  margin: 0;
  padding: 0;
  }
  
  body {
  height: 100%;
  background: #DEB887;
  font-size: 14px;
  background: -moz-radial-gradient(center 45deg, circle closest-corner, #FFFFFF 0%, #FFCC66 100%);
  background: -webkit-gradient(radial, center center, 0, center center, 770, from(#FFFFFF), to(#FFCC66));
}

#contenedor {
  width: 922px;
  margin: 0px auto;
  padding: 0px;
  border: 1px solid #dfdfdf;
  background: #FFF8DC;
  color: #DEB887;
  font: 1.0em/150% 'arial', sans-serif;
  }
  #cabecera {
  float: left;
  width: 100%;
  height: 95px;
  margin: 0px;
  padding: 0px;
  background: #FFEBCD;
  }
#cabecera #titulo {
  margin: 20px 0px 0px 30px;
  padding: 0px;
  color: #DEB887;
  font: bold 2.5em 'arial black', sans-serif;
  text-align: left;
  }
#cabecera div#descripcion {
  margin: 5px 0px 0px 30px;
  padding: 0px;
  color: #DEB887;
  font-size: 1.2em;
  text-align: left;
  }

#navegacion {
  float: left;
  width: 93%;
  margin: 0px;
  padding: 10px 2% 0px 5%;
  background: #FFDEAD;
  }
#contenido {
  float: left;
  width: 450px;
  margin: 20px 0px 0px;
  padding: 0px;
  background: #FFEBCD;
  font-size: 1.0em;
  text-align: left;
  }
#contenido p {
  margin: 15px 25px;
  padding: 0px;
  }
#contenido h3 {
  margin: 20px 25px 10px;
  font: bold 1.0em 'arial', sans-serif;
  text-align: left;
  }

.lateral {
  width: 200px;
  float: left;
  margin: 20px 5px 10px 0px;
  padding: 0px 0px 0px 20px;
  background: #F5DEB3;
  font-size: 1.0em;
  text-align: left;
  }
#pie {
  clear:both;
  width: 100%;
  height: 35px;
  margin: 0px;
  padding: 20px 0px 0px;
  background: #FFDEAD;
  font-size: 0.8em;
  text-align: right;
  }
  

En la definición de este estilo CSS podemos identificar los puntos claves para trabajar con el resto. Los elementos background, color y border, son los responsables de adaptar los colores al fondo, letra y borde de cada div, estos serán los elementos que cambiaremos para agregar la particularidad de cada etapa del día.

Estilo CSS para la tarde:

 * {
  margin: 0;
  padding: 0;
  }
body {
  height: 100%;
  background: #FF8C00;
  font-size: 14px;
  background: -moz-radial-gradient(center 45deg, circle closest-corner, #D2B48C 0%, #FF8C00 100%);
  background: -webkit-gradient(radial, center center, 0, center center, 770, from(#D2B48C), to(#FF8C00));
}
#contenedor {
  width: 922px;
  margin: 0px auto;
  padding: 0px;
  border: 1px solid #FFAD04;
  background: #FFCC66;
  color: #FF8C00;
  font: 1.0em/150% 'arial', sans-serif;
  }
#cabecera {
  float: left;
  width: 100%;
  height: 95px;
  margin: 0px;
  padding: 0px;
  background: #F0A300;
  }
#cabecera #titulo {
  margin: 20px 0px 0px 30px;
  padding: 0px;
  color: #FFDB91;
  font: bold 2.5em 'arial black', sans-serif;
  text-align: left;
  }
#cabecera div#descripcion {
  margin: 5px 0px 0px 30px;
  padding: 0px;
  color: #FFDB91;
  font-size: 1.2em;
  text-align: left;
  }

#navegacion {
  float: left;
  width: 93%;
  margin: 0px;
  padding: 10px 2% 0px 5%;
  background: #FFAD04;
  }
#contenido {
  float: left;
  width: 450px;
  margin: 20px 0px 0px;
  padding: 0px;
  background: #FFDB91;
  font-size: 1.0em;
  text-align: left;
  }
#contenido p {
  margin: 15px 25px;
  padding: 0px;
  }
#contenido h3 {
  margin: 20px 25px 10px;
  font: bold 1.0em 'arial', sans-serif;
  text-align: left;
  }

.lateral {
  width: 200px;
  float: left;
  margin: 20px 5px 10px 0px;
  padding: 0px 0px 0px 20px;
  background: #FFC753;
  font-size: 1.0em;
  text-align: left;
  }
#pie {
  clear:both;
  width: 100%;
  height: 35px;
  margin: 0px;
  padding: 20px 0px 0px;
  background: #FFAD04;
  font-size: 0.8em;
  text-align: right;
  }
  

Estilo CSS para la noche:

 * {
  margin: 0;
  padding: 0;
  }
body {
  height: 100%;
  background: #dfdfdf;
  font-size: 14px;
  background: -moz-radial-gradient(center 45deg, circle closest-corner, #333333 0%, #000000 100%);
  background: -webkit-gradient(radial, center center, 0, center center, 770, from(#333333), to(#000000));
}
#contenedor {
  width: 922px;
  margin: 0px auto;
  padding: 0px;
  border: 1px solid #000000;
  background: #555555;
  color: #333333;
  font: 1.0em/150% 'arial', sans-serif;
  }
#cabecera {
  float: left;
  width: 100%;
  height: 95px;
  margin: 0px;
  padding: 0px;
  background: #333333;
  }
#cabecera #titulo {
  margin: 20px 0px 0px 30px;
  padding: 0px;
  color: #666666;
  font: bold 2.5em 'arial black', sans-serif;
  text-align: left;
  }
#cabecera div#descripcion {
  margin: 5px 0px 0px 30px;
  padding: 0px;
  color: #666666;
  font-size: 1.2em;
  text-align: left;
  }

#navegacion {
  float: left;
  width: 93%;
  margin: 0px;
  padding: 10px 2% 0px 5%;
  background: #000000;
  }
#contenido {
  float: left;
  width: 450px;
  margin: 20px 0px 0px;
  padding: 0px;
  background: #999999;
  font-size: 1.0em;
  text-align: left;
  }
#contenido p {
  margin: 15px 25px;
  padding: 0px;
  }
#contenido h3 {
  margin: 20px 25px 10px;
  font: bold 1.0em 'arial', sans-serif;
  text-align: left;
  }

.lateral {
  width: 200px;
  float: left;
  margin: 20px 5px 10px 0px;
  padding: 0px 0px 0px 20px;
  background: #666666;
  font-size: 1.0em;
  text-align: left;
  }
#pie {
  clear:both;
  width: 100%;
  height: 35px;
  margin: 0px;
  padding: 20px 0px 0px;
  background: #000000;
  font-size: 0.8em;
  text-align: right;
  }
  

Una vez concluidos los estilos CSS, empezaremos a idear un sistema de condicionamiento basado en horas, si definimos que mostraremos un “layout” distinto cada ocho horas entonces debemos estructurarlo en base a este período.

JavaScript como la mayoría de los lenguajes de programación, cuenta con un número de funciones y atributos predefinidos que nos ayudan a obtener valores específicos para realizar operaciones con ellos.

En cuestión de Tiempo, existen funciones como getTime y getHours que podemos utilizar para obtener los valores necesarios para estructurar el condicionamiento mencionado, con datos directamente extraídos de nuestro cliente.

Tomando los valores obtenidos como base, podemos iniciar la codificación de condiciones necesarias para desplegar el estilo que diseñamos para ese valor específico, algo como lo siguiente:

Código JavaScript para cambiar el CSS dinámicamente

function obtenerCSS() 
{ 
fechadehoy = new Date(); 
tiempoactual=fechadehoy.getTime(); 
fechadehoy.setTime(tiempoactual); 
horaactual = fechadehoy.getHours(); 
 
if (horaactual > 20) 
colores = "noche.css"; 
else if (horaactual > 12) 
colores  = "tarde.css"; 
else if (horaactual > 4) 
colores  = "manana.css"; 
else if (horaactual > 1) 
colores  = "noche.css"; 
else 
colores  = "tarde.css"; 
 
var css = '<';  css+='link rel="stylesheet" href="' + colores  + '" \/';  css+='>'; 
 
document.write(css); 
} 

Básicamente lo que realizamos es obtener el tiempo en base a la fecha actual y extraerle la hora para poder utilizar el valor en las condiciones que determinan que combinación de colores utilizar. Una vez definida la combinación formamos la etiqueta “link” para agregar el css y lo escribimos en el documento.

Dicho código lo guardamos en un archivo con extensión .js, el cual agregaremos en nuestro código HTML principal, para mandar llamar a dicha función, esto lo haremos dentro del campode la siguiente manera:

<script type="text/javascript">obtenerCSS();</script>

Hay que recordar que este código funcionará en base al reloj de la computadora del usuario por lo que funcionará correctamente si este se encuentra bien ajustado; es decir, si el usuario por alguna razón tiene su reloj adelantado o atrasado recibirá un estilo que no corresponde a la verdadera etapa del día.

A pesar de este problema, por razones de personalización es preferente usar el tiempo obtenido del lado cliente en vez del servidor, para que el usuario reciba el CSS correspondiente a la hora actual de su ciudad.

El utilizar estilos de CSS dinámicos se puede llevar a un nivel más avanzado, utilizar aplicaciones externas y web services para obtener información relevante y utilizarla para llevar a cabo cambios de estilo, en el siguiente artículo de esta serie veremos como poder utilizar esta clase de información.