Optimización de CSS; Nicole Sullivan nos enseña 5 errores típicos y 5 buenas maneras

video - - 7 replies - share

Hace un tiempo escribí sobre algunas técnicas para poder optimizar nuestros códigos CSS. También mencionaba herramientas que puede facilitar nuestro trabajo de optimización: Firebug, PageSpeed, YSlow y YUI Compressor.

5 errores típicos

  • Un 42% de páginas no comprimen su contenido con GZIP.
  • Un 44% de páginas enlazan a más de 2 ficheros CSS.
  • Un 56% no sirven el CSS con cookies (o no la entiendo, o esta la veo complicada de evitar sin CDN).
  • Un 63% no minimiza sus ficheros con herramientas como YUI Compressor.
  • Un 21% de páginas tienen ficheros CSS con más de 100K de peso (esta es de escándalo).

Si en nuestros CSS sumamos: demasiada atomicidad, normas, duplicación, conflictos y lo aderezamos todo con algo de impredecibilidad, tendremos por resultado un enorme e incontrolable CSS.

5 buenas maneras

Lo que debemos evitar es:

1. La Atomicidad

Imaginemos una página Web como si fuera un coche. Para crear ese coche usamos piezas de lego, una a una las vamos posicionando hasta crear la figura del coche.

  • Con CSS básicamente hacemos lo mismo, podemos ir pieza a pieza posicionando y creando el sitio web. Y es justamente el planteamiento que debemos cambiar.
  • La idea es evitar pensar en pequeñas piezas (átomos) y pensar en objetos que se puedan reutilizar. De esta manera podemos por ejemplo crear con CSS una rueda del coche, que a su vez bastaría para simular las otras tres restantes.
  • Esto se podría considerar una evolución de la forma de pensar en el CSS.

2. Normas desfasadas

Que van acumulandose, que no se reutilizan, que son incrementales en el tiempo, muy especificas, etc.

3. Normas imprevisibles

Que no pueden ser reutilizadas y que son totalmente dependientes de su ubicación.

4. Guerras de especificidad

Nodos hijos de hijos de otros hijos, hacks, estilos con #ID que no pueden ser reutilizados, la sentencia !important no tiene cabida (si se usa bien la cascada), etc.

5. Duplicidad

Definir en numerosas ocasiones reglas como: margin, float, font-size, etc. Como solución tenemos:

Mic y Mac

video - - 2 replies - share

Un vídeo buenísimo, tanto por la historia como por la forma de contarla. Sin duda arrancará alguna risa…

También es impresionante el 3D empleado, están cuidados todos los detalles de modelado e iluminación, al máximo.

Takagi Masakatsu, artista Multimedia

video - - leave a reply - share
takagi

Takagi Masakatsu es un gran artista multimedia. Vive en Kyoto (Japón) y sus creaciones son realmente impresionantes.

La fusión de la música y pintura, una confluencia perfecta de los multimedia bajo una creatividad y arte que sin duda os dejará fascinados.

Hay un vídeo promocional de Takagi Masakatsu y MAC (no es por dar publicidad) donde se muestra lo que el llama muy acertadamente el “sonido de la luz“. El vídeo esta muy bien producido, sus contenidos y comentarios son excelentes (independientemente de la publicidad a MAC “que también me parece muy acertada”), os recomiendo este vídeo y el resto que también se encuentra en el sitio web Apple.

Read more

Mi primera animación en Flash

video - - leave a reply - share

Esta creo que fue mi primera animación en Flash, realizada haya por el año 1998. -Si si- se que es un poco fantástica y chapucilla, pero en aquella época os puedo asegurar que me impresionaba.

Creo recordar que la había hecho empleando bastantes destellos y efectos en photoshop e importando todo eso como imágenes a flash, luego un tipo de letra adecuado y finalmente a darle movimiento.

En definitiva, esto es una reliquia que guardo como un recuerdo especial.

Ver más información acerca del proyecto IRCOrioN.