viernes, 20 de febrero de 2009

Insertar videos de YouTube con sencillez - Vagabundia


YouTube Embed Magic Tool puede ser útil para quienes quieren evitarse el trabajo de escribir el código necesario cuando se quiere incrustar un video de YouTube haciendo uso de todas las opciones disponibles.

Entramos, colocamos la URL de tipo:

http://www.youtube.com/watch?v=XXXXXXXXXX

seleccionamos ancho y alto y OK, nos dará el código a insertar donde ya estará incluido el uso de HD (alta definición).

Yo diría que es innecesario y que el código generado sigue siendo no válido ya que se insiste en el uso de la etiqueta EMBED pero, algo es algo.

Mucho más sencillo es tener el código en algún borrador y copiarlo cada vez que queremos usarlo:

<div style="text-align:center;"><object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/XXXXXXXXXX&hl=es&fs=1&rel=0&autoplay=0&ap=%2526fmt%3D18&showsearch=0&showinfo=0" /><param name="allowFullScreen" value="true" /><param name="movie" value="http://www.youtube.com/v/XXXXXXXXXX&hl=es&fs=1&rel=0&autoplay=0&ap=%2526fmt%3D18&showsearch=0&showinfo=0" /></object></div>

¿Demasiado trabajo? ¿Queremos simplificar las cosas aún más? Usemos JavaScript y creemos una función que inserte los videos de YouTube de manera más automática. Este es el código de un ejemplo simplificado que insertamos antes de </head>:

<script type='text/javascript'>
//<![CDATA[
function insertar_YouTube(IDyoutube) {
var output = "<div style=\"text-align:center;\">";
output += "<object width=\"425\" height=\"350\" id=\"movie\" type=\"application/x-shockwave-flash\" data=\"http://www.youtube.com/v/" + IDyoutube + "&hl=es&fs=1&rel=0&autoplay=0&ap=%2526fmt%3D18&showsearch=0&showinfo=0\">";
output += "<param name=\"movie\" value=\"http://www.youtube.com/v/" + IDyoutube + "&hl=es&fs=1&rel=0&autoplay=0&ap=%2526fmt%3D18&showsearch=0&showinfo=0\" />";
output += "<param name=\"wmode\" value=\"transparent\" />";
output += "<param name=\"allowfullscreen\" value=\"true\" />";
output += "</object>";
output += "</div>";
document.write (output);
}
//]]>
</script>

¿Y para qué serviría? Bastaría insertar esto en un post:

<script>insertar_YouTube("XXXXXXXXXXX");</script>

cambiando las XXXXXXXXXXX por el ID del video.

Por ejemplo si quisiéramos insertar este video:

http://www.youtube.com/watch?v=lhqr-P2O0XI

escribiríamos esto:

<script>insertar_YouTube("lhqr-P2O0XI");</script>




















TABLA - FUENTES - FONTS


SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








free counters


Disculpen las Molestias




TABLA - INFORMÁTICA - UTILIDADES

martes, 10 de febrero de 2009

FanzyZoom: Ventanas modales sencillas - Vagabundia


FanzyZoom es una variante simplificada de los scripts que permiten mostrar contenido en ventanas modales. A diferencia de otras, no sólo es extremadamente simple sino que se basa pura y exclusivamente en ocultar y mostrar elementos por lo que lo que su uso es compatible con otros scripts.




La única condición para utilizarlo es que tengamos Prototype y Scriptaculous, dos librerías que podemos agregar con facilidad desde Google API.



Aunque el código y los ejemplos avanzados pueden verse en Github, veamos la forma de usarla en Blogger.




Para hacerlo fácil, este ZIP contiene el script y las imágenes que utiliza que ya han sido alojadas en ImageShack. Si queremos cambiarlas o realojarlas, deberemos editar el archivo JS. Una vez descomprimido, lo alojamos en un servidor y lo agregamos a la plantilla, antes de </head>:
<script type="text/javascript" src="URL_fancyzoom.js"></script>
Aunque tiene muchas formas de personalizarse, lo más sencillos es agregar esto inmediatamente después:
<script type="text/javascript" charset="utf-8">

$(document).observe('dom:loaded', function() {
$$("div.photo a").each(function(el) { new FancyZoom(el); })
new FancyZoom('medium_box_link', {width:400, height:300});
new FancyZoom('large_box_link');
new FancyZoom('flash_box_link');
});
</script>

De esa manera, definimos los tamaños por defecto de las distintas ventanas y establecemos una clase photo para asociarla.



Hecho eso, podremos aplicar el script a cualquier DIV, ya sea que contenga textos, imágenes e incluso contenido de Flash.




Este, sería el código de un ejemplo con imágenes:
<div id="ejemplo">
<div class="photo">
<a href="#nombreID_1"><img src="URL_miniatura1" /></a>
</div>

<div class="photo">
<a href="#nombreID_2"><img src="URL_miniatura2" /></a>
</div>
<div id="nombreID_1"><img src="URL_imagen1" /></div>

<div id="nombreID_2"><img src="URL_imagen2" />
<p id="nombreID_2_caption">el texto a mostrar optativo</p>
</div>
</div>

Algo similar podemos hacer para mostrar textos:
<div id="otroEjemplo">

<a href="#medium_box" id="medium_box_link">Modelo Medium Box</a>
<a href="#large_box" id="large_box_link">Modelo Large Box</a>
<div id="medium_box">

....... el contenido .......
</div>
<div id="large_box">
....... el contenido .......
</div>
</div>

Y para abrir archivos SWF:
<a href="#flash_box" id ="flash_box_link">ABRIR ARCHIVO SWF</a>

<div id="ultimoEjemplo">
<div id="flash_box">
<object width="ancho" height="alto" id="movie" type="application/x-shockwave-flash" data="URL_archivo.swf">
<param name="movie" value="URL_archivo.swf" />

<param name="wmode" value="transparent" />
<param name="allowfullscreen" value="true"/>
<param name="allowScriptAccess" value="always" />
</object>
</div>
</div>

ACTUALIZACIÓN:



Como parece que el script, a veces, suele causar conflictos con Internet Explorer, he decidido sacar los ejemplos del post.




Este script tiene también una alternativa que descubrió Gem@ y los detalles de su uso pueden verse en esta página.



















TABLA - FUENTES - FONTS


SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








free counters


Disculpen las Molestias




TABLA - INFORMÁTICA - UTILIDADES

Correo Vaishnava