Podcast: Descargar (23.4MB)
Comenzamos un nuevo capítulo y un nuevo bloque donde veremos algunos temas web bastante importantes. Comenzaremos explicando qué es Bootstrap, el framework para diseño de sitios y aplicaciones web, creado por Twitter y tan de moda está en este momento. Este framework te permite crear sitios y aplicaciones web responsive, con un diseño espectacular, de una forma fácil y sencilla.
Todavía estás a tiempo de entrar en el sorteo de un kit de Arduino, solo tienes que suscribirte a nuestra lista de correo. También tienes a tu disposición un formulario de contacto para enviarnos cualquier duda o sugerencia. Si te mueves en redes sociales nos puedes seguir en Twitter (@programarfacilc) o en Facebook.
Como ya te he comentado, Bootstrap facilita la creación de sitios web responsive. Está enfocado a la parte front-end del desarrollo web (HTML, CSS y JavaScript). Recuerda que a partir de Abril de este año, Google se toma muy en serio todo lo relacionado con la adaptación de las webs a los distintos dispositivos, penalizando todas aquellas que no sean responsive. Por este motivo es crucial apoyarnos en frameworks como éste para conseguir que nuestra web se adapte, sin mucho esfuerzo, al mayor número de pantallas posibles.
Bootstrap contiene plantillas de diseño, tipografías, tablas, imágenes, formularios, botones y otros elementos de presentación basados en HTML y CSS. Se desarrolló como un proyecto interno de la empresa Twitter para agilizar los desarrollos. En proyectos de esta envergadura, muchas veces se hace insostenible el mantenimiento de cierto código. Me imagino que mantener todos los estilos en una web como Twitter, es un dolor de cabeza para los desarrolladores, y por este motivo surgió Bootstrap, de la necesidad de agilizar el desarrollo y mantenimiento de las hojas de estilos. Surgió a principios de la segunda década del 2000, hasta que en el 2012 fue liberado como código abierto y publicado en GitHub. En poco tiempo se convirtió en el proyecto más popular de esta comunidad. En la actualidad podemos encontrar la versión 3 cuya versión estable es la 3.3.5. En la actualidad están trabajando en la versión 4 que está en la fase Alpha, ya os hablaremos algún día de las diferentes fases de un proyecto.
Si quieres saber cómo empezar con este framework mira estos artículos:
Obtener Bootstrap
Para obtener este fabuloso framework solo tienes que acceder a la web oficial. Desde aquí te dan la opción de descargar tres versiones.
- CSS y JavaScript compilado. Quizás sea la forma más rápida y usual de utilizar Bootstrap. Es un paquete listo para usar, te lo descargas y listo. Esta versión contiene todo lo que necesitas para poder incorporar a tu proyecto este framework, no contiene ni documentación ni el código fuente.
- Código fuente (Less). Con esta versión te descargas los archivos originales Less y JavaScript. Es necesario tener un compilador de Less para poder compilar y utilizar Bootstrap en tu web. Es una versión para usuarios algo más avanzados pero da mucha flexibilidad gracias al precomilador de CSS Less.
- Código fuente (Sass). Se trata de un clon de la versión Less pero con el código fuente escrito en Sass. Está orientado a aplicaciones programadas con Ruby On Rails, Compass o cualquier otro proyecto basado en Sass.
Antes de continuar vamos a ver un poco por encima que son Less y Sass, precompiladores de CSS. Estos dos lenguajes te permiten programar a más alto nivel que las hojas de estilo en cascada, siendo más fácil y cómodo que el CSS puro. Siempre dependerá de la magnitud del proyecto pero, por pequeña que sea tu web, siempre aplicarás más o menos estilos. Gracias a los precompiladores de CSS el trabajo de creación y mantenimiento de las hojas de estilo es mucho más sencillo. Cabe destacar tres funcionalidades extras que nos aportan. Por un lado el anidamiento de reglas, permite anidar diferentes elementos de diseño reutilizando y disminuyendo el código. También encontrarás variables, permiten asignar valores como un color, esto implica que podríamos cambiar el color a toda nuestra hoja de estilos con solo cambiar el valor de esa variable. Por último existen los mixins, permiten incorporar todas las propiedades de una clase en otra clase haciendo más fácil aún el mantenimiento del código.
La mayor desventaja que tenemos con estos dos lenguajes, Less y Sass, es que no son interpretados por el navegador, lo que nos obliga a tener un compilador o una librería externa de JavaScript para que nos genere el CSS final que debemos añadir a nuestra web.
Ya te he enseñado tres maneras de descargar Bootstrap, pero si no quieres ni descargarlo puedes hacer uso de él a través de un CDN (Content Delivery Network). Los archivos se encuentran alojados en diferentes servidores y tu puedes hacer uso de ellos. Automáticamente, al hacer la petición, te redirigirán al servidor más cercado. Es otra opción para poder utilizar Bootstrap. Aquí te dejo los enlaces.
Versión compilada de Bootstrap
En este capítulo nos vamos a centrar en la versión compilada del framework, la que está lista para usar. En la web oficial te descargas una archivo comprimido .zip y cuando lo descomprimes en tu máquina te encuentras una estructura parecida a esta.
Antes de continuar es importante que sepas que tienes a tu disposición una sección dentro de la web de Bootstrap que permite personalizar tu propio framework. Esto quiere decir que puedes descargarte solo las partes que vas a utilizar y modificar los estilos y colores para personalizarlos a tu gusto. Se hace a través de un formulario donde modificas directamente los archivos y variables de Less con diferentes parámetros, para posteriormente descargar el paquete personalizado a tu gusto.
Sea como sea, al descargar la versión compilada que más te interesa, al descomprimir te encuentras tres carpetas principales, las hojas de estilo (css), las fuentes (fonts) y el JavaScript (js).
En las carpetas CSS y JS vas a encontrar archivos bootstrap.* y bootstrap.min.*. Los primeros son los archivos sin comprimir, ocupan más y pueden ser de ayuda para ver el código y comprobar que están haciendo. Los segundos son los archivos comprimidos que contienen exactamente lo mismo en una versión reducida, ocupan menos y se hace muy difícil entender el código. Estos archivos comprimidos se usan en producción, en el producto final para agilizar la carga de la web.
En la carpeta CSS también existen unos archivos con la extensión .map (source map), son archivos utilizados por las herramientas para desarrolladores que algunos navegadores, como Chrome, utilizan. Bootstrap nos facilita un tema por defecto que podemos utilizar, son los archivos que vemos con la palabra theme dentro de la carpeta CSS.
En la carpeta JS están los archivos JavaScript que hacen que Bootstrap funcione correctamente.
Por último las fuentes, que se encuentran en la carpeta fonts. Vienen incluidas en este paquete para que no tengas que descargar ninguna dependencia. Estas fuentes son símbolos que podemos usar en nuestros diseños. Para más información puedes ver la web de Glyph Icons donde verás todos los símbolos que puedes utilizar. Es una ventaja con respecto al escalado y modificación utilizar símbolos como fuentes de texto en contra de las típicas imágenes.
Para añadir todas las funcionalidades que nos aporta este framework a nuestro proyecto web debemos hacerlo como siempre. Por un lado añadimos el archivo CSS en la cabecera y por otro lado los archivos JS al final de nuestra web, justo antes del cierre de la etiqueta Body.
Hay que tener en cuenta una cosa muy importante, Bootstrap tiene una dependencia directa con jQuery, esto implica que debamos añadir esta librería a nuestra página web.
Navegadores soportados y accesibilidad
Respecto a los navegadores podemos estar tranquilos, soporta las últimas versiones de todas las marcas. Esto nos da una tranquilidad pasmosa ya que no podemos excluir a ningún usuario debido a este motivo. Para el resto de versiones hay particularidades que debemos estudiar en cada caso. Lo más crítico, a mi parecer, son los dispositivos móviles. En la actualidad existe un gran abanico de dispositivos móviles siendo éste más grande en el sistema operativo Android. Esto implica que debido a las limitaciones del hardware, se haga imposible actualizar algunos dispositivos a las últimas versiones. Lo mismo ocurre con IOS, aunque en menor medida, la gente que consumimos Apple como opción, somos algo especiales y siempre que podemos actualizamos los dispositivos a la última o penúltima versión. Debido a esto debemos tener en cuenta el nicho que supone este mercado. En menor medida ocurre lo mismo con los sistemas operativos de escritorio o de sobre mesa. En algunas ocasiones no es posible la actualización, pero no te preocupes, existen remedios como por ejemplo el que nos plantea la web oficial de Bootstrap para resolver la incompatibilidad con Internet Explorer 8 y 9 de Microsoft.
En este caso la solución es rápida, debes tener en cuenta añadir un JavaScript a tu código que haga compatibles la versión de Bootstrap y los navegadores «antiguos«. Se trata de la librería Respondjs. Esta librería hace el trabajo sucio por nosotros, permite hacer compatible nuestra web hacia atrás, con versiones antiguas y de una manera fácil.
Para más información de compatibilidad con otros navegadores puedes ir al sitio oficial, donde encontrarás una detallada explicación de cómo resolver cada caso.
Debido a que Bootstrap utiliza los estándares web de HTML y CSS, crear sitios web accesibles es fácil haciendo muy poco. Podemos (y debemos) llegar al mayor número de gente y eso implica que se incluyan a todos aquellos que no sean capaces de percibir cualquier web como la gran mayoría lo hacemos.
Licencia de Bootstrap
Al tratarse de un software libre muchos de nosotros creemos que podemos hacer, basicamente, lo que nos de la gana. Esto no es así de extremo. Realmente si que podemos hacer lo que queramos pero siguiendo una condición mínima. Bootstrap tiene licencia MIT (Massachusetts Institute of Technology) y como tal, debemos seguir una condición mínima si queremos distribuir software comercial y personal que incluya Bootstrap, incluir una nota en nuestro proyecto donde quede claro la nota de copyright y la parte de los derechos, así de sencillo. En definitiva, incluye información tanto del aviso legal como de los autores, eso te dará libertad para hacer el uso que tu quieras del software bajo esta licencia.
Y con todo esto ya hemos terminado el capítulo de hoy, espero que te haya quedado claro que es Bootstrap y que tengas en cuenta que es muy importante, de aquí en adelante, uses Bootstrap en todos los proyectos web que hagas. Tienes otras opciones, pero quizás este framework sea el más idóneo para comenzar debido a la gran comunidad que está detrás y lo apoya, entre ellos nosotros :). Cualquier duda ya sabes !!!!! pregúntanos !!!!!
Recurso del día
Gulp es un automatizador de tareas para el desarrollo web, como pueden ser la minificación de código CSS o JavaScript, la recarga del navegador, la compresión de imágenes o la validación de sintaxis. Este open-source cuyo código fuente lo podemos encontrar en github está construido con JavaScript y funciona sobre NodeJS. Si no quieres perder el tiempo en realizar manualmente un sinfín de tareas es el momento de utilizar este automatizador.
Muchas gracias a todos por los comentarios y valoraciones que nos hacéis en iVoox, iTunes y en Spreaker, nos dan mucho ánimo para seguir con este proyecto.