Ejemplo de aplicación de hojas de estilo
Anuncio
Documento XML (receta.xml)
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<?xml-stylesheet href="rec.html.xsl" type="text/xsl"?>
<!--<?xml-stylesheet href="receta.css" type="text/css"?>-->
<!DOCTYPE receta SYSTEM "receta.dtd" [
<!ENTITY comer "Bon appétit! "> ]>
<receta tipo="postre" tiempoprep="15" comensales="4">
<titulo>Tarta de queso</titulo>
<lista-ingredientes>
<item>3 yogures naturales</item>
<item>3 huevos</item>
<item>una cucharada de maicena</item>
<item>1 tarrina de crema de queso</item>
<item>6 cucharadas de azúcar</item>
</lista-ingredientes>
<preparacion>
<paso necesario="no">Tener a mano todos los ingredientes,
la batidora y el recipiente para la tarta.</paso>
<paso>Batir todos los ingredientes.</paso>
<paso>Verter en un molde previamente caramelizado y cocer
durante 13 minutos en el microondas a máxima potencia.</paso>
<paso necesario="no">Servir cubierta de mermelada.</paso>
<paso necesario='no'>&comer;</paso>
</preparacion>
</receta>
César I. G. Osorio. Área de LSI. Universidad de Burgos.
DTD (receta.dtd)
<!ELEMENT receta (titulo, lista-ingredientes,
preparacion)>
<!ATTLIST receta
tipo
CDATA #IMPLIED
comensales CDATA #IMPLIED
tiempoprep CDATA #IMPLIED >
<!ELEMENT titulo (#PCDATA)>
<!ELEMENT lista-ingredientes (item+)>
<!ELEMENT item (#PCDATA)>
<!ELEMENT preparacion (paso+)>
<!ELEMENT paso (#PCDATA)>
<!ATTLIST paso
necesario (si|no) "si">
1
Un ejemplo de hoja de estilo XSL (rec.htm.xsl)
César I. G. Osorio. Área de LSI. Universidad de Burgos.
<?xml version="1.0"?> Declaración de espacio de nombres
<xsl:stylesheet
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
<xsl:template match="lista-ingredientes">
<hr/>
<ul class="ingredientes" style="font-size: 10pt; color: blue;">
<xsl:apply-templates/>
</ul><hr/>
</xsl:template>
<xsl:template match="/">
<html><xsl:apply-templates/></html>
</xsl:template>
<xsl:template match="item">
<li><xsl:value-of select="."/></li>
</xsl:template>
Plantilla o regla XSL
2
<xsl:template match="preparacion">
<ol><xsl:apply-templates/></ol>
</xsl:template>
<xsl:template match="receta"> Patrón de concordancia
<head><title><xsl:value-of select="titulo"/></title></head>
<body style="background-color: #FFC;">
<xsl:apply-templates/>
</body>
</xsl:template> Valor de instanciación: texto literal + instrucciones XSL
<xsl:template match="paso[@necesario='si']">
<li><xsl:value-of select="."/></li>
</xsl:template>
<xsl:template match="titulo">
<h1 align="center"><xsl:value-of select="."/>
(<xsl:value-of select="../@tiempoprep"/> min.)</h1>
</xsl:template>
<xsl:template match="paso[@necesario='no']">
<li style="color: green;"><xsl:value-of select="."/></li>
</xsl:template>
</xsl:stylesheet>
César I. G. Osorio. Área de LSI. Universidad de Burgos.
3
César I. G. Osorio. Área de LSI. Universidad de Burgos.
4
//
//
comensales=“4"
comensales=“4"
<?xml-stylesheet href="rec.html.xsl" type="text/xsl"?>
<?xml-stylesheet href="rec.html.xsl" type="text/xsl"?>
tiempoprep=“15"
receta
receta
titulo
titulo
lista-ingredientes
lista-ingredientes
tipo=“postre"
preparacion
preparacion
<xsl:template match="/">
<html><xsl:apply-templates/></html>
</xsl:template>
necesario="no"
Tener a mano todos
los ingredientes ...
paso
paso
necesario="si"
item
item
item
item
item
item
item
item
1 cucharadita
de maicena
3 yogures
naturales
3 huevos
item
item
Batir todos los
ingredientes
paso
paso
6 cucharadas
de azucar
necesario="si"
1 tarrina de
crema de queso
...
Salida que
se produce
<html>
</html>
Verter en un
molde ...
paso
paso
&comer;
paso
paso
5
César I. G. Osorio. Área de LSI. Universidad de Burgos.
tipo=“postre"
Plantilla que
se aplica
Tarta de queso
tiempoprep=“15"
receta
receta
6
César I. G. Osorio. Área de LSI. Universidad de Burgos.
comensales=“4"
<?xml-stylesheet href="rec.html.xsl" type="text/xsl"?>
tiempoprep=“15"
//
receta
receta
comensales=“4"
tipo=“postre"
<?xml-stylesheet href="rec.html.xsl" type="text/xsl"?>
tiempoprep=“15"
receta
receta
titulo
titulo
tipo=“postre"
7
César I. G. Osorio. Área de LSI. Universidad de Burgos.
Salida que
se produce
</body>
</html>
necesario="no"
Tener a mano todos
los ingredientes ...
Plantilla que
se aplica
<html>
<head><title>Tarta de queso</title></head>
<body style="background-color: #FFC;">
Salida que
se produce
César I. G. Osorio. Área de LSI. Universidad de Burgos.
paso
paso
<xsl:template match="receta">
<head><title><xsl:value-of select="titulo"/>
</title></head>
<body style="background-color: #FFC;">
<xsl:apply-templates/>
</body>
</xsl:template>
Plantilla que
se aplica
<xsl:template match="processing-instruction()">
...
</xsl:template>
<html>
</html>
preparacion
preparacion
Tarta de queso
No hay plantilla aplicable en la hoja de estilo.
El patrón de una plantilla que concordara sería:
lista-ingredientes
lista-ingredientes
8
comensales=“4"
comensales=“4"
<?xml-stylesheet href="rec.html.xsl" type="text/xsl"?>
<?xml-stylesheet href="rec.html.xsl" type="text/xsl"?>
tiempoprep=“15"
receta
receta
titulo
titulo
lista-ingredientes
lista-ingredientes
tipo=“postre"
preparacion
preparacion
Tarta de queso
paso
paso
necesario="no"
titulo
titulo
Tener a mano todos
los ingredientes ...
Tarta de queso
Tarta de queso
item
item
3 yogures
naturales
paso
paso
item
item
3 huevos
item
item
item
item
1 cucharadita
de maicena
item
item
6 cucharadas
de azucar
paso
paso
titulo
titulo
Tener a mano todos
los ingredientes ...
Tarta de queso
necesario="si"
item
item
item
item
item
item
3 yogures
naturales
3 huevos
1 cucharadita
de maicena
Batir todos los
ingredientes
preparacion
preparacion
paso
paso
item
item
item
item
6 cucharadas
de azucar
necesario="no"
Tener a mano todos
los ingredientes ...
necesario="si"
paso
paso
Batir todos los
ingredientes
César I. G. Osorio. Área de LSI. Universidad de Burgos.
Salida que
se produce
11
...
<hr/><ul class="ingredientes"
style="font-size: 10pt; color: blue;">
<li>3 yogures naturales</li>
<li>3 huevos</li>
</ul><hr/>
...
necesario="si"
Plantilla que
se aplica
crema de queso
<xsl:template match="item">
<li><xsl:value-of select="."/></li>
</xsl:template>
Salida que
se produce
César I. G. Osorio. Área de LSI. Universidad de Burgos.
lista-ingredientes
lista-ingredientes
1 tarrina de
necesario="si"
Plantilla que
se aplica
...
<hr/><ul class="ingredientes"
style="font-size: 10pt; color: blue;">
<li>3 yogures naturales</li>
</ul><hr/>
...
10
César I. G. Osorio. Área de LSI. Universidad de Burgos.
necesario="no"
1 tarrina de
crema de queso
<xsl:template match="item">
<li><xsl:value-of select="."/></li>
</xsl:template>
Tener a mano todos
los ingredientes ...
Salida que
se produce
preparacion
preparacion
necesario="no"
Plantilla que
se aplica
9
César I. G. Osorio. Área de LSI. Universidad de Burgos.
lista-ingredientes
lista-ingredientes
preparacion
preparacion
...
<h1 align="center">Tarta de queso (15 min.)</h1>
<hr/><ul class="ingredientes"
style="font-size: 10pt; color: blue;">
</ul><hr/>
...
Salida que
se produce
<html>
<head><title>Tarta de queso</title></head>
<body style="background-color: #FFC;">
<h1 align="center">Tarta de queso (15 min.)</h1>
</body>
</html>
lista-ingredientes
lista-ingredientes
tipo=“postre"
paso
paso
<xsl:template match="lista-ingredientes">
<hr/><ul class="ingredientes"
style="font-size: 10pt; color: blue;">
<xsl:apply-templates/>
</ul><hr/>
</xsl:template>
Plantilla que
se aplica
<xsl:template match="titulo">
<h1 align="center">
<xsl:value-of select="."/>
(<xsl:value-of select="../@tiempoprep"/> min.)
</h1>
</xsl:template>
titulo
titulo
tiempoprep=“15"
receta
receta
12
titulo
titulo
lista-ingredientes
lista-ingredientes
preparacion
preparacion
Tarta de queso
item
item
3 yogures
naturales
paso
paso
item
item
item
item
3 huevos
1 cucharadita
de maicena
item
item
item
item
6 cucharadas
de azucar
paso
paso
titulo
titulo
necesario="no"
Tener a mano todos
los ingredientes ...
Tarta de queso
necesario="si"
item
item
Batir todos los
ingredientes
3 yogures
naturales
1 tarrina de
preparacion
preparacion
Tarta de queso
paso
paso
3 yogures
naturales
3 huevos
1 cucharadita
de maicena
item
item
3 huevos
1 cucharadita
de maicena
item
item
item
item
necesario="si"
6 cucharadas
de azucar
paso
paso
Batir todos los
ingredientes
item
item
item
item
6 cucharadas
de azucar
1 tarrina de
crema de queso
tiempoprep=“15"
Tener a mano todos
los ingredientes ...
receta
receta
tipo=“postre"
necesario="si"
paso
paso
titulo
titulo
Batir todos los
ingredientes
lista-ingredientes
lista-ingredientes
preparacion
preparacion
Tarta de queso
necesario="si"
paso
paso
<xsl:template match="preparacion">
<ol><xsl:apply-templates/></ol>
</xsl:template>
César I. G. Osorio. Área de LSI. Universidad de Burgos.
Salida que
se produce
15
...
<li>1 tarrina de crema de queso</li>
<li>6 cucharadas de azucar</li>
</ul><hr/>
<ol>
</ol>
...
necesario="no"
Tener a mano todos
los ingredientes ...
Plantilla que
se aplica
César I. G. Osorio. Área de LSI. Universidad de Burgos.
14
César I. G. Osorio. Área de LSI. Universidad de Burgos.
<?xml-stylesheet href="rec.html.xsl" type="text/xsl"?>
Salida que
se produce
...
<li>3 huevos</li>
<li>1 cucharadita de maicena</li>
<li>1 tarrina de crema de queso</li>
<li>6 cucharadas de azucar</li>
</ul><hr/>
...
...
<li>3 yogures naturales</li>
<li>3 huevos</li>
<li>1 cucharadita de maicena</li>
<li>1 tarrina de crema de queso</li>
</ul><hr/>
...
comensales=“4"
necesario="no"
Plantilla que
se aplica
<xsl:template match="item">
<li><xsl:value-of select="."/></li>
</xsl:template>
necesario="si"
Salida que
se produce
lista-ingredientes
lista-ingredientes
item
item
item
item
necesario="no"
Tener a mano todos
los ingredientes ...
Plantilla que
se aplica
Salida que
se produce
13
César I. G. Osorio. Área de LSI. Universidad de Burgos.
item
item
paso
paso
crema de queso
<xsl:template match="item">
<li><xsl:value-of select="."/></li>
</xsl:template>
Plantilla que
se aplica
...
<hr/><ul class="ingredientes"
style="font-size: 10pt; color: blue;">
<li>3 yogures naturales</li>
<li>3 huevos</li>
<li>1 cucharadita de maicena</li>
</ul><hr/>
item
item
preparacion
preparacion
1 tarrina de
necesario="si"
crema de queso
<xsl:template match="item">
<li><xsl:value-of select="."/></li>
</xsl:template>
titulo
titulo
lista-ingredientes
lista-ingredientes
16
titulo
titulo
lista-ingredientes
lista-ingredientes
preparacion
preparacion
Tarta de queso
paso
paso
necesario="no"
titulo
titulo
Tener a mano todos
los ingredientes ...
Tarta de queso
lista-ingredientes
lista-ingredientes
preparacion
preparacion
paso
paso
necesario="si"
item
item
item
item
item
item
item
item
1 cucharadita
de maicena
3 yogures
naturales
item
item
paso
paso
6 cucharadas
de azucar
3 yogures
naturales
item
item
item
item
item
item
1 cucharadita
de maicena
3 yogures
naturales
3 huevos
item
item
paso
paso
6 cucharadas
de azucar
1 tarrina de
crema de queso
...
César I. G. Osorio. Área de LSI. Universidad de Burgos.
Verter en un
molde ...
&comer;
Salida que
se produce
...
<li>Batir todos los ingredientes</li>
<li>Verter en un molde caramelizado</li>
</ol>
...
paso
paso
6 cucharadas
de azucar
...
<li style="color: green;">
Tener a mano todos los ingredientes
</li>
<li>Batir todos los ingredientes</li>
</ol>
...
Batir todos los
ingredientes
César I. G. Osorio. Área de LSI. Universidad de Burgos.
18
<html>
<head><title>Tarta de queso</title></head>
<body style="background-color: #FFC;">
<h1 align="center">Tarta de queso (15 min.)</h1>
<hr/>
<ul class="ingredientes" style="font-size:10pt; color:blue;">
<li>3 yogures naturales</li>
<li>3 huevos</li>
<li>una cucharada de maicena</li>
<li>1 tarrina de crema de queso</li>
<li>6 cucharadas de az&#250;car</li>
</ul>
<hr/>
<ol><li style="color: green;">Tener a mano todos los ingredientes,
la batidora y el recipiente para la tarta.</li>
<li>Batir todos los ingredientes.</li>
<li>Verter en un molde &quot;caramelizado&quot; y cocer
13 minutos en el microondas a m&#225;xima potencia.</li>
<li style="color: green;">Servir cubierta de mermelada.</li>
<li style="color: green;">Bon appétit!</li>
</ol>
</body>
</html>
Plantilla que
se aplica
paso
paso
<xsl:template match="paso[@necesario=‘si']">
<li>
<xsl:value-of select="."/>
</li>
</xsl:template>
item
item
Resultado de aplicar rec.htm.xsl
Batir todos los
ingredientes
necesario="si"
paso
paso
1 cucharadita
de maicena
item
item
Salida que
se produce
item
item
item
item
Plantilla que
se aplica
Salida que
se produce
17
César I. G. Osorio. Área de LSI. Universidad de Burgos.
item
item
<xsl:template match="paso[@necesario=‘si']">
<li>
<xsl:value-of select="."/>
</li>
</xsl:template>
Plantilla que
se aplica
...
<ol>
<li style="color: green;">
Tener a mano todos los ingredientes
</li>
</ol>
...
Tener a mano todos
los ingredientes ...
necesario="si"
item
item
Batir todos los
ingredientes
<xsl:template match="paso[@necesario='no']">
<li style="color: green;">
<xsl:value-of select="."/>
</li>
</xsl:template>
necesario="no"
19
César I. G. Osorio. Área de LSI. Universidad de Burgos.
20
Un ejemplo de hoja de estilo CSS (receta.css)
receta { display: block;
background-color: #FFC; }
titulo { display: block;
font-size: 24pt; }
lista-ingredientes {
display:
block;
font-size: 10pt;
color:
blue;
margin:
5pt 30pt;
}
item { display: list-item; }
paso { display: block; }
paso[necesario="no"] { color: green; }
César I. G. Osorio. Área de LSI. Universidad de Burgos.
21
César I. G. Osorio. Área de LSI. Universidad de Burgos.
22
23
César I. G. Osorio. Área de LSI. Universidad de Burgos.
24
Un ejemplo de hoja de estilo CSS (receta.css)
receta { display: block;
background-color: #FFC; }
titulo { display: block;
Regla CSS font-size: 24pt; }
lista-ingredientes { Selector de tipo de elemento
display:
block;
font-size: 10pt;
color:
blue;
margin:
5pt 30pt;
Valores
}
Propiedades
item { display: list-item; }
paso { display: block; }
paso[necesario="no"] { color: green; }
César I. G. Osorio. Área de LSI. Universidad de Burgos.
