El diario de Pepe Molina (Caricatos)

• Webmaster Pepe Molina
• Su Caricatura.com
• facebook
• Google+
• twitter

• Caricaturas "San Jorge"
• The Irish Affair (Pub)
• Construcciones Costa del Sol
• Polígonos Costa del Sol
• Red Tape

• Javascript Códigos (por Tunait)
• Centell: Diseño Gráfico...
• Recursos CSS
• Utilidades para Webmasters
• Blog de Juaniquillo
• Kseso de CSS

• Desarrollo y Poesía
• Caricaturas "San Jorge"
• Fotografías de Sevilla, España
• Autos con arte
• Medina Colón ArtWork
• AlSaPa
• Juan Ruiz
• AJC Creaciones

• Foros del web
• Maestros del web
• HERA
• Validador de feeds
• Sitemaps
• ISCA
• AEC

• Más Benalmádena
• Animarte
• Los Pescadores Playa
• Gráfica creativa
• MiniGolf Happy Days

• Prociencia
• Universidad Autónoma de Barcelona
• Pekegifs
• Publica tus poemas
• Cherrylandia
• Granada Links
• Desenvolvimento web
• El blog del Vinagre Asesino
• Bahía Sin Fondo
• Las historias eulerianas
• webfly

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 "&":

var entidades = [
	{entidad	: /&/g,
	ente		: "&"},
	{entidad	: /á/g,
	ente		: "á"},
	{entidad	: /é/g,
	ente		: "é"},
	{entidad	: /í/g,
	ente		: "í"},
	{entidad	: /ó/g,
	ente		: "ó"},
	{entidad	: /ú/g,
	ente		: "ú"},
	{entidad	: /ñ/g,
	ente		: "ñ"},
	{entidad	: /¡/g,
	ente		: "¡"},
	{entidad	: /¿/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.

Este apunte aún no tiene comentarios.

• Este diario: Extras
• Caricaturas en Córdoba
• Desafío javascript: 100!
• Mapa de España
• Clip-art: carpetas y ficheros
• Sistema de comentarios paso a paso: Validar con javascript
• javascript: rollover en mapas
• SVG: Mapa de España
• Mapa de España SVG II: Herramientas
• Fondos con SVG

• Caricaturas en Córdoba
• Mapa de España SVG II: Reflexiones
• Mapa de España SVG II: Herramientas
• Mapa de España SVG II: Vicisitudes
• SVG: Zoom en mapa de imagen
• SVG: Dibujando mapas
• Mapear una imagen paso a paso
• Mapas y formularios
• Asociación Española de Caricaturistas
• Clip-art: carpetas y ficheros

• Caricatos ⁽²⁰⁾
• Así se hizo ⁽⁴¹⁾
• Vicisitudes de un Webmaster ⁽¹³⁶⁾
• Mentes pensantes ⁽⁹⁾
• Eventos y efemérides ⁽⁹⁾
• Globalización ⁽⁶⁶⁾
• Mamarrachadas ⁽⁶⁾
• Artes y oficios ⁽¹²⁾
• Programación ⁽¹¹²⁾
• Caricaturas y caricaturistas ⁽¹⁵⁾
• Experiencias SEO ⁽¹¹⁾

• listado de caricaturas
• listado de imágenes
• listado de extras
• listado de categorías
• listado de etiquetas
• listado de postales
• grupos de apuntes
• buscador interno
• anuario 2010
• anuario 2011
• anuario 2012
• anuario 2013
• anuario 2014
• anuario 2015
• anuario 2016
• anuario 2017
• anuario 2018
• anuario 2019
• anuario 2020
• anuario 2021
• anuario 2022
• anuario 2023
• anuario 2024

• Arrays javascript
• Capturar áreas
• Colección de clipart
• Editor de textos
• Editor del diario
• Galeria de imágenes
• Generador html
• Imagenes
• Máquina de Turing
• Postales digitales
• Probador de scripts
• Recortes en imágenes
• Reloj analógico
• Sudo-Captcha
• Todo sobre los colores
• Libro de visitas

2017 (7)

• diciembre (2)
• abril (1)
• marzo (1)
• febrero (1)
• enero (2)

2016 (2)

• abril (1)
• marzo (1)

2015 (6)

• mayo (1)
• abril (1)
• marzo (2)
• febrero (1)
• enero (1)

2014 (12)

• diciembre (1)
• noviembre (1)
• julio (2)
• junio (1)
• mayo (1)
• abril (1)
• marzo (1)
• febrero (1)
• enero (3)

2013 (20)

• diciembre (2)
• noviembre (1)
• octubre (1)
• septiembre (1)
• agosto (1)
• junio (1)
• mayo (2)
• abril (2)
• marzo (1)
• febrero (3)
• enero (5)

2012 (45)

• diciembre (3)
• noviembre (6)
• octubre (2)
• septiembre (4)
• agosto (2)
• julio (2)
• junio (3)
• mayo (4)
• abril (3)
• marzo (6)
• febrero (5)
• enero (5)

2011 (62)

• diciembre (5)
• noviembre (9)
• octubre (6)
• septiembre (6)
• agosto (3)
• julio (2)
• junio (5)
• mayo (4)
• abril (2)
• marzo (5)
• febrero (7)
• enero (8)

2010 (1)

• diciembre (1)