Google Docs como base de datos. Citas tecnológicas al azar

Como seguro que para algunos me enrollé de más en las anteriores entradas y lo que queréis es menos explicación y más acción, en esta veremos el código completo del ejemplo de frases tecno-informáticas aleatorias que construimos anteriormente. Prácticamente para sólo copiar y pegar.

De todas formas, esto sólo os permitirá ver resultados de mi lista y sacar los datos cómo propuse. Si queréis hacer la vuestra o sacar los datos de otra forma, no os va a quedar más remedio que leer el tutorial completo siguiendo los enlaces que podéis encontrar al final.

Vamos a tomar primero la opción más fácil que es la de incluir el código como gadget HTML/JavaScript. Como anuncié, aquí va el código que vimos en las otras entradas pero todo seguidito, así que sólo tenéis que añadir un gadget nuevo y pegar esto.

<style type="text/css">
.frase { display:block; border: 1px solid #666666; background: white; padding: 10px; color: #333333; font-family: Courier, "Courier New", monospace; }
.autor { color: #90000; font-weight: bold; }
.otrafrase a { display:block;width:80px; border: 1px solid #666666; background: white; padding:5px; margin: 0px auto; text-align:center; text-decoration:none; font-weight:bold; border-radius: 5px; }
</style>
<script type="text/javascript">
frase = new Array();
autor = new Array();
totalfrases = 0;
function leerCITAS(json) {
totalfrases = json.feed.entry.length;
for(i=0; i<totalfrases; i++) {
frase[i] = json.feed.entry[i].gsx$citas.$t;
autor[i] = json.feed.entry[i].gsx$autores.$t;
}
}
function mostrarCITAS(donde) {
var salida = "";
var max = totalfrases-1;
var alea = Math.round(Math.random()*max);
var cual = alea;
salida += "<span class='frase'>";
salida += frase[cual];
salida += " ";
salida += "<span class='autor'>"+autor[cual]+"</span>";
salida += "</span'>";
document.getElementById(donde).innerHTML = salida;
}
</script>

<script src="http://spreadsheets.google.com/feeds/list/0AtzEI6cl1Hv6dG9wMHpqcVdqbzJhZjlWQ1VScXFVSmc/od6/public/values?alt=json-in-script&amp;callback=leerCITAS" type="text/javascript">
</script>
<div id="frasesaleatorias"></div>
<script type="text/javascript">mostrarCITAS('frasesaleatorias');</script>
<p class="otrafrase">
<a href="javascript:mostrarCITAS('frasesaleatorias');">Ver otra frase</a>
</p>

Cambiando la primera parte (estilo) podéis personalizar el formato de salida. Aquí tenéis ese mismo código en un fichero .txt


Como gadget podréis ponerlo en la barra lateral, en la cabecera, encima de las entradas, bajo estas, en el footer... Pero si queréis meterlo en el cuerpo de las entradas esto ya requiere hacerlo por partes.

Para este caso mejor grabamos la parte de estilo y el script hasta el salto de línea en la plantilla, antes de </head>, sustituyendo previamente (para Blogger) todas las comillas dobles por simples y viceversa. Luego, la segunda parte tras el salto se inserta en la parte de la entrada que gusteis (también intercambiando las comillas).


Pero para las entradas, mejor todavía podemos incluir el estilo en la parte CSS (ya sin la apertura y cierre STYLE), alojar el script en otro sitio, añadir delane una llamada a ese alojamiento externo e incluir todo dónde queramos mostrar las citas. Yo lo he alojado en Dropbox y he cambiado las comillas, así que a falta de que le deis estilo, esto sería lo único que habría que insertar:

<script src='https://googledrive.com/host/0B3b6MFUtZc42Tm5ldi1jZTFMdGM' type='text/javascript'/>
<script src='http://spreadsheets.google.com/feeds/list/0AtzEI6cl1Hv6dG9wMHpqcVdqbzJhZjlWQ1VScXFVSmc/od6/public/values?alt=json-in-script&callback=leerCITAS' type='text/javascript'>
</script>
<div id='frasesaleatorias'/>
<script type='text/javascript'>mostrarCITAS(&quot;frasesaleatorias&quot;);</script>
<p class='otrafrase'>
<a href='javascript:mostrarCITAS(&quot;frasesaleatorias&quot;);'>Ver otra frase</a>
</p>

Y si esto anterior todavía no os parece suficientemente fácil, pues pulsáis este botón, aceptais la instalación y luego sólo os resta cambiarlo de sitio desde Diseño arrastrando y soltando dónde queráis dejarlo.

<style type="text/css">.frase {font-size:90%; font-style:italic;} .autor {font-style:normal;}</style><script src="https://googledrive.com/host/0B3b6MFUtZc42Tm5ldi1jZTFMdGM" type="text/javascript"></script><script src="http://spreadsheets.google.com/feeds/list/0AtzEI6cl1Hv6dG9wMHpqcVdqbzJhZjlWQ1VScXFVSmc/od6/public/values?alt=json-in-script&callback=leerCITAS" type="text/javascript"></script><div id="frasesaleatorias">.</div><script type="text/javascript">mostrarCITAS('frasesaleatorias');</script><div style="text-align:right;font-size:70%;"><a href="http://www.oloblogger.com/2012/04/google-docs-como-base-de-datos-citas.html">Get this</a></div>

Pero en fin, si habéis aprovechado la clase, vosotros mismos podréis hacer otras cosas. Aquí tengo otro ejemplo muy parecido en el cual a partir de una hoja con cuatro columnas, aleatoriamente se escoge una frase de cada columna para formar bonitas frases demagógicas. Un artilugio que sin duda haría las delicias de cualquier aspirante a político.

Generar otra frase demagógica

Esta es la hoja de cálculo correspondiente y lo siguiente el código por si a alguien le interesa:

<script type="text/javascript">
frase1 = new Array();
frase2 = new Array();
frase3 = new Array();
frase4 = new Array();
totalfrases = 0;
function leerFRASES(json) {
totalfrases = json.feed.entry.length;
for(i=0; i<totalfrases; i++) {
frase1[i] = json.feed.entry[i].gsx$frase1.$t;
frase2[i] = json.feed.entry[i].gsx$frase2.$t;
frase3[i] = json.feed.entry[i].gsx$frase3.$t;
frase4[i] = json.feed.entry[i].gsx$frase4.$t;
}
}
function mostrarFRASES(donde) {
var salida = "";
var max = totalfrases-1;
salida += "<span class='frase'>";
salida += frase1[Math.round(Math.random()*max)] + " ";
salida += frase2[Math.round(Math.random()*max)] + " ";
salida += frase3[Math.round(Math.random()*max)] + " ";
salida += frase4[Math.round(Math.random()*max)];
salida += "</span'>";
document.getElementById(donde).innerHTML = salida;
}
</script>

<script type="text/javascript" src="http://spreadsheets.google.com/feeds/list/0AtzEI6cl1Hv6dG8zbmtSY2MwdV85emRVcW9QN1hBRWc/od6/public/values?alt=json-in-script&amp;callback=leerFRASES"></script><blockquote id="demagogia" style="text-align:justify;"></blockquote><script type="text/javascript">mostrarFRASES('demagogia');</script><a href="javascript:mostrarFRASES('demagogia')">Generar otra frase demagógica</a>

Parece una tontería, que lo es, pero con esas catorce filas y cuatro columnas, se pueden generar más de 38.000 frases distintas.

Tutorial completo:

• Google Docs como base de datos. Preparar hoja de cálculo
• Google Docs como base de datos. Leer y mostrar con JavaScript
• Google Docs como base de datos. Frases tecnológicas aleatorias

¿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