Buscando algunas formas de optimizar ese script y mejorarlo, pude agregar entre otras cosas la identación para que sea mucho más intuitivo su lectura.

En aquel ejemplo estábamos usando el archivo 9a6f1138.444a95.css descargado previamente, ahora los invito a ejecutar lo siguiente:

o nuevamente envés de paginarlo en la salida estandar lo redireccionamos a un nuevo archivo.

Ahora si!!!, leer este nuevo archivo CSS es mucho más simple, es mucho más claro.

Junto a la salida de CSS3 realmente hay muchos efectos que incorporan que son realmente fascinantes y que de alguna manera a todos en cierto punto nos gustaría saber como está realizado, ya sea para reproducirlo, copiarlo o simplemente hacer nuestras modificaciones. Por lo menos ese es mi punto de vista, mirar buenos trabajo y tratar de ver, aprender y conocer como está realizado.

Eso es por un punto, pero últimamente al estar leyendo algunas CSS, varios sitios web comenzaron a comprimir sus plantillas en tiempo de ejecución, obviamente para aplicar una optimización razonable en la carga del sitio, requisito fundamental para los SEO de hoy.

Los invito a ver el siguiente ejemplo para ir entendiendo un poco más.

www.ellibertario.com es un diario muy popular en mi provincia y nos va a servir muy bien, si intentamos ver el código fuente del sitio dentro del navegador se van a encontrar que esta comprimido en tiempo de ejecución, con lo cuál la subida y bajada de archivos es mucho más veloz, es una cuestión de lógica que no vamos a entrar, pero busquemos un archivo .css

Si ingresamos para visualizar el archivo 9a6f1138.444a95.css que es el que encontramos van a notar que también se encuentra comprimido, reduciendo los espacios de identación y haciendo su lectura muy engorrosa y confusa.

Perfecto, veamos como con una simple herramienta llamada sed podemos “descomprimir” aunque no sea el término correcto sino lograr una mejor visualización del archivo en nuestra estación de trabajo.

Para comenzar lo primero que les recomiendo es que se descarguen el archivo css, ya sea el del ejemplo o cualquier otro de la siguiente forma:

Ahora bien ya estamos listos para ver su contenido de forma más prolija y ordenada

La idea general es reemplazar los caracteres “}” que sabemos que cierran bloques de definición en los css por uno o dos simples saltos de líneas “}\n\n”

Para generar un archivo nuevo solo quedaría redireccionar la salida a un nuevo archivo css y comenzar a leerlo y ver cada detalle del archivo.

Ustedes vieron, lo simple y fácil que puede ser leer CSS que se encuentran comprimidos en la web, seguramente esto se puede mejorar mucho más y les dejo la tarea de aprender como hacerlo.

Blueprint es un framework CSS diseñado para reducir los tiempos de desarrollo y mejorar la compatibilidad entre los distintos navegadores web cuando se trabaja con los estilos en cascada (CSS). También sirve como base para muchas herramientas que permiten el desarrollar CSS fácilmente y de una manera más accesible para principiantes.

Entre las características más importantes encontramos:

• Una grilla facilmente personalizable
• Tipografia sensible por defecto
• Una tipografía básica
• Reseteo CSS perfeccionado para navegadores
• Una hoja de estilos para imprimir
• Scripts potentes para personalizacion
• Todo esto sin aumento de tamaño

enlace | blueprint | Wikipedia

En esta oportunidad les quería presentar Simple, un framework para CSS que me ha llamado poderosamente la atención debido a que implementa el concepto de 960 Grid de una manera sumamente simple y sencilla.

Algo que nos podría llevar horas de maquetación y diseño Simple pretende hacernos la vida justamente mucho mas simple sobre todo para aquellos que no somos diseñadores.

Simple es un sistema que implementa la infraestructura necesaria para trabajar con una rejilla, de modo que podamos maquetar una página web ajustando los contenidos del diseño a unas guías, que delimitarán los espacios disponibles para colocar los distintos elementos de la página. Con este framework CSS obtendremos un código de hojas de estilo en cascada que permitirán posicionar los elementos que compondrán nuestro diseño de una manera rápida y sobre todo: simple!

Simple nace con los siguientes objetivos:

• Economizar durante la codificación de la página, tanto en CSS como en HTML.
• Escalable y crossbrowser, que facilite el crecimiento y la compatibilidad con distintos navegadores.
• Que sea fácil de implementar y de manipular.

Por otro lado contamos que Simple se encuentra totalmente en español por la cual nos va a resultar mucho mas entendible y ágil.

Enlace | Simple, framework para CSS

Desde Sitepoint estan disponibles tres libros de diseño Web y CSS en formatos PDF, sólo hay que registrarse ingresando la dirección de mail y luego revisar el correo donde llegará el link de la descarga.

Artículo: LaREPAWEB

Firebug se trata de un add-on para nuestro navegador web Firefox y que nos ofrece algunas algunas utilidades bastante interesante para los desarrolladores web.

Esta interesante extensión se integra a Firefox y nos permite analizar y corregir archivos CSS, HTML y JavaScript y todo esto en tiempo real. A mi criterio una excelente herramienta que aprovecha la interpretación de estos código y la manipulación sobre el mismo navegador en el que lo estamos probando.

Esta son algunas de las características más importantes:

• Edición de HTML en tiempo real. Además posee un buscador interno.
• Inspecciona tu Hoja de Estilo en Cascada conocida como CSS, además de poder modificar las propiedades.
• Manitorea el tiempo de carga de las páginas.
• Depurador de código JavaScript

Otra opción más para tener en cuenta y hacer de nuestro navegador web una ayuda interesante para aquellos que se incursionan en el mundo del desarrollo web.

Descarga el Add-on Firebug para Firefox AQUI

Fuente: Desarrolloweb

El éxito de CSS o como también se las conoce como Hojas de Estilo en Cascada fue tomando un grado tal de aceptación por parte de desarrolladores, que mucho de los navegadores web que utilizamos están implementando la nueva versión CSS3.

Como vimos hace tiempo, CSS es un lenguaje para definir estilos o apariencia de una pagina web, básicamente CSS se creo para separar el contenido del sitio con las formas o el estilo de la misma.

Veamos entonces algunas propiedades nuevas que aparecen en esta versión:

Bordes

• border-color
• border-image
• border-radius
• box-shadow

Fondos

• background-origin
• background-clip
• background-size
• hacer capas con múltiples imágenes de fondo

Color

• colores HSL
• colores HSLA
• colores RGBA
• Opacidad

Texto

• text-shadow
• text-overflow
• Rotura de palabras largas

Selectores

• Selectores por atributos

Desde ya te dejo este enlace para que puedas ver la lista completa de propiedades incorporadas, si bien el sitio esta en ingles, pero puede seguir interiorizandote más sobre el tema y conociendo más detalles de CSS3

Siempre vemos pequeñas aplicaciones que permiten solucionar problemas, en este caso les presento CSSED, un editor de CSS para la plataforma GNU/Linux creado con las librerías GTK y básicamente como dijimos nos permite crear y editar de manera muy simple y sencilla nuestras hojas de estilo en cascada.

Entre tantas características, podemos decir que realmente es una aplicación muy liviana, posee coloreo de sintaxis, autocompletado de palabras reservadas, vistas de árbol, validación de documentos, etc. Además de estas cosas posee un soporte para editar documentos HTML, Python, javascript, jsp, java, C, C++, Perl, SQL, etc.

Instalarlo realmente es muy simple en nuestro sistema GNU y seguramente ya esta en los repositorios de todas las distribuciones, de lo contrario podemos darnos una vuelta por el sitio oficial del proyecto para enterarnos de más cosas, entre ellas descargar el código fuente, complementarlos con más plugins, etc.

Yo particularmente lo instalé y estoy probando algunas funcionalidades bastantes interesantes y sobretodo ágil a la hora de crear nuestra CSS.

Ahora a tenerlo en cuenta, CSSED un editor de Hojas de Estilo en Cascada muy práctico y útil

Enlace al Sitio web oficial de CSSED

Esta herramienta cuenta con algunas etiquetas básicas pero desde ya es posible agregarles más como para personalizarla y adaptarla a nuestras necesidades.

Una ves que configuramos a gusto y necesidad podemos obtener el correspondiente codigo Css listo para ser acoplado a nuestra aplicación, excelente herramienta como para agendar sobretodo cuando no contamos con nuestro editor favoritos o nos encontramos en maquina ajena.

Básicamente de que se trata CSS Ya? Por lo que estube metiendo mano como se dice, se trata de un sitio interactivo en donde podrás aprender conceptos y práctica a la par. Por ejemplo, se plantea un titulo, se da un marco teórico del mismo, se ven algunos problemas y además es posible ver problemas ya resueltos.

Justamente por ello les digo que es muy práctico, rápido y preciso, asi como nos gusta a todos nosotros CSS Ya.