La intención de un framework es principalmente ahorrar tiempo y minimizar el riesgo de errores en el desarrollo de aplicaciones. Los frameworks nos evitan, sobretodo en los momentos iniciales del desarrollo de una aplicación, repetir código para construir la base y nos permiten conseguir ciertas funcionalidades o módulos genéricos de forma más rápida y sencilla. Así como hay frameworks para PHP (CakePHP, CodeIgniter, The Zend Framework...) o para Javascript (como no... JQuery), también existen varios frameworks para CSS. Veamos en qué consisten.

¿Qué es un framework CSS?

Igual que sus parientes orientados a lenguajes de servidor o cliente, el objetivo de un framework CSS será ahorrarnos realizar las tareas básicas al trabajar con hojas de estilo. Normalmente los frameworks CSS se componen de uno o varios archivos con declaraciones predefinidas que incluyen:

• CSS Reset: Ya hablamos de las ventajas de resetear los estilos al empezar a trabajar la maquetación de una página, en nuestra lista de consejos y buenas prácticas para CSS.  Resetear los estilos nos permitirá homogeneinzar, a priori, las posibles diferencias de visualización entre navegadores, unificando las propiedades básicas de los elementos: márgenes, paddings, tamaños, formatos, etc.
• Layout:  Una parte de los frameworks va dirigida a una de las tareas más árduas a la hora de maquetar cualquier diseño: conseguir un determinado layout, más o menos complejo, que sea, además de óptimo, "cross-browser", e.d. compatible con todos los navegadores. Suelen disponer de múltiples opciones combinables para conseguir layouts complejos: múltiples columnas, anchos fijos, elásticos, líquidos...
• Tipografías: Una gestión genérica de las tipografías que se usarán en la página. De nuevo, no sólo se trata de aplicar un uso inteligente de fuentes y tamaños, si no de unos altos de línea, márgenes, paddings... consistentes, que ayuden a  mantener un correcto ritmo vertical en la página.

Ventajas de usar un framework CSS

• Permite agilizar el desarrollo, sobretodo en sus momentos iniciales.
• Te ahorra las habituales batallitas entre navegadores para conseguir que tus layouts sean "cross-browser".
• Partes de una base normalizada / homogeneizada sobre la que desarrollar un trabajo adicional.
• Si el framework CSS está bien documentado, agiliza el trabajo en un equipo relativamente grande.

Entonces... !¿Porqué no los uso?!

Eso me gustaría saber... No, es broma. De verdad que, aunque en el caso de frameworks de desarrollo para lenguajes como PHP o Javascript me parece una ventaja a la que sacar partido, creo que en el caso de las hojas de estilo, las ventajas no son suficientemente potentes como para superar el peso de las desventajas, que para mi son:

• Curva de aprendizaje. Algunos frameworks son realmente complejos, y es necesaria bastante dedicación  y pruebas para llegar a controlarlos bien, conocer y usar todo su potencial.
• Puede afectar negativamente a la semántica de tu marcado HTML. La mayoría de los frameworks contienen definiciones demasiado genéricas que además han sido pensadas y nombradas pensando únicamente en la apariencia que tendrán. Y si recordamos, uno de los consejos en el artículo que citábamos antes era "Sé descriptivo en los nombres y huye de usar aquellos que se refieran a la apariencia de los elementos." Meeec. Va a ser que un contenedor llamado "big-square-at-the-left" no va a resultar muy práctico si dentro de unos meses debemos cambiar el layout de nuestra página. ¿No habíamos quedado que la ventaja principal de las hojas de estilo era separar contenido y presentación?
• Gran parte del código nunca será utilizado. Los frameworks intentan prever todas las situaciones y contienen muchas definiciones genéricas que posiblemente nunca lleguemos a utilizar. Esta desventaja sería en realidad aplicable también a otro tipo de frameworks. Con la diferencia que un framework PHP por ejemplo, el cliente no debe descargar TODO el framework para que la aplicación funcione: se ejecuta en el servidor. El CSS en cambio sí debe descargarse al navegador, con lo que debemos cuidar su extensión si no queremos afectar negativamente al rendimiento.
• Por último, y posiblemente la más importante al menos para mi, es que usar un framework CSS te corta las alas a la hora de aprender, de entender cómo funcionan realmente las hojas de estilo. Muchas de las cosas que sé ahora las aprendí mientras me rompía los cuernos tratando de solucionar absurdos bugs de render de Explorer, o de conseguir flotar aquella caja rebelde, o buscando el motivo por el cual la cascada se iba a tomar viento al definir tal o cuál color. En mi opinión, condiciona excesivamente el trabajo del desarrollador.

Lista de frameworks CSS

De todas formas, te animo a que conozcas y pruebes algunos de estos frameworks ( quizás entonces entiendas mis motivos... o pienses que estoy loco )

• YAML (Yet Another Multicolumn Layout)
• Blueprint
• Content with Style
• YUI: Yahoo User Interface Library - Grids

Conclusión 

Aunque no recomiende su uso, sí que hay algunas ideas que subyacen al trabajo con frameworks con las que comulgo, y te invito efusivamente a seguir, como son:

• El reseteo de los estilos al principio de tus CSS.
• La creación de una librería de "helpers" o snippets de código y declaraciones CSS que te sirvan como referencia para resolver situaciones comunes.
• Definir y mantener una estructura y una sintaxis del documento CSS que sea consistente, y aplicarla siempre en todos tus proyectos.

Otros artículos interesantes que inspiraron este post

• CSS Framewoks | Smashing Magazine
• Why I dont use CSS Frameworks | Warpspire
• Please, do not use CSS Frameworks | Monday by Noon
  

Nos avisa Jose, de Anuncios.es, de un concurso que han lanzado desde su site y que vale la pena comentar:

Si hace poco estrenaban un nuevo diseño para su web, ahora es el momento de encontrar un buen logotipo para esta nueva etapa. Para ello, han preparado un concurso: Los participantes deberán enviar un logotipo de 200x80 píxeles y un icono de 20x20 píxeles antes del día 6 de enero. Si te animas a participar debes saber que el premio no está nada mal: un mini-portátil ASUS EEE 4G. El mismo día 7 darán a conocer el ganador.

Quizás se echa en falta algo más de información sobre qué quieren conseguir / transmitir con el logotipo, unas mínimas directrices que ayuden a los participantes a saber qué busca exactamente la gente de Anuncios.es.

Más información | Concurso logotipo Anuncios.es

Presentamos la primera versión de lost in Bilbao tv, una producción audiovisual local dedicada a la cultura y ocio de Bilbao.

Que las ciudades tienen mucho que ofrecer y que uno no se entera ni de la mitad de las cosas que pasan, es algo común entre los cosmopolitas de cualquier ciudad, en nuestro caso particular, en Bilbao y alrededores (Getxo, Barakaldo, Portugalete, etc).

Hace varios meses, se nos ocurrio la idea de utilizar un formato de videoblog, con caracter de informativo semanal para destacar aquellos eventos interesantes que ocurrian en la ciudad donde vivo actualmente, Bilbao.

Ha sido un proyecto de start-up emocionante y que hoy presentamos en su primera versión Beta (para variar), con seis programas a nuestras espaldas (3 en castellano y 3 en euskera) y muchas, muchas pruebas piloto.

Lost in Bilbao es el primer videoblog de temática local y enfocada a eventos culturales, entrevistas y ocio de estas características... aunque ante una vertiente reciente, como son los videoblogs, ser el primero en algo no es dificil (Especialmente en castellano, y no digamos en euskera)... lo complicado es abrir camino. 

Javier Martín de Loogic.com  lo acaba de definir como el primer metrovideoblog, me ha encantado la definición :). 

Este programa ha sido posible, gracias al equipo de 4 personas que nos hemos unido, a los medios escasos que nos han obligado a ser creativos, a las ganas de aprender algo que es completamente nuevo para todos, y sobre todo, por que nos gusta conocer cosas nuevas.

Uno de los puntos interesantes que queremos destacar del proyecto, es el enfoque social. Tenemos intención de dar cobertura a todos aquellos grupos de música, teatro, artistas y diseñadores que siendo conocidos o no, quieran mostrar su trabajo. El único requisito... ser de la ciudad de Bilbao o alrededores o realizar algún evento en la ciudad aunque vengan de otro lugar.

Sin más, aquí llega... www.lostinbilbao.tv

PD: Os adjunto los canales a través de los cuales podéis estar al día de los últimos videos, imágenes  y noticias:

Twitter , Youtube, iTunes, RSS, Flickr  

Curiosa imagen que representa visualmente la evolución de Photoshop, a través de uno de los elementos más importantes de su interfaz: la barra de herramientas. Destaca la tendencia a simplificar de nuevo algunas opciones en la última versión, CS3, y cómo se ha reducido el ruido eliminando las líneas separadoras entre botones. Los cambios pequeños son poderosos, ¿verdad?

La imagen es tremenda: un momento de acción trepidante, un instante perfecto captado en una fotografía... pero es "sólo eso"? Para nada. En realidad se trata de un completo trabajo de edición en qué cada parte de la imagen se ha captado y trabajado por separado: el escenario, los disparos, el arma del "tirador", parte de su cuerpo, la secretaria, el vaso de leche, el "atacado"... decenas de piezas de un puzzle que encaja a la perfección. 

En el siguiente video podréis ver paso por paso las etapas de producción de la fotografía. Disfrutadlo.

Via | didntyouhear 

Aunque existen muchos procedimientos tanto online como offline para descargar videos de Youtube u otras redes sociales de video, estos días he descubierto dos de ellas que merecen especial atención, ya que no se limitan a descargar el video en formato FLV, tambíen realizan la conversión automaticamente a formatos legibles.

Descargar videos de estas redes te permite visualizarlos en dispositivos portátiles de manera offline o utilizarlos para tus montajes de video (Cuidado con las licencias y copyrights).

Online:  vixy.net

Una de las que más he utilizado es vixy.net, una web que permite descargar videos de cualquier red social de videos como Youtube o Daily Motion pero ya convertidas a cualquiera de los siguientes formatos: AVI, MOV, MP4, 3GP Y MP3.

En estos momentos se encuentra en Beta (Indefinidamente en construcción), y salvo algunos momentos que no permite realizar ninguna operación a causa de sobresaturación de su servidor, por norma general funciona bien y rápido. La única pega es que inserta un logotipo de su web en el último fotograma del video convertido (Se puede editar y eliminar sin problemas).

 Offline (Mac y Windows): Tubesock

Lo he probado recientemente, y es la herramienta definitiva si necesitas realizar descargas de Youtube o Daily Motion de forma habitual, cuesta 15$en su versión para MAC y 50$ el family pack.

Descarga y convierte de manera rápida y eficaz. Por suerte la versión de prueba permite descargar los 30 segundos primeros de video que a veces son suficientes para algunas necesidades.

Durante estos últimos meses hemos estado preparando un videoblog que publicaremos a partir de finales de noviembre y del que daremos detalles más adelante.

Como la experiencia ha sido muy enriquecedora, sobre todo dado que el bajo presupuesto nos ha obligado a ser más creativos, vamos a compartir algunos aspectos interesantes con vosotros.

Nuestro caso en particular es el siguiente:

Queremos realizar un videoblog, grabado en una habitación de unos 25m2, para ello necesitamos luz frontal y una luz de contra para separar visualmente al sujeto del fondo y eliminar ciertas sombras.

Este es el resultado y a continuación os explicamos como hemos llegado a el:

Sigue aquí »

Con este artículo empezaremos una serie de posts que tratarán de diversas técnicas y consejos que podemos seguir para mejorar el rendimiento y los tiempos de carga de nuestra página web. Y es que el rendimiento de una aplicación web no sólo depende de la programación del lado del servidor, si no también del marcado, el uso que hagamos de hojas de estilo, de imágenes, de nuestra programación javascript... Todos ellos campos que afectan directamente al desarrollador web en su faceta de maquetador/diseñador.

Hoy empezaremos desarrollando una técnica CSS muy sencilla y efectiva: Los CSS Sprites.

La problemática.

Una de nuestras máximas prioridades a la hora de optimizar nuestra aplicación web debe ser reducir las peticiones que ésta hará al servidor una vez el HTML se haya cargado en el navegador del cliente. Cada archivo de hoja de estilos, cada archivo Javascript, cada imagen... cada elemento externo en definitiva, se solicita de forma separada y aumenta por tanto la transferencia y el tiempo de carga, esto resulta obvio. Lo que no resulta tan evidente es que ese aumento no es proporcional a la suma del tamaño de los archivos externos, es decir, la carga de 10 elementos de 5 KB no es igual de rápida que la de un elemento de 50 KB.

Además de sumar los tiempos de transferencia para cada archivo, deberemos sumar por un lado el tiempo que tarda en realizarse la propia conexión+petición+respuesta y el tamaño correspondiente a las cabeceras del archivo. Recordemos, en relación a las cabecera, que éstas se adjuntan a cada petición al servidor y que si, además, nuestra aplicación usa cookies, éstas también se adjuntarán a cabeceras para cada archivo. Podría darse el caso, por ejemplo en un archivo de imagen pequeño, en qué el tamaño de las cabeceras + cookies ¡superara al tamaño del propio archivo!

La solución.

Este sería un claro ejemplo de una técnica antigua retomada para solucionar un problema moderno. Y es que para encontrar el origen de los CSS Sprites debemos mirar atrás hacia los antiguos juegos en 2D ( o los actuales juegos para móviles ), que usaban los "sprites" para las animaciones de sus personajes u otros elementos del juego. 

Como ves, los sprites no eran más que imágenes que contenían a su vez varias imágenes pequeñas, que en el caso de los videojuegos se utilizaban para recrear una animación. En nuestro caso, la solución a las múltiples peticiones para imágenes en nuestras hojas de estilo pasará por el uso de imágenes grandes que contengan a su vez varias imágenes más pequeñas. De esta forma, para mostrar diversos fondos o varios iconos, estaremos realizando una única petición al servidor, con el correspondiente ahorro en tiempo de carga y transferencia.

Implementación.

El "truco" en esta técnica está en el uso correcto del posicionamiento de backgrounds para mostrar sólo aquella parte de la imagen que nos interesa. Pongamos como ejemplo un menú, en el que queremos mostrar un icono diferente por cada opción.

Nuestro HTML podría ser algo parecido a:

y para el CSS usaríamos

    .option1, .option2, .option3 { padding-left:20px; }
    .option1 { background:url(iconos.png) 0 0 no-repeat;
    .option2 { background:url(iconos.png) 0 -30px no-repeat;
    .option3 { background:url(iconos.png) 0 -60px no-repeat;

Como verás, hemos jugado con el posicionamiento vertical de la imagen para mostrar sólo aquella parte de la misma que nos interesa, la que contiene el icono en cuestión:

A partir de aquí podemos aplicar esta técnica de trabajo a muchos otros casos, ya no sólo iconos, sino fondos de imagen, pestañas, u otros elementos gráficos de interfaz.

Es fácil hacerse una idea del ahorro conexiones que podemos conseguir: una página con 20 iconos y 3 fondos de imagen diferentes para distintos contenedores pasaría de 23 peticiones de imágenes desde las CSS a sólo 2: una imagen conteniendo todos los iconos y otra conteniendo los fondos.

Más información.

• Ejemplo práctico: La home de Yahoo
• CSS Sprites en A List Apart 

Ver álbum de fotos »