No me había tocado trabajar con grandes cantidades de gráficas generadas de manera dinámica en una web, pero en un proyecto relacionado con un backend para una aplicación on-line salto la idea de poder obtener ciertos datos estadísticos de manera dinámica y vistos en forma de gráficas.

Y pensando en la manera de hacer esto de una forma mas menos organizada y tratando de usar solo un paquete, en un momento pense en varias opciones como php y gd está jpGraph, html como las de Google, o varias en Flash y otras tantas en Javascript. Pero al final me decidí a buscar un plugin para jQuery que es la librería que ocupamos en el proyecto en cuestión.

Algunas razones, utiliza pocos recursos y se generan en el cliente liberando recursos del servidor, en momentos de máximos de trabajo.

Tuve una grata sorpresa al ver que hay una gran cantidad de plugins para esta tarea tan especifica y ademas de muy buena calidad.

1.- El primero de la lista es Flot

Flot desarrollado por Ole Laursen, es una libreria Javascript para gráficos de lineas usando jQuery. Esta permite crear gráficas del lado del cliente con funciones como el seno, coseno, etc.

Es potente, fácil de implementar y la estética, al igual que en otros productos para jQuery, es muy buena. Le falta soportar gráficos de torta, pero podemos utilizar la modificación de Flot que se encuentra aquí.

Ejemplos: demos
Descargar: jquery.flot-0.1.pack.js

2.- jQuery Visualize – Para crear gráficos accesibles

jQuery Visualize permite crear gráficas accesibles desde una tabla de datos estándar haciendo uso de canvas. Se pueden crear varios tipos de gráficas como: torta (pie), lineal, área y de barras.

En su sitio podemos encontrar ejemplos muy bien explicados (en ingles). Muy funcional, práctico y sencillo de implementar, jQuery Visualize, una excelente opción.

Sitio: Filament Group

3.- HighCharts – Completo sistema de gráficas

HighCharts, uno de los mas completos sitesmas de graficas, este magnifico plugin para jquery incorpora los más conocidos formatos para mostrar graficas y con una presentación impecable. Animaciones y colores realmente agradables, todo esto con muy bajo consumo.

Sitio: HighCharts
Ejemplos: www.highcharts.com/demo/

4.- Sparklines – Gráficas inline con jQuery

Sparklines es un plugin de jQuery que facilita la creación de gráficos inline. Los datos pueden ser pasados por parámetro o sino a través de funciones JavaScript.

Dispone de una buena cantidad de tipos de gráficos y en su sitio a pesar de estar en Ingles esta muy bien documentado.

Sitio: Sparklines
Descarga: jQuery Sparklines

5.- jqPlot – Gráficos Profesionales con jQuery

jqPlot tambien usa la canvas para generar los gráficas, posee multiples funcionalidades como – Gráficos de Torta – Entradas para una pares de datos X/Y – Entradas para series de datos x1,x2,… – Series de Datos Multiples – Multiples ejes Y – Gráficos Logaritmicos – Ejes con fechas etc…

Las imagenes generadas son de gran calidad y con muy buena presentación. Buenos colores, no están muy cargados y lo mejor es muy simple de usar.

Sitio: Web Oficial jqPlot
Ejemplos: jqPlot

Bien finalmente la decisión es de ustedes hay para todos los gustos y colores. Todo dependerá de lo que esperemos conseguir como resultado.

jQuery como plataforma de desarrollo es grande y vemos el resultado de esto cada día. Casi es difícil de creer pero cada vez que decido buscar un nuevo plugin jQuery para resolver una tarea concreta en mi trabajo me doy cuenta de que la comunidad proporciona constantemente nuevas soluciones de alta calidad de forma gratuita.

El número de contribuciones es muy alto y a mi como desarrollador esto me hace volver cada vez a por más. Supongo que a muchos desarrolladores les ocurrirá algo similar. A veces no somos conscientes del trabajo que todo esto implica y las horas de duro trabajo que conlleva. Muchas gracias a todos por gastar su precioso tiempo en la creación de cosas que todos podemos utilizar.  A continuación una lista de 10 plugins de gran ayuda, que te puedes encontrar actualmente.

Form extensions
jQuery Form extensions es un pequeño plugin para ayudar en forma rapida en las tareas relacionadas con jQuery. Realmente simple, pero para muy útil para cualquier desarrollador, es muy bueno tener a mano para llevar a cabo tareas, especialmente si ya están encapsulados como este.

SimplePager – jQuery paging plugin
La premisa detrás de SimplePager es permitir la creación de la paginación o la configuración con el menor esfuerzo posible. Este plugin localiza los divs, párrafos, elementos de la lista o casi cualquier otro contenido. Simple pero muy poderoso!

El articulo original se encuentra en Ingles pero para el caso de este tipo de plugins, las guías son muy sencillas de seguir. En todo caso si hay alguno que os interese y necesitan alguna ayuda, postearla aquí en los comentarios para ver si les puedo ayudar de alguna manera.

Via: www.tripwiremagazine.com (Ingles)

Muchas veces necesitamos crear sitios atractivos para obtener mayores visitas. Podemos crear sitios atractivos de muy distintas formas; Diseñando páginas con un estilo extravagante, siendo muy minimalista, innovadores, o, utilizando únicamente JQuery y CSS.

En esta entrada os explicaré como crear un sencill0 efecto de “despliege” en una página, para mostrar, el feed RSS, por ejemplo, únicamente con CSS y JQuery.

Via : www.cssblog.es

Panel de control deslizante con jQuery es XHTML totalmente valido y esta nueva versión trae soporte para transparencias PNG de serie, para IE6 con lo cual nos ahorrara unos cuantos dolores de cabeza a la hora de insertar en nuestro proyecto.

A diferencia de versiones anteriores de este mismo script, al deslizar el cuadro este no desplaza el contenido de nuestro sitio sino que lo solapa que a mi me parece mas vistoso que el desplazamiento de todo el contenido del sitio. También se a agregado el botón de login | registro que es que activa o desactiva la función de Slide.

Enlace: www.web-kreation.com
Demo: Slide demo

En mi trabajo vengo utilizando esta librería de forma muy habitual por no decir en todos mis trabajos, he usado otras como mootools o prototype, pero jQuery se lleva la palma de oro por su sencillez y por que hay tanta gente desarrollando con ella que te puedes encontrar casi cualquier cosa que te imagines con lo cual aceleramos una barbaridad nuestro trabajo.

Y es que cuando hay cientos de webs, donde todos los días aparecen nuevos plugins y tutoriales en los que nos enseñan como hacer ta o cual cosa es casi imposible parar la avalancha que en este momento encabeza esta pequeña pero completisima herramienta, framework o librería como quieras llamarle.

1.- Carga el framework desde Google Code.
2.- Usa una chuleta.
3.- Combina todos tus scripts y reducir su tamaño.
4.- Usa las funcionalidades de la consola de Firebug.5.- Mantén las operaciones de selección al mínimo, por el almacenamiento en caché .
6.- Mantén la manipulación DOM al mínimo.
7.- Encapsula todo en un sólo elemento al hacer cualquier tipo de inserción DOM.
8.- Usar ID’s en vez de clases siempre que sea posible.
9.- Dar a los selectores un contexto.
10.- Usar los encadenamientos de forma correcta.
11.- Aprende a usar la animación correctamente.
12.- Más información sobre los eventos delegación.
13.- Usa clases para almacenar el estado.
14.- Casi mejor, usa el método interno de jQuery data() para almacenar el estado.
15.- Escribe tus propios selectores.
16.- Simplifica y modifica el código HTML una vez la página haya cargado.
17.- Carga contenido con Ajax para obtener beneficios SEO y de velocidad.
18.- Usa las funciones de utilidad de jQuery.
19.- Utiliza noconflict para cambiar el nombre del objeto jQuery al utilizar otros frameworks.
20.- Cómo saber cuando las imágenes se han cargado.
21.- Utiliza siempre la última versión.
22.- Cómo comprobar si un elemento existe.
23.- Añade una clase JS a tu atributo HTML.
24.- “Return false” para evitar el comportamiento por defecto.
25.- Versión corta del evento “ready”.

Vía: More than 25 Excellent Tips to Improve jQuery

Buscando información sobre distintos plugs o scripts para un artículo me encuentro en Webintenta con un artículo sobre este escript que viene a simplificar mucho las cosas a la hora de integrar un carro de compras en nuestros trabajos o en nuestra web personal, no lo podemos comparar obviamente con herramientas como Prestashop, Magento o Zencart pero como dije antes para trabajos que desarrollemos y necesiten algo personalizado seguro que nos saca de mas de un apuro y nos ahorramos de escribir un par de lineas de código.

Ha sido desarrollado con jQuery, Php y XML pudiendo personalizar su aspecto fácilmente (con unos pocos conocimientos de CSS), otro de los puntos a favor es que tiene un sistema de validación de lado del servidor.
jCart es fácil de instalar y de configurar. Añade los artículos al carrito en Ajax pero también funciona sin javascript.

Características principales:

• Simple integración en tu web
• Valida en XHTML
• Pesa solo 4 kb con javascript no intrusivo
• Todas las funcionalidades sin javascript
• Validaciones en el servidor
• Fácil de cambiar el CSS y los textos
• Todo el código comentado.

Descarga: jCart
Vía: Webintenta

jQuery es una librería o framework de Javascript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas web. Fue presentada en enero de 2006 en el BarCamp NYC.

Últimamente vengo utilizando mucho este framework y es que lo fantástico de jQuery es su simpleza y rapidez de implementación, ademas de la casi infinita variedad de plugins que existen para poder extenderlo, si a esto le sumamos una de las comunidades de desarrollo más grandes en el mundo del desarrollo web, obtenemos como resultado una herramienta casi imprescindible para los amantes del Web. Bueno lo que les traigo es una recopilación de enlaces con 50 aplicaciones hechas utilizando a este pequeñín, esta en ingles pero se entiende muy bien.

Enlace: www.developersnippet.com
Cualquier consulta la pueden hacer aquí en los “coments” o bien un e-mail.

En esta guía encontramos una manera de crear un Auto-Scrolling con Jquery y un poco de CSS.
Creada por Jenna Smith una desarrolladora de interfaces webs.

Sitio Web : net.tutplus.com