Adobe Project Comet, lo que está por venir…

adobe-project-comet

Se que llego tarde a comentar uno de los últimos movimientos más interesantes que han tenido lugar en fechas cercanas. Me refiero a ese en el que Adobe ha enseñado un poco la patita de lo que está por venir: Project Comet. ¡Dentro vídeo!

Lo he recordado durante estos días que me he peleado más de la cuenta con Sketch (preparando un par de artículos para Tuts+) y no negaré que espero el lanzamiento con cierta emoción.

Aunque siempre que puedo intento contar las bondades que puede ofrecer Photoshop para diseño web, lo cierto es que el día a día sigo acompañado de Fireworks y Sketch mayoritariamente. Pero es por pura cuestión práctica, por el tipo de trabajo que desempeño y por mantener cierta agilidad en el horario laboral, no porque le tenga manía a Photoshop. Y eso que desde Adobe también se empeñan mucho en mostrar lo eficiente que puede ser trabajar con él. Sirva de ejemplo el uso combinado de las composiciones de capas y objetos inteligentes.

Lo cierto es que ya desde las últimas actualizaciones de Photosop se ven ciertos detallitos de calidad pensados específicamente para el profesional de la web: la exportación rápida como JPG/PNG al hacer clic derecho sobre una capa (he gastado la opción de tantas veces que la he usado), la (muy mejorable) presencia de áreas de trabajo, la opción extract que nos permite inspeccionar archivos psd que tengamos alojados en nuestro espacio en Creative Cloud, etc.

extract-creative-cloud

Project Comet parece ser el siguiente paso lógico en la evolución que en Adobe quieren para Photoshop (o que se han visto obligados a ofrecer dada la grandísima cantidad de usuarios que emplean Photoshop para diseño de interfaces y páginas web). Tiene muy buena pinta y deseo realmente que sea un buen producto porque la competencia le está comiendo parte de la tostada. Eso sí, si algo le pido es que funcione de manera ágil y se note esa soltura que Photoshop siempre ha tenido a la hora de abrir y manejar archivos, algo que siempre he echado de menos en Fireworks para considerarlo un producto redondo y que casualmente también es algo que brilla por su ausencia en la versión actual de Photoshop a la hora de trabajar con áreas de trabajo (un rendimiento infumable).

Me vuelvo por donde he venido pero antes, un par de links: Investigando un poco sobre Project Comet llegué hasta The Toast Report, una parada muy recomendable con un puñado de artículos disponibles que permiten ampliar datos e ideas sobre Photoshop para diseño web y lo que está por venir con Project Comet. Que aproveche.

Bola extra: Parte del catálogo de revistas mensuales de Ztory están dedicadas a Photoshop, retoque y fotografía. Y a un euro 😛

Trapcode Suite 13, presentando TAO

trapcode-tao

Wow, si ayer recomendaba Ouroboros, hoy me he enterado que ha salido hace nada la última versión de la conocidísima suite de Red Giant repleta de todos esos plugins Trapcode tan famosos y que hacen las delicias de muchos. Me incluyo entre ellos por supuesto. De hecho os recuerdo el linkito hasta este post de recursos de after effects que viene como anillo al dedo.

En cualquier caso vengo principalmente a destacar la novedad que significa Trapcode TAO y que nos permite incluir geometrías y 3D a lo largo de trazos y líneas. Recuerdo cuando me peleaba con 3D abstracto e imaginármelo en movimiento con poco esfuerzo me genera taquicardias de la emoción. De hecho VinhSon Nguyen, de Creative Dojo, ya le ha puesto las zarpas encima para enseñarlos el bicho:

El resto de novedades en Trapcode Suite 13 no desmerecen en absoluto e incorpora novedades destacables en otras grandes herramientas como Particular o Mir. Os dejo el enlace a la nota oficial del lanzamiento.

Trapcode Suite 13

Lanzamiento de Affinity Photo

affinity-photo

Sirva esta entrada como simple recordatorio del lanzamiento hace unos días del segundo programa que la tropa de Serif ha creado para los profesionales del mundo gráfico que usen entornos manzaneros: Affinity Photo.

En su momento hablé de la beta que probé que me dejó muy buen sabor de boca. En la versión final parece que el soporte de archivos .psd es muy bueno y que incluso podemos usar pinceles en el mismo formato .abr por lo que el salto desde Photoshop puede ser menos pronunciado de lo que todos pensamos. Lo cierto es que la comunidad ha recibido de manera bastante positiva todo lo que Affinity está lanzando y yo creo que al menos en uno de los sistemas con los que trabajo, haré el “cambiazo”. Igual hasta termino preparando algún tutorial si consigo sacar más horas a los días 😛

Aún faltan cosillas que van a seguir añadiendo (como el uso de Pantones) y por los últimos comentarios leídos, puede que a medio plazo preparen versiones para otras plataformas como Windows y Linux. Habrá que cruzar los dedos. De momento este es el plan que tienen en mente: roadmap de Affinity Photo [en].

Affinity Photo

Los fractales de Tom Beddard

tom-beddard

Tras la cantidad de veces que años atrás me peleaba con Apophysis y lo mucho que me gustaba también Terragen no es de extrañar que el trabajo de Tom Beddard me haya maravillado. Creo que el calificativo impresionante se me queda corto. ¡Si hasta los hace en movimiento!

Resulta que el bueno de Tom se hizo en su momento una herramienta llamada Fractal Lab que tenemos a nuestra disposición si queremos cacharrear con ella. Si os pasa como a mí y no os sale nada decente lo mejor es dejarlo para otro momento y zambullirnos en el portfolio de este artista del fractal .

Tom Beddard [en]

Probando Atomic.io, una herramienta alternativa más de prototipado digital.

atomic-io

Dejaban hace unos días en Designer News [en] el enlace hasta Atomic, una nueva herramienta de prototipado que viene a sumarse a otras ya existentes como por ejemplo Invision, Marvel (de la que hablo en el curso de fundamentos sobre UX que ahora tiene un 40% de descuento con el código V2BM40) o Pixate. Quise apuntarme a la beta para echarle un vistazo rápido a ver qué podría encontrarme y aproveché la madrugada para hincarle el diente.

Atomic promete ser un entorno de trabajo amistoso, con características tales como la posibilidad de crear flujos de navegación a través de zonas interactivas, un control de versiones en formato línea de tiempo que nos permite deshacer cambios o modificaciones, incluir propiedades CSS directamente sobre los elementos de nuestro prototipo, comentarios de usuarios, etc.

La verdad es que al no tratarse de una herramienta que requiera instalación (corre directamente en el navegador) ni de ser excesivamente compleja (más bien al contrario) os animaría a probarla directamente si os gusta cacharrear con “juguetes nuevos”. En unos 10 minutos como mucho ya habréis entendido cómo funciona.

atomic-io-00

Sabiendo que Atomic aún está en fase beta, se le notan importantes carencias siendo la falta de importación de contenidos desde Sketch o Photoshop la que considero más importante. No vendría nada mal poder incluir archivos .psd o .sketch.

Lo que sí que podemos hacer actualmente es importar imágenes (he probado a importar archivos SVG sin problema aparente) y añadir elementos extra con las diferentes herramientas de trazado y texto que tenemos a nuestra disposición para, a continuación, ponernos manos a la obra e incorporar efectos adicionales gracias a la posibilidad de incluir propiedades CSS.

En cuanto a capacidades de interacción, Atomic se limita a ofrecernos el poder crear zonas interactivas que hagan las veces de puente entre las diferentes páginas que tengamos incluidas en nuestro prototipo. Una vez creada una zona interactiva, tendremos todo un surtido de diferentes efectos de transición para poder jugar con la apariencia del cambio entre páginas.

Dicho esto y si finalmente os animáis a probar la herramienta, os preguntaréis entonces cómo han conseguido los efectos de transición y desplazamiento de elementos tan chulos en los ejemplos ofrecidos. La respuesta es bien sencilla.

La ubicación y presencia de los elementos es determinante para el efecto de transición. Por ejemplo si colocamos una barra de navegación en la página de origen y aparece exactamente en la misma posición en la página destino, no pasará absolutamente nada con este elemento en concreto. Sin embargo si la colocamos fuera del área de trabajo (las páginas tienen unas dimensiones fijas), al realizar la interacción la barra de navegación no desaparecerá sino que se desplazará hasta la posición deseada. ¿Qué quiere decir esto? Que podemos jugar con la colocación de elementos fuera del “área de trabajo” para hacer aparecer y desaparecer elementos.

Este detalle hace que sea realmente fácil conseguir efectos animados sin mucha dificultad pero personalmente no creo que sea algo muy intuitivo.

Si os ha picado el gusanillo, podéis registraros para pedir acceso a la beta o simplemente dejad un comentario por aquí porque tengo 3 invitaciones disponibles 🙂

Atomic.io [en]

¿Crear webs sin escribir código es posible? La eterna promesa de los editores web

pingendo

Aprovechando estos días de fiesta he querido ponerme un poco las pilas con la maquetación web usando Bootstrap (además de barnizar unas estanterías para un intento de huerto urbano). Me decanté por este framework web porque por algún lado tengo que empezar, porque parecía sencillito de entender y porque regularmente sale a la palestra el dilema de Bootstrap sí, Bootstrap no [en].

Bien. Durante el día completo que le dediqué a mi puesta a punto coder tuve una revelación: no soy capaz de usar los programas tan modernos y chulos que te prometen crear webs sin escribir código o sin saber programar. No están hechos para mí. Me siento más cómodo con un editor de texto como Sublime Text que algunos dopan con un montón de extras.

Pero dejadme que os cuente un poco más sobre esta apasionante historia de inquietudes profesionales apta para todos los públicos.

Bootstrap es un recurso empleado con cierta frecuencia en el estudio y creo que es importante que un diseñador web tenga unas buenas bases sobre lo que se puede hacer y lo que no, teniendo en cuenta el entorno de trabajo en el que se encuentre y las herramientas de trabajo de equipo. De nada sirve que prepare visuales para webs ultra-mega-cool si el día a día o los proyectos no lo permiten encajar. Todos queremos hacer webs chulas pero a veces el tiempo y el dinero mandan.

No es que no supiera nada sobre el aspecto más técnico y developer de la web pero tampoco paso de beginner level y hacía tiempo que no le dedicaba un día entero exclusivamente a pelearme con HTML, CSS y un par de chorraditas de JS.

De hecho hacía tanto que no sacaba un hueco para estos menesteres que ha pasado suficiente tiempo como para que fueran apareciendo apareciendo un buen puñado de herramientas pensadas principalmente para nosotros, los diseñadores pezuñeros del código. Herramientas que prometen hacer de la creación de webs un auténtico camino de rosas. De entre todas las disponibles me he ido tropezando con:

Algunas son herramientas de trabajo directamente en el navegador y otras son programas independientes instalados en nuestro sistema. Las hay pensadas específicamente para desarrollo con Bootstrap y otras son mucho más generalistas. Pero todas tienen en común un objetivo: suavizar la transición entre la fase de diseño y la de maquetación, presentándose como entornos amigables que prometen ayudar a los usuarios menos experimentados que necesitan crear webs sin saber html. Como cuando Dreamweaver se vendía como una máquina de hacer webs él solito.

webflow
Webflow es de los entornos más completitos…y que más asustan.

No he llegado a probar todos los programas que he enumerado arriba pero sí que he trasteado en diferentes momentos con Readymag, con Webflow, Macaw, Pingendo y LayoutIt! Por ejemplo Readymag está muy orientado para hacer case studies, presentaciones de proyectos, etc… Es muy interesante ver cómo lo usan grandes profesionales como Anton & Irene quienes han comentado en más de una ocasión que les parece una herramienta fantástica. Por algo será.

Webflow por su parte me parece de los entornos de trabajo más completos y robustos que hay disponibles actualmente. Es un buen editor online sin embargo creo que como entorno amistoso para el novato puede llegar a asustar. Demasiadas opciones y posibilidades de configuración.

Macaw por su parte empezó muy fuerte prometiendo un entorno mucho más potente que la alternativa de Adobe, Muse, pero le he perdido un poco la pista y no sé muy bien en qué quedará finalmente. No veo que tenga mucho movimiento últimamente en los rinconcitos de diseño. Lo último que leí era precisamente una comparativa con Webflow [en].

LayoutIt! me pareció infumable y con Pingendo he realizado todo el ejercicio que tenía en mente de maquetación responsive y que me ha empujado a estar escribiendo ahora mismo. Había oído hablar de Jetstrap muy bien pero al final fue Pingendo el que se llevó el gato al agua (por puro azar).

Pingendo NO es la solución para todos aquellos que buscamos el gran botón rojo que lance el método makeWeb('responsive','cool'); De hecho petardea lo suyo y en más de una ocasión tuve que cerrarlo y volver a abrirlo. Sin embargo en su favor tengo que decir que me ha servido para entender algunas estructuras al facilitarme el ir añadiendo y arrastrando componentes al html con el que estaba trabajando. Además presenta una interfaz sencillota y amigable para el que verdaderamente no tenga ni idea de en dónde se está metiendo.

Como extra muy interesante tengo que añadir que el día antes de ponerme con el ejercicio me sirvió mucho echarle un vistazo a un par de cursos que hay disponibles en video2brain sobre Bootstrap 3. No daré mucho la lata en este punto en concreto pero podéis probar video2brain durante 7 días gratis si queréis. Aquí dejo toda la información.

cursos-bootstrap
Cursos para aprender Bootstrap desde cero

Cuanto más avanzaba haciendo el ejercicio más me daba cuenta de que en realidad no estaba usando ninguna de las características del programa. Teóricamente si usas un programa así es para poder emplear los módulos prefabricados o los asistentes. Al final terminé con la zona del editor de código maximizada para ir escribiendo directamente el HTML y las propiedades CSS necesarias. Guardaba, abría el HTML en el navegador y volvía al editor. Repetir ad infinitum.

Fue ahí donde me dí cuenta que la mejor metodología es, para mi, mamarte las bases de HTML y CSS para pegarte con ellas en un simple editor de texto. Con ejemplos muy chorras y sencillos al principio. Como si es para aprender simplemente qué es una lista desordenada y el código necesario para hacerla. Sólo así realmente entiendes qué es lo que estás haciendo. Desde la base más base de todas las bases que puedes estar pensando. Una vez tienes los conceptos iniciales claros, sí que es posible sacarle partido a un entorno como Webflow y compañía sin que todo suene a chino.

Lo curioso llega justo ahora y es que creo que en el momento en que se tienen unos conocimientos básico-intermedios, el uso de estos programas termina añadiendo una capa extra de complejidad al desarrollo. No digo que estos programas “sobren”. Particularmente me parece muy interesante cacharrear y probarlos, pero tras haber catado unos pocos sigo sin encontrar uno que realmente pueda recomendar muy fuerte hasta el punto de señalarlo con el dedo con los ojos abiertos de par en par.

Resumiendo: Sé que enfrentarse al código web da un poco de miedo al principio y que si de verdad no sabes hacer nada todo parece muy muy MUY cuesta arriba. En ese caso échale un vistazo a los cursos mencionados anteriormente porque hay más chicha para aprender fundamentos de HTML y CSS para novatos. Creo sinceramente que es la mejor decisión que se puede tomar en vez de buscar un sustituto en forma de programa que promete hacer el trabajo sucio por ti…y se queda por el camino.

Bola extra: Aprovechando el calentón hice un freebie que consiste básicamente en el sistema de columnas responsive que viene por defecto en Bootstrap. Para Sketch. Aquí. Y también recordad que aquí hay muchísimas plantillas y módulos premium bien majos para no tener que empezar de cero.

Ronda rápida de recursos para Sketch 3

sketch-3

Con la llegada de Sketch 3, la comunidad en torno al programa anda un poco más revolucionada de lo normal. Lo cierto es que a Sketch se le ha cogido cariño y sus creadores supieron aprovechar muy bien el momento de la estocada mortal a Fireworks para coger un poco de velocidad y posicionarse como uno de los programas de diseño que nos deberían sonar si nos dedicamos a entornos digitales.

En su momento preparé el curso Diseño web con Sketch para servir como introducción al manejo del programa y posteriormente lo complementé con un ejemplo práctico de diseño de interfaz. Nota para navegantes: sobre los cursos que he hecho hay más información pasando por aquí.

sketch-tweets

Del mismo modo quise aceptar el reto de escribir artículos especializados sobre Sketch en Tuts+, una comunidad enorme que aglutina cientos de miles de visitantes. Me daba un poco de vértigo pero la verdad es que empecé con muy bien pie consiguiendo que la versión original en inglés de mi primer artículo: Sketch para principiantes: diseño de la interfaz de un formulario de login tuviera una difusión enorme incluyendo menciones de verdaderos cracks del panorama digital. Fue todo un subidón.

Todos los artículos sobre Sketch que se van publicando en Tuts+ los tenéis disponibles aquí [en]. Los míos en concreto están accesibles desde aquí con el extra de que los preparo en inglés y también en español. La lista se va a ir ampliando, prometido 😉 De hecho ahora mismo hay unos cuantos ya:

Además de esta ración de autobombo me guardo a mano los enlaces a Learn Sketch [en], a SketchTalk [en] y a su rinconcito en Reddit [en] para intentar mantenerme a la última sobre todo lo que acontence. Ahora los tenéis vosotros también.

Quiero añadir también el vídeo a uno de los últimos webinar que he realizado, precisamente enfocado a enseñar lo fácil que es empezar a trabajar con Sketch. Si queréis tener una introducción rápida al programa, no os lo perdáis!

¡Si tenéis algún enlace valioso no os lo quedéis para vosotros!

Tienes una cita con Affinity Photo

affinity-photo

Desde que allá por Agosto tuviera mi primera cita con Affinity Designer supe que volvería a verme con algún pretendiente más de la familia Serif. Y ese momento ha llegado.

Hoy, meses después de hacerse un huequecito en el mundillo maquero del diseño, han decidido lanzar la beta pública de Affinity Photo, el programa con el que pretenden comerle un poco la orejilla a Photoshop y de paso quedarse un trocito del pastel que somos nosotros los usuarios.

Lo que aquí escribo no es una review ni un análisis en profundidad. No he catado Affinity Photo lo suficiente como para poder emitir un veredicto bien fundamentado. Pero teniendo la beta tan calentita recién salida del horno, pensé que podría ser buena idea usarla para poder hacer un par de tareas del día a día.

affinity-photo-2

¿Qué puedo decir sin extenderme demasiado? Pues que probéis la beta [en] si cumplís los requisitos necesarios. Que el programa a pesar de estar en beta va fino fino y que es un gozo cacharrear con él. Supongo que no es casualidad su excelente rendimiento y es que debe estar muy bien pensado para aprovechar las tripas de los sistemas manzaneros. Y sutilmente ya lo he dicho. Affinity Photo es, de momento, only for Mac. Se suma a la lista de otros programas como Sketch o Pixelmator que gustan sólo de fruta para su dieta habitual. Una lástima sinceramente.

affinity-photo-3

Cuando te acostumbras a una forma de trabajar (Fireworks, Photoshop, Sketch…) un nuevo programa te lo pone todo un poquito cuesta arriba. Pero es cuestión de tocar botones y ver qué pasa. Es un juguete nuevo con el que “volver a empezar”. Y entrecomillo lo de volver a empezar porque reconoceremos elementos muy familiares a nivel de herramientas, funcionalidades y organización. De no ser así sería muy complicada la nueva incursión de Serif en nuestros sistemas. Podrá tener un precio atractivo pero si eso supone tener que romper con años de metodología quizá la comunidad no le pondría esos ojitos tan tiernos a Affinity Photo.

Lo que quiero decir es que la curva de aprendizaje con esta beta ha sido muy suave. He podido trabajar con máscaras y pinceles sencillitos sin mucha complicación. Quizá el retoque de máscaras me ha resultado algo más complicado, al igual que el ajuste de capas de curvas, porque no terminaba de entender si tenía que funcionar exactamente igual que en Photoshop o el método era diferente. Cuestión de prueba y error hasta dar con la solución. Lo del libro de instrucciones no va conmigo salvo que se trate de un electrodoméstico que necesita algo más que un enchufe para funcionar. Prefiero tocar aquí, ahí y allí para ver que pasa.

affinity-photo-5

Al igual que en Affinity Designer, hay muchos recovecos en los que meter la narizota para curiosear: pinceles (no hay soporte para .abr aún pero exportando PNGs con Brush pilot [en] se podría hacer un apaño), degradados (muchísimo mejor que en Photoshop), capas de ajuste, perfiles de color, acciones (con sus presets a lo Instagram), etc. En la web oficial tenéis un vídeo bien majo con más sorpresas y que fue lo que me convenció para probar la beta. También en los foros [en] empieza a verse movimiento generado por otros usuarios que han invertido algo de tiempo en trastear con Affinity Photo para empezar a encariñarse con él o notificar errores.

affinity-photo-6

Porque como buena beta que es no todo son alabanzas. Se me ha colgado en una ocasión con cierre incluído y también me he encontrado con algún fallo con ventanas flotantes y menús desplegables que se quedaban un poco tontorrones. No obstante al volver a abrir contaba con el trabajo recuperado (auto-guardado inside) y los otros errores mencionados entiendo que son algo achacable al estado preliminar del retoño y que serán imperfecciones que probablemente no nos encontremos en el producto final. Producto final que nos encontraremos, una vez más, a un precio bastante ajustado en su lanzamiento oficial.

Echadle un ojo al vídeo porque deja ver que Affinity Photo tiene miga y si os pica la curiosidad, a probar la beta que ofrece 10 días de uso sin limitaciones y me contáis qué tal 😉

Affinity Photo [en]

Iubenda, generador de políticas de privacidad personalizadas

iubenda

Iubenda es un servicio que añadí a The Starter Kit [en] hace un tiempo. Me pareció curioso un servicio que permitía generarte tú solito tus propias políticas de privacidad. Además la web presentaba un buen aspecto y una prueba gratuita como anzuelo. Piqué y por eso la añadí a ese otro rinconcito que mantengo.

La he estado revisando con un poco de calma y he terminado escribiéndoles para aportar un poco de feedback como usuario totalmente desconectado del mundo legal que ni se imagina el coste que puede suponer la creación de una buena documentación legal de ese palo. Me he tirado mi horita y pico revisando cómo funciona y qué hace.

Iubenda funciona como un SaaS en el que pagas una cuota y tienes acceso a una serie de módulos/servicios con los que puedes ir construyendo tu política de privacidad en función de las características que incorporas en tu proyecto web: Mailchimp, analíticas, cookies, etc.

iubenda-2
Aquí un servidor con su bufete de abogados virtuales.

La idea me parece genial y la prueba gratuita te ayuda a ver lo fácil que es crear tu “rollo de texto legal”. No obstante quizá esta versión free se me queda algo coja; estás limitado a cuatro servicios y no tienes todos disponibles. Tampoco puedes copiar y pegar el texto donde quieras sino que insertas un script para poder mostrar un botón que despliega la información.

En cualquier caso me parece que es la primera vez que he encontrado un servicio de estas características que acerca al usuario medio a la creación de este tipo de contenidos.

Como diseñador me he encontrado muchas veces delante de la pantalla preparando el estilo de un checkbox acompañado de un texto estándar del tipo “He leído y acepto las condiciones legales”. Está bien saber un poquito más sobre esto, ¿verdad? Pues eso.

Iubenda, generador de políticas de privacidad personalizadas [en]

Recursos y aplicaciones para crear mapas, infografías y gráficos interactivos

Última actualización Julio 2015: Revisados enlaces

Tras revisar el post 10 consejos para hacer infografías con el que el bueno de Chiqui Estaban colaboró con este rinconcito, me anoté el compartir algunas de las herramientas y recursos que conozco o que he revisado mínimamente y que pueden ayudarnos enormemente en la elaboración de documentación e infografías. Herramientas que sirven para facilitar la creación de mapas y gráficos interactivos.

Y es que está muy bien eso de hacerse tablas y gráficos en Illustrator [en] pero quizá estemos buscando algo diferente y que nos permita desarrollar gráficos quizá más complejos o con cierto grado de interactividad (¡sin necesidad de montarse una locura como la increíble APRILZERO [en]!)

Veréis que hay un buen puñado de opciones, algunas más compejas que otras, que se solapan en lo que a funcionalidad se refiere. Pero como en la variedad está el gusto he creído oportuno mencionarlas de igual manera. Por cierto, en The Data Visualisation Catalogue [en] tenéis una referencia rápida de tipos de gráficas existentes, sus usos y significados. Muy práctica.

highcharts

Highcharts [en], el servicio que más he visto delante de la pantalla (en el estudio hemos trabajado bastante con las posibilidades que ofrecen). Gráficos interactivos de casi todas las formas y colores, actualizables en intervalos de tiempo y con chorromil opciones de configuración. Lo bueno es que se puede trastear sin problema con Highcharts porque ofrecen versión gratuita para proyectos no comerciales.

raw

Si buscamos algo más sencillo, Raw sería el siguiente servicio a mencionar. Muy fácil de usar. Basta con echarle un vistazo al vídeo en su página web para ver que se trata de volcar datos, configurar lo que queremos mostrar y alehop!

d3-js

Para hacer la magia, Raw se basa en la librería D3.js [en] con la que podemos trastear directamente si lo del código no es un problema. De hecho si nos gusta mucho y queremos darle un poco de vidilla a la librería, podríamos darle un power-up con D3plus [en]. De todas formas si se os atasca un poco al principio el trabajo con esta herramienta, tenéis a vuestra disposición un curso preparado por mi compañero Sergio Brito: Visualización de datos con D3.js. En video2brain recordad que podéis adquirir un curso de manera individual o conseguir una suscripción para tener acceso a todo el material disponible. Más información aquí.

google-charts

Míster Google también tiene su herramienta para la creación de gráficas usando Javascript: Google Charts [en]. A tenor de los visto en la documentación, se presenta como una opción realmente potente y altamente configurable, además de ofrecer compatibilidad en navegadores antiguos y dispositivos móviles. Yo sólo la he visto de pasada.

cartodb-1

Si lo que nos gusta de verdad es hacer mapas sin duda CartoDB [en] es una de las opciones a tener en cuenta desde el principio. Y es que CartoDB se ha convertido en una herramienta referente para la representación interactiva de información geográfica. Muy molona. Podéis echarle un vistazo a los ejemplos que tienen disponibles o cacharrear con la versión free para ver si es plato de vuestro gusto.

blockspring

Blockspring [en] ofrece unas cuantas plantillas de gráficas que podemos incrustar en páginas web o compartir. Me ha parecido interesante reseñarla puesto que algunas de estas plantillas no las he encontrado en el resto de herramientas como la de red animada o las basadas en palabras. Una opción para no comerse demasiado la cabeza si buscamos algo sencillo y encaja con las plantillas que ofrecen.

chartist

Chartist [en] la he descubierto gracias a RUDE y es “simplemente” una solución para crear gráficos (no interactivos) con el extra de ser responsive y que utiliza para la parte visual SVG y CSS. Sin aditivos extra ni edulcorantes.

javascript-charts

amCharts [en] es otra de las opciones viables si lo que necesitamos es una buena librería JS para crear gráficas animadas. Es un recurso de pago por lo que conviene asegurarnos de que ofrece exactamente aquello que vamos a requerir.

Creo que con estas opciones hay más que suficiente aunque si queréis un poco más de chicha podría mencionar Visage [en] que aún está en estado coming soon pero tiene buena pinta para hacerse infografías sencillitas o Datawrapper [en] como otra alternativa que además encaja para todos aquellos que busquen soluciones open source. ¿Más? Si es que hay cientos: Tableau Public [en], Plot.ly [en]

Para terminar me gustaría dejar referencia a rinconcitos que visito regularmente sobre este tema de estudio, análisis de datos y representación visual que tanto me gusta. Sitios como FlowingData [en], information aesthetics [en] o DataRemixed [en]. Y si buscáis ver infografías y gráficas fuera de lo habitual o con un toque de humor, vuestra parada fija es ChartGeek [en] 🙂