Do not speak Spanish? Read this post in English.

Sábado, 19 d enero d 2013.

Aprende WPO con la documentación de HTML5 Boilerplate

Mañana de sábado, primeras horas del día, buen momento para "cotillear" entre proyectos abiertos y todos esos temas que siempre tienes que mirar y nunca te da tiempo.

Esta mañana le ha tocado a Boilerplate. El que es, junto con Bootsrap uno de los frameworks html5 más extendidos por la web. Estos frameworks no son otra cosa que un conjunto de soluciones a los problemas más comunes al desarrollar el front de nuestras webs (lease HTML5 + CSS3 + Nuevas Funcionalidades JS + Responsive Design + Otros detalles).

El caso de Boilerplate, sea o no la solución final a usar en nuestras webs, esconde muchisimas lecciones de desarrollo de fronts optimizados. Solo acercándonos un poco a él podemos sacar muchas buenas lecciones sobre como mejorar la velocidad de carga de nuestras webs. Trucos geniales y explicaciones que te hacen pensar...

Siempre ando buscando una solución que me pueda facilicitar el trabajo de desarrollar una nueva web. Pero la realidad es que todos estos frameworks suelen pecar de muchas partes innecesarias que además se unen con un sistema que evita manejar css, y por lo tanto te obliga a hacer maquetas muy poco semánticas. Me gusta el SEO y por lo tanto evito todas estas "ayudas" que llenan de porquería tus proyectos.

En este caso la sorpresa ha venido sobretodo al leer la documentación del proyecto. Es lo bueno de Boilerplate: no se trata de un proyecto que tengas que usar en su totalidad, sino más bien un conjunto de buenas costumbres que unen un en un proyecto para darte "la web perfecta" (según su visión, claro) ya montada desde un principio y que trabajes a partir de ahí. Como siempre, encontraremos cosas que nos gusten y cosas que no. O simplemente cosas que por nuestro sistema de programación o CMS no tienen cabida. Sin embargo esta bien montado y lo mejor es que está muy bien documentado, con unas explicaciones que no solo cubren lo que ves, sino como se ha llegado a la conclusión de que esa era una buena solución para nuestras webs.

En definitiva, la documentación de Boilerplate es una auténtica joya:

Merece realmente el tiempo perdido en leerla aunque nunca lleguemos a usar el proyecto. Sobretodo si como la mayoría de los desarrolladores actuales, estas algo metido en temas de WPO (Web Performance Optimization) y por lo tanto te preocupa hacer desarrollos cada vez con una carga más ligera y más rápida y saturando lo mínimo posible el navegador.

Con una lectura detallada aprenderás cosas como...

  • Algunas cabeceras y la importancia de su orden
  • Tratar con versiones de IE de forma eficiente (aunque en la última versión se han cargado los condicionales para IE6 e IE7)
  • Uso de clases CSS globales para marcar navegadores y navegadores sin JS
  • Viewport sencillo para diseño responsive
  • Acortar el código de Analytics
  • Que cargar al principio y final del documento
  • Uso de mediaQueries e ideas para tu CSS base y sus versiones imprimibles
  • Un esquema muy válido para incluir tus javascripts de forma resumida
  • Opciones para ganar velocidad en el .htaccess: Uso o no de ETags, Gzip, Caché y algunas redirecciones para no duplicar contenido
  • Uso del XML para declarar llamadas entre dominios
  • Y algunos detalles de configuración en servidores

No se trata de que todo sea nuevo, ni mucho menos. Pero seguro que hay algún detalle que no conocías. De hecho no es una documentación especialmente larga. Pero mientras la leía me ha parecido estar recibiendo una auténtica clase de WPO, ojalá todas las documentaciones llegasen a este "por qué" al que llega Boilerplate. Te da mucha confianza... dan ganas hasta de bajárselo e intentar montar un proyecto con él.

Temas Relacionados: Enlaces maquetacion programacion

Autor:

Anímate y deja tu comentario