El XHTML
Seguramente de este tema se ha conversado mucho, por no decir demasiado, e inclusive visite alguno con links a libros y recomendaciones engorrosas.
Bueno, la idea del post, es simplemente simplificar todo en 7 puntos.
Como todos los que trabajamos con la Web, sabremos que las cuestiones de validaciones son un dolor de cabeza al terminar un proyecto, les transcribo antes, como valor agregado, una ponencia obtenida la cual resumen muy bien el motivo de hacer, por que desde el incio, y por que realmente hacerlo. Luego un par de consejos y el resumen de como escribir un Xhtml respetando el DOCTYPE.
XHTML
¿De dónde venimos?
HTML (I)
* Lenguaje de etiquetado orientado a la publicación en la Web.
* Conjunto simple de etiquetas, aplicación de SGML.
* Simplicidad que le ha permitido situarse como herramienta global de comunicación en pocos años.
* Adaptado a una concepción no estructural del documento. Mezcla de datos y presentación.
¿De dónde venimos?
HTML (II)
* Diseñado para el ordenador personal.
* Sopa de etiquetas.
* Analizadores complejos capaces de aceptar y procesar las incorrecciones.
* Carencia de rigidez en la sintaxis./li>
* Dificultad para ser procesado por analizadores alternativos.
¿A qué nos enfrentamos?
El escenario actual
* Diversidad creciente de dispositivos lectores de documentos web: palmtops, webTV, teléfonos, pantallas táctiles, interfaces sonoras, etc.
* En unos años, un 75% de las peticiones de documentos en internet se hará desde estas plataformas alternativas.
* Aumento de lenguajes especializados (WML, CHTML).
* Es necesaria una convergencia "flexible" de los lenguajes de etiquetado.
¿A qué nos enfrentamos?
Los retos de HTML
* Estandarización del lenguaje a través de una sintaxis estricta que permita la validación de los documentos.
* Necesidad de extender HTML: presentaciones y estructuras de información más complejas.
* Necesidad de acotar el conjunto de etiquetas: subconjuntos adecuados para documentos y dispositivos de lectura más simples.
* Posibilidad de combinación con otros grupos de etiquetas.
XML
* XML 1.0, Rec. del W3C, subconjunto de SGML.
* Capaz de soportar múltiples aplicaciones.
* Reglas estrictas de sintaxis. Ideal para el intercambio de datos.
* DTDs, definen la estructura lógica de los documentos, reglas gramaticales estrictas.
* XSL describe la presentación o la transformación entre gramáticas.
XHTML
* XHTML 1.0, recomendación del W3C desde febrero de 2000.
* HTML reformulado como una aplicación de XML.
* Definido en base a tres posibles DTD:
Estricto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
Transicional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtml1-frameset.dtd">
* Se proporcionan directrices simples para asegurar compatibilidad retroactiva.
XHTML
Un documento simple
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sp" lang="sp">
<head>
<title>IV Jornadas del SIDAR</title>
</head>
<body>
<p>Bienvenidos</p>
</body>
</html>
XHTML
Combinación de espacios nominales (II)
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sp" lang="sp">
<head><title>Arcoseno></title>
</head>
<body>
<p>A continuación, el arcoseno(x)</p>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<apply>
<apply><inverse/><sin/></apply>
<ci>x</ci>
</apply>
</math>
</body>
</html>
XHTML
Reglas de escritura (I)
* Anidamiento adecuado:
Mal:
<p> Esto está en <b>negrita</p></b>
Bien:
<p>Esto está <b>negrita </b></p>
* Etiquetas y atributos en minúsculas
* Cerrar todas las etiquetas
Mal:
<p>uno<p>dos
Bien:
<p>uno</p><p>dos</p>
<br />
o
<img src="foto.jpg" alt="retrato"/>
XHTML - Reglas de escritura (II)
* Entrecomillar los valores de los atributos
* Usar el atributo id en vez dename para identificar fragmentos de contenido
* No minimizar los pares atributo-valor:
<input type="checkbox" name="Validado" checked="checked"/>
* Uso de secciones
<![CDATA[
.....
]]>
para proteger el contenido de las etiquetas style o script
* Exclusiones de etiquetas
XHTML
Compatibilidad retroactiva (I)
* Usar el atributo id junto a name para identificar fragmentos de contenido
* Usar la entidad & en los valores de los atributos
* Incluir un espacio en blanco antes de la barra de cierre de las etiquetas vacías y usar sintaxis minimizada:
<br /> o <img src="foto.jpg" alt="marta" />
* No usar sintaxis minimizada para etiquetas no vacías sin contenido.
* Usar tanto el atributo lang como xml:lang
XHTML
Compatibilidad retroactiva (II)
* Usar hojas de estilo y scripts en ficheros externos si usan <, &, ]]> o --.
* Evitar retornos de carro y múltiples espacios en blanco en los valores de los atributos.
* No usar más de una etiqueta isindex en la cabecera del documento.
*
* Usar doble indicación de la codificación de caracteres:
<?xml version="1.0" encoding="ISO-8859-1"?>
<meta http-equiv="Content-type"
content='text/html; charset="ISO-8859-1"' />
XHTML
Compatibilidad retroactiva (III)
* Atributos booleanos minimizados (HTML < 4): compact, nowrap, ismap, declare, noshade, checked, disabled, readonly, multiple, selected, noresize, defer.
* Algunas aplicaciones de usuario muestran las instrucciones de procesamiento XML.
* DOM y XHTML
* CSS y XHTML
XHTML
Compatibilidad retroactiva (y IV)
* DOM y XHTML:
Si el tipo de soporte es text/html, debe usarse DOM HTML. Elementos y atributos en mayúsculas.
Si el tipo de soporte es text/xml o application/xml, pueden usar DOM XML. Elementos y atributos en minúsculas.
* CSS y XHTML:
Elementos y atributos en minúsculas
<tbody> explícito si se hace referencia a él en algún selector CSS
Vigencia de la sintaxis de selectores "." y "#".
* Reglas de conformidad XML y HTML
Estrategia de evolución
XHTML- Modularización
* Diversidad de dispositivos: no tiene sentido un único conjunto de etiquetas.
* Marco estándar para extender o acotar el conjunto de etiquetas de XHTML.
* Facilita la creación de documentos que combinen XHTML con otros lenguajes basados en XML.
Estrategia de evolución
XHTML- Basic
* Desde el 3 de noviembre es una propuesta de recomendación.
* Contiene los módulos básicos enfocados a la estructuración y presentación básica de los documentos.
* Pensado para la publicación en dispositivos móviles, WebTv, libros electrónicos, etc.
XHTML-Lenguaje anfitrión
Módulos básicos:
Estructural: body, head, html, title
Texto:
* Encabezados: h1, h2, h3, h4, h5, h6
* Bloques: address, blockquote, div, p, pre
* Cualificadores: abbr, acronym, br, cite, code, dfn, em, kbd, q, samp, span, strong, var
Hipertexto: a
Listas:dl, dt, dd, ol, ul, li
XHTML-Basic
Módulos básicos adicionales
Formularios:form, input, label, select, option, textarea
Tablas: caption, table, td, th, tr
Imágenes: img
Metainformación: meta
Enlaces: link
Base: base
Estrategia de evolución
XForms
Capa de Presentación: XHTML, CSS
Capa Lógica: Reglas de negocio, validaciones simples, definición de dependencias, etc.
Capa de Datos: definición del modelo de datos.
Estrategia de evolución
Modularidad vs. Diversidad de dispositivos
CC/PP (Composición de Capacidades/Perfiles de Preferencia)
Perfiles de dispositivo: Posibilidades de representación de la información, limitaciones hardware, etc. Preferencias del usuario.
Perfiles de documento: Información sobre los módulos necesarios para presentar adecuadamente un documento en un dispositivo determinado.
Negociación entre partes.Transformación ad hoc con XSLT.
En Resumen, con que paso comienzo la validación?
1. No debe haber etiquetas sueltas sin cierre. Si se pone, por ejemplo <p>, no hay que olvidarse de incluir también </p>.
2. Las etiquetas que no tienen cierre como, por ejemplo, “br” o “img” tienen que llevar un slash de cierre (<br /> o <img src=”…” alt=”…” />
y poseer un espacio antes del slash.
3. Todas las imágenes tienen que tener su descripción “alt”.
4. Las etiquetas de apertura y cierre tienen que estar bien anidadas. Por ejemplo, es inválido <strong><big>Mi blog</strong></big>. Lo correcto es: <strong><big>Mi blog</big></strong>.
5. Algunas definiciones no están permitidas fuera de la sección <head>…</head>. Por ejemplo las de las hojas de estilo “link”.
6. Los valores de los atributos de las etiquetas tienen que llevar comillas. Por ejemplo, <img src=”…” align=”left” alt=”…” />
7. Eliminar la etiqueta “embed” y su contenido para los vídeos de YouTube.
Para los que deseen les adjunto el Cheat Sheet de XHTML que nos servirá para imprimirlo y tenerlo de cabecera.
Como un dato, que mas que dato es un recordatorio pueden validar o ver los errores de validación a través de la página de la W3C. Previo leer las recomendaciones. Eso si solo para documentos en linea.
o para los que están desesperados por validar
http://csstidy.sourceforge.net/xhtml.php
http://www.sidar.org/acti/jorna/4jorna/ivponen/Ponxhtml.htm
y gracias al Virtualizador:
Bueno, les dejo el cierre del post... un saludo.
Seguramente de este tema se ha conversado mucho, por no decir demasiado, e inclusive visite alguno con links a libros y recomendaciones engorrosas.
Bueno, la idea del post, es simplemente simplificar todo en 7 puntos.
Como todos los que trabajamos con la Web, sabremos que las cuestiones de validaciones son un dolor de cabeza al terminar un proyecto, les transcribo antes, como valor agregado, una ponencia obtenida la cual resumen muy bien el motivo de hacer, por que desde el incio, y por que realmente hacerlo. Luego un par de consejos y el resumen de como escribir un Xhtml respetando el DOCTYPE.
XHTML
¿De dónde venimos?
HTML (I)
* Lenguaje de etiquetado orientado a la publicación en la Web.
* Conjunto simple de etiquetas, aplicación de SGML.
* Simplicidad que le ha permitido situarse como herramienta global de comunicación en pocos años.
* Adaptado a una concepción no estructural del documento. Mezcla de datos y presentación.
¿De dónde venimos?
HTML (II)
* Diseñado para el ordenador personal.
* Sopa de etiquetas.
* Analizadores complejos capaces de aceptar y procesar las incorrecciones.
* Carencia de rigidez en la sintaxis./li>
* Dificultad para ser procesado por analizadores alternativos.
¿A qué nos enfrentamos?
El escenario actual
* Diversidad creciente de dispositivos lectores de documentos web: palmtops, webTV, teléfonos, pantallas táctiles, interfaces sonoras, etc.
* En unos años, un 75% de las peticiones de documentos en internet se hará desde estas plataformas alternativas.
* Aumento de lenguajes especializados (WML, CHTML).
* Es necesaria una convergencia "flexible" de los lenguajes de etiquetado.
¿A qué nos enfrentamos?
Los retos de HTML
* Estandarización del lenguaje a través de una sintaxis estricta que permita la validación de los documentos.
* Necesidad de extender HTML: presentaciones y estructuras de información más complejas.
* Necesidad de acotar el conjunto de etiquetas: subconjuntos adecuados para documentos y dispositivos de lectura más simples.
* Posibilidad de combinación con otros grupos de etiquetas.
XML
* XML 1.0, Rec. del W3C, subconjunto de SGML.
* Capaz de soportar múltiples aplicaciones.
* Reglas estrictas de sintaxis. Ideal para el intercambio de datos.
* DTDs, definen la estructura lógica de los documentos, reglas gramaticales estrictas.
* XSL describe la presentación o la transformación entre gramáticas.
XHTML
* XHTML 1.0, recomendación del W3C desde febrero de 2000.
* HTML reformulado como una aplicación de XML.
* Definido en base a tres posibles DTD:
Estricto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
Transicional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtml1-frameset.dtd">
* Se proporcionan directrices simples para asegurar compatibilidad retroactiva.
XHTML
Un documento simple
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sp" lang="sp">
<head>
<title>IV Jornadas del SIDAR</title>
</head>
<body>
<p>Bienvenidos</p>
</body>
</html>
XHTML
Combinación de espacios nominales (II)
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sp" lang="sp">
<head><title>Arcoseno></title>
</head>
<body>
<p>A continuación, el arcoseno(x)</p>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<apply>
<apply><inverse/><sin/></apply>
<ci>x</ci>
</apply>
</math>
</body>
</html>
XHTML
Reglas de escritura (I)
* Anidamiento adecuado:
Mal:
<p> Esto está en <b>negrita</p></b>
Bien:
<p>Esto está <b>negrita </b></p>
* Etiquetas y atributos en minúsculas
* Cerrar todas las etiquetas
Mal:
<p>uno<p>dos
Bien:
<p>uno</p><p>dos</p>
<br />
o
<img src="foto.jpg" alt="retrato"/>
XHTML - Reglas de escritura (II)
* Entrecomillar los valores de los atributos
* Usar el atributo id en vez dename para identificar fragmentos de contenido
* No minimizar los pares atributo-valor:
<input type="checkbox" name="Validado" checked="checked"/>
* Uso de secciones
<![CDATA[
.....
]]>
para proteger el contenido de las etiquetas style o script
* Exclusiones de etiquetas
XHTML
Compatibilidad retroactiva (I)
* Usar el atributo id junto a name para identificar fragmentos de contenido
* Usar la entidad & en los valores de los atributos
* Incluir un espacio en blanco antes de la barra de cierre de las etiquetas vacías y usar sintaxis minimizada:
<br /> o <img src="foto.jpg" alt="marta" />
* No usar sintaxis minimizada para etiquetas no vacías sin contenido.
* Usar tanto el atributo lang como xml:lang
XHTML
Compatibilidad retroactiva (II)
* Usar hojas de estilo y scripts en ficheros externos si usan <, &, ]]> o --.
* Evitar retornos de carro y múltiples espacios en blanco en los valores de los atributos.
* No usar más de una etiqueta isindex en la cabecera del documento.
*
* Usar doble indicación de la codificación de caracteres:
<?xml version="1.0" encoding="ISO-8859-1"?>
<meta http-equiv="Content-type"
content='text/html; charset="ISO-8859-1"' />
XHTML
Compatibilidad retroactiva (III)
* Atributos booleanos minimizados (HTML < 4): compact, nowrap, ismap, declare, noshade, checked, disabled, readonly, multiple, selected, noresize, defer.
* Algunas aplicaciones de usuario muestran las instrucciones de procesamiento XML.
* DOM y XHTML
* CSS y XHTML
XHTML
Compatibilidad retroactiva (y IV)
* DOM y XHTML:
Si el tipo de soporte es text/html, debe usarse DOM HTML. Elementos y atributos en mayúsculas.
Si el tipo de soporte es text/xml o application/xml, pueden usar DOM XML. Elementos y atributos en minúsculas.
* CSS y XHTML:
Elementos y atributos en minúsculas
<tbody> explícito si se hace referencia a él en algún selector CSS
Vigencia de la sintaxis de selectores "." y "#".
* Reglas de conformidad XML y HTML
Estrategia de evolución
XHTML- Modularización
* Diversidad de dispositivos: no tiene sentido un único conjunto de etiquetas.
* Marco estándar para extender o acotar el conjunto de etiquetas de XHTML.
* Facilita la creación de documentos que combinen XHTML con otros lenguajes basados en XML.
Estrategia de evolución
XHTML- Basic
* Desde el 3 de noviembre es una propuesta de recomendación.
* Contiene los módulos básicos enfocados a la estructuración y presentación básica de los documentos.
* Pensado para la publicación en dispositivos móviles, WebTv, libros electrónicos, etc.
XHTML-Lenguaje anfitrión
Módulos básicos:
Estructural: body, head, html, title
Texto:
* Encabezados: h1, h2, h3, h4, h5, h6
* Bloques: address, blockquote, div, p, pre
* Cualificadores: abbr, acronym, br, cite, code, dfn, em, kbd, q, samp, span, strong, var
Hipertexto: a
Listas:dl, dt, dd, ol, ul, li
XHTML-Basic
Módulos básicos adicionales
Formularios:form, input, label, select, option, textarea
Tablas: caption, table, td, th, tr
Imágenes: img
Metainformación: meta
Enlaces: link
Base: base
Estrategia de evolución
XForms
Capa de Presentación: XHTML, CSS
Capa Lógica: Reglas de negocio, validaciones simples, definición de dependencias, etc.
Capa de Datos: definición del modelo de datos.
Estrategia de evolución
Modularidad vs. Diversidad de dispositivos
CC/PP (Composición de Capacidades/Perfiles de Preferencia)
Perfiles de dispositivo: Posibilidades de representación de la información, limitaciones hardware, etc. Preferencias del usuario.
Perfiles de documento: Información sobre los módulos necesarios para presentar adecuadamente un documento en un dispositivo determinado.
Negociación entre partes.Transformación ad hoc con XSLT.
En Resumen, con que paso comienzo la validación?
1. No debe haber etiquetas sueltas sin cierre. Si se pone, por ejemplo <p>, no hay que olvidarse de incluir también </p>.
2. Las etiquetas que no tienen cierre como, por ejemplo, “br” o “img” tienen que llevar un slash de cierre (<br /> o <img src=”…” alt=”…” />
y poseer un espacio antes del slash.
3. Todas las imágenes tienen que tener su descripción “alt”.
4. Las etiquetas de apertura y cierre tienen que estar bien anidadas. Por ejemplo, es inválido <strong><big>Mi blog</strong></big>. Lo correcto es: <strong><big>Mi blog</big></strong>.
5. Algunas definiciones no están permitidas fuera de la sección <head>…</head>. Por ejemplo las de las hojas de estilo “link”.
6. Los valores de los atributos de las etiquetas tienen que llevar comillas. Por ejemplo, <img src=”…” align=”left” alt=”…” />
7. Eliminar la etiqueta “embed” y su contenido para los vídeos de YouTube.
Para los que deseen les adjunto el Cheat Sheet de XHTML que nos servirá para imprimirlo y tenerlo de cabecera.
Como un dato, que mas que dato es un recordatorio pueden validar o ver los errores de validación a través de la página de la W3C. Previo leer las recomendaciones. Eso si solo para documentos en linea.
o para los que están desesperados por validar
http://csstidy.sourceforge.net/xhtml.php
http://www.sidar.org/acti/jorna/4jorna/ivponen/Ponxhtml.htm
y gracias al Virtualizador:
Bueno, les dejo el cierre del post... un saludo.