logo El diario de Pepe Molina (Caricatos)

yo

Después de añadir a nuestro Mapa de España las ciudades autónomas de Ceuta y Melilla hemos hecho algunas reflexiones

Ú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

El tiempo es la sustancia de la que estoy hecho

Jorge Luis Borges, escritor argentino (1899-1986).

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

SVG vs. Ajax

emoticón de Caricatos Publicado el día 01 de junio de 2014
id=136; categorías: Vicisitudes de un Webmaster, Globalización, Programación

Después de añadir a nuestro Mapa de España las ciudades autónomas de Ceuta y Melilla hemos hecho algunas reflexiones:

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.

Intentaremos saber si nuestro navegador permite el formato svg simplemente cargando la imagen que vamos a usar, y que se encuentra en la wikipedia: Provincias de España.svg. Si se carga correctamente podemos crear una imagen nueva basándones en las características de la recientemente cargada

Pinchando sobre el botón que acompaña este párrafo (si todo va bien) realizaremos una petición Ajax 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 SVG son también XML (responseXML).

Antes de analizar los resultados, vemos el código que hemos usado: 

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

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.

Otros Mapas

Haciendo una búsqueda en la Wikipedia, 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":

http://upload.wikimedia.org/wikipedia/commons/6/61/Provincias_de_Espa%C3%B1a_centrado.svg http://upload.wikimedia.org/wikipedia/commons/e/e8/Provincias_de_Espa%C3%B1a_%28an%29.svg http://upload.wikimedia.org/wikipedia/commons/3/35/Prov%C3%ADncies_d%27Espanya.svg

Espacio para mostrar otro mapa

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

Zona de comentarios

Este apunte aún no tiene comentarios.

Evaluación

Valoración de esta página: (apunte.136) 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 14563 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..

../diario.imagen.php?id=2
http://www.pepemolina.com/postales/Navidad/TgC_Navidad_31.gif
enlace a la postal
Copyright © 2002-2024 www.pepemolina.com
RSS rss | Ver Mapa del sitio