EZINE HISPABYTE

XHTML Y OTRAS TECNOLOGÍAS DEL W3C

XHTML

XHTML es el acrónimo de Lenguaje de Marcado de Hipertexto Extensible (Extensible HyperText Markup Language). Nace con el objetivo de reemplazar al HTML ya que este lenguaje es muy limitado respecto el uso de nuevas tecnologías basadas en XML.

Para sacar el máximo potencial a XHTML haremos uso de las múltiples herramientas XML que cada día están disponibles, cómo MathML, SVG, SMIL, XForms, Aplicaciones de Web Semántica,… Más adelante hablaremos sobre varias de ellas. Por ello si usamos XHTML sin aplicar ninguna tecnología web no notaremos la diferencia. Con XHTML podremos usar una amplia variedad de herramientas que antes con HTML era imposible. Por lo tanto podemos deducir que lo que marca una gran diferencia entre XHTML y HTML en cuanto a potencial es que XHTML permite sacar un mayor rendimiento a la web, aportando capacidades de integrar multimedia, accesibilidad e interoperabilidad.

Por otra parte en XHTML, al estar orientado a la compatibilidad entre distintos lenguajes basados en XML, se requiere un etiquetado estrictamente correcto. Se somete más al cumplimiento de estructuras y formato estándares como las omisiones de cierres de etiquetas, el atributo de alternativa en imágenes, el mal uso de identidades genéricas,... Por lo tanto necesitaremos cumplir los estándares creando un código limpio abierto para la futura implementación de cualquier tecnología. También a causa de la interoperabilidad que se quiere conseguir con XHTML, tendremos que crear un código que cumplimente los estándares para que en un futuro cercano podamos visualizar nuestra web desde cualquier dispositivo y con el software que deseemos, cómo puede ser el browser de nuestro teléfono móvil, sintetizador de voz, líneas braille, navegador del coche,...

Cambios de HTML a XHTML

El paso de HTML a XHTML ha conllevado numerosos cambios que modifican hasta el uso de las etiquetas más comunes. Una lista de importantes cambios:

-Las estructuras deben de escribirse bien anidadas

Se debe de respetar las estructuras anidadas. Abriendo y cerrando las etiquetas considerando cierto rango.

MAL: <p><b>Hola Mundo!</p></b>
BIEN: <p><b>Hola Mundo!</b></p>

-Minúsculas en todo el código

La razón de tener que escribir el código en minúsculas es a causa de que XML interpreta de forma diferente las minúsculas de las mayúsculas (case sensitive), por lo tanto se requiere el uso de minúsculas en todo el código.

MAL: <DIV AligN=”ceNter”></DIV>
BIEN: <div align=”center”></div>

-Valores de las etiquetas entrecomilladas

Se requiere el uso de comillas para los valores definidos en los tags, independientemente de que sea numérico como alfabético.

MAL: <form name=formulario></form>
BIEN: <form name=”formulario”></form>

-Cierre de las etiquetas

Muy importante. En XHTML todas las etiquetas se deben de cerrar.

MAL: <br>
BIEN: <br />

MAL : <p>Hola<p>Adios
BIEN : <p>Hola</p><p>Adios</p>

-Scripts embedidos

Los elementos <, > y & serán considerados en XHTML como elementos de apertura y clausura de etiquetas. En el caso de tener que usar scripts en nuestro documento tendremos la necesidad de declararlo como contenido CDATA.

<script type="text/javascript">
<![CDATA[
CONTENIDO DEL SCRIPT
]]>
</script>

-Minimización de atributos

Se excluye el uso de la minimización en atributos booleanos (2 estados posibles). Se tiene que respetar el esquema atributo-valor en todas las etiquetas.

MAL: <option selected>
BIEN: <option selected=”selected”>

-Prohibiciones de elementos

Existen ciertos elementos que poseen algunas restricciones. Por ejemplo, haber una determinada etiqueta dentro del contenido de una etiqueta del mismo tipo. Es decir, en una etiqueta <form> no puede coexistir en su contenido otra etiqueta <form>.

-Internacionalización

Se pretende crear una web con contenidos abiertos para todas las regiones, países y culturas, por ello la información que se le muestra al usuario debe de estar definida en el idioma correspondiente para evitar bajo ninguna circunstancia la mal interpretación de códigos y caracteres propios de un habla específico.
También ocurre a veces un conflicto debido a la combinación de diferentes idiomas en un mismo documento. Por lo tanto es necesario utilizar atributo xml:lang para definir el idioma a usar.
Principalmente deberemos de definir el idioma al principio del documento en el tag <html> de la siguiente forma

<html xmlns=http://www.w3.org/1999/xhtml xml:lang="es" >

Evidentemente “es” hace referencia a castellano. Los demás idiomas españoles podemos encontrar los identificadores del gallego “gl”, del catalán “ca” y del euskera “eu”.
Si usamos varios idiomas dentro de nuestro documento recurriremos a especificarlo del siguiente modo:

<p xml:lang="en">This house is nice.</p>

-Uso del atributo alternativa (ALT)

Este requerimiento viene heredado de HTML ¡Usad el atributo ALT! ¿Habéis probado visitar vuestra web desde algún dispositivo o software que no soporte imágenes? El hecho de no usar esté atributo contradice totalmente el avance del desarrollo web tanto en interoperabilidad y como en accesibilidad.

MAL: <img src=”imagen.png” alt=”Imagen”>
BIEN : <img src=”imagen.png” alt=”Imagen” />

XForms

XForms es un nuevo lenguaje de etiquetado destinado para la creación de formularios. Con esta tecnología basada en XML podremos realizar numerosas acciones que antes sin la ayuda de un lenguaje de programación web nos era totalmente imposible llevar a cabo. Podremos comprobar los valores de los datos que el usuario va introduciendo en los campos del formulario en tiempo real, indicar que campos son obligatorios para el envío del formulario, enviar el resultado del formulario a diversas direcciones, …
Con XForms tenemos totalmente separadas el propósito del formulario y su presentación. La estructura básica de un XForm es la siguiente:

<html xmlns:h="http://www.w3.org/1999/xhtml"
      xmlns="http://www.w3.org/2002/xforms">
<head>
<xforms:model>
<xforms:instance>
  <data xmlns="">
  </campo1>
  </data>
</xforms:instance>
<xforms:submission action="http://loquesea.com" method="get" id="s"/>
</xforms:model>
</head>
<body>
  <xforms:input ref="campo1">
    <xforms:label>Prueba</xforms:label>
  </xforms:input>
  <xforms:submit submission="s">
    <xforms:label>Aceptar</xforms:label>
  </xforms:submit>
</body>
</html>

Cómo vemos en el ejemplo anterior. El propósito de nuestro formulario va definido en el encabezado del documento (entre las etiquetas <head> y </head>). Por otra parte la presentación del formulario (lo que realmente aparecerá en el navegador del cliente) se escribirá entre las etiquetas del cuerpo del documento. Los datos que reciben los formularios XForms se indican en el propósito entre las etiquetas <instance> y <data> (datos de instancia de XML).

Actualmente XForms no está implementados en los navegadores, aunque existe una versión beta de una extensión para Mozilla y Firefox que podéis descargar en el siguiente enlace: http://www.mozilla.org/projects/xforms/

MathML

En reiteradas ocasiones nos encontramos con el problema de introducir símbolos matemáticos o notaciones científicas en un documento web. MathML nos permite la inclusión de este tipo de notaciones e imprimir en pantalla fórmulas y símbolos en “texto plano”, sin la necesidad de recurrir a otros métodos como son las imágenes. Es un recurso muy importante para la muestra de información en la red. Veamos un ejemplo del funcionamiento de MathML:

eq.jpg
<math xmlns='http://www.w3.org/1998/Math/MathML'>
  <mfrac>
    <msup>
      <mi>e</mi>
      <mi>x</mi>
    </msup>
  <mrow>
    <msup>
      <mi>e</mi>
      <mn>2</mn>
    </msup>
    <mo>+</mo>
    <mi>x</mi>
    </mrow>
  </mfrac>
</math>

El código de arriba incluido en un documento XHTML imprimirá la función que podemos ver en la imagen. El código que define una notación matemática en MathML engloba la estructura genérica de la fórmula desde fuera hasta dentro, es decir, si lo que pretendemos imprimir es una fracción utilizaremos la etiqueta <mfrac>, si queremos una matriz utilizaremos la etiqueta <matrix>, …

En MathML existen 3 etiquetas para declarar elementos principales: mi (variables), mn (números) y mo (operaciones). En la web oficial del consorcio podrás visualizar la especificación completa de MathML.
Para comprobar si tu navegador soportar MathML puedes justificarlo en esta página web que ofrece el W3C:

http://www.w3.org/Math/XSL/csmall2.xml

Existen aplicaciones que permite la generación de código MathML a partir de simbología genérica matemática. Es el caso de MathML Central: http://www.mathmlcentral.com/Tools/ToMathML.jsp

SVG

SVG es el acrónimo de Scalar Vector Graphics, en castellano Gráficos de Vectores Escalables. SVG es un lenguaje basado en XML para la creación de aplicaciones gráficas. Las aplicaciones creadas bajo SVG pueden ser interactivas y dinámicas. Está basado en otros estándares libres como son PNG y JPEG.

Existe una versión reducida llamada SVG Mobile que va enfocada a la programación gráfica para teléfonos móviles. Algunos modelos ya soportan SVG.

svg.jpg

OTRAS TECNOLOGÍAS WEB

Existen numerosas tecnologías muy interesantes, muchas aún en progreso, que en un futuro cercano se irán implementando navegadores dando un vuelco a la dirección del desarrollo web guiando la web hacia su máximo potencial.

Otras tecnologías web que cabe mencionar son CSS (Cascading Style Sheets) para aplicar estilos a documentos web, SMIL (Lenguaje de Integración de Multimedia Sincronizada) para animaciones multimedia, siendo el posible sustituto de Flash, CC/PP (Composite Capabilities/Preference Profiles) que genera el documento a mostrar según las características del dispositivo que estemos utilizando (PC, Teléfono Móvil, PDA, …), VoiceXML impulsando la accesibilidad para discapacitados en la red integrando voz, ...


th3j0ker ( th3j0ker@msn.com ) - http://www.alfonsojimenez.com/