Herramientas CSS

Conocer bien las tecnologías web, nos ayuda a tener una mejor perspectiva a la hora de poder realizar con éxito un buen diseño web.
El uso de CSS así como Ajax son hoy en día fundamentales en un buen diseño web. Existen herramientas que además nos pueden ayudar a la hora de optimizar y aplicar nuestros conocimientos de una manera más eficaz.
En este post vamos a ver varias herramientas CSS que nos van a ayudar a conseguir mejorar nuestra web. Compresores de CSS, generadores, programas que nos ayudan a limpiar la CSS, validadores, etc…

Particularmente prefiero escribir directamente la CSS, igual que el HTML, en todo caso si alguno prefiere un generador, aquí dejo un par de ellos.

• Grid Blueprint CSS Generator – introduce los datos básicos de tu página y te genera la CSS (columnas, padding, margin, ancho total…)
• CSS 3.0 MAKER – completísimo generador en el que podrás además crear border redondeados, gradientes, sombras,…

COMPRESORES CSS

La velocidad de carga de una página es muy importante a la hora de diseñar una web, más aún si pensamos en páginas para iPhone o Smartphone en general. En cualquier caso, cuanto más peso aligeremos de los diferentes archivos que componen la web, más éxito tendremos.

Dependiendo del tipo de web que vayamos a hacer, debemos juzgar si nos interesa más hacer una única CSS o hacer una general y otras particulares que sólo vayan a ser utilizadas por determinado tipo de páginas.

Los compresores de CSS reducen espacios, saltos de carro y demás que consumen kb y además optimizan código, por ejemplo colores (#fff en lugar de #ffffff….), quitar comentarios, etc…

Dentro de los distintos compresores que podemos encontrar en Internet, os dejo la lista de los que a mi juicio me han parecido más interesantes:

• Clean CSS – una de las más completas que he encontrado.
• CSS Drive – CSS Compressor – herramienta online con tres niveles de compresión.

VALIDADOR CSS

Una vez realizado el archivo CSS, lo ideal es validarlo, para ello contamos con validadores CSS y de ellos el mejor el siguiente:

• W3C CSS Validation – sin duda el más fiable.

ESQUINAS REDONDEADAS

Utilizar esquinas redondeadas hechas con CSS reduce el peso de una web frente al uso de backgrounds de imagen, existen aplicaciones online que te generan la CSS para estas esquinas, aplicaciones en las que defines colores, radio de curvatura etc…

• Spanky Corners – define los parámetros de tu capa redondeada y copia la CSS que genera.

Además de estas herramientas existen muchas otras aplicaciones que nos ayudarán a crear menús con CSS, o a utilizar cualquier fuente en una web, pero este tipo de recursos los dejaremos para verlos puntualmente más adelante.