Una guía para principiantes para construir un sitio web receptivo con Bootstrap - Parte 1

Última actualización el 5 de junio de 2019

Este artículo está destinado a educar a los desarrolladores web sobre el uso de los principios básicos de Bootstrap Framework para crear sitios web receptivos de manera rápida y efectiva. Esto reduce el costo de producción y permite a las empresas empoderar a sus desarrolladores para administrar y crear sitios web y páginas con facilidad. Voy a pasar por el proceso de descarga del marco Bootstrap y las ventajas de usar este marco para sus esfuerzos de desarrollo web.

¿Qué es Bootstrap?

Según el sitio web oficial de Bootstrap (getbootstrap.com), "Bootstrap es el marco HTML, CSS y JavaScript más popular para el desarrollo de primeros proyectos móviles y receptivos en la web". En términos más simples, Bootstrap es un marco excepcionalmente simple para ayudar a que el desarrollo web front-end sea más rápido y atractivo para los desarrolladores de diferentes niveles de habilidad.

¿Por qué usar Bootstrap?

El potencial para diseñar sitios web para diversos medios, incluidas pantallas grandes, pantallas regulares, teléfonos y tabletas, hace que Bootstrap sea increíblemente atractivo y una opción inteligente para producir contenido web. Un marco como Bootstrap proporciona una funcionalidad genérica que se puede cambiar fácilmente para optimizar el sitio web para una variedad de funciones y capacidad de respuesta que no requiere codificación. En resumen, es una de las formas más sencillas de crear un sitio web y aún así tener la capacidad de personalizarlo, a diferencia de un sitio de WordPress.

Cómo empezar

Para comenzar con Bootstrap, debe visitar el sitio web oficial de Bootstrap (http://getbootstrap.com/). Bootstrap es un proyecto de código abierto y está alojado, desarrollado y mantenido en GitHub; esto permite a los usuarios tener acceso al código fuente y comprender el alcance completo del marco como una herramienta para crear sitios web.

Hay tres formas de descargar la versión actual de Bootstrap (v3.3.6): puede descargar una versión compilada de Bootstrap, puede descargar el código fuente de Bootstrap y puede transferir el marco Bootstrap de Less a Sass. En este caso, si es un principiante, le sugiero que descargue la versión compilada de Bootstrap. Si desea integrar el marco Bootstrap en Rails, Compass o proyectos solo de Sass, es cuando debe transferir la descarga de Less a Sass.

Una vez que descargue el archivo Boostrap, debe descomprimir la carpeta comprimida para ver la estructura del marco Bootstrap compilado. Mire a continuación para ver la estructura del archivo:

Ahora puede simplemente colocar estos archivos en el sistema de archivos de cualquier proyecto web en el que esté trabajando y comenzar a trabajar con Bootstrap para diseñar y construir su proyecto deseado. Para obtener más información sobre la funcionalidad de Bootstrap, que veremos más en la Parte 2 de esta publicación, no dude en visitar el sitio web getboostrap.com para ver los componentes, las características de CSS y las funciones de JavaScript a las que se puede acceder con el marco.

Diseño de respuesta

El diseño receptivo es una de las características distintivas del marco Bootstrap; la capacidad de desarrollar de manera receptiva con Bootstrap permite a los desarrolladores desarrollar un sitio web único que se puede formatear correctamente en todas las plataformas de visualización. Muchas veces, un sitio web se puede diseñar bien y la experiencia del usuario es óptima en una sola plataforma o tamaño de pantalla específicos. Bootstrap hace un trabajo increíble para combatir estos problemas al permitir que los desarrolladores asignen ciertas columnas de la página web para que tengan ciertos tamaños cuando se leen en una pantalla más pequeña. Hay cuatro tipos de dispositivos que Bootstrap tiene en cuenta al crear sitios web receptivos:

• Dispositivos extrapequeños (teléfonos inteligentes <768 px)
• Dispositivos pequeños (tabletas >= 768 px)
• Dispositivos medianos (Escritorios >= 992px)
• Dispositivos grandes (Escritorios >= 1200px)

El desarrollador puede agregar etiquetas a estas clases anteriores para establecer que cierto contenido web se reduzca, expanda, oculte o sea visible en ciertas plataformas. Esto es extremadamente útil para simplificar el proceso de creación de la apariencia del sitio web.

Sistema de red

Bootstrap tiene un sistema de cuadrícula que es la característica principal que permite que el marco se use para diseñar sitios web receptivos. Todas las filas en Bootstrap deben colocarse en una clase de contenedor, y luego las filas subsiguientes se pueden definir con ciertos tamaños.

Aquí hay un ejemplo de una notación para el sistema de cuadrícula:

• La clase de fila predefinida produce una fila
• Dentro de esa fila, la segunda clase especifica "col-md-6"
• Esto significa que la clase está produciendo una columna que abarca 6 columnas en la página web.
• El “md” especifica que esto solo ocurrirá en dispositivos medianos o escritorios que sean menores o iguales a 768 px.
• La clase "compensación" significa que esas columnas se dejarán en blanco. En este caso, el desplazamiento es 3, por lo que se dejarán tres columnas con espacio en blanco para rellenar parte del contenido.
  Este sistema de cuadrícula permite a los desarrolladores definir rápidamente secciones de contenido y tener el espacio adecuado entre el contenido para tener un diseño limpio y receptivo.

Desafíos con Bootstrap

Los tamaños de los archivos JavaScript y CSS son grandes cuando se descargan directamente todos los archivos de Bootstrap. Esto puede generar algunos desafíos al crear una página rápida. Esto se debe a que todos los archivos dentro de los archivos de Bootstrap no se usan por completo y esto puede significar que la descarga de datos innecesarios puede ser un problema. Esto puede afectar la experiencia del usuario, así que siéntase libre de verificar esto más a fondo visitando la publicación Cómo usar los conceptos básicos de Bootstrap para mejorar la experiencia del usuario (https://moz.com/ugc/how-to-use-bootstrap- conceptos básicos para mejorar la experiencia del usuario).

Espero que todos prueben Bootstrap, ya que es un marco fantástico para crear diseños de sitios web receptivos y limpios. Estén atentos a la próxima publicación de la serie que aborda más conceptos básicos sobre Bootstrap.

Autora: Esme Vázquez, Desarrolladora Web Junior

Creador, artista, jugador, codificador, desarrollador web y bloguero; Esme es la creadora de la reciente publicación de blog Indiellect en el sitio de blogs de administración de contenido, Medium. Su experiencia actual radica en el desarrollo web y el desarrollo de juegos; actualmente trabaja y se está capacitando en SEO en That! Company en Leesburg, FL como su desarrollador web junior. Aspira a hacer videojuegos en el futuro que retraten la belleza de la humanidad. Si tiene alguna pregunta, no dude en enviarle un tweet a @EsmeVazquez18 y/o agregarla en LinkedIn.