domingo, 30 de diciembre de 2012

Formulario de Contacto para tu Blog Ilimitado

Existen varios sitios que ofrecen el servicio de envío de formularios, con los que puedes crear un formulario de contacto para que puedas añadir a tu página y permitir que cualquier usuario te contacte. Dos de ellos son: emailmeform, y jotform. Ambos servicios cuentan con excelentes características que te permitirán crear un formulario de contacto fácilmente, aunque las cuentas gratuitas tienen varias limitaciones, entre ellas, un límite de entregas mensual. Esto se soluciona si se actualiza la cuenta gratuita a una premium, aunque los precios de éstas oscilan entre 9.99 y 49.99 dólares mensuales.



Para quienes buscan alternativas más económicas, está allforms, otro servicio que me parece interesante, con el que puedes crear formularios, entre ellos, uno de contacto. Por supuesto también puedes obtener una cuenta gratuita.



Entre las características de la cuenta gratuita podemos destacar las siguientes:


  • Sin publicidad. No colocan ningún tipo de publicidad en los formularios.

  • Ilimitado. No hay un límite en el número de preguntas en los formularios, o en el número de entregas.  Ofrecen soporte para todos los tipos de campos en los formularios definidos en HTML.

  • Protección contra SPAM. Utilizan técnicas para evitar la recepción de contenido indeseado (opcional desde la configuración).

  • Creador de formularios sencillo, en inglés aunque es intuitivo.

  • Respuesta automática personalizada. Esto permitirá que los usuarios que te contactaron reciban un correo con una repuesta automática. (opcional desde la configuración).

  • Bloqueo de dirección IP. Esto resulta bastante útil, cuando algún juguetón(a) esté enviando correos masivos (Spam). (la dirección IP la recibes en el correo con el mensaje que te enviaron).




Cuenta Plus



Si buscas características avanzadas, como la recepción de los datos en varios correos electrónicos, almacenamiento de datos en  la cuenta con un duración de 365 días del año, etc., es posible conseguirlo si actualizas tu cuenta a una "Plus" o de pago, y el costo es de sólo 10 dólares anuales, cantidad que pudiera considerarse como una donación para darle soporte al servicio que nos están ofreciendo. Así que si te gusta el servicio, lo encuentras útil y puedes hacer un pago, no dudes en hacerlo ;)




Cómo crear el formulario de contacto en allforms







  1. Ve a la página de allforms, y abre una cuenta accediendo desde la pestaña "Register", y seleccionas "Free Account" para cuenta gratuita, o "Plus Account" para la de pago (10.72 dolares al año).





    Crear cuenta en allforms


  2. Ingresa a tu cuenta (en Login) y desde el panel haz click en la pestaña "Create" seleccionando la opción de "Form". Después haces click en continuar para acceder al creador del formato.




    Crear formulario en allforms




  3. Hecho lo anterior, habrás accedido al creador de formularios y verás todas las opciones para crear tu formulario.


    Configurar el formulario



    Si observas parece sencillo, lo único que puede parecer complicado, es que las opciones aparecen en inglés, aunque no es para asustarse.



    Veamos los puntos básicos:



    • Cambiar el nombre del formulario: A tu izquierda con fondo azul, aparecen tres opciones. La primera es un campo donde colocas el nombre del formulario (Sample Form). 

    • Cambiar el texto para las preguntas requeridas de forma obligatoria. Debajo de la opción anterior, desde el campo, cambias el texto que indica que las preguntas que lleven asterisco son obligatorias. Dice: Questions marked by * are required. Puedes cambiar el texto desde ahí y poner por ejemplo: *Respuestas requeridas.

    • Agregar preguntas. Por defecto el formulario empieza con tres preguntas, puedes agregar todas las que quieras desde el botón que dice: "Add a Question". O Puedes borrarlas en delete (debajo de la pregunta) para empezar desde cero.

    • Cambiar el texto de las preguntas. Si vas a empezar a crear tu formulario usando las tres preguntas que ya vienen por defecto (Name, Email y Message) puedes cambiar el texto si haces click en "change" debajo de cada pregunta, luego se abrirá una ventanita o recuadro donde podrás teclear el texto que quieres que aparezca. También puedes moverlas de posición en move, o borrarlas en delete.




    Otras opciones. Debajo de las opciones anteriores, verás varias secciones con más opciones que te permitirán configurar tu formulario, veamos de forma breve una por una:


    • Required questions. Ahí seleccionas las preguntas que serán requeridas u obligatorias, activando la casilla correspondiente.

    • E-mail Address. En esta opción seleccionas la dirección de correo electrónico de quienes recibirán los formularios enviados.

    • E-mail Subjet. Ahí tecleas el texto que aparecerá como "Asunto" en el email que recibas cuando alguien envíe un formulario. Esto puede ser útil si quieres identificar fácilmente desde tu correo, los mensajes enviados desde cierto blog o página. 

    • E-mail Format. Desde esa opción, seleccionas si los mensajes recibidos desde el formulario tendrán un formato.

    • Custom Succes Page. Ahí tecleas la dirección web (URL) a donde deseas redirigir al usuario una vez enviado el mensaje. Si lo dejas en blanco se mostrará el mensaje de envío exitoso.

    • Custom Error Page. En esta opción puedes poner la dirección web (URL) de la página a donde se redigirá al usuario, si se produce algún error en el envío  por ejemplo si este no completa un campo requerido.

    • Enable Anti-Spam. Si seleccionas "Si" después de completado el formulario el usuario tendrán que llenar un campo con el código de verificación anti-spam. Ahí mismo aparece la opción "Lenguaje" para que el texto de ésta opción aparezca en el lenguaje deseado.

    • E-mail Question. Si tienes una pregunta en el formulario que solicite la dirección de correo electrónico o email, tienes que seleccionar en el menú desplegable de ésta opción, dicha pregunta. Esto permitirá que puedas enviar una repuesta automática cada vez que alguien envíe un formulario (siguiente opción).

    • Thank you E-mail. En esta opción personalizas el mensaje del correo con la respuesta automática que recibirá un usuario al enviarte un formulario. Debes tener seleccionada la pregunta donde solicitas el correo electrónico en el formulario, usando la opción anterior, de otro modo no funcionará.






  4. Una vez configuradas todas las opciones, guardas los cambios en Save y desde la página podrás copiar el código HTML para que puedas incrustar el formulario, poniendo el código en cualquier sección de tu blog, usando la opción de HTML/Javascript al agregar un gadget, o en una página estática. También te facilitarán el HTML de un enlace al formulario que creaste, y además la opción a una página con el formulario usando protocolo HTTPS, para que la transferencia de datos sea segura.




    Formulario de contacto terminado





¡Y listo!, ya habrás terminado tu formulario, para que puedan contactarte desde tu blog ;)



Nota: Esta es una guía que pretende hacerte sencilla la creación de tu formulario de contacto. Si tienes algún problema al usar el servicio o alguna pregunta con respecto al servicio, favor de contactar directamente al proveedor de dicho servicio.

2013

2013

... y en este año que empieza no espero que todo lo que esté de aquí para arriba sean cosas que valga la pena mirar

sólo espero poder seguir el jugando

porque todo lo que está de aquí para abajo fueron años llenos de juguetes, rodillas lastimadas y alguna ropa sucia

ni sangre ni sudor ni lágrimas
bueno, también algo de todo eso
pero sin exagerar

sábado, 29 de diciembre de 2012

Picfull » añade efectos a tus fotos

Picfull es una herramienta que nos va a permitir agregar diversos efectos a nuestras imágenes o fotos.

Este herramienta online posee 21 efectos, como por ejemplo, efectos estilo vintage, estilo acuarela, estilo foto antigua, etc. Además, podemos añadir varios efectos a la vez, consiguiendo vistosos resultados.

Una vez editada nuestra imagen, podremos descargarla, guardarla en nuestra PC y compartirla.

Aprovecho este post, para desearles un Feliz Año Nuevo. Nos vemos con más tutoriales y recursos el 2013


Picfull

viernes, 28 de diciembre de 2012

Geri's Chess Game



Agregar Elementos solo en Posts con determinada Etiqueta

Hace tiempo, te decía cómo agregar una cajita de suscripción debajo de los posts, para que los usuarios de tu blog puedan suscribirse desde las entradas del blog.




cajita de suscripcion



En ese mismo post, me comentaba un usuario que quería agregar dicha caja solo en determinadas entradas del blog. Esto lo podemos conseguir valiéndonos de las etiquetas de los posts. En otras palabras, podemos agregar la cajita, o cualquier cosa que queramos en los posts tomando en cuenta las etiquetas.



Lo que haremos



Voy a explicar como agregar la cajita que te mencionaba, solo en las entradas de cierta etiqueta. Para ello voy a usar un ejemplo, de ese modo podre ilustrarlo más fácilmente.




Cómo hacerlo paso a paso






Ejemplo. Vamos a pensar que quieres que aparezca dicha cajita solo en las entradas con la etiqueta "Delicioso".  En este caso, como en el tutorial que menciono, colocaremos la cajita debajo de los posts, como último elemento. Tomando en cuenta éste ejemplo, veamos como lograrlo...




  1. Lo primero que haremos es agregar el CSS de la cajita. Si es otro elemento el que vas a agregar, entonces deberás agregar el CSS del elemento en "Añadir CSS" del diseñador de plantillas. 

  2. Luego vas a la edición de HTML de la plantilla, localizas el siguiente div que está resaltado de rojo.



     <div class='post-footer-line post-footer-line-3'>

    Aquí dentro muy probablemente habrá otro código (ver el Paso 3 de la entrada mencionada)

    </div>



  3. Inmediatamente después del cierre del div "</div>" agregaremos otro div (<div class='post-footer-line post-footer-line-4'>)conteniendo los códigos necesarios para que aparezca la cajita solo en la etiqueta "Delicioso".  Necesitas editar el código antes de ponerlo el el código de tu plantilla:


    <div class='post-footer-line post-footer-line-4'>

    <b:loop values='data:post.labels' var='label'>

    <b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:label.name == &quot;Delicioso&quot;'>

    Aquí pones el contenido de la cajita o elemento que agregarás

    </b:if>

    </b:if>

    </b:loop>

    </div>

                        

    Notas importantes del código anterior:


    • A diferencia del post que estamos refiriendo con la cajita de suscripción, estamos agregando el contenido a un div (<div class='post-footer-line post-footer-line-4'>)para que de ese modo sea más fácil  "mover todo el contenido". Si lo quieres mover, puedes usar CSS, y en éste caso usaremos el margen para lograrlo. Sería algo como esto:


      .post-footer-line-4{

      margin: 10px 0 5px -20px; /*los valores se leen: arriba, derecha, abajo, izquierda*/

      }


    • En esta linea:  

      <b:if cond='data:label.name == &quot;Delicioso&quot;'>

      Tenemos que poner el nombre de la etiqueta donde va a aparecer la cajita o el elemento que vas a agregar, en lugar de la etiqueta Delicioso, que estamos usando como ejemplo.




    • Con esta linea:


      <b:if cond='data:blog.pageType == &quot;item&quot;'>

      Hacemos que la cajita aparezca solamente al estar dentro del post. Ambas lineas, son condicionales de Blogger y llevan su cierre "</b:if>". Si quieres que el elemento se vea desde la página principal, entonces deberás eliminar esa linea y también la de cierre </b:if>que está casi al final del código (hay dos).





  4. Finalmente, verificas en vista previa y si todo luce bien, guarda los cambios.




Hecho todo lo anterior, la cajita aparecerá al final de los posts que tengan la etiqueta "Delicioso" (nuestro ejemplo), solo al estar dentro de los posts.






Demostración


Puedes ver esto en acción desde éste blog, ingresando a la entrada con la etiqueta "Delicioso", ahí verás la cajita, mientras que en los otros posts no aparecerá. 





Otros posts que pueden ser útiles:








jueves, 27 de diciembre de 2012

Personalizar las Listas Numeradas en los Posts + 3 Ejemplos

Desde el panel de edición de entradas de Blogger, es posible crear listas numeradas usando la herramienta "Lista numerada".




herramienta de lista numerada del editor de entradas



Una lista numerada se consigue gracias al código HTML de una "lista ordenada". Tú no tienes que preocuparte por agregar el código HTML, ya que el editor lo hace por ti al usar dicha herramienta. Si vas a la edición de HTML de la entrada, verás que la lista que creaste aparece de éste modo:


   <ol>

<li>El contenido del 1er. elemento</li>

<li>El contenido del 2do. elemento</li>

<li>El contenido del 3er. elemento</li>

<li>El contenido del 4to. elemento</li>

    etc...

  </ol>

Esta herramienta, va numerando de forma automática cada elemento de la lista llevando un "orden", de ahí se deriva el nombre de "listas ordenadas en HTML". En cada elemento se va generando un número de forma sucesiva (de 1 en adelante), aunque tú no lo puedas ver en el código HTML.




Usos de las listas ordenadas en los posts




Crear listas numeradas, es muy conveniente para numerar cualquier tipo de instrucciones.  Es ideal para blogs de cocina donde se numeran los pasos a seguir en una receta, o bien, en aquellos blogs que comparten tutoriales, aunque puede usarse en cualquier blog que necesite numerar cualquier cosa.



Por defecto, al usar ésta herramienta, los elementos numerados se verán  así:







Sin embargo, podemos personalizar los elementos de la lista, con CSS. Para conseguirlo, nos apoyaremos de éste interesante tutorial de 456 Berea ST, que explica una técnica en donde usando algunas propiedades claves de CSS, lograremos personalizar tanto los números de cada elemento de la lista, como el contenido de cada elemento.



El truco básicamente consiste en anular la numeración por defecto con: "list-style:none", y luego, usar propiedades de numeración automática:"counter-reset" y "counter-increment". Luego con la propiedad "content" se agrega el índice del contador que se crea usando las dos anteriores propiedades.




Ejemplos





Estos son tres ejemplos que he preparado para que puedas usar en tu blog para personalizar las listas numeradas y si alguna te gusta, sólo bastará con copiar el código CSS y pegarlo yendo a Plantilla > Personalizar > Avanzado > Añadir CSS. Por supuesto puedes personalizar los colores de fondos, bordes, etc.





Estilo 1.  


lista numerada 1



CSS


.post-outer ol{

counter-reset:li;

margin-left:0;

padding-left:0

}

.post ol li{ /*Estilos de cada elemento*/

position:relative;

margin:0 0 20px 2em !important;

padding:4px 8px !important;

list-style:none;

*list-style: decimal;

border:1px solid #e2e3e2; /*Color de borde*/

background:#f2f2f2; /*Color de fondo*/

text-indent:10px;

}

.post ol li:before{ /*Los estilos del Número*/

content:counter(li);

counter-increment:li;

position:absolute;

top:-5px;

left:-5px;

font-family:'Oswald', serif;

font-size:14px;

width:12px;

margin:0 0 10px 0;

padding:4px !important;

color:#727272; /*Color de texto*/

text-align:left;

background:#e2e2e2; /*Color de fondo*/

text-indent:2px

}

.post ol li:after{

content:"";

position:absolute;

top:-5px;

left:14px;

width: 0px;

height: 0px;

border-style: solid;

border-width: 5px 0 0 5px;

border-color: transparent transparent transparent #aeaeae; /*color del triangulito*/

}



Estilo 2.


Lista numerada 3

CSS




.post-outer ol{

 counter-reset:li;

 margin-left:0;

 padding-left:0

}

.post ol li{

 position:relative;    

 margin:0 0 20px 2em !important;

 padding:4px 8px !important;

 list-style:none;

 *list-style: decimal;

}

.post ol li:before{

 content:counter(li);

 counter-increment:li;

 position:absolute;

 top:-8px;

 left:-39px;

 font-family:'Oswald', serif;

 font-size:40px; /*tamaño de la fuente*/

 width:34px;

 margin:0 0 10px 0;

 padding:4px !important;

 color:#727272;

 text-align:center;

}




Estilo 3.


Lista numerada 4







CSS


.post ol{

counter-reset:li;

margin-left:0;

padding-left:0

}

.post ol li{

position:relative;    

margin:0 0 13px 2em !important;

padding:4px 8px !important;

list-style:none;

*list-style:decimal;

}

.post ol li:before{

content:counter(li);

counter-increment:li;

position:absolute;

top:0;

left:-2em;

width:27px;

margin-right:8px;

padding:3px 1px 4px 0 !important;

color:#fff; /*color de la fuente*/

font-size:16px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxaPbvbv-9eUA9Di5oL4XxYCSYaCIs_-9a2l5MQX6dFiZtlLZSafa38qh0mhDRJrZ78KzKrkXTBgQ9TApsov7fnWbMeiWYrUAhnTP2CIr7K1Y7jXtQaWspDOLCFb0hW2kDbiLmaJ8ey0w/s1600/pasos-2.png) no-repeat left top;

font-weight:bold;

text-align:center

}

En este último ejemplo, decidí usar una imagen para el círculo (resaltada de rojo) como fondo del número. Podemos crear el círculo con CSS, pero éste se verá cuadrado en Internet Explorer 8, versión que aún no es tan vieja.



De cualquier modo, aquí te dejo otras imágenes de círculos con otros colores que puedes usar si quieres.




  • circulo




  • circulo




  • circulo




  • circulo




  • circulo




  • circulo











Nota: He resaltado de rojo los valores que pudieras editar en el CSS de los tres ejemplos, y agregado comentarios resaltándolos de  /*verde*/, para que puedas saber de qué se trata cada cosa, al terminar, puedes eliminarlo para no hacer más extenso el código de tu plantilla.



Compatibilidad:

Esto funcionará en todos los navegadores incluyendo IE8, en el caso de Internet Explorer 7, no se verán los estilos del número ya que no soporta los pseudoelementos :before o :after. Sin embargo, agregué una linea en el CSS específica para ese navegador, que hará que aparezca la numeración por defecto de la lista ordenada.



Espero sea útil ;)

Menú de Navegación con Pestañas estilo Google Play con el Gadget de Etiquetas

En Front-end-depelopment, veía un excelente tutorial que explica cómo crear una sección con pestañas estilo Google Play, y pensé que sería interesante hacer un menú de navegación aplicando dicho estilo, usando el gadget de las etiquetas. Este menú permitirá navegar entre las páginas de etiquetas y destacar siempre el enlace seleccionado si cambiamos un poco el código del gadget.



Lo que haremos


  • Vamos a agregar el enlace de la página principal al gadget de las etiquetas (Inicio).

  • Cambiaremos el código del gadget para destacar el enlace seleccionado, ya sea el de la página principal o los de las páginas de etiquetas, sin usar Javascript.

  • Con el CSS del tutorial mencionado, le daremos a los enlaces del gadget de las etiquetas la apariencia de pestañas al estilo Google Play.












Ventajas


  • Una vez hechos todos los cambios, no necesitarás editar/agregar ningún código HTML para añadir enlaces.

  • El enlace seleccionado siempre destacará, independientemente de que se navegue entre las páginas de etiquetas (recuerda que la URL de éstas páginas cambia de forma dinámica). Puedes comprobar ésto desde mi blog, al navegar entre las páginas de etiquetas desde el gadget de etiquetas (Categorías).

  • Podrás seleccionar cuáles etiquetas mostrar en el menú, editando ésto desde las opciones de configuración del gadget.


Bueno, vayamos al grano y veamos cómo crear el susodicho menú, y aunque no luce mucho ahí en la demostración, ya que está debajo de la demo del menú con iconos usando el gadget de lista de enlaces, puedes ver su funcionamiento.



Importante: Antes de empezar a personalizar el gadget de las etiquetas, es necesario habilitar una sección en la cabecera, para poner ahí el gadget de las etiquetas, ya que la sección que está debajo de la cabecera llamada crosscol, está diseñada pensando en el menú de navegación que traen consigo las plantillas nuevas de Blogger, y el CSS que ya tienen estropeará el resultado. Otra opción seria quitar dicho CSS.



En este caso lo que haremos, es habilitar otra sección y para ello vas a la edición de HTML de la plantilla, y buscas esta linea de código:



 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>



Luego, cambias "1" por "3", y "no" por "yes". Puse 3, para que se vea el area punteada en la sección, y puedas identificarla más fácilmente cuando estés en la sección de Diseño.




Cómo crear el Menú paso a paso



  1. Una vez habilitada una nueva sección en la cabecera, necesitamos agregar el gadget de etiquetas, desde "Diseño". Puedes arrastrarlo hasta ahí si ya lo tienes en la columna lateral o bien, agregarlo en "Añadir gadget". Tienes que configurarlo del siguiente modo: en "Editar" selecciona las etiquetas que quieres mostrar. En mostrar, selecciona la opción de "Lista" y no actives la casilla de "Mostrar cantidad de entradas por etiqueta".



  2. Luego, agregas el CSS yendo a Plantilla > Personalizar > Avanzado > Añadir CSS


    #Label1 h2{display:none}



    #Label1 ul {

    overflow:hidden;

    width: 100%;

    margin: 0;

    padding: 0;

    list-style: none;

    border-bottom: 2px solid #3D3D3D;

    }

    #Label1 li {

    float: left;

    margin: 0 -15px -3px 0;

    }

    #Label1 li a {

    float: left;

    position: relative;

    padding: 0 10px 0 14px;

    height: 0;

    line-height: 32px;

    text-transform: uppercase;

    text-decoration: none;

    color: #fff;

    border-right: 30px solid transparent;

    border-bottom: 30px solid #3D3D3D;

    border-bottom-color: #777\9;

    opacity: .3;

    filter: alpha(opacity=30);

    }

    #Label1 li a:hover,

    #Label1 li a:focus {

    border-bottom-color: #2ac7e1;

    opacity: 1;

    filter: alpha(opacity=100);

    }

    #Label1 li a:focus {

    outline: 0;

    }

    #Label1 li a.seleccionado {

    z-index: 3;

    border-bottom-color: #3d3d3d;

    opacity: 1;

    filter: alpha(opacity=100);

    }



    Nota: Las pestañas por defecto tienen transparencia, asi que puedes usar un fondo interesante y mejorar la presentación.


  3. Después, vas a la edición de HTML de la la plantilla, expandes plantillas de artilugios y buscas el código del gadget de las etiquetas mismo que podrás identificar si lo buscas usando el título que le pusiste con la ayuda de Ctrl + F. Lo que nos interesa es esta parte:



    <b:if cond='data:display == &quot;list&quot;'>    <ul>

    <b:loop values='data:labels' var='label'>

            <li>


              <b:if cond='data:blog.url == data:label.url'>

                <span expr:dir='data:blog.languageDirection'><data:label.name/></span>


              <b:else/>

                <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

              </b:if>

               



  4. En el código anterior, identifica las lineas que resalté de negrita y con fondo azul, y las cambias por éstas:




     <b:if cond='data:display == &quot;list&quot;'>

          <ul>

    <b:if cond='data:blog.url == data:blog.homepageUrl'>

                <li><a class='seleccionado' expr:href='data:blog.homepageUrl'>Inicio</a></li>

    <b:else/>

    <li><a expr:href='data:blog.homepageUrl'>Inicio</a></li>

    </b:if>

    <b:loop values='data:labels' var='label'>

                 <li>

                   <b:if cond='data:label.name == data:blog.searchLabel'><a class='seleccionado' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

    Con el código anterior, estamos agregando un enlace a la página principal (Inicio) y con una condicional de Blogger, destacamos dicho enlace cuando estemos en la página principal. Estamos agregando una clase que identificará al enlace seleccionado. Además, estamos cambiando la condicional en las páginas de etiquetas para que no se pierdan las propiedades declaradas en el CSS de la clase agregada para el enlace seleccionado. Puedes cambiar el texto "Inicio" de la página principal, por el que quieras.


  5. Por último, verificas en vista previa que todo luzca bien, y si es así, guarda los cambios en Guardar plantilla.



Y ¡listo!, ya tienes un menú de navegación con pestañas usando el gadget de las etiquetas, al estilo Google Play ;D



Recomendaciones:

Se recomienda éste menú para blogs que usen algún tipo de resumen en las entradas, de ese modo será mas rápido navegar entre las páginas de etiquetas. O bien, personalizar las páginas de etiquetas para que éstas muestren algún tipo de resumen.



Compatibilidad

Este menú funciona en todos los navegadores incluyendo la antigua versión de Internet Explorer: IE7 (Internet Explorer 7).



Notas adicionales


  • Si lo prefieres, puedes agregar el menú arriba de las entradas, y para ello deberás arrastrar el gadget y ponerlo arriba de la sección de las entradas del blog, en tal caso, no será necesario habilitar una sección adicional en la cabecera, como se mencionaba al principio.

  • Si es el segundo gadget de etiquetas que usas, deberás cambiar #Label1 por #Label2 en el CSS (paso 2).





Espero que sea útil, y sigamos disfrutando de las fiestas ;)

miércoles, 26 de diciembre de 2012

Fokus: Un script para resaltar lo resaltado

Fokus es un script interesante aunque el resultado final dependerá mucho de la página donde se quiera utilizar, tanto de su color de fondo como de la forma en que está estructurada. Lo que hace es resaltar cualquier cosa que uno haya seleccionado, cubriendo el resto de la página con una cierta opacidad.

Justamente, es esa opacidad lo que hace que el resultado sea variable porque está pensada para fondos claros y no posee opciones de configuración aunque, si se quiere, se podría modificar el script, buscando esta línea y colocando allí el color a utilizar en formato rgba():

v.fillStyle="rgba( 0, 0, 0, "+t+" )";
Por ejemplo, si quisierámos que fuera una opacidad en blanco, sería:
v.fillStyle="rgba( 255, 255, 255, "+t+" )";

El script no utiliza librería así que puede agregarse en cualquier sitio aunque, como usa la etiqueta canvas, no se verá en versiones inferiores de Internet Explorer. Lo podemos descargar desde github y basta agregarlo antes de </head>


Cras nec magna ante. Nam rutrum tristique porttitor. Ut quam felis, fringilla a ultrices sed, ornare ut purus. Morbi vitae felis magna, nec mollis augue. Aenean sagittis ornare nunc, a facilisis neque luctus at. Phasellus porta sapien non ligula gravida ac pharetra erat fringilla. Suspendisse elementum vehicula libero, vel hendrerit diam porta quis. Proin bibendum erat in orci commodo sit amet egestas eros elementum! Nullam pharetra lacus lorem. In nec hendrerit elit. Sed consectetur tincidunt dui; in aliquam sapien ullamcorper et.

Integer tristique dignissim mollis. Nam justo magna, egestas ac sodales quis, posuere commodo tellus.


REFERENCIAS:lab.hakim

lunes, 24 de diciembre de 2012

¡Ayuda Bloggers les desea Feliz Navidad!

mensaje, navidad




Ayuda Bloggersgingerbread quiere desearte una muy Feliz Navidad a tí, a tu familia y a tus seres queridos. Les mandamos un cálido abrazo, esperando que este día sea de bendición para cada uno de ustedes.

ballballbellball2

Felices Fiestas 2012


Como cada año desearos una Felices Fiestas y todo lo mejor, Feliz Navidad a todos!!!

domingo, 23 de diciembre de 2012

Conociendo CSS3 - Animaciones

Hola, queridos lectores. Desde hoy comenzaré a mostrar todo el poder de CSS3, pero antes de comenzar les pido mil disculpas por haberme ausentado unos días, ya que en mi universidad rendí mis últimos exámenes,  pero bueno vamos al grano, lo que a ustedes les interesa.

css3 animaciones, davisdrumkey, css3 keyframes


Con CSS3 podemos hacer muchas cosas, como lo son las transiciones, animaciones, efectos de textos, transformaciones 2D, 3D, etc. Para empezar les demostrare una animación que realisé para ustedes.



En este demo he animado únicamente imágenes, y para crear estas animaciones debemos conocer la regla llamada @keyframes, la cual es muy sencilla, por ejemplo de esta manera he animado el sol.

#sol {
width: 100px;
height: 100px;
position: fixed;
top: 60px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Y_lIvQEX11NyWu5uivoYV-latJIzgQ30l1lx8lA_ndsJta-KrnthWEllgIuVXCDcocYaYINQEGhBQD7C5MDSyZZzGfkr0OgK8dl9q58N60BZ_uhpKN6s2AEQW5r7rZBUwzaKlo3jp0jZ/s100/sol.png);
animation: sol 5s;
-webkit-animation: sol 5s;
-o-animation: sol 5s;
-moz-animation: sol 5s;
z-index: 10;
margin-left: -139px;
}

@keyframes sol
{
0% {top:500px;}
100% {top:60px;}
}
@-webkit-keyframes sol
{
0% {top:500px;}
100% {top:60px;}
}
@-o-keyframes sol
{
0% {top:500px;}
100% {top:60px;}
}
@-moz-keyframes sol
{
0% {top:500px;}
100% {top:60px;}
}

Les explico el código:

  1. Como primer punto le he dado valores básicos para su diseño, como un width, height, background, etc.
  2. Uno de los puntos claves es "animation: sol 5s;" Simplemente le daremos un nombre a nuestra animación y la duración de ella, en este caso es de 5 Segundos.
  3. El siguiente punto clave es "@keyframes sol" Lo que estamos haciendo acá es asociar el @keyframes a la animación llamada "sol" que generamos anteriormente.
  4. Y dentro de "@keyframes sol" hemos agregado la forma en que se animara nuestro "@keyframes" llamado "sol". En que cuando este a 0% estará ubicado desde arriba hacia abajo unos 500px; "top: 500px;" de esta manera acercándose a 100% la animación ira disminullendo los pixeles de distancia desde arriba hacia abajo llegando a los 60px "top: 60px;"

También podemos crear animaciones repitiéndose infinitamente. Como es el caso de las nubes y los aviones, un caso en partícular es el del avión azul.

#avion1 {
width: 250px;
height: 100px;
position: fixed;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZfhL8zoMPUp8veFIvCh2_RCB-XqAHFTPqCs2Ll8QGarGAnNXQwnvqnPfCs2KusxQ2vMOdAHQFN3dv7I287Y5_sBg3rRWVG5-IqKItrfkr_t_9YmQbkeitnAAZ5qlq_BVRnhsqCn-HRe73/s250/Avion1.png);
animation: avion1 20s infinite;
-o-animation: avion1 20s infinite;
-moz-animation: avion1 20s infinite;
-webkit-animation: avion1 20s infinite;
}
@-webkit-keyframes avion1
{
0% {left:-20%;bottom:0px;}
100% {left:105%;bottom:500px;}
}
@keyframes avion1
{
0% {left:-20%;bottom:0px;}
100% {left:105%;bottom:500px;}
}
@-moz-keyframes avion1
{
0% {left:-20%;bottom:0px;}
100% {left:105%;bottom:500px;}
}
@-o-keyframes avion1
{
0% {left:-20%;bottom:0px;}
100% {left:105%;bottom:500px;}
}

Solo agregando en el nombre de la animación la opción "infinite" quedando en este caso de esta manera "animation: avion1 20s infinite;".

A continuación jugaremos con algo simple para poder comprender con sencillos ejemplos:

#simple1
{
width:100px;
height:100px;
margin: auto;
background:red;
animation: simple1 5s infinite;
-moz-animation: simple1 5s infinite;
-webkit-animation: simple1 5s infinite;
-o-animation: simple1 5s;
}

@keyframes simple1
{
from {background:red;}
to {background:yellow;}
}

@-moz-keyframes simple1
{
from {background:red;}
to {background:yellow;}
}

@-webkit-keyframes simple1
{
from {background:red;}
to {background:yellow;}
}

@-o-keyframes simple1
{
from {background:red;}
to {background:yellow;}
}



#simple2
{
width:100px;
height:100px;
margin: auto;
background:red;
animation:simple2 2s infinite;
-moz-animation:simple2 2s infinite;
-webkit-animation:simple2 2s infinite;
-o-animation:simple2 2s infinite;
}

@keyframes simple2
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}

@-moz-keyframes simple2
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}

@-webkit-keyframes simple2
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}

@-o-keyframes simple2
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}


#simple3
{
width: 100px;
height: 100px;
position: relative;
background: red;
border-radius: 50%;
animation:simple3 10s infinite linear;
-moz-animation:simple3 10s infinite linear;
-webkit-animation:simple3 10s infinite linear;
-o-animation:simple3 10s infinite linear;
}

@keyframes simple3
{
0% {left: 0%;top: 0%;}
50% {left: 50%;top: 50%;}
100% {left: 100%;top: 0%;}
}


@-moz-keyframes simple3
{
0% {left: 0%;top: 0%;}
50% {left: 50%;top: 50%;}
100% {left: 100%;top: 0%;}
}

@-webkit-keyframes simple3
{
0% {left: 0%;top: 0%;}
50% {left: 50%;top: 50%;}
100% {left: 100%;top: 0%;}
}

@-o-keyframes simple3
{
0% {left: 0%;top: 0%;}
50% {left: 50%;top: 50%;}
100% {left: 100%;top: 0%;}
}


También les comparto el código completo de la animación.


#sol {
width: 100px;
height: 100px;
position: fixed;
top: 60px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Y_lIvQEX11NyWu5uivoYV-latJIzgQ30l1lx8lA_ndsJta-KrnthWEllgIuVXCDcocYaYINQEGhBQD7C5MDSyZZzGfkr0OgK8dl9q58N60BZ_uhpKN6s2AEQW5r7rZBUwzaKlo3jp0jZ/s100/sol.png);
animation: sol 5s;
-webkit-animation: sol 5s;
-o-animation: sol 5s;
-moz-animation: sol 5s;
z-index: 10;
margin-left: -139px;
}

@keyframes sol
{
0% {top:500px;}
100% {top:60px;}
}
@-webkit-keyframes sol
{
0% {top:500px;}
100% {top:60px;}
}
@-o-keyframes sol
{
0% {top:500px;}
100% {top:60px;}
}
@-moz-keyframes sol
{
0% {top:500px;}
100% {top:60px;}
}
#nube1 {
width: 100px;
height: 100px;
top: 86px;
position: fixed;
z-index: 11;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBHQvQIyuq0pYK0nQvsKkx8tXRcZ3OXoPQVBrXkLvIZM9UFJyD47Ae0GXqHT3X7qo4sCuZyUMNeICNJc_9eW7rtNVHRbiXeyPnIwluMh7cL3hBEee_WGDz-TUjX40cASMATRoJ-u04e28g/s100/nube1.png);
animation: nube1 35s infinite;
-webkit-animation: nube1 35s infinite;
-o-animation: nube1 35s infinite;
-moz-animation: nube1 35s infinite;
}
@-webkit-keyframes nube1
{
0% {left:-10%;}
100% {left:105%;}
}
@keyframes nube1
{
0% {left:-10%;}
100% {left:105%;}
}
@-o-keyframes nube1
{
0% {left:-10%;}
100% {left:105%;}
}
@-moz-keyframes nube1
{
0% {left:-10%;}
100% {left:105%;}
}
#nube2 {
width: 100px;
height: 100px;
top: 120px;
position: fixed;
z-index: 11;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMaGbizad3BpARTNEiq3Trs2atEHl3rSkbCMsw1twl6w30eUOOrHMTty5KRk3WH8GMWURxVAkPM8B3EAmobE4WP6nsyFYRs1vyW_XfI1Jm8Pfza6lzq3M3rSRvyh8TXBbIGgxeup0xM_BA/s100/nube3.png);
animation: nube2 80s infinite;
-webkit-animation: nube2 80s infinite;
-o-animation: nube2 80s infinite;
-moz-animation: nube2 80s infinite;
}
@-webkit-keyframes nube2
{
0% {left:-10%;}
100% {left:105%;}
}
@keyframes nube2
{
0% {left:-10%;}
100% {left:105%;}
}
@-o-keyframes nube2
{
0% {left:-10%;}
100% {left:105%;}
}
@-moz-keyframes nube2
{
0% {left:-10%;}
100% {left:105%;}
}
#nube3 {
width: 100px;
height: 100px;
top: 50px;
position: fixed;
z-index: 11;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitDQdTD_nZG6iTSPodxqr6SCg8BzaMVpwsFVgbH8Rf_qZ0SLkzbw3JSfgxDtHdeVL42bp9F4CRNzNsBCVH8cWwBIGaKBsJcZM4wFFBMqYUJU-Jfd62kH4lEvb55XB8wxYgPQP6LHB5eu2H/s100/nube4.png);
animation: nube3 150s infinite;
-o-animation: nube3 150s infinite;
-moz-animation: nube3 150s infinite;
-webkit-animation: nube3 150s infinite;
}
@-webkit-keyframes nube3
{
0% {right:-10%;}
100% {right:105%;}
}
@keyframes nube3
{
0% {right:-10%;}
100% {right:105%;}
}
@-o-keyframes nube3
{
0% {right:-10%;}
100% {right:105%;}
}
@-moz-keyframes nube3
{
0% {right:-10%;}
100% {right:105%;}
}
#nube4 {
width: 100px;
height: 100px;
top: 200px;
position: fixed;
z-index: 11;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitDQdTD_nZG6iTSPodxqr6SCg8BzaMVpwsFVgbH8Rf_qZ0SLkzbw3JSfgxDtHdeVL42bp9F4CRNzNsBCVH8cWwBIGaKBsJcZM4wFFBMqYUJU-Jfd62kH4lEvb55XB8wxYgPQP6LHB5eu2H/s100/nube4.png);
animation: nube4 200s infinite;
-o-animation: nube4 200s infinite;
-moz-animation: nube4 200s infinite;
-webkit-animation: nube4 200s infinite;
}
@-webkit-keyframes nube4
{
0% {left:-10%;}
100% {left:105%;}
}
@keyframes nube4
{
0% {left:-10%;}
100% {left:105%;}
}
-o-@keyframes nube4
{
0% {left:-10%;}
100% {left:105%;}
}
-moz-@keyframes nube4
{
0% {left:-10%;}
100% {left:105%;}
}
#avion1 {
width: 250px;
height: 100px;
position: fixed;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZfhL8zoMPUp8veFIvCh2_RCB-XqAHFTPqCs2Ll8QGarGAnNXQwnvqnPfCs2KusxQ2vMOdAHQFN3dv7I287Y5_sBg3rRWVG5-IqKItrfkr_t_9YmQbkeitnAAZ5qlq_BVRnhsqCn-HRe73/s250/Avion1.png);
animation: avion1 20s infinite;
-o-animation: avion1 20s infinite;
-moz-animation: avion1 20s infinite;
-webkit-animation: avion1 20s infinite;
}
@-webkit-keyframes avion1
{
0% {left:-20%;bottom:0px;}
100% {left:105%;bottom:500px;}
}
@keyframes avion1
{
0% {left:-20%;bottom:0px;}
100% {left:105%;bottom:500px;}
}
@-moz-keyframes avion1
{
0% {left:-20%;bottom:0px;}
100% {left:105%;bottom:500px;}
}
@-o-keyframes avion1
{
0% {left:-20%;bottom:0px;}
100% {left:105%;bottom:500px;}
}
#avion2 {
width: 250px;
height: 100px;
position: fixed;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfuk9hgvyOeYsgk55M4h7Tf5XCAlML8voC4NckRFEoNzzacF-8YwGSKCOgG0ZNQbgmo_pEj_yl0ppVLhWs1LvOlh8fJSzj4fLZCeswHiw5xOZ_kkv5toqG8b1f5ibJGBy8Sq5B4fhvvqZj/s250/Avion2.png);
animation: avion2 10s infinite;
-o-animation: avion2 10s infinite;
-moz-animation: avion2 10s infinite;
-webkit-animation: avion2 10s infinite;
}
@-webkit-keyframes avion2
{
0% {right:-20%;bottom:0px;}
100% {right:105%;bottom:500px;}
}
@keyframes avion2
{
0% {right:-20%;bottom:0px;}
100% {right:105%;bottom:500px;}
}
@-moz-keyframes avion2
{
0% {right:-20%;bottom:0px;}
100% {right:105%;bottom:500px;}
}
@-o-keyframes avion2
{
0% {left:-20%;bottom:0px;}
100% {left:105%;bottom:500px;}
}


Bueno espero que le sirva como conocimiento para sus web y seguiremos viendo mas cosas sobre CSS3, así que prepárense. Saludos malignos, un gran abrazo.


¡Felices fiestas!!!

Reproductor de vídeo para esta Navidad




Ir a Diseño y añadir un gadget HTML/Javascript.

Poner el siguiente código:

<script src="http://bpmaker.giffy.me/userdata/cmn/parts131.js?us=7481&amp;id=1&amp;bic=4&amp;nc=0&amp;im1=b2-1354449025.png&amp;c18=6&amp;c26=http%3A%2F%2Fyoutu.be%2FnDPxQ9Bt9pA&amp;c28=0" type="text/javascript"></script>
Cambiar si no quieren que empiece el vídeo automaticamente el 0 por un 1

Y si quieren poner otro vídeo cambiar: nDPxQ9Bt9pA  que lo encuentran en el enlace: (Ojo de no borrar 2F ni &amp)

http://www.youtube.com/watch?feature=player_embedded&v=nDPxQ9Bt9pA

viernes, 21 de diciembre de 2012

Wallpapers Navidad 2012

DESCARGA

Nieve cayendo en el blog

Quedan muy pocos días para Navidad y en el tutorial de hoy, veremos cómo agregar un efecto de copos de nieve que caen en nuestro blog.

( Ver DEMO)



1.§ Vamos a Diseño - Añadir un gadget y elegimos HTML/Javascript.

2.§ Pegaremos el siguiente script:
<script type='text/javascript'>
var fallObjects=new Array();function newObject(url,height,width){fallObjects[fallObjects.length]=new Array(url,height,width);}

var numObjs=20, waft=50, fallSpeed=10, wind=0;
newObject("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEWx6fqGZPNJA8JIlNW27DhjmeyYDJwROsaCHc0Xvdz_GQwZXPntlqFQM1XTwPBeTP0A9L3aZGcUNyjHfKp5yaJ44qClfnPVYNCxnwNOTpnME58PKkavVmEs9aRukGQDq2AW3JIXnFKkpw/s400/nieve2_jessi_diyva.png",22,22);
newObject("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhgbONR334ETp3aJzBz06O1u081uZJVZ-n8fIattDNVRNbw0Are7NXKCtGKZ54wD3U_LVIpF_XOQmR8_1TPwGf5HTHpE1hzeaiqfIbdwZyCJLSKFOEdvX1Nx3DI1TQnmvohBOTJJ08Eh9K/s400/nieve1_jessi_diyva.png",22,22);

function winSize(){winWidth=(moz)?window.innerWidth-180:document.body.clientWidth-180;winHeight=(moz)?window.innerHeight+500:document.body.clientHeight+500;}
function winOfy(){winOffset=(moz)?window.pageYOffset:document.body.scrollTop;}
function fallObject(num,vari,nu){
objects[num]=new Array(parseInt(Math.random()*(winWidth-waft)),-30,(parseInt(Math.random()*waft))*((Math.random()>0.5)?1:-1),0.02+Math.random()/20,0,1+parseInt(Math.random()*fallSpeed),vari,fallObjects[vari][1],fallObjects[vari][2]);
if(nu==1){document.write('<img id="fO'+i+'" style="position:fixed;" src="'+fallObjects[vari][0]+'">'); }
}
function fall(){
for(i=0;i<numObjs;i++){
var fallingObject=document.getElementById('fO'+i);
if((objects[i][1]>(winHeight-(objects[i][5]+objects[i][7])))||(objects[i][0]>(winWidth-(objects[i][2]+objects[i][8])))){fallObject(i,objects[i][6],0);}
objects[i][0]+=wind;objects[i][1]+=objects[i][5];objects[i][4]+=objects[i][3];
with(fallingObject.style){ top=objects[i][1]+winOffset+'px';left=objects[i][0]+(objects[i][2]*Math.cos(objects[i][4]))+'px';}
}
setTimeout("fall()",31);
}
var objects=new Array(),winOffset=0,winHeight,winWidth,togvis,moz=(document.getElementById&&!document.all)?1:0;winSize();
for (i=0;i<numObjs;i++){fallObject(i,parseInt(Math.random()*fallObjects.length),1);}
fall();
</script>

3.§ Finalmente, damos click en Guardar.

jueves, 20 de diciembre de 2012

boingPic: Sólo un experimento

Que nadie se crea que esto tiene alguna utilidad práctica inmediata, es para pasar el rato, un experimento que usa jQuery y que no tiene mayores pretensiones. Creado por kelvinluck.com/.

¿Será que todo tiene que tener alguna utiidad?


<style>
/* este es el formulario superior */
#boing-container { text-align: center; }
#boing-container input {
background: #000;
border: 2px solid #444;
border-radius: 4px;
color: #CCC;
padding: 5px;
}
#boing-container input[type=text] {
text-align: center;
width: 400px;
}
#boing-container input[type=submit]{
background-image: -moz-linear-gradient(#888, #222);
background-image: -webkit-linear-gradient(#888, #222);
background-image: -o-linear-gradient(#888, #222);
background-image: -ms-linear-gradient(#888, #222);
background-image: linear-gradient(#888, #222);
cursor: pointer;
width: 80px;
}
#boing-container input[type=submit].loading{visibility:hidden;}
.error{
color: #F00;
font-style: italic;
margin: 5px 0;
}
/* este es el contenedor con la imagen y el efecto */
#picHolder{
height: 200px;
margin: 50px auto;
position: relative;
width: 200px;
}
.block {position: absolute;}
.default { /* los cuadraditos iniciales */
border: 1px solid #FFF;
height: 18px;
width: 18px;
}
</style>

<script>
// recordar que se debe tener jQuery cargado */
// boingPic.js - a javascript experiment by Kelvin Luck - http://www.kelvinluck.com/
$(function(){
var divs;
var $picHolder = $('#picHolder');
function initGrid(w, h, backgroundImage){
$picHolder.empty();
$picHolder.css({'width' : w,'height' : h});
w /= 10; h /= 10;
divs = [];
for (var i=0; i<10; i++) {
var t = i * h; var l = 0;
for (var j=0; j<10; j++){
var css = {top:t, left:l};
if (backgroundImage){
css.background = 'url(' + backgroundImage + ') no-repeat -' + l + 'px -' + t + 'px';
css.width = w; css.height = h;
}
var d = $('<div class="' + (backgroundImage ? '' : 'default ') + 'block" />').css(css);
d.data('t', t); d.data('l', l);
divs.push(d);
$picHolder.append(d);
l+=w;
}
}
}
initGrid(200, 200);
var mouseX = 1000; var mouseY = 1000;
$(document).bind(
'mousemove',
function(e){
var po = $picHolder.offset();
mouseX = e.pageX - po.left; mouseY = e.pageY - po.top;
}
);
var force = 1500;
setInterval(
function(){
var po = $picHolder.offset();
for (var i=0; i<divs.length; i++) {
var $d = divs[i];
var o = $d.offset();
var x = o.left - po.left; var y = o.top - po.top;
var xDif = mouseX - x; var yDif = mouseY - y;
var distance = Math.sqrt(xDif*xDif+yDif*yDif);
var tempX = x - (force/distance)*(xDif/distance); var tempY = y - (force/distance)*(yDif/distance);
$d.css('left', ($d.data('l') - x)/2+tempX); $d.css('top', ($d.data('t') - y)/2+tempY);
}
},
100
);
$imageUrl = $('#imageUrl');
$imageUrl.bind(
'focus',
function(e){if ($imageUrl.val() == 'direccion url de una imagen y click en cargar ...') {$imageUrl.val('');}}
).bind(
'blur',
function(e){if ($imageUrl.val() == '') {$imageUrl.val('direccion url de una imagen y click en cargar ...');}}
);
var $submitButton = $('#loadImage');
$submitButton.bind(
'click',
function(e){
$submitButton.addClass('loading');
var i = new Image();
$(i).bind(
'load',
function(e){
$submitButton.removeClass('loading');
var w = i.width; var h = i.height;
initGrid(w, h, $imageUrl.val());
}
).bind(
'error',
function(){
$submitButton.removeClass('loading');
var $errorMessage = $('<div class="error">la URL de la imagen no es valida</div>');
$submitButton.after($errorMessage);
$errorMessage.hide().slideDown('normal').animate(
{'opacity': .9}, 2000
).slideUp(
'normal', function(){$errorMessage.remove();}
);
initGrid(20, 20);
}
);
i.src = $imageUrl.val() || 'theresnoimagebythatname!';
return false;
}
);
}
);
</script>

<div id="boing-container">
<form>
<input type="text" id="imageUrl" value="direccion url de una imagen y click en cargar ..." />
<input type="submit" id="loadImage" value="cargar" />
</form>
</div>

<div id="picHolder"></div>