El desarrollo de proyectos para Internet desde cero o «from scratch» puede ser algo muy, pero que muy tedioso, lento y complejo.

En la actualidad es necesario intentar acelerar los trabajos para obtener proyectos rentables. Es por ello que los diseñadores de frontends trabajan con herramientas que permiten construir rápidamente sites.

El bootstrapping puede referirse al proceso mediante el cual se han desarrollado entornos de programación cada vez más complejos a partir de otros más simples.

De aquí viene BootStrap o Twitter Bootstrap.

Es un framework frontend que nos ayuda a ganar velocidad, evitar errores comunes  y aumentar la compatibilidad en nuestros proyectos en Internet. Es software libre para diseñar sitios y crear aplicaciones web. Ganaremos tiempo al trabajar con tecnologías del lado del cliente como son CSS, HTML y Javascript (JQuery).

Gracias a este framework realizaremos tareas de forma más sencilla al apoyarnos en técnicas, métodos, responsive y APIs que de otra forma tendríamos que realizarlas a mano.

Bootstrap fue desarrollado por Mark Otto y Jacbod Thornton de Twitter. En agosto del 2011, Twitter liberó a Bootstrap como código abierto. En febrero del 2012, se convirtió en el proyecto de desarrollo más popular de GitHub.

Para descargar bootStrap 3.3.0 (a día del artículo/entrada)  tendremos que visitar:

http://getbootstrap.com

El eslogan principal de la web:

“Bootstrap es el framework HTML, CSS y JS más popular para el desarrollo responsive o adaptativo y proyectos mobile first en la web.”

¿Qué es el responsive?: es una técnica de diseño web que prioriza la correcta visualización de una misma página en distintos dispositivos: Ordenadores,  tablets , móviles.

¿Qué es Mobile first?: Debido a que  más de la mitad de los accesos a Internet se realizan a través de los móviles una técnica es desarrollar el website para los terminales móviles y luego optimizarlo para que sea eficiente en las pantallas de los ordenadores.

Para usar BootStrap en una página HTML, el desarrollador solo debe descargar la hoja de estilo BootStrap CSS y enlazarla en el archivo HTML.

Si el desarrollador también quiere usar los componentes de JavaScript, éstos deben estar referenciados junto con la librería jQuery en el documento HTML.

BootStrap al ser muy extendido a nivel mundial, permite un diálogo de empresas en proyectos que requieran colaboración al ser un marco común de desarrollo. Esto es un aspecto muy interesante en proyectos en los que participen diversos desarrolladores-empresas frontend.

Bootstrap se puede definir como un framework bastante completo, porque abarca desde el sistema de rejilla o grid para (como otros), CSS, componentes y un layer de javascript para trabajar la interactividad. Ojo, no todo tiene que ser responsive usando bootstrap, pero permite los mecanismos para llévalo a cabo.

En la web mediaqueri.es podremos ver ejemplos (showcases) de contextos web (dimensiones) para el trabajo en responsive mediante el uso de mediaqueris.

Para trabajar con los archivos lo único que necesitamos es un editor de texto. Los profesionales de la web suelen trabajar con editores HTML y CSS como pueden ser Sublime text o Dreamweaver, entre otros. El funcionamiento del mismo se puede comprobar con cualquier browser que dispongamos.

Además de Vanilla CSS, Bootstrap incluye soporte para los 2 más populares preprocesadores existentes como son Less y Sass.  Si descargamos el código fuente, podremos usar less. También ofrece la posibilidad de Sass (para modificar el core si deseamos). He creado una entrada donde muestro como trabajar con sublime con los preprocesadores.

Es un único framework para cada dispositivo puesto que es capaz de escalar tu proyecto desde teléfonos o tablets hasta ordenadores (desktops).

Para usarlo o lo descargamos  en zip o lo usamos a través de una CDN (sin necesidad de descargarlo). Aunque recomiendo las dos cosas porque la CDN puede fallar.

¿Qué es una CDN?

Una CDN (Content Delivery Network) es un conjunto de ubicaciones en el que redistribuyen localmente el contenido de los servidores y guardan en caché los archivos que no necesitan actualización permanente, según unas reglas personalizables.

¿Qué encontramos dentro del ZIP?

Los CSS, Javascript y fuentes.

CSS: existen 7 archivos, 4 de ellos css. bootstrap.css, bootstrap.min.css, bootstrap-theme.css, bootstrap-theme-min.css. Las versiones min sin minimizadas para ocupar menos espacio y consumir menos ancho de banda.

Javascript: 2 ficheros. Bootstrap.js y bootstrap.min.js (minimizado más recomendable para producción).

Fonts: Contiene 1 fuente en 4 versiones. Denominada iconfont al ser de iconos. Sus extensiones son .eot, .svg, .ttf, .woff. En otra entrada del blog hablo sobre los formatos existentes de fuentes para la web, que permite entender estas variantes.

Por lo tanto para usar el framework BootStrap en un proyecto web, es necesario incorporar estas carpetas en el proyecto. Crear un HTML y vincular la CSS, el Javascript y la fuente.

El responsive web design se soluciona mediante el empleo de media Queris.

Media Queries es un módulo CSS3 que permite adaptar la representación del contenido y convirtió en un estándar recomendado por la W3C en Junio del 2012.

Un ejemplo simple de un Media Query puede ser:

<link href="css/telefono.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 480px)" >

En este ejemplo, el Media Query, ha sido agregado a la etiqueta. El atributo media es dónde reside el Query. Este otro dice:

only screen and (max-width: 480px)

El significado puede ser obvio: aplica esta hoja de estilo sólo a un dispositivo con una ventana de navegador no mayor a 480 pixeles.

Puedes observar por el nombre del archivo telefono.css que este Query en particular, está hecho para estilos de un dispositivo móvil.

La compatibilidad entre navegadores con bootstrap es brutal. Esto es un punto fuerte, puesto que no tendremos que pegarnos con diversos browser. Navegadores como Chrome, Firefox, IE, Opera, Safari en sistemas Android, iOs, Windows, Mac OS, un soporte bastante extenso y correcto.

http://getbootstrap.com/getting-started/#support

En caso de no ofrecer soporte en algún navegador determinado existen Polyfill que es un trozo de código  un plugin que permite tener las nuevas funcionalidades de HTML5 en aquellos navegadores que nativamente no lo soportan. En definitiva se trata de hacer que aquellos navegadores que no son compatibles con una característica nueva, la incorporen a través de fallbacks, es decir de código, en su mayor medida javascript, que se encargue de realizar dicha funcionalidad.

Elementos principales de Bootstrap.

Además de trabajar con un sistema GRID, ofrece un conjunto de estilos CSS, componentes prefabricados e interactividad en javascript mediante plugins.

El Grid system o sistema de rejilla es un sistema prácticamente que emplean todos los frontend para organizar contenido en columnas en función de anchos o media queris.

El número de columnas que disponemos en este Grid es de 12. El comportamiento y columnas cambian en función de las media queris. Una de las cosas interesantes de los componentes es que nos ofrece una librería de iconos que podemos incorporar fácilmente.

Ejemplo:
<span class=”glyphicon glyphin-search> </span>

Los componentes pueden ser varios, botones, barras de navegación, alertas, listas desplegables, paneles, barras de progreso, ruedas, paginación, etc …

Mediante plugins en javascript basados en Jquery estamos unificando el framework más usado con la librería más extendida.

¿Cuáles son las ventajas de usar bootstrap?

• Framework extendido.
• Compatibilidad en dispositivos y navegadores.
• Se puede aplicar desde la fase del diseño.
• Comportamiento unificado en diversos navegadores.
• Soporte Responsive Web Design
• Muchos componentes, plugings, JQuery.
• Facilita el trabajo en equipo, agilizando el desarrollo web desde 0.

Herramientas para facilitar al diseñador trabajar con bootstrap.

PSD Wrangler
Disponibles para Photoshop o Ilustrator. Son plantillas de ayuda o guía.
http://psdwrangler.tumblr.com/post/24530125241/bootstrap-grid-templates

Guideguide.me
http://guideguide.me

Es una extensión para Photoshop adaptable para Bootstrap. Válido para versiones CS5, CS6 y CC (cloud). Recuerda, una vez instalado, la configuración por defecto de Bootstrap 3, 15px para los márgenes, 12 columnas, 30px de margen entre columnas. El ancho del contenedor es decir la imagen que tenemos que crear para dispositivos mayores o iguales a 1200px es de 1170px tal y como dice la ayuda de bootstrap
http://getbootstrap.com/css/#grid

Layoutil.com
www.layoutit.com
Asistente online  DIY que permite crear nuestra web de forma visual. Se puede descargar el código del diseño del prototipo creado.

Hola mundo desde BootStrap

Copiar las 3 carpetas y pegarlas en la carpeta donde tengo la página holamundo.html. Recuerda que los ficheros descargados pueden ser reducidos incorporando las versiones sólo minimizadas.

Pueden quedarse  sólo, de CSS: Bootstrap.min.css, de js: bootstrap.min.js

Desde un editor de texto, modificar el holamundo.html:

Desde la web http://getbootstrap.com/getting-started/

Copiar la plantilla de ejemplo básica, en el apartado Basic Template y pegarla

Os dejo de regalo la versión básica explicada y en castellano (es) 🙂

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Esta etiqueta inferior habilita el mobile first y el responsive desactivando el pitch to zoom-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Plantilla Bootstrap de www.palentino.es</title>

    <!-- Bootstrap con enlace minimizado -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 y Respond.js para dar soporte a IE8 de elementos HTML5 y media queries -->
    <!-- AVISO: Respond.js no funciona so ves la pagina vía protocolo file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hola Mundo desde Palencia. ;-)</h1>

    <!-- jQuery (necesario para plugins Bootstrap's JavaScript), descargado desde una CDN (anteriormente comentado) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Incluye todos los plugins compilados o los ficheros individuales que necesites -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

No necesariamente es necesario ceñirnos a los estilos de Bootstrap, pudiendo usar nuestros diseños personalizados, sobrescribiendo clases que Bootstrap nos impone. Si bien es cierto aquellos principales pueden afectar a la rejilla y hay que tener cuidado con ello.

De hecho, si cargamos una css con stylesheet después de cargar la minimizada de bootstrap, al ser en cascada, tendrá preferencia sobre los estilos bootstrap y podremos adecuar los nuestros sin problemas.

<link href=”css/bootstrap.min.css rel=”stylesheet”>
<link rel=”css/mi-estilo.css”>

Si creo un estilo h2 en mi-estilo.css, modificará el h2 de bootstrap, por el orden de carga de los ficheros css

Bootstrap 3 está enfocado a un diseño Mobile First con 12 columnas.

Basado en un sistema de rejillas, consigue adecuar sus diseños mediante las media queries anteriormente mencionadas.

Para ello: No emplea media queris para dispositivos menores de 768px, porque es el valor por defecto, por eso no tiene @media

Para el resto de dispositivos las siguientes mediaqueries en función de su resolución.

 /* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */

@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Los estilos son diferentes entre rangos de resolución mediante CSS.

Las 3 media queries + la de los teléfonos nos permiten gestionar el responsive (por defecto).

Mediante unos prefijos nos permiten marcar que determinadas columnas se muestren de determinada forma en cada uno de los escenarios.

.col-xs- // Para móviles
.col-sm- // Para tablets, >750px contenedor
.col-md- // Escritorios, >970px contenedor
.col-lg- // Desktop superiores, > 1170px contenedor

En breve, parte dos y mas detalle sobre el trabajo con bootStrap …

Es necesario mencionar que existen otras alternativas a Bootstrap.

ALTERNATIVAS – ANEXO

Fundation
Enfocado desde sus orígenes al diseño responsive design y orientación para el soporte móvil First.
http://foundation.zurb.com/

Pure
Es un framework del 2013. La característica más relevante es que solo utiliza CSS. Basado en normalize.css, soporta diseño responsive, orientado a dispositivos móviles, con un tamaño de la biblioteca muy reducido. No posee herramientas Javascript.
http://purecss.io/

Ink
Proyecto del 2012. Posee escasa documentación, pero con buenos elementos visuales. Basado en Normalize.css y compass para extender las capacidades del CSS estándar.
http://ink.sapo.pt/

HTML KickStart
Muy similar a Bootstrap. Documentación sencilla. Es de los más recientes. Creado por 99Lime.
http://www.99lime.com/elements/

Metro UI CSS
Disponible desde el 2012. Framework de 5 pasos, permite tener tu website al estilo Microsoft Windows 8.
http://metroui.org.ua/

Semantic UI
Es un buen framework, aunque en fase de alpha.
http://semantic-ui.com

Skeleton
Skeleton es uno de los frameworks responsive más ligeros, basado en un sistema de grid (cuadrícula) simple. Skeleton scala desde 960px el tamaño del diseño, para que pueda verse en tablets y smartphones en modo normal y panorámico.
http://www.getskeleton.com/

Gumby
Gumby Framework es un framework simple y ligero, que viene, a diferencia de algunos frameworks, con un kit PSD y UI que hace más fácil maquetar el diseño de la manera más tradicional.
http://gumbyframework.com/

Para finalizar los frameworks, el último open source español

Zimit  Framework
Es un proyecto de código abierto creado originalmente por Jorge Garrido Oval, también conocido como FireZenk, con la intención de proporcionar una base sólida y completa para creación rápida de prototipos de páginas web adaptables basadas en HTML5 con un uso intensivo de CSS mediante el uso del lenguaje de precompilador LESS, relegando a un segundo plano el uso de javascript.

Zimit es un framework para prototipado web que implementa el 100% de las nuevas etiquetas HTML5, siendo el único en este campo. Por ello solo es compatible con los navegadores modernos, siendo posible ampliar su compatibilidad mediante javascripts externos.
http://firezenk.github.io/zimit/

¿ Cuál es el que más te gusta?