jqPuzzle: Puzzles con jQuery

  • 29/09/2008
  • 1:23 pm
  • unijimpe

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.

HTML:
  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:

HTML:
  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

Posts Relacionados

Hartija: CSS para Impresión

  • 28/09/2008
  • 2:22 pm
  • unijimpe

Normalmente cuando se implementan Webs estas se preparan para verse adecuadamente en los Browsers, pero no se los prepara para ser impresos de manera correcta, para ayudarnos con este trabajo tenemos Hartija el cual es un CSS especialmente preparado para impresión.

Problemas en la Impresión
Uno de los principales problemas para la impresión son los colores pues normalmente en los webs se utilizan colores que se adecuan a la pantalla que hacen contraste con el fondo del diseño, pero estos colores no son necesariamente adecuados para impresión.

Además de ello no es adecuado en la versión de impresión el mostrar el Menú de navegación, los formularios, la publicidad, etc. Estos deben ocultarse en la versión de impresión.

Utilizando Hartija
Primero deescargamos los archivos de Hartija Downloads, extraemos el archivo y copiamos el archivo print.css al directorio de css de nuestro web. Luego de ello incluimos este estilo en nuestro HTML, ello lo hacemos utilizando el atributo media="print", esto hará que este CSS solo se interprete para cuando accedemos a la versión de impresión mientras que para el browser este se seguirá viendo como antes.

HTML:
  1. <link rel="stylesheet" type="text/css" href="css/screen.css" media="screen" />
  2. <link rel="stylesheet" type="text/css" href="css/print.css" media="print" />

Notese que nuestra hoja de estilos normal es llamada screen.css y la nueva hoja de estilos especial para impresión es llamada print.css. Hasta este punto ya tenemos nuestra versión de impresión funcionando correctamente.

Ocultando Bloques
El siguiente paso es ocultar el los bloques que no deseamos mostrar cuando se imprime nuestra página. Esto lo hacemos agregando es estilo a los elementos que deseamos ocultar, esto lo hacemos al final del archivo print.css.

CSS:
  1. #sidebar, #menu, #commentform, #adsense {
  2.     display:none;
  3. }

Si desean ver el funcionamiento de esta utilidad pueden ver la versión para impresión de este blog, en donde he ocultado, la publicidad, el sidebar, el menú y el formulario de contacto.

Posts Relacionados

Blog Icons: Plugin para Favicons

  • 24/09/2008
  • 12:02 am
  • unijimpe

Blog Icons es un plugin para Wordpress que te permitirá configurar de manera sencillas los favicons para tu blog, todo con un panel de configuración sencillo e intuitivo.

favicon.gif

Nosotros hemos comentado acerca de los favicons en Crear y Utilizar Favicon, pero este plugin además de administrar el favicon tradicional te permite configurar el icono a mostrarse para dispositivos como iPhone e incluso para tus Feeds.

Instalar Blog Icons
Lo primero es descargar el plugin en blog-icons.zip, luego de extraer el archivo copias la carpeta blog-icons al directorio de plugins de tu blog, luego activas el plugin.

Una vez instalado el plugin, tendrás un nuevo panel de configuración en el cual podrás seleccionar: favicon, iPod Touch / iPhone Icon y Feed Icon. Para cada uno de ellos puedes ingresar el URL de la imagen o subir directamente el archivo.

Posts Relacionados