Colección de librerías JavaScript y jQuery, cuarta parte: Texto, Tablas, Listas y herramientas de desarrollo útiles.

Esta sería mi cuarta y última entrada a cerca de las librerías javascript, aún me sorprendo de increíble que es la gente y el mundo web. La verdad, he conseguido una gran colección de plugins y espero que os sirvan de ayuda.

Entradas relacionadas

Primera Parte: Formularios web y validación de datos
Segunda Parte: Tipografía
Tercera Parte: Productividad, mapas, gráficos e imágenes

Manipulación del texto

TOC jQuery Plugin

Esta librería resalta automáticamente en la tabla de contenidos de una página la sección en la que se encuentra el usuario. Se puede configurar por completo, se puede utilizar más de una vez en la misma página e incluye funciones para crear un scrolling suave. El plugin está desarrollado por Greg Allen y por el momento está en su versión Beta. Otro plugin muy similar sería Tocify.

MagicNav: Generador de links para los FAQ

Este plugin te permite crear una navegación con los elementos que elijas de la página, por ejemplo todos los <h1> pueden pasar a formar parte de la navegación.

Cutter.js

Librería que resuelve el problema cuando queremos cortar un contenido a cierto número de palabras pero no queremos cambiar el marcado de la página, el plugin simplemente corta el contenido por donde lo requerimos y se mostrará con alguna acción del usuario que hayamos descrito.

Trunk8

Trunk8 es un plugin para truncar/cortar texto de manera que este no sobresalga del bloque que lo contiene. Este plugin tiene la ventaja de que calcula el espacio que tiene disponible para así determinar cual es la cantidad exacta de palabras que tiene que mostrar. A más a más hay la posibilidad de escoger que hacer con el texto cortado.

Relevancy.js

Esta librería permite ordenar los items de un array por relevancia, el script permite visualizar resultados incluso si se omiten letras o errores ortográficos.

Manipulando Tablas y Listas

HandsOnTable

Esta librería basada en jQuery te permite ensanchar, completar y añadir hileras y columnas en las tablas. También se puede incluir una leyenda, scrolling para que la tabla no llegue a ocupar toda la página, menús de contexto, condicionales y más características. Incluso puedes establecer que los cambios queden guardados.

Todos los datos que generes con HandsOnTable pueden ser copiados y pegados en Excel, Google SpreadSheet o LibreOffice.

List.js

Librería 100% en javascript para todos los navegadores que te permite transformar las listas HTML en contenido flexible fácilmente editable. La listas se podrán sortear y buscar según el criterio establecido e incluso añadir más items con un solo click.

HTML5 Sorteable

Plugin que te permite mover ("Drag & Drop") todos los items de la etiqueta <li> tal y como quieras, funciona con IE 5.5+, Firefox 3.5+, Chrome 3+, Safari 3+, and Opera 12+ y es de un tamaño muy reducido (menor de 1kb).

Pivot.js

Con Pivot podrás resumir de manera muy sencilla y en formato tabla los datos de archivos muy largos. Pivot, de manera automática ordena, cuenta el total o el promedio de los datos que le pasemos. El resultado se muestra en una tabla HTML, los datos de entrada pueden ser en CSV o JSON.

CSV a formato tabla

Librería jQuery con la que podrás convertir todos los archivos CSV (Comma Separeted Values) o TSV (Tab Separeted Values) a tablas HTML.

DataTables

Con esta librería podrás mostrar los datos de diferentes tipos de fuentes como del DOM, un array JavaScript o un archivo JSON del lado del servidor. La librería ofrece casi un sin fin de características como paginación, filtros al vuelo o búsqueda en multiples columnas por tipo de datos. Algunas de estas características se pueden mejorar con plugins de terceros.

Any List Scroller

Con este plugin serás capaz de poder añadirle a cualquier lista una barra de scroll, es altamente customizable. Puedes elegir la orientación de la lista, el número de items a mostrar, scroll automático, tiempo de retraso....

Herramientas de Desarrollo de utilidad.

Yeoman

Yeoman son un conjunto de herramientas que te ayudarán a estructurar nuevos proyectos, compilar de manera automática CoffeeSCript y Compass, comprobar tus scripts con jsHint y optimizar las imágenes. Usa de manera efectiva plugins como NodeJS, Compass, Grunt y PhantomJS. En la actualidad se requiere que instales Node 0.8x.

Grunt.js

Grunt es una herramienta incorporada en la línea de comandos para los proyectos JavaScript, tiene pre-instaladas una docena de tareas basadas en JavaScript como: concatenación de archivos, estructura de proyectos desde una plantilla predefinida, validación con JSHint, minificación con UglyJS, testeo con qUnit, inicio del servidor y muchas otras tareas. Que mejor comprobación que la de uno mismo.

Holder.js

Librería para las "imágenes placeholder" para representarlas correctamente en el navegador, funciona tanto en línea o sin ella y posee una API para dar estilo a los "placeholders" con mucha comodidad.

PxLoader

Librería JavaScript que te facilitará la descarga de imágenes, archivos de sonido o cualquier otro archivo antes de que ocurra ninguna otra acción en tu web. El script te permite colocar un pre-instalador HTML5 para los juegos y web. Puedes monitorizar las descargas e incluso priorizar las descargas marcadas con etiquetas.

Percentage Loader

Con este plugin jQuery podrás visualizar las barras de progreso de una manera muy distinta. El script usa el canvas de HTML5 y gráficos de vector para hacer los gráficos de distintos tamaños. También se pueden usar para mostrar el progreso en tareas largas.

Touchy.js

Librería javascript para manejar los eventos táctiles sin tener dependencias, manera muy sencilla de añadir funcionalidad táctil a tus proyectos cuando se inter-actúen de un dispositivo táctil. Otra librería similar sería Hammer.js

gridster.js

Plugin jQuery que te permite mediante arrastrando objetos crear una intuitivo layout a partir de los elementos de múltiples columnas. Podrás remover todas las columnas a tú antojo que el espacio se irá re-colocando en función de tus necesidades.

Jurlp y URI.js

Ambos son plugins jQuery que nos ayudarán a manipular las URIs de una manera más sencilla y no tan tediosa.

FreeTile

Plugin jQuery que te permite organizar el contenido de un página de manera dinámica y con "responsive layout". Una vez se aplique a un contenedor, sus descendientes intentarán colocarse de manera óptima en el espacio que disponen dentro del contenedor.


Primera Parte: Formularios web y validación de datos
Segunda Parte: Tipografía
Tercera Parte: Productividad, mapas, gráficos e imágenes

comments powered by Disqus