Script para programar elementos | Oloblogger Otra petición antigua. Se trata de habilitar un sistema para mostrar una imagen distinta dependiendo...

20 de septiembre de 2010

Script para programar elementos

Otra petición antigua. Se trata de habilitar un sistema para mostrar una imagen distinta dependiendo de la hora. La única forma que conozco de hacer esto es mediante JavaScript. Es algo farragosa en cuanto a redacción de código, pero como vosotros sólo tenéis que copiar y pegar, pues eso, que lo tenéis más fácil.

Lo que hará el script en primer lugar, será ejecutar un bucle para asignar a los elementos de una matriz (array, lista de variables) con 24 elementos (24 horas) y llamada intervalos, unos valores numéricos que se corresponden con los minutos transcurridos desde la hora cero: 0, 60, 120, 180, etc.

La segunda parte es otra matriz, pero detallada elemento a elemento. Es la que contendrá los contenidos que se quieren mostrar durante cada hora del día.

La última es una función que calcula la hora en la que nos encontramos. Se ha considerado la primera hora desde el instante 0 hasta el minuto 59, por lo que el minuto 60 ya corresponde a la 01:00 a.m.

En primera instancia captura la fecha del instante en que se ejecuta la función y con ese dato extrae la hora y calcula los minutos transcurridos desde la hora 0:00. Una vez que conocemos este dato, lo comparamos con todos los que teníamos almacenados en intervalos. Cuando encontramos un número igual en uno de los elementos de ese array, el índice (i) nos da la hora en que nos encontramos. Sólo falta imprimir el dato que haya dentro de contenido[i], que es lo que pretendíamos desde el principio.

Todo esto puesto en código sería así:

<script type='text/javascript'>
//<![CDATA[
var intervalos = new Array();
var contenido = new Array();
for (i=0; i<24; i++){intervalos[i] = 60*(i);}

contenido[0]='00:00 - 01:00';
contenido[1]='01:00 - 02:00';
contenido[2]='02:00 - 03:00';
contenido[3]='03:00 - 04:00';
contenido[4]='04:00 - 05:00';
contenido[5]='05:00 - 06:00';
contenido[6]='06:00 - 07:00';
contenido[7]='07:00 - 08:00';
contenido[8]='08:00 - 09:00';
contenido[9]='09:00 - 10:00';
contenido[10]='10:00 - 11:00';
contenido[11]='11:00 - 12:00';
contenido[12]='12:00 - 13:00';
contenido[13]='13:00 - 14:00';
contenido[14]='14:00 - 15:00';
contenido[15]='15:00 - 16:00';
contenido[16]='16:00 - 17:00';
contenido[17]='17:00 - 18:00';
contenido[18]='18:00 - 19:00';
contenido[19]='19:00 - 20:00';
contenido[20]='20:00 - 21:00';
contenido[21]='21:00 - 22:00';
contenido[22]='22:00 - 23:00';
contenido[23]='23:00 - 24:00';

function muestra() {
var fecha = new Date();
var minutos = fecha.getHours()*60;
for (i=0; i<intervalos.length; i++)
{ if ( minutos<=intervalos[i])
{return i; }
}
}
//]]>
</scrip>


Este sería el resultado con lo que hemos puesto dentro de las variables del ejemplo:

Estamos en una hora comprendida entre...

Pero para ello no basta sólo con el script. La función que hay en este no se ejecuta si no se le llama desde algún sitio, por lo que hay que poner un poco de código más justo dónde queramos que aparezca el contenido de las variables de la matriz contenido.

<script type="text/javascript">
var intervalo = muestra();
document.write(contenido[intervalo]);
</script>

Si todo esto y lo anterior se coloca en un gadget, no habrá el más mínimo problema. Si el script va en la plantilla y la llamada en un gadget, tampoco. Pero si todo lo ponemos en la plantilla, entonces habrá que sustituir todas las comillas dobles de esta última parte por comillas simples.

Lo más complicado es ponerlo todo en un post para utilizarlo sólo allí. Entonces ya tendremos que sustituir las comillas simples del propio script por comillas dobles y redactarlo todo, con llamada incluida, sin ningún salto de línea. Este fichero incluye ese mismo código ya adaptado para colocar en una entrada.

Y ahora el remate. En lugar de las horas que se han puesto en el ejemplo (00:00 - 00:01, etc.) podéis poner el código de cualquier otro elemento: una imagen, un vídeo, una cita, un sonido...


Si el contenido contiene comillas como parte de su código (por ejemplo un vídeo de YouTube)
estas deberán ser las contrarias de las que tenga el script. Si por ejemplo tenemos contenido[0]='00:00 - 01:00';, habría que sustituir 00:00 - 01:00 por el código correspondiente pero teniendo cuidado de que todo él lleva comillas dobles.

Si queréis ver que hay preparado para otras horas, lo siento, pero no tendréis más remedio que volver en otro momento :D

¿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

45 comentarios :

  1. Grandiosa herramienta Oloman.

    Me imagino que puede ser util para simular algun jueguito del azar... e incluso se me ocurre que para mostrar algun mensaje para cuentas regresivas antes de alguna fecha. :D

    Me lo llevo y seguro lo uso en un par de semanas para mostrar mensajitos antes de un evento importante. :D

    Gracias Oloman.!

    ResponderEliminar
  2. Oloman, llego a ti recomendado por Gem@, y veo q tienes un fabuloso Blog al igual q ella. Tengo una inquietud, deseo hacer una tabla q se vea solo la primera o hasta la segunda fila y el resto se pueda expandir-contraer... se puede??, sabes como?? Gracias anticipadas por tu respuesta.

    Voy a ver este script si se puede hacer con videos seria fabuloso, gracias por compartir.

    ResponderEliminar
  3. Hola, ya sabes que me gusta comprobar todos los trucos y cacharritos que presentas en cada entrada, aunque en esta ocasión me perdonarás si no hago un seguimiento demasiado exhaustivo, ¿verdad? ;)

    ResponderEliminar
  4. Uuuuffff, haré un esfuerzo y lo probaré.Porque claro, este código se tiene que poner ¿en?.
    Muchas gracias Oloman.
    Saludos

    ResponderEliminar
  5. Hola. Yo soy del blog Comerciales de TV.

    Yo uso la plantilla GAMEZINE desde hace unos meses y tengo un problema. Viste como escribo los títulos? Los pongo cortos porque si los hago largos aparecen cortados. Por ejemplo: quiero poner "MURIERON 30 PERSONAS EN ESTADOS UNIDOS" y me aparece "MURIERON 30 PERSONAS EN ESTADOS" y nada mas. El título se puede ver completo cuando entro al post solamente.

    Como podria solucionar este problema? Desde ya muchas gracias!

    ResponderEliminar
  6. orale masomenos le entendi, creo que tendre que leer todo el post pa ver bien que chow...

    buen post, le voy a intentat...

    ResponderEliminar
  7. Haber tengo una idea... Como podria hacer como para poder mostrar una frase celebre cada ves que se recargue la pagina o cada un dia se cambie la frase??

    Saludos!!

    ResponderEliminar
  8. Felipe, ahí está el código y vuestra imaginación hace el resto.

    Jaime, supongo que no hay problema en hacerlo, pero haciendo realmente dos tablas y presentándolas juntas como si fueran una. Luego usas cualquier truco de plegar/desplegar. Le echo un vistazo por si no lo sacas. Y te confirmo que sí se puede hacer con vídeos. En el ejemplo de más abajo he puesto alguno.

    Chacien no hay problema :D

    Gildo, lo más fácil para probar es que lo pongas en un gadget de la barra lateral. Luego si lo quieres en otro sitio, a lo largo de la entrada se indica como hacerlo para otras opciones.

    ResponderEliminar
  9. Comerciales TV, la culpa creo que es de un overflow:hidden; que tienes en .post h2. En los siguientes selectores de h2 para enlaces lo tienes también. Lo que ocurre es que si lo quitas, un título largo te ocupará dos líneas y te descuadrará el resto del resumen, ya que parece que la plantilla fija el tamaño del recuadro de cada uno de los sumarios. Es lo normal para que se vean todos igualitos.

    MaNNiako, despacito y buena letra, que dicen en mi tierra.

    Bilosony2™, para lo primero tienes una entrada en la que ya expliqué un sistema. Para lo de una cita para cada día podrías hacerlo con este mismo script, pero habría que alterarlo para en vez de contar minutos, contar días. Veo más práctico el anterior enlace porque además ¡tendrías que crear un array de 365 variables!

    ResponderEliminar
  10. Gracias por responder Oloman, yo puedo hacer las tablas, pero ese truco de plegar/desplegar no lo se, si tienes algun tutorial tomo nota y lo estudio. Te paso la direccion para q veas q es lo q quiero hacer: http://carpenacreative.blogspot.com/

    Hay una tabla donde esta el monito, lo q quiero plegar/deplegar es desde la segunda fila, bajo los precios. Gracias de nuevo =)

    ResponderEliminar
  11. He probado la idea que te comenté y funciona, aunque no sé si exactamente como quieres.

    Mientras preparo el post con el ejemplo, este es el truco que utilicé.
    http://oloblogger.blogspot.com/2008/02/en-cualquier-parte-de-la-pgina.html

    También se puede hacer algo más sofisticado con este otro script:
    http://oloblogger.blogspot.com/2008/05/desplegar-partes-del-blog.html

    ResponderEliminar
  12. Oloman, voy a hacer una cosa a la vez, primero quiero probar el script de este post, pero al pegar el codigo grande y poner vista previa no lo acepta, dice q falta cerrar, no sera q te falta la etiqueta de cierre del script???

    ResponderEliminar
  13. Otra preguntita: Y si quiero poner en dos sitios distintos el llamado pero con contenidos distintos en cada uno, como reconoce cada llamado a su propio contenido? Y una observacion, en el codigo grande usas la palabra INTERVALOS y en el codigo chico usas INTERVALO (sin "S")... eso no afecta??

    ResponderEliminar
  14. Cierto Jaime. Faltaba el cierre. Aún así, puede que te de algún error (tag 24). Resulta que el código en un post, lo intenta interpretar Blogger con sus reglas y en un principio lo rechaza. Sólo puedes PUBLICARLO en un post pinchando en la casilla de verificación donde te muestra el error. No puedes hacer Vista Previa ni Guardar.

    Si quieres verlo pero no publicarlo en tu blog, tendrá que ser en un blog de prueba.

    Para dos contenidos "horarios" distintos en la misma página, tendrías que añadir un segundo array con esos datos a continuación del otro (por ejemplo contenidos2). Luego en la segunda llamada, se invoca a ese otro array (contenido2[intervalo]). La hora es la misma, así que lo demás no cambiaría.

    Con respecto a intervalo/intervalos, son dos variables distintas, que deben guardar datos distintos. Por eso llevan distintos nombres, para que no las confunda el intérprete.

    ResponderEliminar
  15. Yame habia olvidado que habia comentado en esta entrada. Justo al rato que hice el comentario en este post, logre hacer lo que queria que era poner algo que aga aparecer una frase celebre cada ves que recargue la pagina, ese script lo puse justo arriba del formulario de comentarios, lo podrias publicar al script esta muy bueno, puedes poner tu mismos las frases que quieras poner y no pesa nada ;)

    Lo puedes ver en mi blog funcionando donde te conte:
    PintaGraff.com

    Suerte!!!

    ResponderEliminar
  16. Magnífico aporte... hay que darle un premio a Oloman!

    ResponderEliminar
  17. Oloman, gracias por responder. Voy a ir probando todo lo q me sugieres poco a poco. Me queda pendiente lo de expandir / contraer una tabla y ver como hago para dos contenidos horarios en la misma pagina (ya me salio tu ejemplo con solo uno y va bien) pero... ahorita tengo otro dolor de cabeza... la tabla q te mostre q quiero expandir y contraer en la pagina principal de mi blog: http://carpenacreative.blogspot.com/ la acabo de poner en un post interno, tuve dos problemas: el primero q no reconoce el HTML, pero le pinche la casilla y listo, y el segundo es mas bravo aun, mira lo q pasa: http://carpenacreative.blogspot.com/2010/05/ahora-conectados-todos-los-dias-para.html

    Se lleva todo el footer hacia la derecha, y no doy cual es el chiste, agradeceria una manito de ayuda please, si?? gracias broder!!!

    ResponderEliminar
  18. Bilosony2, gracias pero ese script ya lo tenía por ahí :D

    Daniel Ruiz. Ya me lo dieron y no soy avaricioso ;)

    Jaime, es complicado desde aquí decirte exactamente qué tienes que modificar, pero la cosa es que tus capas FOOTER-WRAPPER y CREDITOS están metidos dentro de BLOG1. Esto provoca que ocupe como máximo el ancho de esa última capa.
    Deberías reestructurar el HTML para que las dos primeras queden al mismo nivel que MAIN-WRAPEER y SIDEBAR-WRAPPER. Es decir, dos niveles por encima de donde están ahora: dentro de CONTENT-WRAPPER.
    Si todo esto te suena a trabalenguas no te puedo ayudar más, porque estamos hablando de la estructura HTML de la plantilla.

    ResponderEliminar
  19. Gracias Oloman, si entiendo lo q me dices, movi las capas q me dices, pero no me funciono, asi q lo q hice fue poner la tabla en un blog auxiliar y la llevo al principal con un frame, hasta q domine mejor eso de las capas. Lo raro era q solo pasaba con el post de la tabla, todos los demas post no tenian ese problema. Gracias.

    ResponderEliminar
  20. Sí, la verdad que eso me despista. No obstante, creo que la idea que intenté transmitirte serviría para cualquier post. Puede que en las otras entradas un "error compensado" deje las cosas en su sitio. No sé.

    ResponderEliminar
  21. Con un poco mas de practica encontrare el problema, por ahora ya esta solucionado aunque de otra forma, gracias por responder Oloman.

    ResponderEliminar
  22. Hola Oloman, te escribo despues de tiempo sobre esta entrada. Yo tengo un blog al cual le he implementado este script pero para mostrar listas de reproduccion de youtube (videos) pero ahora veo q es pesado ver el mismo video si entras 4-5 o 6 veces en la misma hora. Vi q tienes otra publicacion donde se puede poner varias imagenes y cada vez q cargas el blog se visualiza una distinta al azar... pregunto: como podria hacer para combinar los dos scripts, osea q por cada hora se programe un grupo de videos y de estos escoja uno al azar... de antemano muchas gracias por tu valiosa ayuda =)

    ResponderEliminar
  23. Jaime, si necesitas este script es que quieres mostrar una cosa concreta en una hora concreta. Por lo que explicas ahora, quizás lo que te vendría mejor sería mostrar un vídeo aleatorio distinto cada vez que un usuario se conecta a tu página. Eso último lo tienes aquí: http://oloblogger.blogspot.com/2009/06/videos-aleatorios-bpt.html

    ResponderEliminar
  24. Oloman, efectivamente, este script lo uso para mostrar a cada hora algo concreto, por ejemplo a las 3pm ROCK, pero me gustaria q cada vez q recargen la pagina, no aparezca el mismo video de rock siempre sino otras alternativas aleatorias pero del mismo genero. Luego a las 4pm toca POP y lo mismo, q no siempre aparezca la misma cancion de pop sino poner otras alternativas... vamos, para q no aburra, me entiendes... osea lo q busco es la combinacion de ambos scripts. Es q estuve probando con un poco de logica (para mi q no se nada de java) y no me resulta... Mira, no lo necesito ahora mismo de vida o muerte, asi q si tu me puedes ayudar, tomate el tiempo q necesites y por ahi esto te puede servir como un excelente tutorial para todos, no solo para mi, muchas gracias por tu gentileza, se q estas muy ocupado, un abrazo!!

    ResponderEliminar
  25. Jaime, se me ocurre que podríamos usar una matriz de dos dimensiones para guardar temas por horas. Luego habría que incluir un sistema para que saliera un vídeo aleatorio escogido entre los de la misma hora. A ver si saco un rato para terminarlo, porque la verdad es que he empezado a hacerlo ;)

    ResponderEliminar
  26. Genial Oloman, estare pendiente, muchas gracias!!

    ResponderEliminar
  27. Hola!

    Lo primero, genial tu post, pero yo quisiera preguntar algo más. Quisiera saber si pudiese indicarle, además de la hora, el día de la semana para mostrar una imagen. A parte como podría hacer intervalos de 30 minutos, es decir, si yo quisiera que saliese una imagen a las xx:30, ¿que debería de modificar? y Por último, como podría poner una segunda imagen adelantanda a otra hora concreta?, esto último, como ejemplo, es lo que usan las radios con "Ahora está sonando" y "A Continuación"

    Espero que me puedan ayudar, porque llevo intenado este script aos, y no doy con ello.

    Muchas Gracias!

    Un Saludo =)

    ResponderEliminar
  28. Ruando Records, para hacerlo por períodos de 30 minutos, tendrías que cambiar esta línea...
    for (i=0; i<24; i++){intervalos[i] = 60*(i);}

    ...poniendo i<48 y cambiando 60 por 30...
    for (i=0; i<48; i++){intervalos[i] = 30*(i);}

    Así tendrías intervalos de treinta minutos, lo que haría un total de 48 al día. En consecuencia, la matriz de contenidos debería tener también 48 elementos. Es decir, seguir añadiendo valores hasta contenido[47] inclusive.

    Para lo de mostrar un contenido posterior, es tan fácil como añadir en la segunda parte de código una línea igual pero con intervalo+1. Eso sí, habría que comprobar primero que no excedamos de 47 porque el 48 no existe y en ese caso habría que pasar al primero, el cero:

    if ( intervalo>47) {intervalo=0;}
    document.write(contenido[intervalo+1]);

    ResponderEliminar
    Respuestas
    1. Hola Oloman, no molesto por aquí, pero hoy me tocó. El código me sirvió perfecto, solo que quiero pedirte un enorme favor, de acuerdo a este código ¿cómo podría programarlo con la condicional del día, es decir, rotar estas imágenes de acuerdo al día y hora?

      Eliminar
    2. Lo he enlazado al menos un par de veces en distintos comentarios de esta entrada, pero la manera con la que yo haría eso sería apoyándonos en Google Drive.

      Eliminar
  29. Hola Oloman, despues de tiempo te vuelvo a molestar para preguntarte si lograste terminar el tutorial q comentaste estabas preparando en el comentario 25, debes recordar q lo conversamos hace un par de meses... ojala hayan buenas nuevas, gracias anticipadas =)

    ResponderEliminar
  30. No Jaime, no lo he terminado. Ayer precisamente me puse a ver todas las cosas que tengo empezadas y no terminadas y sobrepasan la veintena. Lo siento. Lo único que puedo decir es que es cuestión de tiempo que lo publique.

    ResponderEliminar
    Respuestas
    1. Hola Oloman, te comenté en el post del Simple Cart por email que soy Jaime, pero logeado con otra cuenta. Te escribo aqui para recordarte de esta inquietud, es para que en cada hora se pueda poner opciones aleatorias, recuerdas q lo conversamos?? A la espera de tus indicaciones para hacer una buena web musical, gracias =)

      Eliminar
    2. Recordado queda, pero no se me había olvidado. Lo advierto siempre y lo repito. No tengo casi tiempo para nada y a duras penas contesto todos los comentarios. De hecho estoy en pleno proceso de desintoxicacíón. He dejado de beb.. Tumblr, Singenio y casi Facebook, Twitter y G+. El tiempo no estira. Si dependes de mi para arrancar tu proyecto, te sugeriría que buscaras otra fuente. Yo lo publicaré, seguro, pero no sé cuando podré.

      Eliminar
    3. Yo también quisiera desintoxicarme de todo, pero hasta con dolor de cabeza y de ojos tengo q seguir. No sé donde podría buscar algo asi, ya q el script original lo desarrollaste tú, y lo q te pedí es algo q no sé si a otro se le abrá ocurrido...asi q creo q dependo de ti para este proyecto, aunque es algo personal, ya q me encanta la música y quiero hacer algo q no he visto en la red...ire avanzando sin opciones aleatorias y en algún momento te lo mostraré, mientras tú podrias buscar un tiempito y publicarlo... gracias =)

      Eliminar
  31. Ok Oloman, q le vamos hacer...te agradezco profundamente al menos considerar mi inquietud, el tenerlo como pendiente ya es una cortesia de tu parte, esperaremos, gracias!!

    ResponderEliminar
  32. Genial, lo busqué mucho y me topé con mucha mezquindad también. Gracias por tu aporte. Ahora te consulto: Cómo se puede agregar otras funciones para que los sábados y domingos sean diferentes las imágenes que los días de semana?
    Lo quiero poner en el blog de una radio y que anuncie los programas que están al aire, con tu código lo pude lograr, pero los sábados y domingos me pone la misma programación de la semana...

    GRACIAS!

    ResponderEliminar
    Respuestas
    1. Es casi lo mismo que está esperando Jaime. De verdad que es una de las cosas que no se me va a olvidar hacer, pero otras cosas copan mi tiempo. Algún día seguro que lo publico...

      Eliminar
  33. Con bastantes meses de retraso, pero aquí tenéis una programación de elementos más versátil.

    ResponderEliminar
  34. hola oloman, mira tengo un problema, soy estudiante de comunicacion social y tengo poco conocimiento de html, estoy en plena tesis y estoy haciendo una web de una radio universitaria, me exigen que en el home ponga una imagen acorde al programa que estan pasando en vivo... hasta ahi suena muy facil (para mi no) el problema empieza un poco mas ak y es que todos los dias hay una programacion diferente es decir
    los dias lunes una, martes otra, miercoles otra jueves otra etc etc...

    si no soluciono eso no me graduo y me da rabia que no tengo dinero y que por algo que no me corrresponde a mi mi tutor quiera no aprovar mi tesis..

    asi que si me pueden ayudar necesito algo basico que sea mas o menos asi


    lunes
    de 6 a 8:00 imagen 1.jpg
    de 8 a 9:30 imagen 2.jpg
    de 9:30 a 10 imagen 3.jpg
    etc
    etc

    martes
    de 6 a 8:30 imagen 1.jpg
    de 8:30 a 9:30 imagen 2.jpg
    de 9:30 a 10 imagen 3.jpg
    etc
    etc

    miercoles
    de 6 a 8:00 imagen 1.jpg
    de 8 a 9:30 imagen 2.jpg
    de 9:30 a 11 imagen 3.jpg
    etc
    etc


    asi todo los dias con diferentes horarios

    ResponderEliminar
    Respuestas
    1. A ver qué tal con esta variante que permite más horarios e incluso programación diaria distinta:

      http://www.oloblogger.com/2012/05/programacion-horaria-de-elementos-con.html

      Eliminar
  35. Hola, mil gracias por el post esta genial, uso muchos trucos de aquí, soy psicólogo y estoy creando un proyecto para poner cartas de motivación cada día por un mes, ¿podrías decirme por favor como tendría que cambiar la variable de minutos para que que sea por día por un mes? te lo agradecería mucho, mi pagina es www.psi-tec.com gracias.

    ResponderEliminar
    Respuestas
    1. Lo de programar por días ya tiene alguna dificultad añadida, pues por ejemplo, ya sabes que no todos los meses tienen la misma cantidad de días.
      Esto me lo apunto para desarrollarlo en otro post, pues no es sencillo que te explique qué cambiar con respecto al código de esta entrada.

      Eliminar
    2. Mientras tanto en este enlace tienes una manera sencilla de hacerlo ;)

      Eliminar
    3. ok, mil gracias y muchos saludos :)

      Eliminar