ZedBlog » XHTML http://blog.zedplan.com Mon, 31 May 2010 14:57:21 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 ¿Ya podemos usar HTML 5? http://blog.zedplan.com/ya-podemos-usar-html-5/61 http://blog.zedplan.com/ya-podemos-usar-html-5/61#comments Mon, 15 Jun 2009 16:00:33 +0000 Demián Rodríguez http://blog.zedplan.com/?p=61 Vamos a comentar algunas de las nuevas características de este nuevo lenguaje que pretende reemplazar al ya decrépito HTML 4.01. Esta nueva revisión del lenguaje nació hace unos años bajo el nombre Web Applications 1.0 y continúa siendo desarrollado activamente por el grupo WHATWG como HTML5, y además su otra variante XHTML5. Se dice que estará completo para el 2012, pero la mayoría de los navegadores actuales ya implementan gran parte de las nuevas características del lenguaje.

Algunas de las mejoras que nos provee HTML5 son las siguientes:

  • Nuevos tags como <header>, <footer>, <section>, etc.  En su mayoría son reemplazos semánticos para los bloques genéricos como <div> o <span>.
  • La incorporación de Web Forms 2.0, una actualización para el manejo de formularios que agrega nuevos tipos de datos y facilidad para la validación de campos.
  • Se eliminaron elementos como <font> y <center>, cuya funcionalidad puede ser reemplazada por CSS.
  • Grandes cambios en la API del DOM, incluyendo soporte para dibujar en 2D usando el nuevo elemento <canvas>, soporte para aplicaciones offline, Drag & Drop, controles de reproducción multimedia para usar con los elementos <audio> y <video>, manejo avanzado del historial y mucho mas.

HTML5 nos dá la opción de crear el documento usando la vieja sintaxis compatible con HTML 4 u optar por un documento XML.

Ejemplo para la primera opción:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Documento de ejemplo</title>
  </head>
  <body>
    <p><img src="/images/logo.png" alt="" /> Hola mundo</p>
  </body>
</html>

Datos importantes:

  • El documento se sirve como Content-Type: text/html
  • El DOCTYPE  es requerido y no necesita referirse a ningún DTD.
  • Nueva forma de especificar el juego de caracteres mediante el atributo charset del <meta>.
  • Por cuestiones de compatibilidad, se permite cerrar los tags vacíos como <img>, <input> o <br> con una barra, usando la misma sintaxis que XML.
  • Ventaja: compatible con navegadores que no soportan HTML5

Ejemplo conforme a la sintaxis XML:

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Documento de ejemplo</title>
  </head>
  <body>
    <p><img src="/images/logo.png" alt="" /> Hola mundo</p>
  </body>
</html>

Datos importantes:

  • El documento se sirve como Content-Type: application/xhtml+xml
  • El DOCTYPE  es opcional.
  • Se requiere definir el namespace como http://www.w3.org/1999/xhtml
  • Alcanza con especificar el charset en la definición del XML.
  • Ventaja: obliga a escribir código XML válido.

Uno de los grandes cambios que debemos tener en cuenta es la forma en que se sirve el documento. Hasta ahora estábamos acostumbrados a enviarle al navegador un documento XHTML como text/html por problemas con navegadores defectuosos como Internet Explorer ciertos navegadores. Pero esto hará que el navegador interprete erróneamente el documento XML como HTML.

Lo que no queda del todo claro es como va a ser la compatibilidad hacia atrás. No solo tendremos que lidiar con navegadores “prehistóricos” por un largo tiempo, sino que además se han introducido cambios en el significado de varios elementos como <strong>, <small>, <b>, <i>, que implicaría tener que reescribir parte de la estructura del documento.

Adicionalmente, ¿qué sucede si servimos un documento en HTML5 en un browser que no lo soporta? ¿Cómo se interpretan los nuevos elementos?
Uno de los problemas encontrados en Internet Explorer para todas sus versiones es la incapacidad de renderizar y darle estilo a los elementos desconocidos. Para esto se logró hallar un hack, el cual consiste en crear el elemento dińamicamente usando el método del DOM document.createElement() en el head del documento.

Les dejo algunos enlaces relevantes (en inglés):

Share/Bookmark]]> http://blog.zedplan.com/ya-podemos-usar-html-5/61/feed 2