Agregar una ventana a una aplicación web
Abrir la experiencia
Comenzará abriendo la experiencia creada en el tutorial anterior.
- Si ha completado el tutorial anterior, Organizar el diseño de una aplicación web con varios widgets, 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 2 de estuario.
- En la tarjeta Plantilla 2 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, un encabezado con un título y una columna con tres widgets: swipe, leyenda y marcador.
- 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 ventana
Dispone de más información para agregar a su experiencia: un mapa de localizador y el texto de créditos. Sin embargo, teme sobrecargar el diseño con demasiada información y distraer la atención del mapa. En un diseño estático, puede utilizar los principios de jerarquía visual para asegurarse de que la información importante (como el mapa) se perciba en primer lugar, mientras que la información secundaria (como el texto de créditos) se perciba en último lugar. En el diseño de una aplicación web, puede utilizar además la interactividad para controlar lo que se ve primero.
A continuación, agregará una ventana al diseño para alojar el mapa de localizador y el texto de créditos. La ventana garantizará que esta información secundaria esté disponible y sea fácil de leer, sin abarrotar el mapa. No será visible hasta que el usuario decida revelarlo.
- En la barra de herramientas lateral, haga clic en el botón Página.
- En la parte superior del panel Página, haga clic en la pestaña Ventana.
Puede agregar varias páginas y ventanas a una experiencia. Esta experiencia tendrá una de cada.
- Haga clic en el botón Agregar ventana. Desplácese hacia abajo y haga clic en Barra lateral.
Aparece una ventana en la parte derecha del lienzo. El resto del lienzo se oscurece para que parezca que la ventana flota sobre él.
La ventana que ha agregado es una plantilla, lo que significa que ya está rellenada con algunos widgets. Siempre que trabaje con una plantilla, es recomendable que revise su contorno antes de realizar cualquier cambio, para que comprenda cómo está estructurada la página o la ventana.
En el panel Página, la sección Contorno muestra que la ventana contiene una imagen, un botón y una columna.
- En la sección Contorno, amplíe Columna 2.
El widget de columna contiene dos widgets de texto.
- En la sección Contorno, haga clic en Texto 2 para seleccionarlo.
En el lienzo, el texto Título está seleccionado.
No necesita ningún título para su ventana, por lo que eliminará este widget.
- En la sección Contorno, apunte a Texto 2. Haga clic en el botón Más y pulse Eliminar.
Agregar texto
Agregará texto a la ventana para acreditar las fuentes de los datos del mapa y las fotografías utilizadas en el widget de marcador.
- Copie el texto siguiente:
El American River es un estuario marino de la isla Canguro, en Australia Meridional. Forma parte del Encounter Marine Park e incluye la Zona de Santuario de la Laguna Pelícano, un punto caliente de biodiversidad protegido desde 1914.
Los datos utilizados en este mapa proceden de Hábitats estuarinos de Australia Meridional, un dataset proporcionado por el Gobierno de Australia Meridional, Departamento de Medio Ambiente y Agua.
Este sitio fue creado por Su nombre on Fecha actual, siguiendo el tutorial Elaborar un diseño en ArcGIS Experience Builder.
Créditos de las fotografías:
Posidonia: flickr, usuarios Paul Asman y Jill Lenoble - https://www.flickr.com/photos/pauljill/5777808662/
Posidonia/algas: flickr, usuario Gerry Thomasen - https://www.flickr.com/photos/gerrythomasen/174310588/
Hinojo marino: Wikimedia Commons, usuario Melburnian - https://commons.wikimedia.org/wiki/file:sarcocornia_quinqueflora.jpg
Hinojo marino/atriplex/pradera: iNaturalist, usuario Samuel Brown - https://www.inaturalist.org/photos/31331920
Arena: flickr, usuario Phil Whitehouse - https://www.flickr.com/photos/philliecasablanca/2051633887/
Melaleuca/juncos: Wikimedia Commons, usuario Melburnian - https://commons.wikimedia.org/wiki/file:melaleuca_squarrosa.jpg
Pradera: Wikimedia Commons, usuario Kolforn - https://commons.wikimedia.org/wiki/File:Grassland_countryside,_Vale_da_Azinheira,_25_June_2016.JPG
Básico: Wikimedia Commons, usuario Manage891a3 - https://commons.wikimedia.org/wiki/file:water_surface_lake.jpg
- En el lienzo, haga doble clic en el widget de texto restante para editarlo. Haga clic con el botón derecho y elija Pegar como texto sin formato.
Sugerencia:
Si la opción Pegar como texto sin formato no está disponible, pulse Ctrl+Mayús+V o Cmd+Opción+Mayús+V.
El texto incluye algo de información sobre el estuario y proporciona la atribución de los datos y las fotos. A continuación, agregará hipervínculos a partes del texto.
- En el widget de texto, resalte Encounter Marine Park. En el panel Texto 3, haga clic en el botón Vínculo.
- En la ventana Definir vínculo, en Vínculo a, elija URL. Para URL, pegue https://www.parks.sa.gov.au/parks/encounter-marine-park.
- Haga clic en Aceptar.
- En el segundo párrafo, resalte Hábitats estuarinos de Australia Meridional. Siga el mismo método que antes para vincular este texto a https://data.sa.gov.au/data/dataset/estuarine-habitats-of-south-australia.
- Edite el texto para incluir su nombre y la fecha actual.
- En la barra de herramientas del builder, haga clic en Guardar.
Agregar una imagen
A continuación, agregará una imagen de un mapa de localizador a la ventana.
- Haga clic en el widget de la imagen. En el panel Imagen, haga clic en Seleccionar una imagen.
- En el panel Seleccionar una imagen, haga clic en la pestaña URL y pegue https://www.arcgis.com/sharing/rest/content/items/11b62ea3ef81427dbf6315563f17c810/data.
- Haga clic fuera del cuadro de texto para confirmar el cambio. Cierre el panel Seleccionar una imagen.
La imagen es un mapa de localizador de American River en contexto con el resto de Australia. Se creó con ArcGIS Pro y se guardó como imagen PNG.
Sus etiquetas no son legibles porque el mapa es demasiado pequeño. Hará que la ventana sea más amplia para que el mapa pueda expandirse.
- En el panel Página, haga clic en Ventana para seleccionarla.
Sugerencia:
Como alternativa, en el lienzo, haga clic en el espacio entre la imagen y el texto.
Aparece el panel Ventana.
- En la sección Posición y tamaño, para An., escriba 340 y pulse Intro.
La ventana se ensancha. También hará que el widget de imagen sea más alto.
- Haga clic en el widget de la imagen. Arrastre su borde inferior hasta que se vea todo el mapa.
Ahora la imagen y el texto se superponen, lo que dificulta la lectura de ambos. Desplazará el texto hacia abajo para que no interfiera con la imagen.
- Haga clic en el widget de texto para seleccionarlo.
No hay ningún manipulador en el widget de texto: no tiene la posibilidad de moverlo hacia abajo y alejarlo de la imagen.
En ocasiones, no puede cambiar manualmente el tamaño ni la posición de un widget porque su tamaño está definido en Automático o Extender. Sin embargo, en este caso, el widget de texto tiene un tamaño de altura personalizado, por lo que esa no es la causa.
Sugerencia:
Para confirmar que un widget tiene un tamaño de altura personalizado, en su panel de propiedades, haga clic en la pestaña Estilo. Asegúrese de que Altura esté definida a un número, en lugar de Automático o Extender.
Si no puede cambiar el tamaño ni la posición de un widget, aunque utilice el método de ajuste de tamaño Personalizar, compruebe la sección Contorno para ver si el widget está contenido dentro de otro widget.
- En el panel Página, consulte la sección Contorno.
En este caso, el texto está contenido dentro de una columna. La columna determina algunos aspectos del tamaño y la posición del texto. En este caso, puede desplazar el widget de texto moviendo el widget de columna que lo contiene.
- En la sección Contorno, haga clic en Columna 2.
- En el lienzo, los manipuladores de arrastre aparecen en el widget. Arrastre el superior hacia abajo hasta que se sitúe debajo del mapa de localizador.
Ajustar el tema
Los hipervínculos del widget de texto son azules. Este color procede del tema de la experiencia. A continuación, editará el tema para que el color del vínculo coincida con los colores del mapa de localizador.
- En la barra de herramientas lateral, haga clic en el botón Tema.
- En la parte inferior del panel Tema, haga clic en Personalizar.
- Sobre Primario, haga clic en el botón de edición azul.
- Para HEX, escriba #27a3ad y pulseIntro.
El color primario se actualiza al mismo color turquesa utilizado en el mapa de localizador. También es uno de los colores principales del mapa Cover type. El texto con hipervínculo y los botones del widget de marcador cambian de azul a turquesa.
Agregar un botón y vincularlo a la ventana
A continuación, debe agregar una forma de que los usuarios abran la ventana. Agregará un botón al encabezado y vinculará el botón a la ventana.
- En la barra de herramientas lateral, haga clic en el botón Página. En la parte superior del panel Página, haga clic en la pestaña Página.
La ventana desaparece. Ahora puede seguir editando la página en lugar de la ventana.
- En el lienzo, señale el encabezado y haga clic en Editar encabezado.
- En la barra de herramientas lateral, haga clic en el botón Insertar. En el panel Insertar widget, haga clic en el botón Buscar y escriba botón.
- Arrastre el widget Botón al lienzo. Suéltelo a la derecha del encabezado.
No se preocupe si el botón no está colocado exactamente como desea. Ya arreglará su tamaño y posición más adelante.
- En el panel Botón 2, en Texto, borre el texto existente y escriba Acerca de este mapa. Pulse Intro.
El texto del botón se actualiza. A continuación, conectará el botón a la ventana.
- En el panel Botón 2, haga clic en Definir vínculo.
- En el panel Definir vínculo, en Vínculo a, elija Ventana.
Solo hay una ventana en esta experiencia, por lo que no es necesario que elija Seleccionar una ventana.
- Haga clic en Aceptar.
Por último, probará el botón y la ventana.
- En la barra de herramientas del builder, haga clic en el botón Vista en directo.
- Haga clic en el botón Acerca de este mapa.
Aparece la ventana.
- En la parte superior de la ventana, haga clic en el botón de cerrar.
La ventana se cierra.
- En la barra de herramientas del builder, desactive Vista en directo y haga clic en el botón Guardar.
En este tutorial, ha agregado una ventana y un botón a una aplicación web en ArcGIS Experience Builder. Ha aprendido a editar texto, agregar una imagen, vincular un botón a una ventana y cambiar el color de un tema. Pruebe el siguiente tutorial de esta serie, Cambiar el tamaño de los widgets para pantallas más pequeñas, para aprender a personalizar diseños para pantallas de distintos tamaños.
