Bootstrap 

¿Qué es Bootstrap?

Fue desarrollado inicialmente por Twitter en 2010 y permite crear interfaces de usuario limpias y compatibles con todo tipo de dispositivos. Entre las ventajas que tiene Bootstrap es que favorece el design responsive, el cuál se utiliza para mejorar la experiencia de los usuarios en el sitio web y en consecuencia el posicionamiento. Para estandarizar las herramientas de la compañía. Inicialmente, se llamó Twitter Blueprint. 

El framework combina CSS y JavaScript para estilizar los elementos de una página HTML. Permite mucho más que, simplemente, cambiar el color de los botones y los enlaces. 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. Esto significa que las páginas están diseñadas para funcionar en desktop, tablets y smartphones, de una manera muy simple y organizada. un poco más tarde, en 2011, se transformó en código abierto y su nombre cambió para Bootstrap. Desde entonces fue actualizado varias veces y ya se encuentra en la versión 4.4.

¿Cómo funciona Bootstrap?

Bootstrap está constituido por una serie de archivos CSS y JavaScript responsables de asignar características específicas a los elementos de la página. Hay un archivo principal llamado bootstrap.css, que contiene una definición para todos los estilos utilizados. Básicamente, la estructura del framework se compone de dos directorios: css: contiene los archivos necesarios para la estilización de los elementos y una alternativa al tema original.

js: contiene la parte posterior del archivo bootstrap.js (original y minificado), responsable de la ejecución de aplicaciones de estilo que requieren manipulación interactiva. Para asignarle una característica a un elemento, simplemente debemos informar la clase correspondiente en la propiedad “class” del elemento que será estilizado, como mostramos e el siguiente ejemplo:

texto alternativo. En este ejemplo, fue asignado el contenido "rounded-sm" para una propiedad de imagen. Es un estilo que agrega bordes redondeados y no un elemento. Por lo tanto, al cargar la imagen, se aplicarán al elemento las características que se refieren a esta clase.

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.

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:

¡Atención! ¡Cuidado mensaje de alerta!

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.

Características principales

El framework Bootstrap combina los lenguajes de programación CSS y JavaScript para estilizar los elementos de una página HTML. Por eso, ofrece muchas más funcionalidades que, simplemente, cambiar la forma y el color de botones y enlaces. Bootstrap destaca por las siguientes características:  

Interactividad. Bootstrap ofrece una gran interactividad en la página, gracias a una serie de componentes que facilitan la interacción con el usuario, como menús de navegación, barras de progreso y controles de página.

 

Diseño responsive. El objetivo principal de este framework es construir sitios web responsive para dispositivos móviles. De una forma muy sencilla y organizada, permite diseñar páginas especialmente adaptadas para funcionar en smartphones, tablets y desktop.

  

Biblioteca de componentes. Otra interesante función de Bootstrap es la cantidad de componentes que ofrece para mejorar la comunicación con el usuario: diferentes tipos de alerta; carrusel de diapositivas para facilitar la visualización de imágenes; y una barra de navegación que permite múltiples configuraciones. 

Origenes

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. Según el desarrollador de Twitter, Mark Otto, frente a esos desafíos:

El primer desarrollo en condiciones reales ocurrió durante la primera «Semana de Hackeo (Hackweek) de Twitter».5​ Mark Otto mostró a algunos colegas cómo acelerar el desarrollo de sus proyectos con la ayuda de la herramienta de trabajo. Como resultado, decenas de temas se han introducido en el marco de trabajo.

Después de unos meses de desarrollo por parte de un pequeño grupo, muchos desarrolladores de Twitter comenzaron a contribuir al proyecto como parte de una haackweek, una semana estilo hackatón para el equipo de desarrollo de Twitter. Se renombró de Twitter Blueprint a Bootstrap y se lanzó como proyecto de código abierto el 19 de agosto de 2011.9​ Mark Otto, Jacob Thornton y un pequeño grupo de desarrolladores principales, así como una gran comunidad de contribuyentes.

Función y estructura

Bootstrap es modular y consiste esencialmente en una serie de hojas de estilo LESS que implementan la variedad de componentes de la herramienta. Una hoja de estilo llamada bootstrap.less incluye los componentes de las hojas de estilo. Los desarrolladores pueden adaptar el mismo archivo de Bootstrap, seleccionando los componentes que deseen usar en su proyecto.

Los ajustes son posibles en una medida limitada a través de una hoja de estilo de configuración central. Los cambios más profundos son posibles mediante las declaraciones LESS. El uso del lenguaje de hojas de estilo LESS permite el uso de variables, funciones y operadores, selectores anidados, así como clases mixin.

Desde la versión 2.0, la configuración de Bootstrap también tiene una opción especial de «Personalizar» en la documentación. Por otra parte, los desarrolladores eligen en un formulario los componentes y ajustes deseados, y de ser necesario, los valores de varias opciones a sus necesidades. El paquete consecuentemente generado ya incluye la hoja de estilo CSS compilada previamente.

¿Qué son las herramientas de Bootstrap?

Antes de entrar en las sugerencias de herramientas, vamos a hablar de lo que son las herramientas de bootstrapping y por qué son importantes. Empezar un negocio, incluso uno de Bootstrapping, es caro. Pero no se puede construir una gran empresa de SaaS o de comercio electrónico sin la ayuda de herramientas digitales. 

Por desgracia, las mejores herramientas suelen ser prohibitivas para las empresas con un presupuesto ajustado.La buena noticia es que hay un montón de herramientas digitales gratuitas, freemium o asequibles que puedes utilizar en su lugar. Estas herramientas suelen ser tan potentes como las de nivel empresarial, que también ayudan a mantener un flujo de caja positivo y a maximizar los beneficios.

Wrike es una herramienta de gestión de proyectos versátil y completa, perfecta para startups y empresas de todos los tamaños. Tiene todas las características que se esperan de una herramienta de gestión de proyectos SaaS, incluyendo diagramas de Gantt, tableros Kanban, informes y formularios de solicitud.

Herramientas de Bootstrap

Asana

Esta herramienta ofrece un sólido paquete de gestión de proyectos con características que varían según el nivel de la cuenta. Su versión gratuita incluye tareas ilimitadas por equipo, proyectos en la vista de tablero o de lista, almacenamiento ilimitado de archivos, un registro de actividades y más.

Trello

Esta herramienta es muy popular en la gestión de proyectos que ofrece una versión básica gratuita. Su versión gratuita ofrece 10 «tableros» (vistas de proyectos) por equipo, «tarjetas» (tareas) ilimitadas y 10 MB por archivo adjunto.

Paymo

Paymo ofrece su plan más económico por 9,95 dólares al mes por usuario. Con este plan puedes acceder a funciones como vistas de tareas, seguimiento del tiempo, plantillas de proyectos y tareas recurrentes.

Microsoft Projects

Ofrece vistas de cuadrícula, tablero y línea de tiempo; coautoría y comunicación en las tareas; y planificación y programación de proyectos.

¿Qué es responsive desing?

El Responsive Design o diseño adaptativo, es la técnica que se usa en la actualidad para tener una misma web adaptada a las diferentes plataformas que nos brinda la tecnología: ordenador, tablet y Smartphone.

Consiste en una serie de hojas de estilo en CSS3, que usando el atributo “mediaquery” convierten una web ordinaria en una web multiplataforma capaz de adaptarse a todos los tamaños que existen, ofreciendo una experiencia para el usuario mucho más amena y cubriendo las necesidades de nuestro público. Atrás quedan las webs que vistas en un Smartphone se tenían que ampliar para poder leer algo.

La traducción podría ser "Responsivo", que sí se encuentra en el diccionario de la Real Academia Española y significa "Perteneciente o relativo a la respuesta". Sin embargo en términos de una página web sería más adecuado usar la palabra "Adaptable", pues la página es capaz de adaptarse al dispositivo u ordenador donde se encuentra. En fin, el término es suficientemente conocido en inglés como para usar la palabra "Responsive" y que todos los que vayan a leer este texto capten perfectamente a qué nos referimos.

¿POR QUÉ TU WEB DEBERÍA SER RESPONSIVE?

Las ventajas del Responsive Design son muchas y leyendo cuales son, seguro que te convences para convertir tu web en una web multiplataforma:

Mejor experiencia de usuario. Eso repercute en la opinión que los usuarios tienen de tu sitio web y el uso que le darán a ella. Mejorará tanto tu imagen de marca como el tiempo de permanencia en la web y aumentará la tasa de rebote entre páginas de tu web.

Se acabaron los contenidos duplicados. Si usabas una versión móvil para que los usuarios que accedían a tu web vieran el contenido adaptado al dispositivo, era perjudicial para tu SEO, ya que eso creaba contenido duplicado y por lo tanto Google penalizaba a tu web. Un diseño Responsive evita este problema ya que es el mismo contenido que se organiza de manera distinta según el dispositivo en el que se vea.

Se reducen los costes de desarrollo y mantenimiento de la web. Al usar la misma plantilla para todas las plataformas, se reduce la inversión en mantenimiento y desarrollo, ya que un sólo cambio repercute en todas las versiones.

Aumenta la viralidad. Un reciente estudio certifica que el 70% de los accesos a las redes sociales se hacen a través de dispositivos móviles, eso significa que si un usuario accede a nuestra web a través de un Smartphone, seguramente tenga las aplicaciones sociales abiertas y si quiere compartir algo, es mucho más rápido y natural.