Colección de recursos javascript de cliente
El ritmo al que está creciendo Javascript es enorme y empezamos a tener demasiadas librerías y recursos donde elegir.
He recopilado una coleccion de recursos javascript y librerías divididas por categorias que os pueden ser muy útiles a la hora de comenzar un proyecto.
Espero que os guste y aporteis aquellas que os resulten útiles a vosotros.
Utilidades básicas
Trabajar con datos en formato fecha nos da más de un dolor de cabeza. Las cadenas de texto siempre nos obligan a validar los datos de la misma manera .. Pequeñas utilidades para facilitarnos la tarea.
moment.js: Libreria para el tratamiento de fechas
string.js : Tratamiento de cadenas
zip.js : Libreria para comprimir y descomprimir ficheros
list.js : Librería para el uso de listas
jurlp: Librería para tratar urls
throw.js: Librería para tratar erroes Http
svg.js : Librería para maniupular SVG
underscore.js : Librería con mas de 80 funciones interesantes en cualquier proyecto.
Compatibilidad entre navegadores
Todos sabemos las diferencias que existen entre Internet Explorer y el resto de navegadores y lo dificil que es obtener el mismo resultado en todos ellos. De ahí que aparezcan librerías para facilitar la tarea.respond.js : Responsive web design para navegadores que no soporten media queries
modernizr.js: Aplica estilos según el navegador en el que se visualice la web.
bootstrap.js: Framework o herramienta de los creadores de Twitter para visualizar bien los elementos de la web
Rendimiento
¿Qué ocurre cuando una web tarda más de la cuenta en cargar? Que el usuario no espera y se marcha a otro sitio. Si no controlamos bien el rendimiento de nuestras páginas, perderemos visitantes. Varias opciones para monitorizar y optimizar la carga de nuestros elementos.head.js: Carga paralela y asincrona del head de tu web
require.js : Gestión de dependencias de javascript. Similar a head.js
clusterize.js: Optimiza la carga de datos grandes
stats.js : Es un monitor de rendimiento para mostrar en la web
memory-stats.js : Otro monitor de rendimiento para mostrar en la web.
Testing
El rápido crecimiento de Javascript está llenando de scripts nuestros proyectos y esto nos obliga a ser más exhaustivos con las pruebas de test y las trazas de log. Hay más opciones que llenar el código de console.log() o terminar haciendo debugger con el firebug. Aqui tenéis herramientas muy útiles en el mundo del testing. Tanto karma como jasmine se merecen un post cada una.persistent-log.js : Utiliza el localStorage para almacenar tus logs
jenkins-cl : Servidor de integración continua. Uno de los más usados
karma.js : Test runner para entornos de integración continua
jasmine.js: Framework de testing usado junto a karma
vorlon.js : Herramienta de testing y debugger de forma remota
travis-cl: Servidor de integración continua integrado con Github
qUnit : Framework de testing usado por Jquery
IDEs online
Muy utilizados para mostrar el resultado de un script, una función, un pequeño desarrollo … en foros, blogs. Muy útiles y parecidos los 3.jsbin: IDE online para el desarrollador frontend
codepen: IDE online para el desarrollador frontend
jsfiddle: IDE online para el desarrollador frontend
Frameworks Javascript
La lucha entre los distintos frameworks javascript, es tremenda. Cada uno de ellos tiene sus puntos fuertes y sus debilidades. Habría que dedicar un post a cada uno para poder argumentar por qué y para qué usar cada uno de ellos. No es el objetivo de este post.angular.js: Framework MVC de Google para crear aplicaciones web.
ember.js : Framework MVC para crear aplicaciones web
backbone.js: Framework MVC para crear aplicaciones web.
react.js : Librería de facebook para crear interfaces de usuario
knockout.js : Librería MVVM para crear interfaces de usuario
riot.js: Libreria para crear interfaces de usuario.
polymer.js: Librería para crear interfaces de usuario usando WebComponents
Imagenes
Las imágenes son esos elementos que le dan un aspecto diferente a nuestra web. Pueden ser las causantes de la pérdida de usuarios, de la lentitud de la web o de colapsar la carga en un movil. Por eso es importante saber trabajar bien con ellas. Os pongo varios recursos para ayudarnos a tratar las imagenes.response.js: Adapta las imagenes al dispositivo en el que se muestra
retina.js: Muestra imágenes nítidas en dispositivos con tecnología Retina Display
caman.js : Efectos en imágenes usando canvas
glfx.js : Efectos en imágenes usando webGL
Texto y fuentes
Hace unos años, nadie se atrevía a meter fuentes de texto nuevas en una web por miedo a que el usuario no tuviese esa fuente, asi que todas las webs estaban cortadas por el mismo patrón (Arial o Verdana). Pero los tiempos cambian y el tratamiento de fuentes también …GoogleFonts: Fuentes almacenadas en Google para usar en la web.
textualizer : Transiciones en los textos de la web.
unicodinator : Valor unicode de un caracter. Muy útil para algunos encodings.
codepoints : Parecido a unicodinator. Quizá más completo con un REST Api para realizar consultas
kerning.js : Formatea el texto con css y javascript
canvastext.js : Formatos sorprendentes en el texto usando canvas
fokus.js : Resalta el texto al seleccionarlo
zoom.js : Amplia zonas de la web con un click
Iconos
Dicen que una imagen vale más que mil palabras, por eso se suelen acompañar los menús con pequeños iconos para asociar mejor las ideas. ¿Pero de donde podemos sacar iconos bonitos y con licencia libre?font-awesome : Iconos vectoriales facilmente escalables usando css.
flaticon : Iconos vectoriales en formato SVG, EPS, PSD …
glyphsearch : Buscador de iconos vectoriales. Utiliza el repositorio de Font-Awesome y alguno mas como Icomoon, Foundation …
freepik : Descarga imagenes con licencia libre
iconfinder : Iconos e imagenes con licencia libre
Paletas de colores
No es fácil escoger los colores de una web. Existen un montón de recursos para ayudarnos a escoger los mejores colores o para ayudarnos a obtener sus coordenadas.colour_bookmark — Consulta la paleta de colores usada en cualquier web
colorhexa — Detalles y conversión de un color
colllor — Genera una paleta de colores a partir de un solo color
Gráficos y Mapas
Cuando un usuario quiere ver datos en su web, suele pedir que se los mostremos en forma de gráfico o con una representación lo más visual posible. Hay varias librerías para poder hacerlo .
canvasXpress : Librería para crear gráficas usando canvas
highCharts: Librería para crear gráficas compatible con Jquery, Mootools y Prototype
flotCharts : Libreria para crear gráficas usando Jquery
chart.js : Librería para crear gráficas usando canvas
jqplot.js : Libreria para crear gráficas usando JQuery
GoogleChart: Librería desarrollada por Google usando Html5/SVG
epoch : Librería para crear gráficas en tiempo real usando SVG. Tiene dependencias con d3.js
gmaps.js: Librería para tratar mapas de google maps de forma muy sencilla
map-icons.js: Aplica nuevos iconos a los mapas de google maps
Formularios
Los formularios suelen ser el punto de entrada de los datos al servidor. Si no controlamos bien lo que el usuario nos envía, puede ser un foco grande de erroresvalidate.js : Librería para la validación de campos en cliente
select2.js : Librería para los select box
selectBoxIt : Librería paralos select box
jquery-File-Upload.js: Librería para la gestión de ficheros
Cookies
Las cookies permiten realizar la comunicación entre cliente y servidor de forma transparente al usuario y almacenar información de utilidad entre otras cosas.cookies.js : Librería para tratar las cookies de forma eficiente y fácil
blockUI : Sincroniza cliente y servidor a través del envío de cookies
Ventanas modales y cajas de dialogo
Las ventanas modales son muy útiles para confirmar un valor enviado al usuario y no permitirle interactuar con más partes de nuestra aplicación.Hay muchas librerías para generar ventanas modales usando Jquery, Bootstrap u otros frameworks de javascript.
avgrund.js : Librería para generar ventanas modales
leanmodal : Libreria para generar ventanas modales usando Jquery
bootbox.js : Libreria para generar ventanas modales usando Bootstrap
Alertas y notificaciones
Las alertas y notificaciones permiten mostrar información en la página de acciones que se vayan realizando entre cliente y servidor.Os dejo algunas librerías para poder generar avisos.
noty.js : Plugin jQuery para mostrar notificaciones
notify.js : Plugin jQuery para mostrar notificaciones
Ingeniera Informatica. Dicen que todos los niños nacen con un pan debajo del brazo ... Yo creo que llevaba un ordenador. Trabajo como programadora en Cic en entornos Java. Apasionada del mundo web y la innovacion social.
Connect
No comments yet.