Ruby (Rails), Java, JavaScript, PostgreSQL, Cloud, Ubuntu :)

Las mejores prácticas para programar en HTML5



A continuación publico una lista de algunas de las mejores prácticas para programar en HTML5, entre estás Usar un generador de código HTML5, usar una cheat sheet o hoja de trucos como guía en tus desarrollos, revisar la compatibilidad de tus aplicaciones, como habilitar HTML5 en versiones viejas de Internet Explorer IE6, IE7 y IE8, utilizar correctamente los elementos HTML5 y por último validar tu código.

Usa un generador

Cuando se construye un sitio web, a menudo comienzan con una plantilla de base que se puede adaptar a sus necesidades. En lugar de escribir todo el código HTML5 desde el principio (ideal cuando recién estamos aprendiéndolo), puedes ahorrar tiempo mediante el uso de algunos generadores HTML5 muy útiles, disponibles en linea. Su uso es bastante fácil: se llena un formulario básico para configurar las opciones deseadas, haces clic en un botón y listo, una plantilla HTML5 básica ha sido generada para ti. Hay un montón de generadores HTML5, en particular recomiendo SwitchToHTML5 Y Shikiryu generator, que tiene algunas opciones más que el primero. Y si prefieres un producto más completo y listo para usar, HTML5 Boilerplate es lo que necesitas.

   

Usa una hoja de trucos (cheat sheet)

Con las nuevas adiciones o cambios en HTML5 que suceden con bastante frecuencia, puede llegar a ser difícil recordar todas las características nuevas y variadas. Una de las mejores herramientas para mantener a la vista las etiquetas de HTML5 y sus propiedades, es sin duda los cheat sheets creados por InMotion Hosting. Las cheat sheets o hojas de trucos se dividen en tres sencillas imagenes imprimibles: Etiquetas, Atribibutos de controladores de eventos y soporte de navegadores. Las tres ojas de trucos las puedes descargar aquí.

 

Ten cuidado con los asuntos de compatibilidad

HTML5 es una nueva tecnología, que ya se puede usar en los principales navegadores del mercado en sus versiones más recientes, pero hay que recordar que varias especificaciones no han sido implementadas en algunos navegadores. CanIUse.com es definitivamente un sitio web para tener en cuenta si estas desarrollando páginas web en HTML5. Es la herramienta más completa para conocer rápidamente si un elemento cuenta con soporto en un navegador especifico. 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 ha sido un dolor de cabeza para los desarrolladores web y diseñadores. Estoy bastante seguro que la mayoría de los lectores deben tener experiencias de hacer que una pagina web funcione correctamente en IE6 y IE7... a pesar que las nuevas versiones de IE son mucho mejores de lo que solía ser, la pesadilla del desarrollador no ha terminado aún. De hecho, IE8 y las versiones anteriores no entienden absolutamente nada de HTML5. La buena noticia es que un pequeño script permite habilitar HTML5 en Internet Explorer 8 y versiones anteriores. El uso del script es muy simple, basta con pegar el siguiente código en la sección <head> de nuestros documentos en HTML5:

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

Otra herramienta muy útil para tener en cuenta es Modernizr, una completa biblioteca JavaScript que te ayudará a crear páginas web HTML5 que funcionen perfectamente en todos los navegadores. Usar Modernizr es bastante fácil. Sólo tienes que ir a la página siguiente, para especificar las propiedades HTML5/CSS3 que vayas a utilizar, a continuación, descarga el script generado. Incluyelo en la cabecera <head> de tu documento, y ya está. Modernizr detectará las característica que se puedan utilizar en el navegador del cliente y agregará cases en la etiqueta <html>. Si una función es compatible con el navegador, esa característica se añade por con su nombre y se adiere a la etiqueta para sustituir la funcionalidad. Si la función no está disponible, la clase se agrega y se le antepone un “no-”.

Utilice elementos correctamente

Antes de HTML5, soliamos codificar los sitios web usando muchos elementos <div>. El mayor problema con ésta técnica es, sin duda, que el código fuente se pude hacer dificil de leer. Es por eso que HTML5 introdujo nuevas etiquetas para usarse en lugar de la antigua <div>. Estas nuevas etiquetas incluyen header (cabecera), footer (pie de página), article (artículo), section (sección), aside (a un lado, aparte), nav (navegación) y muchas otrás. Un documento HTML5 básico debe tener el siguiente aspecto:

<!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

Después de codificar tu pagina en HTML5, la forma más rápida y más eficaz para asegurarte de que tu código es semánticamente correcto es, en efecto mediante un proceso de validación. Un buen viejo amigo, el W3C Validator puede validar tus páginas HTML5 y te mostrará si haz cometido algún error. Es una gran herramienta para el control de calidad.