Organiza y estandariza el código CSS – selectores, subselectores y propiedades – en una estructura que haga más fácil definir áreas en la página y ver como éstas se relacionan entre sí.

La herramienta se puede usar de 3 formas:

• Copiando el código CSS en el editor.
• Subiendo el archivo CSS desde tu ordenador.
• Indicando la dirección URL donde se encuentra el archivo CSS.

También ofrece otras opciones como poder “ordenar propiedades y/o selectores alfabéticamente”.

Enlace: Styleneat

Muchas veces cuando empezamos a construir páginas web es muy fácil volverse locos intentando colocar todo donde queremos. No hay manera de centrar las cosas en la página, de darle el mismo espacio a cada parte, el menú de navegación se coloca donde quiere él por más que intentemos lo contrario, etc.

Una ayuda en estos casos, cuando tienes que estructurar los contenidos de la web, es esta página: Layou-o-matic. Te permite elegir el tipo de layout (estructura), ya sea como un bloque único, con dos columnas (y el menú a la derecha o a la izquierda) o con tres. También puedes determinar el ancho que tendrá el área total (contenido más menús) y el espacio entre elementos.

Una opción muy recomendable de seleccionar es incluir en el código que te dan el box model hack. Básicamente sirve para que el layout se vea exactamente igual en Internet Explorer y en el resto de navegadores, como Firefox u Opera. Recordemos que Internet Explorer interpreta muchas propiedades CSS a su aire sin seguir los estándares, y esto provoca que algunos elementos de la página puedan verse diferentes según con el navegador que los visualices.

Cuando previsualizas un diseño, dentro de él aparece un enlace desde donde te puedes descargar el archivo con el diseño elegido. En el archivo incluyen el documento css, las imágenes necesarias para usarlo y una página de ejemplo. A partir de estas estructuras puedes ir modificando lo que necesites para hacer tu página web.

Hay decenas o cientos de páginas que hablan de cómo hacer esquinas redondeadas. Muchas de ellas hablan de códigos JavaScript, como la conocida Nifty Corners Cube. Personalmente no me gustan este tipo de soluciones a base de JavaScript, ya que los archivos .js si son muy pesados ralentizan la carga de la página. Durante un tiempo he usado esta solución para LaWebera.es, pero al final acabé pasándome al CSS, lo cual a mi parecer resulta mucho más limpio y ligero siempre que sepas optimizar adecuadamente las imágenes necesarias para crear el efecto de esquina redondeada.

En este post dejo enlaces de algunas páginas que hacen esto último, redondear esquinas con CSS e imágenes:

• RoundedCornr: personalmente es la que más me gusta. Puedes crear esquinas redondas en pocos minutos, ya sean simples, con bordes, gradientes o una combinación de todo. Cuando pulsas el botón de crear te devuelve el código HTML, el CSS y las imágenes necesarias.

• Corner Shop: esta página ofrece una aplicación más simple que la anterior, pero es útil si no buscas nada demasiado complicado, igual de eficaz y te proporciona todo lo necesario para que lo implementes en tu web.

• Spanky Corners: muy en la línea de la anterior herramienta. Te ofrece una aplicación básica para crear este tipo de diseños.

Yendo un poco hacia atrás en los pasos para crear una web, si no tienes claro cómo diseñar tu página, en esta web tienen un montón de plantillas (templates) gratuitas para que te inspires o directamente te las bajes y las uses en tu web, que las disfrutes.