Editando apunte: ¡Mitología!, ¡Fútbol!, ¡Web!...

Editando apunte: ¡Mitología!, ¡Fútbol!, ¡Web!... cerrar apuntes

ID: 19 (tabla: apuntes) Título:
Fecha: [poner fecha actual ]
Categorías: Caricatos, Vicisitudes de un Webmaster, Programación
Etiquetas: javascript, php, webmaster
Extras: javascript, php, webmaster
apunte: - - - - - - - -

[rss]¡Sí!, los que vieron el título y pensaron en Ajax, han acertado, pero voy a descartar las opciones de hacer apuntes sobre temas mitológicos o de fútbol (al menos en esta ocasión).
La verdad es que aún siendo una técnica bastante antigua para obtener cierto dinamismo en las páginas, el uso del método javascript XMLHttpRequest ha sido una auténtica revolución.[/rss]
Simplemente tenemos que crear un objeto Ajax, yo lo hago así:

<pre class="codigo" >function objetoAjax()	{
	if (window.XMLHttpRequest)
		_ajax = new XMLHttpRequest();
	else
		if (window.ActiveXObject)
			_ajax = new ActiveXObject("Microsoft.XMLHTTP");
		else
			_ajax = false;
	return _ajax;
}</pre>

	Pero no vayan a pensar que este apunte se debe a un especial interés en mostrar este pequeño código. En mi condición de moderador de Ajax en los foros del web, he encontrado una serie de malos hábitos, y por ello la intención es dar unos pocos consejos.


	Usar Ajax debería ser una ayuda a la navegación, recogiendo pocos datos y actualizados; pero existe una tendencia preocupante de cargar páginas completas, posiblemente sin considerar algunas cosas básicas.

<ul>
	<li><a href="#punto1">Desactivando javascript se elimina todo tipo de posible navegación del sitio</a>.</li>
	<li><a href="#punto2">Posible duplicidad de elementos que deberían ser únicos</a>.</li>
	<li><a href="#punto3">Difícil posicionamiento en los buscadores</a>.</li>
	<li><a href="#punto4">Malabarismos innecesarios en el uso de scripts</a>.</li>
	<li><a href="#punto5">Horrores semánticos en Metadatos, titulos, etc.</a></li>
	<li><a href="#punto6">...y más...</a></li>
</ul>

	Algunos puntos será mejor matizarlos.

<h3 class="subtitulo">
	Algunos Matices
</h3>

	Empecemos por el primer punto de la lista:

	<a href="diario.ficha.php?id=30&PHPSESSID=1t2des391v3cmutconetgkj8m3" title="Messi"><img src="diario.imagen.php?id=30&max=160" alt="Messi" longdesc="diario.ficha.php?id=30" style="float: right; border: 1px solid black; margin: 0 0 .5em 1em" /></a>

	Desactivando javascript se elimina todo tipo de posible navegación del sitio:
Este punto se puede matizar, incluso con un ejemplo: <a href="http://www.mlggb.com/publicaciones.php">Publicaciones (mlggb.com)</a>.
En el enlace se puede apreciar que pinchando sobre las portadas se abre una ficha descriptiva de la publicación donde mediante Ajax se obtienen los datos de cada ficha, y se genera una ventana simulada con una capa para mostrarlos. Pero si se desactiva javascript (o sin hacerlo, pero abriendo el enlace), El enlace es hacia esa misma ficha.


	Posible duplicidad de elementos que deberían ser únicos:
No solo los elementos de la página que deben ser únicos como "html, head, body", sino cabeceras, títulos, etc.


	Difícil posicionamiento en los buscadores:
Tal vez este punto sea el que más nos haga reflexionar. Elementos como títulos y palabras clave, que tienen mucha relevancia para los buscadores, dejarían de ser fiables y tal vez penalizables, con la consecuencia de una mala indexación y por lo tanto una mala ubicación en los mismos.


	Malabarismos innecesarios en el uso de scripts:
No deberíamos olvidarnos de cambiar el título de la página, o cambiar de pestaña. O para evitar duplicados, cambiar el nombre de algunos identificadores únicos. Muchas veces inicializamos datos al cargarse la página, evento distinto es recibir datos con Ajax, así que si deben inicializarse datos, debemos tenerlo presente (Es una pregunta bastante frecuente en los foros). Además, si tenemos valores inicializados que luego reemplazamos (el típico uso de innerHTML), ese trabajo o gasto de recursos se desperdicia.


	Horrores semánticos en Metadatos, titulos, etc.:
También dificulta el posicionamiento en los buscadores. Supongamos que desde la página principal cargamos un formulario de contacto, el título que podemos pensar para esa página es justamente ese "formulario...", y podemos hacer visible ese nuevo título, incluso en el mismo navegador (document.title), pero la referencia que tienen los buscadores siempre será el primero que detecte; o sea el título original. Lo mismo pasa con todos los elementos descriptivos (metas: description, keywords, etc.)


	... Y más...:
Algo que ocurre cada vez que se carga toda una página con Ajax, es que el tráfico de datos va a ser el mismo que si simplemente enlazamos a otra página...
Creo que es algo digno de reflexión.

<h3 class="subtitulo">
	Mis recomendaciones
</h3>

	Basado en mi experiencia planteo estos consejos: Antes de querer usar Ajax para recoger datos debemos comprobar que esos datos se obtienen con enlaces normales, como se aprecia en el enlace antes mencionado. Por ejemplo:

<div class="codigo">
<a id="ejemplo" href="enlace.html" onclick="buscarConAjax(this.id); return false" >enlace</a> 
</div>

	En negro tenemos algo que debe funcionar sin lo que está en rojo, y luego podemos añadir justamente lo que mostramos en rojo (no desarrollaremos la petición ni discutiremos la razón y tipo de argumentos, ya que para entrar en este asunto, implica unos conocimientos básicos).


	Otra recomendación es evitar el envío de datos con el objeto Ajax. Si se puede considerar Ajax enviar formularios a un iframe (tal vez oculto), es mucho mejor usar esa técnica. Un ejemplo sencillo es intentar enviar algunos caracteres especiales, un simple espacio en blanco debe codificarse de forma especial y se hace automáticamente con funciones especiales como escape, generando algo del estilo %20, pero en el servidor, si se trabaja con php el espacio se considera con el signo "+", o sea que tenemos que atinar bien en la forma de codificar esas cosas... y si el signo es "&" (ampersand), si no se codifica es un separador de variables. En resúmen, un lío.

Controles Otras tablas: imagenes, postales, categorias, etiquetas, extras - - (popup ) - que

Seleccionar nuevo apunte

categoria Nombre:
Controles Otras tablas: apuntes, imagenes, postales, etiquetas extras - - Seleccionar: categoria
Descripción: - - - - - - - -	Apuntes

extra Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias etiquetas - - Seleccionar: extra
Descripción: - - - - - - - -	Apuntes

etiqueta Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias extras - - Seleccionar: etiqueta
Descripción: - - - - - - - -	Apuntes

Editor del diario

Zona de comentarios

Evaluación