Lector de Noticias con XML, PHP y jQuery
Antes de que empieces a leer el post, la DEMO de lo que intentaremos desarrollar.
A pesar de que el título figura como “Lector de Noticias con XML y PHP”, la utilidad del mismo puede ser adaptada a cualquier tipo de proyectos donde podamos hacer lectura de un XML, aunque también podríamos cargar páginas HTML o dinámicas, como por ejemplo una galería de imagenes o simplemente un listado de pesonas de diferentes sectores de una empresa. En el post anterior, haciamos referencia de como trabajar con la clase Magpierss para parsear un XML, ahora vamos a complicar un poco la cosa haciendo un menu donde podamos acceder a varios XML, trabajando con jQuery para hacer uso de Ajax y animaciones sencillas para que sea un poco mas atractiva nuestra aplicación.
Antes de comenzar a trabajar es importante organizarnos con las carpetas, de tal forma que este todo en su correspondiente lugar. No es un detalle menor, ya que luego si necesitamos modificar algun archivo, nos sea fácil detectar el lugar físico del mismo.
Yo lo organice asi: CSS, Includes, Scripts, Img.
CSS: Hojas de Estilos
Includes: Todas las páginas, que contienen funciones que usamos habitualmente en en diferentes lugares de nuestra aplicación.
Scripts: En esta carpeta usualmente pongo todos los archivos Javascript.
Img: Carpeta de Imagenes.
Ahora bien, ya creamos todas las carpetas, lo siguiente es descargar Magpierss y jQuery
Es una buena costumbre realizar un diseño o al menos un boceto para luego pasar a la maquetación con Hojas de estilos. Para el ejemplo lo diseñé de esta forma, ustedes lo harán de tal forma que se adapte a sus proyectos.
Una vez que ya tenemos el diseño, le toca el turno a la maquetación para lo cual nos valemos de CSS para lograrlo.
#contenedor{width:600px; height:200px; border:#CCCCCC solid 1px; background-image:url(../img/fondo.gif); background-repeat:repeat-x;}
#div_menu, #informacion{float:left; height:200px;}
#div_menu{width:130px;}
#menu li{line-height:220%; list-style-type: none;}
#menu a{color:#666666; text-decoration:none;}
#menu a:hover{color:#0000FF; text-decoration:underline;}
#separador{ width:3px; height:180px; float:left; background-image:url(../img/separador.gif); background-repeat:no-repeat; margin-top:25px;}
#informacion{width:450px; margin-left:10px; padding-top:5px; line-height:90%; }
#informacion a{text-decoration:none; color:#006699;}
#informacion a:hover{text-decoration:underline; color:#0000FF;}
Como verán en el CSS utilizo background-image para estilizar los div tanto del contenedor como del separador entre el menu y la información.
Ahora vamos a crear el Menu con listas de desordenadas de esta manera:
<ul id="menu"> <li><a href="includes/cargarInfo.php?moduloXML=deportes"> Deportes</a></li> <li><a href="includes/cargarInfo.php?moduloXML=espectaculo"> Espectaculos</a></li> <li><a href="includes/cargarInfo.php?moduloXML=politica"> Politica</a></li> <li><a href="includes/cargarInfo.php?moduloXML=salud"> Salud</a></li> <li><a href="includes/cargarInfo.php?moduloXML=tecnologia"> Tecnologia</a></li> <li><a href="includes/cargarInfo.php?moduloXML=economia"> Economia</a></li> </ul>
Como notamos, en cada uno de los enlaces del menu llamamos a “cargarInfo.php” enviandole como parametro “moduloXML” con el valor que necesitemos, para de esta manera cargar la información referente al enlace.
Todo perfecto. ¿Pero como logramos cambiar la información dependiendo del enlace y con animación? ¿Y todo esto sin recargar la página?. La respuesta a esta pregunta la podemos encontrar utilizando, en mi caso, jQuery. Aunque hay varios framework con los cuales te puedes valer, como Prototype, Mootools, Script.aculo.us, y cada unos de ellos con sus ventajas y desventajas, me incliné a jQuery por la gran comunidad que se formó entorno a ella y por la cantidad de PlugIns desarrollados por esa comunidad. Si necesitas aprender mas sobre jQuery, te dejo un taller para aprender más sobre la herramienta, aunque si no tenés conocimiento de Javascript deberías comonezar por este otro taller.
El código javascript para jQuery, nos quedaría de esta forma:
$(document).ready(function(){
var emi = "#menu a"; //Emisor
var rec = "#informacion"; //Receptor
var src = "img/cargando.gif"; //Imagen de precarga
var iid = "cargando"; //Id de la precarga
var pre = '<div class=centrar-imagen><img src="'+src+'"id="'+iid+'"/></div>'; //Objeto precarga
var spe = "slow"; //Velocidad del efecto
$(emi).each(function(){
var href = $(this).attr("href"); //Guardamos el valor de href de cada enlace.
$(this).click(function(){ //Cargamos en rec el contenido de cada href y le damos efectos.
$(rec).hide().after(pre).load(href, function() {$("#"+iid).remove();$(this).fadeIn(spe)});
return false; //Para que no se redireccione.
});
});
});
En el código anterior lo que hacemos es, primero inicializar las variables que necesitaremos para realizar el efecto. Los parametro que necesitamos son el id del menu, el id del div donde cargaremos la info, la ruta de la imagen que mostraremos mientras se carga los datos, que por lo general es un gif, y la velocidad con la cual se iniciará la animación, que por defecto son tres (fast, normal y slow).
La función estrella de esta porcion de código es “load”, jQuery nos provee de esta función cuando queremos cargar informacion desde otra página o desde otro sitio como lo es en este caso, tambien pueden ver $.ajax, $.post y $.get, es cuestión de ver cual se adapta en cada caso. Ahora bien, para poder usar “load” necesitamos rescatar la URL de cada enlace del menu y lo hacemos con esta linea de código:
var href = $(this).attr("href");
Luego con esta línea cargamos el div “información” con la página o XML que rescatamos del enlace.
$(rec).hide().after(pre).load(href, function() {$("#"+iid).remove();$(this).fadeIn(spe)});
De esta forma hemos creado una sensilla pero útil aplicación para implementarla en lo que necesitemos. En un próximo post vamos a ver como crear una galería de imagenes con esta misma técnica. Como es de costumbre les dejo la Descarga del Código. Saludos.
También te puede Interesar
¿Disfrutaste esta entrada? Por qué no dejas un comentario abajo y continúas la conversación, o te suscribes a mi feed y obtienes artículos como este enviados a tu lector de feeds.
Comentarios
Hola Sergio, probalo de esta otra forma:
$(document).ready(function(){
var emi = “#menu a”;
var rec = “#tabla”;
var src = “img/cargando.gif”;
var iid = “cargando”;
var pre = ‘
‘;
var spe = “slow”;
$(emi).each(function(){
var href = $(this).attr(“href”);
$(this).click(function(){
$.ajax({
type: “POST”,
dataType: “script”,
contentType: “application/x-www-form-urlencoded”,
url:”pag/consulta.php”,
data:”submit=&x=”+x+”&y=”+y,
beforeSend:inicioEnvio,
success:llegadaDatos,
error:problemas
});
return false;
});
});
function inicioEnvio(){
var x=$(rec);
x.html(pre).fadeIn(spe);
}
function llegadaDatos(datos) {
$(rec).html(datos);
}
function problemas(){
$(rec).text(‘Problemas en el servidor…’);
}
});
Asi te debería funcionar, ahora lo que no me quedo claro es si solo tenes en un solo link o tambien lo tenés confeccionado en forma de menu como en la demo. El código que te adjunte lo deje como en el ejemplo, pero adaptado para lo que necesitas. Espero te ayude. Ante cualquier otra consulta, estoy a tu disposición. Un cordial Saludo.
Hola! Necesito poner un scroll de noticias horizontal vinculado con páginas de RSS, me podrías explicar ¿como puedo hacerlo?. Muchas gracias!!!
Hola que tal,
Muchas gracias por el contenido, la verdad que es un gran aporte para los medio avanzados, espero poder aplicarlo a una plantilla de wordpress que tengo para una sección 
, si tengo complicaciones me paso a consultar, gracias !!
Hola,
antes de nada felicitarte por el trabajo.
comentas que usas el evento load para hacer el efecto, pero q también se podría usar $.ajax.
podrías mostrar algún ejemplo?
en mi caso debo adaptarlo a este codigo:
$.ajax({
url: ‘pag/consulta.php’,
type: “POST”,
data: “submit=&x=”+x+”&y=”+y,
success: function(datos){
$(“#tabla”).html(datos);
}
});