Programación de páginas web en Bootstrap

Ya sea a través de teléfonos móviles, tabletas, computadoras portátiles o de escritorio, sin duda hoy día accedemos a Internet desde todo tipo de dispositivos. En consecuencia nos surge la necesidad de que el diseño web de nuestra página tenga una correcta visualización en estos dispositivos tan diferentes. Sigue leyendo y aprende cómo lograr tal adaptabilidad de formato mediante programación de páginas web en Bootstrap.

Programación de páginas web en Bootstrap

¿Qué es Bootstrap?

La expresión boot strap suele traducirse literalmente del inglés como “correa de bota” o “lengüeta de zapatos”, esto es, aquella tira generalmente de cuero que se sitúa en la parte posterior de un calzado y que, tirando de ella, ayuda a situar el pie dentro de dicho zapato o bota.

De esta imagen de “levantarse uno mismo del suelo tirando de las lengüetas de sus zapatos”, se deduce imaginativamente cierta metáfora de “herramienta autosuficiente” o, mejor dicho en términos de informática, de “conjunto de herramientas y procedimientos para que un entorno se construya a sí mismo”; de allí que también a bootstrap se lo traduzca a veces en castellano como “secuencia de arranque” o “secuencia de inicio”.

Sin embargo, Bootstrap no necesita traducción porque es el nombre propio de uno de los más populares frameworks o conjunto estandarizado de herramientas de HTML, CSS y JavaScript, que los programadores usan gratuitamente para desarrollar los llamados diseños web responsive o adaptativos a cualquier dispositivo; pero partiendo primero desde un proyecto para móviles antes que para computadoras de escritorio.

Por supuesto, existen otros frameworks para diseño responsive, tales como Materialize, Foundation o Pure.css, útiles también a la hora de redimensionar los elementos de la web de forma tal que se adapten automáticamente al ancho de cada dispositivo, proporcionando así una correcta visualización de los mismos contenidos y una experiencia de usuario lo más similar posible pese a las diferencias de cada formato.

Pero Bootstrap, desde antes de su actual versión 3.3.6 y ya próximo a su versión 4, es un marco de trabajo concebido para programar entornos web responsive bajo el concepto mobilefirst, es decir, ante todo para diseñar teniendo en mente a dispositivos móviles como los celulares.

Este enfoque se basa en el hecho de que como los dispositivos móviles tienen una pantalla mucho más pequeña y, por ende, un uso táctil más limitado que los de una computadora de escritorio con su ratón y su pantalla de 17 pulgadas, entonces es más fácil programar primero el diseño responsive de una página web en esta situación desfavorable y adaptarlo después a la más favorable, que proceder al contrario.

Desarrollado originalmente por Mark Otto y Jacbod Thornton de Twitter, Bootstrap está formado por una colección de plantillas interactivas para CSS (“Hojas de Estilo en Cascada”) y HTML (“Lenguaje de Marcas de Hipertexto”), plantillas de diseño con tipografía, botones, tablas, formularios, menús de navegación, carruseles de imágenes y otros complementos que uno puede usar en el desarrollo de su página web.

También Bootstrap incorpora varios plug-in, funciones auxiliares o extensiones de JavaScript, las cuales permiten maquetar muy rápidamente un increíble front-end responsive, incluso para aquellos desarrolladores con conocimientos básicos de programación front-end; es decir, de estructura semántica del contenido, de codificación del diseño en hojas de estilo y, sobre todo, de interacción con el usuario.

Liberado por Twitter desde agosto del 2011, Bootstrap es de código abierto, así que los desarrolladores están invitados a participar en el proyecto haciendo sus propias contribuciones a la plataforma. Además está disponible en GitHub, donde es el proyecto más popular desde febrero de 2012; siendo usado por la NASA y la MSNBC, entre otras organizaciones.

Ventajas y Desventajas de Bootstrap

-Fácil e intuitivo de operar: Por ejemplo, a la hora de maquetar una interfaz de usuario, con Bootstrap no se pierde tiempo modificando el CSS para hacer una vista con 3, 4 ó 5 columnas, o agregar un clearfix o hacer cambios estructurales a solicitud del cliente que éste desee ver en vivo y directo.

-Sin más Hacks: Como aún misteriosamente cada navegador implementa HTML, CSS y JavaScript de modo diferente, múltiple y no estandarizado, resulta fastidioso lograr que nuestro diseño responsive se vea idéntico en todos los navegadores. Pero Bootstrap elimina estas frustraciones logrando que lo que se diseñe sí se vea homogéneo en todos los navegadores y dispositivos móviles.

-Idóneo para dispositivos móviles: Como ya dijimos, Bootstrap es un framework prioritariamente optimizado para crear, mediante reglas CSS, páginas web responsive que, por ende, se adaptan de modo automático y dinámico a la gran mayoría de las pantallas y resoluciones existentes en el mercado de celulares.  Cuando nos pidan un diseño responsivo, resolvámoslo fácilmente con Bootstrap.

-Twitter lo mantiene y actualiza: Como fue desarrollado como una herramienta de uso interno por parte de empleados de Twitter, esta compañía decidió compartirlo con el mundo y garantizar su conservación y puesta al día mediante código abierto. No es un framework perfecto, pero la mayor parte del trabajo pesado de su programación está hecha.

-Es extensible: Al ser una arquitectura para software o programa que permite iniciar otro programa más grande, Bootstrap nos da las herramientas y procedimientos para extender y adaptar el marco de trabajo según nuestras necesidades. Por tanto, no limita en nada los diseños que uno puede hacer.

Sin embargo…

-No es para principiantes: Uno no puede utilizarlo sino tiene al menos conocimientos de programación en CSS y HTML. De lo contario corremos el riesgo no sólo de sentirnos agobiados por la cantidad de cosas que se nos vienen en encima a la vez (hablamos de una hoja de estilos de unas 6000 líneas), sino que también adoptaremos malas prácticas de CSS debido a que Bootstrap es imperfecto.

Pero poseyendo unos conocimientos básicos en HTML y CSS, en un par de horas tendremos nuestros primeros resultados esperanzadores y, una vez terminado el primer proyecto, esa sensación de que ya llevamos las riendas del caballo.

-Una gran huella digital: Entre 200 y 250 KB en archivos CSS y JavaScript es la huella digital de Bootstrap si lo usas tal y como lo ofrecen en su página de descarga (www.getboostrap.com); lo cual es bastante grande y pesado y, por tanto, problemático de usar si vives en un país de Latinoamérica donde el ancho de banda de internet es generalmente lento.

-Demasiadas convenciones y nodos anidados: Para mostrar una alerta, no es necesario crear anidar 3 divs, al menos idealmente. Pues bien, cuando uno programa con Bootstrap nos damos cuenta de que crear tales alertas, formularios, media objets y otras cosas más, implica apegarnos tanto a las convenciones del framework que terminamos innecesariamente con un DOM más complejo y menos semántico.

-Cuando se desactiva JavaScript, la mayoría de sitios Bootstrap no funcionan: Idealmente, hoy día un sitio web debería funcionar si el JavaScript se halla desactivado, pero muchos programadores no piensan en los usuarios que desactivan esta interfaz cuando desarrollan un diseño web en Bootstrap y, en caso de desactivación, tales entornos front-end no lucen bien o no son muy accesibles.

Aún así, la programación de páginas web en Bootstrap es altamente recomendable, sobre todo si uno no cuenta con tiempo ni energía para estar depurando el CSS. Como todo framework, Bootstrap nos proporciona una forma fácil y rápida de implementar diseños web, nos asegura que este diseño funcione en una amplia gama de navegadores y que su código cumpla con ciertas normas estándar. ¿Por qué dudar en descargarlo?

Si tienes cualquier duda, puede consultar con nuestro equipo de programadores a través del formulario de contacto.

Programación de páginas web en Bootstrap
5 (100%) 7 votos
empresa de diseño web

Sobre Página Web Media

Somos una empresa de diseño web en constante crecimiento. Nos actualizamos para ofrecer el mejor servicio a nuestros clientes.

Pedir opinión

Nuestro equipo de profesionales te guiará en la mejora de tu página web. Consulta y te daremos nuestra opinión sin compromiso. Nuestro equipo está compuesto por expertos en Diseño Web, Diseño Gráfico, experto en Posicionamiento SEO, diseño de aplicaciones móviles y marketing online, así como programadores para diseño a medida. Te guiamos en tu idea.

 

Más artículos sobre diseño web

Ver todos los artículos