Mi laboratorio de pruebas

29/11/2009

Haciendo Zoom a nuestras imagenes

FancyZoom es una herramienta con la cual podemos hacerle Zoom a las imágenes colocadas en nuestro blog o página web. Trabaja con los formatos de imágenes JPG, PNG, GIF, TIFF y BMP. Su instalación es bastante sencilla y de seguidas con el paso a paso:

Descargamos FancyZoom 1.1.
Descomprimimos el archivo zip donde viene FancyZoom 1.1.
Encontraremos dos archivos que son los que necesitaremos para la aplicación del efecto: FancyZoom.js y FancyZoomHTML.js
Luego subimos, al hosting que utilizemos, dichos archivos para así poder obtener una dirección (URL), de cada uno de ellos, pues las necesitaremos más adelante.
Luego vamos a insertar, el siguiente código, justo sobre </head>

<script src="http://sites.google.com/site/venezuelansite/archivosjs/FancyZoom.js" type="text/javascript"></script>

<script src="http://sites.google.com/site/venezuelansite/archivosjs/FancyZoomHTML.js" type="text/javascript"></script>

Seguido a éste paso, colocaremos entonces el siguiente código sobre </body>

<body onload="setupZoom();">

Con este último paso concluímos con la instalación de la aplicación de FancyZoom en nuestro blog. Sólo nos queda, para implementar el efecto en las imágenes colocadas en el blog y las que colocaremos el siguiente código, el cual, para tenerlo siempre a mano, lo colocaremos en la plantilla de entrada.

<a href="image.jpg"><img src="image-thumbnail.jpg" /></a>

A continuación una demostración del efecto:

Espero les sea de utilidad.

26/11/2009

Como colocar una "Lluvia de Estrellas" en el blog.

Este es un muy bonito efecto para implementar en el blog ahora que estamos en vispera de navidad. Su implementación es muy sencilla, sólo tiene que colocar el código que se te mostrará a continuación como un elemento HTML/Javascript en la sidebar de tu blog, guardar los cambios y posteriormente arrastrar esa sección hasta el final de la sidebar.

<marquee behavior="scroll" direction="down" scrollamount="3" style="border: 0px none; height: 701px; left: 284px; margin: 0px; padding: 0px; position: absolute; top: 15px; width: auto; z-index: 1;"><img src="http://jtpinto51.googlepages.com/STAR_LIGHTER.gif" /></marquee><marquee behavior="scroll" direction="down" scrollamount="3" style="border: 0px none; height: 141px; left: 68px; margin: 0px; padding: 0px; position: absolute; top: 99px; width: auto; z-index: 1;"><img src="http://jtpinto51.googlepages.com/STAR_LIGHTER.gif" /></marquee><marquee behavior="scroll" direction="down" scrollamount="3" style="border: 0px none; height: 591px; left: 846px; margin: 0px; padding: 0px; position: absolute; top: 62px; width: auto; z-index: 1;"><img src="http://jtpinto51.googlepages.com/STAR_LIGHTER.gif" /></marquee><marquee behavior="scroll" direction="down" scrollamount="1" style="border: 0px none; height: 421px; left: 873px; margin: 0px; padding: 0px; position: absolute; top: 29px; width: auto; z-index: 1;"><img src="http://jtpinto51.googlepages.com/STAR_LIGHTER.gif" /></marquee><marquee behavior="scroll" direction="down" scrollamount="5" style="border: 0px none; height: 556px; left: 291px; margin: 0px; padding: 0px; position: absolute; top: 76px; width: auto; z-index: 1;"><img src="http://jtpinto51.googlepages.com/STAR_LIGHTER.gif" /></marquee><marquee behavior="scroll" direction="down" scrollamount="5" style="border: 0px none; height: 351px; left: 816px; margin: 0px; padding: 0px; position: absolute; top: 6px; width: auto; z-index: 1;"><img src="http://jtpinto51.googlepages.com/STAR_LIGHTER.gif" /></marquee><marquee behavior="scroll" direction="down" scrollamount="3" style="border: 0px none; height: 398px; left: 604px; margin: 0px; padding: 0px; position: absolute; top: 78px; width: auto; z-index: 1;"><img src="http://jtpinto51.googlepages.com/STAR_LIGHTER.gif" /></marquee><marquee behavior="scroll" direction="down" scrollamount="2" style="border: 0px none; height: 600px; left: 720px; margin: 0px; padding: 0px; position: absolute; top: 115px; width: auto; z-index: 1;"><img src="http://jtpinto51.googlepages.com/STAR_LIGHTER.gif" /></marquee><marquee behavior="scroll" direction="down" scrollamount="6" style="border: 0px none; height: 54px; left: 237px; margin: 0px; padding: 0px; position: absolute; top: 45px; width: auto; z-index: 1;"><img src="http://jtpinto51.googlepages.com/STAR_LIGHTER.gif" /></marquee><marquee behavior="scroll" direction="down" scrollamount="5" style="border: 0px none; height: 651px; left: 242px; margin: 0px; padding: 0px; position: absolute; top: 107px; width: auto; z-index: 1;"><img src="http://jtpinto51.googlepages.com/STAR_LIGHTER.gif" /></marquee><marquee behavior="scroll" direction="down" scrollamount="4" style="border: 0px none; height: 138px; left: 841px; margin: 0px; padding: 0px; position: absolute; top: 18px; width: auto; z-index: 1;"><img src="http://jtpinto51.googlepages.com/STAR_LIGHTER.gif" /></marquee><marquee behavior="scroll" direction="down" scrollamount="1" style="border: 0px none; height: 624px; left: 108px; margin: 0px; padding: 0px; position: absolute; top: 10px; width: auto; z-index: 1;"><img src="http://jtpinto51.googlepages.com/STAR_LIGHTER.gif" /></marquee><marquee behavior="scroll" direction="down" scrollamount="5" style="border: 0px none; height: 784px; left: 638px; margin: 0px; padding: 0px; position: absolute; top: 23px; width: auto; z-index: 1;"><img src="http://jtpinto51.googlepages.com/STAR_LIGHTER.gif" /></marquee><marquee behavior="scroll" direction="down" scrollamount="2" style="border: 0px none; height: 305px; left: 737px; margin: 0px; padding: 0px; position: absolute; top: 73px; width: auto; z-index: 1;"><img src="http://jtpinto51.googlepages.com/STAR_LIGHTER.gif" /></marquee><marquee behavior="scroll" direction="down" scrollamount="" style="border: 0px none; height: 250px; left: 288px; margin: 0px; padding: 0px; position: absolute; top: 16px; width: auto; z-index: 1;"><img src="http://jtpinto51.googlepages.com/STAR_LIGHTER.gif" /></marquee><marquee behavior="scroll" direction="down" scrollamount="3" style="border: 0px none; height: 139px; left: 720px; margin: 0px; padding: 0px; position: absolute; top: 57px; width: auto; z-index: 1;"><img src="http://jtpinto51.googlepages.com/STAR_LIGHTER.gif" /></marquee><marquee behavior="scroll" direction="down" scrollamount="2" style="border: 0px none; height: 539px; left: 524px; margin: 0px; padding: 0px; position: absolute; width: auto; z-index: 1;"><img src="http://jtpinto51.googlepages.com/STAR_LIGHTER.gif" /></marquee><marquee behavior="scroll" direction="down" scrollamount="5" style="border: 0px none; height: 337px; left: 637px; margin: 0px; padding: 0px; position: absolute; top: 65px; width: auto; z-index: 1;"><img src="http://jtpinto51.googlepages.com/STAR_LIGHTER.gif" /></marquee><marquee behavior="scroll" direction="down" scrollamount="3" style="border: 0px none; height: 281px; left: 757px; margin: 0px; padding: 0px; position: absolute; top: 104px; width: auto; z-index: 1;"><img src="http://jtpinto51.googlepages.com/STAR_LIGHTER.gif" /></marquee><marquee behavior="scroll" direction="down" scrollamount="2" style="border: 0px none; height: 50px; left: 829px; margin: 0px; padding: 0px; position: absolute; top: 80px; width: auto; z-index: 1;"><img src="http://jtpinto51.googlepages.com/STAR_LIGHTER.gif" /></marquee><marquee behavior="scroll" direction="down" scrollamount="2" style="border: 0px none; height: 136px; left: 878px; margin: 0px; padding: 0px; position: absolute; top: 5px; width: auto; z-index: 1;"><img src="http://jtpinto51.googlepages.com/STAR_LIGHTER.gif" /></marquee><a href="http://milaboratoriodepruebas.com/" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 1px double rgb(0, 173, 239); color: navy; font-family: tahoma; font-size: 11px; padding: 1px; text-decoration: none;" target="_blank"></a>

El efecto puedes visualizarlo en esta DEMO.

25/11/2009

Como saber que libreria usa un blog

Muchas veces hemos visto efectos en páginas web o blog que nos dejan impresionados. Esos efectos vienen dados por las librerías usadas en dichas página. Entre estas librerías tenemos: MooTools, jQuery, Prototype, Script.aculo.us, Dojo, etc. Pero... como saber, en ese momento, que librería es. La solución está a la mano: WTFramework, aplicación, que a través de un bookmarklet podemos tenerla a mano en nuestra barra de herramientas. Sólo con hacer click sobre WTFramework nos aparecerá, de manera inmediata, un recuadro en la parte superior derecha del navegador, con los datos de la librería utilizada como pueden apreciar en la imágen siguiente.

Enlace: WTFramework

De esta manera ya sabremos que librería utilizar para implementar ese bonito efecto en nuestro blog o página web.

Generar audio en el blog

Considero que generar un audio en el blog es una gran ayuda para las personas con deficiencias visuales o para aquellas que, lamentablemente, han perdido la capacidad visual de manera traumática o congénita. SonoWeb, componente con el que se proporciona voz propia a cualquier noticia escrita en una Web o un Blog (sic), nos da la solución. Podemos escoger entre seis colores que nos presentan según el color predominante de nuestro sitio web o blog, esto en la línea de reproductores. También se tiene la línea de imágenes o enlace de texto. Podemos además alinearlos de forma horizontal o vertical. Por último les comentaré, que podemos agregar un lector de noticias (RSS/Feed), bien sea externo (Feedburner) o Blogger por defecto. Puede usarse tambien en WordPress mediante el suministro de un plugin., mientras que en Blogger mediante la implementación de un código que nos suministra el propio SonoWeb. Con SonoWeb podemos lograr que esas discapacidades visuales ya no sean un impedimento a la hora de leer noticia o informaciones que se publican en páginas web o blogs.