Consejos para mostrar fotos en ventanas emergentes



Consejos para mostrar fotos en ventanas emergentes

Por Bern Szukalski

Cuando se muestran fotos u otras imágenes en las ventanas emergentes de mapas web de ArcGIS Online, a veces son las pequeñas cosas las que pueden hacer una gran diferencia en la experiencia del usuario. Un pequeño proyecto recientemente completado para el Centro Botánico de Montgomery es un ejemplo de cómo puede implementar algunos cambios menores para optimizar sus fotos en ventanas emergentes y presentar su mejor ventana emergente.

Para este proyecto, recibimos las ubicaciones de los árboles dentro del Centro Botánico en una hoja de cálculo, junto con fotografías de cada árbol. Las fotografías eran bastante grandes, más de 15 MB cada una.

En nuestra primera iteración colocamos las fotos en una ubicación web y agregamos una columna a nuestra hoja de cálculo que incluía la URL de cada foto para que pudiéramos configurarlas en nuestra ventana emergente. Aquí está la ventana emergente sin procesar después de que primero arrastramos y soltamos la hoja de cálculo en nuestro mapa:
 Unconfigured pop-up

El campo llamado FOTO contiene el enlace a la imagen. Lo usamos dos veces para mostrarlo en la ventana emergente y también para proporcionar un enlace a la foto de tamaño completo. Aquí está nuestro cuadro de diálogo emergente de medios configurados.
 Partially configured pop-up

También escondimos campos no deseados y usamos alias para cambiar todos los CAPS a mayúsculas y minúsculas para que sean un poco más amigables con los campos de Especie y Nombre común.

Esto dio buenos resultados, pero notamos dos cosas de inmediato. La primera fue que hubo diferencias en la forma en que se mostró la foto en la ventana emergente, ya que la foto se ajustó dentro del espacio asignado y tuvimos fotos de diferentes tamaños y relaciones de aspecto.
 pop-ups compared

Lo segundo que notamos es que a pesar de que la ventana emergente muestra una imagen pequeña, demoró unos segundos mostrar la foto la primera vez. La razón, por supuesto, es que todavía estábamos accediendo a la imagen completa de 15 MB para mostrar en la ventana emergente.

La solución fue fácil. Hicimos una versión de menor tamaño de todas las imágenes para que se ajustara exactamente a la ventana emergente (200 píxeles por 150 píxeles) y la agregamos a nuestra hoja de cálculo en un campo de miniaturas (PHOTO_TH que se muestra con la flecha a continuación) para usar en la ventana emergente.
  
El resultado final es que terminamos con una experiencia emergente consistente y de alto rendimiento para todas las fotos.
  

Consejos adicionales

Optimizar la imagen para la visualización web para un mejor rendimiento. Puede enlazar a una foto más grande.
Asegúrese de que donde sea que guarde sus fotos, las fotos no se borrarán accidentalmente.
Puede usar ArcGIS Online para el almacenamiento de fotos, pero deben compartirse públicamente para obtener la URL.
Recuerde configurar correctamente otras partes de la ventana emergente, todas las partes de la experiencia emergente contribuirán a la experiencia fotográfica.
Cuando utilice el mapa web en aplicaciones configurables, tenga en cuenta que la pantalla emergente variará en tamaño y relación de aspecto dependiendo de la aplicación. Es posible que desee considerar qué aplicación es su objetivo previsto, para poder configurar la experiencia emergente para maximizar la experiencia en la aplicación.


Más información

Para más información, vea

Esta publicación se publicó originalmente el 26 de abril de 2012 y se ha actualizado.

SOBRE EL AUTOR

El evangelista tecnológico y estratega de producto en Esri, se centra en las formas de ampliar el acceso a la información geográfica y ayuda a los usuarios a tener éxito con la plataforma ArcGIS. En un buen día estoy haciendo un mapa, en un gran día estoy en uno. Siga a @bernszukalski o envíe un correo electrónico a bszukalski@esri.com

¿Necesita más información? ¡Escríbanos!

Un ejecutivo de SIGSA está esperando atenderle.

Comentarios

Entradas más populares de este blog

Crea un mapa demográfico en 5 minutos

Agregar y usar fotos e imágenes en ArcGIS Online

Como GM planea y administra el riesgo de la cadena de suministro