Soporte Drag & Drop

He incorporado soporte Drag & Drop para arrastrar archivos hasta la aplicación Web Tools online. Esto amplía las posibilidades de los <input type="file"> con los que podemos cargar un Sistema de Archivos Locales al marco de herramientas. Así en esos botones se seguirá pudiendo seleccionar una carpeta de su ordenador y se cargarán todos los archivos de todas las subcarpetas de de esa carpeta. Por supuesto, siempre que su navegador soporte el atributo directory para el <input type="file"> y la propiedad relativePath para el tipo File, tal como comenté en el tema anterior. Esta característica por ahora sólo la soporta Chrome.

Pero además con o sin soporte de selección por carpetas podrá arrastrar archivos hasta los campos del marco de herramientas que admitan una ruta o lista de rutas.

Compositor de imágenes y Generador de Sprites CSS

En esta versión incluyo el Compositor de imágenes y Generador de Sprites CSS que ya había publicado hace un par de años. Fue una de las primeras aplicaciones que hice para que funcionaran con JavaScript y así poder ser ejecutada en un navegador. Ahora la he replicado para el marco de herramientas con algunas mejoras como la posibilidad de probar el Sprite generado.

La página de la aplicación Compositor imágenes anterior contiene también información que, básicamente, sigue siendo válida. Ahí podrá encontrar vínculos a temas relacionados, especialmente el de Combinar imágenes usando Sprites CSS. Este tema es importante porque explica el motivo de usar Sprites CSS para optimizar la carga de los recursos y, además, instrucciones de como usar la herramienta cuyo funcionamiento es básicamente el mismo que el de la nueva versión.

Un resumen de las posibilidades de esta herramienta:

1. Podemos insertar imágenes en el contenedor con el botón explorar o bien arrastrándolas desde el ordenador.
2. La pestaña edición efectúa la composición del conjunto de imágenes.
   • Editamos las posiciones y dimensiones de cada imagen así como las dimensiones del contenedor.
   • Podemos situar las imágenes en capas.
   • La acción de alinear las ordena por tamaños. Si la opción de ajustar contenedor está activada, el contenedor se reducirá al mínimo para contener las imágenes. Estas opciones son óptimas para producir una composición con el menor tamaño posible para los Sprites CSS.
3. En la pestañas de Sprites CSS podemos generarlo y también probarlo.
4. La pestaña de Composición nos permite importar y exportar composiciones. Son archivos de texto que reúnen todas las propiedades de la composición de imágenes para salvarla en el ordenador y recuperarla en un momento posterior.