frontend

Por que usar un framework para frontend web como bootstrap

CSS3Desde hace unos años han ido apareciendo de forma generalizada y bien desarrollada lo que todo el mundo solía hacer en sus desarrollos web y son pequeños frameworks para el frontend. Quien haya maquetado de forma continuada, con el tiempo habrá ido reutilizando técnicas entre proyectos. Por ejemplo, una de ellas es el uso de estilos de reseteo como el ya clásico reset.css o la creación y reutilización de componentes básicos como botones, migas de pan, etc.

Hace unos 3 o 4 años empezó a surgir una tendencia de creación de sistemas de grid, organizando nuestra web en columnas. El uso del grid nos facilita el trabajo, siempre y cuando no vayamos buscando el pixelperfect, ya que nos permite adaptar el ancho de las columnas, dar estilos generales y modificar la apariencia de nuestra web con pocas lineas de css sobre el grid ya creado.

Hace un par de años que empezaron a nacer los frameworks completos para frontend. Estos frameworks no son solo una base de estilos, sino también componentes de uso general que usamos a diario. A veces y según el desconocimiento de la gente, piensa como frameworks frontend cosas que no lo son. Para aclararlo creo que lo mas sencillo es quedarnos en jQuery. jQuery tiene varias ramas, la librería, que no es mas que una librería de manipulación de DOM, jQueryUI que es un framework de componentes frontend y jQuery Mobile que viene a ser no un framework frontend sino ya un fullstack de frontend. La diferencia entre ellos es evidente, ya que jQueryUI no nos da una base de estilos, ni un sistema del que poder extender nuestra página, sino unos componentes como botones, tabs, sliders, etc. con los que podemos crear componentes mucho mas ricos que los nativos de HTML. Por otro lado tenemos el fullstack de jQuery Mobile que no solo nos da un theme con estilos básicos sobre los que desarrollar, sino todo el sistema de navegación, control de menús, formatos, datos, etc.

¿Qué es un framework frontend para web? No es mas que un conjunto de librerías y estilos básicos que nos permiten construir interfaces frontend de forma rápida y personalizable. Comparandolo con jQueryUI, sería como añadir unos estilos de scaffolding para la construcción de la estructura de la página y un grid de maquetación. Si por otro lado lo comparamos con jQuery Mobile, sería lo mismo pero eliminando la parte en la que jQuery Mobile nos construye todo el sistema de navegación entre páginas (es un ejemplo), bajandolo por así decir de fullstack a framework.

bootstrap-logo

Los sistemas de scaffolding nos ayudan a crear prototipos de webs de forma rápida. Podemos generar de forma rápida, paginas, menús, secciones, formularios, todo con estilos genéricos. Una vez desarrollado nuestro scaffolding básico, podemos dedicar esfuerzos a personalizar el estilo de la página. Hay que tener en cuenta que donde se diferencia de la forma clásica que teniamos de trabajar si éramos ordenados es que no nos tenemos que preocupar de la evolución de nuestro framework de base de estilos y que ademas podemos reaprovechar los plugins que desarrolle la comunidad.

Ahora un breve listado con los 4 frameworks mas útiles, aunque hay muchos mas:

Espero que os pueda servir como punto de entrada para investigar y aplicar posteriormente en vuestros proyectos.

Twitter Bootstrap el framework frontend the twitter

Hoy os quiero hablar de una herramienta web muy útil. Todos conocemos los framework de programación en distintos lenguajes, que si pylons, django, aspnet mvc, etc. Pero ¿Qué pasa con los framework de diseño? En internet podemos encontrar miles de themes gratuitos para utilizar en nuestra página, pero pocos son los que podemos utilizar como base genérica y aquí es donde aparece bootstrap.

Bootstrap es un framework de maquetación web desarrollado por Twitter y que de hecho se utiliza en este servicio, así como en otros muchos como ohloh o masterbranch por poner un par de ejemplos. Desde hace bastante tiempo lo utilizo en mis proyectos personales ya que provee de una buena base de estilos y estructura genéricos.

Bootstrap incorpora:

  • Scaffolding: estilos globales que resetean el tipo de body, enlaces, sistema de grids y layouts.
  • Base CSS: estilos para elementos comunes de html como tipografía, tablas, formularios y botones. Incluye Glyphicons, una librería de iconos libre.
  • Componentes: estilos comunes como tabs, barras de navegación, breadcrumbs, encabezados, etc.
  • Plugins de javascript: componentes comunes de javascript como tooltips, modals, etc.

Lista de componentes:

  • Grupo de botones
  • Botones desplegables
  • Tabs y listas de navegación
  • Barras de navegación
  • Etiquetas
  • Encabezados y destacados
  • Thumbnails
  • Alertas
  • Barras de progreso
  • Modals
  • Desplegables
  • Tooltips
  • Accordion
  • Sliders

Tenéis mas información en la web de Twitter Bootstrap.

Scroll al inicio