Editando apunte: Este diario: Top 10

Editando apunte: Este diario: Top 10 cerrar apuntes

ID: 88 (tabla: apuntes) Título:
Fecha: [poner fecha actual ]
Categorías: Así se hizo, Vicisitudes de un Webmaster, Programación
Etiquetas: accesibilidad, enlaces, javascript, links, php, semántica, webmaster
Extras: accesibilidad, enlaces, javascript, links, php, semántica, webmaster
apunte: - - - - - - - -

<div style="float: left; margin: 0 1em .5em 0; padding: 0; border: 3px ridge lime; ">
	<img src="postales/Numbers/1.gif"  style="margin: 4px -10px;"/><img src="postales/Numbers/0.gif" style="margin: 4px -10px;"/>
</div>
<p>
	[rss]Como habíamos adelantado, hemos reemplazado la sección "Últimos apuntes" por otra que llamamos "Top 10" (los 10 apuntes más leídos).[/rss]
	Los motivos y parte de los códigos ya la habíamos explicado en el apunte "<a href="?titulo=Top+10+con+Ajax+%28paginaci%F3n%29&PHPSESSID=9hgceu4krdggit2e9q6n6gun92">Top 10 con Ajax (paginación)</a>", y esa lista resultante está paginada tal como ocurre en el apunte mencionado.
</p>
<h3 class="subtitulo">
	Paso a paso
</h3>
<p>
	Para eliminar la vieja sección simplemente la hemos ocultado, y hemos puesto un enlace que la vuelve a mostrarla si fuese necesario. Pudiendo ocultarse nuevamente con un nuevo <a href="index.php?PHPSESSID=9hgceu4krdggit2e9q6n6gun92" id="nuevo_click">click</a>. 
</p>
<pre class="codigo">var mostrar_últimos = true;
function mostrando_ultimos(e)	{
	tag("ultimos").style.display = (mostrar_últimos) ? "block":"none";
	mostrar_últimos = !mostrar_últimos;
	cancelar_evento(e);
}</pre>
<p>
	Luego añadimos la nueva sección mostrando la primera de las páginas y resaltando el número uno (1) en el listado de páginas, y asignamos estilos iguales al resto de los sectores. Ese número resaltado, en principio enlaza con la misma página que anteriormente había para mostrar los apuntes "<a href="?mostrar=vistos&PHPSESSID=9hgceu4krdggit2e9q6n6gun92">más leídos</a>", ya que siempre hay que considerar a los visitantes que no tengan <a href="http://es.wikipedia.org/wiki/Javascript">javascript</a> activado.
</p>
<p>
	Ya resuelto el aspecto visual nos toca trabajar en el aspecto funcional, que comentaremos a continuación.
</p>
<h3 class="subtitulo">
	Paginando
</h3>
<p>
	Ya adelantamos el código en el otro apunte antes mencionado y que podemos ver en <a href="diario.jocker.php?extra=codigo&codigo=script.top_10_ajax&PHPSESSID=9hgceu4krdggit2e9q6n6gun92">este enlace</a>, así que tan solo debíamos reutilizarlo con algunas modificaciones.
	El volcado de los resultados en ambos casos se realizan en listas (obvio), pero las listas que usamos en nuestras distintas secciones son las desordenadas (ul: unordered lists), y en el apunte habíamos usado las listas de definiciones (dl: definition lists) que hemos considerado semánticamente mejor pudiendo discriminar entre términos y definiciones.
</p>
<p>
	[rss]La petición Ajax es exactamente igual (se puede comprobar forzando el enlace, tal vez en una nueva ventana o pestaña), enlazando a la misma página con los mismos parámetros, pero mostrando los resultados con otro formato. Por ejemplo, la descripción o definición se asigna al atributo title de cada enlace.[/rss]
</p>
<h3 class="subtitulo">
	Asignando los eventos y enlaces
</h3>
<p>
	Para terminar solo nos queda definir las funciones que usaremos en nuestra nueva sección que son las peticiones Ajax y le reasignación de enlaces.
	Los enlaces son hacia los listados en formato rss (para poderlos considerar con el menú contextual), y serán cancelados con las peticiones Ajax.
</p>
<p>
	[rss]Quiero destacar que esas peticiones no son redundantes, ya que por cada petición se crea una lista nueva, ocultando la anterior para tan solo modificar los estilos de visualización si necesitamos volverlas a mostrar. Sabiendo que será la primera página la única visible y existente, inicializamos una variable con ese dato:[/rss]
</p>
[rss]<pre class="codigo">ultimo_tope = "1";
var lista_tope = {};
lista_tope[ultimo_tope] = {"visible": true};
</pre>[/rss]

<p>
	[rss]Para luego considerar esa existencia a la hora de paginar.[/rss]
</p>
<pre class="codigo">	if (lista_tope[pag] == undefined)	{
		// creamos la variable de referencia y realizamos la petición Ajax
		lista_tope[pag] = {"visible": true};
		//...
	}
	else	{
		if (ultimo_tope == pag)	alert("Se encuentra en la paginación " + pag)
		else	{
			tag("topes_" + ultimo_tope).style.display = "none";
			ultimo_tope = pag;
			tag("topes_" + ultimo_tope).style.display = "block";
		}

}
</pre>

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