Tecnología y Coaching para Emprendedores

Bootstrap 3: ¿Vale La Pena Usar un Framework?

framework bootstrap 3

Justo estoy preparando mi próximo curso que, mira por donde, va a ser sobre cómo usar y sacar el máximo partido de Bootstrap 3. Cuando ya tenemos los conocimientos necesarios de diseño web, lo siguiente que nos planteamos es si vale la pena usar un framework y, en caso afirmativo, que framework es el mejor para nuestras necesidades. La verdad es que, como todo en la vida, la respuesta es un depende, pues si bien en muchos casos nos va a facilitar enormemente la vida y va a agilizar el trabajo, no por ello va a ser la panacea que solucione todos los posibles problemas y panoramas de la realidad.

En este post veremos no sólo si vale la pena o no trabajar con un framework, sino también todas las ventajas e inconvenientes que tiene trabajar con Bootstrap 3, el famoso framework de Twitter.


Bootstrap 3: ¿Vale La Pena Usar un Framework?

Bootstrap 3 es un framework para diseño web responsive con el que podemos crear tanto sitios web estáticos como dinámicos. A fecha de hoy es el número #1 del repertorio de Github. Con Bootstrap 3 se introducen cambios significativos a Bootstrap 2, mejorándolo notablemente.

Veamos primero los pros y contras de usar un framework de front-end a nivel general y después los pros y contras de usar Boostrap 3.


Usar un Framework

usar un framework

Existen muchos frameworks para desarrollo web front end, destacando Bootstrap y Foundation. Bootstrap viene optimizado para usar el preprocesador de CSS Less, mientras que Foundation lo hace para SASS. No necesitas usar para nada un preprocesador de CSS para usar Bootstrap, pero si te decantas por usar uno, entonces la mejor opción es Bootstrap si usas LESS y Foundation si usas SASS.


Pros de usar un framework

Veamos algunas de las ventajas de usar un framework para desarrollo front end:

  • Rapidez. Como una gran parte del trabajo está ya hecho, el usar un framework te permitirá ir mucho más rápido en la creación de sitios web una vez sepas cómo funciona el framework.
  • Comodidad. Al haber sido ya desarrolladas muchas de las funcionalidades que utilizas en tu día a día, no vas a tener que pararte a pensar cómo hacer las cosas, lo que puede ser francamente cómodo.
  • Componentes. Los frameworks robustos traen muchos componentes adicionales en forma de plugins de JavaScript, lo que te permite implementar soluciones un poco más avanzadas sin necesidad de desarrollarlas tú mismo.
  • Soporte. Los frameworks conocidos tienen una amplia comunidad online detrás, por lo que te será fácil encontrar respuesta a tus dudas en caso de que estas surjan.
  • Si el presupuesto es bajo o tienes prisa, entonces usar un framework te puede facilitar enormemente la vida, ya que una buena parte del trabajo está ya hecho.


Inconvenientes de usar un framework

Como todo en la vida, no todo son ventajas, el usar un framework también puede presentar algunos inconvenientes, destacando:

  • Aprendizaje. Cada framework funciona de un modo distinto, con lo que hay que aprender a utilizarlo. De aquí que este creando mi nuevo curso de Bootstrap 3.
  • Exceso de código. Un buen framework viene pensado para cubrir las necesidades de la mayoría de desarrolladores, pero esto no significa que en cada proyecto se vayan a desarrollar todas ellas. Hay frameworks como Bootstrap que te permiten personalizar la descarga, pero si no es así, puedes estar utilizando mucho código que no necesitas.
  • Semántica. Los frameworks utilizan un sistema de grid con una serie de clases extra que permiten identificar el número de columnas a ocupar. Los nombres de estas clases no son semánticos y, por tanto, el código del framework está más pensado para funcionalidad y rapidez que para semántica.
  • Aspecto final. Al traer muchas cosas ya desarrolladas “de fábrica”, el aspecto puede ser bastante similar de un sitio a otro si no se personaliza el CSS del framework. De aquí que se piensa que los frameworks es una herramienta más bien pensada para desarrolladores que no para diseñadores.

El uso o no de un framework depende del caso. Más rápido y barato, pero con menos control y haber de aprenderlo antes.


Usar Bootstrap 3

twitter-bootstrap

Tal y como acabamos de ver en términos generales, usar un framework tiene claras ventajas así como algunos inconvenientes. Si quieres un proyecto 100% a medida, que no use un etiquetado que no sea semántico, con el que puedas usar un diseño único sin heredar ninguna funcionalidad existente, entonces mejor olvídate de los frameworks. Ahora, si lo que quieres es sacar el máximo rendimiento de tu tiempo, conseguir un sitio web altamente personalizable sin gran esfuerzo y poder implementar nuevas funcionalidades sin dejarte los sesos, entonces lo mejor es un framework.


Pros de Bootstrap 3

Veamos a continuación algunas de las ventajas propias de usar Bootstrap 3:

  • Mobile First. Todo el framework está desarrollado pensando en la filosofía mobile first, que es la recomendada para el desarrollo de sitios web responsive.
  • Descarga personalizable. No es necesario bajarse todo el framework para que funcione, ni siquiera requiere JavaScript para las funcionalidades básicas, podemos personalizar la descarga y dejar de lado lo que no necestamos.
  • Optimizado para LESS. Si trabajas con LESS, un potente preprocesador de CSS, entonces el mejor framework que tienes a tu disposición es sin duda alguna Bootstrap
  • Excelente grid responsive. El grid de Bootstrap 3 es 100% responsive y te permite pensar en el diseño en todas sus vistas, de modo que ofrezcas la mejor experiencia de usuario a todo el mundo.
  • Compatibilidad entre navegadores. Está desarrollado para funcionar con todos los navegadores web modernos, dando soporte incluso a Internet Explorer 8 y superiores.
  • Uso de font icons. Con Bootstrap 3 se dejan de usar los sprites de CSS para las imágenes y se pasa a usar los font icons, que son vectoriales, escalables y óptimos para rendimiento web.
  • Excelente documentación. La documentación online de Bootstrap es de muy alta calidad, con ejemplos muy claros y simples y código reutilizable.
  • Comunidad online. Tal y como comentaba más arriba, Bootstrap cuenta con una gran comunidad online, siendo tendencia en el repertorio de Github.

Contras de Boostrap 3

No todo pueden ser ventajas, por lo que a continuación veremos algunos de los inconvenientes inherentes a Bootstrap 3 como framework:

  • No está pensado para SASS. Si utilizas el preprocesador de CSS SASS en lugar de LESS, entonces es mejor que apuestes por Foundation, ya que Boostrap no está desarrollado con SASS en mente.
  • Muchas clases para un elemento. Si bien te permite personalizar todo hasta el último detalle en diseño web responsive, en algunos casos el número de clases que se puede sumar a un elemento puede parecer excesivo, por lo que requiere saber usar muy bien el framework para evitar un sobreuso de clases en los diferentes elementos.
  • Necesario JS y jQuery para algunas funcionalidades. Si, por ejemplo, quieres usar la barra de navegación de Bootstrap u otras funcionalidades como el slider de imágenes, vas a tener que descargar la librería JS de los componentes de Bootstrap que necesitas junto con jQuery.

Existen muchas otras ventajas e inconvenientes, pero van más ligadas al uso de frameworks en sí que del propio Bootstrap. Más arriba en este mismo post explico algunas de estas ventajas e inconvenientes.


Para acabar…

Antes de decidir si vale la pena o no usar Boostrap 3, lo primero que debemos pensar es en las ventajas e inconvenientes de usar un framework. En la blogosfera y los foros se ven muchas críticas a Bootstrap que no son inherentes a este framework, sino a todos los frameworks per se. El bueno, bonito y barato existe en Bootstrap y otros frameworks siempre que no se pidan milagros a Lourdes. Si queremos un diseño 100% a medida, entonces es mejor dejar todos los frameworks. Pero si queremos que sea rápido, que sea bueno y que sea barato, entonces la mejor opción es sí o sí usar un framework.

¿Y tú qué opinas? Estás a favor o en contra de los frameworks? Deja un comentario y si te ha gustado el artículo te agradeceré muchísimo que lo compartas en las redes sociales.

Un abrazo!


Comentarios

  • javier

    No he probado a trabajar con framework nunca pero estoy deseando ver ese curso y aprender a usarlos como es debido. Sigue trabajando como lo haces y ayudando con tus publicaciones a la gente.

    • eSandra

      Gracias Javier, seguiré esforzándome por crear el contenido de la mejor calidad posible :-))

      un abrazo!

  • Roberto

    Hola Sandra, como estás?, espero que bien.
    Estoy de acuerdo contigo en que depende con lo que tengamos que lidiar. Si el cliente quiere “El bueno, bonito y barato” o bien algo a medida.

    Los framewors para mantener la semántica del html debes trabajarlos con Less o Sass.

    Yo vengo trabajando con Less pero todavía no le pude encontrar la vuelta a los sistemas de grids para el armado de Layouts desde Bootstrap.

    Muy bueno el artículo. Muchas Gracias, por compartir, Saludos.

    • eSandra

      Hola Roberto, me alegro te haya gustado el artículo. Less y Sass facilitan mucho la vida, si vamos a pasar muchas horas con el CSS, vale la pena dominar uno de ellos. Gracias por comentar y un abrazo!

  • Israel Ortuño

    Me gusta el post, solo añadir que bootstrap si da soporte para SASS.

    https://github.com/twbs/bootstrap-sass

    • eSandra

      Gracias por tu aportación, Israel, siempre se aprende algo nuevo. Lo has usado con SASS? Qué tal funciona? ¡Gracias!

  • edsonmgoz

    Hola Sandra!! interesante artículo me parece genial que hayas indicado tanto pros como contras, el uso de un framework siempre facilita las cosas porque ya te viene con funcionalidades por así decirlo pre construidas, una de las cosas que me llamó la atención de Bootstrap es la personalización de descarga y es una gran ventaja ya que no andas cargando todo el framework en tu web, simplemente lo que necesitas. Para mi la mayor desventaja de utilizar un framework es no seguir una curva de aprendizaje correcta, a lo que me refiero, si una persona que recién esta pisando el mundo del desarrollo o diseño web se salta a usar un framework pues el uso que le hará este framework posiblemente no sea correcto y eso implica malas prácticas. Digo esto porque en mi blog hablo de frameworks backend, en concreto de frameworks PHP y pasa casi lo mismo por eso pienso yo que debemos ir a paso a paso en nuestro aprendizaje porque el sacarle el mayor provecho a un framework depende mucho de las buenas practicas que nosotros apliquemos en nuestros proyectos. Éxitos en tu próximo curso de Bootstrap 3 :-) . Un abrazo grande Sandra y bueno disculpa si me extendí en mi comentario jeje. A propósito ya te dí mi voto en el premio Bitácoras 8-)

    • eSandra

      Al contrario, Edson, gracias por tomarte tu tiempo en comentar y compartir tu granito de arena. El framework es una herramienta y, como toda herramienta, es neutra y se puede usar para bien o para mal. Es como un cuchillo, se puede usar con finalidades correctas y para “malas prácticas”, jeje.. un abrazo!

  • Juan Carlos Alonso Gamboa

    Hola Sandra. Como siempre, has acertado de lleno al escoger el tema del post, y con un enfoque global y completísimo. Quedamos a la espera del curso, que viendo tu trayectoria y detalles en los demás que te conozco, estará genial.
    Por cierto, ya tienes otro merecido voto en los premios bitácoras ;)

    • eSandra

      Muchas gracias, Juan Carlos :-)

  • Jose Antonio

    Interesantísimo el artículo Sandra, ya tienes un usuario en el momento que saques el curso. Respecto a Bootstrap 3, yo lo he tocado y me parece interesante, sobre todo a la hora de la descargar del framework, ya que puedes descargas lo que realmente te interesa de el. Puedes tener tu codigo semántico y aprovechar las distintas clases que te ofrece bootstrap, como dices no hay nesecidad de cargar todo el framework.
    Bueno saludos y a la espera de la publicación del curso.

    • eSandra

      Estupendo, Jose Antonio, estoy a ver si me recupero de una gripe y recupero mi voz para grabarlo, que ya está el material preparado :-)

      un abrazo!

  • JoseSera

    Hola Sandra, estupendo el artículo y ya te digo que aquí tienes a un usuario que va a seguir este curso. Referente a Bootstrap 3 lo he tocado y tengo que decir que me guata, sobre todo por que a la hora de descargarlo, como bien dices, puedes personalizar el framework y bajar lo que realmente vas a utilizar. De esta forma si puedes tener tu código semántico y utilizar las clases de bootstrap 3. Bueno, darte las gracias por compartir tus conocimientos y a la espera de este nuevo curso.
    Saludos.

    • eSandra

      Genial, te animo a suscribirte a la newsletter para ser el primero en saber cuándo lanzo el curso. Un abrazo!

  • Xavier Verri

    Hola, falta aclarar que si hay una versión sass de Bootstrap 3. En mi caso utilice tanto Foundation como Bootstrap ambos en Sass y me quede con Bootstrap, tiene mejor soporte de compatibilidad cross-plataform y en arquitectura de código me pareció mas prolijo Bootstrap. Si bien me gusta mas la dinámica de trabajo de Foundation es mas complicado de minimizar y manipular para agregarle componentes nuevos por la forma en la que este compila.

    • eSandra

      Muchas gracias por tu aportación, Xavier!

  • js

    Si quieres ser productivo sin duda debes usar boostrap o foundation … Es decir aun el mejor diseñador del mundo va a acabar creandose un mini framework propio, un area de trabajo para organizar su codigo, unas funcionalidades para aprovechar tambien el codigo.. No veo razon para no utilizar un framework ya que aprovechas el conocimiento de años de diseño y buenas prácticas y ademas le puedes añadir todas las clases que quieras y no es obligatorio usar el grid para aprovechar muchas de sus funcionalidades. Busca el framework que mas te guste aprende sass o less y tendras una productividad enorme para diseñar la web que quieras.

    • eSandra

      Si se quiere un diseño 100% a medida entonces no se puede usar un Bootstrap, esto se da en sitios de grandes corporaciones o con necesidades muy específicas. Por lo demás, como bien comentas, con un framework se va mucho más rápido :-)

  • edwin garcia

    Soy desarrollador y se me dio por probar bootstrap hace poco, y deja deirte que como le alivio la vida, un 100 % . Muy buen artitulo especial para desarrolladores que permitan encontrar herramientas como estas.

    • eSandra

      Efectivamente, Edwin, un framework facilita muchísimo la vida ;-)

  • wootsbot

    es algo efecas usarlos y facilitan muchas cosas y muy adaptable en ciertas cosas, pero efectivamente lo del diseño si no asemos cambios en elmismo, tendremos diseños paraecidos pero en pocos coponentes.

    saludos

  • Alvaro

    Muy buen artículo Sandra. Felicidades y Gracias. Mi opinión, o mejor dicho, mi actitud es solucionar problemas a clientes y amigos no reinventar la rueda o la pólvora, esas las uso. Siempre agrego mis propias clases pero no dejo de usar Boobstrap para algo que ya está hecho, es gratis y comprobado por una inmensa comunidad. Un abrazo!

    • Sandra

      Hola Alvaro, sí, Bootstrap es una solución rápida y eficiente y vale mucho la pena tenerlo en cuenta :-)

  • luis guzman

    Hola ,cuando comenzazara el curso de framework Bootstrap,lo espero por hora.
    Gracias por tu contenido.

    • Sandra

      Hola Luis,

      estoy terminando de grabarlo, espero poder lanzarlo este mes de noviembre.

      Un abrazo!

  • Diego Reyes (diferrev)

    Hola Sandra, es cierto que como todo tiene sus ventajas y desventajas pero algo si es seguro, que un framework, en mi caso Bootstrap, nos facilita mucho la utilización de su sistema de grillas y más aún si el sitio debe ser responsive. En mi poca experiencia lo recomiendo por sus Grid System y fuente de iconos lo demás se deja a nuestra creatividad.

    Saludos y gracias por el post.

    • Sandra

      Hola Diego, sí, Bootstrap te facilita mucho la vida y vale la pena tenerlo en cuenta. Gracias por comentar!

  • Anonimo123

    Buenos días!

    Yo estoy aprendiendo a utilizar Bootstrap3 , decirte que el tema de la personalizar del sitio depende de la imaginación del diseñador/programador en mi opinión ya que al final acaba siendo css y javascript.
    Yo soy más progamador que diseñador y he encontrado una utilidad enorme en este Framework ya que te da unas clases prediseñadas y tú si quieres puedes añadir tus propias clases de manera sencilla.
    También he probado Foundation pero no me convence del todo.
    Saludos!
    Saludos!

    • eSandra

      Hola! Pues sí, Bootstrap es ideal para programadores que no saben de diseño, así como para diseñadores que van justos de presupuesto. Un abrazo!

  • Eddy

    si estoy iniciando apenas a conocer html5 y css3 y todo este mundo del desarrollo web que seria bueno pasar por alto estos frameworks y aprender al natural? o de una vez mejor empiezo a familiarizarme con bootstrap 3 u otros similares, un saludo gracias por el post

  • Daniel Tortosa

    Ante todo Sandra agradecerte, creo que hablo en nombre de la comunidad de desarrolladores web, el esfuerzo que dedicas y el trabajo que desarrollas. Me permito el lujo de comentar en tu blog, con el cual me he topado buscando información sobre frameworks responsive. Deseo hacer uso de este tipo de herramientas, porque pienso que es la vanguardia del desarrollo web. Lamentablemente hoy día no domino el inglés y por todos es sabido que es imprescindible para estar al tanto de lo último, pero me alivia la existencia de blogs como el tuyo, que posibilitan una introducción a esos temas, más amigable y comprensible. Me pelearé con los contenidos en inglés, no obstante quería dejar muestra aquí de mi agradecimiento. Te deseo mucho éxito con tus cursos e intentaré seguir trabajando para crear y crecer en todos los aspectos. Muchas gracias Sandra, un abrazo. Daniel.

    • eSandra

      Hola Daniel,

      pues yo te agradezco mucho tus palabras, porque no siempre es fácil mantener un blog como este desde la soledad de una pantalla, jeje.. me hace feliz ver que lo que hago tiene un impacto positivo y comentarios como el tuyo son los que me animan siempre a seguir aportando valor y hacer crecer este sitio :-)

      un abrazo!

  • Gary Parra

    Muy buen articulo, voy ha empezar ha probarlo.
    gracias.

  • David

    Me ha gustado mucho el artículo! :) gracias!

  • claudio

    Hola sandra, gracias por tus aportes pero me gustaría hacerte una consulta. Este frame no hace mas lento la apertura del sitio?;
    Ya que hace más peticiones de archivos, desfavoreciendo al seo.

  • Carlos

    Muy bien Sandra, siempre muy claros tus artículos. Pero, también podemos trabajar Bootstrap como base para crear un theme wordpress?

    Gracias.

    • Sandra

      Hola Carlos, sí, por supuesto, yo uso Bootstrap de base en el tema que desarrollé en WordPress para mi web personal:

      http://www.sandrasanmarti.com/

      un abrazo!
      Sandra

  • Lizzmar

    Sobre LESS y SASS que va de la mano con bootstrap o fondation.

    Tengo una duda que pasa con Stylus?….
    Gracias, super articulo lo comparto.

    • Sandra

      Hola Lizzmar,

      Bootstrap 3 da soporte a LESS y SASS, pero no a Stylus. Y creo que Foundation sólo funciona con SASS. Stylus no tiene todavía el impacto de LESS y SASS y estos dos frameworks no lo incluyen. He visto que hay este framework para Stylus, pero no lo conozco, te lo paso por si te interesa echarle un vistazo:

      http://kouto-swiss.io/

      Un abrazo!
      Sandra