BOOTSTRAP

CONCEPTO.

Bootstrap es una biblioteca multiplataforma o conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como extensiones de JavaScript adicionales. A diferencia de muchos frameworks web, solo se ocupa del desarrollo front-end.

En WordPress, por ejemplo, puede instalarse como tema o usarse para el desarrollo de plugins o, incluso, dentro de ellos para estilizar sus funciones. El propósito del framework es ofrecerle al usuario una experiencia más agradable cuando navega en un sitio. Por esta razón, tiene varios recursos para configurar los estilos de los elementos de la página de una manera simple y eficiente.

Esta es una herramienta que proporciona interactividad en la página, por lo que ofrece una serie de componentes que facilitan la comunicación con el usuario, como menús de navegación, controles de página, barras de progreso y más. Además de todas las características que ofrece el framework, su principal objetivo es permitir la construcción de sitios web responsive para dispositivos móviles.

ORIGEN.

Bootstrap, originalmente llamado Blueprint de Twitter, fue desarrollado por Mark Otto y Jacob Thornton de Twitter, como un marco de trabajo (framework) para fomentar la consistencia entre las herramientas internas. Antes de Bootstrap, se usaron varias bibliotecas para el desarrollo de interfaces de usuario, lo que generó inconsistencias y una gran carga de trabajo en su mantenimiento.

Twitter celebró su evento Semana Hack y en dicho evento se hizo muy popular cuando los desarrolladores usaron esta herramienta para sus proyectos. Bootstrap fue lanzado el 19 de Agosto de 2011 y hasta la actualidad han lanzado más de 20 versiones del Framework, actualmente Bootstrap es de uso libre y también es usado por la compañía Twitter en sus proyectos.

"Un super pequeño grupo de desarrolladores y yo nos reunimos para diseñar y construir una nueva herramienta interna y vimos la oportunidad de hacer algo más. A través de ese proceso, nos vimos construyendo algo mucho más sustancial que otra herramienta interna. Meses después terminamos con una primera versión de Bootstrap como una manera de documentar y compartir bienes y patrones de diseño comunes dentro de la compañía". Mark Otto.

DISEÑO RESPONSIVE.

Una de las características principales de Bootstrap es permitir que la adaptación de la página se realice según el tipo de dispositivo utilizado. Para garantizar la responsividad, el framework funciona con la estilización del elemento <div> y el uso del class container. En la práctica, el elemento <div>, funciona para crear una serie de notas, similar a una tabla, capaz de estructurar la página de forma adaptable.

Ya hubo un intento de utilizar tablas para crear diseños responsivos, sin embargo existían limitaciones para definir la longitud de las columnas lo que hizo imposible su uso en dispositivos más pequeños, como smartphones. El elemento <div> es más flexible, ya que permite definir y cambiar el tamaño de la longitud fácilmente. Bootstrap le ha asignado al elemento <div> una característica de class container, que funciona para determinar las dimensiones apropiadas para los elementos insertados en ese espacio.

Básicamente, o framework funciona con tres tipos de containers:

• Container: como un conjunto con una propiedad de ancho máximo, que determina qué tamaño de tela es ideal para crear el diseño de página.
• Container-fluid: considera la longitud total de la tela del dispositivo para definir el diseño. Para esto, se considera la propiedad width (100% en todos los límites de tamaño de tela).
• Container-{ breakpoint}: considera width (100% hasta alcanzar un cierto tamaño).

BIBLIOTECA DE COMPONENTES.

Otra interesante función de este framework es la cantidad de componentes que pueden ser usados para proporcionar una mejor interacción y perfeccionar la comunicación con el usuario.

Enseguida mencionaremos los principales:

• Alertas: O Bootstrap permite una configuración simple y rápida de diferentes tipos de alertas, con colores específicos, según la situación. Para mostrarle al usuario un alerta que indique atención, por ejemplo, simplemente debemos usar .alert-danger y aparecerá un cuadro de texto con un fondo rojo.

• Carrusel: Un componente ampliamente utilizado en Bootstrap es el Carrusel, una presentación de diapositivas, es decir, una herramienta que permite la visualización de imágenes de manera receptiva. También permite la inclusión de efectos especiales para la transición de imágenes y controles de visualización, como por ejemplo los indicadores de “siguiente” y “anterior”.

• Barra de navegación: Otro poderoso componente de la estructura es la NavBar (barra de navegación), que permite la construcción de un sistema de navegación sensible. Es posible configurar diferentes formas de presentar el menú, elegir entre posicionamiento lateral o superior y, también, definir una forma de visualización que se pueda extender o contraer. También es posible determinar cómo mostrar los enlaces del menú, que pueden ser en forma de botón, enlace, menú suspenso, entre otras configuraciones, para facilitar la implementación de la navegación del sitio.

AGREGAR BOOTSTRAP A UN PROYECTO.

Es bueno saber que Bootstrap 5 Beta se lanzó oficialmente el 7 de febrero de 2021, tres semanas después del lanzamiento de la tercera alfa. La versión 5 Beta 2 es actualmente la última versión del paquete y dispone de varias formas de comenzar a implementarlo, de acuerdo a las necesidades y habilidades de los usuarios. A continuación, se procederá a explicar dos métodos de implementación de Bootstrap:

• Bootstrap CDN: es posible implementar Bootstrap mediante un Content Delivery Network (Red de Entrega de Contenidos). Para lograrlo, basta con agregar los links referentes al CDN en nuestro archivo HTML, y una vez que accedamos a internet, veremos nuestra página con un diseño y estilo adaptativo.

• Descargar Bootstrap: mediante esta técnica, se debe de descargar el proyecto precompilado de Bootstrap, desde GitHub, e incluirlo en el directorio raíz del proyecto. Este proyecto precompilado, contiene una estructura de carpetas, diseñada para separar:

1. Las hojas de estilo CSS de Bootstrap.
2. Los archivos JavaScript de Bootstrap.
3. Las fuentes glyph-icon incluidas en el framework.

ESTRUCTURA DEL PROYECTO.

Luego de seguir los pasos para integrar Bootstrap a nuestro proyecto, es necesario comprender algunos elementos necesarios para empezar a crear nuestra pagina web adaptativa, estos elementos son:

• La etiqueta doctype: Bootstrap utiliza elementos HTLM y propiedades CSS que requieren el uso de la etiqueta doctype definida para HTML5 al inicio del documento. También es importante especificar el lenguaje y el tipo de codificación que se va a implementar.

• Bootstrap y dispositivos móviles: Bootstrap3 es amigable con los dispositivos móviles y permite realizar «zoom» al contenido web desde dichos dispositivos. Para asegurar el correcto renderizado y el zoom, es necesario agregar el tag meta con name=»viewport» al documento html, en la sección del «header».

• Los contenedores:  Son elementos que contienen todos los demás elementos de nuestro sitio web y que albergan el sistema de grid (punto siguiente).

• Grid: Bootstrap maneja un sistema de grid o cuadricula conformado por 12 columnas sobre las cuales se deben distribuir y ubicar los elementos. Debido a la gran variedad de tamaños en las pantallas de los dispositivos, Bootstrap a creado algunas clases que definen diferentes tamaños de las columnas de acuerdo al dispositivo. 

CONSEJOS PARA USAR BOOTSTRAP.

Lee algunos consejos sobre cómo configurar y usar o Bootstrap que te daremos a continuación:

• Realiza un curso: Realizar un curso es la mejor manera de aprender a usar las tecnologías disponibles en el mercado, como Bootstrap. Esto se debe a que contar con la ayuda de alguien en este momento es importante para entender las características del framework y aclarar las dudas que no siempre se pueden resolver en foros o buscando en Internet.

• Aprende sobre plugins: Además de las funciones básicas, Bootstrap también permite el uso de plugins. En la práctica, es una serie de recursos adicionales que ayudarán a mejorar la experiencia del usuario. Existen varios plugins pagos y gratuitos en Internet que se pueden descargar y utilizar con el framework.

• Ten una buena guía cerca de ti: Otra forma de mejorar o conocer el framework es consultar las guías de referencia. El sitio web oficial de Bootstrap, por ejemplo, proporciona una amplia documentación sobre todas sus características, además de ser rico en ejemplos. También, hay varios libros y sitios de referencia que te ayudarán a aprovechar al máximo esa herramienta.

• Usa la versión más nueva: Cada vez que se lanza una nueva versión, hay nuevas funciones disponibles, además de los cambio en las funciones existentes. Por lo tanto, es importante verificar si estamos utilizando la última versión disponible del framework, ya sea para aplicarla a tu sitio web o a tu propio aprendizaje. De esta manera, te aseguras que los recursos utilizados en la página estén actualizados.

RAZONES PARA USAR BOOTSTRAP.

• Mobile-first: Bootstrap sigue el concepto de mobile first. Esto significa que la preocupación del framework es, primero, desarrollar una página que funcione perfectamente en dispositivos móviles y luego en el desktop. La ventaja de esta estrategia es la garantía de tener un sitio web al que se pueda acceder desde cualquier dispositivo, lo cual es esencial debido a la cantidad de personas que usan smartphone.

• Estándar visual: Las funciones disponibles en Bootstrap le ofrecen una experiencia muy rica al usuario. Esto se debe a que el estándar visual de estilización sigue las tendencias de diseño utilizadas en este momento. Además, hay numerosos temas de Bootstrap gratuitos o pagos que se pueden descargar de Internet.

• Reutilización de código: Para desarrollar muchas de las características existentes en Bootstrap, sería necesario escribir una gran cantidad de líneas de código lo que provoca un aumento en el tamaño de los archivos y en la cantidad de datos transferidos a la carga de la página. Cuando uses Bootstrap, simplemente debes vincular la clase al elemento en el que quieres aplicar el recurso. Por lo tanto, su uso elimina la necesidad de escribir muchas líneas de código y también contribuye a reducir el tamaño de los archivos.

• Comunidad activa: Como framework de código abierto, Bootstrap tiene una comunidad activa de desarrolladores. Además de contribuir con las actualizaciones de las versiones (lo que es muy importante para tener una herramienta siempre actualizada). La comunidad también mantiene al día la documentación, administra un blog con consejos y noticias sobre la herramienta y ayuda en una página en el sitio web de Stack Overflow.

INSTALAR BOOTSTRAP.

Hay diferentes formas de descargar este framework. Una de ellas es descargando la versión compilada de los códigos CSS y JavaScript en la página de Bootstrap. También hay una opción para descargar el código fuente del framework, puesto que es una herramienta de código abierto. Aquellos que no quieran descargar los archivos pueden acceder a la estructura sin necesidad de instalarlos en el servidor. 

En la práctica, los archivos de instalación están en otro dominio, o sea en otro DNS. Para eso, tan solo debemos usar los enlaces para acceder o Bootstrap CDN y, de esa forma, agregarle las referencias a los archivos necesarios para su uso. Otra forma de descargar el framework es a través de los administradores de paquetes.

Es importante decir que Bootstrap se puede usar con diferentes lenguajes de programación. Por esta razón, puede ser descargado como npm, desde Node.js, con RubyGems, Composer o Nuget, y usarse para crear un sitio web en WordPress, en sitios desarrollados en Ruby on Rails, Asp.Net, etc.

CONFIGURAR BOOTSTRAP.

Hay diferentes formas de configurarlo o estructurarlo para usarlo en una aplicación web. Sin embargo, para que funcione correctamente, es necesario agregar las bibliotecas JQuery y Popper.js, necesarias para la ejecución de algunos componentes de Bootstrap. Para comenzar a usar Bootstrap en una página, es necesario agregar las referencias de los principales archivos del framework en la página principal de la aplicación.

Puedes buscar el código de una página HTML con todas las referencias necesarias para que la estructura funcione en Getbootstrap.com.

Es importante seguir las referencias en el orden establecido en el ejemplo. Por lo tanto, la primera referencia debe ser el archivo bootstrap.css ubicado en la etiqueta <head>. Las referencias a los archivos JavaScript deben colocarse en la parte inferior de la página, antes de cerrar la etiqueta </body>. El valor predeterminado para los scripts debe ser: JQuery, Popper.js y Bootstrap.js.

También debemos mencionar que la forma en que Bootstrap se configura varía según el tipo de entorno en el que se encuentra. En WordPress, por ejemplo, también es posible agregar el framework cambiando el archivo functions.php de la plantilla.