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: 253

Visitas el mes pasado: 246

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 (III)

Estilo con CSS

imagen canvas

Asociar un archivo CSS

Tenemos varias formas para poder presentar los archivos XML como páginas web. Una primera manera, es crearle un archivo CSS asociado. Para ello lo primero es incluir el enlace o link al archivo CSS.

Después de la primera línea o primera declaración pondremos todas las líneas de los links o archivos asociados. Para asociar un archivo CSS escribiremos:

<?xml-stylesheet type="text/css" href="ejemplo1.css"?>

Esta línea la escribiremos siempre igual cuando queramos asociar el XML a un archivo CSS. Lo único que debemos cambiar es la ruta hacia el archivo o href.

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet type="text/css" href="ejemplo1.css"?>
<animales>
  <nombre_grupo>Reptiles</nombre_grupo>
    <grupo>
      <tipo>Lagartos</tipo>
      <tipo>Cocodrilos</tipo>
      <tipo>Serpientes</tipo>
      <tipo>Tortugas</tipo>
  </grupo>
</animales>

Ahora creamos el archivo ejemplo1.css. Tal como ocurre en HTML los selectores son los nombres de las etiquetas.

animales { margin: 50px; }
nombre_grupo { display: block; font: bold 20px arial; }
grupo { display: block; }
tipo  { display: list-item; margin-left: 20px; }

El archivo XML lo veremos ahora como en el siguiente enlace:

Ejemplo XML_1



La propiedad display

La clave de la conversión del archivo XML es la propiedad display de CSS. Por defecto las etiquetas de XML (excepto la etiqueta o elemento raiz), son etiquetas en linea (propiedad display: in-line); mediante la propiedad display podemos convertirlas en etiquetas de bloque (valor block).

Pero la propiedad display tiene otra serie de valores que no suelen usarse en HTML, pero que aquí si pueden sernos útiles, por ejemplo:

De esta manera, y aplicando después las demás propiedades de CSS podemos hacer páginas con XML y CSS bastante completas, ya que podemos convertir los elementos en elementos de bloque, hacer tablas y listas.

Ejemplo de tabla con XML y CSS

Vamos a hacer un ejemplo de cómo se puede hacer una tabla con XML, ayudandonos de CSS. veamos el archivo XML al que le hemos puesto ya su correspondiente link hacia el CSS:

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="ejemplo2.css"?>
<direcciones>
<titulo>Direcciones</titulo>
<cabecera>
<nombre>nombre</nombre>
<telefono>Telefono</telefono>
<email>E-mail</email>
</cabecera>
<contacto>
   <nombre>Jacinto Perez</nombre>
   <telefono>624153976</telefono>
   <email>jacipe@ymail.com</email>
</contacto>
<contacto>
   <nombre>Pepito Grillo</nombre>
   <telefono>654987321</telefono>
   <email>pepigri@hotmail.com</email>
</contacto>
<contacto>
   <nombre>Pablo Romanones</nombre>
   <telefono>912547393</telefono>
   <email>pablorom@gmail.com</email>
</contacto>
</direcciones>

El archivo consiste en una libreta de direcciones, ahora con CSS pondremos cada "contacto" en una fila de una tabla. Este es el archivo CSS:

direcciones { display: table; width: 500px; 
              border: 5px double black; margin: 10px 50px; }
titulo { display: table-caption; font: bold italic 20px verdana; 
         color: navy;text-align: center;  }
cabecera { display: table-row; font: bold 14px arial; 
           text-align: center;  }
contacto{ display:  table-row; font: normal 14px arial; 
          text-align: left; }
nombre, telefono, email { display: table-cell; 
        border: 1px solid black; border-collapse: collapse; 
        padding: 3px 5px;}

El resultado del ejemplo anterior podemos verlo en la página del siguiente enlace:

Ejemplo XML_2



Carencias de CSS en XML

Aunque con CSS se pueden visualizar los archivos XML en los navegadores, esta no puede ser la solución, ya que esta forma de visualizar las páginas tiene importantes carencias.

Utilizando sólo CSS no podemos poner en la página ni enlaces ni formularios, y tampoco podemos poner imágenes o contenido multimedia.

Otra carencia importante es no poder poner el título de la página en la pestaña del navegador, tal como hace HTML.

Por lo tanto CSS, aun siendo una herramienta importante para poder dar una forma adecuada a la página, no es suficiente para poder crear una página que tenga un mínimo de calidad.

Es por eso que aparte del archivo CSS, tenemos que utilizar otro tipo de archivo de estilo, los archivos XSL, que los veremos en la siguiente página.






En la siguiente página veremos los archivos XSL, que permiten visualizar un archivo XML como una página web.

Estilo con XSL



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