logo El diario de Pepe Molina (Caricatos)

yo

Hemos visto como generamos nuestro sitemap.xml, ahora toca hablar de como lo mostramos: sitemap.xsl


Última caricatura

IV Asamblea de la AEC: IV Asamblea General de la Asociación Española de Caricaturistas

IV Asamblea de la AEC

RSS de las imágenes: rss


La Cita

¡Estudia! No para saber una cosa más, sino para saberla mejor

Lucio Anneo Séneca, filósofo latino (2 a.C.-65 d.C.).


En esta zona están las páginas personales del autor.


Mis clientes ahora también son mis amigos (aunque les cobre).


En Mis amigos Informáticos hay una pequeña colección de páginas de colegas webmasters..


En Mis amigos artistas podemos encontrar artistas de cualquier índole (dibujantes, pintores, escritores...)


Las recomendaciones que proponemos son de índole variada.


Aquí un cajón de sastre de enlaces.


Nos referencian desde sitios de toda índole.


Puede contribuir a mantener esta página con su donativo.


botón pay-pal

Este diario: sitemap.xsl

emoticón de Caricatos Publicado el día 26 de octubre de 2012
id=99; categorías: Así se hizo, Vicisitudes de un Webmaster, Globalización, Programación, Experiencias SEO

Hemos visto como generamos nuestro sitemap.xml, ahora toca hablar de como lo mostramos: sitemap.xsl.

Ya habíamos mostrado códigos "xsl", que puede considerarse como una mezcla de html y xml; como todo código html puede tener estilos y scripts, y como todo xml debe estar bien formado.

HTML: Elección de etiquetas

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:

<div id="info">
<p>
	Para ver las imágenes basta en pulsar en su respectivo enlace.
</p>
<p id="info_enlaces_totales" class="oculto">
	Número de enlaces encontrados: <i id="n_enlaces"></i>:
	(páginas: <i id="info_paginas"></i>,
	imágenes: <i id="info_imagenes"></i>).
</p>
</div>

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.

Estilos

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.

Programación XML

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:for-each select="sitemap:urlset/sitemap:url">
	<xsl:variable name="indice">
		<xsl:value-of select="position()" />
	</xsl:variable>

<dt id="dt_{$indice}">

	<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>

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:

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

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

<xsl:choose>
<xsl:when test="image:image">
<dd><b>Imágenes:</b><br/>
<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>
		<p>
			<a class="imagen" href="{$itemSRC}" title="{$itemtitle}"><i class="oculto"><xsl:value-of select="image:caption"/></i><span><xsl:value-of select="image:loc"/></span></a>
		</p>
	</li>
</xsl:for-each>
</ul>
</dd>
</xsl:when>
<xsl:otherwise>
<dd>*** <i>No hay imágenes</i> ***</dd><br/>
</xsl:otherwise>
</xsl:choose>

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

Programación javascript

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

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;
}

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:

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";
}

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.

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";
	}
}

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.

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: ""};
}

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.

Notas finales

Como consecuencia de la elaboración de nuestro sitemap y su hoja xsl asociada, hemos notado que podemos mejorar algunos aspectos de nuestro sistema. 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.

Zona de comentarios

Este apunte aún no tiene comentarios.

Evaluación

Valoración de esta página: (apunte.99) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Historial de navegación

Esta página ha sido visitada en 4148 ocasiones


Disponemos de rss sindicar

Y del Mapa del sitio, además del sitemap.xml.


Aquí podemos encontrar los apuntes más visitados.

"Top 10" reemplaza a la sección Últimos apuntes.


Una buena forma de buscar un apunte es a partir de su categoría.


También es posible buscar apuntes por medio de las etiquetas (tags).


Hemos decidido poner al alcance de todos algunos comodines.

Adjuntamos una versión reducida del "buscador interno" que vemos en la lista anterior:

Buscar en apuntes

También estamos recopilando antiguas páginas del sitio.


Desde este recuadro se puede hacer una búsqueda cronológica.


Se puede crear una postal nueva desde el enlace del sector "Otras páginas del dominio", o editar la que sale en el recuadro, pulsando sobre ella..

http://www.pepemolina.com/clipart/fondos/BCKGRD44.svg
http://www.pepemolina.com/clipart/fondos/1673.svg
http://www.pepemolina.com/postales/aves/ocellot2.gif
enlace a la postal
Copyright © 2002-2018 www.pepemolina.com
RSS rss | Ver Mapa del sitio