Abrir la experiencia
Comenzará abriendo la experiencia creada en el tutorial anterior.
- Si ha completado el tutorial anterior, Crear una experiencia web con dos mapas, vuelva a abrir su experiencia Estuario marino de American River y pase a la siguiente sección.
Nota:
Si no sabe cómo buscar la experiencia, abra ArcGIS Experience Builder e inicie sesión con su cuenta de ArcGIS. Su experiencia aparecerá en la página Experiencias recientes.
- Si no ha completado el tutorial anterior, abra ArcGIS Experience Builder e inicie sesión con su cuenta de ArcGIS.
Nota:
Si no tiene una cuenta de ArcGIS, consulte las opciones de acceso a software.
Aparece la página Experiencias recientes.
- Haga clic en el botón Crear nuevo.
- Haga clic en la pestaña ArcGIS Online.
- En la barra de búsqueda, escriba plantilla 1 de estuario.
- En la tarjeta Plantilla 1 de Estuario marino de American River, haga clic en el botón Crear.
Aparece el lienzo, que muestra la experiencia creada hasta el momento. Incluye un widget de mapa con dos mapas entre los que puede alternar, así como un encabezado con un título.
- En la barra de herramientas del builder, haga clic en el título y cambie el nombre a Estuario marino de American River.
Agregar una leyenda y un widget de columna
No todos los mapas necesitan leyendas. Por ejemplo, si todo lo visible en el mapa tiene etiquetas o es obvio de alguna otra forma, una leyenda es redundante. Sin embargo, los dos mapas de esta aplicación web sí requieren leyendas. Los agregará al diseño con un widget de leyenda para que los usuarios puedan interpretar correctamente el mapa. También agregará otro widget de diseño, en este caso, una columna.
- Si el panel Insertar widget no está visible, en la barra de herramientas, haga clic en el botón Insertar.
- En el panel Insertar widget, desde la sección Centrado en el mapa, arrastre el widget Leyenda a la parte en blanco del widget de fila.
El nuevo widget rellena todo el espacio, sin dejar sitio para más widgets. Usted esperaba apilar algunos widgets en vertical en este espacio. Para ello, primero debe agregar un widget de columna.
- En la barra de herramientas, haga clic en el botón Deshacer.
- En el panel Insertar widget, haga clic en el botón Buscar. Escriba columna.
- Desde el panel, arrastre el widget Columna a la parte en blanco del widget de fila.
Las columnas le permiten organizar el contenido en vertical.
- En el panel Insertar widget, borre la barra de búsqueda. Arrastre el widget Leyenda a la columna.
El widget de leyenda ya no ocupa todo el espacio.
- En el panel Leyenda, en Seleccionar un widget Mapa, elija Mapa.
El widget se rellena con la leyenda correspondiente al mapa actual.
- En la barra de herramientas del builder, haga clic en Vista en directo para poder interactuar con el mapa y otros widgets.
- En la esquina inferior izquierda del mapa, haga clic en el botón de cambiar mapa.
La leyenda se actualiza para mostrar la leyenda del otro mapa.
Agregar un widget de marcador
A continuación, agregará mayor interactividad a la aplicación web con un widget de marcador. Este widget permitirá a los usuarios acercarse a cada tipo de cobertura en los mapas.
- En la barra de herramientas del builder, desactive la Vista en directo.
No se pueden agregar widgets cuando se está en la vista en directo.
- En la barra de herramientas lateral, haga clic en el botón Insertar para volver a abrir el panel Insertar widget.
- Busque marcador. Arrastre el widget Marcador al lienzo y suéltelo en la columna situada debajo de la leyenda.
- En el panel Marcador, en Seleccionar una plantilla, en Simple, elija la cuarta opción, Diapositiva 1 (apunte a las plantillas para ver sus nombres).
- Haga clic en Iniciar.
- En Seleccionar un widget de mapa, elija Mapa.
A continuación, tiene la opción de agregar marcadores. Puede definir manualmente marcadores para cualquier parte del mapa. Sin embargo, sus dos mapas ya tienen un conjunto de marcadores definidos, así que los utilizará.
- Active la casilla de verificación Visualizar marcadores del mapa web.
El widget de marcador rellena con el primer marcador, Posidonia.
Cambiará los ajustes de Disposición para que los usuarios puedan desplazarse por los marcadores.
- En el panel Marcador, amplíe la sección Disposición.
- Para Estilo de paginación, elija Desplazamiento. Para Dirección, elija Abajo.
Aparecen flechas en el widget.
- Para Altura del elemento (px), escriba 200.
A continuación, cambiará el color de fondo del widget para que sea blanco como la leyenda. La coherencia es un aspecto importante de un buen diseño.
- En la parte superior del panel, haga clic en la pestaña Estilo.
- Junto a Fondo, haga clic en el botón Estilo rápido.
El blanco no es una de las opciones del menú Estilo rápido.
- Haga clic en Personalizar.
En la sección Fondo aparecen más opciones de estilo.
- Haga clic en el botón Color de relleno. En Colores estándar, haga clic en la casilla de color blanco.
El fondo del widget de marcador ahora se corresponde con el widget de leyenda.
A continuación, probará el widget de marcador.
- Active la Vista en directo.
- Desplácese por el widget de marcador y haga clic en uno de los marcadores.
El mapa se amplía hasta la ubicación del marcador.
- Haga clic en el botón de cambiar mapa para ver el otro mapa y acercarse a otro marcador.
Ambos mapas web se configuraron con el mismo conjunto de marcadores, lo que permitió que el widget funcionara de la misma manera para ambos mapas. Si solo uno de los mapas tuviera marcadores, el widget aparecería vacío al seleccionar el otro mapa.
Nota:
Puede aprender a configurar marcadores en un mapa web en la documentación.
Agregar un widget Swipe
Actualmente, los usuarios pueden alternar entre los dos mapas. Sin embargo, usted quiere que puedan ver ambos mapas a la vez, para que comprendan mejor el aspecto de cada tipo de cobertura de suelo sobre el terreno. Agregará un widget Swipe para hacerlo posible.
- Desactive Vista en directo.
- En la barra de herramientas lateral, haga clic en el botón Insertar. En el panel Insertar widget, busque Swipe.
Nota:
Si utiliza ArcGIS Enterprise, es posible que el widget Swipe no esté disponible. Puede pasar a la siguiente sección.
- Arrastre el widget Swipe al lienzo y suéltelo en la columna, encima de la leyenda.
- En el panel Swipe, haga clic en la pestaña Contenido. En Seleccionar una plantilla, asegúrese de que la opción Horizontal simple esté seleccionada.
- Haga clic en Iniciar.
- En Seleccionar un widget de mapa, elija Mapa.
En el lienzo, el widget Swipe se rellena con un botón de alternancia y dos secciones ampliables.
Quiere que los usuarios puedan hacer swipe entre los dos mapas en lugar de entre las capas de mapas.
- En el panel Swipe, para el Modo swipe, elija Swipe entre mapas web o escenas web.
- En Configuración general, para Posición inicial del control deslizante, escriba 50.
De este modo, la barra de control deslizante se colocará en el centro del widget. Ya tiene todo listo para probar el widget Swipe.
- Active la Vista en directo. En el widget Swipe, haga clic en el botón de alternancia Swipe.
- Amplíe y desplácese por el mapa y mueva la barra Swipe para probar la entidad.
Los dos mapas se mueven en sincronía, lo que le permite explorar ambos al mismo tiempo. La leyenda se actualiza para mostrar el mapa en el que se hizo clic por última vez.
- En la columna, desplácese hacia abajo y haga clic en uno de los marcadores.
Ambos mapas se amplían hasta la ubicación marcada. La funcionalidad Swipe facilita a los usuarios ver cómo los tipos de cobertura cambian gradualmente a través del paisaje, en lugar de con los límites estrictos que sugiere el mapa Cover type por sí solo.
Ajustar la altura del widget
A continuación, ajustará la altura de cada widget de la columna. Existen tres métodos para determinar el tamaño de un widget: automático, extender y personalizar. Utilizará un método diferente para cada widget.
- Desactive Vista en directo. Haga clic en el widget Swipe para seleccionarlo.
Nota:
Si no dispone de ningún widget Swipe, vaya al paso 4.
El widget Swipe ocupa más espacio del necesario. También muestra más información de la necesaria. Una parte importante del diseño es decidir qué debe incluirse y qué no. Eliminar todo lo que no sea necesario incluir hace que su diseño sea más claro y fácil de entender para su público. Acortará la altura del widget Swipe para que solo se vea el botón de alternancia y se oculten los nombres de los mapas.
- En el panel Swipe, haga clic en la pestaña Estilo. Junto a Altura, haga clic en el botón de flecha.
Hay tres opciones de altura:
- Automático garantiza que el widget sea lo suficientemente alto para dar cabida a su contenido, pero nada más.
- Extender ajusta la altura del widget para que llene el espacio disponible dentro de su contenedor.
- Personalizar le permite definir una altura por píxeles o por un porcentaje de la altura del contenedor.
Quiere ocultar parte del widget Swipe acortándolo. La única opción de altura que permitirá que un widget sea más corto que su contenido es Personalizar. Esta opción ya está seleccionada.
Puede ajustar las alturas personalizadas escribiendo un número o arrastrando el widget.
- En el lienzo, haga clic en el manipulador situado en la parte inferior del widget y arrástrelo hacia arriba para acortar la altura del widget. Arrastre hasta que los nombres de los mapas queden ocultos y solo sean visibles la palabra Swipe y el botón de alternancia.
En el panel Swipe, el parámetro Altura se actualiza a aproximadamente 50 píxeles. A continuación, establecerá la altura del widget de leyenda.
- Haga clic en el widget de leyenda.
La altura de este widget debe cambiar cuando el usuario cambia entre los dos mapas porque una de las leyendas es más alta que la otra.
- En el panel Leyenda, en la pestaña Estilo, para Altura, elija Automático.
Nota:
Si la Altura ya está definida en Automático, asegúrese de que el botón Mantener relación de aspecto esté desbloqueado.
El panel Leyenda se acorta para que sea lo suficientemente alto como para mostrar toda la leyenda.
- Haga clic en el widget de marcador. En el panel Marcadores, en Altura, elija Extender.
El widget del marcador se extiende para ocupar la altura restante de la columna.
- Active la Vista en directo.
- Haga clic o cambie entre los dos mapas y observe cómo cambian los widgets de la columna.
El widget Swipe utiliza el método de altura Personalizar, por lo que no cambia: mantiene siempre la misma altura. El widget de leyenda utiliza el método Automático, por lo que cambia de altura en función de lo alta que sea la leyenda activa. El widget de marcador utiliza el método Extender, por lo que cambia de altura en función del espacio disponible en la columna.
Revisar el contorno
Al crear un diseño en ArcGIS Experience Builder, compruebe con frecuencia la sección Contorno para entender cómo se disponen y anidan los widgets. Puesto que acaba de agregar cinco widgets, ahora es un buen momento para revisar el contorno y asegurarse de que su experiencia esté estructurada de la forma que pretendía.
- En el panel Página, en la sección Contorno, asegúrese de que Cuerpo, Fila y Columna estén expandidos.
Sugerencia:
Si el panel Página no está abierto, en la barra de herramientas lateral, haga clic en el botón Página.
La sección Contorno muestra todos los widgets presentes en la página y explica cómo están anidados unos dentro de otros. Esta página consta de un widget Fila. Dentro de la fila hay un widget Columna y un widget Mapa. Dentro de la columna hay tres widgets: Swipe, Leyenda y Marcador.
También puede utilizar la sección Contorno para seleccionar widgets y modificar sus propiedades.
- En la sección Contorno, haga clic en Fila.
Aparece el panel Fila.
- En el panel Fila, haga clic en la pestaña Contenido.
- Tanto para Espacio como para Relleno, escriba 0.
En el lienzo, el espacio gris entre la columna y el mapa desaparece. También lo hace el margen gris que rodea todo excepto el encabezado.
El relleno y el espacio adicionales no eran necesarios para su diseño. Eliminarlos simplificó el diseño al suprimir el desorden visual adicional. Sin las partes vacías restantes del widget de fila visibles, ya no podrá seleccionar la fila en el lienzo, pero podrá seguir seleccionándola en la sección Contorno.
- En la barra de herramientas del builder, desactive Vista en directo y haga clic en el botón Guardar.
En este tutorial, ha agregado cinco widgets a una aplicación web en ArcGIS Experience Builder. Ha aprendido sobre los widgets de diseño, los métodos de ajuste de tamaño y la sección Contorno. Pruebe el siguiente tutorial de esta serie, Agregar una ventana a una aplicación web, para aprender a agregar una ventana y un botón y a vincularlos entre sí.
