Esta es una lista de 90 librerías Javascript y recursos CSS3 para mejorar la UX (experiencia de usuario) en aplicaciones web.
Ahí van.
1. JSDBIO
Empezamos con la madre de las webs de librerías Javascript. Antes de mover un dedo, entra ahí y busca lo que necesitas que seguro que ya está hecho.
2. Codrops
Una web con ideas innovadoras y creativas para mejorar la UX en webapps. Normalmente cada idea tiene el código fuente y una demo, aunque no es tan sencillo como incluir el código en tu aplicación, normalmente tendrás que hacer alguna adaptación. Pero la verdad es que estos de UX saben un rato.
De Codrops he seleccionado los 20 recursos que más me han llamado la atención, son los siguientes 20 enlaces de recursos Javascript y CSS3 🙂
Un montón de estilos CSS3 para botones, fáciles de adaptar a cualquier tema.
El típico efecto para mostrar el progreso de una llamada Ajax. Estos son bastante creativos aunque yo recomiendo PACE.
Menú multinivel muy currado.
Efectos CSS3 para enlaces, fáciles de adaptar a cualquier tema.
Efectos CSS3 algunos de ellos con transformaciones 3D y animaciones para mostrar diálogos modales.
12. Hover Effects for circular icons
Iconos basados en fuentes con animaciones al pasar el ratón por encima hechos con estilos CSS3
13. Tooltip Menu
14. Page Transitions
Efectos muy originales para los típicos ComboBox.
22. Item Blur Effect
El típico efecto de desenfocado para apuntar la atención a un item de una lista al hacer click sobre él
24. jCookies
Librería Javascript para gestionar cookies fácilmente
25. Labs Hakim
Esto en realidad es la web de otro crack de la UX y CSS3. Hakim es el creador entre otras muchas cosas de RevealJS y slid.es.
He seleccionado algunas de sus librerías Javascript y CSS3 que más útiles me parecen.
26. Kontext
Transiciones de página muy curradas
27. Ladda
Una muy buena idea, meter en los botones el indicador de progreso para llamadas asíncronas
28. Fokus
Cuando seleccionas un texto lo resalta, dejando el resto de la página en segundo plano.
29. Avgrund
Efecto para diálogos modales.
30. Meny
Menú lateral con efectos CSS3 en 3D
31. ZoomJS
Pequeña utilidad para hacer zoom a cualquier elemento de una web
32. Stroll
Efectos CSS3 para listas, muy originales (aunque no muy prácticos)
33. Gridster
Este componente me encanta, un grid reorganizable
34. Packery
Muy parecido a Gridster
35. Wireframes
La web más fácil para crear wireframes de tus diseños web
36. Combobox Chosen
La mejor librería javascript para combo boxes, insuperable.
37. Combobox Select2
Otra buena librería para comboboxes en javascript
38. Hammer
Soporte a gestos multi-touch con soporte para móviles
39. TurnJS
Librería Javascript para conseguir el típico efecto de pasar página en un libro
40. MouseTrap
Atrapar atajos de teclado en aplicaciones web a través de Javascript
41. Tinycon
Curiosa idea para mostrar notificaciones en la pestaña del navegador a través de Javascript
42. MorrisJS
Charts con jQuery y RaphaelJS
43. MomentJS
La mejor librería Javascript para tratar fechas
44. NumeralJS
La mejor librería Javascript para tratar números
45. Lazy line painter – SVG Path Animation
Animación de SVG como si los estuvieras pintando a mano
46. IntroJS
La mejor librería Javascript para hacer una introducción paso a paso de tu web
47. ChardinJS
Superponer instrucciones en una web a través de Javascript
48. Iconos estilo metro
Colección de iconos de estilo metro
49. SonicJS
Generador de gráficos para indicadores de progreso
Listado de utilidades para utilizar con Bootstrap
51. Almost Flat UI
Tema casi Flat basado en Bootstrap
52. Jetstrap
Web para generar temas basados en Bootstrap
53. Bootstrap magic
Otra web para generar temas basados en Bootstrap
54. Sticky kit
Plugin de jQuery para fijar elementos en aplicaciones web cuando hacemos scroll
55. Progression
Indica el progreso al mismo tiempo que rellenamos un formulario
56. PageGuide
La mejor librería Javascript para mostrar ayuda contextual en una página web
57. TypeWonder
Web para mostrar tu web con distintas fuentes en tiempo real
58. Minimamente
Animaciones CSS3
59. TimelineJS
Librería Javascript para construir líneas del tiempo
60. CalendarJS
La mejor librería Javascript para mostrar calendarios con eventos
61. PACE
La mejor librería Javascript para mostrar indicadores de progreso de llamadas AJAX. Se auto-configura al iniciarse y tiene varios temas diferentes
62. CustomBox
Plugin de jQuery para efectos en diálogos modales
63. Iconos Flat
La colección definitiva de iconos flat basados en fuentes
64. Knob
El mejor plugin de jQuery para mostrar un selector en forma de dial
65. Sidr
Libraría Javascript muy ligera para añadir un menú lateral multi-plataforma
66. jQuery swatches
Plugin jQuery para mostrar rampas de colores
67. Toolbar
Plugin jQuery para mostrar el típico botón de toolbar
68. PowerTip
Librería javascript para mostrar tooltips
69. Smallipop
Otra librería Javascript para mostrar tooltips
70. iCheck
La mejor librería Javascript para mostrar checkboxes y radio buttons con estilo
Convertir en scrollable cualquier lista a través de Javascript
72. jPanelmenu
73. Switches
Código Javascript y CSS3 para conseguir switches con mucho estilo
74. PageSlide
75. Custom Scrollbar
77. Typeahead
Librería Javascript de autocompletado de campos de texto
78. DropJS
La mejor librería Javascript para drag & drop de archivos en una web
79. CircleSlider
80. Skrollr
Librería Javascript para conseguir efecto Parallax
81. Vex
Librería Javascript para conseguir diálogos modales originales
83. Icomoon
Web que convierte a fuente cualquier icono en formato SVG. Fundamental
84. jquit
85. easings
Colección de todas las transformaciones, animaciones que se pueden conseguir con CSS3
86. morf
87. crumble
Tooltips originales
88. jQuery BlockUI
89. Cycle
90. TimeLine portfolio con CSS3 y jQuery
Muy bueno este post!!!
Gracias Jaime.
Muy buen articulo!! Felicidades
Buenísimo el post. Codrops me resultó un hallazgo genial. No la conocía. Gracias por la info.
Gracias 🙂
Gracias, gran aporte
Hola Alberto,
Felicitaciones que buenos TIPS…
Consulta: estoy buscando una libreria free (plugin viewer) para visualizar documentos como: pdf, xls, doc, jpg, etc.
Puedes recomendarme alguna?
Saludos
Antonio
El primer resultado que me da el buscador es este:
https://viewerjs.org/
Gracias Alberto por la info sin embargo me referia a que si tenias conocimiento de algun plugin especifico.
Saludos
Nunca he tenido que usar ninguno. Normalmente si tengo que hacer una aplicación donde los datos se pueden exportar a PDF o XLS, lo que hago es generar el fichero y que el usuario lo descargue. Así, luego lo puede abrir con la aplicación que quiera. Creo que así es más cómodo.
Saludos.
un super megapost excelente trabajo!!
¿sabes de alguna que sirva para mostrar notificaciones ?
Gracias.
Yo suelo usar esta: https://ned.im/noty/