XHTML 2.0 Explicado
Aunque XHTML 2.0 no esta listo todavía para el uso general, entender como los cambios afectaran la forma en que escribirás tu código serán la llave para una transición suave. Lleno de integración de XForms, separación de contenido y funciones entre otras características, XHTML 2.0 promete revolucionar la Web cuando sea aprovado.
IntroducciónLas versiones previas de XHTML, XHTML 1.1 y 1.0, fueron hechas para ser compatibles con HTML 4.1. El problema con esto es que se deja un monton de información de presentación en el DTD. Usando < b > dices que quieres cierta parte del texto en negrillas. Sin embargo a idea de XHTML es separar el contenido y el formato.
Por ello, todos los aspectos de presentación de XHTML han desaparecido por completo en la nueva versión 2.0. No hay un DTD "Transitional" o "Frameset", ambos conceptos desaparecen (Aunque los frames se pueden seguir usando con XFrames, lo cual no sera discutido en este artículo). XHTML no incluirá nada de formato, dejando todo definido por medio de CSS.
XHTML 2.0 No será compatible con versiones anteriores, y hasta ahora ningun navegador lo soporta. Sin embargo muchos lo haran en el futuro y este es el futuro de la web; aquí es donde comienza. Incluso ahora, una página XHTML 2.0 puede ser rendereada en todos los navegadores adecuadamente con algunos trucos de CSS, por ello estos no quedaran obsoletos.
Este artículo cubrira las bases de XHTML 2.0 y porqué es importante. Se espera que el lector se haya familizarizado con XHTML 1.0/1.1. XHTML 2.0 no ha sido finalizado todavia. (Actualmente esta en borrador). Tenga en mente que pueden haber cambios desde ahora hasta la finalización de XHTML 2.0.
Haciendo el CambioEn XHTML 2.0, un monton de etiquetas han sido removidas del DTD y otras han sido introducidas. No habra más < img >, < b >, < i >, o , como tampoco otas. De nuevo, la idea es separar el contenido y el formato completamente. Desde aquí iremos con lo basico.
¿No habrán etiquetas < img >?La etiqueta < object > ha reemplazado ya la etiqueta < applet > y otras similares, pero ahora reemplazará la etiqueta < img > también. En ves de...
<img src = "someimage.png" alt = "Descripcion"/>
... ahora será ...
<object data="someimage.png" type="image/png">Descripción</object>
Líneas, no saltos de líneasla etiqueta < br/> desaparece en favor de la nueva etiqueta < line>. Esta se usa algo así: (Nótese que la primera línea esta de la forma anterior y la siguiente esta de la nueva manera)
en XHTML 1.0:
Mary tiene una pequeña<br />oveja
en XHTML 2.0:
<line>Marry tiene una pequeña</line>oveja
La razón de esto es que ahora puedes usar CSS para cambiar la forma en que la etiqueta < line > funciona. También, XHTML 2.0 también tendrá pocas etiquetas que se cierran solas:
Ahora será posible vincular páginas sin utilizar la etiqueta < a >. Basicamente, aquí esta la vieja y la nueva forma de hacerlo:
en XHTML 1.0:
<h1><a href = "page2.html">Link</a ></h1 >
en XHTML 2.0:
<h1 href = "page2.html">Link</h1 >
Eso hace que se mire más limpio, tiene sentido, y también te ahorrará tiempo el hacer todos esos vínculos.
Preparate para los nuevos tipos de listasLa etiqueta < nl > aparece y representa las nuevas listas de navecación. Las lista de navegación funcionan bien porque los usuarios las seleccionan para poder mirar mas, funcionan como un menú. Ellas tienen una etiqueta < label > que define el encabezado de la lista de navecación. Algo similar a lo siguiente podría ser una lista:
<nl>
<label>Encabezado</label>
<li href = "#Seccion1">Seccion1</li>
<li href = "#Seccion2">Seccion2</li>
</nl>
Esto no es lo único nuevo en las listas. La definicion de las listas tiene un encabezado e ítems debajo de estos. Se definen cuatro etiquetas (dl, dd, dt y di) pero es bastante simple. Todo se encuentra en la etiqueta < dl > y tienes un < di > para cada sección. el < dt > contiene el contenido incluido (el encabezado) y < dd > contiene un bloque de contenido. Algo como los siguiente:
<dl>
<di>
<dt>Encabezado 1</dt>
<dd>Contenido Contenido Contenido</dd>
</di>
<di>
<dt>Encabezado 2</dt>
<dd>Contenido Contenido Contenido</dd>
</di>
</dl>
Secciones y EncabezadosLas viejas < h1 > hasta < h6 > se mantienen en XHTML 2.0. Sin embargo, hay una característica similar orientada a reemplazarla. Basicamente, uno solo define una sección que tiene su encabezado, algo entre esas lineas puede hacerse.
<section>
<h>Heading</h>
<section>
<h>First Point Heading</h>
<p>Content</p>
</section>
<section>
<h>Second Point Heading</h>
<p>Content</p>
</section>
</section>
La razón de todos esto es agregar cierto nivel de estructura a todo el documento. Todo esta colocado de una manera simple y jerarquica, los buscadores pueden obtener la información fácilmente, y los browsers no visuales pueden hacer que el usuario no vidente accese más facilmente la página ya que no tienen que buscar el encabezado < h >
El nuevo elemento < p >A diferencia de las viejas versiones de XHTML, en XHTML 2.0 el elemento < p > contiene elementos a nivel de bloque. (No se pueden encadenar elementos tampoco) esto signfica que es posible poner listas en un elemento < p >, tablas y otros elementos cortos. El elemento < p > será entonces una "idea conceptual de párrafo" de acuerdo con w3c los creadores de XHTML.
Olvidate de < hr /> presentamos < separator />No es un gran cambio como el de las listas, pero < hr /> ha sido reemplazado con < separator /> con la idea de definir más claramente su propósito. Este colocará un separador (usualmente una línea horizontal) en el documento.
XForms: El futuro de los formulariosXForms te dan el control total de la entrada del lado de usuario y son muy poderosas. XForms son bastante complicadas, y cubrirlas completamente esta fuera de los objetivos de este artículo. Sin embargo la idea es que ellas usan XML. Todo esta en la etiqueta . El formulario define etiquetas genéricas que son expecificadas por xHTML. Algo mas o menos similar a esto se tendrá que hacer:
<xforms:model>
<xforms:instance>
<nombre />
<edad />
<sexo />
</xforms:instance>
<xforms:submission action = "post.php" method = "post" />
</xforms:model>
En XHTML regular tu defines lo que quieras:
<input ref = "Nombre">
<label>Nombre:
</input>
<input ref = "Edad">
<label>Edad:
</input>
<input ref = "Sexo">
<label>Sexo:
</input>
<submit submission = "enviar">
<label>Enviar</label>
</submit>
Se pueden hacer cosas mas complicadas también, pero todo eso esta fuera de este artículo. Si estas realmente interesado en usar XForms, echale un ojo a las especificaciones:
http://www.w3.org/TR/xformsSolo estamos rascando por encima lo que XHTML 2.0 puede hacer. Desde que esta completamente integrado con XML, puedes definir tus propios espacios de nombres, el poder de XHTML 2.0 es enorme.
La situación MIME
¿Qué es un tipo MIME?Un tipo MIME es usado para especificar que tipo de archivo es enviado hasta el browser desde el server. El le dice a la computadora que tipo de documento es de tal manera que se puede elejir la aplicación apropieda para abrir el documento. Por ejemplo "text/html" es un archivo HTML e "image/png" es una imagen PNG.
XHTML y los tipos MIME
Cuando escribimios XHTML en el pasado, era posibe usar el tipo mime "text/html" si lo deseabas. Esto significaba que el browser lo interpretaría como HTML, no realmente como XHTML. Cuando un browser esta interpretando XHTML y no esta bien formateado, se supone que debe lanzar un mensaje de error. El tipo correcto MIME es "application/xhtml+xml" para los documentos XHTML.
El problema es que Internet Explorer es el único navegador popular que no soporta este tipo MIME(en su mayoria debido a que internet explorer utiliza las extensiones de los archivos en ves de los tipos MIME), lo que significa que estos tipos MIME son usandos menos frecuentemente de lo que deberian serlo.
¿XHTML 2.0 requerirá "application/xhtml+xml"?En el último borrador, no se dijo si XHTML requerirá algun tipo MIME o no. En el pasado fué una mera recomendación por el borrador. Desde que INternet Explorer no soporta "application/xhtml+xml", representa un problema si va a ser utilizado. Una forma de evitar este problema será usar un tipo diferente de tipo MIME para Internet explorer, algunos websites ya hacen esto.
Sirviendo diferentes tipos MIME a diferentes browsers usando PHPEl servidor envia un encabezado llamado HTTP_ACCEPT al browser, el cual le dice que tipos de tipos MIME acepta. Es posible tomar esto y usarlo para averiguar si el navegador soporta "application/xhtml+xml" usando algun tipo de tecnología del lado del servidor. Aquí usamosun script en PHP para demostrar lo fácil que se puede hacer:
<?php
if (stristr($_SERVER['HTTP_ACCEPT'], 'application/xhtml+xml'))
header('Content-Type: application/xhtml+xml');
else
header('Content-Type: text/html');
?>
Ahora no es una solución perfecta, porque algunos navegadores reportan el soporte pero ese soporte puede no ser muy bueno. Sin embargo sigue siendo una bonita solución al problema de los tipos MIME.
ConclusiónAhora que has visto la introducción a XHTML 2.0, estoy seguro que lo usaras una ves lo publiquen. No es tan importante ahora ya que ningun navegador lo ha implementado y no se ha terminado de definir todavía, pero aprenderlo ahora te preparará para su venida. Ademas con CSS es posible definir la mayoría de etiquetas XHTML 2.0 por ti mismo y tener una página trabajando utilizando la mayoría de las características de XHTML. (Dudo que puedas usar XForms y cosas similares)
Una ves XHTML 2.0 sea oficialmente puclicado, será fácil hacer páginas interoperables que sean accesibles a todos los usuarios. Esto es porque teniendo una separación completa entre el contenido y el formato ha sido una meta desde hace algun tiempo, y no habia sido alcanzada hasta ahora. Ahora con XHTML 2.0 será posible.
Aquí esta una página bastante simple que utiliza las técnicas descritas en este tutorial. Esta no trabajará actualmente en ningun browser, ya que no hay soporte para XHTML 2.0. Sin embargo, te dará una idea de como XHTML 2.0 se verá:
<?php
if (stristr($_SERVER['HTTP_ACCEPT'], 'application/xhtml+xml'))
header('Content-Type: application/xhtml+xml');
else
header('Content-Type: text/html');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml2.dtd">
<html xmlns="http://www.w3.org/2002/06/xhtml2" xml:lang="en">
<head>
<title>XHTML 2.0 Page</title>
</head>
<body>
<section>
<h>Welcome to an XHTML 2.0 Page!</h>
<section>
<h>No browsers support XHTML 2.0 yet</h>
<p>But it's still fine</p>
</section>
<section>
<h>Cool Stuff</h>
<p>
<line>There is no hr element, instead...</line>
<separator />
<nl>
<label>Links to sites</label>
<li href = "http://example.com">Link 1</li>
<li href = "http://example.com">Link 2</li>
</nl> </p>
</section >
</section >
</body >
</html >
Este fue el artículo que estaba traduciendo de XHTML 2.0, es para que se den una idea de cuales van a ser los cambios y de las diferencias a grandes rasgos de XHTML, en resumen las etiquetas de formato desaparecen, solo existen etiquetas para definir bloques de información y jerarquía de información, todo lo demás se deja a CSS. Se supone que el borrador de XHTML 2.0 esta planeado aprovarse para el 2006, asi que muy probablemente los navegadores comienzen a dar soporte básico al estándar a finales de ese año (de Internet Explorer lo dudo), así que hay que estar preparados que esto es lo más nuevo !! Espero que les haya gustado, si quieren ver el original, lo pueden encontrar en esta dirección:
http://www.devarticles.com/c/a/HTML/XHTML-2.0-Explained/Si quieren leer el Draft (borrador) de XHTML 2.0 aquí esta la dirección, esa es la mejor fuente de información para conocer todos los detalles del lenguaje:
http://www.w3.org/TR/2004/WD-xhtml2-20040722/
