HTML5 Boilerplate

Escrito por el dic 22, 2011 en Programación | 0 comentarios

HTML5 Boilerplate
{lang: 'es'}

Nos suele pasa que cuando vamos a crear una página web hay numerosas opciones que debemos tener en cuenta, que el esquema de la disposición de archivos esté bien organizado, que sea compatible con la mayoría de los navegadores, incluidos algunos que puedan estar obsoletos, buenas maneras de disponer el código, etc. Pero la mayoría de las veces terminamos, por dejadez, dejando muchas de estas en el aire, ya que la “mayoría” de los usuarios suelen estar debatidos entre solamente dos o tres navegadores y nos limitamos a probarla en estos solamente, o como seguramente nadie más verá el código de la página porque la modificaremos nosotros mismos pues también descuidamos las buenas maneras de la programación y dejar un código limpio y fácil de seguir. Para evitar todo esto estaría muy bien disponer de una plantilla que nos ahorrara gran parte de todo esto y poder ir directamente al “grano”. Ahora con html 5 y CSS3 todavía nos pasa en mayor medida, por ejemplo, hay que tener en cuenta que tenemos que insertar el mismo estilo para los diferentes navegadores repitiendo la misma definición para cada uno, siempre y cuando puedan visualizarlas. Pero gracias a un grupo de programadores que un día decidieron unirse y crear una plantilla para evitar algunos de estos problemas, nació Boilerplate, una plantilla compatible con html 5 que nos alivia de muchos de estos problemas, nos ayuda a optimizar tanto el código como la compatibilidad y el rendimiento de carga de las páginas.

Vamos a mencionar algunas de las facilidades que nos brinda esta magnífica plantilla:

  • La compatibilidad que nos brinda frente a los navegadores, incluso con el Internet Explorer 6.

  • Está preparado par trabajar con html 5.

  • Nos ayuda con la caché y la compresión para tener un mejor rendimiento.

  • Incluye optimizaciones para navegadores móviles.

  • Clases específicas para Internet Explorer.

  • Clases .no-js y .js para adaptar los estilos a los navegadores.

  • CSS adaptables a los sistemas móviles más utilizados.

  • pngfix para Internet Explorer 6.

  • Clases .clearfix y .visuallyhidden para un mejor diseño.

  • CDN de jQuery y .htaccess para html 5.

  • etc.

Pero todo lo que nos brinda Boilerplate no termina aquí. Por supuesto también pensaron en el emergente mundo de lasaplicaciones dirigidas a móviles, siguiendo la misma filosofía crearon Mobile Boilerplate que al igual que para las páginas web incluyen toda una serie de facilidades para hacernos el desarrollo mucho más fácil, algunas de las características que nos ofrece son las siguientes:

  • Las buenas prácticas de nuevo a la hora de implementar el código o el CSS.

  • Optimizaciones para Android, iOS, Symbian, Blackberry, etc.

  • Ajustes del Viewport para optimizar la visión en los dispositivos.

  • Opciones para permitir adaptar la web al dispositivo.

La manera de instalar estas plantillas, tanto para el sitio Web como para el sitio dedicado al Mobile Web, es ubicar los archivos directamente en el directorio de nuestro proyecto. La estructura del sitio y de los archivos siguen en ambos casos el mismo esquema y las mimas directrices, básicamente es poco más que copiar, pegar y comenzar a dar forma a nuestro proyecto que tenemos en mente.

Deje una respuesta.