Planteamiento web (AJAX + Prototype)

bendi82 · #1 (**permalink**) 03/01/2008, 16:57

Hola,

Hace tiempo que programo en HTML + CSS. He decidido aprender un poco de AJAX acompañado de Prototype.

Estoy haciendo una pagina web de prueba para aprender. El planteamiento es el siguiente:

Pagina index.html :

Código:

<html>

<head>
<!-- JavaScript -->
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/showContent.js"></script>
</head>

<body>

<div id="mainWrapper">

	<div id="menu">
	<ul>
		<li><a href="#" onclick="showContent('home');">inicio</a></li>
		<li><a href="#" onclick="showContent('contactForm');">contacto</a></li>
	</ul>
	</div><!-- end #menu -->
	
	<div id="content">
	</div><!-- end #content -->
	
</div><!-- end #mainWrapper -->

</body>
</html>

donde la función JavaScript showContent() es:

Código:

function showContent(item){

	var aDIV       = "content";
	
	switch(item){
		case "home":
			var aURL = "home.html";
			break;
		case "contactForm":
			var aURL = "contact.html";
			break;
		default:
			var aURL = "error.html";
	}
	
	new Ajax.Updater(aDIV,aURL,{method:'get'});
}

y donde home.html (por ejemplo) es:

Código:

<p>Hello, world!!!</p>

Con este metodo lo que intento es que todo el rato se este en la pagina index.html y que al hacer click en los links se actualice simplemente el DIV="content".

1.- Este planteamiento es correcto?
2.- Si el planteamiento es correcto, lo estoy haciendo de la forma correcta?
3.- Pros/Contras?

Muchas gracias!!!

MaBoRaK · #2 (**permalink**) 03/01/2008, 18:07

loading..............

A mi parecer lo haces muy bien pero con muchas lineas de código, yo lo que haría viendo tu estructura y tu propuesta lo haría asi

Código PHP:

  <html> 
 
<head> 
<!-- JavaScript --> 
<script type="text/javascript" src="js/prototype.js"></script> 
<script type="text/javascript"> 
var aDiv = "content"; 
</script> 
</head> 
 
<body> 
 
<div id="mainWrapper"> 
 
    <div id="menu"> 
    <ul> 
        <li><a href="#" onclick="new Ajax.Updater(aDiv,'home.html',{method:'get'}); return false;">inicio</a></li> 
        <li><a href="#" onclick="new Ajax.Updater(aDiv,'contact.html',{method:'get'}); return false;">contacto</a></li> 
    </ul> 
    </div><!-- end #menu --> 
     
    <div id="content"> 
    </div><!-- end #content --> 
     
</div><!-- end #mainWrapper --> 
 
</body> 
</html>

connection closed.

flai · #3 (**permalink**) 01/07/2008, 06:28

Esto no tiene nada que ver con Prototype sino con la "navegabilidad".

Supon que eres un usuario con conocimientos medios de la web. Te ha gustado algo de la página de home así que copias y pegas el link y se lo mandas a un amigo.

Éste abre el link y se encuentra que no aparece el contenido que le ha enviado su amigo. Discuten un rato por teléfono y al rato se dan cuenta de que para poder ver el contenido debería de haber hecho click en el botón "home".

Supon que ahora tu amigo se llama Google, pues bien, acabas de echar por tierra tu posicionamiento en buscadores.

No se si me he conseguido explicar bien con el ejemplo. AJAX está muy bien, pero siempre como un complemento al contenido que quieras mostrar (por ejemplo mostrando ayuda contextual en los formularios).

Un saludo.

Yaraher · #4 (**permalink**) 01/07/2008, 07:41

Un tema similar a lo que menciona flai, siempre debes tratar que tu sitio degrade bien. Es decir, si el usuario no tiene JavaScript activado, pueda aún visitar tu sitio y acceder al contenido. Y uno de estos usuarios es, como ya lo han mencionado, Google.

Una forma práctica de tener JavaScript no-intrusivo es no colocar las llamadas de código en las etiquetas XHTML, si no separarlas en un archivo externo. No recuerdo mucho de Prototype pero supongo que tiene esa posibilidad. En JQuery sería algo como:

Código:

$("#menu li a').click {
  $("aDiv").load('home.html');
   return false;
}

De esa manera, el enlace al evento click se hace por separado, y si el usuario no tiene JS activado, simplemente seguiría el link normal, permitiendo tener tu contenido disponible.