Google Docs como base de datos. Citas tecnológicas al azar | Oloblogger 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 veremo...

17 de abril de 2012

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.

Hoja de cálculo como base de datos

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.




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:

¿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
Copy URL

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

follow us in feedly

13 comentarios :

  1. Oloman, eres un monstruo! Es un tutorial de lo más interesante. Se me ocurre una aplicación muy concreta para mi blog, para organizar la imagen y enlace a posts destacados que se muestra al azar arriba a la izquierda (que ahora tengo en una lista a pelo en el script). En cuanto pueda me pongo a ello... Mil gracias por tus esfuerzos para mostrarnos la luz :D

    ResponderEliminar
    Respuestas
    1. Pues sí. Con esto podrías mantener esa lista de enlaces+imagen desde la hoja de cálculo. Más fácil... supongo.

      Eliminar
    2. Pues hoy por fin he tenido un ratito libre y me he puesto con el tema. Gracias a tus explicaciones fue muy fácil, y ahora la recomendación de posts con imagen de mi blog es más "elegante" y sobre todo fácil de mantener y modificar (aunque visualmente sea igual que antes).

      Una vez más, gracias :)

      Eliminar
    3. Eso intentaba este post, hacernos la vida más fácil con aquellos elementos que actualizamos con cierta frecuencia manualmente :)

      Eliminar
  2. Concuerdo, para enlaces de entradas al azar estaría genial, aunque para mi blog de poesía unos cuantos versos al azar serían una pasada. Me abriré un hueco para probar.

    ResponderEliminar
  3. Excelente blog, felicitaciones Oloman y muchas gracias por compartir tu conocimiento. Mira, necesito hacer una encuesta para un grupo especifico de personas y he creado un formulario a partir de una hoja de calculo de Google Docs, pero es muy básico y no puedo saber quienes ya lo han respondido y tampoco controlar que la respondan varias veces. Por favor me podrías guiar como hacer un formulario propio que obligue a "loguearse" y utilice a Google Docs como base de datos? Te agradezco la colaboración

    ResponderEliminar
    Respuestas
    1. Pues no. Eso por ahora no lo sé hacer. Cuando he tenido que montar una encuesta de ese tipo y sobre todo por lo de un usuario=un voto, no he tenido más remedio que recurrir a servicios externos que hacen eso. Una búsqueda en Google te ofrecerá varios gratuitos.

      Eliminar
  4. Buenas Oloman
    Hace ya bastante tiempo que leo tu blog si no diariamente, semanalmente y la verdad es que me encanta.
    Viniendo al tema, mas o menos estoy intentando hacer algo parecido, pro con conexion a base de datos mysql, aunque lo estoy viendo ya casi imposible y estoy a punto de darme por vencido pues de ninguna manera consigo poder conectar ya que para eso hace falta php y blogger no es que sea demasiado amigo de este lenguaje que digamos...

    Hace algun tiempo ya encontre un post que hablaba como conectar a mysql desde blogger usando un servidor de hosting externo pero la verdad es que por mas que lo intento...va a ser que no lo consigo, claro esta que tampoco es qu ssea ningun exprto en el tema de os blogs pero para lo que estoy intentando hacer lo vi lo mas comodo aunque claro esta que me equivoque xD

    He encontrado un servidor solo de bases de datos mysql, y tengo una cuenta de hosting gratuito en 00webhost qu ees lo que uso para subir los archivos php, ahora viene el quit de la cuestion...lo que intento es que desde un formulario en mi blog puedan enviar los datos a la base de datos a traves del hosting gratuito, esto mas o menos se podria hacer a traves de un fichero e configuracion alojado en el hosting, ¿pero como hago para que despues me muestre los datos que yo quiero de la basse de datos en el blog?

    la verdad es qu eesto me trae de cabeza pues si se pudiera usar base de datos mysql en blogger aunque sea a traves de un hosting con soporte php externo, serian muchas las mejoras y widgets que podria añadirle al blog y que me vendrian muy bien para este tipo de bog (es un blog para una guild de un mmorpg) como por ejemplo una pagina donde los usuarios puedan ir añadiendo los ppersonajes qe tienen dentro de la guild con sus niveles y modificarlos y demas y que despues se mostrasen en una pagina del blog

    Siento si me he extendido demasiado y si me he pasado con la explicacion, pero soy bastante malo explicandome por eso a veces me enrollo mas que una persiana xD

    Gracias por adelantado y perdon por las molestaias

    ResponderEliminar
    Respuestas
    1. El que lo siente soy yo, porque aunque te has explicado perfecta y extensamente, no te voy a poder ayudar. Como tú dices, Blogger no tiene acceso (directo) a PHP ni SQL y como yo no salgo casi nunca de aquí (me refiero a la plataforma), pues eso es una cosa que nunca me he puesto a ver. Es más, si bien tengo una ligera idea de cómo funciona PHP, con SQL la palabra ligera se queda muy larga...

      Eliminar
    2. Se agradece que al menos hayas contestado te aseguro que es mucho mas de lo que muchisima gente hace :)

      Por otro lado viendo la forma que has tenido de implementar Google Docs como base de datos con las hojas de calculo, me ha quedado un par de pequeñas dudas las cuales quizas me puedas responder, creo que si se pudiera hacer lo que voy a preguntarte ahora quizas se podrian sustituir las bases de datos MySql por hojas de calculo de Google Docs por completo e implementar un completo sistema de bases de datos para blogger asi que ahi voy...(si lo se....se me va mucho la pinza...¿pro que esperas si me paso el dia programando y cuando no es programando jugando a juegos mmorpg? xDD)

      A ver la pregunta creo que no va a ser demasiado complicada al menos eso creo..mas que nada por que me da que no se va a poder ya que va por rss aunque es probable que si que se pueda al usar jquery..en fin que n me lio mas que me pasa como siempre xD ¿Se podrian añadir datos a las hojas de calculo de Google Docs a traves de un formulario en blogger?
      En php se pueden enviar datos a bases de datos MySql sin mayor complicacion (de hecho suele ser una de las primerass cosas que se aprende con el tipico truco de "prueba-error" que hacemos todos..)

      Lo digo por que si asi fuera se podria usar Google Docs como una completa base de datos al mas puro estilo mysql pero usano como interprete para enviar datos a blogger en lugar de php. Si esto fuera asi podria servir para hacer muchisimo mas dinamico cualquier blog o al menos para cargar datos al mas puro estilo sistema de afiliados o agenda de contactos asi como infinidad de cosas.

      Si se puede hacer sabrias cual seria la manera? (con php-mysql me defiendo pero de jqury no tengo practicamente nada de idea por no decir ninguna)

      Gracias por adelantado y perdon de nuevo por las molestias.

      P.D.:Por cierto el estilo de titulos con forma de banda superpuesta plegada (tipo cinta que me entiendo mucho mejor :P ) funciona perfectamente en cualquier tipo de web hacienole tan solo unas pequeñisimas moificaciones, te lo digo por si te interesara a ti o a cualquier usuario saberlo ya que he hecho unas pruebas en una web de pruebas con la que trabajo en localhost cuando andaba trasteando con sompras interiores y exteriores en css xD

      Eliminar
    3. Si la pregunta principal es si se pueden grabar datos en las hojas de Google Docs a través de un formulario, la respuesta es sí y además es automático:
      - Formulario
      - Hoja de cálculo

      Y para contenido dinámico: Programación horaria de elementos

      No estoy seguro de si es a ese tipo de cosas a lo que te refieres...

      Y sobre lo de la cinta, cuando quieras lo puedes poner si un comentario te lo admite. O lo comentas y lo publico si es más largo. Como quieras; estamos aquí para eso ;)

      Eliminar
  5. Oloman, me encanto el post, usted me puede ayudar a hacer la base no se nada de programación. Le agradezco mucho.

    ResponderEliminar
    Respuestas
    1. Lo siento, no puedo desde aquí ir haciendo a todos cosas a medida, pero si te fijas en la última parte del post, este es sólo el último de una serie de tres. Echa un vistazo a todos y ahí encontrarás la mejor explicación que soy capaz de daros.

      Eliminar