Las características de Bootstrap

En este segundo artículo de la serie vamos a ocuparnos de las características de Bootstrap. Se trata de una completa biblioteca de recursos para el diseño de sitios y aplicaciones web incluyendo plantillas y elementos para formularios, tipografías y menú entre otros.

En el artículo anterior planteábamos que hay ocasiones en que los gestores de contenidos no son la mejor opción y que la escritura de código desde cero para un sitio web es la alternativa correcta. Sin embargo, no significa que tengamos que reinventar la rueda. El uso de frameworks como Bootstrap reduce enormemente el tiempo de diseño y facilita obtener resultados.

Las características de Bootstrap

Para entender las características de Bootstrap, debemos comprender el cambio de paradigma en el diseño de los sitios web.

Cuando aparecieron los sitios web, solo debían adaptarse a los distintos tamaños de monitores. Pero, con el correr del tiempo, teléfonos móviles y tabletas se convirtieron cada vez más en los medios de acceso preferidos de los usuarios. el desafío fue hacer las páginas se adaptaran a las diferentes pantallas sin que el usuario tuviera que agrandar, achicar o mover el contenido para poder verlo.

En principio se adoptaron los siguientes enfoques:

• Diseño responsivo: El diseño es el mismo pero adaptado en forma automática al tamaño de la pantalla.  Este enfoque tiene algunos problemas como que el usuario puede verse obligado a hacer zoom en determinados sectores de la página para poder verlos.
• Avance progresivo: Se comienza diseñando el sitio para el dispositivo con menos recursos (Generalmente el móvil por tener una pantalla más chica, un navegador con menos compatibilidad para características avanzadas y, muchas veces requerir el uso de un plan de datos para conectarse). Una vez terminado, sobre la base de este diseño se van agregando características para obtener la versión para tabletas, notebooks y ordenadores de escritorio.
• Degradación gradual: Es el camino inverso. Se crea primero el sitio para escritorio y se le van quitando características hasta obtener una versión compatible con dispositivos móviles.

Como siempre es más fácil agregar que sacar, el avance progresivo es la tendencia que logró imponerse. Bootstrap por ejemplo, adopta el enfoque «mobile first», es decir que la base del diseño es siempre la versión que se va a mostrar en el tamaño de pantalla más pequeño y, luego se establecen las modificaciones que se irán haciendo  a medida que se pase a los tamaños que siguen.

Una ventaja extra del uso de Bootstrap tiene que ver con que Google asigna prioridad en sus búsquedas a los sitios amigables con los dispositivos móviles.

Otro concepto que debemos tener en cuenta es la diferencia entre diseño frontend y back-end. El diseño front-end se ocupa de todo lo que el usuario ve y todo con lo que interactúa. Backend agrupa aquello que se realiza en el servidor. Un ejemplo de lo primero es el de un formulario web. Lo de mostrar una serie de opciones se muestre como un menú desplegable es diseño frontend, que la opción elegida se envíe por mail o se agregue a una base de datos es diseño backend.

Bootstrap es un framework que combina elementos de estilo CSS y de programación en Javascript para controlar la representación y dar interactividad a todos los componentes de una página desarrollada en HTML5.

Entre las cosas que podemos controlar con Bootstrap están:

• Accesibilidad: Los componentes como menús o diálogos son compatibles con lectores de pantalla o aptos para su uso por personas con movilidad reducida.
• Botones: Incluyendo medidas, estilos, estados y agrupamiento.
• Formularios:  Incluyendo representación, tipos de controles y validación de entradas.
• Imágenes: Controla el origen, la alineación y la adecuación al tamaño de pantalla de las imágenes insertadas.
• Elementos de navegación: Por ejemplo, barras laterales ocultables o menús verticales u horizoantales dependiendo del dispositivo.
• Tipografía: Control de cómo se muestran las diferentes partes del texto.
• Maquetación: Ajuste de la representación del contenido dependiendo del dispositivo

En el próximo artículo veremos algunos ejemplos prácticos de su utilización.