Apr 21, 2012

Bootstrap sí, pero no

El pasado 21 de abril, Goio de La Personnalite y yo, dimos una charla sobre Bootstrap, el nuevo framework front-end desarrollado y liberado por Twitter.

La organización del evento corrió a cargo de nuestros compis de The Mêlée. Y como predicamos con el ejemplo, para la presentación hemos utilizado HTML5, CSS3 y Javascript, con la ayuda de la super librería deck.js. Son 35 slides repletas de referencias y recursos sobre Bootstrap: ventajas, desventajas, consejos y alternativas varias.

Realmente Boostrap ha sido una excusa para hablar sobre nuevas tecnologías y metodologías de desarrollo front-end, como pueden ser LESS, OOCSS o Responsive Web Design.

Y si aún quieres más, visita Front-end Wiki para encontrar cientos de recursos muy bien organizados sobre desarrollo front-end.


Resumen

Desde que descubrí Blueprint hace varios años, no he dejado de decirle a todo el mundo que trabajar con un Framework CSS es el mejor camino para enfrentarse a un proyecto web. Independientemente del tamaño del proyecto, es una buena idea no reinventar la rueda cada vez. Sobre todo porque te centras en cosas mas importantes y te olvidas del layout, que siempre da problemas y quita tiempo.

Ahora bien, con un megaframework del tipo Bootstrap la curva de aprendizaje es un pelín dura. Sobre todo porque te obliga a entender su estructura y forma de trabajar. Configurar todo te puede llevar un tiempo (por ejemplo aprender a trabajar con LESS es una prioridad). Pero creo que compensa, ya que la siguiente vez lo harás con los ojos cerrados.

Bootstrap tiene varios componentes, uno de ellos es el Scaffolding, que viene a ser básicamente un reset + grid (implementado de fábrica con un layout fixed, fluid y responsive). El resto de componentes (tablas, formularios, buttons, icons, plugins jquery, etc.) te los puedes saltar si quieres, pero es una buena idea echarle un ojo.

Otra punto importante: necesitas venderle la idea al resto del equipo (diseñadores, programadores, jefe de proyecto, etc.), porque sin su implicación será imposible que todo salga bien.

El diseñador gráfico necesitará saber que debe trabajar con un grid. Podrá elegir el número de columnas y el gutter, pero deberá adaptarse al mismo. También deberá asumir que ya no sirve de nada diseñar una única pantalla en el Photoshop/Fireworks, ahora el grid es responsive. Por lo tanto deberá tener en cuenta los diferentes tamaños de los dispositivos: +1200px, +980px, +768px, -767px, -480px.

Nuevas cuestiones técnicas para los programadores: el problema de las imágenes en las implementaciones responsive. Todo un mundo por descubrir.

Un último punto, todo esto implica aumentar el tiempo de trabajo y alguien deberá asumir los costes. El cliente deberá saberlo, ya que tendrá que pagarlo.