Pagina principal "El Nudo"

Bootstrap 3, diseño web rápido, fácil y responsive

sábado, 24 de mayo de 2014

Bootstrap 3 es una herramienta que puede agilizar mucho el diseño de una web. 

Se trata de un framework front-end (diseño del lado del cliente) que permite crear proyectos web totalmente responsive, es decir, webs que adapten la estructura de la interfaz en función del dispositivo/ tamaño de pantalla desde el que se visualicen. Esto es cada día más importante ya que hoy en día los dispositivos móviles ya se emplean más que el ordenador para acceder a internet y la tendencia va en aumento. 

En esta imagen se ve claramente como una página se puede adaptar a los diferentes anchos de pantalla:
Boostrap es un herramienta que facilita mucho el diseño responsive, y que además puede ser muy útil para diseñadores novatos, que estén aprendiendo HTML5 y CSS3. También puede facilitar el diseño de prototipos rápidos, ya que se ahorra mucho código. 

Dicho esto, ¿en qué consiste Bootstrap?

Por un lado este framework provee al usuario de una hoja de estilos (CSS) predefinida, en la que hay una serie de clases establecidas con los elementos más requerido en el diseño web, como pueden ser los botones, tipografías, formularios, glyphicons, dropdowns, etc. Esto puede ahorrar mucho trabajo al diseñador, aunque abusar de este recurso puede hacer que nuestra web carezca de personalidad y no destaque sobre las demás.

Además Bootstrap integra multitud de plugins jQuery, necesarios para ejecutar muchas funciones de los componentes, y que es son de gran ayuda para los que por el momento no nos hemos adentrado en el javascript.

Otra de las características más importantes de Bootstrap es el sistema de grid de 12 columnas que emplea. Todos los diseños se deben crear tomando este grid como base. Esto facilita mucho la adaptabilidad de la página web a diferentes tamaños de pantalla, facilitando el trabajo pero restringiendo la libertad para crear columnas fuera de ese grid.

Uno de los componentes prediseñados más valiosos, en mi opinión, es la barra de navegación responsive. Esta cambia totalmente su configuración en pantallas pequeñas ofreciendo al usuario un menú desplegable mucho más intuitivo. 

En las siguientes imagenes añado un ejemplo de cómo he aplicado esta opción a mi página web. En la primera se observa el menu al visualizar la web desde una pantalla grande (ordenador) y en la segunda desde un smartphone:


Responsive navbar (por el Nudo)

Por último cabe destacar la comunidad que se ha creado en torno a este framework libre, esto garantiza el constante desarrollo de esta herramienta y el poder encontrar múltiples recursos online, como tutoriales, plantillas, ejemplos, soporte, etc.

Por tanto estas son las principales ventajas y desventajas que veo, después de haber usado Bootstrap:

VENTAJAS:
  • Responsive: Sin duda es el punto fuerte de Bootstrap y todos sus componentes y lenguajes están creados para facilitar el diseño web adaptable.
  • Convenciones y buenas prácticas: Bootstrap se ha creado tomando como base los estándares HTML5 y CSS3. Además las clases que emplea para los diferentes componentes permitiría incluso crear una página sin apenas escribir código en CSS (con todos los componentes prediseñados).
  • Comunidad: Respaldo y recursos de acceso libre para todo el mundo.
DESVENTAJAS:
  • Exige aprender los términos y estructura propia del framework: Aunque no es difícil, antes de comenzar el proyecto web se deben tener claros los términos, clases, grid, etc. requeridos para no tener conflictos entre lenguajes.
  • Limitaciones en el diseño: Al tener muchos componentes prediseñados puede ser complicado llevar a cabo webs que por decirlo de algún modo se salgan de los estándares. 

CONCLUSIONES:

Si lo que buscas es crear un proyecto web responsive de forma rápida bootstrap es una buena herramienta. Si por el contrario quieres crear una web con total libertad, empezar desde cero es la mejor opción ya que también existe la opción de crear webs responsive empleando media queries en nuestro CSS.

He analizado esta herramienta desde mis conocimientos, ya que la he usado para diseñar mi web. De todos modos Bootstrap ofrece muchas otras posibilidades si tienes conocimientos de programación.

Aquí dejo un par de ejemplos de proyectos creados empleando Bootstrap (cambiando el ancho de la ventana se aprecia la adaptabilidad de las web):


Codiga, diseño con Bootstrap

Method, diseño con Bootstrap
RECURSOS:
Si estas interesado en ahondar más en el uso de esta fantástica herramienta la página oficial de bootstrap explica paso a paso el funcionamiento del framework, y las características de cada elemento:



Fotografías: