Web

Introdúcete en HTML5 (1/2)

Sin duda el diseño Internet crece y avanza día a día y hay que destacar que en los últimos tiempos lo está haciendo bajo la triada HTML5, CSS3 y Javascript.

Para mí el concepto de HTML5 no es solamente la quinta revisión de HTML sino que es un ecosistema que cada vez se ve más en los nuevos diseños relegando el HTML4 y XHTML a otro plano y que obliga, sí o sí, a las empresas plantearse el rediseño de su web para aprovechar la potencia de este ecosistema y a los usuarios a ir abandonando navegadores ya obsoletos que no benefician en nada al mundo del desarrollo.

El WHATWG y el W3C

El WHATWG (Web Hypertext Application Technology Working Group) fue fundado por miembros de Apple, Mozilla y Opera preocupados por la falta de iniciativa por parte del W3C en el desarrollo de HTML. Este último se encarga de realizar recomendaciones y crear estandares web para que ninguna compañía esté por encima de otra.

Como desarrolladores hay que saber que por parte de Apple, Mozilla y Opera se proponen mejoras al W3C y este las aprueba, esta relación hace que sea mal vista aquella tecnología cerrada o propietaria.

Actualmente con esta página web se pueden ver todas las especificaciones de HTML5 y los navegadores que soportan tales especificaciones, es muy importante estar al día de estadísticas de uso de navegadores para orientar el desarrollo hacia unos navegadores y otros.

¿Y qué ha cambiado?

El DOCTYPE

Me da vergüenza reconocerlo, pero cuando he tenido que empezar un documento HTML4 o XHTML siempre tengo la chuleta a mano para introducir el DOCTYPE del estilo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
        "http://www.w3.org/TR/html4/frameset.dtd">

Ahora y gracias a lo definido como The Living Standard por el WHATWG lo tenemos mucho más simple y fácil de recordar.

<!doctype html>

Podemos ponerlo en mayúsculas o minúsculas, yo prefiero escribirlo todo en minúsculas.

Definición del conjunto de caracteres

Antes sí que es verdad que se podía recordar, pero seguía siendo una ristra de palabras.

<meta http-equiv="Content-type" content="text/html;charset=UTF-8">

Lo tenemos de nuevo mucho más simple.

<meta charset="utf-8">

Hojas de estilo y scripts

Ya no es necesario el atributo type en las declaraciones de las hojas de estilo ni de los scripts.

Descarga asíncrona de los scripts

Por defecto los scripts se ejecutan en orden secuencial según aparecen en el documento html, ahora la etiqueta script admite el atributo async que con su mera presencia hace que el script se ejecute nada más esté descargado que puede no tiene que coincidir con el orden de inclusión.

Etiquetas semánticas

HTML5 incluye una serie de etiquetas semánticas que hay navegadores que no incluyen, por ejemplo Internet Explorer <= 8 ignorarán los elementos que no reconozcan por lo que es importante introducir el script HTML5 Shiv.

Por favor dejad de usar versiones antiguas de Internet Explorer.

Reseteo de los estilos HTML

Los navegadores renderizan los elementos que no tienen estilo CSS de forma diferente por lo que es bueno normalizar esta renderización. Para ello se unsa un CSS reset.

Es necesario utilizar algún CSS Reset para HTML5 pues los antiguos ignoran elementos del nuevo estándar, se recomienda Normalize.css de Nicolas Gallaguer.

Hasta aquí la primera parte de la introducción a HTML5 en la que hemos tratado algunas de las nuevas características que introduce. En la próxima entrada sobre HTML5 veremos algunas de las nuevas etiquetas semánticas.

Referencias.

(Visited 161 times, 1 visits today)
Related posts
Web

Instapage, landing pages efectivas

Web

Introdúcete en HTML5. Reorganizando el sitio (2/2)

Web

¿Cómo elijo mi hosting?

Web

PHPNuke. Aquellos maravillosos años

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Si continuas utilizando este sitio, aceptas el uso de las cookies. Más información

Las opciones de cookie en este sitio web están configuradas para "permitir cookies" para ofrecerte una mejor experiéncia de navegación. Si sigues utilizando este sitio web sin cambiar tus opciones o haces clic en "Aceptar" estarás consintiendo las cookies de este sitio.

Cerrar