Editando apunte: SVG: Dibujando mapas

Editando apunte: SVG: Dibujando mapas cerrar apuntes

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

<p>
	Hemos visto con el <a href="?titulo=Mapear+una+imagen+paso+a+paso&PHPSESSID=383hkslif4su2st0d1ntcbhoj1">apunte anterior</a>, que [rss]mapear una imagen ahora es fácil y preciso[/rss] gracias a nuestra aplicación para <a href="areas/index.php?PHPSESSID=383hkslif4su2st0d1ntcbhoj1">Capturar áreas en imágenes</a>.
	Ahora intentaremos hacerlo más bonito y divertido mostrando la evolución del trazado de cada área.
</p>

<p>
	Vemos a continuación el mismo mapamundi del apunte <a href="?titulo=Mapear+una+imagen+paso+a+paso&PHPSESSID=383hkslif4su2st0d1ntcbhoj1">Mapear una imagen paso a paso</a>
(que ya hemos mencionado), junto a unos controles que luego comentaremos.
</p>
<div style="text-align: center; margin: 1em auto;">

</div>
<fieldset><legend>Controles</legend>

	<strong>Selección de áreas:</strong>
	<label for="pon_rus">Rusia</label><input type="checkbox" id="pon_rus" />
	<label for="pon_chi">China</label><input type="checkbox" id="pon_chi" />
	<label for="pon_oce">Oceanía</label><input type="checkbox" id="pon_oce" />
	<label for="pon_bra">Brasil</label><input type="checkbox" id="pon_bra" />
	<label for="pon_can">Canadá</label><input type="checkbox" id="pon_can" />
	<br/>

<strong><label for="pon_tiempo">Tiempo en segundos: </label></strong>
	<select id="pon_tiempo" />
		<option value="1" >1</option>
		<option value="2" selected="selected">2</option>
		<option value="3" >3</option>
		<option value="5" >5</option>
		<option value="10" >10</option>
	</select>

<br/>

<strong><label for="pon_tipo">Tipo de dibujo: </label></strong>
	<select id="pon_tipo" />
		<option value="p_puntos" selected="selected">punto a punto</option>
		<option value="p_line" >trazo de línea</option>
		<option value="p_poli" >trazo de polígono</option>
		<option value="p_tarta" >trazo de tarta</option>
	</select>

<br/>

<strong><label for="pon_relleno">Color de relleno: </label></strong>
	<select id="pon_color" />
		<option value="none" selected="selected">sin color</option>
		<option value="transparent" >transparente</option>
		<option value="white" >blanco</option>
		<option value="black" >negro</option>
		<option value="red" >rojo</option>
		<option value="green" >verde</option>
		<option value="blue" >azul</option>
	</select>

</fieldset>
<br/>
<p>
	A continuación indicaremos las características de los controles que hemos añadido al mapamundi.
</p>

<h3 class="subtitulo">Los controles</h3>

<p>
	La <strong>selección de áreas</strong> sencillamente aplica los parámetros seleccionados en el resto de controles.
	Si el trazo está hecho, simplemente se deshace, con el tiempo actualizado, y con el mismo trazo que fue creado.
	En el caso de haber una variación de otros parámetros, no se procesarán hasta la generación de un nuevo trazo.
</p>
<p>
	El <strong>Tiempo en segundos</strong> es lo que tardará en dibujarse o desdibujarse el polígono que elijamos.
	Puede dibujarse el el mínimo tiempo (1 segundo) y desdibujarse en el máximo (10).
</p>
<p>
	El <strong>Tipo de dibujo</strong> que tenemos activo es "punto a punto" donde se incluye un punto más visible en
	cada coordenada del área que se seleccione.
	La siguiente opción es el trazo de línea, que es muy parecida a las siguientes dos opciones,
	ambas se refieren al trazado de polígonos; y se diferencian porque el trazo de tarta se inicia desde el centro del polígono.
</p>
<p>
	Sobre el <strong>Color de relleno</strong>, se aplicará a las figuras que se creen nuevas; y en el caso de que sea ddel tipo
"punto a punto", el relleno se aplicará a cada punto y no al área.
</p>

<h3 class="subtitulo">
	Algunas reflexiones
</h3>
<p>
	Las áreas nuevas se crean encima de las viejas, así que podemos ver como se han detectado los puntos en nuestra aplicación.
Usando un tiempo mayor, mejor se aprecia ese desarrollo.
</p>
<p>
	Sobre el tipo de dibujo, en vez de comentar, invito a probarlo. Nótese la diferencia entre el
trazo de líneas y de polígonos.
</p>
<p>
	También invito a descubrir la diferencia entre el color transparente y la ausencia de color (sin color). 
</p>
<p>
	Puede verse el <a href="diario.jocker.php?extra=codigo&codigo=script.dibujando_mapas&PHPSESSID=383hkslif4su2st0d1ntcbhoj1">código javascript</a> del apunte.
</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