Editando apunte: Mapa de España SVG II: Herramientas

Editando apunte: Mapa de España SVG II: Herramientas cerrar apuntes

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

<p>
	Para ver en detalle los distintos elementos del mapa que hemos elegido de la <a href="https://es.wikipedia.org">Wikipedia</a>,
ya habíamos desarrollado una sencilla herramienta que lee las etiquetas y atributos que nos interesan de una imagen en formato "<a href="https://es.wikipedia.org/wiki/Scalable_Vector_Graphics">SVG</a>".
</p>
<p>
	[rss]Hemos retocado nuestra herramienta para nuestras nuevas pretenciones.[/rss] Ahora, a partir del fichero elegido obtendremos
un código bastante simplificado.
Empezaremos con un sencillo formulario:
</p>
<div style="margin: 1em auto;">
	<label for="imagen">
		Dirección de la imagen:
	</label>
	<input type="text" id="imagen" value="https://upload.wikimedia.org/wikipedia/commons/3/35/Prov%C3%ADncies_d%27Espanya.svg"
style="width: 70%" readonly="readonly" />
	<button type="button" id="apertura" > Ir </button>
</div>

<p>
	Cuando se pulsa el botón del formulario, debajo de estas líneas se muestra el mapa de España,
y se actualizan los recuadros de más abajo con datos recogidos del mapa.
</p>
<p>
	Se pueden seleccionar los elementos por su nombre o pulsando sobre ellos en el mapa. Nótese un botón marcado como "zoom";
que también puede conseguirse con un doble click sobre el elemento.
</p>

<div id="controles">
		<fieldset>
			<legend>
				edición
			</legend>
			<label for="el_id">Nombre: </label>
			<select id="el_id"></select>
			<input type="text" name="nombre" id="el_nombre"/>
			<button type="button" id="cambiar_nombre" disabled="disabled">
				cambiar nombre
			</button>
			<br/>
			<label>tag: <strong id="el_tag"></strong></label>
			<label for="el_color">color: </label>
			<select id="el_color">
			</select>
			<label for="linea">linea </label><input type="checkbox" id="linea"/>
			<button type="button" id="zoomear" disabled="disabled"> Zoom </button>
			<br/>
			<button type="button" id="poligonear" disabled="disabled"> Convertir a Polígono </button>

</fieldset>

<fieldset>
			<legend>
				datos
			</legend>
			<pre id="datos" style="white-space: pre-wrap; height: 100px; overflow: auto;"></pre>
		</fieldset>

</div>
<br/>

<p>
	Terminamos mostrando el código resultante, junto a los estilos y una vista previa.
</p>

<dl style="height: 480px; margin: 2em" id="pestas" class="pestañas">
<dt class="pestaña on" id="Pcod_css">
	<a href="#cod_css" id="_cod_css">
		Código CSS
	</a>
</dt>
<dt class="pestaña off" id="Pcod_svg">
	<a href="#cod_svg" id="_cod_svg">
		Código SVG
	</a>
</dt>
<dt class="pestaña off" id="Pver_imagen">
	<a href="#ver_imagen" id="_ver_imagen">
		Imagen
	</a>
</dt>
<dd class="carpeta" style="height: 480px" id="cod_css">
<textarea id="estilos" style="width: 98%; height: 98%;">
.provincia	{
	stroke:	#ccc;
	fill:	#fff8e3;
}
.provincia:hover	{
	fill:	red;
}
.nada	{
	fill:	none;
	stroke:	#999;
}
.marco	{
	fill:	none;
	stroke:	black;
	stroke-width: 2;
	stroke-miterlimit:	4;
}
.marco_canario	{
	fill:	none;
	stroke:	#1a171b;
	stroke-miterlimit:	4;
}
.linde_canario	{
	fill:	black;
	fill-rule:	evenodd;
	stroke:	#ccc;
	stroke-width:	0.5;
	stroke-linecap:	butt;
	stroke-linejoin:	miter;
	stroke-opacity:	1;
	fill-opacity:	1;
	opacity:	0.9;
	stroke-miterlimit:	4;
	stroke-dasharray:	none;
}
.agua	{
	fill:	#d3ebfa;
}
.exterior	{
	fill:	#f4e2ba;
	stroke:	#999;
}

Después de revisar los detalles de cada provincia con el zoom, hemos creado una sencilla hoja de estilos que mostramos en la primera pestaña.

Puede verse el código de estas herramientas en este enlace, y podemos afirmar que el ressultado aún no es el definitivo.

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