noviembre 29, 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.



noviembre 26, 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.



noviembre 25, 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.







Enlace: SonoWeb



Espero que ésta información les sea de utilidad.


noviembre 24, 2009

Como colocar un Tooltip a una imagen

Para comenzar vamos con el concepto de tooltip . Para su implementación en una imágen sólo debemos utilizar el siguiente código:


<img src="URL de la imagen" title="texto a salir en la imagen"/>


Este es un ejemplo: (Coloca el cursor sobre la imágen)









noviembre 22, 2009

Gee Mail





Adobe Air es una tecnología que permite la creación de aplicaciones de escritorio a partir de tecnologías de desarrollo de páginas web (HTML, Flash o Ajax), siendo su distribución gratuíta como también los programas generados en Adobe Air

Con lo anterior dicho, queremos decir que Gee Mail es una aplicación de escritorio gratuíta, hecha en Adobe Air  que nos simplifica la tarea de enviar o leer nuestros correos cuando Internet está caído, ya que no lo necesita para funcionar. Su rapidéz es excepcional, pudiendo bajar, considerablemente, una cantidad de emails en pocos minutos. El aspecto de ésta aplicación es muy parecida a la de GMail y es una alternativa cuando la conexión a Internet es muy inestable. Para utilizar esta aplicación sólo tienes que ingresar a Adobe MarketPlace y descargarla haciendo click sobre la imágen.



noviembre 19, 2009

Formulario de Contacto.

Los formularios de contacto son formas que se utilizan para comunicarse, en los blogs o web, con el administrador(es) del mismo. Existen muchos sitios que de manera gratuíta, nos permiten elaborar dichos formularios, proporcionándonos a la vez, un código para implementarlo en nuestras páginas. Hurgando en la web, como de costumbre, me topé con SayToMe, servicio web que permite la creación de estos formularios de contacto. Dentro de los atributos de ésta herramienta está el que evita el spam y correos no deseados, ya que tu e-mail permanecerá siempre oculto, llegándote los mensajes a travé de SayToMe. La elaboración de estos formularios te dá como resultante dos (2) códigos, uno HTML, el cual colocarás donde quieras que aparezca el formulario, y otro código CSS, el cual colocarás sobre ]]></b:skin>, para lo que tienes que entrar a tu plantilla sin expandir artilugios. Ingresa a SayToMe, para que tomes tu formulario y lo coloques en tu blog o web. A continuación imágenes complementarias:













noviembre 15, 2009

Ventanas POP con medidas establecidas

Cuando colocamos enlaces o links en nuestro blog, y queremos que el mismo se abra en una ventana aparte y no el la misma página acudimos al atributo  target = "_blank" , pero si aún queremos más como establecerle a dicha ventana unos parámetros de ancho y alto, los mismos debemos colocarlos dentro de código que utilizaremos para implementar ese link. Vamos entonces a colocarles un ejemplo de lo explicado en éste   enlace.
El código a continuación:



<a href="URL de la imágen o archivo a mostrar en la nueva ventana" target="_blank" onClick="window.open(this.href, this.target, 'width=Ancho de la ventana,height=Alto de la ventana'); return false;">Título relacionado</a>




noviembre 14, 2009

Hacer enlaces con efecto onMouseOver

Creo que a estas alturas todos sabemos como hacer un enlace. Es uno de los códigos esenciales que todo blogger debe conocer y que, generalmente, consiste en hacer click sobre una frase que nos lo indica o sobre una imágen. En ésta entrada les presentaré la forma de hacerlo pasando, solamente, el cursor sobre lo que nos indique la existencia del enlace. De seguidas el ejemplo con el código para implementarlo:





Este es el código:


<a href="Doesn't matter" onMouseOver="parent.location='URL del sitio a enlazar'">NOMBRE DEL SITIO</a>




noviembre 13, 2009

Boton "Ir Arriba"

Podemos catalogar la implementación de éste botón como una "urgente utilidad" en aquellos blog cuyas páginas posean una gran cantidad de entradas , siendo ésta una manera de volver hasta el tope del blog de un sólo envión.
Para implementarlo accedemos a nuestra plantilla de la manera acostumbrada, y utilizando nuestro buscador de códigos ubicamos  </body>, y sin expandir artilugios, colocamos el siguiente código sobre él:


<a href='#'><img src=' URL de la imágen' style='position: fixed; bottom: 10px; right: 1%;' title='Ir Arriba '/></a>


Luego le damos a VISTA PREVIA, y si todo está bién guardamos nuestros cambios y entonces veremos aparecer, en el ángulo inferior derecho de nuestro blog, el ícono, que al pulsarlo nos hará volver al tope de nuestro blog.




noviembre 10, 2009

Efecto multicolor en los enlaces

Este efecto tiene cierta similitud con el efecto Rainbow. Para implementarlo accedemos a nuestra plantilla de la manera acostumbrada, y ayudados por nuestro buscador de códigos (CTRL+F) ubicamos  </head> y sobre el mismo colocamos el siguiente código:





<script type='text/javascript'>

//<![CDATA[

var rate = 20;

if (document.getElementById)
  window.onerror=new Function("return true")

var objActive;  // The object which event occured in
  var act = 0;    // Flag during the action
  var elmH = 0;   // Hue
  var elmS = 128; // Saturation
  var elmV = 255; // Value
  var clrOrg;     // A color before the change
  var TimerID;    // Timer ID

if (document.all) {
  document.onmouseover = doRainbowAnchor;
  document.onmouseout = stopRainbowAnchor;
  }
  else if (document.getElementById) {
  document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
  document.onmouseover = Mozilla_doRainbowAnchor;
  document.onmouseout = Mozilla_stopRainbowAnchor;
  }

function doRainbow(obj)
  {
  if (act == 0) {
  act = 1;
  if (obj)
  objActive = obj;
  else
  objActive = event.srcElement;
  clrOrg = objActive.style.color;
  TimerID = setInterval("ChangeColor()",100);
  }
  }


function stopRainbow()
  {
  if (act) {
  objActive.style.color = clrOrg;
  clearInterval(TimerID);
  act = 0;
  }
  }


function doRainbowAnchor()
  {
  if (act == 0) {
  var obj = event.srcElement;
  while (obj.tagName != 'A' && obj.tagName != 'BODY') {
  obj = obj.parentElement;
  if (obj.tagName == 'A' || obj.tagName == 'BODY')
  break;
  }

if (obj.tagName == 'A' && obj.href != '') {
  objActive = obj;
  act = 1;
  clrOrg = objActive.style.color;
  TimerID = setInterval("ChangeColor()",100);
  }
  }
  }


function stopRainbowAnchor()
  {
  if (act) {
  if (objActive.tagName == 'A') {
  objActive.style.color = clrOrg;
  clearInterval(TimerID);
  act = 0;
  }
  }
  }


function Mozilla_doRainbowAnchor(e)
  {
  if (act == 0) {
  obj = e.target;
  while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
  obj = obj.parentNode;
  if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
  break;
  }

if (obj.nodeName == 'A' && obj.href != '') {
  objActive = obj;
  act = 1;
  clrOrg = obj.style.color;
  TimerID = setInterval("ChangeColor()",100);
  }
  }
  }


function Mozilla_stopRainbowAnchor(e)
  {
  if (act) {
  if (objActive.nodeName == 'A') {
  objActive.style.color = clrOrg;
  clearInterval(TimerID);
  act = 0;
  }
  }
  }


function ChangeColor()
  {
  objActive.style.color = makeColor();
  }


function makeColor()
  {
  // Don't you think Color Gamut to look like Rainbow?

// HSVtoRGB
  if (elmS == 0) {
  elmR = elmV;    elmG = elmV;    elmB = elmV;
  }
  else {
  t1 = elmV;
  t2 = (255 - elmS) * elmV / 255;
  t3 = elmH % 60;
  t3 = (t1 - t2) * t3 / 60;

if (elmH < 60) {
  elmR = t1;  elmB = t2;  elmG = t2 + t3;
  }
  else if (elmH < 120) {
  elmG = t1;  elmB = t2;  elmR = t1 - t3;
  }
  else if (elmH < 180) {
  elmG = t1;  elmR = t2;  elmB = t2 + t3;
  }
  else if (elmH < 240) {
  elmB = t1;  elmR = t2;  elmG = t1 - t3;
  }
  else if (elmH < 300) {
  elmB = t1;  elmG = t2;  elmR = t2 + t3;
  }
  else if (elmH < 360) {
  elmR = t1;  elmG = t2;  elmB = t1 - t3;
  }
  else {
  elmR = 0;   elmG = 0;   elmB = 0;
  }
  }

elmR = Math.floor(elmR).toString(16);
  elmG = Math.floor(elmG).toString(16);
  elmB = Math.floor(elmB).toString(16);
  if (elmR.length == 1)    elmR = "0" + elmR;
  if (elmG.length == 1)    elmG = "0" + elmG;
  if (elmB.length == 1)    elmB = "0" + elmB;

elmH = elmH + rate;
  if (elmH >= 360)
  elmH = 0;

return '#' + elmR + elmG + elmB;
  }

//]]>

</script>


Posterior a esto guardamos cambios, y para ver el efecto sólo tenemos que pasar el cursor sobre cualquier enlace o link y allí aparecerá el efecto.


Fuente:  AllBlogTools

noviembre 08, 2009

Ver ultimas entradas en la sidebar

Una manera de colocar las últimas entradas escritas en el blog, en la sidebar del mismo, es a través de un widget que la amiga Amanda, de Blogger Buster, muy gentilmente ha preparado y proporcionado a todos. Para su implementación sólo tienes que acceder a tu blog de la manera acostumbrada, luego, en la sección DISEÑO haces click en agregar un gadget, Continuando en la sección de gadgets buscamos DESTACADOS, y en la septima (7) línea encontrarás dicho widget, que por ser muy instuitívo, te permitirá, sin problema alguno, colocarlo en la sidebar de tu blog. Ahora espero te halla sido útil ésta información.


noviembre 05, 2009

Como colocar divisiones o separadores entre las entradas.

La palabra frontera, expresa delimitación, territorialidad o como la quieran llamar. La intención de ésta entrada es la de mostrarles como establecer fronteras o divisiones entre las entradas del blog, de una manera vistosa, elegante.
Para ello accedemos a nuestra plantilla de la manera acostumbrada, y con la ayuda de nuestro buscador de códigos (CTRL+F) ubicamos esto:


.post {

margin: 0 0 40px 0;

width: 90%

}


Con los agregados a éste código, el código resultante sería como sigue:



.post{

margin: 0 0 40px 0;

width: 90%;

background: url(http://www.imagehost.com/separator.jpg);

background-repeat: no-repeat;

background-position: bottom center;

margin:.5em 0 1.5em;

padding-bottom:2.5em;

}


La línea número 7, está la url de la imágen que hará las veces de separador.




noviembre 04, 2009

Twitter en ¡... ESPAÑOL...!

Ha causado gran revuelo, en la comunidad bloggeril, la noticia de que ¡ Twitter ya está en ESPAÑOL...!. Realmente en lo particular esto me llena de gozo, ya que se pone de manifiesto la importancia de nuestro idioma en el ámbito mundial, ganando espacio cada día más. Para cambiar su página Twitter al ESPAÑOL , deben ingresar a su cuenta en Twitter, y en Configuración -setting- nos dirigimos a la sección lenguaje y allí efectuamos el cambio.



                        ¡...Hurra por nuestro idioma...!




Fuente: TwitterBlog


noviembre 03, 2009

Traductor en tu blog

Para lograr que nuestro blog o página web traspasen la barrera del lenguaje, lo mejor es colocar , en sitio visible, una herramienta para tal fín: un traductor. Podemos colocarlo como elemento HTML/Javascript, para lo cual accedemos a la parte de diseño en nuestro blog, luego en adicionar un gadget y al abrirse la ventana correspondiente - es algo instuitívo - colocamos el siguiente código:



<div id="google_translate_element"></div><script>

function googleTranslateElementInit() {

  new google.translate.TranslateElement({

    pageLanguage: 'es'

  }, 'google_translate_element');

}

</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>



Espero les sea de utilidad.






Como hacer una pagina "Error 404"

Una página de " Error 404 " es una página que nos presenta el mismo servidor cuando:
  • Una URL ha sido mal escrita.
  • Cuando existe un enlace o link roto.
  • Cuando se ha movido o eliminado el contenido.
Realmente es una página que no deseamos ver pero sucede a veces por las causas antes mencionadas. Google nos dá la oportunidad de incorporarla a nuestro blog o página web mediante un widget que nos proporciona en ésta página. Es un código que debemos colocar entre las etiquetas   <body>  y   </body>







Para cambiar el aspecto de la página " Error 404 " aquí tienes la información.  Espero les sea útil ésta información.



Como crear una insignia de Facebook

Esta es una entrada para los amantes de Facebook. Luego de haber hecho tu registro en Facebook y querer agregar una insignia identificativa de Facebook propia, dirígete a ésta página, desde donde podrás agregar a tu blog o página web una insignia como la que puedes observar a continuación:










noviembre 02, 2009

Optimizar imagenes





Generalmenta, cuando hacemos capturas de imágenes para utilizarlas en alguna entrada o post como soporte visual, nos olvidamos que las mismas tienen un peso, que a la final, está relacionado con la lentitud de carga de nuestra página web o blog.
Para evitar la ralentización de nustras páginas debemos, entonces, optimizar esas imágenes reduciendo su peso, pero sin que la imágen final tenga diferencia significativa con la imágen original. Para ello les dejo a PunyPNG, una herramienta online con la que podemos lograr éste cometido.


Fuente: WebAppers





 

Mi laboratorio de pruebas Copyright © 2011 -- Template created by O Pregador -- Powered by Blogger