LinuxParty

Cuando desarrollamos para la web por lo general estamos sometidos a fechas de entrega que debemos cumplir de manera puntual y en ocasiones ocupamos la mayor parte del tiempo en la programación de las características y funcionalidades del sitio o aplicación web, dejando el diseño para el último momento. Teniendo esto en cuenta, siempre debemos buscar la manera de trabajar inteligentemente, aprovechando todas y cada una de las herramientas disponibles para ahorrar tiempo y dinero, sin sacrificar la apariencia final del proyecto.

Como ya sabemos, CSS es el lenguaje que nos permite definir la apariencia y forma que tendrá el contenido, e incluso generar efectos y animaciones realmente increíbles sobre elementos HTML.

Personalmente no soy amante de los llamados “generadores de código”, sin embargo, las herramientas que les presento a continuación me han ayudado a ganar algunos minutos y también a aprender cosas nuevas con menos esfuerzo. Aquí verán herramientas de todo tipo, para múltiples propósitos, todas ellas pensadas para acelerar el trabajo con código CSS.

1. CSS 3.0 Maker

CSS 3.0 Maker es un completo set de herramientas CSS que nos permitirán explotar varias características interesantes. La más atractiva de ellas, CSS Animation, que nos permite generar animaciones sencillas de manera automática. Solo debemos definir valores para las diferentes opciones (tiempo de duración, frames, rotación, traslación, etc) y una vez que estemos contentos con el resultado -que podemos previsualizar luego de cada ajuste- podemos generar el código CSS listo para copiar y pegar en nuestra hoja de estilos.

2. CSS Drive

En CSS Drive podemos encontrar una gran cantidad de recursos, galerías y ejemplos relacionados con CSS, pero en particular me ha gustado una herramienta que lleva por nombre Colors Pallete Generator que, como su nombre indica, nos permite generar paletas de colores para usar en nuestros diseños. Lo que la hace especial, es que podemos generar las paletas a partir de una imagen que subamos desde nuestro disco duro o a través de una URL. El generador se encarga de extraer los colores principales de la imagen suministrada y los separa en 4 paletas distintas, de las cuales podemos elegir los que más nos gusten y generar un archivo CSS que contiene clases con los códigos de color listos para ser usados.

3. CSS Lint

Particularmente no conozco otra herramienta como CSS Lint. Esta genialidad nos ayuda a escribir código CSS limpio y de gran calidad, solo debemos copiar, y pegar en la herramienta, el contenido de nuestra hoja de estilos y hacer clic en el botón “Lint!”, luego de un segundo veremos un listado de advertencias, errores (en caso de que los haya) y recomendaciones para mejorar y optimizar nuestro CSS. Adicionalmente nos ofrece múltiples opciones para indicarle sobre que aspectos particulares se harán las validaciones.

4. CSS Menu Maker

Con CSS Menu Maker, es muy fácil generar menus para nuestros sitios web. La herramienta tiene una buena lista de estilos predefinidos separados en varias categorías: horizontales, verticales, con pestañas, etc. Solo debemos seleccionar el que más nos guste para luego personalizarlo, agregando nuevos items y ordenarlos mediante un simple arrastrar y soltar. Al finalizar solo debemos descargar el código resultante e insertarlo en nuestro sitio.

5. CSS Type Set

Cuando diseñamos/desarrollamos sitios con abundante texto, solemos invertir mucho tiempo probando diferentes tipos y tamaños de fuente, colores, alineaciones, espacio entre caracteres, etc. Con CSS Type Set, podemos hacer este trabajo mucho más rápido, obteniendo mejores resultados en menor tiempo. Al igual que otras herramientas de la lista podemos previsualizar los resultados y copiar el código resultante para integrarlo en nuestro trabajo.

6. Em Calculator

Em Calculator es una pequeña herramienta programada en JavaScript que calcula por nosotros la relación de medida entre pixels o “px” y unidades “em”.

7. Typetester

Typetester funciona de manera muy similar a CSS Type Set, aunque en este caso podemos comparar de manera simultánea hasta tres tipos de fuentes distintas y sus posibles variaciones.

8. Ultimate CSS Gradient Generator

Y para cerrar, con Ultimate CSS Gradient Generator, podemos crear degradados de gran calidad y fáciles de exportar, sin necesidad de recurrir a Photoshop u otra herramienta similar. La herramienta viene con un amplio set de combinaciones predefinidas que podemos usar como base para crear las nuestras.