Editando apunte: SVG vs. Ajax

Editando apunte: SVG vs. Ajax cerrar apuntes

ID: 136 (tabla: apuntes) Título:
Fecha: [poner fecha actual ]
Categorías: Vicisitudes de un Webmaster, Globalización, Programación
Etiquetas: accesibilidad, diseño, etiquetas, imágenes, javascript, tags
Extras: accesibilidad, diseño, etiquetas, imágenes, javascript, tags
apunte: - - - - - - - -

<p>
	[rss]Después de añadir a nuestro Mapa de España las ciudades autónomas de Ceuta y Melilla hemos hecho algunas reflexiones[/rss]:
</p>
<p>
	A pesar de que nos ha sido de mucha utilidad el mapa usado, tuvimos que añadir Ceuta y Melilla de manera "muy artesanal", cuando existen otros mapas
con sus coordenadas mucho más precisas.
	También notamos la ausencia del resto del continente europeo, aparentando ser una gran isla, y no un país integrado en su continente.
</p>
<p>
	[rss]Intentaremos saber si nuestro navegador permite el formato svg simplemente cargando la imagen que vamos a usar[/rss],
y que se encuentra en la <a href="http://es.wikipedia.org/wiki/Wikipedia:Portada">wikipedia</a>: <a href="http://commons.wikimedia.org/wiki/File:Provincias_de_Espa%C3%B1a.svg">Provincias de España.svg</a>.
	Si se carga correctamente podemos crear una imagen nueva basándones en las características de la recientemente cargada
</p>
<div id="cargar_svg"></div>
<p>
	Pinchando sobre el botón que acompaña este párrafo (si todo va bien) realizaremos una petición <a href="http://es.wikipedia.org/wiki/AJAX">Ajax</a> para obtener los datos básicos de la etiqueta svg, junto a las distintas etiquetas "path" y "polygon" para dibujar sus siluetas.
	No olvidemos que los ficheros <a href="http://es.wikipedia.org/wiki/Scalable_Vector_Graphics">SVG</a> son también <a href="http://es.wikipedia.org/wiki/XML">XML</a> (responseXML).
</p>
<div style="text-align: center">
	<button id="clonador" type="button" disabled="disabled">
		Cargar Imagen
	</button>
</div>
<div id="nuevo_svg" style="text-align: center; margin: 1em;"></div>

<p>
	Antes de analizar los resultados, vemos el código que hemos usado:
</p>
<pre class="codigo">svgns = "http://www.w3.org/2000/svg";
_colores_ = ["red", "lime", "blue", "green", "aqua"];
_color_ = 0;
function _obtener_tags_svg_(url, donde) {
	ajax = objetoAjax();
	ajax.open("get", url, true);
	ajax.onreadystatechange = function()	{
		if (ajax.readyState == 4) {
			resultado = ajax.responseXML;

// elemento raíz

_svg_ = resultado.getElementsByTagName("svg")[0];
			xmlns = _svg_.getAttribute("xmlns");
			ancho = _svg_.getAttribute("width");
			alto = _svg_.getAttribute("height");
			box = _svg_.getAttribute("viewBox");

_imagen_ = document.createElementNS(svgns, "svg");
			_imagen_.setAttribute("xmlns", xmlns);
			_imagen_.setAttribute("width", ancho);
			_imagen_.setAttribute("height", alto);
			_imagen_.setAttribute("viewBox", box);
			_imagen_.style.border = "1px solid black";
			tag(donde).appendChild(_imagen_);

// buscando formas (polygon, path)

_tags_ = resultado.getElementsByTagName("*");
			for (i = 0, total = _tags_.length; i < total; i++)	{
				switch(_tags_[i].tagName.toLowerCase())	{
					case "polygon":
						_puntos_ = _tags_[i].getAttributeNS(null, "points");
						_figura_ = document.createElementNS(svgns, "polygon");
						_figura_.setAttributeNS(null, "points", _puntos_);
						_figura_.setAttributeNS(null, "stroke", _colores_[(_color_++ % _colores_.length)]);
						_figura_.setAttributeNS(null, "stroke-width", "1");
						_figura_.setAttributeNS(null, "fill", "none");
						_imagen_.appendChild(_figura_);
					break;

case "path":
						_path_ = _tags_[i].getAttributeNS(null, "d");
						_figura_ = document.createElementNS(svgns, "path");
						_figura_.setAttributeNS(null, "d", _path_);
						_figura_.setAttributeNS(null, "stroke", _colores_[(_color_++ % _colores_.length)]);
						_figura_.setAttributeNS(null, "stroke-width", "1");
						_figura_.setAttributeNS(null, "fill", "none");
						_imagen_.appendChild(_figura_);
					break;
				}// switch
			}// for
		}
	}
	ajax.send(null);
}</pre>

<p>
	A partir del resultado que vemos, sabiendo que solo hemos añadido siluetas, nos resulta raro encontrarnos con textos. Evidentemente se han insertado
con polígonos o recorridos (path).
	Podríamos reconocerlos y eliminarlos, pero al ver el resto de las siluetas, encontramos algunas líneas incorrectas, así que buscaremos otros mapas que nos
puedan interesar más.
</p>

<h3 class="subtitulo">
	Otros Mapas
</h3>

<p>
	Haciendo una <a href="http://commons.wikimedia.org/w/index.php?search=PROVINCIAS+DE+ESPA%C3%91A&title=Special%3ASearch&go=Ir&uselang=es">búsqueda en la Wikipedia</a>, hemos encontrado otros mapas que mostramos a continuación; Pulsando sobre cada uno de ellos se mostrarán las siluetas de sus formas
en el "Espacio para mostrar otro mapa":
</p>
<div style="text-align: center; margin: 1em; padding: 1em">
	<span><img style="margin: 0 1em;" id="mapa_alt_1" src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/61/Provincias_de_Espa%C3%B1a_centrado.svg/120px-Provincias_de_Espa%C3%B1a_centrado.svg.png" title="File:Provincias de España centrado.svg" alt="http://upload.wikimedia.org/wikipedia/commons/6/61/Provincias_de_Espa%C3%B1a_centrado.svg"/></span>

</div>
<h3 style="text-align: center;">Espacio para mostrar otro mapa</h3>
<div style="height: 500px; border: 1px solid black; margin-bottom: 1em;">
	<div id="otros_mapas" style="text-align: center; margin: 1em;"></div>
</div>

<p>
	Si todo ha ido bien y podemos ver las diferencias en las siluetas, nos decantaremos por el tercero de los mapas, que [rss]en un futuro apunte
trataremos de estudiar más a fondo[/rss].
</p>

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