Messi, plugin jQuery para mostrar alertas, preguntas, mensajes e imágenes

En el proyecto que estoy realizando para el trabajo necesitaba un plugin sencillo que me permitiese lanzar alertas y mensajes con la posibilidad de obtener la respuesta del usuario para realizar una acción en particular.

Hay varios plugins jQuery por ahí que permiten esta funcionalidad, pero decidí desarrollar uno nuevo para aplicar las opciones que más me interesaban y aplicarle un estilo visual personalmente más atractivo y limpio que las soluciones actuales. El plugin que he desarrollado se llama Messi.


Messi (por message, por por el jugador del Barça) permite de un modo sencillo generar un mensaje visual en la página en el que podremos incluir una alerta, un mensaje html (incluso el resultado de una petición ajax) o una imagen.

Con las diferentes opciones de configuración podremos especificar los botones que se deben incluir y asignar un valor a cada uno que se enviará a la función callback que especifique el usuario. Tenemos flexibilidad para indicar si el mensaje lleva un título, si el mensaje se muestra en una “ventana” modal o la posición del mismo.

Además he incluido funciones rápidas para lanzar de forma sencilla un mensaje de alerta (Messi.alert()), una pregunta (Messi.ask()), una petición ajax (Messi.load()) o una imagen (Messi.img()).

Podéis encontrar más información y demos en http://marcosesperon.es/apps/messi/, así como el repositorio de GitHub del proyecto por si queréis verle las tripas o enviarme sugerencias.

Mi primera extensión para Google Chrome

Hoy me he interesado por cómo se desarrollaban las extensiones para el navegador Google Chrome y al final he acabado publicando la primera…

La extensión es para mi blog dolcebita. Con esta extensión instalada podrás visualizar rápidamente las entradas más recientes del blog sin necesidad de salir de la página en la que te encuentres. Al pulsar el icono de dolcebita se mostrará un ventana flotante en la que te aparecerán los artículos más recientes del blog.

Podrás ver una pequeña descripción del contenido del artículo y tendrás opción de compartirlo con tus amigos a través de los botones de envío a Twitter, Facebook y Google Buzz.

En la parte inferior dispones de las diferentes secciones que tenemos para ver las últimas entradas de cada una de ellas y además se ha habilitado un buscador en la esquina superior derecha para realizar consultas sobre un determinado término: iphone, google, apple, microsoft…

El desarrollo de extensiones normalitas para Chrome no es muy complicado para un desarrollador web. Están realizadas utilizando HTML y JavaScript, y siguiendo los pasos del tutorial es sencillo crear extensiones como esta.

¿La instaláis y me comentáis qué os parece? ;)

Ir a la página de la extensión…

Generar PDFs con JavaScript

El nuevo proyecto de James Hall es jsPDF, una librería en javascript para generar dinámicamente archivos PDF.

jsPDF

El script genera una URL para que el navegador (de momento solo soportados Safari, Opera o Firefox 3.5 Beta) abra el documento para visualizarlo. El ejemplo de arriba se contruye con el siguiente código:

JavaScript:
  1. jsPDF.init();
  2. jsPDF.addPage();
  3. jsPDF.text(20, 20, 'Hello world!');
  4. jsPDF.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
  5. jsPDF.addPage();
  6. jsPDF.text(20, 20, 'Do you like that?');
  7.  
  8. // Making Data URI
  9. var out = jsPDF.output();
  10. var url = 'data:application/pdf;base64,' + Base64.encode(out);
  11. document.location.href = url;

Por ahora solo se puede introducir texto pero el autor ya está trabajando en una versión con soporte de imágenes y tipos de fuente. ¡Impresionante!

Vía: ajaxian

Solicitando fullsize como nuevo atributo del elemento IMG

Drew Wilson es un desarrollador web que está proponiendo el uso de un nuevo atributo que él denominó fullsize en los elementos IMG del código HTML.

Como todo el mundo puede comprobar el uso de librerías similares a lightbox que son usadas para visualizar un tamaño mayor de una imagen se ha extendido mucho por la web y es dificil no encontrar un sitio con una galería de fotos que no lo tenga implementado. Básicamente este atributo contendría una versión de mayor tamaño (peso, dimensiones) de la imágen que se asigna en el atributo src, para que los propios navegadores web incluyan nativamente la forma de gestionar esas imágenes.

addfullsize

Mediante la creación de un grupo en Google, Drew intenta recoger todas las sugerencias del resto de los usuarios y hacer fuerza para que el W3C tenga en cuenta esta consideración.

Mientras tanto, nos propone usar ya este atributo en nuestros proyecto y, mediante el uso de plugins para los frameworks más conocidos de javascript, dotarlo de funcionalidad.

Desde su web podeis votar para uniros a la propuesta.

Todo jQuery, mi blog específico para jQuery

Debido a motivos de trabajo últimamente le he dedicado muchas horas al desarrollo en javascript, especialmente usando la librería jQuery.

En determinados momentos me han saltado dudas y preguntas de como realizar determinado proceso y tenía que recurrir a la documentación oficial de la librería y a blogs que hablaran algo del tema.

Para ir recopilando esa información en un único lugar y así poder ayudar a resolver las dudas de otros programadores me he creado un blog alojado bajo WordPress.com relacionado exclusivamente con el mundo jQuery.

Todo jQuery

Todo jQuery es un blog donde encontrarás noticias, tutoriales, ejemplos, documentación y plugins para sacarle más partido a la librería, servir de fuente de inspiración y mejorar en tus desarrollos.

El blog está abierto a las dudas de los usuarios, en la sección de contacto encontrareis las formas para enviar vuestros problemas y/o sugerencias.

Si os gusta el desarrollo web os espero en el blog y en su usuario de twitter: @todojquery

FlipClock, tutorial para desarrollar un plugin de jQuery

Si os gusta el desarrollo web seguro que conoceis el framework de javascript jQuery. Personalmente yo comencé mis primeros desarrollos usando otros frameworks disponibles (sobre todo mootools) pero debido a la popularidad de jQuery y su integración en sistemas como WordPress o Drupal he tenido que adaptarme a esta biblioteca.

A pesar de que jQuery tiene una muy buena documentación comparado con otros proyectos, en su momento eché en falta la información sobre como desarrollar un plugin básico para jQuery explicado de forma sencilla. Así que he desarrollado un pequeño plugin a modo de ejemplo para intentar solucionar las dudas iniciales que podais tener. Para ello vamos a programar un flip clock:

FlipClock for jQuery

(más...)