Clicky

Buenas prácticas para una eficiente codificación HTML5

logo HTML5 en relieve wallpaper

Existen muy útiles generadores de HTML5 en línea

HTML5 se está convirtiendo en norma en términos de codificación de front-end, y como desarrollador web definitivamente se necesita saber cómo codificar sitios web en HTML5. Después de casi dos años de codificación HTML5 he compilado esta lista de mis "mejores prácticas" favoritas con la esperanza de que sea lo más útil para ti como lo es para mí.

Utiliza un generador

generador de plantillas HTML5

Cuando se construye un sitio web a menudo se comienza con una plantilla base que permite personalizarla de acuerdo a tus necesidades. En lugar de escribir todo el código HTML5 desde cero, puedes ahorrar tiempo mediante el uso de uno de los muy útiles generadores de HTML5 en línea. Su uso es definitivamente fácil: Basta completar un formulario básico para configurar las opciones deseadas, hacer clic en un botón y estará disponible una plantilla HTML5 básica para su uso.

Hay un buen montón de generadores de HTML5, pero mis favoritos son definitivamente SwitchToHTML5 y Shikiryu generator, que cuentan con más opciones.

Y si prefieres un producto listo para usar tu plantilla, el HTML5 Boilerplate es el más adecuado.

Usa una hoja de trucos

hoja de trucos para HTML5

Con las nuevas adiciones o cambios en HTML5 que se suceden con bastante frecuencia, puede llegar a ser difícil recordar todas las nuevas y diversas características. Una de las mejores herramientas para mantener un ojo en las etiquetas y las propiedades de HTML5 son, sin duda, las hojas de trucos actualizadas creadas por InMotion Hosting.

Las hojas de trucos se dividen en tres sencillas imágenes de imprimir: Etiquetas, Atributos de contenido en la cabecera y Soporte del navegador(Tags, Event Handler Content Attributes and Browser Support).

Las tres hojas de trucos se pueden descargar desde aquí.

Ten cuidado con los problemas de compatibilidad

Can I Use.com

HTML5 es una tecnología nueva. Ya se puede utilizar en este momento, pero hay que recordar que varias especificaciones no se han aplicado en algunos navegadores.

Can I Use.com es definitivamente un sitio web para tener en tus marcadores si estás codificación sitios web en HTML5. Es la herramienta más completa para saber rápidamente si un elemento se apoya en un navegador específico. CanIUse.com también contiene tablas de compatibilidad para CSS3, SVG y JavaScript.

Conoce cómo habilitar HTML5 en versiones antiguas de IE

Internet Explorer siempre han sido un dolor para los desarrolladores y diseñadores web. Estoy bastante seguro de que la mayoría de vosotros recuerda cuando en 2006 o 2007 tuvimos que perder un montón de tiempo para hacer las cosas de trabajo (casi) correctamente en IE6... Aunque las nuevas versiones de IE son mucho mejor que lo que solía ser el antiguo IE, la pesadilla con IE para el desarrollador no ha terminado todavía. De hecho, IE 8 y por debajo no entienden de HTML5 en absoluto.

La buena noticia es que un pequeño script permite habilitar HTML5 en Internet Explorer 8 en adelante. El uso de este script es muy simple, basta con pegar el siguiente código en la sección head del documento HTML5:

 <!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Otra herramienta muy útil a tener en cuenta es Modernizr, una completa biblioteca de JavaScript que ayuda a construir el sitio web HTML5 para que funcione perfectamente en todos los navegadores.

Usar Modernizr es bastante fácil. Sólo tienes que ir a esta página para especificar las propiedades HTML5/CSS3 que vayas a utilizar y, a continuación, descargar el script generado. Incluirlo en la sección <head> del documento, y ya está. Modernizr detectará qué características se pueden utilizar en el navegador del cliente y se agregarán clases a la etiqueta <html>. Si una función es compatible con el navegador, esa característica se añade por su nombre como una clase para la etiqueta. Si la función no está disponible, la clase se agrega y se antepone un "no-".

Usa correctamente los elementos

Antes de HTML5 en los sitios web se utilizaba código con un montón de elementos <div>. El mayor problema de esta técnica es que el código fuente se puede convertir rápidamente en difícil de leer. Esta es la razón por lo que HTML5 ha introducido nuevas etiquetas para ser utilizadas en lugar de la vieja y buena <div> .

Las nuevas etiquetas incluye cabecera, pie de página del artículo, sección, lado, navegación y mucho más. Un documento HTML5 básico, pero correcto semánticamente, debe ser similar al siguiente:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <header>
    ...
  </header>

  <div role="main">
    ...
  </div>

  <footer>
    ...
  </footer>
</body>
</html>

Valida tu código

w3c validator

Después de codificar una página en HTML5, la manera más rápida y eficiente para asegurarse de que el código es semánticamente correcto es, en efecto, mediante la validación de la misma. El viejo validador del W3C puede validar tus páginas HTML5 y te mostrará si has cometido algún error. ¡Una gran herramienta para el control de calidad!

Relacionado: CSS3: Buenas prácticas para diseñadores

Original: Jean-Baptiste Jung "Best practices for efficient HTML5 coding"

El Wallpaper de la cabecera fue creado por Rafael Otake.

Jesus_Caceres