logo El diario de Pepe Molina (Caricatos)

yo

Después de crear la página para "Capturar áreas en imágenes", pensaba que no tardarían en mejorar el sistema


Ú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

Sabio es aquel que constantemente se maravilla

André Gide, escritor francés (1859-1951).


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

Mapear una imagen paso a paso

emoticón de Caricatos Publicado el día 07 de enero de 2017
id=149; categorías: Vicisitudes de un Webmaster, Globalización, Programación, Experiencias SEO

Después de crear la página para "Capturar áreas en imágenes", pensaba que no tardarían en mejorar el sistema, 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.

Nuestra propuesta permite obtener la silueta (en el ejemplo una figura) pinchando con el ratón sobre la misma.

Paso a paso: un click = un área

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.

Desde el apartado "Otras páginas del dominio", pinchamos en la segunda opción: "Capturar áreas", 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".

Analizaremos brevemente la situación: 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".

Queda entonces volver a la pestaña de captura y repetir el proceso con el resto de las formas que vayamos a capturar.

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".

Seleccionar los recursos

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.

SVG: ¿por qué no?

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.

Inconvenientes

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).

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).

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.

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á.

Zona de comentarios

Este apunte aún no tiene comentarios.

Evaluación

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

http://www.pepemolina.com/postales/Fondos/FONDO010.gif
http://www.pepemolina.com/postales/Navidad/TgC_Navidad_31.gif
http://www.pepemolina.com/postales/Navidad/snow_anm.gif
http://www.pepemolina.com/postales/Navidad/xmastree2.gif
enlace a la postal
Copyright © 2002-2024 www.pepemolina.com
RSS rss | Ver Mapa del sitio