Por: Jessenia Araya-Vega | (2017)  Siempre con los gráficos se tiene el reto de hacer lo mejor para las múltiples plataformas.

Siempre con los gráficos se tiene el reto de hacer lo mejor para las múltiples plataformas.
Pensar en responsive es el mayor reto porque no se puede hacer una única imagen que se lea bien.
Acá en NPR me encontré esta opción. Es un forma de convertir un documento de ilustrador a uno de html.

mapas y gráficos con ai2html

d3.js? no thanks (©jk)
ai2html es un plugin opensource para Adobe Illustrator desarrollado por Archie Tse, del equipo gráfico del New York Times, que permite convertir nuestros proyectos illustrator en documentos html.

instalación

Debemos descargar el archivo ai2html.js de la página oficial e incluirlo en nuestra carpeta de adobe.
windowsC:\Program Files\Adobe\Adobe Illustrator CC 2015\Presets\es_ES\Secuencias de comandos
Mac OSApplications/Adobe Illustrator CC 2014/Presets/en_US/Scripts/ai2html.jsx

uso

Este script nos permite EXPORTAR nuestros proyectos a un formato web por lo que hasta el momento trabajaremos con naturalidad en illustrator.
Es importante tener el modo de color de documento en rgb y no en CMYK.
ai2html creara un archivo html en el que todos los textos seran nodos html (div con sus correspondientes estilos css) y el resto de elementos (lineas, circulos, mapas, etc.) quedaran reflejados en una imagen.
Cuando hayamos terminado sólo tendremos que seleccionar la opción secuencias de comandos del menú archivo.
Si no hemos podido incluirlo en la carpeta podemos seleccionar la opcion otra secuencia de comandos (F12) del mismo menu y seleccionar el script. Una vez exportado, aparecerá un cuadro de opciones a la izquierda de nuestra mesa de trabajo. El plugin incluye una serie de opcionespreestablecidas y otras ocultas (con unos valores por defecto). Podremos escoger número de colores del archivo png, calidad del jpg, directorio al que exportará los archivos, exportar al doble de resolucion (retina), etc.

gráficos responsive (adaptativos)

Una de las grandes virtudes de ai2html es la posibilidad de exportar nuestros graficos a diferentes tamaños. De esta manera lograremos que nuestros diseños se vean a la perfección en todos los dispositivos. Pasos:
  1. Crea tantas mesas de trabajo como diseños quieras obtener (deberan tener estas dimensiones en pixeles). Para escritorio unos 900–1100px, tablet 600–700px y móvil 290–320px.
  2. Descargar este script desarrollado por Gregor Aisch . Este archivo javascript se encarga de mantener la apariencia de nuestro diseño en cada uno de los diferentes tamaños y cambiar la imagen que corresponde a cada uno.
  3. Una vez hayamos exportado nuestro diseño deberemos editar el html e incluir este script. ai2html creará un único archivo .html y tantas imagenes como mesas de trabajo tengamos.

Ejemplos