Editando apunte: Este diario: sitemap.xsl

Editando apunte: Este diario: sitemap.xsl cerrar apuntes

ID: 99 (tabla: apuntes) Título:
Fecha: [poner fecha actual ]
Categorías: Así se hizo, Vicisitudes de un Webmaster, Globalización, Programación, Experiencias SEO
Etiquetas: accesibilidad, diseño, enlaces, etiquetas, imágenes, javascript, links, semántica, SEO, sociedad, tags, webmaster
Extras: accesibilidad, diseño, enlaces, etiquetas, imágenes, javascript, links, semántica, SEO, sociedad, tags, webmaster
apunte: - - - - - - - -

[rss]Hemos visto como generamos nuestro <a href="sitemap.xml?PHPSESSID=9rudr7vrohvnint3e3qpdemri4">sitemap.xml</a>, ahora toca hablar de como lo mostramos: <a href="sitemap.xsl?PHPSESSID=9rudr7vrohvnint3e3qpdemri4">sitemap.xsl</a>[/rss].


	[rss]Ya habíamos mostrado códigos "xsl", que puede considerarse como una mezcla de <a href="http://es.wikipedia.org/wiki/HTML">html</a> y <a href="http://es.wikipedia.org/wiki/XML">xml</a>;
	como todo código <a href="http://es.wikipedia.org/wiki/HTML">html</a> puede tener estilos y scripts, y como todo <a href="http://es.wikipedia.org/wiki/XML">xml</a> debe estar bien formado.[/rss]

<h3 class="subtitulo">
	HTML: Elección de etiquetas
</h3>

Para elegir las etiquetas que servirán para mostrar nuestro sitemap.xml, buscaremos las que nos parezcan más apropiadas semánticamente.
	Tenemos unos párrafos informativos encerrados en una capa donde al cargarse la página nos informa sobre los enlaces existentes:

<pre class="codigo"><div id="info">

	Para ver las imágenes basta en pulsar en su respectivo enlace.


	Número de enlaces encontrados: :
	(páginas: ,
	imágenes: ).

</div></pre>

	Nótese que que el segundo párrafo tiene el atributo: class="oculto", que sencillamente no se muestra.


	Pero lo que importa es lo que viene: el listado de enlaces del sitemap.
	Usamos una definición de lista (dl: definition lists), y consideramos como términos (dt: definition term) la etiqueta loc de cada elemento; el resto de los campos los consideraremos descripciones (dd: definition description).


	Con las imágenes hemos anidado otra lista pero sin distinciones (ul: unordered list, li: list item).
	De algunas imágenes tenemos también un título y una descripción (image:title, image:caption), pero su presentación la describiremos más adelante.

<h3 class="subtitulo">
	Estilos
</h3>

Tenemos que diferenciar entre los iniciales y los modificados con javascript. Si vemos la página sin javascript tendrá una apariencia un poco distinta; y es que mediante este lenguaje hemos modificado algo la presentación. Por lo pronto, hemos declarado algunos elementos con la clase "oculto" y que sencillamente no se muestran.


	Poco más podemos decir de los estilos, así que seguiremos adelante con la programación.

<h3 class="subtitulo">
	Programación XML
</h3>

	No nos asustemos con la programación XML, ya que es muy básica, simplemente recorrer tados los nodos "sitemap:url", insertándolos en enlaces con class="enlace", dentro de elementos "dt":

<xsl:variable name="itemURL">
		<xsl:value-of select="sitemap:loc"/>
	</xsl:variable>
	<a class="enlace" href="{$itemURL}" id="id_{$indice}">
		<xsl:value-of select="sitemap:loc"/>
	</a>

</dt>
<dd class="oculto" id="info_{$indice}"></dd>

</xsl:for-each></pre>

Donde puede apreciarse la creación de la variable "indice", que nos servirá para referencias "javascript".
	Luego un condicional muestra la etiqueta lastmod si existe:

<pre class="codigo"><xsl:if test="sitemap:lastmod">
<dd>
lastmod: <xsl:value-of select='sitemap:lastmod' />
</dd>
</xsl:if></pre>

Y por último el tratamiento de las imágenes:

<pre class="codigo"><xsl:choose>
<xsl:when test="image:image">
<dd>Imágenes: 
<ul>
<xsl:for-each select="image:image">
	<li>
		<xsl:variable name="itemSRC">
			<xsl:value-of select="image:loc"/>
		</xsl:variable>
		<xsl:variable name="itemtitle">
			<xsl:value-of select="image:title"/>
		</xsl:variable>
		<xsl:variable name="itemdesc">
			<xsl:value-of select="image:caption"/>
		</xsl:variable>
		
			<a class="imagen" href="{$itemSRC}" title="{$itemtitle}"><xsl:value-of select="image:caption"/><xsl:value-of select="image:loc"/></a>
		
	</li>
</xsl:for-each>
</ul>
</dd>
</xsl:when>
<xsl:otherwise>
<dd>*** No hay imágenes ***</dd> 
</xsl:otherwise>
</xsl:choose></pre>

	Esta presentación cambia al cargarse la página.

<h3 class="subtitulo">
	Programación javascript
</h3>

	Lo primero que encontramos en el código javascript es un sistema para filtrar entidades del tipo "&amp;":

<pre class="codigo">var entidades = [
	{entidad	: /&amp;/g,
	ente		: "&"},
	{entidad	: /&aacute;/g,
	ente		: "á"},
	{entidad	: /&eacute;/g,
	ente		: "é"},
	{entidad	: /&iacute;/g,
	ente		: "í"},
	{entidad	: /&oacute;/g,
	ente		: "ó"},
	{entidad	: /&uacute;/g,
	ente		: "ú"},
	{entidad	: /&ntilde;/g,
	ente		: "ñ"},
	{entidad	: /&iexcl;/g,
	ente		: "¡"},
	{entidad	: /&iquest;/g,
	ente		: "¿"}
];
	
function filtrar(texto)	{
	for (e in entidades)
		texto = texto.replace(entidades[e].entidad, entidades[e].ente);
	return texto;
}</pre>

[rss]Luego, al cargarse la página, recorremos todos los enlaces para discriminar los enlaces en sí, de las imágenes; que a la vez incrementan sendos contadores ("_paginas" e "_imagenes") que nos servirán para mostrar datos estadísticos básicos[/rss]:

<pre class="codigo">window.onload = function()	{
	enlaces = document.getElementsByTagName("a");
	for (i = 0, total = enlaces.length; i < total; i++)	{
		if (enlaces[i].className == "imagen")	tratar_imagen(enlaces[i]);
		if (enlaces[i].className == "enlace")	tratar_enlace(enlaces[i]);
	}
	document.getElementById("n_enlaces").innerHTML = _paginas + _imagenes;
	document.getElementById("info_paginas").innerHTML = _paginas;
	document.getElementById("info_imagenes").innerHTML = _imagenes;
	document.getElementById("info_enlaces_totales").style.display = "block";
}</pre>

Los enlaces de imágenes se caracterizan por constar de dos elementos, uno contiene el enlace y el otro su descripción si existiese.
	En éste último caso se muestra, ocultando la url del enlace.
	A la vez anteponemos su título.

<pre class="codigo">function tratar_imagen(_a)	{
	_imagenes++;
	if (_a.firstChild.innerHTML != "")	{
		_tex = filtrar(_a.firstChild.innerHTML);
		_a.firstChild.innerHTML = _tex;
		_b = document.createElement("strong");
		_b.appendChild(document.createTextNode(filtrar(_a.title)));
		_a.title = filtrar(_a.title);
		_a.parentNode.insertBefore(_b, _a);
		_a.parentNode.insertBefore(document.createTextNode(": "), _a);
		_a.firstChild.style.display = "inline";
		_a.firstChild.nextSibling.style.display = "none";
	}
}</pre>

	Sobre el resto de los enlaces, la presentación se modifica dependiendo de los parámetros de los mismos de una manera similar a las imágenes; pero añadimos un botón (y su formulario) para un futuro uso destinado a buscar más información con Ajax.

<pre class="codigo">function tratar_enlace(_a)	{
	_paginas++;
	sumar = document.createElement("form");
	sumando = document.createElement("button");
	sumando.title = _a.href;
	sumando.appendChild(document.createTextNode(" más información... "));
	sumando.onclick = function() {
		yo = this;
		mi_id = urls[yo.title].id;
		tipo = urls[yo.title].tipo;
		valor = urls[yo.title].valor;
		alert("tipo de item (" + mi_id + "): " + tipo + "\nvalor: " + valor + "\nurl: " + this.title + "\n\npor desarrollar...");
		return false;
	};
	sumando.style.marginLeft = "1cm";
	sumar.appendChild(sumando);
	sumar.style.display = "inline";
	tipo = document.createElement("input");
	tipo.setAttribute("type", "hidden");
	tipo.setAttribute("name", "tipo");
	sumar.appendChild(tipo);
	valor = document.createElement("input");
	valor.setAttribute("type", "hidden");
	valor.setAttribute("name", "valor");
	sumar.appendChild(valor);
	pares = _a.href.split("?");

/*
		Aquí procesamos los parámetros y asignamos los valores (value)
		a los campos tipo y valor del formulario...
	*/

_a.parentNode.appendChild(sumar);
	urls[_a.href] = {tipo: tipo.value, valor: valor.value, id: _a.id.substr(3), info: ""};
}</pre>

En este trozo de código, la alerta que aparece en el botón del formulario la reemplazaremos por la llamada Ajax que mencionamos anteriormente.
	Seguramente nos ocuparemos de ello en un futuro apunte.

<h3 class="subtitulo">
	Notas finales
</h3>

	[rss]Como consecuencia de la elaboración de nuestro sitemap y su hoja xsl asociada, hemos notado que podemos mejorar algunos aspectos de nuestro sistema.[/rss]
	Entre otras cosas, podemos dar un título y su descripción a todas nuestras imágenes, añadiendo esos datos en su tabla correspondiente.


	También hemos encontrado algunos valores incorrectos de las direcciones de las imágenes que hemos "maquillado" durante la generación del mapa y pronto arreglaremos.

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