Si eres desarrollador web, debes utilizar Bootstrap y punto.

Éste artículo lo escribí hace 3 años, mis opiniones sobre Bootstrap han cambiado desde entonces. Aún lo sigo recomendado, pero si quieres conocer otros proyectos interesantes te recomiendo que leas sobre Materialize, Foundation o Pure.css

Bootstrap es un framework de css, en otras palabras es un conjunto de archivos CSS que incluyes en tu página y puedes empezar a maquetar el sitio web en minutos, sin tocar una sola linea de CSS. Lo puedes bajar haciendo click aqui.

En mi opinión, la gran mayoría de programadores deberían simple y sencillamente usar Bootstrap. Por ejemplo, yo maqueté ésta interfaz de usuario en 20 minutos, sin ser un diseñador profesional:

Screen Shot 2013-09-17 at 2.11.26 PM

A continuación, te explico porque opino que todos los programadores deberían utilizar Bootstrap:

1. Fácil e intuitivo

Sinceramente, cuando estoy maquetando una interfaz de usuario, no me gusta perder el tiempo con estilos ni modificando el CSS para agregar un 'clearfix' o modificando mi CSS para hacer una vista con 3,4 o 5 columnas.

Si estoy con mi cliente y mi cliente me pida que haga un cambio estructural a la página, puedo hacer ese cambio FRENTE A SUS OJOS y lo más importante... hacer que saque su chequera para que me pague "en caliente".

2. No mas hacks.

Todos los que hemos trabajado en desarrollo web profesionalmente, sabemos lo fastidioso que es hacer que nuestro diseño se vea idéntico en todos los navegadores. Por alguna razón aún desconocida para mi, cada navegador implementa HTML, CSS y Javascript como se le pega la gana.

Es como si voy a China y me dicen que allá, nada mas por sus calzones, 2 + 2 = 10.

Por alguna razón el sentido común no es tan común en el mundo de la programación y Bootstrap elimina esas frustraciones. Lo que diseñes con Bootstrap se ve bien en todos los navegadores (incluyendo IE7) y en todos los dispositivos móviles, lo cual me lleva al siguiente punto.

3. Optimizado para dispositivos móviles

La mayoría de tus clientes no tienen ni la menor idea de que es diseño responsivo, pero quieren que sus sitios sean responsivos. Bootstrap te hace la vida mas sencilla al proveerte todas las reglas CSS que necesitas para hacer que tu sitio se adapte dinámicamente a la gran mayoría de pantallas y resoluciones existentes en el mercado.

Así que si tu cliente te pide un sitio responsivo, ya tienes una excusa para cobrarle extra y usando Bootstrap solo te toma 5 minutos convertir un sitio para que sea responsivo.

4. Es mantenido y actualizado por Twitter

Bootstrap fue desarrollado por empleados de Twitter, en las instalaciones de Twitter para uso interno.

Después de una fase intensa de pruebas decidieron compartirlo con el mundo, y fue lo mejor que pudieron hacer los loquillos de Twitter.

No es que Bootstrap sea perfecto porque no lo es, pero gran parte del trabajo pesado está ya hecho.

5. Es extensible

Este es un gran mito "Bootstrap te limita con los diseños que puedes hacer", eso es una gran mentira!

Es más que obvio que bootstrap no te limita en absolutamente nada, hasta el mismo nombre lo infiere... BOOTSTRAP que por definición el término bootstrap significa que es un programa que te permite inicializar uno más grande.

Por lo tanto bootstrap no busca ser la panacea universal, al contrario bootstrap te da las herramientas necesarias para que extiendas y adaptes el framework a tus necesidades. Sin embargo, como ya lo he dicho en otros posts: El que es mal programador, hace malos programas hasta con el mejor lenguaje de programación (que no existe).

Ahora lo malo de Bootstrap...

1. No es para principiantes.

Si apenas estás aprendiendo CSS, NO UTILICES BOOTSTRAP.

¿Por qué?

Por la misma razón que en la primaria no te dejan usar calculadora para sumar.

Toda persona que apenas está aprendiendo a maquetar páginas web, tiene que aprender CSS. Si usas bootstrap sin aprender CSS, no solamente te vas a sentir agobiado por todas las cosas que se te vienen encima al mismo tiempo, sino que es muy probable que adoptes malas prácticas de CSS ya que Boostrap no es perfecto.

2. Tiene una huella digital increíblemente grande (para lo qué es)

Si utilizas Bootstrap tal y como lo ofrecen en la página, la huella digital es bastante grande para mi gusto. Estamos hablando de cerca de 250KB en archivos CSS y JS.

En lo personal, a mí me gustan que las páginas que sean tan livianas como sea posible. Eso no es tan problemático si tu audiencia vive en un país desarrollado donde el ancho de banda, y las conexiones de alta velocidad son muy comunes.

Sin embargo, si estás leyendo éste artículo es porque vives en Latinoamérica, y tu y yo sabemos que el ancho de banda generalmente es un problema, y el internet es lento.

3. Tiene demasiadas convenciones y nodos anidados.

Idealmente, no hay necesidad de crear anidar 3 divs para mostrar una alerta. Sin embargo, cuando trabajas con Bootstrap, te vas a dar cuenta que para crear alertas, media objects, formularios y muchas otras cosas más, tienes que apegarte a las convenciones del framework, y terminas con un DOM más complejo, y menos semántico, sin razón alguna.

4. La gran mayoría de sitios Bootstrap, no funcionan con Javascript desactivado.

Muchos programadores generalmente no piensan en los usuarios que tienen Javascript desactivado. Si bien, hoy en día es cada vez más raro, idealmente tu sitio debería funcionar sin ningún problema si el Javascript se encuentra desactivado.

La gran mayoría de sitios construidos con Bootstrap, no lucen bien, ni son muy accesibles si Javascript está desactivado.

Entonces, por qué lo recomiendas?

Lo recomiendo por una razón muy específica. Yo no me dedico al frontend. No soy un experto en frontend, mi especialidad es el backend.

A mi bootstrap me ayuda a no tener que pensar en saber si debo utilizar un flexbox, o un display: block, o cual hack tengo que utilizar para que mi texto se centre verticalmente en IE8.

Si tu eres como yo, que no tienes tiempo ni energía de estar depurando CSS, entonces simple y sencillamente utiliza Bootstrap.

Si a ti te apasiona, y te encanta el CSS. Entonces simple y sencillamente no utilices bootstrap.

  • KikeCastillo

    Gracias ya estaba por empezar a usarlo ;)

  • AlainLemus

    gracias , muy buena aportacion!!

  • Isrra

    No lo uses en combinación con sharePoint, no son compatibles.

    • Alan Chavez

      Oh, no sabia eso! Gracias por compartir.

  • oacm28

    pues para hacer paginas y q se vean bonitas esta chido, para hacer sistemas web lo veo pobre, para eso hay otros frameworks mas completos que si ayudan a crear un sistema robusto. pero es bueno el aporte, io lo estoy usando y la verdad es q como dije se ve lindo pero hasta ahi!

  • Alberto Cruz Velazquez

    http://www.livefyre.com/profile/23646888/ Cuando dices que  hay otros frameworks mas completos que si ayudan a crear un sistema robusto ¿A que cuales te refieres?

  • Marcela

    Bueno, ya estaba envalentonada con el bootstrap, pero me desinflé al final: si estas emepzando con CSS no lo hagas. Estoy empezando y hay tanto que leer, que al final se me discontinúa mi disenio web.

  • James

    Todo genial excepto que el mejor lenguaje de programación si que existe. Es Haskell ;P

    • Haskell es buenisimo! Sin embargo hay mucha gente que le tiene "miedo" a los lenguajes funcionales.

      • Sergei Vashkevich

        Vaya trolla. El mejor lenguaje de programación es LISP, y el segundo mejor el el CLIPS, lo que pasa que os dan miedo. Y luego ira PROLOG, lo que pasa que también os da miedo. Y ya luego si quieres podéis apuntar Haskell.

  • Hace poco me pidieron hacer un sitio web en Bootstrap, y pues tube que hacerlo
    incluso contra mi voluntad, si bien es muy completo, a mi parecer es
    demasiado engorroso y gastado, se podria reducir mucho pero realmente
    mucho código si se trabaja sin este Framework. A principio me entusiasme
    y dije vaya esto me reducira mucho tiempo, pues tiene muchas cosas que
    aparentemente te facilitarán el trabajo, pero al final es un doble
    trabajo... otra cosa, normalemnte en mis trabajos puedo terminar con pocos ficheros y no muchas lineas de codigo,
    con el famoso Bootstrap, termino con el doble de ficheros y hasta el
    doble de lineas de código, osea más pesado, y posiblemente más lento.
    Conclusión, no lo recomiendo, aprende a diseñar y a desarrollar, los
    frameworks por mi experiencia, sólo son una ayuda que no siempre dede
    usarse, y que además son una moda, veremos cuanto más dura esta???

    • Angel Camacho

      Eso depende que tan bueno seas con el framework. Bootstrap me permite reducir muchas lineas de código.

      • Cuestión de gustos, a mi me lo hacía más extenso, más del doble. Pero a decir verdad, en los últimos 3 proyectos que he trabajo lo he tenido que usar... aprovecho para dejar mi blog, talvez sume más visitas, jaja -> http://www.jorgelessin.com

        • Padu

          Es como tu dices.

      • Padu

        Yo creo que depende mas de lo malo que eres con html y css para que te compense, en ningún caso usando bien html y css te va a compensar mas bootstrap, ni siquiera con mil tiradas de la misma plantilla para diferentes páginas (siempre y cuando lo haga el mismo equipo claro).

        • Yo lo use porque soy bastante malo con HTML y CSS. Por eso no soy front-end y mi area de especializacion es back-end. Por eso para mi bootstrap y foundation son como una bendición. A decir verdad, creo que ahora me gusta un poco más foundation.

          Sin embargo, bootstrap te hace el CSS mas grande si incluyes TODO el framework. Si seleccionas solamente lo que necesitas, es bastante rápido y liviano.

  • Karlos García

    Bootstrap será una bendición para los que no tengan ni idea de html y css, para el resto (los que si sabemos) este framework es pesado y engorroso (demasiado código para tan poca cosa). Ya conozco mas de 4 agencias de diseño que "intentan" trabajar con el, y en todos los casos la curva de aprendizaje y uso es tan elevada, que valdría mas que aprendiesen a maquetar. Diseñar y maquetar no es lo mismo.

    • Padu

      Di que si macho, cargar todas esas librerías para hacer cuatro divs responsive , decir que es imprescindible y quedarse tan ancho es pa matarlo.... A poco que manejes css y html, el bootstrap es casi mas laborioso de utilizar. Me da el mismo asco que los editores de contenido , que para hacer algo decente tienes que dedicar mas tiempo de aprendizaje que haciendolo como dios manda. Por cierto yo me dedico a las dos cosas, programo y diseño y si de verdad fueras un dearrollador en condiciones no lo usarías...

      • karina

        Se que ya tiene meses este post pero aquí mi comentario:

        No creo en el uso imprescindible de framework; pero ya con el tiempo acumulas tus propias class e id y de repente ya tienes uno propio. Si vas hacer un html con un botón en medio no necesitas bootstrap es absurdo(es como un monstruo para matar una hormiga), pero si tienes que hacer toooooda una interfaz es muy bueno y rápido ademas estamos hablando del estilo, de la interfaz gráfica. Lo duro estará en el código que debes tipear detrás de la interfaz sea este php o el que decidas usar.

        Ahora bootstrap es css probado, de buena fuente... y en mi opinión personal no lo recomiendo para quienes están aún en aprendizaje. Me explico: si no le sabes explotar(no se si seria la mejor palabra) terminas con hojas de estilos inmensas, con clases de una o 2 lineas y con muchas otras que ni siquiera usas o sabes para que son.

        Yo que hago: instale ruby con sass, import solo que necesito de bootstrap(los componentes) en mi hoja .scss, extiendo mis clases y creo nuevas(entre otras cosillas con sass y css), hago una sola hoja de estilo y compacto el código. Termino con una sola hoja css comprensible y solo con lo que necesito para funcionar y totalmente responsive. Eso porque trabajo sola porque realmente en un equipo de trabajo hay diseñadores que se encarguen de eso, otro de la base de datos otro de programar y bueno ya saben. Pero a lo criollo yo trabajo como lo explique anteriormente. Olvide mencionar que prefiero tener una sola hoja de estilo por temas de rendimiento.

  • Padu

    Si porque para que vas a usar las media queries... Vaya tela

  • Eddy C.R.

    Gracias por el post tenia esa duda de si comenzar a usar bootstrap o aprender la manera tradicional, porque estoy siguiendo dos cursos distintos y en uno enseñan de la manera tradicional con css y en el otro te mandan a usar bootstrap lo cual me confundio un poco pero ahora veo a que va la cosa. Buen post saludos.

    • Jesús

      Depende te vas a dedicar al frontend o al backend...

  • Sergio García Galán

    Lo malo

    .

    .

    de Bootstrap

    .

    .

    es que los diseñadores de sitios web

    .

    .

    van a acabar desgastando

    .

    .

    el botón rueda

    .

    .

    de todos nuestros ratones.

    .

    .

    Mucho espacio vertical

    .

    .

    y mucho espacio vacío

    .

    .

    para decir cuatro cosas

    .

    .

    y omitir lo importante

    .

    .

    Salu2!
    ;-)

  • Juanki Estrada

    Me encantó la discusión que se armó por aquí. Me ayudó a decidirme.

  • Jesús

    ¿El cliente quiere aplicaciones meramente funcionales? = usa bootstrap.
    ¿El cliente quiere diseño y la aplicación es compleja? = no uses bootstrap.
    Para sistemas en donde lo que importa es la funcionalidad bootstrap es bárbaro, pero para sistemas complejos y que requieren diseño es hiper engorroso, la cantidad de clases que se reescriben es muy grande, ahorras más tiempo y líneas de código si lo haces desde cero.

  • Areli Ortega

    Me encanto tu blog :D

  • LAURA ACOSTA

    hola! preguntita, alguien sabe como programar la parte de comentarios como este... en bootstrap.??? gracias!!!!

  • Christian

    me dedico muchos años al diseño, primero puedo ver como una alternativa agil el usar bootstrap, pero como una solución que te brinde estabilidad y robustez definitivamente no, primero porque debes aprender el framework y si quieres sacarle el máximo provecho debes conocer el "corazon" del framework, segundo la raiz de todo que se entienda es el html, css y javascript puro, lo malo es que son tecnologías diferentes pero que se necesitan para crear grandes cosas, como muchos no quieren aprenderlo por x motivos entonces busca una solución fácil, y ahí salta el conejo del framework, entonces viene otro problema generado por el uso excesivo del framework "cualquiera puede ser diseñador" porque con unos clicks ya salio una pagina web y si le dices o haces en frente del cliente dira "osea cualquiera puede hacerlo y por eso me vas a cobrar caro??" ademas los framework tiene un sin fin de plantillas hechas para consumir el problema que muchas de ellas no están acondicionadas para necesidades particulares o requerimientos del cliente entonces cuando se aumente algo que pida el cliente entonces la plantilla sera un dolor de cabeza porque es algo "rigida" es similar como este ejemplo una casa "prefabricada" y una casa fabricada, en el primer caso cualquiera puede construirla rapidamente en dias y al gusto del cliente, pero con el tiempo empezaran los problemas porque se deteriorara mas rapido y si quieres aumentar mas pisos sobre esta estructura simplemente tendrá un limite y caerá, en cambio una casa fabricada desde cero con planos y planificado desde cero demorara cierto pero sera estable y robusta en el tiempo y si se desea que sea escalable o aumente algo no habrá problema porque "la estructura esta preparada" entonces este caso es similar al uso de framework y finalmente el gran error porque cualquiera construye una casa se cree arquitecto o ingeniero porque ya tiene materiales pre construidos grave error igual sucede ahora en la web

A %d blogueros les gusta esto: