Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

XML V

Imagen y enlaces

Enlaces

En esta página continuamos la explicación del uso de XSL para crear páginas web con documentos en XML. Utilizaremos el ejemplo de la página anterior, el cual lo ampliaremos para ponerle unos enlaces y unas imágenes.

Siguiendo con el ejemplo de la página anterior añadiremos a cada personaje un enlace a una web. Lo indicamos esto en la página XML mediante una nueva etiqueta. El contenido de esta etiqueta será el texto del enlace, y tendrá un atributo que será la ruta del enlace. Veamos la página con las nuevas líneas:

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet type="text/xsl" href="ejemplo.xsl"?>

<agenda_tebeo>
<personaje numero="1">
  <nombre>Mortadelo</nombre>
  <telefono>666555444</telefono>
  <email>mortadelo@tia.com</email>
  <web enlace="http://www.mortadeloyfilemon.com/index2.asp">
    web oficial</web>
</personaje>

<personaje numero="2">
  <nombre>Filemon Pi</nombre>
  <telefono>665544332</telefono>
  <email>filemon@tia.com</email>
  <web enlace="http://www.mortadeloyfilemon.com/personajes/protas.asp">
    Los personajes</web>
</personaje>

<personaje numero="3">
  <nombre>Superintendente Vicente</nombre>
  <telefono>678901234</telefono>
  <email>supervicen@tia.com</email>
  <web enlace="http://www.mortadeloyfilemon.com/juegos/index.asp">
    Juegos</web>
</personaje>

</agenda_tebeo>

En negrita hemos resaltado las líneas nuevas que no estaban en el archivo de la página anterior.

Ahora en el archivo XSL tenemos que insertar este contenido. para ello crearemos una etiqueta de enlace <a></a> dentro de esta etiqueta creamos un atributo que llamaremos href cuyo contenido será la ruta del enlace. Esto lo hacemos de la siguiente manera:

<a>
  <xsl:attribute name="href">
    <xsl:value-of select="web/@enlace"/>
  </xsl:attribute>
  <xsl:value-of select="web"/>
</a>

En la plantilla del archivo XSL ponemos una etiqueta de enlace pero sin atributos, es decir, la etiqueta <a> </a>.

Dentro de esta etiqueta incluimos otras, en primer lugar la etiqueta:

<xsl:attribute name="href">

Con la cual creamos un atributo y le damos como nombre href. Dentro de esta última etiqueta ponemos la ruta del enlace (valor del atributo href) mediante la etiqueta:

<xsl:value-of select="web/@enlace"/>

Donde web es el nombre de la etiqueta XML donde hemos puesto el enlace y enlace el nombre del atributo que contiene la ruta. Cerramos la primera etiqueta:

</xsl:attribute>

Y por último ponemos el texto del enlace dando valor a la etiqueta <a>

Debemos poner siempre la/s etiqueta/s de creación de atributos xsl:attribute antes que la etiqueta xsl:value-of-select que indica el valor de la etiqueta que contiene el atributo, (en este caso xsl:value-of select="web" ya que si no los atributos no tendrían efecto.

Veamos ahora esto aplicado al documento XML anterior. El archivo XSL, ya visto en la página anterior querará modificado añadiendole las líneas que mostramos en negrita:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="agenda_tebeo">

<html>
<head>
<title>Agenda tebeo</title>
</head>
<body>
<h1>Agenda de tebeo</h1>

<xsl:for-each select="personaje">
<div class="personaje">
  <h3>Personaje número: <xsl:value-of select="@numero"/></h3>
  <ul>
    <li><xsl:value-of select="nombre"/></li>
    <li><xsl:value-of select="telefono"/></li>
    <li><xsl:value-of select="email"/></li>
    <li>
      <a>
        <xsl:attribute name="href">
          <xsl:value-of select="web/@enlace"/>
        </xsl:attribute>
        <xsl:value-of select="web"/>
      </a>
    </li>
  </ul>
</div>
</xsl:for-each>

</body>
</html>
</xsl:template>
</xsl:stylesheet> 

El documento XML quedará en el navegador como en el siguiente enlace:

personajes_3

Imágenes

Para insertar una imagen en una página XML y poder verla en HTML, lo haremos de forma similar a como hemos hecho para insertar enlaces. al fin y al cabo dentro de la página HTML una imagen se escribe como una etiqueta con una serie de atributos, uno de los cuales es la ruta de la imagen.

Siguiendo con el ejemplo anterior insertaremos al lado de cada entrada de personaje la imagen del mismo. El archivo MXL quedará así: (en negrita el código que hemos insertado nuevo)

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet type="text/xsl" href="ejemplo9.xsl"?>

<agenda_tebeo>
<personaje numero="1">
  <dibujo ruta="objetos/mortadelo.gif"/>
  <nombre>Mortadelo</nombre>
  <telefono>666555444</telefono>
  <email>mortadelo@tia.com</email>
  <web enlace="http://www.mortadeloyfilemon.com/index2.asp">
    web oficial</web>
</personaje>

<personaje numero="2">
  <dibujo ruta="objetos/filemon.gif"/>
  <nombre>Filemon Pi</nombre>
  <telefono>665544332</telefono>
  <email>filemon@tia.com</email>
  <web enlace="http://www.mortadeloyfilemon.com/personajes/protas.asp">
    Los personajes</web>
</personaje>

<personaje numero="3">
  <dibujo ruta="objetos/super_vicente.gif"/>
  <nombre>Superintendente Vicente</nombre>
  <telefono>678901234</telefono>
  <email>supervicen@tia.com</email>
  <web enlace="http://www.mortadeloyfilemon.com/juegos/index.asp">
    Juegos</web>
</personaje>

</agenda_tebeo>

Ahora en el archivo XSL debemos introducir el código para tener las etiquetas de imagen. Sin embargo no podemos introducir la etiqueta de imagen directamente en la plantilla de XSL, ya que es una etiqueta vacía

Para crear nuevos elementos en la plantilla de XSL utilizaremos la etiqueta:

<xsl:element name="nombre"> ... </xsl:element>

Donde nombre Es el nombre que le daremos a la nueva etiqueta. Para crear una imagen pondremos img. Entre las etiquetas de apertura y cierre pondremos en primer lugar las etiquetas que crean los atributos, y (si no es una etiqueta vacía), el valor o contenido de la etiqueta; tal como hicimos para las etiquetas de enlace.

Por lo tanto para insertar una imagen pondremos en XSL un código parecido al siguiente:

<xsl:element name="img">
   <xsl:attribute name="src">
      <xsl:value-of select="dibujo/@ruta"/>
   </xsl:attribute>
   <xsl:attribute name="height">
      100
   </xsl:attribute>
</xsl:element>

Vamos a analizar este código:

Visto esto no será dificil poner las etiquetas de imagen en el archivo XSL de nuestro ejemplo: Para colocar la imagen en su sitio añadimos también algunas etiquetas de estilo en CSS el el código-plantilla. El código nuevo lo mostramos en negrita, y el archivo XSL será el siguiente:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="agenda_tebeo">

<html>
<head>
<title>Agenda tebeo</title>
</head>
<body>
<h1>Agenda de tebeo</h1>

<xsl:for-each select="personaje">
<div class="personaje" style="float: left; width: 300px;"  >
  <h3>Personaje número: <xsl:value-of select="@numero"/></h3>
  <div style="width: 70px; float: left;">
     <xsl:element name="img">
       <xsl:attribute name="src">
         <xsl:value-of select="dibujo/@ruta"/>
       </xsl:attribute>
       <xsl:attribute name="height">
         100
       </xsl:attribute>
     </xsl:element>
</div>
  <ul  style="float: left;">
    <li><xsl:value-of select="nombre"/></li>
    <li><xsl:value-of select="telefono"/></li>
    <li><xsl:value-of select="email"/></li>
    <li>
      <a>
        <xsl:attribute name="href">
          <xsl:value-of select="web/@enlace"/>
        </xsl:attribute>
        <xsl:value-of select="web"/>
      </a>
    </li>
  </ul>

</div>
</xsl:for-each>

</body>
</html>
</xsl:template>
</xsl:stylesheet>

El archivo XML lo veremos ahora en el navegador de la siguiente manera:

Personajes_4

Siguiendo el mismo procedimiento podemos insertar cualquier tipo de etiqueta con sus atributos. lo cual nos permite insertar sonidos, imágenes, o cualquier contenido multimedia.

Incluir CSS.

La página anterior puede mejorar considerablemente si le añadimos un archivo CSS. El CSS se aplica al archivo resultante HTML, es decir, los selectores apuntan al archivo final en HTML, por lo que deben referirse a él.

El enlace al archivo CSS lo pondremos en la plantilla HTML del código XSL.

Así, en el archivo XSL añadiremos el link a la página CSS:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="agenda_tebeo">

<html>
<head>
<title>Agenda tebeo</title>
<link rel="stylesheet" type="text/css" href="ejemplo.css" />
</head>
<body>
.......
.......

Se muestran sólo las primeras líneas del archivo, en donde hemos insertado el link a la página CSS (línea en negrita), ya que el resto de el código es igual.

Y ahora creamos el archivo ejemplo.css, que es un archivo CSS normal:

h1 { font: bold 25px arial; text-align: center; padding: 10px; }
.personaje { background: #e1f6ff ;border: 5px double maroon; 
             margin: 10px; padding: 5px; }
.personaje h3 { font: bold 17px arial; margin: 0; padding: 5px; }
.personaje li { list-style-type: square; font: normal 14px arial;
                margin: 5px; }
.personaje li a { text-decoration: none; color: maroon; }
.personaje li a:hover { text-decoration: none; color: fuchsia; }

El archivo XML de ejemplo se verá ahora como en el siguiente enlace

Personajes_5






Seguiimos con el manual de XML en la siguiente página donde veremos la declaración de tipo de documento o DTD

la DTD



Manual XML

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo