<LIBRERIA>entonces al abrir dicho archivo algunos navegadores presentan lo que se muestra arriba tal y como lo vemos arriba, o sea lo que se conoce como el “árbol del documento”, mientras que otros navegadores simplemente ignoran las etiquetas y presentan “de corrido” línea-tras-línea el texto que esté situado entre etiquetas XML, eliminándose las etiquetas que no son mostradas:
<LIBRO CATEGORIA="ELECTRONICA">
<TITULO IDIOMA="ESP">Electronica para Todos</TITULO>
<AUTOR>Guillermo Gonzalez Camarena</AUTOR>
<FECHA>1952</FECHA>
<PRECIO>250.00</PRECIO>
</LIBRO>
<LIBRO CATEGORIA="NOVELAS">
<TITULO IDIOMA="ESP">La piel de zapa</TITULO>
<AUTOR>Honorato de Balzac</AUTOR>
<FECHA>2005</FECHA>
<PRECIO>80.00</PRECIO>
</LIBRO>
<LIBRO CATEGORIA="ESTADISTICA">
<TITULO IDIOMA="ESP">Design de Experiments</TITULO>
<AUTOR>Armando Martinez</AUTOR>
<FECHA>1982</FECHA>
<PRECIO>80.00</PRECIO>
</LIBRO>
</LIBRERIA>
Electronica para Todos Guillermo Gonzalez Camarena 1952 250.00 La piel de zapa Honorato de Balzac 2005 80.00 Design de Experiments Armando Martinez 1982 80.00Se puede, desde luego, elaborar un código script usando un lenguaje como JavaScript que desde otra página HTML (la cual invocará el documento XML) abra el documento XML presentando la información con alguna estilización (separación de párrafos, efectos decorativos en el texto como subrayados o letras itálicas, etc.) de modo tal que la información contenida en el documento XML sea comprensible, estética y legible. Pero hay algo más que se puede llevar a cabo, y tal cosa consiste en estilizar el documento XML precisamente con CSS. Esto se puede hacer porque una cantidad creciente de navegadores permite aplicar CSS a un documento XML para darle una presentación más “humana”.
CSS no es la única solución para estilizar un documento XML en un navegador. Otra solución disponible es el uso de XSL (Extensible Stylesheet Language), el cual fué diseñado específicamente con XML en mente. Sin embargo, XSL no es un reemplazo para el uso de CSS en la estilización de documentos XML. XSL es un lenguaje más complicado de estilización que usa la sintaxis convencional de XML, y puede lograr muchas más cosas que CSS. Pero ambos lenguajes CSS y XSL tienen sus propias ventajas para tareas particulares, y ambos pueden ser utilizados para el aspecto presentacional de documentos XML.
Aunque no es obligatorio, la mayoría de los documentos XML empiezan con una declaración como la siguiente:
<?xml version="1.0"?>
Una declaración XML como la anterior puede contener tres atributos, dos de los cuales son optativos, llamados pseudo-atributos porque se asemejan a los atributos usados en las etiquetas de marcado. Uno de tales atributos optativos es encoding:
<?xml version="1.0" encoding="ISO-8859-1"?>
El valor "ISO-8859-1" es equivalente al valor "LATIN-1" que es más fácil de recordar:
<?xml version="1.0" encoding="Latin-1"?>
El otro atributo optativo es standalone:
<?xml version="1.0" encoding="Latin-1" standalone="yes"?>
Un valor de “yes” le informa al navegador que no hay Definición de Tipo de Documento (DTD) que acompañe al documento XML, o sea que no hay un DOCTYPE.
Los pseudo-atributos en una declaración XML deben aparecer en el orden particular mostrado en los ejemplos dados arriba.
¿Y cómo logramos que un documento XML admita que se lleve a cabo una estilización sobre su contenido? Haciéndoselo saber al principio en lo que vendría siendo la cabecera del documento. La sintaxis para incluir una hoja de estilos externa (guardada en un archivo externo e independiente como “estilos.css”) se asemeja a una cruza cercana entre la declaración XML del documento y la etiqueta <link> usada en los documentos HTML y XHTML:
<?xml-stylesheet type="text-css" href="estilos.css"?>
Algo como esto hace referencia a una hoja externa de estilos (“estilos.css”) que se encarga de llevar a cabo la estilización del documento XML. Debe aparecer después de la declaración XML. Por lo tanto, un documento XML sencillo que será estilizado puede tener un aspecto como el que se muestra a continuación:
*********** archivo “ejemplo.xml”
<?xml version="1.0" encoding="Latin-1" standalone="yes"?>
<?xml=stylesheet type="text/css" href="estilos.css"?>
<ejemplo>
Aqui tenemos una <resaltar>aplicacion</resaltar> de estilizacion
dada a un <resaltar>documento XML</resaltar>.
</ejemplo>
***********
Es importante dejar aquí una cosa en claro: Un documento XML debe ser guardado no con una extensión de archivo “.html” sino con una extensión de archivo “.xml”.
La Hoja de Estilos, por su parte, puede tener algo tan sencillo como la siguiente regla:
*********** archivo “estilos.css”
resaltar {
display: inline;
font-weight: bold;
color: blue;
}
***********
Si se ponen ambos archivos XML y CSS en un mismo directorio (carpeta) y se abre el documento XML con un navegador, se encontrará que el texto que está puesto entre las etiquetas <resaltar> del documento XML será resaltado con letra pronunciada de color azul:
Aqui tenemos una aplicacion de estilizacion dada a un documento XML.
La declaración:
display: inline;
dá lugar a que el elemento objetivo sea tratado como un elemento enlinea.
Desplegar un documento XML con CSS requiere un uso intensivo y amplio de la propiedad display, la propiedad CSS que tiene la capacidad de poder definir el comportamiento de un elemento cuando es desplegado por el navegador.
Podemos ampliar la hoja de estilos “estilos.css” dada arriba para ocasionar un efecto que abarque toda la ventana del navegador:
*********** archivo “estilos.css”
ejemplo {
display: block;
background: lightyellow;
}
resaltar {
display: inline;
font-weight: bold;
color: blue;
}
***********
La declaración:
display: block;
ocasiona que el elemento objetivo sea un elemento de bloque (y no un elemento enlínea). Tal y como ocurre en los documentos HTML/XHTML, el comportamiento predeterminado para elementos de bloque se sigue aplicando. La salida en este caso abarcará automáticamente la ventana entera a menos de que se haga una indicación específica para el caso contrario, porque el valor predeterminado para la anchura es auto. Con esta declaración CSS, el elemento <ejemplo> emula el comportamiento del elemento <html>.
Como otro ejemplo sobre el uso de CSS para aplicarle estilos a los documentos XML, considérese la siguiente declaración:
display: list-item;
usada para poder construir listas en XML. Esta declaración ocasiona que un elemento pueda aparecer con un caracter tipo “bala” predeterminado puesto a su lado, como ocurre con el siguiente código fuente XML:
*********** archivo “listas.xml”
<?xml version="1.0" encoding="Latin-1" standalone="yes"?>
<?xml-stylesheet type="text/css" href="estiloslistas.css"?>
<listado>
<articulo>Zanahorias</articulo>
<articulo>Papas</articulo>
<articulo>Cebollas</articulo>
</listado>
***********
que cuando es usado con la siguiente hoja de estilos:
*********** archivo “estiloslistas.xml”
listado {
display: block;
margin-left: 25px;
list-style: disc;
}
articulo {
display: list-item;
}
***********
produce una lista tal y como son presentadas las listas no-ordenadas creadas con las etiquetas <ul> en HTML:
· Zanahorias
· Papas
· Cebollas
La declaración:
display: list-item;
ocasiona que el elemento objetivo sea considerado como si fuese un elemento del listado <li> tradicional.
Con cada regla de estilo CSS, parece que tenemos una manera de replicar en un documento XML, con etiquetas que nosotros mismos inventamos, todos los efectos que nos son familiares en HTML con sus etiquetas de acción predefinida y determinada. Sin embargo, en este punto un escéptico podría añadir: ¿y qué de las tablas? Las tablas pueden ser creadas con relativa facilidad en HTML, ¿pero qué de XML en donde no hay etiquetas predefinidas para la creación de tablas? Fue precisamente con este reto en mente que CSS creó un conjunto de valores <table> para permitirnos el poder llevar a cabo la emulación de tablas HTML. Con estos valores, usando los elementos XML es posible recrear en su totalidad el comportamiento de una tabla HTML:
| Declaración display | Elemento HTML emulado |
| display: table; | <table> |
| display: table-caption; | <caption> |
| display: table-column-group; | <colgroup> |
| display: table-column; | <col /> |
| display: table-header-group; | <thead> |
| display: table-row-group; | <tbody> |
| display: table-row; | <tr> |
| display: table-cell; | <td> , <th> |
| display: table-footer-group; | <tfoot> |
A continuación veremos un ejemplo práctico (el cual se puede tomar como guía para la elaboración de aplicaciones más sofisticadas) que nos muestra cómo con CSS se puede tomar un conjunto de datos clasificados en cierto orden dentro de un archivo XML (en el cual hemos inventado nuestras propias etiquetas de marcado) para acomodar dichos datos dentro de una tabla. En el documento XML se define un “mini-catalogo” de libros con el título de cada libro, el nombre del autor y la fecha de publicación. El documento XML invoca para la estilización CSS un archivo externo titulado “estilosXML.css” que contiene al hoja de estilos:
*********** archivo “tablaXML.xml”
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="estilosXML.css"?>
<catalogo>
<nombreTabla>
Catalogo de Libros
</nombreTabla>
<cols>
<Titulo />
<Autor />
<Fecha />
</cols>
<cabeceras>
<descripcion>
<titulo>Titulo</titulo>
<autor>Autor</autor>
<fecha>Fecha</fecha>
</descripcion>
</cabeceras>
<datos>
<descripcion>
<titulo>Electronica para Todos</titulo>
<autor>Guillermo Gonzalez Camarena</autor>
<fecha>1952</fecha>
</descripcion>
<descripcion>
<titulo>Historia Mundial</titulo>
<autor>Carlos Fuentes</autor>
<fecha>1967</fecha>
</descripcion>
<descripcion>
<titulo>Tratado de Quimica</titulo>
<autor>Antonio Lorenzo Lavoisier</autor>
<fecha>1783</fecha>
</descripcion>
<descripcion>
<titulo>La Mecanica Cuantica</titulo>
<autor>Armando Martinez Tellez</autor>
<fecha>2009</fecha>
</descripcion>
<descripcion>
<titulo>Como Hacerse Billonario</titulo>
<autor>Bill Gates</autor>
<fecha>2000</fecha>
</descripcion>
</datos>
<pies>
<descripcion>
<titulo>Titulo</titulo>
<autor>Autor</autor>
<fecha>Fecha</fecha>
</descripcion>
</pies>
</catalogo>
***********
El archivo externo que contiene la hoja de estilos es el siguiente:
*********** archivo “estilosXML.css”
catalogo {
display: table;
font-family: sans-serif;
border: 1px solid rgb(200,200,200);
border-spacing: 2px;
margin: 8px;
}
nombreTabla {
display: table-caption;
font-weight: bold;
color: blue;
text-align: center;
}
cols {
display: table-column-group;
}
cols titulo, cols autor, cols fecha {
display: table-column;
}
datos {
display: table-row-group;
}
descripcion {
display: table-row;
}
autor,
titulo,
fecha {
display: table-cell;
padding: 5px;
border: 1px solid rgb(200,200,200);
}
cabeceras {
display: table-header-group;
}
pies {
display: table-footer-group;
}
cabeceras autor,
cabeceras titulo,
cabeceras fecha,
pies autor,
pies titulo,
pies fecha {
background: lightyellow;
text-aling: center;
font-weight: bold;
}
***********
PROBLEMA: Crear dos archivos de texto titulados “tablaXML.xml” y “estilosXML.css” guardando lo anterior en su respectivo archivo, abriendo el documento “tablaXML.xml” con un navegador actualizado.
Al efectuar lo anterior, el lector debe obtener en la ventana principal del navegador que esté utilizando algo como lo siguiente:
En lo que se acaba de dar arriba, el código XML:
<nombreTabla>es estilizado mediante mediante la regla:
Catalogo de Libros
</nombreTabla>
nombreTabla {que se hace cargo de poner un título de cabecera a la tabla, el título “Catalogo de Libros”, en texto centrado, de color azul y usando línea gruesa (bold).
display: table-caption;
font-weight: bold;
color: blue;
text-align: center;
}
Por otro lado, mediante la regla CSS:
datos {
display: table-row-group;
}
la declaración:
display: table-row-group;
ocasiona que el elemento objetivo (datos) se comporte como un elemento <tbody> del HTML convencional.
Y mediante la regla CSS:
descripcion {
display: table-row;
}
la declaración:
display: table-row;
ocasiona que el elemento objetivo (descripcion) se comporte como el elemento de renglón <tr> del HTML convencional usado para renglones de cabecera en las tablas.
Por otro lado, con la regla CSS:
autor,
titulo,
fecha {
display: table-cell;
padding: 5px;
border: 1px solid rgb(200,200,200);
}
la declaración:
display: table-cell;
ocasiona que el elemento objetivo (de hecho, tres elementos objeto, autor, titulo y fecha) se comporte como un elemento <td> del HTML convencional, o sea como una celda de tabla.
Con la regla CSS:
cabeceras {
display: table-header-group;
}
la declaración:
display: table-header-group;
hace que el elemento objetivo (cabeceras) se comporte como el elemento <thead> del HTML convencional. Del mismo modo, con la regla CSS:
pies {
display: table-footer-group;
}
la declaración:
display: table-footer-group;
hace que el elemento objetivo (pies) se comporte como el elemento <tfoot> del HTML convencional.
Tomando lo anterior como una plantilla o “esqueleto”, el lector puede hacer experimentos introduciendo sus propias modificaciones para agregar a la tabla información adicional, tales como la información “Precio” (de cada libro) en una cuarta columna, tras lo cual el lector puede modificar la tabla para crear sus propias tablas en XML/CSS con información o datos que le sean afines.
No entraremos en detalles sobre la manera en la cual podemos tomar algo como lo siguiente dado en XML:
<descripcion>agregándole a las etiquetas de marcado atributos:
<titulo>Tratado de Quimica</titulo>
<autor>Antonio Lorenzo Lavoisier</autor>
<fecha>1783</fecha>
</descripcion>
<descripcion idioma="castellano">que proporcionen información adicional, porque esta información adicional generalmente no es manejada con CSS sino con algún lenguaje de programación (pidiéndole a la página Web, por ejemplo, que liste todos los libros disponibles en la categoría de estadística, o pidiéndole que liste todos los libros elaborados en Portugués). Pero si tal cosa se requiere por alguna razón especial, los atributos en XML pueden ser manejados mediante CSS recurriendo a los selectores precedidos con el símbolo “.” o con el símbolo “#”. Los atributos en XML, al igual que los atributos en las etiquetas de marcado HTML, proporcionan información adicional acerca de los elementos, pero esta información generalmente no forma parte de los datos, son usados más bien como metadatos. En virtud de que los atributos en XML no son fáciles de leer y dificultan el mantenimiento del código, la recomendación de los expertos es evitarlos hasta donde sea posible, siendo recomendable tomar los atributos convirtiéndolos en elementos. De este modo, si se tiene en mente algo como lo siguiente usando atributos:
<titulo categoria="quimica">Tratado de Quimica</titulo>
<autor>Antonio Lorenzo Lavoisier</autor>
<fecha>1783</fecha>
</descripcion>
<descripcion idioma="castellano">entonces siguiendo los consejos de los “gurús” es mejor convertir los atributos a elementos usando lo siguiente en lugar de lo anterior:
<titulo categoria="quimica">Tratado de Quimica</titulo>
<autor>Antonio Lorenzo Lavoisier</autor>
<fecha>1783</fecha>
</descripcion>
<descripcion>Si para un documento XML se pueden definir con la ayuda de CSS etiquetas propias que puedan producir efectos de estilización como los que se obtienen en las páginas HTML con sus propias etiquetas, esto abre la posibilidad de que podamos definir por nuestra propia cuenta las etiquetas clásicas de HTML tales como <html>, <body>, <head>, etc., dándoles sentido con los selectores CSS. Sin embargo, esto no es necesario, puesto que ya fue hecho por otros con la creación del lenguaje de marcado XHTML. En el lenguaje de marcado XHTML ya se tienen predefinidas las etiquetas clásicas de marcado HTML, las cuales no es necesario definir dentro de una hoja de estilos CSS externa en virtud de que la interpretación de las mismas es una de las tareas que lleva a cabo un navegador al momento de abrir un documento XHTML. De este modo, podemos elaborar un documento XHTML como si fuese un documento HTML usando las etiquetas <html>, <body>, <head> y otras de la manera usual, y a tales etiquetas podemos agregar nuestras propias etiquetas de marcado que vayamos inventando en el camino.
<idioma>castellano</idioma>
<titulo>Tratado de Quimica</titulo>
<categoria>quimica</categoria>
<autor>Antonio Lorenzo Lavoisier</autor>
<fecha>1783</fecha>
</descripcion>
El atractivo de poder crear nuestras propias etiquetas de marcado sumado a la capacidad de poder elaborar un documento HTML de la manera usual (con ajustes mínimos, tales como usar letras minúsculas en las etiquetas de marcado HTML, o sea usando <html> en lugar de <HTML> y así por el estilo) llevó a suponer que en un futuro no lejano las páginas Web elaboradas mediante XHTML terminarían reemplazando y desplazando por completo al HTML convencional. Sin embargo, no cualquiera sabe cómo combinar la estilización CSS con XML para hacer que las etiquetas de marcado creadas ex-profeso por el programador Web funcionen como se espera que deban funcionar, lo cual presupone de antemano que el programador se ha vuelto diestro en el uso y manejo de CSS. Ante la creciente complejidad, se concibió como alternativa para reemplazar al HTML 4.01 (con sus tres formatos distintos) el lenguaje de marcado HTML5, el cual entró en competencia directa con XHTML, a grado tal que el consorcio mundial W3C ha considerado abandonar su apoyo a XHTML para dárselo a HTML5. Ciertamente, XML es más formal y más elegante (y conceptualmente más sencillo) que el HTML tradicional, pero el debate sobre la preferencia que se deba dar a XHTML sobre HTML5 (o viceversa) pierde de vista una distinción importante: HTML fue creado para presentar contenidos a los internautas, estilizando dichos contenidos con CSS, mientras que XML fue creado para el envío de datos de un servidor Web a la máquina del usuario. Es común que el internauta no se enlace frecuentemente a vínculos que abren páginas XML que a su vez invoquen una hoja de estilos CSS; lo más común es que el internauta se siga conectando a sitios que le manden páginas Web elaboradas con algo como HTML5, dentro de los cuales además de invocarse un archivo externo CSs se invocará una página XML cuyos datos serán procesados en la máquina del usuario mediante un lenguaje de programación como JavaScript o Java, y de esto último es de lo que trata precisamente la técnica AJAX (Asynchronous JavaScript, observándose de paso que Ajax es el héroe del sitio de Troya conocido en el mundo en castellano como Ayax) que combina a HTML con XML y con CSS y con JavaScript para sacarle el máximo provecho a la publicación de páginas Web que sean informativas, accesibles, fáciles de usar, y además interactivas.
