HTML5 Boilerplate

HTML5 Boilerplate ayuda a los diseñadores y desarrolladores a empezar con un proyecto web siguiendo los estándares HTML5 en forma de una plantilla front-end profesional que permite crear un sitio de manera rápida, robusta y adaptable. Este proyecto es de código abierto y está creado por Paul Irish y Divya Manian aunque actualmente más de 100 desarrolladores aportan al mismo.

HTML5 Boilerplate incluye todo lo necesario para comenzar a desarrollar un sitio:

Guías para:

  • HTML
  • CSS
  • JavaScript
  • Configuración para Apache (.htaccess), etc
  • Modernizr para detectar si los navegadores poseen soporte para HTML5 y CSS3

 

Después de descargar la última versión del proyecto hay que establecer la estructura básica del sitio, la cual va a ser algo como esto:

La carpeta “css” contendrá todos los archivos de hojas de estilo que utilice el sitio. HTML5 Boilerplate ya incluye algunos para facilitar el desarrollo:

  • normalize.css: un archivo que hace que todos los navegadores muestren todos los elementos de una forma más consistente.
  • estilos por defecto
  • clases helpers:

# .ir para reemplazar un elemento con una imagen

  1. .hidden para ocultar elementos (incluso de lectores de pantalla)
  2. .visuallyhidden para ocultar elementos de navegadores
  3. .invisible para ocultar elementos sin afectar al layout
  4. .clearfix para que un elemento contenga a sus elementos hijos que poseen float

* media queries: ayuda a desarrollar con el enfoque “Mobile First” y Diseño Responsivo

  • estilos para impresión: se eliminan los fondos, el texto se establece en negro, se elimina text-shadow, etc.

La carpeta “doc” incluye toda la documentación del proyecto y puede servir como ubicación para la documentación de tu proyecto. La carpeta “js” contiene todos los archivos de JavaScript:

  • main.js: este archivo puede usarse para contener o referenciar el código JavaScript de tu sitio.
  • plugins.js: en este archivo se pueden poner los plugins de jQuery u otros scripts de terceros.
  • La carpeta “vendor” se utiliza para guardar las librerías de terceros. La misma ya incluye las versiones “minified” de jQuery y Modernizr.
  • El archivo .htaccess incluye las configuraciones por defecto para el servidor Apache. Si utilizás otro servidor que no sea Apache, podés encontrar las configuraciones en el siguiente enlace: https://github.com/h5bp/server-configs/blob/master/README.md
  • El archivo “404.html” lo podemos utilizar cuando un visitante solicita una página que no existe en nuestro servidor.
  • “index.html” es el esqueleto por defecto de una página HTML. Posee el enlace a los archivos CSS y JavaScript así como también a Google Analytics.
  • En el archivo “humans.txt” incluiremos todas las personas que trabajaron en el proyecto.
  • En “robots.txt” se incluyen las páginas que no queremos que los motores de búsqueda indexen a sus buscadores.
  • “crossdomain.xml” es una plantilla para trabajar con request cross-domain. Para leer más sobre esto, te dejo el siguiente enlace: http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html
  • el archivo “favicon.ico” es el que se muestra en las pestañas de los navegadores junto con el título de la página, podemos modificarlo a nuestro gusto e incluso bajarnos una plantilla psd (Photoshop).

También cuenta con Initializr. Un generador de plantillas que nos ayuda a comenzar un proyecto nuevo utilizando HTML5 Boilerplate como base. Nosotros indicamos con qué características queremos empezar y nos genera un paquete con todos los archivos necesarios.

HTML5 Boilerplate es un excelente recurso para comenzar todos los proyectos nuevos, obteniendo un esqueleto que hará que las páginas funcionen mejor en navegadores de escritorio, tablets y smartphones. http://www.initializr.com/ http://html5boilerplate.com/

 

facebook HTML5 Boilerplatetwitter HTML5 Boilerplategoogle HTML5 Boilerplatediggit HTML5 Boilerplatepinterest HTML5 Boilerplatelinkedin HTML5 Boilerplateprint HTML5 Boilerplateemail HTML5 BoilerplateSi te gusto, comparte el articulo.

Artículos Relacionados

Agregar comentario


*

Recibe nuestro newsletter

Suscribete a nuestro newsletter y mantente informado con nuestros últimos artículos, noticias y más. Todo completamente gratis.