Colección de librerías JavaScript y jQuery, tercera parte: mejora de la productividad, mapas, gráficos e imágenes.

Vamos a continuar con nuestra colección de librerías para el desarrollo web, en este caso hablaremos de plugins que nos ayudaran a ahorrar tiempo y manejar mejor las imágenes, gráficos y mapas.

Primera Parte: Formularios web y validación de datos
Segunda Parte: Tipografía
Cuarta parte: Texto, tablas, listas y herramientas útiles

Productividad.

money.js: conversor de divisas

Esta API Open Source es para la conversión de divisas, es muy flexible, portable y se puede usar en cualquier aplicación, framework o lenguaje. Cada hora se actualizan los valores de las tasas de cambio en JSON.

accounting.js

Esta librería ligera de JavaScript resolverá los problemas que se te presenten cuando quieras formatear números, dinero y monedas. Incluye la posibilidad de mostrar los datos en columnas tipo Excel separando símbolos con números. Tus informes se verán mucho más uniformes y profesionales.

moment.js: formatea fechas

Moment.js te permitirá formatear, analizar y manipular fechas. Podrás calcular fechas a partir de una fecha dada, visualizar las fechas en distintos formatos...

Smart Time Ago

Esta librería jQuery nos permitirá actualizar con mucha facilidad aquellas marcas de tiempo que creemos en nuestro documento. Smart time nos ayudará a calcular el tiempo transcurrido desde la fecha estipulada hasta el momento actual, la actualización del tiempo se hace cada 60 segundos y se puede usar tanto como plugin jQuery como en nodo desdenpm (node packaged modules) para node.js.

sortByTimeAgo.js

Pequeña librería para hacer arrays de objetos con propiedades TimeAgo, se ordenaran de las más nuevas a las más viejas.

Piecon

Librería JavaScript que creará de manera dinámica una barra de progreso en la zona del Favicon y nos mostrará el progreso de la carga de la web.

Notificon: Favicon para notificaciones y alertas

Con esta librería podrás cambiar el favicon en función de las alertas y notificaciones que se muestren en el lado del cliente, en vez de tener que crear un número de Favicons diferentes podemos especificar para cada favicon una etiqueta y vaya cambiando en función de la alerta o notificación.

jQuery Stick´em

A veces nos encontramos que una imagen es demasiado grande y si queremos leer la descripción tenemos que hacer "scroll" hacia arriba. Con este plugin jQuery podrás 'pegar' el contenido que quieras a la barra del scroll para tenerlo siempre visible.

Countdown.js

Con este script podrás calcular cuentas atrás, temporizar tiempo y poder controlar cualquier reloj.

Geolib

Pequeña librería que nos ayudará a obtener funciones de localización como poder calcular la distancia entre dos ciudades, conversión de coordenadas decimales a sexagesimal y viceversa.

Cookies

Cookies es una pequeña librería JavaScript para el lado cliente que nos ayudará a manejar de forma sencilla las cookies que generemos. Captura los valores de las cookies para hacer una rápida lectura secuencial, soporta la carga de AMD/CommonJS y funciona en todos los navegadores, incluso Internet Explorer 6.

firstImpression.js

Infima librería (1kb) que nos indicará si un usuario ha visitado o no con anterioridad nuestra web. La mayoría del código es tan solo código plano portado del plugin jQuery.cookie

Chirp.js: Tweets en tu web

Librería JavaScript que te permitirá visualizar los tweets de cualquier cuenta en tu website. Podemos coger toda la info desde el lado cliente y también se puede configurar para ver los retweets y replies.

SimplyWeather

Simple plugin jQuery que nos mostrará la información del tiempo de la ciudad que escojamos, los datos son tomados del feed de Yahoo.

zip.js

Librería JavaScript para poder comprimir y descomprimir largos archivos en formato zip, hasta 4GB con la API File Writter. Funciona en Chrome, Firefox, Safari 6 y Internet Explorer 10. Para Safari 5 e IE9 deberás deshabilitar los "Web Workers" y usar "Typed array Polifill", en la documentación del plugin encontrarás toda la info para usarlo.

String.js

Librería que nos provee métodos extra para los String como normalizar el texto de strings y manipularlos.

Custom Scrollbar plugin

Plugin para poder modificar el scrollbar. Con el podrás cambiar su aspecto y comportamiento, el plugin ya viene con ejemplos.

Imágenes, mapas, gráficos y librerías de visualización.

jVectorMap

Con el plugin jQuery jVectorMap podrás reproducir mapas de vectores hechos en SVG y VML tanto en los navegadores más antiguos como en los mas modernos. El plugin utiliza JavaScript, HTML, CSS, SVG o VML y no se usa cualquier plugin que sea propiedad de empresas tal como FLASH.

En la web del plugin encontrarás que hay mapas de muchas partes del mundo.

Subway Map Visualization jQuery Plugin

Aunque en el nombre del plugin se haga referencia al mapa del metro no tiene nada que ver con los metros del mundo, con este plugin serás capaz de convertir esquemas complejos en mapas de visualización al estilo metro.

GMaps.js

Librería para que puedas usar Google Maps de manera muy fácil en tus proyectos sin tener que usar mucha documentación ni código.

Otro plugin parecido sería Gmap3 jQuery Plugin

Map Icons

Con Map Icons podrás añadir marcadores e iconos SVG a los mapas que crees con las APIs de Google Maps y Google Places.

Leaflet: Open-Source Interactive Maps With JavaScript

Leaflet es una librería con la que podrás crear mapas interactivos, tanto para mobile como para desktop. El API es de fácil uso y en su web hay toda la documentación necesaria. Se hace énfasis en la usabilidad, rendimiento, flexibilidad y excelente soporte en los navegadores. La librería ya ofrece una variedad de mapas preconfigurados donde podremos incluir marcadores, pop-ups, aparición de imágenes y GeoJSON. Leaflet tiene una estructura modular y permite reducir su espacio para que aún sea más rápida.

SVGeezy

Libraría JavaScript que detecta si hay imágenes SVG en el website y automáticamente crea un respaldo (fallback) para aquellos navegadores que no soporten el escalado de imágenes SVG. Si el navegador no soporta SVG, cambiará el atributo 'src' de la imagen por un formato de archivo que si acepte el navegador.

Retinajs

Este script comprueba cada imagen de nuestra web cuando es cargada por un usuario, para ver si hay la posibilidad de reemplazar las imágenes de baja resolución por su equivalente en alta resolución.

Se asume que estas usando el modificador de resolución de Apple (@2x) para establecer cuales son las imágenes de alta resolución.

JustGage

JustGage es un práctico plugin JavaScript para generar y animar medidores de manera bonita y limpia. Basado en la librería de Raphaël para dibujar vectores por lo que no está ligado a la resolución y es auto-ajustable.

Como que es puro SVG, funciona en casi todos las navegadores IE6+, Chrome, Firefox, Safari, Opera, Android, etc.

Generar un Timeline muy visual

Con esta librería serás capaz de crear una linea de tiempo pudiendo utilizar como fuente medios de Twitter, Youtube, Flickr, Vimeo, Google Maps y SoundCloud y muchos más en un futuro próximo. Puedes rellenar tus datos con hojas de cálculo de Google o usar un método más detallado como JSON. La librería está disponible como Plugin en WordPress o en GitHub.

TimeLine

Otra opción para poder crear timelines, esta en particular es un poco más sencilla que la anterior.

Foresight.js

Librería que reconoce el dispositivo con el que se visita la web, te permite estimar y calibrar las imágenes antes de hacer la petición de imagen. Juzgando la resolución de la pantalla y la velocidad de la red el script cambiará el atributo 'src' para optimizar las imágenes en función del hardware de cada usuario.

Lupa de aumento con CSS3 y jQuery

Técnica que te permitirá crear un efecto de lupa sobre cualquier imagen cuando le pases el cursor por encima. Mediante la propiedades box-shadow y border-radius de CSS3 crearás el efecto de aumento y con jQuery detectas las coordenadas del cursor. El truco consiste en utilizar la misma imagen pero de tamaños distintos.

Flot: Tramas para jQuery

Librería javascript para crear gráficos, soporta Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+. Se pueden usar diferentes tipos de gráficas, acepta la posibilidad de aumentar ciertas zonas, interactuar con los datos y un sin fin de posibilidades. Las gráficas se pueden actualizar con AJAX.

Conjunto de librerías JavaScript para visualizar datos

El título lo dice todo, colección de librerías para mostrar los datos en forma de gráficas, quesos, porcentajes. Encontrarás mas de 40.

Flexisel

Carrusel Responsive jQuery Plugin sobretodo pensado para tener una buena experiencia de usuario en los dispositivos móviles.

Social Count

Plugin para poder insertar botones de las redes sociales en tu web, los hay de todos los tamaños e incluso con imágenes dinámicas.

Último Bocado

jQuery Fundamentals

Este libro HTML ha sido diseñado para que puedas ver los problemas más comunes con jQuery y sus soluciones. En cada lectura tienes la posibilidad de probar los ejemplos con una consola javascript online. A más a más cubre los aspectos más básicos de javascript.

Patrones Javascript

Colección de patrones y anti-patrones en JavaScript, cubre las funciones, jQuery, plugins jQuery, diseño, literales y constructores, creación de objetos, reutilización de código, DOM y navegador.

JavaScript Garden

Colección de documentos para las partes más raras del lenguaje de programación JavaScript. Da consejos de como evitar los errores más comunes y los 'bugs' más imperceptibles, así como la mejora del rendimiento y malas prácticas que los noveles nos podemos encontrar cuando profundizamos en el lenguaje.


En la próxima entrega y última hablaré de tablas, texto, listas y herramientas de desarrollo.

Primera Parte: Formularios web y validación de datos
Segunda Parte: Tipografía
Cuarta parte: Texto, tablas, listas y herramientas útiles

comments powered by Disqus