¿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.
Comentarios