DNM+ Online
dotnetmania 2.0
Curso de programación con HTML5, CSS3 y JavaScript (II)
Comenzamos ya a trabajar con el estándar en un proceso que hemos dividido en cuatro partes fundamentales: el trabajo con las nuevas etiquetas y lo que ello implica desde el punto de vista de la Web Semántica, los nuevos conjuntos de atributos disponibles, el nuevo estándar CSS3, y finalmente, las API que están ya implementadas y aprobadas o en proceso de serlo.

Los objetivos declarados oficialmente por la W3C

Ante la situación que expusimos en el número anterior y la creciente participación y apoyo de la industria en la confección de HTML5, se organizaron múltiples grupos de trabajo con la esperanza de que la llamada “siguiente generación del lenguaje de la Web" estableciera desde un inicio unos objetivos operativos, plasmados en un borrador de trabajo actual del estándar, del cual destacan los siguientes puntos:

  1. Definir un único lenguaje llamado HTML5, que puede ser expresado en sintaxis HTML y XML.
  2. Definir los modelos detallados de procesamiento para fomentar implementaciones interoperables.
  3. Mejorar el lenguaje de marcas de los documentos.
  4. Introducir nuevas etiquetas y API para tecnologías emergentes, tales como las aplicaciones web.

El asunto es que una modificación en algo tan fundamental como el lenguaje de la Web tiene consecuencias a muy largo plazo. Debido a ello, son múltiples los aspectos que han sido abordados dentro de esta versión en relación con el nuevo conjunto de etiquetas que forman el “corpus" del estándar respecto a varios puntos de vista: lo nuevo, lo modificado, lo que se declara obsoleto, pero “conforming" (o sea, todavía utilizable), y lo se considera ausente o no recomendado.

En el apartado de no soportado, se ha tenido buen cuidado de no romper la compatibilidad hacia atrás, y en todos los casos se ha buscado que exista una alternativa que supere y/o mejore claramente la funcionalidad aportada por las opciones antiguas.

Compatibilidad hacia atrás

HTML5 se define como “compatible hacia atrás". Pero es importante en este caso tener bien claro lo que eso significa. En primer lugar, para mantener el lenguaje relativamente simple, algunos elementos y atributos no están incluidos, como veremos más adelante: cosas como los elementos de presentación visual se consideran separados del borrador y se analizan por separado bajo el apartado de “Hojas de estilo CSS".

Los navegadores, sin embargo, deberán mantener la compatibilidad con los viejos elementos y atributos, y por eso la especificación HTML5 separa claramente los requisitos que deben cumplir los navegadores de los indicados para los autores de páginas Web. Por ejemplo, los autores no deben usar los elementos isindex o plaintext, pero se solicita a los navegadores que lo soporten por compatibilidad con el contenido existente.

Obsolescencia de cara al desarrollador (elementos absent)

Una vez establecido lo anterior, el estándar declara una serie de elementos y atributos como ausentes (absent), y por lo tanto éstos no estarán ya soportados de cara a los autores. De la misma forma, se recomienda a los gestores encargados del mantenimiento de los sitios que aprovechen su labor diaria para identificar y actualizar estos elementos, y modificarlos, en lo posible, hacia las alternativas más actuales.

Sintaxis general

El estándar indica que puede utilizarse indistintamente sintaxis HTML 4 o XML para crear documentos HTML5. ¿Qué significa eso exactamente? Tanto HTML 4 como XML disponen de estructuras sintácticas bien definidas para indicar sus contenidos. Pero el tipo mime del primero es text/html, mientras que en el segundo caso es application/xhtml+xml o application/xml.

La primera instrucción de todo documento HTML5, por lo tanto, debe indicar, en una u otra sintaxis, el tipo mime. En el primer caso, estaríamos ante un código como el del listado 1, donde lo primero que puede llamar la atención es la sencillez de la declaración del tipo de documento (doctype), que en HTML5 pasa a ser simplemente la primera línea del código anterior. Otra novedad a este respecto es que HTML5 define igualmente el tipo mime text/html-sandbox, que se presenta como la opción en el caso de que el contenido no se considere de confianza.

Sin embargo, en el caso de que se trate de un documento con sintaxis XML, el mismo documento anterior tendría un aspecto similar al del listado 2, donde vemos que la cabecera es la propia de un documento XML que siga la sintaxis formal definida en el estándar, y la etiqueta <html> contiene el atributo xmlns (namespace), haciendo referencia al sitio oficial donde se encuentra la especificación “XHTML Namespace" de W3C.

Codificación de caracteres (Encoding)

La codificación de caracteres es el método que permite convertir un carácter de un lenguaje natural (alfabeto o silabario) en un símbolo de otro sistema de representación, típicamente un número, aplicando normas o reglas de codificación. Las normas ASCII y UTF-8 son ejemplos habituales de ello.

HTML5 dispone de 3 formas de especificar la codificación1: - Desde el punto de vista del transporte, utilizando la cabecera HTTP Content-Type. - Utilizar un carácter BOM (Byte Order Mark) al comienzo del fichero. Este carácter suministra una firma que establece la codificación utilizada. - Usar un elemento <meta> con un atributo charset que indique la codificación en los primeros 1.024 bytes del documento. Por ejemplo, para indicar que queremos usar codificación UTF-8 podemos usar: <meta charset="UTF-8">, en lugar del anterior:

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

Aunque esta sintaxis siga estando soportada, por las razones indicadas más arriba.

Soporte SVG

Además, la sintaxis HTML de HTML5 permite la inclusión de elementos SVG2 (Scalable Vector Graphics), que es una especificación para describir -en formato XML- gráficos vectoriales bidimensionales, tanto estáticos como animados (estos últimos con ayuda de SMIL).

SVG permite tres tipos de objetos gráficos3: - Formas gráficas de vectores (p.ej., caminos consistentes en rectas y curvas, y áreas limitadas por ellos). - Imágenes de mapa de bits /digitales. - Texto.

SVG 1.1 es una recomendación de W3C y es la versión más reciente de la especificación completa; para dispositivos móviles, existe SVG Tiny 1.2, que es igualmente una recomendación de W3C. SVG 2 está actualmente en desarrollo y agrega nuevas características de facilidad de uso para SVG, así como una integración más estrecha con HTML, CSS y el DOM.

De cara a la implementación en navegadores, W3C publicó en septiembre de 2010, en calidad de Working Draft, un documento (“An SVG Primer for Today’s Browsers")4 que está sirviendo de “documento de análisis" a varios fabricantes de navegadores.

A modo de ejemplo simple, digamos que el código del listado 3 basta para dibujar un círculo azul de 60 píxeles, que produce en Internet Explorer 9 la salida que se muestra en la figura 2.

Elementos nuevos

Los nuevos elementos (etiquetas) de HTML5 recogen muchos de los aspectos que los usuarios de todo el mundo habían apuntado y sugerido como necesarios, aportando novedades en los apartados semántico, estructural, multimedia, de formatos de entrada, etc. La lista de los elementos nuevos más significativos (la lista completa es más larga) la podemos ver en la tabla 1.

Tabla 1.

Elementos estructurales y semánticos

Los elementos estructurales son aquellos que sirven para crear el armazón de una página web. Muchas veces son elementos contenedores, pero en ocasiones también sirven para definir algunos aspectos de cómo la página debe ser interpretada y de las relaciones entre los contenidos.

Hasta ahora, con HTML 4.01, la arquitectura de las páginas se basaba principalmente en elementos <table> y <div>. En sí, estas etiquetas no ofrecen ninguna indicación acerca del contenido, ni ninguna otra pista que pudiera ayudar a los buscadores en su labor de indexación “inteligente" de las páginas. Tampoco aportan información acerca de cualquier tipo de relación semántica entre dichos elementos.

Este problema puede ser paliado en parte gracias a los nuevos elementos <section>, <article>, <aside>, <header>, <footer>, <nav> y <figure> mostrados en la tabla 1. Estos elementos ofrecen una cobertura al problema de la “semántica estructural", aunque también existen otros, como <time> o <meter>, que aportan su grano de arena en el segundo aspecto.

En la figura 3 se representa un esquema típico de colocación de elementos en un blog o sitio web personal, pero es solo uno de los miles de esquemas válidos que son posibles utilizando estos nuevos elementos y que aportan ese valor diferencial de cara a los buscadores.

A partir del próximo número comenzaremos a revisar el funcionamiento de cada uno de los nuevos elementos dentro de tales escenarios, haciendo hincapié en los problemas que resuelven respecto a las implementaciones anteriores, y comparando la implementación clásica con la recomendada actualmente.

blog comments powered by Disqus
autor
referencias