Del dicho al hecho

poema
Foto: Herbert Spencer

Dado que en mi anterior post han surgido un puñado de buenas citas, hoy voy a contar cómo hacer un script para generar una cada vez que se recargue nuestro blog. De esta forma siempre sorprenderéis a los visitantes con una frase diferente.

Para ello basta con copiar el siguiente código en el lugar donde queráis que aparezca la cita (yo, por ejemplo, la tengo en la cabecera, inmediatamente debajo de mi título):

<script language=”JavaScript”>

citas = new Array(4)
citas[0] = “Eres dueño de tus silencios y esclavo de tus palabras – Proverbio Árabe”
citas[1] = “Nuestro conocimiento es necesariamente finito, mientras que nuestra ignorancia es necesariamente infinita – Karl Raimund Popper”
citas[2] = “El silencio es el elemento en el cual se forman las más grandes cosas – Carlyle”
citas[3] = “A los silenciosos no se les puede quitar la palabra – Stanislaw JERZY LEC”

aleatorio = Math.random() * (citas.length)
aleatorio = Math.floor(aleatorio)
document.write(citas[aleatorio])

</script>

El funcionamiento es sencillo. Tenemos una colección de frases metidas en un array. Para los no informáticos, un array es algo así como un armario con cajones numerados del 0 al número de elementos menos 1. Es decir, si tenemos 4 citas, las metemos en los cajones 0, 1, 2 y 3.

Luego generamos un número aleatorio con la función random() para decidir qué cajón abrir. De esta forma, cada vez que alguien entre en nuestro blog, se generará un número diferente y abriremos por tanto un cajón diferente.

Si no sabéis citas o no os acordáis de alguna, existe una rama de la fundación Wikimedia denominada Wikiquote que recopila un gran número de frases, proverbios, dichos, …

Related Posts Plugin for WordPress, Blogger...

Lorena Fernández

Por el día, directora de identidad digital en la Universidad de Deusto. Por la noche, rompiendo techos de cristal en Doce Miradas. Y como dormir está sobrevalorado, colaboro en Radio Bilbao en la sección "De las ondas a la red" del programa Hoy por Hoy Bilbao. Puedes saber más de mí o echar un vistazo a mis publicaciones, cursos y participación en congresos.

25 thoughts on “Del dicho al hecho

  1. Un par de preguntillas…

    Justo detrás de Array(4); ese número se ha de cambiar por el número de cajas que contenga el array??

    Y la otra, para dar formato a las citas, ¿Cómo se hace?

    Un saludo

  2. Quizá:


    var citas = new Array();

    citas.push(“cita1”);
    citas.push(“cita2”);
    citas.push(“cita3”);

    //el resto igual

    pueda ser mejor de cara a añadir, borrar etc, sin andar Array(número), y luego [numero]. No es la gran mejora del día… pero eso 🙂

  3. HOla
    un regalo!
    El hombre es mortal por sus temores e inmortal por sus deseos (Pitágoras)
    Algunos el nombre les suena a clase de geometría
    Eso a mí
    me suena
    a ironía

    SeNtiR El gOlpe
    y EscuPir los dieNtes
    sueltos

    Que siemPre SalDrán unOs nuevos!
    poNlos en tu cabeza
    y
    pide
    un deseo.
    Uno secreto.

  4. El post me pareció tan interesante que lo voy a poner en práctica, además le envié el link a una amiga que tiene un blog donde ayuda a otros bloggers a mejorar sus espacios.

    Gracias por el dato.

  5. @burgales: el número de después de la palabra Array contiene el número de citas que vas a mostrar. No te entiendo con lo de dar formato a las citas 🙁

    @anónimo: genial aporte!!. Muchas gracias, no conocía el método push

    @david hormazabal: gracias por los regalitos 😉

  6. ME refería, para que salgan en una especie de cuadrito, es decir, que se integre con el diseño del blog, que no símplemente sea un texto que se muestre. Que sea algo tipo lo que tienes tú, sale en una barra totalmente integrada en el blog, con una letra distinta etc…

    Tendría que tocar algo del CSS o por HTML…??

    Es que tengo poca idea de eso..soy casi novato.. jeje

  7. Mola mazo!
    Pero quiero más:
    Quiero esto mismo pero con imágenes.
    Es decir, que al refrescar salga una imagen aleatoria. ¿Pido demasiado?
    Ya sabes, ofreces la mano y te cogen el brazo. 🙂

  8. Este comentario responde tanto a la pregunta de burgales como a Ignazio.

    La última sentencia del script (document.write(citas[aleatorio])) hace lo siguiente: document.write escribe en código html lo que le pases como argumento. Por tanto, si le pasas citas[aleatorio] escribe la cita que esté en esa posición pero si le pasas “<b>” + citas[aleatorio] + “</b>”, pondrá la cita en negrita.

    Por eso, si lo que queremos es una imagen aleatoria, tendremos que poner las urls de las distintas imágenes en el Array y luego poner la última sentencia así:

    document.write(“<img src=”+imagen[aleatorio]+”/>”)

  9. Y para darle un colorcito naranja como lo puedo hacer?

    Y para centrarlo dentro del ancho de la web?

    Un saludo, y gracias de antemano.

  10. @burgales:

    document.write(“<center><font color=#FF6600>” + citas[aleatorio] + “</font></center>”)

  11. hola, me parece interesante este script pero quesiera saber si tambien se puede hacer con imagenes o fotos, que cambien al momento de dar refresh a la pagina.

    saludos

  12. @harden: claro que se puede. Es tan sencillo como cambiar las frases por el código html que se usa para poner una imagen. Fácil y sencillo 😉

  13. ¿Funciona para WordPress.com?

    Es que lo puesto en un cuadro de texto en la columna lateral y me aparece el código completo ¿Debo cambiarle algo?

  14. @débora: ¿cuál es tu blog? Así puedo ver si lo has puesto bien. Entiendo que sí debería funcionarte porque en los cuadros de texto de wordpress te permite introducir javascript.

  15. Gracias por responder.

    La dirección del blog la enlazo a mi nombre. Al final de la columna derecha.

    Yo lo escribo completo pero en la columna aparece cortado.

  16. Me las quita.

    Tengo desactivada laopción “corregir de forma automática el HTML incorrectamente anidado”

    ¿No sé si tenga que ver?

  17. @Débora: efectivamente se come las etiquetas script. Mucho me temo que si no tienes acceso a la edición de tu plantilla no podrás usarlo con wordpress.com

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *