¿Que es twitter Bootstrap?... Twitter Bootstrap es una herramienta que nos permite desarrollar interfaces web de una forma estandarizada.
Podríamos decir que twitter Bootstrap es un framework de desarrollo Front-End de libre uso (gratuito), que nos provee los CSS, el Javascript, e incluso una librería de íconos que facilitan y aceleran el desarrollo web.
Si nos señimos al flujo de trabajo que nos propone TB, nos beneficiamos de:
- Menores tiempos de desarrollo,
- Una estandarización del proceso de maquetación,
- Una mayor compatibilidad entre navegadores,
- e incluso una manera simple y efectiva de diseñar la GUI de una aplicación móvil.
GUI: Significa Interfaz Gráfica de Usuario, que para el caso de los dispositivos móviles encierra ciertas particularidades, en especial su caracter Multi-Touch.
Probablemente, si ya tenemos una cierta experiencia en el desarrollo front-end, contaremos con una batería de recursos donde apoyarnos para realizar esa tarea con eficiencia. Entonces, cabe hacerse la pregunta: ¿Es Twitter Bootstrap la herramienta apropiada para nosotros?.
En este artículo, daremos un breve recorrido sobre este popular Framework Frontend, con la intención de ayudarnos a formar una opinión individual de la conveniencia o no, de incluir este recurso en nuestro workflow.
Para algunos populares CMS's, Twitter Boostrap parece posicionarse como el Santo Grial en el desarrollo de plantillas. Al menos Joomla! y Wordpress, en sus últimas versiones, los temas o plantillas de paquete están diseñados usando Twitter Bootstrap.
¿TB es un framework CSS?
Existen muchos framework que ayudan a facilitar la maquetación CSS, entre ellos:
Estos framework CSS, en general definen una serie de clases CSS incluyendo un sistema de grilla para facilitar el diseño del layout de la interfaz web.
Sin embargo, con el advenimiento de los dispositivos móviles , como smartphone y tablet, surge la necesidad de diseñar interfaces web con buena usabilidad en estos dispositivos y una estrategia para resolver este problema es usar 'diseños fluidos' e implementar el denominado 'responsive design'. En ese contexto donde Twitter Bootstrap nos ofrece una vía rápida.
Twitter Bootstrap va más allá de un framework CSS, pues propone una serie de estructuras (HTML5 + CSS) que en algunas ocasiones agregándole un poco Javascript al estilo jQuery, creamos interesantes elementos de interfaz con buena usabilidad.
¿Cuales es la principal aplicación de Twitter Bootstrap?
Si bien es cierto, se pueden desarrollar páginas web de baja complejidad con TB, no es la opción más recomendable. Pues sobrecargamos mucho la partida de la página web y probablemente perderemos algunos puntos en el posicionamiento SEO.
En este sentido, hay mejores opciones y todavía seguir usando un Framework CSS. Por ejemplo, iniciar la página web con el HTML5 boilerplate y usar el Framework CSS '320andUp' que sigue la filosofía 'mobile first': http://stuffandnonsense.co.uk/projects/320andup/
Así, las principales aplicaciones de Twitter Bootstrap (BT) o mejor dicho las recomendables aplicaciones de BT no están en el desarrollo de una página web tradicional, aunque hay muchos sitios que ofrecen plantillas FrontEnd con un uso intensivo de este framework.
Las situaciones o aplicaciones donde si TB es recomendable en:
- Diseño de Panel de Control (Dashboard) de una aplicación Web: Básicamente el Dashboard es el punto de entrada a la administración de una aplicación web (BackEnd), generalmente de acceso restringido.
- Diseño de Aplicaciones Móbiles: Es conocido que hoy en día es muy fácil desarrollar una aplicación móvil a partir de una aplicación web, usando PhoneGap. Y como la propuesta de Twitter Bootstrap se apoya en HTML5 CSS3, que son soportados por los dispositivos móviles, el proceso de creación de una aplicación móvil se hace sin tropiezos.
Una alternativa a Twitter Bootstrap en el ámbitos de las aplicaciones móviles es jQuery Mobile.
Cómo maquetar una web con Twitter Bootstrap?
Es bastante simple, haciendo uso de las clases CSS integradas en TB, por ejemplo:
- Para definir un renglón en la pantalla usamos:
<div class="row">...</div> - Si deseamos parcelar el renglón en 2 zonas:
<div class="row">
<div class="span4">...</div>
<div class="span7 offset1">...</div>
</div> - También podemos acotar el renglón o fila para que no use todo el ancho de la pantalla:
<div class="container"><div class="row">...</div></div> - O incluir un ícono usando:
<i class="icon-search"></i>
En resumen, el proceso de maquetación con TB no tiene mayor complejidad, para conocer un poco más el cómo usar Twitter Bootstrap puede leer este artículo.
Aunque es escencial, para extraer todo el poder TB aprender el lenguaje LESS sino sólo estaremos escarbando en la superficie de todas las posibilidades de este recurso.
Twitter Bootstrap es un proyecto en desarrollo, que hasta la fecha a liberado numerosas versiones. Estas versiones TB las podemos encontrar en: https://github.com/twbs/bootstrap/releases
Referencias
Galería de Dashboard (Panel de Control), usando TB:
Sitios web diseñados usando TB:
Otras referencias:
