Avanzando con tecnologías para Web: HTML5

Como bien saben todos los que trabajamos en computación, siempre hay que estar actualizándose. Ahora nos llegó el momento de ir analizando el standard HTML5 y tratar de ir sacando el mayor provecho posible. Los distintos standares que fueron sucediéndose  en programación Web son los vemos en este  resúmen:

• 1991 HTML
• 1994 HTML 2
• 1996 CSS 1 + JavaScript
• 1997 HTML 4
• 1998 CSS 2
• 2000 XHTML 1
• 2002 Tableless Web Design
• 2005 AJAX
• 2009 HTML 5

HTML 5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML. HTML 5 especifica dos variantes de sintaxis para HTML: un «clásico» HTML (text/html), la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5 que deberá ser servida como XML (XHTML) (application/xhtml+xml).^[1] Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo.

El desarrollo de este código es regulado por el Consorcio W3C.

Buenas prácticas para tener webs mas rápidas usando el standard html5.

Consejo 1: Usar web storage en vez de cookies.

Aunque las cookies se han utilizado por años para rastrear usarios, éstas tienen serias desventajas.
Al principal es que cada parte de código de la cookie es adicionada a encabezado HTTP. Esto puede terminar impactando de una manera muy mala en el tiempo de respuesta, especialmente durante XHRs. ( interfaz empleada para realizar peticiones HTTP y HTTPS a servidores Web)

Entonces la mejor forma de reducir este problema es reducir el tamaño de cada cookie. En html5, podemos hacer algo más, utilizar sessionStorage y localStorage en lugar de las cookies.

Estos dos objetos, pueden se utilizados para validar la persistencia del lado del usuario a través de esa sesión, ó indefinidamente. Sus datos no se trasmiten al servidor con cada http request. Ellos utilizarán una API para manejar estos datos.

// if localStorage is present, use that
if ((‘localStorage’ in window) && window.localStorage !== null){

// easy object property API
localStorage.wishlist = ‘[«Unicorn»,»Narwhal»,»Deathbear»]’;

} else {

// without sessionStorage we’ll have to use a far-future cookie
//   with document.cookie’s awkward API :(
var date = new Date();
date.setTime(date.getTime()+(365*24*60*60*1000));
var expires = date.toGMTString();
var cookiestr = ‘wishlist=[«Unicorn»,»Narwhal»,»Deathbear»];’+
‘ expires=’+expires+’; path=/’;
document.cookie = cookiestr;
}

Consejo 2: Utilizar CSS transitions en vez de animaciones de Javascript

CSS transitions te dará una atractivo visual entre dos estados de objetos/textos. Muchos de los estilos de propiedades pueden ser modificados para simular una transición, como el agregado de sobra al texto, la posición, el color de fondo, ó el color del texto. Puedes utilizar estas transiciones cuando pasas tu mouse sobre un objeto, con el ahorro de carga de imágenes, etc. Estas transiciones son muy poderosas y pueden disparar procesos, y sumarse a cualquier objeto utilizando clases.

div.box {
left: 40px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
}
div.box.totheleft { left: 0px; }
div.box.totheright { left: 80px; }

[fuente: Wikipedia ; HTML5Rocks ]