{"id":2299,"date":"2012-04-23T09:42:49","date_gmt":"2012-04-23T14:12:49","guid":{"rendered":"https:\/\/skatox.com\/blog\/?p=2299"},"modified":"2019-08-03T11:54:09","modified_gmt":"2019-08-03T15:54:09","slug":"html5-%e2%98%85-boilerplate-una-plantilla-para-crear-nuestras-paginas","status":"publish","type":"post","link":"https:\/\/skatox.com\/blog\/2012\/04\/23\/html5-%e2%98%85-boilerplate-una-plantilla-para-crear-nuestras-paginas\/","title":{"rendered":"HTML5 \u2605 Boilerplate una plantilla para crear nuestras p\u00e1ginas"},"content":{"rendered":"

Esta tecnolog\u00eda la descubr\u00ed leyendo el blog de Paul Irish<\/a>, al principio no la entend\u00ed y pensaba que era un framework para desarrollar p\u00e1ginas web pero luego de ver varios tutoriales comprend\u00ed que realmente es una plantilla en HTML5 que incluye (en mi opini\u00f3n) las mejores herramientas de detecci\u00f3n de caracter\u00edsticas del navegador, compresi\u00f3n de c\u00f3digo HTML, CSS y Javascript; m\u00e9todos para acelerar la carga de librer\u00edas de Javascript, entre otros.<\/p>\n

\u00bfPor qu\u00e9 usar Boilerplate?<\/strong><\/p>\n

Si eres desarrollador web (frontend) especializado en la parte visual debes usar esta herramienta para tus proyectos, la idea es ofrecer una plantilla o p\u00e1gina web usando HTML5 sin perder compatibilidad con navegadores antiguos que no lo soportan (o solo parcialmente). Adem\u00e1s utiliza las mejores pr\u00e1cticas e incluye las mejores herramientas para tener una buena p\u00e1gina como: utiliza Modernizr para detectar las funcionalidades soportadas por los navegadores y aplicar solo ha ellos ciertos efectos CSS3 por dar un ejemplo, no reinicia los estilos de los navegadores sino que los normaliza, incluye compatibilidad con la mayor\u00eda de servidores web para aplicar t\u00e9cnicas de compresi\u00f3n de datos y peque\u00f1as reglas de seguridad, compatibilidad con dispositivos m\u00f3viles, herramientas para comprimir el c\u00f3digo Javascript entre otros.<\/p>\n

Con esto te ahorras mucho tiempo en implementar todas estas cosas, ademas garantiza tener una p\u00e1ginas que usa lo mejor de la tecnolog\u00eda actual sin romper compatibilidad con los navegadores antiguos. Cabe destacar que es solo para crear la plantilla inicial, es una base para ir agregando tu markup, librer\u00edas, reglas CSS, etc. Si utilizas un CMS puedes hacer tu propia plantilla o buscar en Internet plantillas ya optimizadas con Boilerplate.<\/p>\n

Mi experiencia<\/strong><\/p>\n

Utilic\u00e9 Boilerplate para MiguelUseche.com<\/a> (mi sitio profesional) y me ayud\u00f3 a realizar una p\u00e1gina que carga en poco tiempo, funciona en casi todos los navegadores, me ahorro tiempo al dar soporte a Internet Explorer 6 y 7, y la adaptaci\u00f3n a dispositivos m\u00f3viles requiri\u00f3 poco trabajo. Obviamente no todo se hizo autom\u00e1tico, sino su base de c\u00f3digo me permiti\u00f3 ahorrar mucho tiempo al dar soporte a distintos navegadores.<\/p>\n

Boilerplate funciona con una plantilla base, la cual vamos agregando nuestro markup y vamos creando nuestra p\u00e1gina\/aplicaci\u00f3n web. Luego a trav\u00e9s de unos scripts \u00abconstruimos\u00bb el sitio optimizado el cual se guarda en la carpeta build<\/strong>, durante este proceso, se comprimen las reglas CSS, el c\u00f3digo HTML, los archivos de Javascript, los une si est\u00e1n separados en varios archivos, optimiza las im\u00e1genes para ser vistas en la web, actualiza las rutas para incluir estos scripts y mas. Todo lo que debemos hacer es configurar un archivo donde le indicamos todo lo que queremos hacer.<\/p>\n

Conclusi\u00f3n<\/strong><\/p>\n

Si quieres hacer un sitio con HTML5 y realizar ciertas acciones con los navegadores que no lo soporten, utiliza Boilerplate. Con todas la base ya optimizada que trae permite crear buenos sitios en menos tiempo, y si son como yo: desarrolladores web especializados en la programaci\u00f3n del sitio y no en la parte visual; les ayudar\u00e1 mucho esta tecnolog\u00eda al realizar cosas que no comprendemos mucho. Sin embargo, si eres desarrollador front-end supongo que te ayudar\u00e1 a ahorrar tiempo y te ofrece configuraci\u00f3n para adaptarse a tus requisitos o forma de trabajar.<\/p>\n

Si quieres comenzar a utilizar esta tecnolog\u00eda pueden ver el siguiente video que est\u00e1 en ingl\u00e9s:<\/p>\n

<\/div>
An introduction to HTML5 Boilerplate v4.0<\/div><\/div>
<\/div>
<\/div>
<\/div><\/div><\/div>