Crear una nueva experiencia
En ArcGIS, puede crear aplicaciones web con ArcGIS Dashboards, ArcGIS Instant Apps o ArcGIS StoryMaps. Para este proyecto, elegirá crear su aplicación con ArcGIS Experience Builder porque ofrece el mayor control y personalización sobre su diseño.
Nota:
Puede obtener más información sobre qué builder de aplicaciones utilizar en otro tipo de situaciones en el artículo ¿Qué builder de aplicaciones elijo?
Las aplicaciones web creadas con Experience Builder también se denominan experiencias web. Empezará creando una nueva experiencia con la plantilla de pantalla completa en blanco.
- Abra ArcGIS Online en su portal de ArcGIS Enterprise.
- Inicie sesión en su cuenta de ArcGIS.
Nota:
Si no tiene una cuenta de ArcGIS, consulte las opciones de acceso a software.
- En la parte superior de la página, junto a su nombre de usuario, haga clic en el botón del selector de aplicaciones.
- Haga clic en Experience Builder.
ArcGIS Experience Builder se abre en una pestaña nueva.
- Haga clic en el botón Crear nuevo.
La página Seleccionar una plantilla para empezar muestra una lista de plantillas que puede utilizar para crear diseños habituales. Para este tutorial, empezará con una plantilla en blanco, pero aún tiene que elegir un tipo de página: pantalla completa, cuadrícula o desplazamiento. Elegirá la pantalla completa porque es una buena opción para las aplicaciones en las que el mapa es el énfasis principal, y porque le da el mayor control y libertad con su diseño. Le permite colocar widgets en el lienzo en cualquier posición, incluso superpuestos entre sí.
- En la tarjeta Pantalla completa en blanco, haga clic en Crear.
Nota:
Si aparece una ventana Introducción, haga clic en Omitir el recorrido.
Aparecerá el lienzo, donde creará su aplicación web.
- En la barra de herramientas del builder, en la parte superior de la página, haga clic en Experiencia sin título. Borre el texto existente y escriba Estuario marino de American River.
Junto al lienzo, se abre el panel Insertar widget. Este panel enumera todos los elementos (denominados widgets) que puede agregar a su diseño.
- Desplácese hasta la parte inferior del panel Insertar widget y busque la sección Diseño.
Los widgets de diseño son contenedores que le permiten organizar mejor otros widgets en el lienzo. Organizan su diseño y lo mantienen ordenado a medida que cambia el tamaño de la pantalla. Es más sencillo diseñar un diseño agregando y disponiendo los widgets de diseño antes que cualquier otro.
- Desde el panel Insertar widget, arrastre el widget Fila al lienzo.
- En el lienzo, en la barra de herramientas del widget de fila, haga clic en el botón Alinear y en Tamaño completo.
El widget de fila se expande para abarcar todo el lienzo.
Agregar un widget de mapa con dos mapas
Ya ha realizado dos mapas del estuario marino, que ahora debe presentar en la experiencia. A continuación, agregará un widget de mapa y lo configurará con los dos mapas.
- En el panel Insertar widget, desplácese hasta la parte superior del panel y haga clic en el widget Mapa. Arrástrelo y suéltelo en el lienzo, dentro del widget de fila.
Aparece un mapa predeterminado en el lienzo.
- Arrastre el borde izquierdo o derecho del widget de mapa.
Aparecen líneas verticales discontinuas. Los widgets de fila organizan el contenido uno al lado del otro, en doce espacios iguales.
- Arrastre los bordes del mapa hasta llenar todos los espacios de la fila excepto los dos situados más a la izquierda.
Dejará los dos espacios de la izquierda para una leyenda y otros widgets.
En el otro lado del lienzo, el panel Mapa es visible, el cual muestra las propiedades del widget seleccionado. A continuación, rellenará el widget de mapa con los dos mapas que creó previamente para este proyecto.
- En el panel Mapa, haga clic en Seleccionar mapa.
- En la parte inferior del panel Seleccionar datos, haga clic en Agregar nuevos datos.
- En la ventana Agregar datos, haga clic en la pestaña ArcGIS Online. En la barra de búsqueda, escriba American River owner:Learn_ArcGIS.
- En los resultados de la búsqueda, haga clic en las tarjetas Tidal class y Cover type.
Aparecerán marcas de verificación en los mapas seleccionados.
- Haga clic en Hecho.
Los dos mapas se agregan al panel Seleccionar datos.
- En el panel Seleccionar datos, haga clic en Cover type y Tidal class.
Los dos mapas se agregan al panel Mapa. En el lienzo, el widget de mapa muestra ahora uno de los mapas del estuario en lugar del mapa predeterminado del mundo que mostraba anteriormente. La escala es demasiado pequeña: el estuario parece diminuto en el centro del lienzo. Cambiará la extensión predeterminada del widget de mapa.
- En el panel Mapa, en Vista inicial, haga clic en Personalizar. Haga clic en Modificar.
- En la ventana Modificar vista inicial, realice movimientos panorámicos y de zoom para centrar el estuario en la vista.
- Haga clic en Aceptar.
En el lienzo, el mapa se acerca a la escala y posición que haya definido.
Revisar los mapas
A continuación, revisará los dos mapas y probará a cambiar de uno a otro.
- En la barra de herramientas del builder, haga clic en el botón Vista en directo.
En la vista en directo, puede interactuar con el lienzo como lo haría un usuario, en lugar de seleccionar widgets.
- En la esquina inferior izquierda del widget de mapa, haga clic en el botón Cambiar mapa para mostrar el otro mapa.
- En caso necesario, vuelva a hacer clic en el botón Cambiar mapa hasta que el mapa Tidal class (con imágenes) sea visible.
Este mapa define las áreas intermareal, supramareal e inframareal del estuario. Los estuarios son un tipo de humedal. Son masas de agua costeras que suelen mezclar el agua dulce de un río con el agua salada de una unión con el mar. Esta mezcla proporciona muchos nutrientes, lo que se traduce en un alto nivel de biodiversidad.
Este estuario recibe el nombre de American River y está situado en la isla Canguro, en Australia Meridional. Es un sitio importante para las aves costeras, las aves marinas y los peces e incluye el Parque de Conservación de la Laguna Pelícano. Sin embargo, se enfrenta a las amenazas del creciente desarrollo urbanístico, el turismo y la carga de nutrientes.
Nota:
Puede leer más información sobre American River y otros estuarios marinos de la isla Canguro en el informe Región de Gestión de los recursos naturales de isla Canguro: paquete de información sobre estuarios del Gobierno de Australia Meridional, Departamento de Medio Ambiente y Patrimonio.
- Vuelva a hacer clic en el botón Cambiar mapa para ver el mapa Cover type.
Este mapa muestra la vegetación primaria o el tipo de sedimento que cubre cada área del estuario. Podría haber incluido esta información en el primer mapa, pero es más fácil de leer en un mapa aparte. Cuanta más información se ponga en un solo mapa, más difícil será interpretar dicha información. Con frecuencia, la mejor solución es hacer un segundo mapa.
- Haga zoom y desplácese por el mapa.
- En la esquina superior izquierda del mapa, haga clic en el botón Vista predeterminada del mapa.
El mapa vuelve a la vista inicial que usted configuró.
Nota:
Si no puede ver el diseño completo en su pantalla, en la esquina inferior derecha de Experience Builder, haga clic en el botón Ajustar la anchura a la ventana actual.
Configurar herramientas de mapa
El botón Vista de mapa predeterminada es un ejemplo de herramienta de mapa. A continuación, configurará otras herramientas, que aparecerán encima del widget del mapa. Tómese su tiempo para considerar cuáles son necesarias para su aplicación. No agregue cosas a su diseño solo porque puede: siempre debe poder explicar por qué es necesaria la adición. Los elementos innecesarios solo distraerán del mensaje de su mapa e incluso pueden confundir al lector del mapa.
- En el panel Mapa, en Herramientas, desactive la herramienta Buscar.
El botón Buscar desaparece del mapa. No hay nombres de municipios ni calles que buscar en el estuario, por lo que no se necesita ninguna barra de búsqueda.
La herramienta Brújula es una flecha de norte. No todos los mapas necesitan una flecha de norte, y los mapas web tienen menos probabilidad de necesitarla que los mapas estáticos, pues los usuarios pueden alejar la imagen hasta encontrar una geografía reconocible. Sin embargo, esta aplicación se mostrará principalmente en dispositivos con pantalla táctil, por lo que es más probable que los usuarios puedan girar accidentalmente los mapas. Puede facilitarles la reorientación de los mapas agregando una flecha de norte.
- En Herramientas, active la herramienta Brújula.
El botón Brújula aparece en el mapa debajo del botón Vista de mapa predeterminada.
Las herramientas Capas y Mapa base permiten que los usuarios cambien las capas visibles y el mapa base utilizado. Estas opciones resultan útiles cuando el usuario necesita controlar mucho su exploración para tomar decisiones. En este caso, usted intenta contar una historia controlada sobre el estuario. Introducir formas para que el usuario cambie el mapa le quita parte de su control y puede distraer de su mensaje. No incluirá las herramientas Capas ni Mapa base.
Sus usuarios no necesitan calcular el área ni la distancia, por lo que tampoco incluirá la herramienta Medir, pero su comprensión del estuario se beneficiaría de un mejor conocimiento de su tamaño. Hay relativamente pocos indicadores visuales en los mapas que ayuden a los usuarios a determinar la escala de forma intuitiva, por lo que se agregará una barra de escala.
- Active la herramienta Barra de escala.
En la parte inferior del mapa aparece una barra de escala.
Nota:
Puede consultar todas las herramientas de mapa en la página de ayuda del widget Mapa.
- En la barra de herramientas del builder, desactive la Vista en directo.
No existe ninguna regla que pueda indicar qué herramientas deben incluirse en un mapa. Debe cuestionar cada una de ellas en función de la finalidad del mapa, el público, el mensaje y la forma en que se utilizará.
Agregar un encabezado con un título
Una de las ventajas de mostrar un mapa dentro de una aplicación web es la posibilidad de personalizar un título de mapa destacado. Creará un encabezado para su diseño y agregará un widget de texto para el título. Los encabezados y pies de página pueden habilitarse en el panel Página.
- En la barra de herramientas lateral, haga clic en el botón Página. En el panel que aparece, haga clic en el elemento Página resaltado.
El panel Página aparece al otro lado del lienzo y muestra las propiedades de la página.
- En el panel Página, active el botón de alternancia Encabezado.
Aparece un encabezado azul en la parte superior del lienzo. El widget de fila se desplaza hacia abajo para acomodarlo. El color azul predeterminado del encabezado no está presente en ninguno de sus mapas. Para lograr un diseño coherente y cohesionado, aténgase a una paleta de colores restringida; por ejemplo, repitiendo los colores utilizados en los mapas.
Sus dos mapas son muy coloridos y quiere que destaquen. El uso de colores neutros como el negro, el blanco y el gris para los elementos no cartográficos de su diseño ayudará a que los mapas destaquen. El negro es un color neutro y también un color utilizado en los mapas, por lo que es una buena elección para su encabezado.
- En el panel Página, junto a Relleno, haga clic en el cuadrado azul. En Colores estándar, haga clic en el cuadrado negro.
El color del encabezado se actualiza. A continuación, agregará un widget de texto para el título.
- En el lienzo, apunte al encabezado. Haga clic en Editar encabezado.
- En la barra de herramientas lateral, haga clic en el botón Insertar.
Aparece el panel Insertar widget.
- En el panel Insertar widget, haga clic en la flecha situada junto a Centrado en el mapa para contraer esta sección.
- Contraiga también la sección Basado en datos.
- En Elementos de la página, haga clic y arrastre el widget Texto. Arrástrelo al lienzo y suéltelo sobre el encabezado.
Aparece un widget de texto en el lienzo y aparece el panel Texto. De forma predeterminada, el texto estará en negro, por lo que será invisible sobre el fondo negro del encabezado, por lo que antes de escribir cualquier texto, cambiará su color a blanco.
- En el panel Texto, en Formato de texto, haga clic en el botón Color de fuente. En Colores estándar, haga clic en el cuadrado blanco.
- Haga clic en el botón Negrita.
- En el lienzo, haga doble clic en el widget de texto y escriba Estuario marino de American River. Pulse Intro y escriba Isla Canguro, Australia Meridional.
A continuación, agrandará la línea superior del texto.
- Haga doble clic en la línea superior del texto para seleccionarlo. En la barra de herramientas que aparece, cambie el tamaño de letra a 25 y pulse Intro.
Ahora el widget de texto no es lo suficientemente grande para mostrar el título completo. Ampliará su tamaño para llenar el encabezado.
- En el panel Texto, haga clic en la pestaña Estilo.
- Haga clic en el botón de opciones situado inmediatamente debajo de la pestaña Estilo y haga clic en Tamaño completo.
Hacer que el widget de texto ocupe todo el tamaño del encabezado garantizará que el título siempre disponga del máximo espacio posible para mostrar su texto. Es algo que tendrá más importancia cuando la aplicación se vea en pantallas más pequeñas.
- Haga clic en la parte en blanco del widget de fila, junto al mapa, para dejar de editar el encabezado.
- En la barra de herramientas del builder, haga clic en el botón Guardar.
En este tutorial, ha creado una aplicación web con ArcGIS Experience Builder. Contiene un encabezado con un título y un widget de fila que contiene un widget de mapa con dos mapas y varias herramientas de mapa. Ha aprendido algunos conceptos de diseño importantes para crear diseños de aplicaciones web: por ejemplo, cómo elegir colores para los elementos no cartográficos y cómo determinar qué herramientas incluir. Pruebe el siguiente tutorial de esta serie, Organizar el diseño de una aplicación web con varios widgets, para aprender a añadir widgets de leyenda, marcador y deslizamiento a la experiencia Estuario marino de American River.
