Análisis de HTML5 Boilerplate e Initializr

Antes de empezar con el análisis en sí, me gustaría dejar claro lo que es HTML5 Boilerplate como Initializr.  Y es que sobre todo al principio, se tienden a confundir algunos conceptos o las explicaciones que he visto son bastante vagas, así que he decidido analizarlo en cierta profundidad para saber qué hace cada módulo y así poder elegir los que más nos convienen.

Debido a la extensión he decidido dividirlo en 2 partes.  En este primer artículo hablaré sobre las opciones iniciales y en uno próximo sobre las opciones que te permite agregar Initializr.

HTML5 Boilerplate es una plantilla que nos ayuda a empezar una web.  No sería tan conocido si sólo se limitara ha hacernos la típica estructura del doctype, html, head, body.

Digamos que esa estructura es la base, pero lo que le da la importancia que tiene son los módulos o complementos adicionales.  Si nos vamos a la página web oficial podemos descargarnos la versión full con todos esos módulos, pero para comprender mejor el funcionamiento elegiremos el botón "Get a custom build".

Esto nos redireccionará a la web de Initializr.  Esta página lo que hace es permitirnos elegir qué módulos vamos a agregar a nuestra plantilla y utilizaré ese menú para explicarlos.

Pre-configuración

Con esta opción lo que nos indica es que nos da a elegir entre 3 plantillas iniciales a las que luego iremos añadiendo los módulos:

    - No template: Se trata de la página estándar en la versión completa, no tiene datos adicionales.
    - Mobile-first Responsive:  Incluye en la página una versión simple de una web con un menú superior, una información con artículos en el centro y un menú lateral derecho como <aside>.  Además el css incluye unos media queries para hacer el diseño responsive.
    - Twitter Bootstrap: Incluye el conocido Bootstrap en su versión 3.0.  Además de una página de inicio donde se muestra la estructura de bootstrap incluye sus css, unos scripts (bootstrap y jquery) y la fuente glyphicons.

Normalize.css

Este podríamos decir que es el único módulo obligatorio, ya que se incluye en todos los templates. Cada navegador utiliza una fuente, espaciados, márgenes y otros valores por defecto, sin embargo estos valores pueden ser diferentes según el navegador.

Normalize.css lo que hace es unificar todos los estilos predeterminados a uno, para que inicialmente se vean igual en los diferentes navegadores y a partir de ahí aplicarle otros estilos.

HTML5 Polyfills

Los polyfills son scripts que permiten ejecutar funcionalidades en navegadores que no son compatibles con ellas.  Dicho de otra forma, es una forma de emular mediante javascript funcionalidades que ese navegador no incluye de base.

Just HTML5shiv

Una de las opciones que tenemos aquí es HTML5shiv que nos permite que en navegadores antiguos (IE8 o inferior) entienda las nuevas etiquetas HTML5 y eso se consigue mediante la inclusión en el HEAD del script:
<!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\/script>')</script>
<![endif]-->

Modernizr

La otra opción que nos da Initializr es Modernizr.  Importante, Modernizr no soluciona o corrige nada como el caso de HTML5Shiv, Modernizr lo que hace es decirnos si el navegador que estamos usando soporta una determinada función o no.  Y en caso de que no la soporte, seremos nosotros los que nos encarguemos de tratarlo y solucionarlo.

Así que, si lo que queremos es una plantilla buscando compatibilidad estándar elegiremos la opción de HTML5Shiv, si nos queremos meter a tratar posibles errores de compatibilidad optaremos por Modernizr, aunque también se podría incluir HTML5Shiv para las típicas etiquetas de HTML5.

Respond

Se trata de un polyfill cuyo objetivo es hacer compatible a IE6-8 (que navegador sino) con las media queries de CSS3 de cara a un diseño responsive.

jQuery

Podemos incluir la librería JQuery 1.10.1.  Ahora bien, tenemos 2 opciones:
    - Minified: Versión comprimida. Son las mismas funcionalidades pero sin espacios para que sea más liviana de cargar, si no vas a retocarla es la mejor opción.
    - Development: Es la misma versión, sin embargo, contiene comentarios adicionales y un buen espaciado para hacerla más visible, es ideal si quieres meterte dentro del código y probar algunos cambios.  Importante, es de cara a desarrollo, no es recomendable usarla en producción ya que ocupa 3 veces más que la versión minified.
Hay que recordar que algunas opciones como el template Twitter Bootstrap ya incluyen alguna versión de JQuery.