<?xml version="1.0" encoding="UTF-8"?>
<!--
===============================
Lenguajes de Marcas
Bloque 5, actividad 5, parte 3.
Alumno: Miguel I. García López.
===============================
Enunciado:
"Generar un fichero XSL (p3.xsl) igual que el
anterior pero realizado con plantillas y que al
hacer clic en la foto, nos lleve a la URL
almacenada."
La tabla se muestra ordenada por el nombre del producto.
-->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<!-- Definimos el nombre del programa de gestión y el copyright -->
<xsl:variable name="programa" select="'SuperMarket de Luxe v1.05'"/>
<xsl:variable name="copyright" select="'(c) 2014 Miguel García'"/>
<!-- Inicio de la salida HTML -->
<html>
<head>
<title>
Actividad 5.3: Miguel I. García López
</title>
<!-- Definición de estilos -->
<style>
body
{
font-family: Tahoma, Verdana, Arial, sans-serif;
text-align: center;
}
table, th, td
{
border-style: outset;
border-width: 2px;
border-color: black;
border-collapse:collapse;
}
th
{
font-family: "Times News Roman", serif;
font-variant: small-caps;
font-weight: bold;
font-size: medium;
color: white;
background-color: brown;
text-align: center;
}
td
{
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: small;
text-align: left;
}
</style>
</head>
<body>
<!-- Mostrar el logotipo del supermercado -->
<img src="{/productos/@logo}" alt="Logo del supermercado" />
<!-- Mostrar el nombre del supermercado entre corchetes -->
<h1>
[<xsl:value-of select="/productos/@supermercado"/>]
</h1>
<!-- Mostrar el título del informe, y el nº de productos listados -->
<h2>
Listado de productos, ordenados por nombre:
<xsl:value-of select="count(/productos/producto)"/> productos en total.
</h2>
<!-- Mostrar la tabla -->
<table style="width: 60%; margin-left: auto; margin-right: auto">
<!-- Mostrar las cabeceras -->
<tr>
<th>Producto</th>
<th>Distribuidor</th>
<th>Fotografía</th>
</tr>
<!-- Listar los productos -->
<xsl:apply-templates select="productos/producto">
<!-- Ordenar por nombre de producto -->
<xsl:sort select="nombre"/>
</xsl:apply-templates>
</table>
<!-- Mostrar el nombre del programa y copyright -->
<h2>
<xsl:value-of select="$programa"/> - <xsl:value-of select="$copyright"/>
</h2>
</body>
</html>
</xsl:template>
<!-- Plantilla para producto -->
<xsl:template match="producto">
<tr style="background-color: silver">
<xsl:apply-templates select="nombre"/>
<xsl:apply-templates select="distribuidor"/>
<xsl:apply-templates select="foto"/>
</tr>
</xsl:template>
<!-- Plantilla para el nombre del producto -->
<xsl:template match="nombre">
<td style="padding-left: 1em">
<xsl:value-of select="."/>
</td>
</xsl:template>
<!-- Plantilla para el nombre de la empresa distribuidora -->
<xsl:template match="distribuidor">
<td style="padding-left: 1em">
<xsl:value-of select="./empresa/razon_social"/>
</td>
</xsl:template>
<!-- Plantilla para el enlace con la fotografía -->
<xsl:template match="foto">
<td style="background-color: white; width: 96px; height: 96px">
<!-- Enlace a la página web del producto -->
<a href="{../mas_info}">
<img src="{.}" width="96" height="96" alt="Enlace a la web de {../nombre}"/>
</a>
</td>
</xsl:template>
</xsl:stylesheet>
No hay comentarios:
Publicar un comentario