unijimpe » jQuery http://blog.unijimpe.net Desarrollo Web, SEO, Adsense Mon, 28 Nov 2011 03:18:21 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Seguimiento de descargas con Google Analyticshttp://blog.unijimpe.net/seguimiento-de-descargas-con-google-analytics/ http://blog.unijimpe.net/seguimiento-de-descargas-con-google-analytics/#comments Mon, 31 Oct 2011 02:48:19 +0000 unijimpe http://blog.unijimpe.net/?p=1299 Google Analytics el popular servicio de estadísticas de visitas ofrece muchas características que permiten conocer al detalle la interacción que tiene el usuario con nuestra web. Una de ellas es hacer el seguimiento de todos los …

]]> Google Analytics el popular servicio de estadísticas de visitas ofrece muchas características que permiten conocer al detalle la interacción que tiene el usuario con nuestra web. Una de ellas es hacer el seguimiento de todos los archivos de descargas, esto no se hace de forma automática por lo que hay que agregar un código adicional.

Utilizando Google Analytics

El primer paso es utilizar el código de seguimiento en nuestra página, actualmente se utiliza la versión asincrona la cual se debe colocar justo antes de la etiqueta </head>

  1. <script type="text/javascript">
  2.   var _gaq = _gaq || [];
  3.   _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  4.   _gaq.push(['_trackPageview']);
  5.  
  6.   (function() {
  7.     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  8.     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  9.     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  10.   })();
  11. </script>

En donde UA-XXXXX-X es el código de seguimiento del sitio web el cual lo podemos obtener al registrar un sitio web en nuestra cuenta de Google Analytics.

Seguimiento de descargas con Google Analytics

Si en nuestra página tenemos archivos de descarga, en enlace de descarga es:

  1. <a href="/files/map.pdf">map</a>

Para que Google Analytics pueda registrar las descargas es necesario agregar una llamada al método _gaq.push en donde el segundo parámetro es un nombre con el cual se identificará la descarga.

  1. <a href="/files/map.pdf" onClick="_gaq.push(['_trackPageview','/files/map.pdf']);">map</a>

El código es muy sencillo y hay que colocarlo en cada enlace de descarga que se tenga.

Seguimiento de descargas con Google Analytics y Mootools

Si utilizas Mootools en tu página, entonces puedes utilizarlo para agregar el código de seguimiento de manera sencilla. Para ello a todos los enlaces de descarga le agregaremos un estilo llamado download.

  1. <a href="/files/map.pdf" class="download">map</a>

Luego podemos agregar el siguiente código con el cual se busca todos los enlaces con el estilo download y le agrega la llamada al método _gaq.push.

  1. window.addEvent('load', function() {
  2.    $$('.download').addEvent('click',function() {
  3.       _gaq.push(['_trackPageview', this.get('href').replace('http://','')]);
  4.    });
  5. });

Seguimiento de descargas con Google Analytics y jQuery

Si utilizamos jQuery podríamos modificar el código anterior el cual se convertiría en:

  1. $(document).ready(function () {
  2.    $('a.download').click(function() {
  3.       _gaq.push(['_trackPageview', $(this).attr('href').replace('http://','')]);
  4.    });
  5. });

Seguimiento de descargas automático

Si todas estas formas te parecen complicadas o ya tienes un sitio con muchas páginas y resulta complejo agregar el código de seguimiento, existe una solución llamada Entourage.js el cual agregará de forma automática el código de seguimiento a todos los enlaces que contengan archivos: .pdf, .zip, .doc, .xls, .ppt, .exe, .dmg, .mov, .avi y .mp3.

Para utilizar este método descargan los archivos y copian el archivo entourage.min.js y lo adjuntan a la página donde desean hacer el seguimiento, esto justo antes de colocar el código de Google Analytics.

  1. <script src="js/entourage.min.js"></script>

Esta pequeña librería con un tamaño de solo 579 bytes y que nos facilita de manera muy sencilla el trabajo de hacer el seguimiento de descargas en nuestra página.

Mas Información

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/seguimiento-de-descargas-con-google-analytics/feed/ 4 Publicar Tweets desde tu Website o Bloghttp://blog.unijimpe.net/publicar-tweets-desde-tu-website-o-blog/ http://blog.unijimpe.net/publicar-tweets-desde-tu-website-o-blog/#comments Tue, 18 May 2010 04:23:21 +0000 unijimpe http://blog.unijimpe.net/?p=1167 Like it? Tweet it! es un widget Javascript en jQuery que permitirá a los visitantes a tu sitio web o blog para publicar Tweets directamente sin necesidad de ir al web oficial de Twitter con lo …

]]> Like it? Tweet it! es un widget Javascript en jQuery que permitirá a los visitantes a tu sitio web o blog para publicar Tweets directamente sin necesidad de ir al web oficial de Twitter con lo cual los visitantes ahorrarán tiempo al compartir contenido de su web, facilitando asi la distribución del contenido de nuestro web.

Este widget esta basado en el nuevo API lanzado por Twitter, el cual facilita el login de los usuarios mediante el protocolo OAuth para luego poder publicar tweets desde webs externos.

Instalación

Lo primero es incluir jQuery en nuestro web, luego de ello es necesario incluir el archivo tweet-is.js o podemos hacerlo directamente desde el URL que ellos proveen, esto sería de la forma:

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
  2. <script type="text/javascript" src="http://tweet-it.s3.amazonaws.com/tweet-it.js"></script>

El siguiente paso es crear un elemento HTML que al hacer click mostrará la ventana para publicar el tweet, por ejemplo podemos crear un enlace que tenga un estilo llamado tweet-it.

  1. <a href="javascript://" class="tweet-it">Publicar en Twitter</a>

Finalmente agregamos el método necesario para llamar a la ventana de Tweet It!, el cual mostrará una pantalla para escribir el tweet el cual incluye en enlace de la página que estamos visualizando.

  1. <script type="text/javascript">
  2.     $(document).ready(function(){
  3.         $(".tweet-it").tweetIt();
  4.     })
  5. </script>

Pueden ver el ejemplo funcionando en http://samples.unijimpe.net/tweet-it.html, como pueden ver el resultado es de excelente calidad y los colores se integran muy bien con cualquier web.

Para facilitar el uso de este widget existen un plugin para WordPress, también hay guías para integrarlo con Tumblr y con Blogger. También pueden configurar parámetros adicionales, para ello pueden encontrar mas información en el web oficial de Like it? Tweet it!.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/publicar-tweets-desde-tu-website-o-blog/feed/ 2 Lazy Load: Retrasar carga de imágeneshttp://blog.unijimpe.net/lazy-load-retrasar-carga-de-imagenes/ http://blog.unijimpe.net/lazy-load-retrasar-carga-de-imagenes/#comments Sun, 04 Oct 2009 05:44:57 +0000 unijimpe http://blog.unijimpe.net/?p=1090 Lazy Load es un interesante plugin para jQuery que permite postergar la carga de imágenes en páginas web largas. Las imágenes que están fuera de la zona visible no serán cargadas hasta que el usuario haga …

]]> Lazy Load es un interesante plugin para jQuery que permite postergar la carga de imágenes en páginas web largas. Las imágenes que están fuera de la zona visible no serán cargadas hasta que el usuario haga scroll y desplace la página sobre estas imágenes.

Un clásico y muy buen ejemplo de esta técnica lo podemos ver en el Apple Store donde podemos ver que a medidas que nos desplazamos por la página se van cargando las imágenes.

lazyload

Como utilizar Lazy Load
Para hacer uso de esta librería es necesario incluir el el header de nuestro HTML jQuery y jquery.lazyload.js el cual lo puedes descargar desde el web oficial Lazy Load Plugin for jQuery.

  1. <script src="jquery.js" type="text/javascript"></script>
  2. <script src="jquery.lazyload.js" type="text/javascript"></script>

El siguiente paso es inicializar el llamado a Lazy Load, esto lo hacemos llamando ala función lazyload a todas las imágenes de nuestro html.

  1. $(function() {
  2.     $("img").lazyload();
  3. });

Eso es suficiente para postergar la carga de imágenes en nuestras páginas hasta que estas imágenes estén en la zona visible del browser. Adicionalmente se tienen algunas opciones para mejorar el funcionamiento de esta técnica, por ejemplo podemos mostrar una imagen de fondo mientras se carga la imagen e incluso podemos asignar un mínimo de pixels antes de mostrar las imágenes.

  1. $(function() {
  2.     $("img").lazyload({placeholder : "img/loading.gif", threshold : 100});
  3. });

En el ejemplo se muestra la imagen loading.gif y se mostrarán las imágenes si es visible mas de 100 pixels de la imagen. Pueden ver el ejemplo funcionando en Lazy Load Demo.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/lazy-load-retrasar-carga-de-imagenes/feed/ 3 Vanadium: Validar formularios fácilmentehttp://blog.unijimpe.net/vanadium-validar-formularios-facilmente/ http://blog.unijimpe.net/vanadium-validar-formularios-facilmente/#comments Mon, 21 Sep 2009 04:58:04 +0000 unijimpe http://blog.unijimpe.net/?p=1085 Vanadium es un plugin para jQuery que permite validar formularios de manera sencilla y con pocas lineas de código. Permite validar campos obligatorios, numéricos, email, entre otros.

Validar formularios es muy importante en las páginas para …

]]> Vanadium es un plugin para jQuery que permite validar formularios de manera sencilla y con pocas lineas de código. Permite validar campos obligatorios, numéricos, email, entre otros.

Validar formularios es muy importante en las páginas para prevenir el ingreso de datos inválidos sin el formato adecuado. Obviamente estas validaciones deben estar acompañadas de una validación en el lado del servidor para tener una doble protección. Entonces Vanadium se encarga del proceso de validar formularios de manera sencilla y con una sintaxis muy sencilla de utilizar.

vanadium

Como utilizar Vanadium
Lo primero es descargar el script desde http://vanadiumjs.com/ en cualquiera de sus versiones: vanadium.js que contiene comentarios que puede usarse para editarlo o vanadium-min.js que esta comprimida para acelerar su carga.

Lo siguiente es incluir jQuery (en mi caso utilizare jQuery desde Google AJAX Libraries API) y Vanadium en el header de nuestro html para poder hacer uso de sus métodos.

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  2. <script type="text/javascript" src="vanadium.js"></script>

Lo siguiente es agregar a los campos de nuestro formulario el tipo de validación que queremos aplicarlo, esto se hace agregando estilos a los campos. Algunos de los tipos de validación disponibles son:

  • :required el campo es obligatorio.
  • :integer se aceptan números enteros.
  • :float se aceptan números decimales.
  • :length;n el campo debe tener n caracteres.
  • :min_length;n se aceptan n caracteres como mínimo.
  • :max_length;n se aceptan n caracteres como máximo.
  • :accept el campo checkbox debe ser aceptado.
  • :email el dato debe ser un email.

Luego si por ejemplo tuviéramos un formulario de registro donde el campo de usuario y clave son obligatorios y además el campo email debe aceptar solamente datos del tipo email tendríamos:

  1. <form method="post" action="">
  2.    Username:
  3.    <input name="username" type="text" id="username" size="36" class=":required" />
  4.    Password:
  5.    <input name="userpass" type="text" id="userpass" size="36" class=":required" />
  6.    Email:
  7.    <input name="email" type="text" id="email" size="36" class=":email" />
  8.    <input type="submit" name="btsend" id="btsend" value="Registro" />
  9. </form>

Listo, ya tenemos nuestro formulario validado. Como pueden ver en el el ejemplo los campos se validan cuando se esta ingresando los datos. Ahora si se desea personalizar esta validación solo hace falta modificar los estilos de los mensajes de error y confirmación.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/vanadium-validar-formularios-facilmente/feed/ 37 autoResize para textareashttp://blog.unijimpe.net/autoresize-para-textareas/ http://blog.unijimpe.net/autoresize-para-textareas/#comments Mon, 09 Mar 2009 03:48:00 +0000 unijimpe http://blog.unijimpe.net/?p=990 autoResize es un plugin para JQuery que te permitirá agregarle la opción de autoescalado a los campos de texto según la cantidad de texto que ingreses, esto para evitar mostrar un scroll y ver el contenido …

]]> autoResize es un plugin para JQuery que te permitirá agregarle la opción de autoescalado a los campos de texto según la cantidad de texto que ingreses, esto para evitar mostrar un scroll y ver el contenido completo.

jquery-autoresize

Como usar este Plugin
Para utilizar este plugin, es necesario primero descargar las librerías jquery.js, autoresize.jquery.js, luego lo incluimos en el header de nuestro html.

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="autoresize.jquery.js"></script>

El siguiente paso es crear nuestro formulario en donde a los elementos del tipo textarea le asignamos un ID con el cual posteriormente le aplicaremos el método autoresize.

  1. <form id="comment" method="post">
  2. <textarea name="mensaje" id="mensaje"></textarea>
  3. <input type="submit" name="bt" value="Enviar" />
  4. </form>

Finalmente seleccionamos el elemento utilizando el ID al cual aplicamos el método autoresize, esto lo hacemos una vez que ha sido cargada la página para ello utilizamos el evento ready, esto lo hacemos mediante:

  1. $(document).ready(function () {
  2.     $('textarea#mensaje').autoResize();
  3. });

Pueden ver el ejemplo funcionando en autosize Demo. Como pueden ver es muy sencillo de aplicar este efecto con lo cual conseguiremos facilitar el ingreso de la información. Este script tiene algunas propiedades adicionales que se pueden utilizar para mejorar la presentación de nuestro formulario, para mayor información pueden visitar la web oficial en jQuery plugin: 'autoResize'.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/autoresize-para-textareas/feed/ 2 jQuery SWFObject Pluginhttp://blog.unijimpe.net/jquery-swfobject-plugin/ http://blog.unijimpe.net/jquery-swfobject-plugin/#comments Sun, 25 Jan 2009 19:11:33 +0000 unijimpe http://blog.unijimpe.net/?p=980 jQuery SWFObject plugin es una extensión para jQuery que ofrece toda la funcionalidad de SWFObject para incluir archivos SWFs en páginas HTML.

Si ya tienes una web en donde utilizar jQuery es sencillo utilizar esta extensión …

]]> jQuery SWFObject plugin es una extensión para jQuery que ofrece toda la funcionalidad de SWFObject para incluir archivos SWFs en páginas HTML.

jquery-swfobject

Si ya tienes una web en donde utilizar jQuery es sencillo utilizar esta extensión pues utiliza los métodos proveídos por jQuery para lograr la funcionalidad original de SWFObject. Ahora si por el contrario no utilizas ninguna librería es recomendable el uso de la librería original de SWFObject.

Como utilizar jQuery SWFObject
Lo primero es incluir las librerías necesarias en el header del HTML donde vamos a mostrar los SWFs.

  1. <script src="jquery.js" type="text/javascript"></script>
  2. <script src="jquery.swfobject.js" type="text/javascript"></script>

Luego incluimos el DIV en donde deseamos se muestre nuestro flash, le asignamos un identificador para posteriormente llamarlo con nuestro plugin.

  1. <div id="movie">Flash Movie</div>

Como paso final llamamos al método flash que permitirá asignar que SWF utilizaremos con que dimensiones y en que DIV se visualizará. Hay que llamar a este método una vez que ha sido cargada toda la página para evitar errores de Javascript, esto lo hacemos.

  1. <script type="text/javascript">
  2. $(document).ready(function () {
  3.     $('#movie').flash({
  4.         swf: 'demo.swf',
  5.         width: 400,
  6.         height: 320,
  7.         flashvars: {name1:'jQuery', name2:'SWFObject'},
  8.         params: {wmode: 'transparent'}
  9.     });
  10. });
  11. </script>

Hay que notar la sencillez para indicar las propiedades incluso los flashvars y parámetros adicionales.

Esta es una nueva posibilidad para los que incluimos SWFs en nuestras páginas y la ideal para los que ya estan utilizando jQuery.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/jquery-swfobject-plugin/feed/ 5 Sikbox: Live Search en tu Webhttp://blog.unijimpe.net/sikbox-live-search-en-tu-web/ http://blog.unijimpe.net/sikbox-live-search-en-tu-web/#comments Mon, 17 Nov 2008 05:08:52 +0000 unijimpe http://blog.unijimpe.net/?p=966 Sikbox es un servicio que te permitirá incluir un buscador que uso de AJAX para mostrar los resultados automáticamente, se pueden configurar la interface y los resultados ademas de tener búsqueda de texto o de imágenes.…

]]> Sikbox es un servicio que te permitirá incluir un buscador que uso de AJAX para mostrar los resultados automáticamente, se pueden configurar la interface y los resultados ademas de tener búsqueda de texto o de imágenes.

Sikbox esta basado en Yahoo! Search BOSS para obtener los resultados y jQuery para los efectos y AJAX. Incluye dos tipos de búsqueda: texto e imágenes además de mostrar los resultados con paginación en una misma interfaz.

Como utilizar Sikbox
El uso de este servicio es muy sencillo para ello solo hace falta incluir una línea de código en nuestro web. El código consiste en una llamada a un archivo Javascript de la forma:

  1. <script src="http://sikbox.com/magic.js?d=domain.com&r=5&s=grey"
  2.  type="text/javascript"></script>

Donde se tienen los siguientes parámetros URL los cuales sirven para configuración:

  • d: es el nombre dominio donde se realizará la búsqueda
  • r: numero de resultados a mostrar por pagina.
  • s: estilo a aplicar para los resultados (default, bezel, dark, grey, minimalist).

Como pueden ver el servicio es muy potente y muy sencillo de implementar, en definitiva una excelente herramienta que facilitará la búsqueda de información para nuestros visitantes.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/sikbox-live-search-en-tu-web/feed/ 2 TableSorter jQuery Pluginhttp://blog.unijimpe.net/tablesorter-jquery-plugin/ http://blog.unijimpe.net/tablesorter-jquery-plugin/#comments Thu, 16 Oct 2008 06:08:53 +0000 unijimpe http://blog.unijimpe.net/?p=933 TableSorter es un plugin para jQuery que te pemitirá convertir las tradicionales tablas de datos en tablas interactivas con la posibilidad de ordenar los datos por columnas y todo ello con pocas líneas de código.

Entre …

]]> TableSorter es un plugin para jQuery que te pemitirá convertir las tradicionales tablas de datos en tablas interactivas con la posibilidad de ordenar los datos por columnas y todo ello con pocas líneas de código.

Entre las características mas destacables tenemos: ordenamiento por múltiples columnas, interpreta y ordena por texto, URLs, enteros, moneda, números flotantes, direcciones IP, fecha, hora entre otros. Adicionalmente es soportado en la mayoría de browsers (IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+).

Utilizando TableSorter
Para utilizar esta librería lo primero es descargar la ultima versión de jQuery y luego el archivo jquery.tablesorter.js. Luego de ello incluimos estas librerías en el header de nuestro HTML.

  1. <script type="text/javascript" src="js/jquery.js"></script>
  2. <script type="text/javascript" src="js/jquery.tablesorter.js"></script>

Lo siguiente es incluir nuestra tabla de forma normal, teniendo cuidado en asignarle un identificador y utilizar los tags thead y tbody para separar los títulos del contenido en la tabla como se muestra a continuación.

  1. <table id="myTable">
  4.     <th>Last Name</th>
  5.     <th>First Name</th>
  6.     <th>Email</th>
  7.     <th>Due</th>
  8.     <th>Web Site</th>
  9. </tr>
  10. </thead>
  13.     <td>Smith</td>
  14.     <td>John</td>
  15.     <td>jsmith@gmail.com</td>
  16.     <td>$50.00</td>
  17.     <td>http://www.jsmith.com</td>
  18. </tr>
  20.     <td>Bach</td>
  21.     <td>Frank</td>
  22.     <td>fbach@yahoo.com</td>
  23.     <td>$50.00</td>
  24.     <td>http://www.frank.com</td>
  25. </tr>
  27.     <td>Doe</td>
  28.     <td>Jason</td>
  29.     <td>jdoe@hotmail.com</td>
  30.     <td>$100.00</td>
  31.     <td>http://www.jdoe.com</td>
  32. </tr>
  34.     <td>Conway</td>
  35.     <td>Tim</td>
  36.     <td>tconway@earthlink.net</td>
  37.     <td>$50.00</td>
  38.     <td>http://www.timconway.com</td>
  39. </tr>
  40. </tbody>
  41. </table>

Para finalizar hacemos un llamado a la función tablesorter indicando mediante el identificador a que tabla le aplicamos el ordenamiento.

  1. <script type="text/javascript">
  2. $(document).ready(function()
  3.     {
  4.         $("#myTable").tablesorter();
  5.     }
  6. );
  7. </script>

Con esto ya tenemos nuestra tabla con las opciones para ordenar, obviamente lo que le hace falta es aplicarlo estilos para mejorar la apariencia con lo cual logramos obtener un buen resultado como el mostrado a continuación.

Obviamente este plugin tiene muchas opciones adicionales como definir ordenamientos iniciales, funciones para llamar al ordenamiento desde otros elementos entre otros, todo ello muy detallado y con ejemplos en el web original de TableSorter. Sin duda esta será una herramienta para mejorar la interactividad con la información que deseamos mostrar en nuestros webs.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/tablesorter-jquery-plugin/feed/ 8 jqPuzzle: Puzzles con jQueryhttp://blog.unijimpe.net/jqpuzzle-puzzles-con-jquery/ http://blog.unijimpe.net/jqpuzzle-puzzles-con-jquery/#comments Mon, 29 Sep 2008 18:23:34 +0000 unijimpe http://blog.unijimpe.net/?p=921 jqPuzzle es un plugin para jQuery que te permitirá crear rápidamente Puzzles o rompecabezas utilizando cualquier imagen y así sorprender y entretener a tus amigos y familiares.

Utilizando jqPuzzle
Lo primero es descargar la librería jQuery…

]]> jqPuzzle es un plugin para jQuery que te permitirá crear rápidamente Puzzles o rompecabezas utilizando cualquier imagen y así sorprender y entretener a tus amigos y familiares.

Utilizando jqPuzzle
Lo primero es descargar la librería jQuery y luego jqPuzzle en encontrarás los archivos jquery.jqpuzzle.js y la hoja de estilos jquery.jqpuzzle.css. Entonces el siguiente paso es incluir estos archivos en el header de nuestro HTML que deseamos.

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="jquery.jqpuzzle.js"></script>
  3. <link rel="stylesheet" type="text/css" href="jquery.jqpuzzle.css" />

Luego de ello, incluimos una imagen en nuestro HTML y le asignamos el estilo jqPuzzle de la siguiente forma:

  1. <img src="photo.jpg" alt="My Desktop" class="jqPuzzle" />

Con esto ya tenemos nuestro puzzle funcionado, el cual tiene las opciones de mezclar los bloques, previsualizar la imagen original y mostrar los números con la posición de cada imagen. Una versión funcionando la pueden ver en jqPuzzle.

El puzzle generado por defecto es de 4x4, si quieres modificar estos valores o modificar otras opciones adicionales puedes visitar la documentación de este plugin en jqPuzzle: How to Use

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/jqpuzzle-puzzles-con-jquery/feed/ 0 PNG transparente en IEhttp://blog.unijimpe.net/png-transparente-en-ie/ http://blog.unijimpe.net/png-transparente-en-ie/#comments Wed, 16 Apr 2008 05:38:40 +0000 unijimpe http://blog.unijimpe.net/?p=812 Uno de los problemas mas comunes al implementar páginas HTML es al momento de utilizar PNGs transparentes (En lugar de los GIF transparentes que muestran un borde mordido muy anti-estético) y es que en navegadores Internet …

]]> Uno de los problemas mas comunes al implementar páginas HTML es al momento de utilizar PNGs transparentes (En lugar de los GIF transparentes que muestran un borde mordido muy anti-estético) y es que en navegadores Internet Explorer 5.5 y 6 no se muestran correctamente, para ello le presentamos algunas soluciones.

PNGfix
Esta es una pequeña librería hecha en Javascript que permite corregir el problema de los PNGs transparentes en IE, esto se hace incluyendo un Javascript al inicio del HTML. PNGFix es una librería muy pequeña y muy potente, la puedes descargar en pngfix.js y para utilizarla solo tienes que incluirla en tu HTML de la forma:

  1. 123
  2. <!--[if lt IE 7.]>
  3. <script defer type="text/javascript" src="pngfix.js"></script>
  4. <![endif]-->

jQuery.pngFix
Para los usuarios de jQuery existe un plugin jQuery.pngFix que corrige los PNGs transparentes en IE, el cual es sencillo de implementar, funciona con PNGs utilizados como fondos con CSS, con PNGs transparentes que contienen enlaces. Para utilizar este método, primero debes incluir jQuery luego jQuery.pngFix y luego llamar al método pngFix al cargar la página.

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="jquery.pngFix.js"></script>
  3. <script type="text/javascript">
  4.     $(document).ready(function(){
  5.         $(document).pngFix();
  6.     });
  7. </script>

Hay muchos otros métodos para resolver este problema, pero estos son las mas conocidos y mas documentados. Incluso pueden ver una forma solo utilizando CSS: Cross-browser semi-transparent backgrounds. Espero les sirva este pequeño tip que siempre les puede sacar de apuros.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/png-transparente-en-ie/feed/ 16