Editando apunte: Mapear una imagen paso a paso

Editando apunte: Mapear una imagen paso a paso cerrar apuntes

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

<p>
	[rss]Después de crear la página para "<a href='areas/index.php?PHPSESSID=db9n24qgorkd207632rt6dufg3'>Capturar áreas en imágenes</a>", pensaba que no tardarían en mejorar el sistema[/rss],
	pero después de varios años vemos que las páginas que ofrecen el mapeo de imágenes online, lo hacen punto por punto.
</p>
<p>
	Nuestra propuesta permite obtener la silueta (en el ejemplo una figura) pinchando con el ratón sobre la misma.
</p>
<h3 class="subtitulo">
	Paso a paso: un click = un área
</h3>
<p>
	<img src="diario.imagen.php?id=21" style="background-image: url(diario.imagen.php?id=18); border: 2px blue ridge; margin: 0 0 .5em 1em; float: right;" />
	Empezando con un ejemplo muy básico, vamos a usar la imagen que mostramos junto a este párrafo con cuatro figuras diferentes con colores vivos:
azul, rojo, amarillo y verde lima.
</p>
<p>
	Desde el apartado "Otras páginas del dominio", pinchamos en la segunda opción: "<a href='areas/index.php?PHPSESSID=db9n24qgorkd207632rt6dufg3'>Capturar áreas</a>", y seleccionamos el archivo
para empezar a capturarlas.

	Con la imagen cargada se muestra una paleta de colores web y se actualiza la paleta de colores de la imagen.
	Pinchando en la paleta de colores se actualiza el recuadro con el color que se usará para el efecto rollover, que por el momento vamos a obviar.
	Como primer paso de la captura pinchamos sobre el cuadrado azul, e inmediatamente aparece una ventana advirtiéndonos de que se ha detectado un cuadrado;
luego de cerrar esa alerta, el sistema nos pedirá un nombre para ese área. En éste recuadro podemos dejar el nombre que nos sugiere el sistema, o cambiarlo por,
por ejemplo, "cuadrado".
</p>
<p>
	<strong>Analizaremos brevemente la situación:</strong> en la zona de información (en este momento nos referimos a la pestaña azul),
tenemos información de la imagen e información actualizada con los datos obtenidos en la captura (lo que más nos importa es las coordenadas obtenidas).
	Si pasamos al modo "edición", vemos unos "controles adicionales nuevos", de los que destacamos "borrar área seleccionada".
	Pasando a la pestaña "visión", podemos acercar el puntero del ratón y ver el efecto "rollover".
</p>

<p>
	Queda entonces volver a la pestaña de captura y repetir el proceso con el resto de las formas que vayamos a capturar.
</p>
<p>
	Terminado el proceso de captura, podemos pasar a la pestaña de edición para indicar los enlaces de cada área.
	Los enlaces no serán válidos hasta que terminemos la edición y visión, y desde esta última pestaña pulsemos el botón
	"Ver efecto en popup".
</p>

<h3 class="subtitulo">
	Seleccionar los recursos
</h3>
<p>
	Cuando vemos el efecto en la nueva ventana, encontramos dos sistemas de pestañas;
	uno muestra el mapa normal y el mismo mapa en formato SVG.
	Si todo ha ido bien no se distinguirían diferencias entre ambas pestañas.
	El segundo sistema de pestañas es muy distinto,
	las tres primeras (html, css y javascript) contienen el código que tendría que incrustarse en la página donde estará el mapa,
	junto a la imagen, y los dos ficheros php cuyos códigos están en las dos pestañas siguientes.
</p>

<h3 class="subtitulo">
	SVG: ¿por qué no?
</h3>
<p>
	Activando la pestaña "código SVG", encontramos el código que hay en la pestaña "Mapa SVG" (del primer conjunto de pestañas).
	Debemos destacar la sencillez del código y a la ausencia de código javascript; a la vez que se distingue el sencillo código css dentro de la propia imagen.
	Lo único que nos puede inhibir a usar este código, es la falta de soporte en navegadores obsoletos.
</p>

<h3 class="subtitulo">
	Inconvenientes
</h3>
<p>
	Debemos ser justos y asumir que no es un sistema perfecto; aunque podemos mostrar soluciones a los pocos inconvenientes del sistema.
	Mostramos a continuación una imágen que no tiene los colores tan uniformes para su uso. Si pulsamos sobre Oceanía, la captura es correcta;
	pero si pretendemos capturar el mapa de Rusia, no obtenemos respuesta (recomiendo no hacerlo).
</p>
<p>
	El problema de la imagen es que los colores no son del todo "planos" y/o no está debidamente delimitada.
	La solución que hemos usado (tal vez la más sencilla), es usar un editor y aplanar el color de las zonas que pensemos capturar.
	Hemos usado el programa photoshop obteniendo el resultado esperado, pero para evitar el uso de software de pago,
	preferimos usar GIMP (podría ser la versión portable; que a la vez que es gratuito, se puede borrar después de su uso).
</p>
<p>
	Abrimos la imagen en el editor y seleccionamos la herramienta "lata de pintura" y simplemente pinchamos en la zona de la imagen que deseemos.
	Si tenemos que seleccionar una zona adyacente de otra seleccionada, tal vez sea conveniente cambiar el color de relleno.

</p>

</div>

<p>
	Terminado el proceso podemos capturar las zonas con los nuevos colores perfectamente desde nuestra aplicación.
	Junto a estas líneas vemos los resultados de las capturas sobre Rusia, China, Oceanía, Brasil y Canadá.
</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