Programación horaria de elementos con Google Drive

En el último post comentaba la idoneidad de acoger a la tortuga como mascota, pero es que en realidad sería ese bicho el más adecuado para este blog. Ya hace varios meses que alguien solicitó una variante sobre este código que servía para mostrar automáticamente a partir de una lista de elementos (texto, imágenes, sonidos, vídeos, etc.), uno distinto según la hora de acceso al sitio, cumpliendo así determinada programación previa del administrador.

Esta variante consistiría en tener a su vez una sublista dentro de cada intervalo horario, de manera que teniendo cada hora una lista fija, dentro de esa hora se mostrara cada vez un contenido distinto al azar.

Por si con tanta hora, intervalo y listas no lo termino de explicar bien, concreto el asunto con el ejemplo que vamos a ver hoy. Disponemos de una programación de vídeos que podéis ver en esta hoja de cálculo. El código que veremos servirá para que los vídeos 1, 2 y 3 sólo se vean cuando estemos entre las 00:00 y la 01:00. Los vídeos 4, 5 y 6 lo mismo pero entre la 01:00 y las 02:00. Y así sucesivamente...

Así en cada acceso veremos aleatoriamente uno de los vídeos, pero no de entre todos los listados, sino sólo de entre los del tramo correspondiente.

Este el sitio de prueba que he montado para la ocasión para que esté algo más claro:

Demo

Ya he anticipado que vamos a usar una hoja de Google Drive (antes Docs) y eso es para no tener que crear un interminable array dentro del correspondiente código JavaScript. Esto también nos permitirá cambiar fácilmente la programación con sólo acceder a la hoja y variar los datos.

Cómo preparar la hoja de cálculo de Google Drive lo vimos anteriormente, así que pasamos directamente al código JavaScript. Se podría situar en un gadget tipo HTML/JavaScript o en la propia plantilla antes de </head>:

<script type="text/javascript">
//<![CDATA[
codigo='';
titulo='';
autor='';
function leermusica(json) {
var fecha = new Date();
var hora = fecha.getHours();
var alea = Math.round(Math.random()*2);
var cual = (3*hora)+(alea);
codigo = json.feed.entry[cual].gsx$codigo.$t;
titulo = json.feed.entry[cual].gsx$titulo.$t;
autor = json.feed.entry[cual].gsx$autor.$t;
}
function mostrarmusica(donde) {
var salida = '';
salida += '<div class="codigo">'+codigo+'</div>';
salida += '<div class="titulo">'+titulo+'</div>';
salida += '<div class="autor">'+autor+'</div>';
document.getElementById(donde).innerHTML = salida;
}
//]]>
</script>

La primera parte (función leermusica) obtiene la hora en al que nos encontramos (sólo la hora, entre 0 y 23), un número aleatorio (0, 1 ó 2) y luego con ambos datos calcula que fila hay que leer (cual). Como tenemos tres elementos por hora guardados en la hoja de cálculo, usamos una fórmula que nos dará los valores de la siguiente tabla (izquierda):

Si tuviéramos por ejemplo cuatro elementos para cada hora, la fórmula sería la de la derecha y el número aleatorio tendría que calcularse como Math.round(Math.random()*3) para que pudiéramos obtener 0, 1, 2 ó 3, es decir, cuatro valores.


Si en la hoja de cálculo hemos grabado correctamente los títulos y los datos de tres en tres filas (siguiendo el ejemplo), toda la lectura funcionará correctamente. Como podéis ver, el resto es sólo leer los datos de la la fila usando el mismo sistema de leer hojas de cálculo que publicamos en Google Docs como base de datos: leer y mostrar con JavaScript.

CONTENIDO_CELDA = json.feed.entry[NUM_FILA].gsx$TITULO_COLUMNA.$t;

La única diferencia importante es que en la otra ocasión necesitábamos leer todos los datos para tenerlos disponibles y así poder mostrar sucesivamente distintas frases aleatorias. Ahora para una mayor rapidez, sólo leemos el dato que necesitamos.


La segunda función (mostrarmusica) simplemente escribe lo que hemos leído con un formato absolutamente personalizable (sólo hay que ir escribiendo HTML dentro de la variable salida) y finalmente lo inserta dentro de la capa con la ID enviada desde dónde llamamos la función. En el ejemplo es videoshorarios.


Preparada la hoja y el script, nos falta hacer una llamada al feed de la hoja para leer el dato que necesitamos con leermusica, crear la capa dónde meteremos el resultado (videoshorarios) y por último ejecutar la segunda función (mostrarmusica) para efectivamente mostrarlo. Lo siguiente habría que insertarlo justo dónde queremos que se muestre el elemento programado. En este caso nuestro vídeo con sus correspondientes rótulos:

<script src="https://spreadsheets.google.com/feeds/list/KEY_ASIGNADA_AL_DOCUMENTO/od6/public/values?alt=json-in-script&callback=leermusica" type="text/javascript">
</script>
<div id="videoshorarios">
</div>
<script type="text/javascript">
mostrarmusica('videoshorarios');
</script>

Aquí lo único que hay que tener en cuenta es que la clave de la hoja de cálculo tiene que ser la misma que nos facilitó el servicio de Google al publicarla como feed tipo RSS. No hay más.


Para terminar, podemos aplicar un estilo básico (o el que queráis) para centrar el vídeo y formatear un poco el texto de los rótulos. Se puede añadir en la hoja de estilo o si lo usamos como gadget, antes del anterior entre etiquetas style:

.codigo {width: 600px; margin: 0 auto;}
.titulo {text-align: center; font-size: 20px; font-weight: bold;}
.autor {text-align: center; font-size: 16px; font-style: italic;}

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter