Equipos Programas Media Internet Telecomunicaciones Seguridad Base de Datos Programación Calidad Desarrollo Empresa

Ruta: >Programación>XML

¿Como pasar una página XML a HTML?

Tabla de Contenido

  1. Proceso de transformación
    1. La página HTML
      1. Vista de la página HTML en navegador
      2. Vista de código HTML
      3. ¿Qué necesitamos para hacer la transformación a XML?
      4. ¿Por qué necesitamos varios archivos para poder hacer la transformación?
    2. La página XML
      1. Analizando la estructura y el formato
      2. Particularidades del documento XML
      3. ¿Que debe tener el documento XML?
      4. Este es el documento XML
    3. La página XSL
      1. Particularidades del documento XSL
      2. ¿Que debe tener el documento XSL?
      3. ¿Como procesar el contenido del documento XML?
      4. Filtrando la información del XML
      5. Este es el documento XSL
      6. Resultado: página XML transformada
  2. Más sobre la transformación
    1. CSS
      1. Usar las hojas de estilo CSS
    2. DTD
      1. Documentos 'bien formados'
      2. Importancia del DTD / XSD
      3. Insertar el DTD en el documento XML
      4. Un ejemplo de DTD
    3. XSD
      1. Esquema XML Ejemplo
      2. Declaraciones y Definiciones
      3. Validación del XML usando XSD

Contenido

  • Proceso de transformación

    • La página HTML

      • Vista de la página HTML en navegador

        Página HTML

        Esta es la página HTML de la que partimos

        Esta página HTML será la que transformemos a XML

        Nombre Apellido
        Ana López
        Teresa Trujillo

        -

        -

      • Vista de código HTML

        Código HTML 
        <html>
<head>
<title>Esta es la página HTML de la que partimos (código)</title>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>
<link rel='stylesheet' href='Como.htm' type='text/css'>
<link rel='stylesheet' href='../../../../../style.css' type='text/css'>
</head>

<body bgcolor='#FFFFFF' text='#000000'>

  
  <table border='1'>
  
  <tr>
  
  <td>Nombre</td>
  
  <td>Apellido</td>
  
  </tr>
  
  <tr>
  
  <td>Ana</td>
  
  <td>López</td>
  
  </tr>
  
  <tr>
  
  <td>Teresa</td>
  
  <td>Trujillo</td>
  
  </tr>

  <tr>
  
  <td>Isabel</td>
  
  <td>Martín</td>
  
  </tr>

  <tr>
  
  <td>Maria</td>
  
  <td>Plata</td>
  
  </tr>

  </table>
  
  <p>- </p>
  
  <blockquote> 
  
  <p>-</p>
  
  </blockquote>
  

</body>
</html>

      • ¿Qué necesitamos para hacer la transformación a XML?

        La página HTML

        • La página HTML de origen.
        • Una página XML en la que estará el contenido de los datos que había en la página HTML. Únicamente contiene los datos estructurados jerárquicamente, no su formato o la estructura con que se mostrarán en la pantalla del usuario una vez procesados.
        • Una página XSL, que es la encargada de definir el formato de los datos y la estructura que tendrá nuestra página XML para que se vea en el navegador como la página HTML original. Es la verdadera encargada de realizar la transformación.
        • Una página DTD o XSD para validar nuestra página XML, de manera que los datos introducidos en ella sean correctos (que cada dato sea del tipo especificado, etc.) Estas páginas son opcionales.
        • Un navegador que permita visualizar páginas XML (Microsoft Explorer 6).

      • ¿Por qué necesitamos varios archivos para poder hacer la transformación?

        Varios archivos XSL

        • Con el archivo XML no tenemos suficiente, pues aunque los datos en el documento XML están estructurados de manera jerárquica, solo contiene los datos, no la estructura con la que se mostrarán ni el formato en que se presentan.
        • El archivo XSL es el que 'da sentido' al XML, pues concreta su contenido en una estructura y un formato 'real', es decir, es la que transforma realmente los datos que serán mostrados por el dispositivo.
        • Esto significa que a una misma página XML podríamos aplicar varias páginas XSL distintas, de manera que podríamos mostrar la información de maneras distintas.
        • No solo podríamos mostrar la misma información de maneras distintas, también podemos elegir que información será mostrada de la contenida en el archivo XML.
        • Si quisiéramos hacer esto con HTML tendríamos que escribir una página HTML por cada una de las maneras en que queremos mostrar la información.
        • Podemos establecer varios símiles para entender esto mejor:

          • Una casa:
            • XML = Los ladrillos, puertas, ventanas, etc. de los que disponemos para construir la casa.
            • XSL = Los planos de la casa. La manera en la que se disponen los ladrillos, puertas, y los demás elementos.
          • Fútbol:
            • XML = Los jugadores.
            • XSL = Las distintas formaciones en que pueden disponerse los jugadores, en función de si queremos una táctica más defensiva o de más ataque.
        • Tanto los DTD como los XSD nos sirven para validar que los datos siguen la estructura definida, pero ambos son opcionales.

    • La página XML

      • Analizando la estructura y el formato

        ¿Qué vamos a transformar?

        • Si observamos la página HTML que vamos a transformar podemos extraer su estructura y su formato:
          • Haz dos zonas principales: titular y cuerpo de la página:
            • La fuente del titular presenta un tamaño mayor que el resto de la página.
            • El cuerpo a su vez se divide en una zona de texto que da una breve descripción de la página y una tabla con datos.
            • La tabla posee dos zonas: titulo y datos. Hay dos datos distintos: nombre y apellido.

      • Particularidades del documento XML

        Particularidades XML

      • ¿Que debe tener el documento XML?

        Contenido del documento XML

        • Una primera línea que indica que se trata de un documento XML y la codificación que este tiene.
            • <?xml version='1.0' encoding='ISO-8859-1'?>

        • Una referencia al documento XSL que le da el formato/transformación (si lo tiene):
            • <?xml-stylesheet type='text/xsl' href='xslejemplo.xsl'?>

        • El documento XML se vería::
            • <?xml version='1.0' encoding='ISO-8859-1'?>

<?xml-stylesheet
type='text/xsl' href='xslejemplo.xsl'?>

<-- Aquí empieza el contenido -->

<Pag>
  <Titulo>Página HTML de la que partimos</Titulo>
  <PagDesc>Será la que transformemos a XML</PagDesc>
  <PersonaLista>
    <Persona>
      <Nombre>Ana</Nombre>
      <Apellido>López</Apellido>
    </Persona>
    <Persona>
      <Nombre>Teresa</Nombre>
      <Apellido>Trujillo</Apellido>
    </Persona>
  </PersonaLista>
</Pag>

      • Este es el documento XML

        Ejemplo XML

    • La página XSL

      • Particularidades del documento XSL

        Particularidades XSL

      • ¿Que debe tener el documento XSL?

        Contenido del documento XSL

        • Como el documento XSL es en realidad un documento XML debe haber una primera línea que indica que se trata de un documento XML y la codificación que este tiene.
            • <?xml version='1.0' encoding='ISO-8859-1'?>

        • Debe contener una referencia que declare que se trata de un documento XSL:
            • <xsl:stylesheet xmlns:xsl='http://www.w3.org/1999/XSL/Transform' version='1.0' >

        • El atributo match asigna la plantilla a un elemento XML. Si dicho elemento es / se asocia a la totalidad del documento.
            • <xsl:template match='/'>

        • El documento XSL se vería::
            • <?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='/'>

<!-- Aqui comienza la plantilla del contenido -->
<html>
 <body>
  <h1>
    <xsl:value-of select='/Pag/Titulo' />
  </h1>

  <p>
    <xsl:value-of select='/Pag/PagDesc' />
  </p>

  <table border='1'>
   <tr>
    <th>Nombre</th>
    <th>Apellido</th>
   </tr>

   <xsl:for-each select='Pag/PersonaLista/Persona'>
   <tr>
    <!-- Es importante dejar el espacio 
    que hay entre el valor del atributo 'value of select'
    y la barra / que cierra el tag -->
    <td><xsl:value-of select='Nombre' /></td>
    <td><xsl:value-of select='Apellido' /></td>
   </tr>
   </xsl:for-each>
  </table>
 </body>
</html>

</xsl:template>
</xsl:stylesheet>

      • ¿Como procesar el contenido del documento XML?

        Procesar los elementos

        • En el XSL indicamos como queremos mostrar/tratar cada elemento del documento XML.
        • Para ello hacemos lo siguente:


          • Seleccionamos el elemento correspondiente mediante el atributo 'value-of select' e indicamos el elemento deseado respecto al raíz del documento:


              • <xsl:value-of select='/Pag/Titulo' />

          • Lo incluimos entre los tag que queremos que actúen sobre él:
              • <h1> 
  <xsl:value-of select='/Pag/Titulo' />
</h1>

          • Si queremos repetir esto mismo para cada valor del elemento XML debemos usar <xsl:for-each>:
              • <xsl:for-each select='Pag/PersonaLista/Persona' />
   <tr> 
      <td><xsl:value-of select='Nombre' /></td>
      <td><xsl:value-of select='Apellido' /></td>
   </tr>
</xsl:for-each>

          • Es importante no olvidar el espacio que precede a la barra / que cierra el tag <xsl:value-of select>.

      • Filtrando la información del XML

        Cómo procesar la información

        • Podemos 'afinar' la selección del elemento XML sobre el que queremos actuar.
        • Mediante un <xsl:sort select='elemento'/> podemos ordenar alfabéticamente los valores del elemento XML:
            • <xsl:for-each select='Pag/PersonaLista/Persona'>
            <xsl:sort select='Apellido'/>
        • Podemos seleccionar solo los valores que sigan un determinado criterio. Para ello disponemos de los siguientes operadores:
          •  = (igual)
 != (no igual)
 &lt; menor que
 &gt; mayor que

          En el código XSL:

          <xsl:for-each select='Pag/ListaPersonas/Persona[Nombre='Ana']'>
  <tr>
    <td>
      <xsl:value-of select='Nombre'/>
    </td>
    <td>
      <xsl:value-of select='Apellidos'/>
    </td>
  </tr>
</xsl:for-each>
  Ver este ejemplo

<xsl:for-each select='Pag/ListaPersonas/Persona[Articulos&gt;7']'>
  <tr>
    <td>
      <xsl:value-of select='Nombre'/>
    </td>
    <td>
      <xsl:value-of select='Apellidos'/>
    </td>
  </tr>
</xsl:for-each>
Ver este ejemplo

        • En función de un cierto valor podemos presentar el contenido de distintas maneras:
          • <xsl:if test='Apellido='Plata'>
  <tr>
    <td>
      <b><xsl:value-of select='Nombre'/></b>
    </td>
    <td>
      <xsl:value-of select='Apellido'/>
    </td>
  </tr>
</xsl:if>
Ver este ejemplo

        • Podemos hacer que si una condición se cumple los valores se muestren de una manera y los que no la cumplan se muestren de otra manera:
          • <xsl:choose>
  <xsl:when test='Apellido='Plata'>
    <td bgcolor='#ff0000'>
      <xsl:value-of select='Nombre'/>
    </td>
  </xsl:when>
  <xsl:otherwise>
    <td>
      <xsl:value-of select='Nombre'/>
    </td>
  </xsl:otherwise>
</xsl:choose>
Ver este ejemplo

      • Este es el documento XSL

        Ejemplo XSL

      • Resultado: página XML transformada

        Página XML

  • Más sobre la transformación

    • CSS

      • Usar las hojas de estilo CSS

        Usando hojas de estilo CSS2 en XML

        • Podemos usar hojas de estilo en cascada (CSS 2) en nuestros XML para mejorar su apariencia.
        • Esto es una 'solución poco deseable', ya que podríamos hacer esto mediante el XSL, lo cual es preferible, ya que es el nuevo estandar para definir estilos.
        • La llamada a la hoja de estilo se hace añadiendo la siguiente línea en el código de nuestro documento XML:
            • <?xml-stylesheet type='text/css' href='HOJA_DE_ESTILO.css'?>
        Código de la hoja de estilo estilo.css Código del documento XML 
        
EDAD
{
color: #FF0000;
font-size: 20pt;
}

NOMBRE, APELLIDO
{
color: #0000FF;
font-size: 20pt;
}

ARTICULOS
{
Display: block;
color: #000000;
margin-left: 20pt;
}

etc.


        
<?xml version='1.0' encoding='ISO-8859-1'?>
<?xml-stylesheet type='text/css' href='estilo.css'?>
      
<!-- Este es nuestro primer archivo XML --> 
 <Pag>
  <Titulo>Página HTML</Titulo>
  <PagDesc>Para transformar a XML</PagDesc>
  <PersonaLista>
   <Persona>
     <Nombre>Ana</Nombre>
     <Apellido>López</Apellido>
     <Edad>27</Edad>
     <Articulos>5</Articulos>
   </Persona>
   <Persona>
     <Nombre>Teresa</Nombre>
     <Apellido>Trujillo</Apellido>
     <Edad>55</Edad>
     <Articulos>7</Articulos>
   </Persona>
   <Persona>
     <Nombre>Maria</Nombre>
     <Apellido>Plata</Apellido>
     <Edad>22</Edad>
     <Articulos>12</Articulos>
   </Persona>
   <Persona>
     <Nombre>Isabel</Nombre>
     <Apellido>Martín</Apellido>
     <Edad>25</Edad>
     <Articulos>1</Articulos>
   </Persona>
  </PersonaLista>
 </Pag>

    • DTD

      • Documentos 'bien formados'

        XML: documentos bien formados

        • Un texto XML está bien formado si sigue las reglas estructurales y de notación del XML.
        • Las expresiones 'es casa La roja bonita' y ' 5 (+ - 2 <) 3 = 7' no son expresiones con sentido o 'bien formadas' aunque estén correctamente escritas.


          • Documento 'bien formado': sigue las reglas definidas por el XML.

        • Algunas normas básicas para que un documento XML esté bien formado son:
          • Todos los tag deben cerrarse obligatoriamente.
          • Existen tags 'vacíos' que se abren y se cierran de 'una sola vez': <Cantidad unidad='12' />
          • Los tag deben abrirse y cerrarse siguiendo un orden, siguiendo una estructura jerárquica.
          • Los valores de los atributos deben ir siempre entre comillas 'valor'.
          • Los caracteres <, > y ' deben representarse como (&lt;), (&gt;) y (&quot;) en el texto, ya que son caracteres especiales o tokens del XML.

        • Para comprobar que un documento XML está bien formado el parser usa el DTD (Document type definition) o el XSD (XML Schema Definition) como referencia, mostrando mensajes de error si estos existen.


          • Documento 'válido': coincide con lo especificado en el DTD/XSD.

        • Si el parser no valida (como suele ocurrir con el que tienen la mayoría de los navegadores):
          • 'Lee'el XML.
          • Verifica si está 'bien formado'.
          • Muestra la estructura del documento como un árbol de objetos.

        • Si el parser valida:
          • 'Lee' el XML.
          • Verifica si está 'bien formado'.
          • Determina si los tag son legales, si los nombres de los atributos tienen sentido, si los elementos están anidados correctamente, etc.

      • Importancia del DTD / XSD

        ¿Porqué son importantes los esquemas?

        • Los esquemas DTD / XSD son importantes porque:
          • Suele hacerlos el mismo creador del documento XML.
          • Sin ellos no se pueden validar los documentos XML.
          • Definen la correcta estructura de los elementos del documenteo XML.
          • Definen los elementos que pueden aparecer en el documento xml
          • Definen los atributos de los elementos que pueden aparecer en el documento xml.
          • Definen qué elementos son hijos de los elementos principales del documentos xml
          • Definen la secuencia en la cual los hijos de los elementos pueden aparecer en el documento xml.
          • Definen el número de hijos de los elementos.
          • Definen cuando un elemento es vacío o puede incluir texto.
          • Definen el tipo de datos para los elementos y sus atributos.
          • Definen los valores predeterminados para algunos elementos y atributos.

      • Insertar el DTD en el documento XML

        El archivo DTD

        • Define el 'tipo de documento': el lenguaje de marcado del documento.
        • Especifica:
          • Los elementos que pueden existir (que información debe o no debe contener el XML).
          • Que elementos pueden o deben estar dentro de otros elementos y en que orden deben presentarse.
          • Los atributos que pueden tener los elementos.

        • Tiene un lenguaje de marcado propio.
        • Están siendo creado para todo tipo de disciplinas:
          • Guiones de obras de Shakespeare
          • Ecuaciones matemáticas (MathML)
          • Intercambio de datos electrónicos (XML/EDI)
          • Industria del calzado (FDX)
          • Modelos para la industria médica (HL7 SGML/XML)
          • Para definir fuentes generales de datos (RDF)
          • Etc.

        • El enlace al documento DTD desde el XML se hace introduciendo la siguiente línea:
            • <?xml...?>
<!DOCTYPE Pag SYSTEM 'ejemplo.dtd'>
            • <?xml...?> es la primera línea del documento xml.
            • Pag es el tag raíz.
            • 'ejemplo.dtd' es el nombre del archivo dtd que se aplica.

        • Si el documento XML no sigue las reglas indicadas en el DTD el parser del navegador mostrará un error.

          • Para saber más sobre DTD pulsa aquí

      • Un ejemplo de DTD

        Un ejemplo de DTD

        • Ejemplo de DTD para un documento XML:
            • 
<!ELEMENT Recipe (Nombre, Apellido, Edad?, Articulos, Situacion?)>
<!ELEMENT Nombre (#PCDATA)>
<!ELEMENT Apellido (#PCDATA)>
<!ELEMENT Edad (#CDATA)>
<!ELEMENT Articulos (#PCDATA ) #REQUIRED>
<!ELEMENT Situacion (#PCDATA)>
<!ATTLIST Situacion Casado CDATA '0'
Trabajo
CDATA 'si'>
            • <!ELEMENT Recipe (Nombre, Apellido, Edad?, Articulos, Situacion?)> define los tag en el documento. Los que presentan ? son opcionales.
            • <!ELEMENT Nombre (#PCDATA)> indica que el tag Nombre contiene solamente cadenas de texto.
            • En <!ATTLIST Situacion Casado CDATA '0' Trabajo CDATA 'si'>, el tag Sexo tiene dos posibles atributos: 'casado' cuyo valor por defecto es '0' y 'trabajo' cuyo valor por defecto es 'si'.

    • XSD


Página generada automáticamente desde la Base de Datos: XML/ el 28/3/2008 13:16:52

Copyright © TIC 2003-2008. Email: ilopeztic@hotmail.com