La idea de un mapa del sitio nace debido a que me queda muy claro que es necesario brindarle al usuario una retroalimentación visual que le permita ubicarse dentro del espacio digital que toda página representa. Muchas veces para ello se emplean componentes conocidos como breadcrumbs, sin embargo, no me parecen del todo satisfactorios.

Videojugador desde siempre y fanático de La leyenda de Zelda, conozco por experiencia propia lo versátiles que los mapas pueden ser si se implementan de forma correcta. Por ello decií crear una librería que dibuje mapas visuales del sitio que se está visitando.

Me auxilié de jCanvas para crear el entorno visual, y haciendo uso de JSON, jQuery y Firebase construí los métodos de la librería de manera que pudieran reutilizarse fácilmente.

Equipo de Trabajo

Carlos Corona

Blanca Sánchez

Instalar la librería (puede descargarse aquí)

	
	<canvas id="sitemap" width="600" height="400"></canvas>
	<script src="/js/jcanvas.min.js"></script>
	<script src="/js/sitemapgenerator.js"></script>
	

Configurar el árbol del sitio. Cada elemento del mapa corresponde a una sección del sitio. Puede o no ser visitable y definir sus atributos y presentación.

	
		var sitemap = {
			"home": {
				"links": [
					"credentials",
					"projects",
					"technology",
					"contact"						
				],
				"access": true,
				"url": "/",
				"width": 70,
				"height": 50,
				"x": 265,
				"y": 175					
			},
			"credentials": { 
				"links": [
					"work",
					"study"
				],
				"access": false,
				"x": 149,
				"y": 187,
				"width": 95,
				"height": 100
			},
			"projects": {
				"links": [
					"genexis",
					"hsol",
					"rexbackup"
				],
				"access": false,
				"x": 244,
				"y": 98,
				"width": 107,
				"height": 67
			},
			"technology": {
				"links": [
					"java",
					"html"
				],
				"access": false,
				"x": 363,
				"y": 169,
				"width": 95,
				"height": 100
			}, 
			"contact": {
				"access": true,
				"url": "/contact",
				"shape": "circle",
				"x": 250,
				"y": 305,
				"width": 97,
				"height": 63
			},
			"work": {
				"url": "/work",
				"access": true,
				"x": 13,
				"y": 198,
				"width": 106,
				"height": 67
			},
			"study": {
				"url": "/study",
				"access": true,
				"x": 132,
				"y": 302,
				"width": 67,
				"height": 95
			},
			"genexis": {
				"url": "/projects/genexis",
				"access": true,
				"x": 154,
				"y": 14,
				"width": 118,
				"height": 66
			},
			"hsol": {
				"url": "/projects/hsol",
				"access" : true,
				"x": 295,
				"y": 16,
				"width": 95,
				"height": 60
			}, 
			"rexbackup": {
				"url": "/projects/rexbackup",
				"access": true,
				"x": 368,
				"y": 96,
				"width": 160,
				"height": 61
			},
			"java": {
				"url": "/technology/java",
				"access": true,
				"x": 470,
				"y": 172,
				"width": 106,
				"height": 66
			},
			"html": {
				"url": "/technology/html",
				"access": true,
				"x": 471,
				"y": 247,
				"width": 107,
				"height": 66
			}
		};
	

Crear el árbol del sitio

	
		sitemapgenerator("#sitemap", sitemap);
	

Es importante que quien desee emplear ésta librería cuente con todas las configuraciones completas de Firebase para que pueda observar en tiempo real el movimiento de los usuarios dentro del sitio.

En éstos momentos me encuentro modificando la librería para crear una versión mucho más estable, reutilizable y configurable. Pueden descargar la versión actual en el enlace: