Qué es Bootstrap y cuando conviene usarlo

Bootstrap agiliza la creación de sitios web responsivos.

El software libre y de código abierto nos ofrece múltiples alternativas para muchas cosas. Esto hace difícil saber cuál es la mejor para utilizar. Comencemos diciendo que si no precisas un sitio web no necesitas saber qué es Bootstrap y cuando conviene usarlo.

En los viejos tiempos, para hacer un sitio web podías arreglártela perfectamente con un block de notas o incluso con un procesador de textos, pero a medida que las páginas fueron ganando en interactividad y el contenido tuvo que ser actualizado más frecuentemente, se hizo necesario la utilización de nuevas herramientas para crearlos.

Qué es Bootstrap y cuando conviene usarlo

Por un lado, aparecieron los editores visuales como Macromedia (Posteriormente Adobe) Dreamweaver que te permitían tanto la escritura de código como la edición visual del contenido. En Linux tuvimos herramientas como Kompozer o NVU que, aunque no tuvieron las mismas prestaciones, facilitaban bastante la tarea.

Si se te daba bien la escritura de código, no faltaban herramientas. Anjuta o Eclipse eran entornos de desarrollo ideales para programadores expertos.

Con el tiempo aparecieron los gestores de contenidos como WordPress, Drupal o JoomlaEste tipo de software permitía desentenderse de la escritura de código para enfocarse en la creación de contenidos. Resultaron ser la alternativa ideal para sitios como Linux Adictos en los que varios autores estamos actualizando el contenido constantemente.

Déjenme explicar un poco esto.

Desde el punto de vista de la codificación una página web incluye:

  • Tipo de documento: Le indica al navegador que versión de HTML se está usando.
  • Contenedor HTML: Le indica al navegador el inicio y fin del documento HTML y puede incluir información adicional como el idioma.
  • Contenedor Head: Incluye información útil para el navegador y los buscadores como el título de la página, el autor, una breve descripción del contenido y una lista de términos relevantes. Además, le dice al navegador donde encontrar instrucciones sobre como representar el contenido en la pantalla.
  • Contenedor Body: Acá va todo el contenido que el usuario verá en el navegador.
  • Instrucción script: Indica al navegador donde encontrar instrucciones en determinados lenguajes de programación como Javascript o PHP que permiten agregar interactividad o enviar formularios por correo.

Las diferentes partes de un documento dentro del contenedor Body son:

  • Header: Es donde se muestra el título del sitio web. Puede contener el logo, enlaces, barra de navegación u otra información destacada.
  • Nav: Este contenedor se usa para crear un menú de navegación que de acceso a las partes principales del sitio.
  • Article: El nombre es bastante descriptivo de la función. Sirve para diferenciar diferentes temas dentro de una página web. Por ejemplo, este post del que le sigue en la página principal de Linux Adictos.
  • Section: Separa las diferentes partes de un artículo.
  • Aside: Agrupa el contenido que se muestra al costado de la página.
  • Footer: Muestra la información a pie de página. Suele utilizarse para mostrar información como direcciones, enlaces a otros sitios y repetir el menú.

Existen contenedores para marcar diferentes partes del texto como h (1 a 6) o p que indican títulos y párrafos respectivamente.

Si no existieran los gestores de contenidos, cada vez que los autores de Linux Adictos quisiéramos publicar un artículo, deberíamos reescribir todo el código de la página desde cero.  Además, deberíamos actualizar a mano el orden de la página principal y el listado de artículos por categoría.

Y, si a los administradores se les ocurriera hacer un rediseño o surgiera un nuevo tamaño de pantalla, sería necesario actualizar las hojas de estilo.

El problema de los gestores de contenidos

Aunque los gestores de contenidos son ideales en las condiciones que mencionamos, son un derroche de recursos en el caso de sitios que no son actualizados frecuentemente como webs corporativas o informativas con pocos cambios.  Por otra parte, incluyen el uso de base de datos y su popularidad hace que sean objeto de ataques frecuentes lo que requiere estar pendientes de actualización.

En el caso particular de WordPress, en mi opinión se está convirtiendo en bloatware. Cada vez más los temas exigen la instalación de complementos que en muchos casos cumplen la misma función de los que ya tenías instalados. Y, la mayoría de las mejores prestaciones están bajo la modalidad de pago. Y, no son precisamente baratos.

Es aquí donde frameworks de código abierto como Bootstrap resultan útiles.  Piensa en Bootstrap como una caja de ladrillos lego que en lugar de construir cosas sirven para construir sitios web que se adaptan fácilmente a todos los tamaños de pantalla. No necesitas reinventar la rueda ya que trae casi todo lo que puedes necesitar como botones, iconos y temas. Pero, al mismo tiempo tienes la flexibilidad para que tus diseños no se parezcan a los demás.

En el próximo artículo veremos cómo utilizarlo.


3 comentarios, deja el tuyo

Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

  1. Responsable de los datos: AB Internet Networks 2008 SL
  2. Finalidad de los datos: Controlar el SPAM, gestión de comentarios.
  3. Legitimación: Tu consentimiento
  4. Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
  6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

  1.   Richard Watterson dijo

    Un articulo interesante, aunque creo que el titulo adecuado seria que son los gestores de contenido y los problemas actuales, aqui no explicaron nada sobre bootstrap.
    Ademas…
    Bootstrap es una libreria/framework/biblioteca que nos permite diseñar sitios responsivos muy bonitos, puedes crearte una web sin conocer mucho de CSS, puedes crearte un tema para WordPress, pero deberas meterle bastante tiempo para optimizarlo al maximo.
    Los CMS como WordPress estan pensados en mejorar el mantenimiento de un sitio web, por eso son tan flexibles, puedes hacer blogs, sitios web empresariales, tiendas, foros, etc etc… y todo sin tocar una sola linea de código.
    Los temas en el caso de WordPress, existen muchos bastante simples, adecuados para un blog personal, algo que no requiera de mayor atractivo visual. Para el caso de los temas «atractivos», estos suelen incluir plugins, los cuales dotan de mayor funcionalidad los temas, puede agregar loaders, mega menus, aninmaciones, y mas cosas, muy pocas veces los plugins incluyen CSS.
    Es por eso que…
    1.- Evita usar todo el paquete de bootstrap, carga unicamente lo que necesites.
    2.- Para WordPress invierte en un buen hosting, esto mejorara tus tiempos de carga, puedes optar por usar un CDN para mejorar la carga de tus temas.
    3.- Si usas un CMS basado en PHP, no esperes grandes velocidades, es cierto que se pueden optimizar, pero debe hacer alguien con conocimientos.
    4.- El desarrollo y mantemiento de un tema para WordPress no es necesariamente barato, ni facil. Hay muchas vulnerabilidades siendo descubiertas a diario y resolverlas sin el conocimiento apropiado puede ser complicado, invertir en un template de un editor con experiencia puede ser lo mas indicado, claro, es cuestion de economia, pero lo vale.

    1.    Diego Germán González dijo

      Es el primer artículo de la serie.
      Gracias por tus aportes

    2.    Jorge dijo

      Agradable artículo. Esperaré la continuación.