JMiur [E]

Es algo habitual que pregunten cuál es la forma de automatizar ciertas tareas del blog, sobre todo, aquellas cosas que son rutinarias o repetitivas; por ejemplo, escribir cierto tipo de entradas o darle forma a cierto tipo de contenido sin tener que estar escribiendo códigos extensos. No es algo que pueda ser respondido de modo genérico, las necesidades son infinitas y por lo tanto, las soluciones también.

Plugins, gadgets, no son otra cosa que fragmentos de código que hacen ese tipo de cosas, son limitados, son específicos, tienen las opciones que les otorgó quien lo desarrolló y nada más. Son útiles o inútiles, dependen de cómo los usemos. Son ... indiscutibles.

En Blogger es fácil agregarlos excepto en las entradas, allí, los gadgets no pueden usarse y para simplificar la forma en que los escribimos y automatizar las cosas, no queda más remedio que usar JavaScript que es el único lenguaje que podemos aplicar y, básicamente, siempre haremos lo mismo, usar alguna función que los lea, que interprete ciertas cosas y las cambie.

Si modificamos nuestra plantilla de tal forma de tener identificadas las entradas de manera clara con un ID:
<div class='post-body' expr:id='&quot;post-&quot; + data:post.id'>
  <p><data:post.body/></p>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>
podremos ejecutar cualquier función haciendo referencia a ese ID, transfiriéndole el contenido del post y de esa forma podremos modificarlo:
<script type='text/javascript'>mifuncion(&#39;<data:post.id/>&#39;);</script>
En este ejemplo, lo que haremos es agregar videos; la entrada dirá algo así:
<div class="mivideo" rel="youtube" id="BQpZXUGRy1U"></div>
o así:
<div class="mivideo" rel="vimeo" id="33440713"></div>
o así o todo junto:
<div class="mivideo" rel="dailymotion" id="x4v6np_89-2"></div>
Cada uno de ellos es un DIV cuyo atributo class es mivideo, donde colocamos dos atributos extras: rel indicará el tipo de servicio e id será el ID del video que es el que vemos en las páginas de esos servicios.

Si pusiéramos eso en la entrada, no veríamos nada ya que no hay contenido. Así que agregaremos el llamado a la función tal como se indicaba antes:
<script type='text/javascript'>mostrarVIDEOS(&#39;<data:post.id/>&#39;);</script>
y ahora, deberíamos crear esa función y agregarla antes de </head>:
<script type='text/javascript'>
//<![CDATA[
function mostrarVIDEOS(idPOST) {
  var divVerificar = "post-" + idPOST;
  var contenido = document.getElementById(divVerificar);
  // vamos a leer todos los divs del post
  var listaVideos = contenido.getElementsByTagName("div");
  if(listaVideos.length>0){
    for(var i=0; i<listaVideos.length; ++i) {
      // y vamos a buscar aquellos cuya clase sea mivideo
      if(listaVideos[i].className=="mivideo") {
        // si hay uno, extraemos el dato del atributo ID
        var elID = listaVideos[i].getAttribute("id");
        // extraemos el dato del atributo rel
        var elTIPO = listaVideos[i].getAttribute("rel");;
        // de acuerdo al tipo de video, armamos la dirección URL
        if(elTIPO=="youtube") {
          var laURL = "http://www.youtube.com/embed/" + elID + "?rel=0&fs=1&showsearch=0&showinfo=1";
        } else if(elTIPO=="vimeo") {
          var laURL = "http://player.vimeo.com/video/" + elID + "?portrait=0&color=ffffff";
        } else if(elTIPO=="dailymotion") {
          var laURL = "http://www.dailymotion.com/embed/video/" + elID;
        }
        // y creamos el código HTML que en este caso será una etiqueta iframe
        var salida = "<iframe width='480' height='360' marginwidth='0' marginheight='0' allowtransparency='true' align='middle' frameborder='0' scrolling='no' frameborder='0' allowfullscreen src='" + laURL + "'></iframe>";
        // y con esto, colocamos ese código HTML en el DIV que estaba vacio
        listaVideos[i].innerHTML = salida;
      }
    }
  }
}
//]]>
</script>
De ese modo, habremos insertado un video en el post y, como hemos definido todo con una clase, bastaría establecer reglas de estilo para darle forma; algo así:
<style>
  .mivideo {
    background-color: #000;
    border: 5px solid #303941;
    border-radius: 5px;
    box-shadow: 0 0 3px #FFF inset;
    display: block;
    margin: 10px auto;
    padding: 20px;
    text-align: center;
    width: 480px;
  }
</style>
Y el resultado sería el que se ve haciendo click acá.

11 comentarios:

María José Moya  

JMiur, ¿cómo se hace para que aparezcan los videos de Youtube de pocos minutos, minutados por "ventanitas"?.

Recuerdo una entrada tuya en que comentabas que Youtube lo había puesto automáticamente para los de más de 90 minutos, pero desde al menos hace unas semanas estoy viendo esto también en los de menos (que sería el caso que me interesa).

¿Quizás Youtube ha empezado a ofertar este servicio desde hace poco?.

Responder
María José Moya  

Perdón, se me olvidó comentar que mi pregunta viene por el primer video que aparece en esta entrada, de 5:28 minutos, que hace justo lo que pregunto. Un abrazo,

JMiur  

Aparentemente, esto es algo que YouTube va a agregando a su reproductor poco a poco; hasta donde sé, no hay un código específico o un parámetro especial.

María José Moya  

Pues nada, a esperar.
Un abrazo y gracias :)

Responder
Manfenix  

Post muy útil, :)
Saludos JMiur

Responder
Ejea Televisión  

Buenas!

He intentado hacer este ejemplo en mi blog, pero no se exactamente como hacerlo y como funciona.

¿Debo agregar esta linea

script type='text/javascript'>mostrarVIDEOS('');/script

y el resto

script type='text/javascript'
//0){
for(var i=0; i/iframe";
// y con esto, colocamos ese código HTML en el DIV que estaba vacio
listaVideos[i].innerHTML = salida;
}
}
}
}
//]]>
/script

antes de la etiqueta /head?, las dos cosas?

Y luego en una entrada como hago la llamada, ¿simplemente pongo esta linea

div class="mivideo" rel="youtube" id="BQpZXUGRy1U">/div>

en la entrada? creo q he hecho todo esto y no veo nada en mi entrada. Simplemente me sale vacia, no deberia aparecer el video?

He quitado algunas etiquetas para que me dejara escribir ese codigo

Gracias por tu ayuda.

Responder
Ejea Televisión  

Me he creado un blog para probarlo. http://pruebastelevisionchina.blogspot.com.es

Alli he creado 2 entradas y me da este fallo.
script type='text/javascript'>mostrarVIDEOS('TEMPLATE ERROR: No dictionary named: 'post' in: ['blog', 'skin', 'view']');</script

Me puedes echar una mano?

Gracias

JMiur  

Esta parte:

<script type='text/javascript'>mostrarVIDEOS(&#39;<data:post.id/>&#39;);</script>

no debe agregarse antes de &lt/head> sino después del DIV de los posts:

<div class='post-body' expr:id='&quot;post-&quot; + data:post.id'>
.......
</div>
<script type='text/javascript'>mostrarVIDEOS(&#39;<data:post.id/>&#39;);</script>

Ejea Televisión  

Buenas de nuevo. En el blog que me hice de prueba funciona perfectamente, pero en el que tengo que uso habitualmente sigue sin funcionar. He creado una noticia para ver que puede ser.

http://ejeatelevision.blogspot.com.es/2011/02/prueba-video.html

Un saludo y gracias por tu ayuda!

JMiur  

Eso es porque el DIV tiene un ID y el script busca otro. El ID del psot, según veo en tu ejemplo, se llama:

id='post-body-XXXXXXXXXXXXX'

así que, la primera línea del script debería cambiarse de:

var divVerificar = "post-" + idPOST;

a:

var divVerificar = "post-body-" + idPOST;

Ejea Televisión  

Muchas Gracias!!!

Eres un crack.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR