Generador gratuito de gradientes CSS3

Pablo

Estos últimos meses pudimos notar en múltiples proyectos un resurgimiento de la utilización de los gradientes en el diseño web.

Hace unos cuantos años estos gradientes se lograban utilizando imágenes que se repetían infinitamente, gracias al avance de CSS y principalmente la mejora en la compatibilidad de los distintos navegadores, un gradiente se puede realizar perfectamente utilizando solamente hojas de estilo.

UIGradients es una fantástica herramienta para generar gradientes, los mismos se pueden obtener de dos maneras distintas: podemos generar nuestro propio gradiente utilizando los colores que nosotros definimos, o bien, simplemente seleccionar un gradiente de nuestro agrado directamente desde la galería del sitio.

galeria gratuita de gradientes css3

Este sitio es una excelente herramienta para seleccionar gradientes con la finalidad de emplearlos como fondo de un sitio, esto principalmente se debe a la forma en que las distintas opciones se muestran (avanzando directamente con nuestro teclado y a pantalla completa).

Una vez que elegimos el diseño que más nos agrada simplemente presionamos la tecla enter y obtenemos la clase CSS lista para agregar a nuestro proyecto.

Por ejemplo, este es el CSS que obtengo al seleccionar una bonita combinación de colores:

Como podrán observar, esta herramienta emplea distintos hacks para que el gradiente se visualice perfectamente en los distintos navegadores, un detalle que otras alternativas similares no contempla.

Web: UIGradients

Plain Pattern: generador de motivos a partir de iconos SVG

Tamara

Desde que iniciamos este blog, siempre nos hemos enfocado en llevarles todos los recursos que creemos les resultan necesarios para diseñar sus propios proyectos gráficos. Y si bien hay herramientas que se siguen utilizando desde ese momento, hay otras más nuevas que se adaptan a las necesidades nuevas y sobretodo, implementando nuevas opciones que ofrece la propia innovación de las plataformas.

En este caso quiero recomendarles un generador de patrones infinitos que a través de un sistema muy simple permite generar todo tipo de motivos utilizando iconos en formato .svg. Lo ideal de este sistema es que naturalmente los archivos de esta extensión son aptos para ser escalados y en ningún momento pierden la calidad o se ensucian, lo que ofrece gran versatilidad de uso a la hora de implementar los patrones en diferentes soportes como pueden ser gráficos o virtuales.

Plain Pattern

El resultado es bastante interesante, se pueden editar todos los componentes de las texturas y utilizar infinidad de elementos para generar la textura ideal que necesita su proyecto. El lienzo puede ampliarse hasta un tamaño considerable lo que los puede ayudar cuando desean utilizar figuras de mayor proporción, además de cambiar sus propiedades básicas como colores, rotación y disposición en el espacio, también pueden se pueden clonar una vez que los han definido para ocupar el área que consideren pertinente.

Plain Pattern es un sistema que funciona muy bien, es simple y rápido, ofrece la forma de subir nuestros propios archivos en formato .svg para generar texturas a partir de cualquier tipo de ícono que tengamos o hayamos construido, ideal para motivos estilo plano que se utilizan en una gran variedad de diseños actuales. El resultado de descarga se realiza en formato .png y siempre podrán previsualizar su imagen antes de decidirse, aunque no tiene limitaciones de ningún tipo en ese sentido.

Visitar: Plain Pattern

Pexels: Imágenes gratis en buena calidad

Isabel

Últimamente se utilizan mucho los sitios con imágenes de fondo. Ya hemos comentado que si deciden hacer esto para un nuevo proyecto hay que considerar que la imagen debe ser de buena calidad. Un error en medidas hará que la misma se adapte y se vea borrosa o ¡peor! en mosaico. Sin embargo, si sabemos aplicar este estilo el resultado se ve genial dependiendo la temática y nos mantendremos en la tendencia, que muchas veces es la idea o lo que mas quiere un cliente.

La opción de pagar siempre está pero la gran mayoría busca imágenes libres y gratuitas para poder además cambiarlas periódicamente. Cada vez son mas los sitios que las ofrecen, recuerdo que años atrás las opciones eran realmente pocas y se contaban con los dedos de una mano pero ahora se abrió un gran abanico de posibilidades.

Pexels: Imágenes gratis en buena calidad

Pexels es una de ellas. Imágenes de buena calidad, gratis y con licencia CC0, o sea Creative Commons Zero. Esto significa que podemos copiar, alterar, distribuir y aplicar las fotos en donde deseemos sin ningún tipo de reglas ni restricciones. Genial, ¿no?, lo que muchos buscamos ante nuevas ideas, para diseñar por placer o para ilustrar lo que intentamos transmitir en un artículo.

Actualmente el sitio cuenta con mas de mil fotos y prometen sumar treinta cada semana. De momento vienen cumpliendo, algo genial si consideramos que son seleccionadas manualmente para garantizar la calidad de la mejor forma. Por otro lado los riesgos son mínimos ya que utilizan como base sitios de fuentes confiables como Unsplash, del cual les habló Pablo hace un tiempo.

Pexels: Imágenes gratis en buena calidad

Al entrar a Pexels podemos recorrer directamente las imágenes recientes y las populares con scroll infinito o bien buscar mediante temáticas utilizando etiquetas o términos. Consideren que generalmente van a encontrar una cantidad muy superior si se manejan con palabras en inglés, algo que incluso si no conocen el idioma es fácil de hacer hoy, mediante cualquier sistema de traducción.

Debajo del cuadro de búsqueda también se ofrecen mas de una docena de palabras que se detecten entre las mas buscadas de ese momento. Al ingresar en una imagen veremos las etiquetas relacionadas, la fuente donde se encontró, las medidas, el peso y de estar disponibles datos como la fecha y cámara con la cual se tomó. También podemos compartirla en redes sociales si simplemente nos gustó. ¿Sin ganas de recordar entrar diariamente? podemos registrarnos para recibir cada semana las nuevas fotos.

Un buen sitio que podemos sumar a nuestras fuentes de imágenes, confiados en que muy probablemente será útil en un futuro. Recuerden como siempre leer la licencia CC0 claramente ante cualquier duda.

Web: Pexels

SaferTaxi: Pedir taxis con el móvil de manera segura

Isabel

Después de ya bastante tiempo probando aplicaciones de todo tipo y saber que solo unas pocas destacan realmente, parte mia desconfía cuando prometen demasiado. La semana pasada fue bastante movida y por diferentes problemas no me quedó otra opción que tomar un taxi, algo que en esta ciudad y calculo que en muchas, suele llevar un buen tiempo en horario laboral.

Entonces recordé SaferTaxi y que estaba en la lista de apps dentro de la cual voy guardando las que analizaré para mostrarles aquí. Me sorprendió no solo la sencillez sino la velocidad con la que trabaja en comparación con las pocas alternativas que existen en esta parte del mundo.

Primero lo primero: la idea de sus creadores es modernizar la forma en la cual nos manejamos en taxi en América Latina. Básicamente lo que podemos hacer es pedir un taxi desde donde estemos con nuestro dispositivo móvil y al obtener una serie de datos viajar de manera mas segura, punto súmamente buscado e importante aquí en Argentina donde la inseguridad crece día a día. Para esto la herramienta se conecta con empresas, taxistas particulares y por supuesto con los posibles clientes mediante una aplicación que variará levemente dependiendo cual de esos sectores la maneje.

SaferTaxi: Pedir taxis con el móvil de manera segura

A las empresas les asegura la posibilidad de implementar pagos electrónicos, control de viajes para sus empleados y vínculos con hoteles y restaurantes. Los taxistas particulares obtendrán viajes adicionales por motivos obvios ya que son solicitados mientras se mueven en su ruta por los pasajeros mas cercanos.

Finalmente, la parte en la que voy a enfocarme porque es la que puedo probar personalmente, es la de los usuarios. Al pedir un taxi la herramienta busca los móviles mas cercanos, muestra luego sus datos (nombre de chofer, modelo de auto y patente) pudiendo rechazar la opción para pasar a la siguiente o bien aceptar y esperar que llegue a donde estamos.

La primera vez debemos registrarnos o conectar con Facebook. Una vez hecho esto para pedir un taxi debemos ingresar la dirección en la que estamos o bien esperar que sea detectada (aunque luego debemos aclarar con mas detalle la altura) y pedirlo. Durante unos segundos se buscarán los coches cercanos disponibles y cuando estén cargados se irán mostrando con sus datos y calificación.

Una vez que estemos esperando veremos dentro del mapa en tiempo real por dónde viene el auto y se activará un botón de llamada en el caso de ser necesario comunicarnos con el chofer (algo que también podríamos hacer luego si, por ejemplo, olvidamos algo dentro al bajar). Al iniciar el viaje seguiremos en el mapa observando por dónde nos lleva el recorrido y la aplicación pasará al estado “en trayectoria”. Finalmente al bajarnos podemos calificar tanto al chofer como al móvil para que otros usuarios sepan lo que nos pareció SIN pagar adicional a lo que marca el reloj.

Existe también un sistema de premios que está siendo implementado lentamente pero que promete en un futuro incluso viajes gratis, aunque debemos esperar para ver en qué países comienza a funcionar ya que SaferTaxi se encuentra en Argentina, Brasil, Chile, Uruguay.

En mi experiencia funcionó mas de una vez. Si les toca un chofer poco amigo de la tecnología posiblemente sea raro el encuentro, con un tímido “¿lo pediste con el celular?” de parte suyo :P pero nada que no resulte hasta gracioso. Se nota que de a poco todos nos acostumbramos a estos cambios. El único problema mínimo que tuve fue que al chofer no se le actualizaba correctamente su app aunque esto en realidad fue por el 3G que aquí deja bastante que desear. Por otro lado, si bien aseguran que todos sus móviles cuentan con WI-FI, uno de los que tomé no cumplía en ese aspecto.

Web: SaferTaxi

Iconos circulares estilo plano con opciones animadas

Tamara

Dentro de la gran cantidad de opciones que nos ofrecen hoy en día los recursos gratuitos, encontramos que cuando un estilo se pone de moda, recibimos toneladas de alternativas que cubren todo tipo de calidades. Seleccionar un ícono sea cual fuere su función, nunca es fácil y a pesar de que supuestamente ya tenemos todo hecho, la realidad es que siempre que lo vayamos a aplicar nos faltará algo para que todo quede completo.

Allí entra nuestra capacidad de adaptar lo que tenemos a lo que necesitamos y cómo hacer que todo en un proyecto se vea armónico y que cumpla su fin determinado.

Este set que comparto hoy con ustedes, puede no ser el más enorme del mundo pero posee algo que hasta ahora no había visto en los paquetes masivos de iconos circulares. Está claro que la gran mayoría de ellos se diseñan en una base plana pero hasta ahora, jamás había encontrado gifs animados que jueguen con la naturaleza práctica del pequeño diseño.

Free Flat and Animated Icons

Descargar Free Flat and Animated | Redworks

Muy atrás en el tiempo, en alguna vieja época han poblado el mundo y desaparecieron como las canchas de Paddle, regresan tímidamente para ofrecernos una alternativa simple y práctica para implementar algo de animación en nuestros estáticos diseños.

Si bien estamos acostumbrados hoy en día a los movimientos funcionales como fondos, imágenes y desplazamientos, cierto es que para animar un objeto en particular debemos conocer hoy en día técnicas que quizás nos son ajenas y esta opción puede ser muy interesante a la hora de implementar algo de animación, aunque más no sea un pequeño detalle.

Encontrarán en el paquete las versiones animadas en tres tamaños, así como las opciones en .PNG y los vectores correspondientes, archivos que podrán editar aunque necesitarán algunos conocimientos más intensivos para volver a realizar las animaciones.

Como dije anteriormente, son solo 12 íconos que incluye este set, pero la realidad es que resulta muy versátil y teniendo la base vectorizada, si es que no necesitamos las animaciones, poseen elementos combinables que se pueden complementar con otras formas externas y generar nuevas alternativas que cubran, finalmente, todos los espacios que necesitamos.

Listas de tareas para organizar proyectos grupales

Isabel

Si bien los mas avanzados gestores de tareas son realmente útiles y sin dudas la mayoría de nosotros los utilizamos, a veces es bueno recurrir a lo simple por motivos que pueden variar. Al momento de crear una nota, por ejemplo, sabemos que contamos con procesadores de texto, documentos en Google y una infinidad de alternativas pero si buscamos algo realmente rápido es posible que optemos por sitios como Notepad.cc. Lo mismo ocurre al organizar un proyecto.

Taskify se aleja de las funciones complejas para crear una aplicación web donde podremos crear tareas en segundos. No se requiere registro alguno, ni suscripción de ningún tipo. Al ingresar ya veremos el campo para titular el proyecto y comenzar a trabajar sin perder tiempo.

Por ejemplo, titulamos: “Nuevo portfolio” e ingresamos. Seremos redirigidos a nuestra creación pero antes aparecerá una ventana ofrenciendo la URL, que será taskify.us/nombredeproyecto y tres vínculos para invitar contactos si lo deseamos en Facebook, Twitter y Google+. Luego sí llegamos al proyecto, de momento en blanco pero dividido en tres sectores: tareas, en progreso y finalizadas. De más está explicar que se irán moviendo a medida que avanzamos con el trabajo.

Listas de tareas para organizar proyectos grupales

Ingresar una tarea no es para nada complicado y suma algunos detalles útiles. Además de la descripción allí mismo podemos asignarla a otro miembro del equipo o a nosotros mismos, colocando también la fecha límite que tendrá. Los ítems son fácilmente identificables por color para cada integrante y muestran los tres datos que antes comentaba en un mismo cuadro. Cuando terminamos nuestra tarea, nos dirigimos al pequeño icono correspondiente y la pasaremos a la etapa de actividad o bien será parte de las finalizadas.

Lo cómodo de esto es que todos lleven un control de lo que se está realizando para no hacer lo mismo sin querer o poder dedicarnos a otra etapa mientras se termina con algo. Lo relacionamos directamente al ámbito profesional pero si pensamos un segundo notaremos que casi todo requiere organización y pueden aplicarse planes para un evento o trabajos de un grupo de estudio.

Al no requerir registro es buena alternativa cuando trabajamos con gente que no suele utilizar este tipo de gestores. Todos ingresarán al proyecto por medio de la URL y tendrán los mismos permisos para editar, crear o eliminar tareas, accediendo a los nombres del grupo y las fechas que fueron repartidas.

Los desarrolladores cumplen perfectamente con lo que prometen, armando una aplicación rápida, simple, efectiva y que no pide ni datos ni mucho menos un abono mensual.

Web: Taskify

Set gratuito de iconos transformables [CSS3 + JavaScript]

Pablo

Marka es un bonito set de recursos que emplean el concepto de transformación-mutación y se encuentra en una etapa experimental. En resumidas cuentas este conjunto de iconos cuenta con la capacidad de mutar, por ejemplo, un icono que representa un + (agregar) puede cambiar a un – (quitar o eliminar).

El cambio se realiza por medio de una animación bastante bien lograda, para crear esta animación se utiliza CSS3 y JavaScript. Su utilización es extremadamente sencilla, no requiere complejas instrucciones, apenas vamos a necesitar unas pocas lineas de código para emplear este recurso.

iconos css3 transformables

El set se encuentra compuesto por un total de 36 iconos distintos listos para utilizar, los mismos se pueden combinar de distintas formas, actualmente tenemos tres formatos distintos para emplear como fondo: cuadrado, triángulo y circulo. Estos permite generar muchos más iconos simplemente realizando combinaciones de los disponibles en el recurso.

Ejemplo de uso:

var m = new Marka('#icon');
m.set('circle')
    .color('#FF6600')
    .size('50');

El color de los iconos se modifica por medio de hojas de estilo (también se puede definir desde JavaScript como se ve en el ejemplo), si alguna vez utilizaron Font-Awesome o Bootstrap (Glyphyicons) no tendrán ningún problema para aplicar estos iconos a sus proyectos.

A la hora de descargar Marka tenemos dos opciones: descargar el set completo, o bien, realizar la descarga selectiva, en el sitio oficial pueden generar una descarga personalizada seleccionando solamente los iconos que van a necesitar, evitando sobrecargar nuestro proyecto con un peso innecesario.

Web: Marka

Plantillas responsive gratuitas para Blogger

Tamara

Muchos de nosotros hemos comenzado a escribir en la plataforma de Blogger cuando esta resultaba extremadamente confusa, incompleta y en donde solo se podía seleccionar el color de nuestro blog sin poder definir certeramente cómo queríamos que se vieran las cosas. Siempre se ha tratado de una plataforma mayormente estática que no invita al usuario (que generalmente no sabe mucho de maquetado), a modificar y personalizar su blog para que quede más o menos atractivo a la vista del usuario que lo visita.

Claro que las cosas fueron cambiando, los usuarios se fueron capacitando y el mismo Blogger se fue adaptando a las necesidades de quienes lo utilizaban, muy lentamente si, pero a fin de cuentas con algunos conocimientos básicos hoy en día podemos personalizar una plantilla lo suficiente para que no resulte un espanto a la vista.

Personalmente jamás me gustaron los diseños que trae consigo el sistema, creo que tiene muchos espacios desperdiciados y, cómo explicarlo, es como si estuvieran hechos para que se note que corren bajo Blogger, cosa que no es necesariamente mala, pero tampoco es grandioso, por ejemplo en el sistema de comentarios que hoy en día han reemplazado por los de Google y es posible incorporar los de Disqus para aquellos que lo deseen.

Por otro lado, y a raíz del inestable precio del dólar en nuestro país y por lo tanto del valor de los dominios y algunos hostings, es probable que muchos usuarios que antes mantenían su propio sitio, se inclinen nuevamente a las plataformas gratuitas, encontrando en Blogger un aliado, ya sea por familiaridad o porque lo han utilizado en el pasado o porque sacando WordPress, es una de las mejores a pesar de sus contras instrumentales.

Para todos aquellos que estén buscando alternativas modernas para implementar en sus propios sitios de blogger, hay una serie de plantillas adaptables que les resultarán de suma ayuda. El único gran problema con ellas es que, en casi todos los casos, deberán si o si editar el código para lograr que todo quede como corresponde ya que muchos menús y cuestiones funcionales necesitan ser editadas desde allí. No es un gran problema y pueden utilizar su editor amigo como siempre lo han hecho en WordPress o sitios en HTML, pero tienen que tener esto en cuenta a la hora de elegirlo y saber dónde ir a buscar las cosas para que la plantilla no se rompa. En especial porque suelen ser muy sensibles a la edición.

Compilado de Plantillas Responsive para Blogger

No quiero asustarlos con el tema de la edición, lo ideal es que las prueben y vean si tiene buena respuesta a su contenido y si las fallas pueden solucionarse a través de la implementación de widgets que suelen ser de gran ayuda en estos casos. Una vez que las tengan terminadas, casi no notarán la diferencia con cualquier otra plantilla que se soporta en plataformas afines que requieren nuestro propio espacio en un servidor y al mismo tiempo podrán contar con una versión adaptable a las resoluciones.

Metro Classic Responsive

Descargar Metro Classic Responsive | Ver Demo | Templateism

News Pro

Descargar News Pro | Ver Demo | SEOBloggerTemplates

Siril

Descargar Siril | Ver Demo | BlogTipsNTricks

Flat UI

Descargar Flat UI | Ver Demo | Btemplates

Moveism

Descargar Moveism | Ver Demo | Templateism

Moksha

Descargar Moksha | Ver Demo | SEOBloggerTemplates

Ravia

Descargar Ravia | Ver Demo | BlogTipsNTricks

Journey

Descargar Journey | Ver Demo | Templateism

SEO Mag

Descargar SEO Mag | Ver Demo | SEOBloggerTemplates

Zett

Descargar Zett | Ver Demo | BlogTipsNTricks

Gagism

Descargar Gagism | Ver Demo | Templateism

Blue Blog

Descargar Blue Blog | Ver Demo | SEOBloggerTemplates

Wizz

Descargar Wizz | Ver Demo | BlogTipsNTricks

Red Hood

Descargar Red hood | Ver Demo | Templateism

Professional Blogging

Descargar Professional Blogging | Ver Demo | SEOBloggerTemplates

Existen también algunas versiones premium que pueden ser de mejor ayuda ya que suelen contar con asistencia de los creadores, eso podrán verlo fácilmente en los espacios de descarga ya que siempre se agrega el precio de la opción premium. Pero si tienen algunos conocimientos básicos sobre maquetado y cómo funcionan estas plantillas, no tendrán problemas para adaptarlas a su blog.

Sepan que no hay ninguna de estas plantillas que no requiera editarse, ya que la naturaleza de Blogger así lo precisa, pero en última instancia, recuerden siempre realizar una copia de seguridad antes de implementar cualquier cambio, para evitar que se pierda información.

InoReader: lector de feeds liviano

Isabel

Tiempo atrás cuando nos despedíamos de Google Reader todos comenzamos a migrar a nuevas alternativas. Un pequeño porcentaje dejó de leer sitios vía feed pero para la mayoría era algo casi imposible ya sea por temas laborales o de ocio.

Actualmente Feedly cuenta con el mayor número de usuarios pero tanto alguno de ellos como el resto puede llegar a querer probar alternativas por diferentes motivos. Feedly es una herramienta potente y que en mi caso, por ejemplo, funciona de maravillas para lo que yo necesito. Aun así, el abuso notificando sus promociones o algún otro elemento puede ser tentador para encontrar un reemplazo. Quizás en web va bien pero buscan algo mas liviano para los dispositivos móviles.

InoReader es ideal para los que quieran una herramienta que tenga como prioridad la velocidad. Visualmente cumple y es realmente simple, sin elementos que puedan generar una demora en su carga, sobretodo si consideramos que las noticias en sí ya deben cargarse y muchas veces tardan dependiendo nuestra conexión. Como siempre para ingresar tenemos varias opciones: Google, Facebook y correo electrónico, ingresando a un registro tradicional. Una vez hecho esto, debemos comenzar a cargar el contenido que deseemos.

InoReader: Lector de feeds liviano

El mismo sitio nos invita a esto pudiendo sumar un feed mediante su dirección o bien recorrer las categorías ya armadas con una selección realmente variada. Cuando estemos leyendo, sobre el lado derecho se verá una columna que ofrece sitios relacionados para descubrir y además muestra aquellos que se encuentran inactivos para poder renovarlos y lograr un contenido personal actualizado.

Podemos marcar feeds como favoritos para un rápido acceso, sumar widgets (aunque en la versión gratuita son limitados) y obtener notificaciones cuando un sitio publique algo nuevo. Desde el menú principal se accede a las estadísticas, información completa sobre nuestros movimientos en InoReader que siempre queremos conocer.

InoReader: Lector de feeds liviano

Seguramente al iniciarnos en esta herramienta primero sea lo ideal pasar por la configuración para lograr que muestre todo como queremos y trabaje de la mejor manera según nuestras costumbres. Listarlas sería realmente extenso pero se incluye la edición de perfil, vínculos para compartir lo que leemos, diferentes idiomas, iconos, carpetas, organización de los elementos, contactos y el apartado para importar o exportar nuestra cuenta.

InoReader fue renovado y dejó atrás un aspecto que realmente no atraía (aunque para quienes lo disfrutaran existe la opción de volver a aplicarlo). Todavía falta pulir algunos detalles pero el resultado actual es mucho mas estable, fluído y atractivo sumando las versiones para Android e iOS.

Web: InoReader

Responsive Design: biblioteca para realizar gráficas estadísticas

Pablo

Chartist es una fantástica biblioteca para la creación de gráficas que se adapten a cualquier dispositivo. Uno podría pensar que se trata de una más de tantas bibliotecas para realizar este trabajo, pero les aseguro que este proyecto cuenta con características que lo convierten en una alternativa solida y con muy buen futuro.

Desde la concepción de este proyecto se pensaron aspectos que otras bibliotecas descuida. Por ejemplo, y como la mayoría de los lenguajes de programación modernos, Chartist emplea convención por sobre configuración. Cuenta con una excelente flexibilidad en lo que se refiere a la personalización visual, la mayoría de los cambios se pueden realizar desde las hojas de estilo y el control desde JavaScript.

responsive design charts gratuitos

Para generar las distintas gráficas emplea SVG, el autor principal de este proyecto lo define como el futuro de la ilustración web, y no esta muy equivocado, no hace falta más que mirar un poco todos las bibliotecas nuevas que van apareciendo y como utilizan SVG para generar las distintas ilustraciones.

Chartist es responsive, con un detalle diferenciador, contempla los DPI al momento de generar las gráficas. Además hace un uso intensivo de las media-queries, un detalle interesante para los que buscan una perfecta integración con sus proyectos. Al momento de descargar este proyecto nos vamos encontrar con todos los archivos SASS necesarios para su perfecta adaptación.

Este proyecto cuenta con una documentación bastante aceptable, con ejemplos de uso perfectamente detallados y perfectamente ordenados.

Les recomiendo visitar el sitio oficial del proyecto, presten especial atención a las gráficas animadas :D

Web: Chartist