HTML5 Frameworks. HTML5 Boilerplate y Twitter Bootstrap

HTML5 Frameworks. HTML5 Boilerplate y Twitter Bootstrap

¿Qué es un framework HTML5?

En el ámbito web, normalmente estamos más acostumbrados a asociar la palabra framework con los lenguajes de servidor. Estos frameworks, tan populares como Symfony, Ruby On Rails,… han conseguido aumentar enórmemente la calidad de los productos web.

Estos frameworks están más enfocados a una programación eficiente, centrándose demasiado en el lenguaje de servidor. Existe también una tendencia creciente, gracias a las interfaces RESTfuls a hacer webs que no tienen por qué necesariamente utilizar programación de servidor directamente.

Para cualquiera de estas dos formas, es interesante centrarnos en un framework que trabaje quizás a un nivel más importante que es el lenguaje HTML5

Vamos a numerar algunas de las mejores prácticas

  • Preparar una hoja de estilos, resenteando, normalizando y ofreciendo herramientas prácticas (helpers)
  • Directivas de optimización del servidor
  • Metainformación en el servidor (robots.txt, humans.txt, …)
  • Organización del layout HTML5
  • Estructura de carpetas para organizar la información
  • Documentación

Características básicas. HTML5 Boilerplate

Los dos frameworks comentados aquí (HTML5 Boilerplate y Twitter Bootstrap) presentan una serie de características que son muy interesantes para el desarrollo web. Vamos a explicar un poco más detalladamente algunos de estos puntos:

Normalización de hojas de estilo

Desde hace mucho tiempo ha existido la tendencia de resetear las hojas de estilo para eliminar todas las diferencias que asigna cada navegador a las etiquetas y así partir desde cero. Esta es una gran idea que ahora se ha llevado al siguiente paso: Normalizar. En lugar de resetear todos los estilos, vamos a darle uniformidad haciendo que todos los estilos sean coherentes en una ámplia gama de navegadores.

Soporte a versiones antiguas

Otro concepto interesante es el sistema que ofrecen para dar soporte a navegadores más antiguos. Esto lo hace de dos maneras:

  • Modernizr: Es una librería que facilita saber qué capacidades HTML5 soporta tu navegador para facilitar la carga de Polyfills en el caso de no soportarlo nativamente.
  • Condicionales: Mediante el uso de condicionales HTML se asignan una serie de clases a la etiqueta &t;html> para poder cambiarla desde CSS. Además, añaden una clase no-js que será reemplaza a posteriorí por js de forma que podremos saber también desde CSS si el Javascript está deshabilitado.

Pero !OJO!. Ni a nosotros, ni a los frameworks, nos gustan los navegadores antiguos. Existen por la red una ámplia gama de iniciativas como Browse Happy que anima a los usuarios a mantener actualizados sus navagadores, por temas de seguridad y rendimiento. HTML5 Boilerplate, por ejemplo, tiene un mensaje que enlaza con esta página en el caso de tener una versión de navegador arcaica. También menciona la posibilidad de Google Frame y así embeber un motor de renderizado moderno en nuestros antiguos navegadores.

Orden de carga

Para una mayor rapidez de carga de la página sugieren inlcuir todos nuestros SCRIPTs al final de la página, de forma que estos puedan cargarse a la vez que la página empieza a renderizarse y que no bloqueen la carga en el caso de que uno no pueda ser cargado. Incluso el SCRIPT de Google Analytics, el cual Google recomienda añadirlo entre las etiquetas <HEAD>. (Google lo recomienda para que la visita pueda contar incluso si el navegador no ha terminado de carga la página).

La excepción a esta regla es el caso de Modernizr. Es necesario que se cargue antes de que la página comience a renderizarse para que los nuevos elementos HTML5 sean soportados sin problemas.

Optimizando el servidor

Existen directivas .HTACCESS que permiten especificar estrategias de caché eficientes para las webs. En el caso de que nuestro servidor permita el uso de este archivo y tenga instalados una serie de módulos vamos a ser capaces de enviar nuestras páginas web comprimidas en GZIP, cachear nuestras imágenes y scripts e incrementar el rendimiento de nuestra aplicación significativamente. En el caso de que no soporte este archivo, tendremos que modificar directamente nuestros archivos de configuración en el servidor.

Twitter Bootstrap

Todas las caracteristicas anteriormente mencionadas hacen referencia al framework HTML5 Boilerplate. El otro framework que destacamos hoy, Twitter Bootstrap da una vuelta de tuerca más y se ofrece como una manera sencilla de empezar a montar el prototipo de tu página web de forma rápida y cómoda.

Twitter Bootstrap es una colección de herramientas de software libre para la creación de sitios y aplicaciones web. Contiene plantillas de diseño basadas en HTML y CSS con tipografías, formularios, botones, gráficos, barras de navegación y demás componentes de interfaz, así como extensiones opcionales de JavaScript. Es el proyecto mas popular en GitHub y es usado por la NASA y la MSNBC junto a demás organizaciones.

Además de utilizar muchos conceptos anteriormente mencionados, Twitter BootStrap ofrece herramientas de andamiaje (scaffolding) para estructurar nuestro LAYOUT de manera estática o líquida, componentes Javascript reusables tales como pasadores de imágenes, formularios, menús, migas de pan, etc. Todos realizados adoptando las mejores prácticas y permitiendo a los programadores extenderlos

También existen páginas que ofrecen plantillas (gratuitas y de pago) para utilizar estos componentes, tales como https://wrapbootstrap.com/

Una cosa muy intersante de este framework es que todos los componentes parten de hojas de estilo compiladas desde LESS. Así que, o bien cuando te descargas la última versión puedes definir una serie de variables (fuentes, colores, interlineado, …) o bien recompilar tu mismo estas hojas de estilo con algún compilador de LESS

Resumen

Gracias al uso de estos frameworks la comunidad de desarrolladores va a mejorar enormemente gracias a estandarización, uso de mejores prácticas y partir de una base sólida, testable y apoyada por una gran comunidad. Además de eso, vamos a ser capaces de montar prototipos rápidos y funcionales para poder centrárnos en lo realmente interesante que es la lógica de negocio.

Referencias

Comentarios

Comentario de Efrain - 30 de Julio de 2013 - 23:07
Excelente explicación!! Me quitó varias dudas. Gracias
Comentario de Fernando - 11 de Julio de 2014 - 19:01
Buena explicación. No he encontrado una mejor conceptualización en la red. Pero me gustaría saber si hay alguna forma de determinar en qué casos es recomendable usar uno u otro. Es decir, si el proyecto se trata de una página informativa y estática; si se trata de un portal con blog; si es una tienda en línea, etc. Habrá alguna fuente que podamos consultar en este sentido? Gracias!
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario:
Nuestra página web utiliza cookies propias y de terceros, para realizar el análisis de la navegación de los usuarios y así poder mejorar nuestros servicios. Si continúas navegando, consideramos que aceptas su uso. Puedes cambiar la configuración u obtener más información aquí