Bootstrap, el framework de Twitter

Siguiendo con la línea sobre maquetación web que ya iniciamos cuando hablamos de responsive web design, hoy vamos a poner sobre la mesa uno de los proyectos que más han dado que hablar en los últimos meses en la comunidad open-source.

En concreto vamos a hablar de Bootstrap

¿Qué es Bootstrap?

En pocas palabras, podríamos definirlo con un framework para el desarrollo de aplicaciones web con un aspecto bastante limpio y construido sobre las tecnologías más modernas (HTML5, LESS, CSS3, Responsive Web Design, jQuery).

Este framework saltó a la palestra cuando el equipo de desarrollo de Twitter decidió liberar su código y hacerlo disponible para todo el mundo dentro de GitHub

Como muestra de lo que se puede hacer con Bootstrap tenemos el propio interfaz web de Twitter:

Buenas prácticas

Este proyecto es un ejemplo bastante bueno de lo que se puede hacer con las tecnologías antes mencionadas. Gracias a disponer de su código fuente, resulta un auténtico filón para aprender buenas prácticas en CSS, una de las tecnologías más predispuesta a generar lo que se llama Spaguetti Code (donde vas haciendo “corta y pega” de trozos de código generando al final un ficheros con una estructura desordenada y compleja). Por ello, resulta muy recomendable echarle un vistazo a la estructura del código CSS generado para ver como sí se tienen que hacer las cosas.

La comunidad open source

Pero el éxito de este proyecto no está sólo en lo que ofrece, sino que además se ha convertido en todo un referente a la hora de desarrollar interfaces de usuario. Por ello, la comunidad open source se ha volcado con él poniendo a nuestra disposición gran cantidad de recursos que amplian y mejoran las posibilidades, abriendo un abanico más que interesante.

Como ejemplo, algunos de estos recursos que han crecido a la sombra de Bootstrap son:

  • Stylebootstrap: Una herramienta para generar versiones personalizadas de Bootstrap. Permite jugar con los colores, tamaños, tipos de letra, etc para hacer una versión adaptada a las guías de estilo que queramos utilizar en cada momento.
  • Bootswatch y Wrapbootstrap : Páginas con temas para personalizar el aspecto de Bootstrap.
  • jQuery UI Bootstrap: Adaptación al UI de Bootstrap de los componentes de jQuery UI.
  • DataTables : Adaptación al UI de Bootstrap del componente DataTables.
  • jQuery Mobile Bootstrap: Adaptación al UI de Bootstrap de los componentes de jQuery UI.
  • Fboostrapp: Adaptación de Bootstrap para imitar el UI de Facebook.
  • Lavist: Página Web que te personaliza el aspecto de Bootstrap a partir de los colores de una imagen (útil para adaptarlo a los colores corporativos de algún cliente).
  • Finalmente, para sacar ideas, la página BuiltWithBootstrap nos muestra algunos ejemplos de aplicaciones web realizadas utilizando este marco de desarrollo.

Como todo, este proyecto tiene sus admiradores (yo me incluyo entre ellos) y sus detractores, sobretodo diseñadores web que creen que con Bootstrap se limita mucho la vistosidad de las web.

Sin embargo, resulta indudable que para el desarrollo de aplicaciones de trabajo diario, Bootstrap ofrece un interfaz limpio y un entorno muy productivo, siendo posible en muy poco tiempo generar aplicaciones vistosas sin tener que preocuparse a la hora de aplicar los estilos.

Marca de la casa

En Álamo hemos utilizado Bootstrap durante el desarrollo varios proyectos. A continuación os mostramos alguno de ellos:

  • El interaz de administración de a-ilen (un motor de reglas y procesos desarrollado por ÁlamoConsulting para el Hospital de Inca)
  • Una aplicación para gestionar “Equivalencias entre medicamentos” en el Servicio de Salud de Castilla – La Mancha (SESCAM)
  • La Agenda Comercial desarrollada para el Grupo Prisa

Nada más, ahora toca seguir muy de cerca la evolución de Bootstrap. ¡Os mantendremos informados!

1 comentarios :

Hugo dijo...

Una vez más, interesantísimo aporte. Tendré que cacharrear con Bootstrap a ver qué permite y qué no :)