Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de XML

XML es un lenguaje para esructurar datos que puede emplearse en la web


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 288

Visitas el mes pasado: 721

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Introducción a XML
Desarrollo Web
Manual de XML
Desarrollo Web
Extensible Markup Language (XML) 1.0
W3C Recommendation 10-February-1998
Extensible Markup Language (XML) 1.0
Recomendación de la W3C - Febrero 1998; traducido por sidar.org
Manual Imprescindible XML
enreas.wikia.com
Entendiendo el XML
Maestros del web
Generación de páginas Web usando XSLT y XML
J. J. Merelo
Primeros pasos con XML y XSL
Ricardo Borillo Domenech
Primeros pasos con XML y XSL
Ricardo Borillo Domenech. Versión en PDF
Tutorial: El lenguaje XSD
www.tic2.org/WebTecnica
Validador de W3C
Markup Validation Service
XML Tutorial
w3schools.com
XSLT Tutorial
w3schools.com
DTD Tutorial
w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




XML (V)

Imagen y enlaces

Enlaces

imagen canvas

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 de XML

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com