Efecto de click para jQuery

Hoy he estado haciendo unos cuantos experimentos con javascript. La verdad es que no he llegado a donde quería llegar, pero voy a asumir que es debido a que mi capacidad de diseño está atrofiada (y por suerte compensada en otras habilidades).

En fin, lo que estaba intentando hacer es algo como un efecto de click. Me explico. Lo que quería que ocurriera, es que cuando el usuario hiciera click en un enlace, se produjera como una especie de linea de expansión. Pongo un ejemplo. Has visto el tipico anuncio de la Wii, donde al principio aparecen como tres o cuatro círculos concéntricos que se dispersan hasta desaparecer? Pues algo así, pero para cuando el usuario hiciera click con el ratón en una web.

Al final de trastear un rato, hacer unos cuantos experimentos con imágenes, y seguir trasteando con animaciones sencillas, creo que he llegado a una primera aproximación que mas o menos se parece a lo que yo quería.

Básicamente, el ejemplo tiene 2 fragmentos interesantes (tampoco hay más en el html):

El primer fragmento es el que asocia el evento de click a todos los elementos que tienen la clase ‘clickable-round’. Cuando hagas click dentro de un elemento de esa clase, aparecerá un círculo que se irá difuminando.

$('.clickable-round').click (function (event) {
 $(event.currentTarget).jSimulateClick (event.pageX - 1, event.pageY - 1, 'round');
});

El segundo fragmento, asocia el evento de click a los elementos de la clase ‘clickable-square’. Cuando hagas click en cualquiera de estos elementos, el efecto será similar al anterior, pero en vez de mostrar un círculo, mostará un rectángulo que va, desde donde hayas hecho click, hasta cubrir el área del elemento en cuestión:

$('.clickable-square').click (function (event) {
  $(event.currentTarget).jSimulateClick (event.pageX - 1, event.pageY - 1);
});

Si quieres trastear el plugin, los parámetros con los que se puede trastear son el color del borde, el tamaño inicial del borde, la duración de la animación, …

Este javascript se puede usar para aplicaciones personales, comerciales y para lo que se quiera.

Finalmente, agradecería cualquier comentario para mejorar el efecto.

, , ,

Google dejará de dar soporte a Internet Explorer 6

Leo a través de tufunción, y releo en el blog oficial de google, que dejarán de dar soporte para IE6 en Marzo.

Suena fantástico, ¿verdad?

Espero que con este gran paso por parte de Google, las empresas y demás profesionales del sector, dejen de programar para IE6, y sea entonces cuando por fin la gente deje de utilizar IE6. Máxime, habiendo sustitutos gratuitos como Firefox, Opera, Safari, Chrome y como no, las versiones 7 y 8 de Internet Explorer.

Sin IE6, creo que todos los desarrolladores ganamos en velocidad de desarrollo, dejamos de tener quebraderos de cabeza en cosas que no funcionan bien o no se visualizan bien en IE6, y podemos construir un mundo mejor ;)

IE6, ahí donde está, tiene ya sus años. Es un abuelete.

Con amor siempre, pero a ver si se jubila ya ;)

jQuery 1.4.1 está fuera

Unas semanas después de que hayan sacado jQuery 1.4, acaba de salir una nueva actualización de este fantástico framework para javascript.

La nueva versión de jQuery 1.4.1 soluciona algunos bugs e incluye algunas mejoras.

Descárgarte jQuery 1.4.1 y écharle un vistazo a las release notes.


jcontroller: Controlador para javascript con jQuery

Hace tiempo que no escribo, así que he pensado, voy a coger (agarrar para los argentinos) algo que haya hecho en los últimos días para algún proyecto, y voy a hacer un post, que estoy perdiendo usuarios, y esto no se puede permitir :p

El caso es que últimamente he notado que el código en javascript que estaba escribiendo era un poco caotico, sobretodo cuando en la página había varios eventos, etc… Si comprendes lo que quiero decir, es que es un buen momento de que dejes tu también de hacerlo :|

Total, que me dije: “tio, puedes hacer dos cosas”

  • Puedes buscarte un buen controlador o plugin para jQuery (CorMVC),  o incluso buscar un framework como JavaScriptMVC o Jamal
  • O puedes cometer la estupidez de hacer tu propio controlador para javascript

El lector avispado se habrá dado cuenta de lo estúpido que soy.

Pues nada, os presento jcontroller y su versión minificada (con yuicompressor).

Tiene tests (que no incluyo), pero básicamente se pasan en Firefox, Chrome e Internet Explorer. Un segundo que no me cuesta nada… también funciona en Opera. Vale, pues mira por donde que parece que se lleva bien con los browsers (asumo que funciona en Safari).

Entremos en materia:

¿En qué consiste jcontroller?

Básicamente sirve para no tener una maraña de código y controlar un poco las acciones que realizar según los eventos del usuario (normalmente los clicks).

Como contar más cosas es una tontería, os voy a enseñar un ejemplo y ya cada cual que haga lo que le parezca. En este momento es cuando yo paro de escribir el post para hacer el ejemplo en mi ordenador. Este post ha surgido tan repentinamente que no tenía nada preparado… :(

Vale, el ejemplo chorra ya está preparado, sólo comento lo principal:

  • Nada se ejecuta sólo, hay que iniciar el controlador con  la función “init”. Si le das el nombre “controller” pues “controller.init()”
  • El controlador ejecutará la función ‘_init’ que hayamos definido en nuestra implementación, al principio.
  • Las funciones que empiezan con ‘_’ son privadas y no pueden ser ejecutadas desde fuera (excepto _init, _default y _clear)
  • El controlador automáticamente, cuando se carga, mira lo que hay en la parte de hash ‘#’ de la URL, y llama a la función que considere apropiada
  • Aunque ahora mismo funciona todo para detectar los enlaces tipo ‘#whatever’, se puede implementar el “trigger controller” que quieras, devolviendo una función en tu implementación de ‘_init’ (ignora este parrafo de momento)
  • Se pueden definir tantos controladores como quieras, cada uno es independiente a los demás, aunque si todos usan el mismo “trigger controller” todos se van a ejecutar a la vez (ignora este parrafo de momento)

Aquí os dejo los enlaces principales:

Realmente el ejemplo es muy chorra, jcontroller en sí es muy chorra, echadle un vistazo.

Nota: Ahora mismo usa jQuery, pero no creo que lleve más de 10 minutos cambiarlo por otro framework

Finalmente os vuelvo a poner los enlaces, para quien se lo quiera descargar:

Pues nada más que contar por el momento.

Las críticas constructivas son bienvenidas y las destructivas ignoradas.

Un saludo ;)

, ,

Firebug 1.5 peta en los Ubuntu 64-bit

Esta mañana me ha salido la actualización de Firebug 1.5 y cuando he ido a hacer click en el icono… boom!! adiós Firefox.

Según he leido en esta entrada del blog de Firebug, el pete se solucionará en la versión 3.5.8 de Firefox, cuando los de Ubuntu actualicen.

Por si a alguien le ocurre el  mismo problema, hay dos soluciones:

Google Chrome para Linux

Hoy me ha llegado un e-mail de Google diciendo que acaba de salir la beta para linux de Google Chrome. Hasta ahora sólo estaba disponible para Windows.

Por supuesto, me he bajado e instalado esta nueva versión de Google Chrome en Ubuntu 64-bits

La verdad es que me he sorprendido porque la pantalla del navegador sale inmediatamente. Es lanzar el comando y una fracción de segundo más tarde, ya está renderizado el navegador. Hasta ahora me había dado la impresión de que Opera cargaba rápido, pero Chrome parece que va más rápido.

Lo siguiente que me ha gustado, es que el test de mecanografía de ARTypist ha funcionado magnificamente. Me consta que internamente hay mucho javascript  que ejecutar, y va de lujo. Además el CSS también parece que renderiza perfectamente, y eso que no me había molestado en probarlo en Chrome :)

Finalmente, después de visitar otro par de páginas y comprobar que Flash funciona sin yo haber instalado nada (probablemente lo trae de serie, o haya detectado la instalación de flash para Firefox), parece que todo funciona perfectamente.

De momento no me cambio de navegador, seguiré usando Firefox, pero ya puedo hacer tests de las webs en Chrome sin abrir ninguna máquina virtual.

, , , ,

TCPDF excelente libreria para generar PDFs en PHP

El otro día estuve investigando el tema de generar PDFs con PHP.

Lo primero que me vino a la cabeza fué la extensión de PDFlib que incluye PHP desde la versión 4. El problema de esta versión es que me parecía muy a bajo nivel, y tampoco tenía ni idea de por donde empezar.

La lista de funciones de PDFlib que incorpora PHP es bastante extensa, y seguramente se puede hacer de todo, pero no quería estar escribiendo cientos de lineas para hacer una chorrada de PDF, símplemente quería ponerle un fondo y escribir cuatro cosas.

En fin, que buscando más información, acabé encontrándome con la librería TCPDF que parecía muchísimo más completa, y más sencilla de usar. Realmente no se si es más sencilla o no, porque al final no he hecho nada con la extensión de PDFlib, pero TCPDF tiene muchos ejemplos. Hay ejemplos supersencillos de muchas cosas, con lo que hacer un PDF se convierte prácticamente en copiar y pegar de aquí y allá.

La verdad es que con esta librería hice un prototipo de lo que quería hacer en 15 minutos. Puedes pasarle el código en formato HTML y luego la librería lo formatea internamente en el documento. Esto hace que no te tengas que calentar mucho la cabeza.

La única “pega” que le veo, es que ocupa unos 10MB comprimida en zip, lo que son unos 16 megas una vez descomprimida.  En cualquier caso, la mayor parte del tamaño no es por la librería en sí, si no por que dentro lleva ya fuentes tipográficas, la documentación, y ejemplos. Si eliminamos las fuentes que no nos hacen falta y la documentación, se puede quedar en poco más de 1 megabyte descomprimida. Vamos, de lujo.

Más información sobre esta librería en www.tcpdf.org

, ,

Transferir una aplicación de twitter de un usuario a otro

Si tienes una cuenta de twitter tal vez te hayas animado a usar el API de twitter para hacer una aplicación, e incluso te hayas animado a crear una aplicación de twitter bien para integrar el “Sign in with Twitter” o bien para cualquier otro fin.

El caso es que yo estos días he estado integrando en la web de mecanografía el logueo de usuarios con Twitter así como con Facebook (aún no se pueden ver los cambios). Resulta que pensando me dije, oye, quizá tenga también sentido crear un usuario en twitter para ARTypist, y así publicar noticias, actualizaciones, etc… Así que hace un rato he creado el usuario artypist en twitter, pero no podía transferir mi aplicación de un usuario a otro.

Como la opción de transferir no existía, he pensado, tal vez si la elimino de un usuario y la vuelvo a crear en el otro…. pero no! De momento no se pueden eliminar aplicaciones de twitter una vez las has creado!! ¡Zas! en toda la boca!

Total, que he probado lo último que se me ha ocurrido… ¡y ha funcionado!

Para transferir una aplicación de twitter APP del usuario A al usuario B lo único que hay que hacer es entrar con el usuario A, cambiar el nombre de la aplicación de APP a APP2, y finalmente entrar en el usuario B y crear la aplicación APP, como ahora el nombre no está cogido, twitter te deja crearla :D

Ale, ahí queda eso. Espero que a alguien le sirva.

, ,

[SOLVED] La máquina virtualizada con qemu-kvm no se apaga

Estos días he estado trasteando con KVM. Resulta que he migrado un par de máquinas que tenía con VMWare Server 2, y ahora las tengo funcionando con qemu-kvm.

Una de las máquinas virtuales me ignoraba completamente cuando pulsaba el botón de “Shutdown” y “Reboot” en el Virtual Manager .

La máquina virtualizada era un Ubuntu Server, y el problema es que no tenía instalado el paquete acpid.

Todo se ha solucionado tras ejecutar:

$ sudo apt-get install acpid

Una vez el paquete se ha instalado, el botón de ’shutdown’ y de ‘reboot’ han ido a la primera ;)

Por si a alguien le pasa esto mismo en las máquinas Windows (también me ha pasado), el problema es que en la configuración de la máquina virtual dentro de  donde pone <feature> </feature> hay que incluir <acpi/> y <apic/>. Y muy probablemente te toque reinstalar windows o bien reparar windows usando el CD de instalación (creo que hay otra manera sin tener que reinstalar/re-ejecutar el instalador, pero es más rebuscada y ya es cuestión de meterse en google y buscar).

Finalmente, dicho sea de paso, el Virtual Manager me ha sorprendido, es sencillo pero funcional. Si bien no es tan completo como virsh para editar la configuración, lo básico se puede hacer desde modo gráfico, lo cual se agradece.

, , , , , , ,

Cómo averiguar el UUID de un disco o partición en Ubuntu

A veces puede resultar bastante útil, e incluso otras veces imprescindible, averiguar el UUID (Universally Unique Identifier – Identificador Universalmente Unico) de un disco o partición en Linux.

Últimamente, sin ir más lejos, en la configuración para montar las particiones de linux (el archivo /etc/fstab) aparece el UUID de la partición en vez de el device (/dev/hda1, /dev/sda1, …).

En fin, sea por el motivo que sea, si quieres saber cual es el UUID de un determinado device, no tienes más que ejecutar el comando blkid, por ejemplo:

$ sudo blkid /dev/sda1
/dev/sda1: UUID="8b6ec31c-1f41-49f3-82da-d2ab0f0fa312" TYPE="ext3"

Dicho sea de paso, también existe otro método para averiguar el UUID de una unidad. Si tenemos udev (creo que es este el que se encarga), se puede ir a /dev/disks/by-uuid/ y hacer un ls. Por ejemplo:

$ ls -l /dev/disks/by-uuid/
lrwxrwxrwx 1 root root 10 2009-11-19 07:56 8b6ec31c-1f41-49f3-82da-d2ab0f0fa312 -> ../../sda1
lrwxrwxrwx 1 root root 10 2009-11-19 07:56 626adc53-3478-4eb1-9f68-dc0b6f9308e7 -> ../../sda2
lrwxrwxrwx 1 root root 10 2009-11-19 07:56 9cfc5c6d-f343-411e-ac59-31eee6b12a9b -> ../../sda3

La ventaja de este último comando es que no necesitamos tener permisos de administrador.

, , ,

prev posts