BOOTSTRAP

 

TEMA: Bootstrap

QUE ES BOOTSTRAP?

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 febrero del 2012, se convirtió en el proyecto de desarrollo más popular de GitHub.

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. Cuya particularidad es la de adaptar la interfaz del sitio web al tamaño del dispositivo en que se visualice

El primer desarrollo en condiciones reales ocurrió durante la primera «Semana de Hackeo (Hackweek) de Twitter».​ 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. En agosto del 2011, Twitter liberó Bootstrap como código abierto. 

CARACTERISTICAS DE BOOTSTRAP

Bootstrap tiene un soporte relativamente incompleto para HTML5 y CSS3, pero es compatible con la mayoría de los navegadores web. La información básica de compatibilidad de sitios web o aplicaciones está disponible para todos los dispositivos y navegadores. Existe un concepto de compatibilidad parcial que hace disponible la información básica de un sitio web para todos los dispositivos 

Ofrece un diseño sólido usando LESS y estándares como CSS3/HTML5. Es un framework ligero que se integra de forma limpia en nuestro proyecto actual. Funciona con todos los navegadores, incluido Internet Explorer usando HTML Shim para que reconozca los tags HTML5.Esto extiende la funcionalidad de la herramienta, pero no es requerida para su uso.El framework Bootstrap combina los lenguajes de programación CSS .

Por eso, ofrece muchas más funcionalidades que, simplemente, cambiar la forma y el color de botones y enlaces.  Esto significa que el diseño gráfico de la página se ajusta dinámicamente. 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 y Diseño responsive

FUNCION Y ESCRITURA DE BOOTSTRAP

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.

Bootstrap viene con una disposición de cuadrilla estándar de 940 píxeles de ancho. Alternativamente, el desarrollador puede usar un diseño de ancho-variable. Para ambos casos, la herramienta tiene cuatro variaciones para hacer uso de distintas resoluciones y tipos de dispositivos: teléfonos móviles, formato vertical y horizontal, tabletas y computadoras con baja y alta resolución (pantalla ancha).

HISTORIA DE BOOTSTRAP

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 de agosto de 2011.

El 31 de enero de 2012, se lanzó Bootstrap 2, que agregó soporte integrado para glyphicons, varios componentes nuevos, así como cambios en muchos de los componentes existentes. Esta versión admite el diseño web receptivo, lo que significa que el diseño de las páginas web se ajusta dinámicamente, teniendo en cuenta las características del dispositivo utilizado .Mark Otto anunció Bootstrap 4 el 29 de octubre de 2014.​ 

La primera versión beta se lanzó el 10 de agosto de 2017. Mark suspendió el trabajo en Bootstrap 3 el 6 de septiembre de 2016 para liberar tiempo para trabajar en Bootstrap 4. Bootstrap 4 se finalizó el 18 de enero de 2018.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.

PARA QUE SE UTILIZA BOOSTRAP?

El objetivo principal de Bootstrap es crear sitios web responsivos y orientados a los dispositivos móviles. El framework garantiza que todos los elementos de la interfaz de un sitio web funcionen de forma óptima en todos los tamaños de pantalla. Bootstrap está disponible en dos variantes: precompilada y basada en código fuente. Además, ofrece un amplio abanico de herramientas y funciones.

Está diseñado para facilitar el proceso de desarrollo de los sitios web responsivos y orientados a los dispositivos móviles, proporcionando una colección de sintaxis para diseños de plantillas. En otras palabras, Bootstrap ayuda a los desarrolladores a construir sitios web más rápidamente, ya que no tienen que preocuparse por los comandos y funciones básicos.

Consta de scripts basados en HTML, CSS y JS para diversas funciones y componentes relacionados con el diseño web. Los desarrolladores experimentados prefieren esta última. Para poder trabajar con Bootstrap tan solo debes añadir en la cabecera, dentro de la etiqueta <head> o antes de la etiqueta de cierre </body> de tu archivo HTML las hojas de estilo y el archivo JavaScript de Bootstrap.

USO  DE BOOSTRAP

Para usar Bootstrap en una página HTML, el desarrollador solo debe descargar la hoja de estilo Bootstrap CSS y enlazarla en el archivo HTML. Otra opción sería compilar el archivo CSS desde la hoja de estilo LESS o SASS descargada. Esto puede realizarse con un compilador especial. Si el desarrollador también quiere usar los componentes de JavaScript. Fue desarrollado inicialmente por Twitter en 2011 y permite crear interfaces de usuario.

 

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. El beneficio de usar responsive design en un sitio web, es principalmente que el sitio web se adapta automáticamente al dispositivo desde donde se acceda. Lo que se usa con más frecuencia, y que a mi opinión personal me gusta más.

Además, ofrece un amplio abanico de herramientas y funciones, de manera que los usuarios pueden crear prácticamente cualquier tipo de sitio web haciendo uso de los mismos. Entender el funcionamiento de Bootstrap es relativamente sencillo. En líneas generales, se basa en una estructura dividida en un total de 12 columnas que los desarrolladores pueden gestionar en función de sus necesidades y preferencias.

SEGURIDAD  DE BOOSTRAP

Con Bootstrap, en teoría, deberías ser capaz de construir todo tu sitio web con los diferentes componentes que ofrece.Sin embargo, es bastante raro que un desarrollador use todos los componentes disponibles de este frame.Lo que significa que habrá muchas líneas de código innecesarias en los archivos CSS y Javascript de Bootstrap. Si trabajas para clientes, casi siempre hay que crear un diseño antes de que los desarrolladores se pongan a trabajar .

Este es otro problema con Bootstrap.Aparte de una serie de aspectos que se pueden personalizar, Bootstrap tiene un estilo predeterminado .Para cambiar los estilos predeterminados, tendrás que copiar los nombres de clase de Bootstrap en tu propio CSS y luego sobrescribir los estilos de Bootstrap predeterminados (o ajustar el diseño para que funcione con Bootstrap). 

Una labor que no gustará mucho a los diseñadores. Esta fue la razón principal para que dejase de usar Bootstrap. Bootstrap permite crear sitios web con CSS y Javascript perfectamente adaptables a las pantallas de todo tipo de dispositivos.

Gracias a su sistema grid -o sistema de cuadrículas-, se puede crear una página web insertando el contenido en columnas.

HERRAMIENTAS DE DESARROLLO 

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. Esta herramienta bootstrap también la utilizan algunas de las empresas .

Bootstrap proporciona un conjunto de hojas de estilo que proveen definiciones básicas de estilo para todos los elementos de HTML. Esto otorga una uniformidad al navegador y al sistema de anchura, da una apariencia moderna para el formateo de los elementos de texto, tablas y formularios. Incluye plantillas de diseño basadas en HTML y CSS para la realización de formularios.

Es decir, gracias a Bootstrap, los desarrolladores web pueden crear páginas web visibles en diferentes formatos y pantallas. Se trata de un marco popular que se ocupa solo de las aplicaciones front-end (formularios, componentes de la interfaz y complementos de JavaScript).Utiliza un modelo de rejilla basado en dos tipos de contenedores y una rejilla de 12 columnas que resulta muy flexible.

PARA QUE SIRVE BOOTSTRAP?

De acuerdo al reconocido programador web y diseñador Raúl Moreira, esta herramienta “cubre la gran mayoría de necesidades que plantea un sitio web adaptable a dispositivos y tamaños de pantalla: rejilla, tipografía, formularios, sliders, elementos CSS, componentes y plugins de JavaScript”.Por otro lado, Bootstrap permite instalar un gestor de paquetes.

Antes de nada, cabe destacar la facilidad de uso de Bootstrap. De hecho, esta es una de las claves por su alta demanda entre desarrolladores y diseñadores web: su sencilla estructura de archivos. Para su acceso y modificación, solo es necesario unas nociones básicas de CSS, HTML y JavaScript.Bootstrap es una herramienta muy intuitiva. La comunidad de Bootstrap es muy amplia: desde sus más de 500 colaboradores; hasta todo tipo de tutoriales.

Esta comunidad web es ideal para pedir soporte. Una miscelánea de desarrolladores web –tanto seniors como juniors-, que te facilitarán mucha ayuda. La comunidad de Bootstrap es muy amplia: desde sus más de 500 colaboradores.Bootstrap aporta distintos elementos con estilos predefinidos, como botones, formularios o menús. Estos resultan fáciles de personalizar. 

RAZONES POR LA QUE APRENDE BOOTSTRAP

Al ser una herramienta sencilla de utilizar, el desarrollo web se agiliza. En efecto, utilizando Bootstrap el proceso es mucho más rápido. Los bloques de código ya están preparados, por lo que los tiempos se reducen de una forma considerable; evitando así dicha escritura de código. Por otro lado, Bootstrap tiene a disposición multitud de herramientas para extender el framework.

Asimismo, permite personalizar un sitio web a medida, eligiendo diferentes componentes, estilos o utilidades, entre otros. De hecho, otra de las 7 razones para usar Bootstrap para crear tu web es la gran cantidad de plugins que dispone. Uno de sus grandes éxitos, sin duda alguna. Además, este número de plugins solo hace que crecer. Bootstrap utiliza LESS, una ampliación a las hojas de estilo CSS, que funciona igual que un lenguaje de programación. 

Así, nos permite el uso de funciones, operaciones aritméticas o variables para enriquecer los estilos de nuestra página web. Hablamos, en definitiva, de un framework de CSS que nos facilitará la vida a la hora de crear una página web.Bootstrap es un entorno de trabajo desarrollado dentro de Twitter, aunque posteriormente se liberó y pasó a ser un framework de código abierto.