Bibliotecas de JavaScript útiles y complementos de jQuery: parte 2

 

 

 

  • Clase magistral de CSS moderno avanzado, con Manuel Matuzović
  • Clase magistral de diseño para una interfaz de usuario compleja, con Vitaly Friedman

  • Índice
    1. Bibliotecas de manipulación de texto
    2. Manipulación de tablas y listas
    3. Herramientas útiles de JavaScript para el desarrollo web
    4. Último clic
    5. Otras lecturas

    En esta descripción general de dos partes, presentamos algunas de las bibliotecas de JavaScript y jQuery más útiles que podrían ser las soluciones adecuadas para sus problemas comunes. Esperamos que esta descripción general le ayude a encontrar o redescubrir algunas herramientas que pueda utilizar en sus próximos proyectos.

     

    Si tiene un problema y necesita una solución, es muy probable que exista una biblioteca de JavaScript o un complemento jQuery creado para resolver este mismo problema. Siempre es bueno tener estas bibliotecas en sus marcadores o en sus carpetas locales, especialmente si no es un gran fanático de la depuración entre navegadores.

    En esta descripción general, presentamos algunas de las recientes bibliotecas útiles de JavaScript y jQuery que podrían ser las soluciones adecuadas para sus problemas comunes. Es posible que conozca algunas de estas bibliotecas, pero probablemente no conozca la mayoría de ellas. En cualquier caso, esperamos que esta descripción general le ayude a encontrar o redescubrir algunas herramientas que pueda utilizar en sus próximos proyectos.

    Debido a la extensión de esta publicación, la hemos dividido en dos partes para su conveniencia:

    • Parte 1: formularios web, tipografía, ahorro de tiempo e imágenes
    • Parte 2: Texto, tablas, listas y herramientas de desarrollo útiles

    Vista rápida:

    A continuación encontrará una breve descripción general y enlaces a las bibliotecas y herramientas que aparecen en esta publicación.

    • Manipulación de texto: resaltador de sintaxis - URI.js - analizador de URL jQuery - corte de párrafos - truncamiento de texto - generador de TOC - generador de preguntas frecuentes - clasificación de texto por relevancia .
    • Manipulación de tablas y listas: estilo de tablas - listas que se pueden buscar/ordenar - búsqueda visual - listas ordenables anidadas - grandes conjuntos de datos - conversión de CSV a tabla (o Csonv.js ) - tablas similares a Excel - tablas avanzadas
    • Herramientas útiles de JavaScript para desarrollo web: Yeoman - línea de comando para JS - marcador de posición de imagen - cargador de porcentaje - analizador de URL - normalización de URI - eventos táctiles - gestos multitáctiles - Incrustación de Markdown - mejora de accesibilidad - motor de plantillas - selector de archivos - expresión regular extensible - cliente almacenamiento en caché lateral

    Bibliotecas de manipulación de texto

    Prism Un resaltador de sintaxis ligero y extensible. No hay marcas ni nombres de clases específicos de Prism; puede utilizar el marcado estándar. Prism admite el paralelismo con los trabajadores web, si está disponible. Todo el estilo se realiza a través de CSS, con nombres de clases sensatos como .comment, .stringetc. .propertyEl tamaño total del núcleo es de solo 1,5 KB (minimizado y comprimido con gzip).

     

    Complemento TOC jQuery: Generar tablas de contenido Esta biblioteca genera y guía automáticamente al usuario a través de una tabla de contenido en una página. Es personalizable y puede resaltar automáticamente una sección actual del documento. El complemento también es muy liviano, se puede usar varias veces en una página e incluso incluye una funcionalidad de desplazamiento suave para la sección correcta. El complemento está desarrollado por Greg Allen y actualmente está disponible en versión beta. Es posible que también quieras consultar el complemento Tocify jQuery .

    MagicNav: genera enlaces para las preguntas frecuentes Si desea crear una navegación rápida para su página de preguntas frecuentes, puede utilizar este complemento jQuery para generar enlaces de navegación dinámicamente a partir de elementos de la página.

    Cutter.js Esta biblioteca resuelve el problema cuando se requiere cortar el contenido en una cantidad de palabras pero no desea cambiar el marcado. Simplemente corta el contenido a la longitud requerida y permite al usuario volver a ver el contenido completo.

    Trunk8 Trunk8 es un complemento jQuery de truncamiento de texto que corta la cantidad suficiente de texto de un bloque grande de texto para evitar que se desborde. Si bien el truncamiento convencional simplemente limita la longitud de los caracteres, esta biblioteca puede medir el área de contenido para determinar el desbordamiento y elige el texto que mejor se adapta a un espacio determinado.

    Relevancy.js Esta biblioteca le permite ordenar una variedad de elementos según su relevancia. Este script intenta implementar una coincidencia parcial básica que hasta ahora no se ha implementado con éxito. Asigna cadenas a sus respectivos elementos.

    Manipulación de tablas y listas

    Handsontables: tablas similares a Excel para la Web Esta biblioteca jQuery le permite utilizar la expansión y el autocompletado automáticos, así como agregar nuevas filas y columnas. También incluye una leyenda, desplazamiento (para que a medida que la tabla crezca, no ocupe toda la página y se vuelva difícil de manejar), menús contextuales, formato condicional y otras características. Incluso puedes configurarlo para que realice un seguimiento de los cambios realizados en la tabla. Y todos los datos que ingrese en Handsontable se pueden copiar y pegar en Excel, Google Spreadsheet o LibreOffice.

     

    List.js Una biblioteca JavaScript nativa para varios navegadores que transforma listas HTML en contenido flexible que puede editar fácilmente. Hace que su lista sea fácil de buscar y ordenar. Un concepto basado en plantillas le permite simplemente agregar y editar elementos.

    Cree listas ordenables anidadas con jQuery Este complemento le permite crear una lista ordenable donde sus usuarios pueden arrastrar y soltar elementos de la lista en cualquier configuración que elijan. Puede configurar varios atributos, como el número máximo de niveles anidados, así como configurar métodos personalizados (incluidos A jerarquía, A matriz y Serializar). Como alternativa, también existe el complemento HTML5 Sortable , que utiliza HTML5 y jQuery para una funcionalidad similar.

    Pivot.js Con Pivot puedes resumir fácilmente grandes conjuntos de datos sobre la marcha. La biblioteca le permite crear vistas de tablas personalizables desde su navegador. Los resultados de las herramientas de tabla dinámica (que clasifican, cuentan, totalizan o dan el promedio automáticamente) se mostrarán como una tabla HTML que gira a partir de los datos de entrada (CSV o JSON).

    Crossfilter Crossfilter es una biblioteca de JavaScript que admite la exploración de grandes conjuntos de datos multivariados en el navegador. Permite una interacción rápida (30 ms) con vistas coordinadas, incluso con grandes conjuntos de datos que contienen más de un millón de registros. Fue creado para potenciar el análisis de Square Register y permite a los comerciantes dividir y dividir su historial de pagos con fluidez. Al utilizar índices ordenados, la biblioteca acelera el filtrado incremental y, por lo tanto, aumenta el rendimiento de los histogramas en vivo y las listas K principales.

    jQuery CSV to Table Esta biblioteca lee datos de valores separados por comas (CSV) o valores separados por tabulaciones (TSV) y genera una tabla HTML.

    Csonv.js Paul Engel ha lanzado una pequeña biblioteca para recuperar datos CSV relacionales del lado del cliente (JSON). Cuando se utiliza CSV, un archivo representa una entidad; la biblioteca también puede anidar datos relacionales dentro de los objetos resultantes como si estuviera uniendo tablas SQL.

    Complemento jQuery de DataTables La biblioteca puede mostrar datos de diferentes fuentes, ya sea DOM, una matriz de JavaScript o un archivo del lado del servidor con formato JSON. Entre otras características, la biblioteca proporciona paginación, filtrado sobre la marcha y clasificación de varias columnas con detección de tipo de datos. Y las funciones que proporciona DataTables se pueden mejorar mediante muchos complementos disponibles gratuitamente: por ejemplo, con agrupación de filas, filtrado de columnas, cambio de tamaño de columnas, etc. La biblioteca pesa 68 Kb minificada y 20 Kb gzip. De código abierto y publicado bajo GPL y BSD.

    Herramientas útiles de JavaScript para el desarrollo web

    Yeoman Yeoman es un conjunto de herramientas y bibliotecas que ayudan a desarrollar nuevos proyectos, compila automáticamente CoffeeScript y Compass, ejecuta sus scripts contra jshint para una cobertura adecuada del lenguaje y optimiza todas sus imágenes. Utiliza eficazmente complementos como NodeJS, Compass, Grunt y PhantomJS y, de hecho, requiere la instalación de Node 0.8.x.

     

    Grunt.js: herramienta de línea de comandos basada en tareas Grunt es una herramienta de creación de línea de comandos basada en tareas para proyectos de JavaScript. Ya tiene una docena de tareas predefinidas integradas: concatenación de archivos, andamiaje de proyectos a partir de una plantilla predefinida, validación con JSHint, minificación con UglifyJS, pruebas qUnit, inicio del servidor, ejecución de pruebas unitarias con nodeunit y ejecución de archivos supervisados.

    Holder.js Una biblioteca de marcadores de posición de imágenes del lado del cliente para representar marcadores de posición completamente en el navegador. Funciona tanto en línea como fuera de línea y ofrece una API encadenable para diseñar y crear marcadores de posición con facilidad. Puedes usar Holder en diferentes áreas en diferentes imágenes con temas personalizados. Dado que amplía su configuración predeterminada con la configuración que usted proporciona, solo tiene que incluir aquellas configuraciones que desea cambiar. Recetas faciles y rápidas

    PxLoader Una biblioteca de JavaScript que facilita la descarga de imágenes, archivos de sonido o cualquier otro archivo necesario antes de realizar una acción en su sitio web. El script le permite configurar un precargador para juegos y sitios web HTML5. Puede monitorear el estado de las descargas e incluso priorizar las descargas en grupos etiquetados.

    Cargador de porcentaje Con este complemento jQuery, la barra de progreso horizontal común se muestra de manera diferente. El script utiliza lienzo HTML5 y codificación URI de datos (gráficos vectoriales) para permitir gráficos visualmente atractivos y de tamaño variable. Además, se puede utilizar para mostrar comentarios durante tareas de larga duración.

    Resumable.js La biblioteca está diseñada para introducir tolerancia a fallas en la carga de archivos grandes a través de HTTP. Por lo tanto, proporciona cargas múltiples, simultáneas y reanudables a través de la API de archivos HTML5. Eso significa que perder la conexión de red no requiere una carga completamente nueva. Los usuarios también pueden gestionar sus cargas sin pérdida de datos. Sin embargo, debido a la dependencia de la API de archivos HTML5, la compatibilidad actualmente está limitada a Firefox 4+ y Chrome 11+.

    History.js La biblioteca admite elegantemente las API de Historia/Estado HTML5 ( pushState,, ) replaceStateen onPopStatetodos los navegadores. Incluyendo soporte continuo para datos, títulos y replaceState. Soporta jQuery, MooTools y Prototype. Puedes modificar la URL directamente, sin necesidad de utilizar hashes.

    Jurlp Jurlp es un complemento de análisis de URL de jQuery para analizar, manipular, filtrar y monitorear URL hrefy srcatributos dentro de elementos arbitrarios, así como crear elementos de anclaje a partir de URL que se encuentran en HTML o texto.

    URI.js Para trabajar con URL, puede utilizar esta biblioteca de JavaScript, que ofrece una API similar a jQuery. URI.js ofrece formas sencillas pero potentes de trabajar con cadenas de consulta, tiene varias funciones de normalización de URI y convierte rutas relativas/absolutas.

    Touchy.js Una biblioteca de JavaScript que maneja eventos táctiles sin dependencias. Es una forma sencilla de asignar funciones manuales para dispositivos con pantalla táctil a su sitio web. Es posible que también quieras consultar Hammer.js .

     

    gridster.js Un complemento de jQuery que permite crear diseños intuitivos que se pueden arrastrar a partir de elementos que abarcan varias columnas. Incluso puedes agregar y eliminar elementos dinámicamente de la cuadrícula. Está a la par del pan de molde, o posiblemente mejor. Licencia MIT.

    Freetile Un complemento de jQuery que le permite organizar el contenido de la página en un diseño dinámico y responsivo. Una vez aplicado a un elemento contenedor, intenta organizar a sus elementos secundarios en un diseño que haga un uso óptimo del espacio de la pantalla, “empaquetarlos” en una disposición ajustada.

    Strapdown.js Esta herramienta le facilita la inserción de un editor Markdown en su página. No se requiere compilación del lado del servidor. La herramienta es compatible con todos los navegadores y tiene resaltado de sintaxis estilo Github.

    accessifyhtml5.js Eric Eggert ha lanzado un práctico polyfill para hacer HTML5 más accesible. La mayoría de los navegadores modernos funcionan bien con los nuevos elementos semánticos de HTML5; sin embargo, a menudo carecen de los atributos de accesibilidad ARIA que exige la especificación. Este pequeño script agrega esos atributos para mejorar la accesibilidad de los sitios web.

    jQuery++ Una colección con licencia MIT de útiles ayudas DOM como jQuery.cookie, jQuery.formParams, jQuery.within y eventos especiales para jQuery 1.7 que proporcionan utilidades de bajo nivel para funciones que jQuery no admite. Puede descargar una variedad de complementos que desee utilizar e ignorar el resto.

    Hogan.js El motor de plantillas de Twitter que le permite precompilar sus plantillas con anticipación para JavaScript básico. Este motor se desarrolló teniendo en cuenta la compatibilidad y el rendimiento del conjunto de pruebas de Moustache.

    Zepto.js Zepto es una biblioteca JavaScript liviana con una API ampliamente compatible con jQuery. El objetivo principal de la biblioteca es cubrir las funciones jQuery más importantes y, al mismo tiempo, tener una biblioteca modular relativamente pequeña que se carga y ejecuta rápidamente, con una API familiar y versátil. Si usas jQuery, ya sabes cómo usar Zepto. Es posible que también desee consultar Mini.js y CreateJS si está buscando bibliotecas de JavaScript simples y livianas para realizar tareas muy específicas.

    CSSrefresh Un pequeño archivo de script útil que implementa inmediatamente los cambios realizados en su navegador en sus archivos CSS, examinando los archivos CSS en su página web. Los archivos CSS guardados se ejecutan de inmediato.

    Has.js En lugar de rastrear el navegador e inferir características, esta biblioteca proporciona una colección de pruebas independientes y un marco unificado que utiliza detección de características pura para cualquier biblioteca que la consuma. Asegúrese de considerar también otras alternativas .

    Filepicker.io Una solución avanzada para cargar archivos al servidor, así como conversión, sincronización e integración de cargas de archivos con servicios como Facebook, Dropbox, etc. Hay un plan gratuito disponible.

    XRegExp XRegExp , una biblioteca de JavaScript de código abierto con licencia del MIT, proporciona expresiones regulares aumentadas y extensibles. La biblioteca proporciona una nueva sintaxis, indicadores y métodos más allá de lo que los navegadores admiten de forma nativa. Además, eche un vistazo a Matches.js , una biblioteca avanzada de coincidencia de patrones para JavaScript.

     

    FrameWarp Esta biblioteca le ayuda a mostrar páginas en su sitio con un efecto de transición basado en CSS. Tiene una función auxiliar que compara la URL del iframe con la dirección de la página actual. Si tanto el dominio como el protocolo coinciden, Framewarp intentará acceder al DOM del iframe y agregará los métodos APU, uno para ocultarlo y otro para enviar un mensaje al padre.

    Filer.js Eric Bidelman lanzó una biblioteca contenedora para la API del sistema de archivos HTML5. Filer.js reutiliza comandos familiares de UNIX y hace que la API HTML5 sea más accesible para los desarrolladores que han realizado E/S de archivos en otros idiomas. Las operaciones repetitivas (cambiar nombre, mover, duplicar) son más fáciles de gestionar. Es posible que desee consultar DownloadBuilder.js , una biblioteca que admite la concatenación de archivos locales y utiliza el almacenamiento de sesiones para almacenar en caché las solicitudes Ajax/JSONP.

    Almacenamiento en caché del lado del cliente para JavaScript El almacenamiento en caché del servidor es útil para tiempos de respuesta rápidos, pero a veces, especialmente cuando está desarrollando una aplicación web, es posible que necesite almacenar en caché los objetos del lado del cliente en lugar del lado del servidor. Tal vez necesite almacenar en caché algo para usarlo sin conexión o para reutilizarlo más adelante. Ahí es donde entra en juego locache.js . Es un marco de almacenamiento en caché de JavaScript para el almacenamiento en caché del lado del cliente en el navegador utilizando almacenamiento local HTML5. La biblioteca tiene una API similar a Memcache, no tiene dependencias y es muy pequeña. Y la mejor parte: locache se degrada elegantemente cuando el navegador no admite almacenamiento local. Por lo tanto, los usuarios con IE6 e IE7 no obtendrán ningún error, pero como dicen los desarrolladores, "los intentos de almacenamiento en caché se descartarán silenciosamente y las búsquedas siempre parecerán un error de caché". También puede proporcionar una hora de caducidad para los objetos almacenados en caché.

    Último clic

    ReView.js Esta biblioteca proporciona una opción de visualización de diseño web responsiva. Los usuarios pueden “optar por participar” o “optar por no participar” en los estados de diseño responsivo y mantener la preferencia de vista persistente para cada sesión. Desarrollado en JavaScript puro de acuerdo con los principios de la primera mejora progresiva del núcleo (móvil). Es posible que también desee consultar FlexiNavCalc, una biblioteca de navegación receptiva que calcula el ancho de los elementos de navegación en porcentajes para garantizar que la navegación mantenga el diseño hasta que se ejecute un punto de interrupción.

    Una línea directa para todos sus problemas de JavaScript ¿Tiene ganas de darse por vencido? ¿Ya nada tiene sentido? ¿Tus problemas parecen insuperables? ¿No sería fantástico si pudieras hablar con alguien que se preocupa y conoce tus problemas? ¿Por qué no llamas a la gente amigable y de apoyo de JS Hotline cuando tu conocimiento de JavaScript haya llegado a su fin? Garann ​​Means creó JS Hotline como una línea de ayuda para personas que tienen un problema de JavaScript. Este servicio de llamadas impulsado por Pocket Hotline promete ayuda profesional a las personas que necesitan asesoramiento sobre JavaScript. Te convencerán de que no lo hagas cuando no puedas hacerlo funcionar. Y no te costará más que una sonrisa.

    Otras lecturas

    • Descubriendo objetos primitivos en JavaScript (Parte 1)
    • ¿Qué hay de nuevo en Next.js 13?
    • Controles de movimiento en el navegador
    • Autenticación de Node.js con Twilio Verify

    (señor)Explora más en

    • javascript
    • jQuery
    • Codificación





    Tal vez te puede interesar:

    1. 40 bibliotecas útiles de JavaScript
    2. Bibliotecas prácticas de JavaScript y complementos de jQuery
    3. Bibliotecas JavaScript útiles y complementos jQuery
    4. Escribir una mejor biblioteca de JavaScript para el DOM

    Bibliotecas de JavaScript útiles y complementos de jQuery: parte 2

    Bibliotecas de JavaScript útiles y complementos de jQuery: parte 2

    Clase magistral de CSS moderno avanzado, con Manuel Matuzović Clase magistral de diseño para una interfaz de usuario compleja, con Vitaly Friedman Índice

    programar

    es

    https://aprendeprogramando.es/static/images/programar-bibliotecas-de-javascript-utiles-y-complementos-de-jquery-parte-2-804-0.jpg

    2024-05-20

     

    Bibliotecas de JavaScript útiles y complementos de jQuery: parte 2
    Bibliotecas de JavaScript útiles y complementos de jQuery: parte 2

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20