Una manera muy interesante y fácil de modificar los textos de tu página web. Si, por ejemplo, tenemos una página donde cambiamos a menudo unas noticias que tenemos en el margen derecho, podríamos tener un código HTML como este:
donde podríamos tener, dentro de cada div 'primera', 'seguna', 'tercera', etc... noticias con diferente formato según su importancia.
Para rellenar cada div con la noticia deseada podriamos bastaría con abrir la página con un editor y modificar los textos, así de sencillo.
Pero vamos a imaginar que dicha página contiene muchas lineas de código, o que la página se genera mediante código PHP y que nos lleva tiempo indagar en él y encontrar los divs, o que de la actualización de las noticias se encarga alguien que no queremos que husmee en la página y pueda modificar, sin querer, algo que no nos interesa. Pues para esto podemos tener el contenido de los divs, es decir, el texto de las noticias, en un archivo XML. Un código sencillo, válido para rellenar los anteriores divs podría ser algo como:
No voy a ahondar en la estructura y forma de los archivos XML ya que existen webs a patadas donde lo explican. Aquí sólo voy a explicar cómo leer estos archivos, extraer los textos y rellenar los divs del HTML con ellos usando javascript. Y, en este caso, también vamos a trabajar con ciertas etiquetas del código XML que nos servirán para situar cada noticia en su lugar ya que queremos que, según la importancia de la noticia, esta tenga una presentación diferente. En este ejemplo las noticias etiquetadas como primera, segunda, tercera, etc..., se corresponden con las clases de los divs en el código HTML.
Al anterior código XML deberíamos darle un nombre que nos indique qué contiene, por ejemplo 'noticias.xml'. Y lo leeremos con el siguiente código jQuery y javascript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Manejar archivo XML</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="leerxml.js"></script>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<h1>Titulo de la página</h1>
<div id="derecha">
<div class="noticias">
<div class="primera"></div>
<div class="segunda"></div>
<div class="tercera"></div>
<div class="cuarta"></div>
</div>
</div>
</body>
</html>donde podríamos tener, dentro de cada div 'primera', 'seguna', 'tercera', etc... noticias con diferente formato según su importancia.
Para rellenar cada div con la noticia deseada podriamos bastaría con abrir la página con un editor y modificar los textos, así de sencillo.
Pero vamos a imaginar que dicha página contiene muchas lineas de código, o que la página se genera mediante código PHP y que nos lleva tiempo indagar en él y encontrar los divs, o que de la actualización de las noticias se encarga alguien que no queremos que husmee en la página y pueda modificar, sin querer, algo que no nos interesa. Pues para esto podemos tener el contenido de los divs, es decir, el texto de las noticias, en un archivo XML. Un código sencillo, válido para rellenar los anteriores divs podría ser algo como:
<?xml version="1.0" encoding="utf-8"?>
<noticias>
<noticia>
<primera>
<titulo>Titulo primera noticia</titulo>
<texto>Este seria el texto de la noticia destacada como primera</texto>
</primera>
</noticia>
<noticia>
<segunda>
<titulo>Titulo segunda noticia</titulo>
<texto>Este el texto de la segunda noticia</texto>
</segunda>
</noticia>
<noticia>
<tercera>
<titulo>Titulo tercera noticia</titulo>
<texto>Y así sucesivamente con las demás....</texto>
</tercera>
</noticia>
</noticias>No voy a ahondar en la estructura y forma de los archivos XML ya que existen webs a patadas donde lo explican. Aquí sólo voy a explicar cómo leer estos archivos, extraer los textos y rellenar los divs del HTML con ellos usando javascript. Y, en este caso, también vamos a trabajar con ciertas etiquetas del código XML que nos servirán para situar cada noticia en su lugar ya que queremos que, según la importancia de la noticia, esta tenga una presentación diferente. En este ejemplo las noticias etiquetadas como primera, segunda, tercera, etc..., se corresponden con las clases de los divs en el código HTML.
Al anterior código XML deberíamos darle un nombre que nos indique qué contiene, por ejemplo 'noticias.xml'. Y lo leeremos con el siguiente código jQuery y javascript:
// JavaScript Document
// Nombre del archivo: leerxml.js
$(document).ready(function(){//se empieza a ejecutar cuando el DOM esté listo
$.get("noticias.xml",{},function(xml){ //Abrimos el archivo noticias.xml
//El ciclo se va repetir cada vez que se encuentre la etiqueta noticia
$('noticia',xml).each(function() {
etiqueta=$(this).children();//obtenemos el elemento hijo de noticia que se corresponde
// con el nombre de la clase en el código HTML (en este caso primera, segunda, tercera, etc...
etiqueta=etiqueta[0].nodeName.toLowerCase();//y conseguimos su nombre (nodeName) en minúsculas (toLowerCase)
titulo = $(this).find('titulo').text(); //buscamos el valor que contiene la etiqueta titulo y lo guardamos en la variable titulo
texto = $(this).find('texto').text(); //lo mismo con texto
//Llama a la función que retorna el título y texto que vamos a insertar en el DIV
datos = crearNoticiaHtml(titulo,texto);
$('.'+etiqueta).append(datos);//insertamos el titulo y el texto en el DIV correspondiente
// (añadimos un punto antes del nombre de la etiqueta porque es una clase)
}); //final de leer cada etiqueta noticia
}); //fin de $.get
});//fin de document ready
function crearNoticiaHtml(titulo,texto){
// Construimos el string 'noticiaHTML' que contiene el titulo y el texto y lo retornamos
noticiaHTML = ' '; //inicializamos la variable
noticiaHTML += '<h4>'+ titulo + '</h4>';//le agregamos el título con formato
noticiaHTML += texto;//y el texto
return noticiaHTML;//y lo retornamos
}
//con esto la noticia etiquetada en el xml como <primera> quedará insertada
//en el div con class=primera, la etiquetada como <segunda> en el div con la clase .segunda
//y así sucesivamente
Hola, desde hace unos dias busco un codigo que haga algo semejante a lo que usted describe en esta pagina, como soy nuevo en esto no se como armar el rompe cabeza final, usted podria ser tan amable de presetar un ejemplo funcionando en su web, o facilitarme demo
ResponderEliminarHola de nuevo, logre realizar el ejercicio correctamente, gracias por haber descrito tan didaticamente esta pagina. Me ha servido de mucho. Ahora le do formato CSS a los contenido del XML. Cualquier idea que me pueda ayudar la acogere con gusto.
ResponderEliminarHola, la verdad es que está muy bien montado el código, lo que pasa es que no es compatible con Chrome. ¿Alguna idea sobre como solucionar este problema de compatibilidad? ¿alguna referencia? Muchas gracias.
ResponderEliminarHola Javi, el problema en Chrome es que cuando abres un documento html local (que está en una carpeta de tu disco duro y no en un servidor) que intenta acceder a través de JavaScript a algún archivo (como un xml), emite un error de seguridad del tipo (o similar):
ResponderEliminarOrigin null is not allowed by Access-Control-Allow-Origin.
Ese error lo verás en la consola cuando abras el menú: 'herramientas', 'herramientas para desarrolladores'.
Es un problema común del chrome, cuando subes la página a un servidor el problema desaparece. Te invito a que hagas tus pruebas con el Firefox.
Hola, excelente el post, solo que solo funciona con un XML alojado en el mismo servidor... ¿Como puedo hacerlo funcionar con un XML de un servidor remoto?
ResponderEliminarGracias.
Aqui te pongo una página de stackoverflow donde se soluciona con un pequeño proxy php (funciona de maravilla).
Eliminarhttp://stackoverflow.com/questions/12683530/origin-http-localhost-is-not-allowed-by-access-control-allow-origin
Waaauu! me sirvió bastante para hacer otra cosa que tiene que ver con archivos xml. Muchas Gracias!!
ResponderEliminarSe ve bastante interesante, pero me gustaría saber cómo se haría con Vanilla JS.
ResponderEliminarSe ve bastante interesante, pero me gustaría saber cómo se haría con Vanilla JS.
ResponderEliminar