Apuntes básicos del Tema 6

LENGUAJES DE MARCAS
Tema 6
Apuntes básicos del Tema 6
CSS con documentos XML
Contenidos:
1. Introducción: CSS con documentos XML
2. Diferencias fundamentales con la aplicación de CSS en HTML
3.
Como incluir la hoja de estilos externa en el documento XML
4.
Un ejemplo sencillo
5. Aplicando estilos en XML
6.
Incluir la hoja de estilo en el documento
7. Otras posibilidades de presentaciones de documentos XML
1. - Introducción: CSS con documentos XML
Volviendo al ámbito
de XML después de haber visto en los dos temas anteriores la
particularización en XHTML y su presentación con las hojas de estilo CSS, debe quedar todavía
más claro (si cabe) la separación total y absoluta entre el contenido y la presentación de nuestros
documentos.
Hemos visto en los tres primeros temas qué es XML y los requisitos y técnicas para que sean bien
formados y válidos, teniendo en cuenta la estructura y contenidos de los documentos que lo utilizan,
por lo que podemos decir que XML se encarga del contenido de la información pero no interviene
para nada en la presentación. Sin embargo, hemos de ser muy conscientes de que hoy en día la
presentación visual es un factor muy importante.
Aunque en los próximos temas veremos que hay otras técnicas para poder modificar y ampliar las
características de presentación de los datos contenidos en documentos XML, vamos a ver ahora
como las hojas de estilo en general sirven para mejorar la expresividad de los datos ya que se
pueden utilizar para establecer la mayoría de las características visuales, por ejemplo, los colores, la
visualización en bloques, el tamaño de la fuente, etc. de forma que podremos usar nuestros
documentos XML en el navegador como si se tratase de una página HTML.
Curso 2012/2013
1
LENGUAJES DE MARCAS
Tema 6
No obstante, no debemos olvidar que aunque CSS2 sirven tanto para HTML como para XML,
debido a que ya fue desarrollado teniendo en cuenta estas especificaciones, su desarrollo actual en
XML esta menos comprobado y documentado que en HTML cosa que nos obliga a extremar la
comprobación en los distintos navegadores del uso que de esta técnica podamos hacer.
2. - Diferencias fundamentales con la aplicación de CSS en HTML
Resaltamos tres características diferenciadoras que se deben tener en cuenta cuando pasamos a
utilizar las hojas de estilo en el ámbito de XML después de haberlas manejado en el contexto de
HTML:
•
La principal diferencia en este contexto (la de presentación de los datos en un navegador)
que hemos de tener en cuenta es que en HTML las etiquetas están limitadas, tienen una
función definida y conocida, y por lo tanto los navegadores ya tiene una hoja de estilo por
defecto para establecer el estilo inicial de todos los elementos HTML cuando la página no
incluye ninguna hoja de estilos propia. Por ejemplo, cuando el navegador se encuentre la
etiqueta <h1> además de entender que se trata de un encabezamiento de mayor importancia,
si sus características no han sido modificadas
mediante estilos incorporados,
probablemente visualizará el texto en times new roman con un tamaño de 24 puntos. Otra
cosa es que los distintos navegadores se pongan de acuerdo para hacerlo de forma
homogénea.
Pero en los documentos XML las etiquetas que podemos definir son infinitas y los
navegadores no tienen ninguna información para su presentación, por lo que dependerá
exclusivamente de la información añadida que nosotros incorporemos.
•
Por otra parte, los atributos style y class, así como los elementos <style> o <link> no pueden
usarse en XML ya que no tienen el significado que interpreta el navegador cuando son
utilizados en documentos html.
Como veremos en el apartado siguiente, la forma habitual de incorporar la hoja de estilos a
nuestro documento XML será mediante la instrucción de procesamiento
<?xml-stylesheet type=”text/css” href=”url_hoja_estilo” ?>.
Curso 2012/2013
2
LENGUAJES DE MARCAS
Tema 6
aunque como comentaremos al final del tema también podremos hacer algún truco para
poder incorporar los estilos
en el propio documento, acción por otra parte no muy
aconsejable.
•
Este sistema de utilización de CSS en XML para presentar la información solo es
aconsejable para su visualización si el contenido del documento está formado por texto y los
datos se organizan y presentan de forma sencilla y secuencial, mostrando la totalidad de la
información. Para presentaciones más sofisticadas veremos en los próximos temas otras
soluciones, entre las que figura la posibilidad de transformar un documento XML en otro
HTML.
3. - Como incluir la hoja de estilos externa en el documento XML
Ya hemos avanzado en el punto anterior que la forma habitual de incorporar la hoja de estilos a
nuestro documento XML será la llamada externa mediante la instrucción de procesamiento
<?xml-stylesheet type=”text/css” href=”url_hoja_estilo” ?>.
Recordemos que una instrucción de procesamiento está pensada para proporcionar información a
las aplicaciones pero no forma parte del documento. Ya hemos utilizado esta instrucción para crear
el prólogo de los documentos XML, que habitualmente comenzaban por:
<?xml version="1.0" encoding="ISO-8859-1" ?>
La llamada a la hoja de estilo estará situada necesariamente entre este prólogo y el elemento raíz del
documento. Por ejemplo:
En este caso la llamada podría estar situada antes o después de <!DOCTYPE …pero siempre
después de <?xml... y antes de <BIBLIOTECA>
Esta sintaxis es muy similar a la etiqueta link de HTML, con los atributos:
•
•
type =“text/css” que indica que el documento es una hoja de estilos.
href=”url_hoja_estilo” que contiene la dirección absoluta o relativa donde se encuentra el
fichero de estilos
Curso 2012/2013
3
LENGUAJES DE MARCAS
Tema 6
4. - Un ejemplo sencillo
Vamos a utilizar un ejemplo muy simple sobre películas en documento XML para ver de forma
sencilla la transformación que puede aplicarse en la visualización de la información que contiene
dentro del navegador.
Una simplificación de ese caso podría ser el siguiente documento XML ya validado:
Si lo visualizamos en el navegador obtenemos la conocida vista:
Si ahora le incluimos la instrucción de procesamiento correspondiente:
y creamos una sencilla hoja de estilos peliculas_css_1.css con el contenido simple:
Curso 2012/2013
4
LENGUAJES DE MARCAS
Tema 6
Al visualizarlo en el navegador nos queda:
Comprobamos que nos ha hecho caso en todas las especificaciones que hemos realizado en nuestra
hoja de estilos, aunque el contenido sale siempre en la misma línea.
Este detalle tendrá que tenerse siempre en cuenta ya que una de las diferencias principales entre
HTML y XML es que no están definidos los elementos como de bloque o de línea.
Por defecto en XML todos los elementos serán en línea, y para que tenga las características de
elementos en bloque tendremos que trasformarlo explicitamente con la propiedad display que ya
conocemos del tema anterior. Aunque pongamos la propiedad en el elemento raíz esta no se hereda,
como vemos ya incorporada en el
elemento filmoteca que es el elemento raíz de nuestro
documento:
y que incluso después de incorporar más películas en nuestro fichero XML, siguen apareciendo
todos los elementos en línea:
Curso 2012/2013
5
LENGUAJES DE MARCAS
Tema 6
Para comenzar a solucionarlo incorporamos la regla correspondiente al elemento pelicula con la
propiedad display:
y ya obtenemos algo más legible:
No obstante, para poder visualizar cada elemento separadamente tendremos que incluir la propiedad
display en cada uno ellos:
Añadimos también alguna otra propiedad:
y nos quedará:
Bien, aunque el resultado no sea muy artístico nos ha servido de guía elemental para iniciar la
aplicación de CSS en XML. En el apartado siguiente comentaremos algunas otras características y
aplicaciones útiles.
Curso 2012/2013
6
LENGUAJES DE MARCAS
Tema 6
5. - Aplicando estilos en XML
Como ya hemos comentado en la introducción, CSS2 fue desarrollado ya pensando en XML por lo
que sus normas pueden ser aplicadas igual que en HTML, tal y como se indica en la introducción
de su especificación:
CSS2 es un lenguaje de hojas de estilo que permite a los autores y usuarios
enlazar estilos de formato a documentos estructurados, como los documentos
HTML y las aplicaciones XML.el consorcio CW3......
No obstante, no debemos olvidar que aunque .CSS2 sirven tanto para HTML como para XML,en la
práctica nos encontraremos . que muchas características de los estándares no funcionan o funcionan
en un navegador y no en otro (aunque esto último también hemos visto que ocurría en la aplicación
sobre HTML).
Ya que estas técnicas están mucho menos comprobadas y documentadas para XML que para HTML
tendremos que ser muy estrictos en la comprobación de su correcta implementación.
Vamos a ver ahora algunos casos, ya conocidos por su aplicación en HTML, pero que pueden ser
interesantes en el ámbito de XML. Se recuerda que todas las comprobaciones están hechas bajo el
navegador Firefox, y que su funcionamiento no está garantizado en otros.
a) Ocultar elementos en la visualización.
Como la presentación de la información de un documento XML se realiza de forma
secuencial mostrando siempre la totalidad de la información, cabe recordar el uso de la
propiedad display para omitir un determinado elemento
Si queremos que solo aparezca el título y el Obtenemos:
director:
Curso 2012/2013
7
LENGUAJES DE MARCAS
Tema 6
Pero en ese caso sabemos que quedará el
También
podemos
utilizar
la
propiedad
hueco correspondiente a esa información:
visibility :
b) Poner etiquetas a la información:
Dado que nuestros documentos XML tienen un perfil muy marcado como contenedores de datos
(por eso nos recuerdan tan a menudo las bases de datos) parece muy interesante incluir en su
visualización información referente a la naturaleza del dato que presentamos. Podemos incluir
etiquetas delante de cada elemento haciendo uso de las pseudo-clases de CSS.
Veamoslo en nuestro ejemplo, aplicado al elemento Título:
Añadimos en nuestra hoja de estilos:
Obtenemos:
De la misma forma, podrían tener su correspondiente etiqueta el resto de elementos.
Curso 2012/2013
8
LENGUAJES DE MARCAS
Tema 6
c) Atributos de XML en CSS
En nuestros documentos XML hemos utilizado en alguna ocasión la información incluida en
atributos en lugar de ocupar un elemento, pero esta información no es transmitida al navegador de
forma directa para su visualización.
Podemos hacer uso del selector de atributos de CSS para combinarlo con las pseudo-clases y así
subsanar este problema.
Vamos a añadir el elemento reparto en nuestro documento:
<reparto>
<interprete papel="protagonista">Jonathan Pryce</interprete>
<interprete papel="protagonista">Robert De Niro</interprete>
<interprete papel="secundario">Michaelk Palin</interprete>
<interprete>Bob Hoskins</interprete>
</reparto>
Una vez modificado el correspondiente DTD para poder validarlo (notar que debe permitir el
atributo como optativo, ya que en algún caso no se especifica):
Curso 2012/2013
9
LENGUAJES DE MARCAS
Tema 6
Añadimos en el documento CSS las siguientes Que tendrán el efecto:
reglas:
d) Presentación por medio de tablas
Ya sabemos que las tablas se encuentran en la frontera entre el contenido y la presentación de los
elementos, especialmente teniendo en cuenta el mal uso que se ha hecho de esta herramienta dentro
de HTML. Pero en realidad debería de ser un elemento de presentación y particularmente adecuado
en el caso de los posibles datos que contienen los documentos XML.
Mediante el valor “table” de la propiedad display podemos aprovechar para formatear nuestros
documentos. Si volvemos a nuestro documento sencillo inicial con las tres películas incorporadas y
redactamos un documento CSS como el siguiente:
Curso 2012/2013
10
LENGUAJES DE MARCAS
Tema 6
podemos obtener la siguiente visualización de los datos:
6) Incluir la hoja de estilo en el documento
Ya hemos visto en el punto 3 que la forma normal, aconsejable y prevista de incluir los estilos en
los documentos XML es mediante su creación en un documento CSS externo y enlazarlo mediante
la instrucción de procesamiento
<?xml-stylesheet type=”text/css” href=”url_hoja_estilo” ?>.
No obstante, puede ser útil disponer de un mecanismo para excepcionalmente poder trabajar con
los estilos dentro del propio documento. El problema, como hemos comentado anteriormente, es
que en XML no tiene sentido la etiqueta <STYLE> ya que carece de significado y se entendería
como una etiqueta de elemento más, diseñada por nosotros.
Curso 2012/2013
11
LENGUAJES DE MARCAS
Tema 6
Pero podemos hacer un pequeño truco basado en la utilización de la propiedad y valor display:none
y haciendo referencia a la llamada al estilo mediante el símbolo #
Lo vemos como ejemplo en el caso más sencillo que hemos utilizado anteriormente. Los pasos han
sido:
1. Incorporar las definiciones de estilo en <st> como un elemento más dentro del elemento
raíz <filmoteca>
2. Incorporar el atributo id=”miestilo” en este nuevo elemento.
3. Aplicar la propiedad display:none al elemento <st> para ocultar la visualización del código
que contiene.
4. Sustituir la URL de la hoja de estilo externa por la referencia a “#miestilo”
Este sería el contenido del documento XML compacto incluyendo internamente la definición de los
estilos:
Curso 2012/2013
12
LENGUAJES DE MARCAS
Tema 6
7) Otras posibilidades de presentaciones de documentos XML: de CSS
a XSL
En el punto 1 hemos comentado que en los próximos temas veremos que hay otras técnicas para
poder modificar y ampliar las características de presentación de los
datos contenidos en
documentos XML. En concreto la alternativa la presenta la tecnología XSL y más concretamente el
lenguaje de transformación XSLT.
Curso 2012/2013
13
LENGUAJES DE MARCAS
Tema 6
Podríamos preguntarnos la necesidad de un nuevo método de presentación si ya disponemos de
CSS, pero como ya hemos dicho antes este sistema solo es aconsejable para su visualización si el
contenido del documento está formado mayoritariamente por texto y los datos se organizan y
presentan de forma sencilla y secuencial, mostrando la totalidad de la información.
Con la aplicación de XSL no solamente podremos organizar la presentación de forma sencilla y
organizada
sino que también nos servirá para filtrar los datos basándonos en condiciones
prefijadas, de forma similar a la utilización de un lenguaje de programación. Pero eso ya lo veremos
en un tema próximo...
Curso 2012/2013
14