Convertir un mapa web en una aplicación web
Su equipo acuerda que una aplicación web centrada en mapas es el mejor dispositivo de comunicación para su historia. Encontrará y modificará un mapa web, creará una nueva aplicación web a partir del mapa y configurará su estructura básica de diseño.
Buscar un mapa con datos de vivienda
En lugar de empezar con un mapa web en blanco, modificará uno existente. ArcGIS Living Atlas of the World es una colección seleccionada de datos geográficos y mapas. Incluye Esri Maps for Public Policy, un sitio dedicado a aumentar el nivel de conocimientos espaciales y de datos sobre políticas públicas. Buscará en este sitio datos y mapas relacionados con la política de vivienda.
- Vaya al sitio de Esri Maps for Public Policy.
Aquí puede buscar en los recursos de datos relacionados con una variedad de temas de políticas públicas. En este tutorial, está buscando un mapa web relacionado con la vivienda.
- Haga clic en la pestaña Issues.
- Haga clic en la pestaña Economic Opportunity. En la barra de búsqueda, escriba vacant housing y pulse Intro.
- En los resultados de búsqueda, haga clic en el título del mapa web denominado Owned, Rented, or Vacant Housing Units, propiedad de lisa_ berry.
Aparece la página del elemento del mapa, donde puede leer sobre el mapa y los datos que contiene. Este mapa muestra dónde es más frecuente la vivienda ocupada por el propietario, la vivienda en alquiler o las viviendas vacías. Los datos de este mapa proceden de la Encuesta sobre la Comunidad Estadounidense (ACS), realizada por la Oficina del Censo de los Estados Unidos. Este mapa es un buen punto de partida para su aplicación.
Nota:
Las estimaciones a cinco años de ACS se usan comúnmente para tomar decisiones de políticas públicas y cubren una amplia variedad de temas como pobreza, ingresos, vivienda, etc. Para obtener más información sobre las capas de ACS disponibles en ArcGIS Living Atlas, consulte la ruta Conocer su comunidad mediante las capas del Censo ACS en Living Atlas.
Tiene previsto usar este mapa en una aplicación web orientada al público, de modo que, antes de continuar, comprobará si existen restricciones o limitaciones especiales sobre el uso del contenido.
- Desplácese hasta el final de la página del elemento y busque la sección Condiciones de uso.
El mapa web tiene una licencia según las Condiciones de uso de servicios web y API para Esri. Puede obtener más información sobre estas condiciones haciendo clic en Ver resumen o Ver condiciones de uso. El resumen explica que cualquiera puede utilizar este mapa web para uso tanto interno como externo siempre que se proporcione atribución a Esri y a sus proveedores de datos.
- Desplácese hacia arriba y busque la sección Créditos (atribución).
Esta es la información que necesita para dar un reconocimiento adecuado a los proveedores de datos. Usará esta información más tarde.
Configurar el mapa web
Hasta ahora ha encontrado un mapa web sobre el uso de viviendas que puede utilizar como contenido principal para su aplicación web y ha comprobado que tiene permiso para usarlo para su proyecto específico. A continuación, guardará una copia del mapa web y volverá a configurar sus capas para adaptarlas mejor a la finalidad de su aplicación web.
- Desplácese a la parte superior de la página del elemento y haga clic en Iniciar sesión. Inicie sesión en su cuenta de la organización de ArcGIS.
Nota:
Si no tiene una cuenta de organización, consulte las opciones de acceso a software.
- En la parte superior de la página del elemento, haga clic en el botón Abrir en Map Viewer.
Nota:
Si no ve un botón para Abrir en Map Viewer, haga clic en la flecha situada junto a Abrir en Map Viewer Classic y elija Abrir en Map Viewer.
Aparece el mapa.
- En la barra de herramientas Contenido (oscura), haga clic en el botón Capas.
Sugerencia:
Si no ve una barra de herramientas Contenido, haga clic en Abrir en el nuevo Map Viewer en la parte superior de la página.
Se muestra el panel Capas. Se enumeran tres capas, que contienen datos de vivienda a nivel de estado, condado y distrito censal. Cada capa está configurada para aparecer a distintas escalas, de modo que solo la capa Tract está visible actualmente.
Su grupo de defensa se centra en problemas de vivienda a nivel local, por lo que solo le interesan los datos a nivel de distrito censal. Guardará una copia del mapa web solo con la capa Tract.
- En el panel Capas, en la capa State, haga clic en el botón Opciones. Haga clic en Quitar.
- Quite también la capa County.
Solo se conservan los datos relevantes para su aplicación web. A continuación, se asegurará de que sea visible en todas las escalas.
- Haga clic en la capa Tract.
El panel Propiedades aparece en el otro lado del mapa.
Sugerencia:
Si el panel Propiedades no está visible, en la barra de herramientas Configuración (clara), haga clic en el botón Propiedades.
- Desplácese hacia abajo en el panel Propiedades. Ajuste el control deslizante de Rango visible hasta que vaya de Mundo a Habitación.
- En la barra de herramientas Contenido, haga clic en el botón Guardar y abrir y en Guardar como.
- En la ventana Guardar, en Título, escriba Mapa de vivienda. En el cuadro Resumen, reemplace el texto existente por el siguiente:
Este mapa muestra si en un área es más frecuente la vivienda ocupada por el propietario, la vivienda en alquiler o la vivienda vacía. Estos datos nacionales provienen de los distritos censales estimados de la Encuesta sobre la Comunidad Estadounidense (ACS) más actual. Esta es una copia del mapa web que se encuentra aquí: https://www.arcgis.com/home/item.html?id=8e3b994782444345953a30e2a6e5ab23
- Haga clic en Guardar mapa.
Crear una aplicación web
Ahora tiene un mapa web configurado para sus necesidades. Creará una aplicación web a partir de este mapa con ArcGIS Experience Builder. Dispondrá el diseño de la aplicación con un mapa y una columna.
- En la barra de herramientas Contenido, haga clic en el botón Crear aplicación.
Aparece una lista de opciones. Hay varios productos de ArcGIS que le permiten crear aplicaciones web a partir de mapas web. Cada uno ofrece diferentes herramientas y es adecuado para distintas situaciones. Para este proyecto, quiere controlar mucho la apariencia de la aplicación para que coincida con el mapa web y el estilo de su organización. Elegirá ArcGIS Experience Builder, porque proporciona más control de personalización.
- Haga clic en Experience Builder.
Aparece una galería de plantillas. En futuros proyectos, estas plantillas pueden ahorrarle tiempo configurando previamente el diseño, pero, para este tutorial, empezará con un lienzo en blanco para que pueda aprender más directamente a estructurar un diseño.
- En la tarjeta Pantalla completa en blanco, haga clic en Crear.
- Si aparece una ventana Introducción, haga clic en Omitir.
ArcGIS Experience Builder aparece y muestra el mapa en el centro del lienzo. Cambiará el nombre de su experiencia por un título más significativo.
- En la cinta superior, haga clic en Experiencia sin título y escriba Disponibilidad de vivienda.
A continuación, se asegurará de poder ver todo el lienzo.
- En la esquina inferior derecha de la pantalla, haga clic en el botón Ajustar ancho a la ventana actual.
- Si el panel Insertar widget todavía no está visible, en la barra de herramientas lateral, haga clic en el botón Insertar.
- Desplácese hasta la parte inferior del panel de widget Insertar y busque la sección Diseño.
Los widgets de diseño le ayudan a organizar grupos de widgets en su aplicación. El tamaño y el posicionamiento de los widgets es a menudo más fácil cuando se encuentran dentro de un widget de diseño.
- Arrastre el widget Columna al lienzo.
- En la barra de herramientas del widget Columna, haga clic en el botón de posición y haga clic en Altura completa.
- Haga clic de nuevo en el botón de posición y haga clic en Alinear a la izquierda.
Ahora que la columna está en su lugar, cambiará el tamaño del mapa. Uno de los objetivos del proyecto es que el mapa debe ser el foco principal de la aplicación, por lo que hará que llene todo el lienzo.
- Haga clic en el widget Mapa para seleccionarlo. En la barra de herramientas del mapa, haga clic en el botón de posición y haga clic en Tamaño completo.
El mapa se expande para llenar todo el lienzo, con una parte oculta detrás de la columna. A continuación, definirá la extensión predeterminada del mapa en la configuración de propiedades del mapa.
- En el panel Mapa, en Vista inicial, haga clic en Personalizada y haga clic en Modificar.
Aparece la ventana Modificar vista inicial.
- Acérquese a su comunidad o a otra área de Estados Unidos que le interese, por ejemplo, la isla de Manhattan en la ciudad de Nueva York.
- Haga clic en Aceptar.
Realizará algunas configuraciones más en el widget Mapa.
- En el panel Mapa, en Herramientas, desactive Buscar.
Más adelante, agregará un widget Buscar sobre el que tendrá más control.
- Cerca de la parte inferior del panel Mapa, en Diseño de herramientas, en Tamaño grande y mediano, elija la segunda opción.
Los controles de navegación del mapa se mueven a la esquina inferior derecha del mapa. Anteriormente, estaban ocultos detrás de la columna.
Por último, deshabilitará las ventanas emergentes. Más adelante en el tutorial, agregará widgets para mostrar información sobre el número de unidades de vivienda de cada tipo en cada distrito. Esta información hará que las ventanas emergentes sean innecesarias.
- En la parte inferior del panel Mapa, en Opciones, desactive Habilitar elemento emergente.
- En la barra de herramientas del builder, haga clic en el botón Guardar.
- Cierre la pestaña de navegador de Visor de mapas y la pestaña de navegador de Esri Maps for Public Policy.
Hasta ahora en este tutorial, ha encontrado un mapa web, lo ha modificado acorde con sus necesidades y lo ha convertido en una aplicación web en ArcGIS Experience Builder.
Agregar y configurar widgets
Ahora que ha configurado el mapa, ha llegado el momento de agregar algunos widgets para ayudar a los usuarios a entender y explorar los datos. Agregará los widgets Gráfico, Texto, Buscar y Menú.
Agregar un widget Gráfico
Agregará un gráfico circular a la columna vacía. Conectará el gráfico con los datos del mapa para que muestre la composición de vivienda del distrito censal seleccionado.
- En caso necesario, vuelva a abrir su aplicación Disponibilidad de vivienda en ArcGIS Experience Builder.
- En el panel Insertar widget, haga clic en el botón Buscar y escriba gráfico.
- En los resultados de búsqueda, arrastre el widget Gráfico a la columna.
Aparece un widget Gráfico vacío en la columna. El resto de la columna aparece transparente, dado que, por defecto, no tiene color de fondo.
A continuación, configurará el gráfico para que muestre información la vivienda del mapa.
- En el panel Gráfico, haga clic en Seleccionar datos.
- En el panel Seleccionar datos, expanda Mapa de vivienda y haga clic en Tract.
- En el panel Gráfico, en Tract, haga clic en Predeterminado y seleccione Entidades seleccionadas.
- En Tipo de gráfico, haga clic en Seleccionar gráfico y, en el panel Tipo de gráfico, elija Gráfico circular.
Un gráfico circular es adecuado para estos datos, ya que se divide en tres categorías (ocupada por propietario, ocupada por arrendatarios y vacía), que suman hasta el 100% de las unidades de vivienda.
- En el panel Gráfico, en Datos, defina los siguientes parámetros:
- En Tipo de categoría, elija Por campo.
- En Estadísticas, elija Suma.
- En Campos numéricos, active Vacant Housing Units, Owner-Occupied Housing Units y Renter-Occupied Housing Units.
- En Ordenar por, elija Eje de categoría.
El gráfico muestra la advertencia No se han encontrado datos. Esta advertencia aparece porque ha optado por mostrar las entidades seleccionadas en el gráfico y actualmente no hay entidades seleccionadas.
- En la barra de herramientas del builder, haga clic en el botón Vista en directo.
En el modo de vista en directo, puede interactuar con su aplicación web como un usuario. No puede seleccionar widget ni desplazarlos.
- En el mapa, haga clic en cualquier distrito censal.
Ahora que ha seleccionado un distrito censal, el gráfico circular se vuelve azul y la advertencia desaparece. Saldrá del modo de vista en directo para que pueda seguir configurando el widget Gráfico.
- Desactive Vista en directo. Haga clic en el widget Gráfico.
El panel Gráfico vuelve a aparecer. Agregará una leyenda al gráfico para explicar las tres categorías.
- En el panel Gráfico, junto a General, haga clic en la flecha para expandir esta sección.
- Active la Leyenda. En Posición de leyenda, seleccione Inferior.
A continuación, agregará color al gráfico para que coincida con los colores del mapa.
- Expanda la sección Zonas. En Modo de color, elija Por categoría y haga clic en el botón de configuración.
- En el panel Color de división en zonas, haga clic en el color situado junto a B25002_003E (Vacant Housing Units) y haga clic en Más.
- En Hex, escriba #aa7b7b y pulse Intro.
El color se actualiza a un color rojo atenuado.
- Cambie el color de B25003_002E (Owner-Occupied Housing Units) a #d3c268, un color amarillo. Cambie el color de B25003_003E (Renter-Occupied Housing Units) a #6b99b5, un color azul.
El gráfico y su leyenda coinciden ahora con los colores del mapa. Si el distrito censal seleccionado es de color amarillo, la porción más grande del gráfico circular también es de color amarillo.
Configurar el gráfico para que coincidan con los colores del mapa facilita la lectura del gráfico y también permite duplicarlo como leyenda de un mapa.
- Active Vista en directo y haga clic en diferentes distritos para observar los cambios en el gráfico.
Nota:
Algunos distritos censales mostrarán solo una o dos divisiones en zonas, ya que solo tienen uno o dos tipos de viviendas.
Configurar una vista para selecciones vacías
El widget Gráfico seguirá mostrando la advertencia No se han encontrado datos en algunas situaciones. Elegirá un distrito censal para que actúe como entidad predeterminada. Cuando la aplicación web se abra por primera vez, el gráfico mostrará los datos de la entidad predeterminada.
- En el mapa, haga clic en un área sin distrito censal, por ejemplo, Central Park o cualquier área de agua.
El gráfico vuelve a la vista No se han encontrado datos. El gráfico también tendrá este aspecto al abrir la aplicación web por primera vez. Puede resolver este problema configurando una vista para las selecciones vacías.
- En la barra de herramientas lateral, haga clic en el botón Datos. En el panel Datos, haga clic en la tarjeta Mapa de vivienda.
- En En uso, haga clic en la tarjeta Tract.
- En la parte inferior del panel, active la casilla de verificación Vista para selección vacía.
El widget Gráfico se rellena con divisiones en zonas rojas, azules y amarillas. Esta configuración garantiza que el gráfico no aparezca vacío cuando no se selecciona ninguna entidad.
- Junto a la casilla de verificación, haga clic en el botón Configuración.
Aparece la ventana Vista para selección vacía. Aquí, elegirá qué distrito censal aparecerá cuando no se seleccione ninguno en el mapa. En los pasos siguientes, seleccionará Census Tract 94 in New York County, New York. Si elige centrar el mapa sobre otra ciudad, elija un distrito de esa área.
- En la pestaña Filtro, haga clic en Agregar y haga clic en Conjunto de cláusulas.
Aparecen dos cláusulas vacías.
- Haga clic de nuevo en Agregar y en Cláusula.
Ahora hay tres cláusulas. Utilizará la primera cláusula para restringir los datos por estado.
- Para la primera cláusula, haga clic en OBJECTID y elija State. Para el segundo menú, elija es.
- Junto al tercer menú, haga clic en el botón Seleccionar tipo de fuente y elija Único.
Ahora puede elegir en una lista de todos los valores únicos del campo State.
- Haga clic en el tercer menú. En la barra de búsqueda, escriba new y elija New York o su estado de interés.
- Configure la segunda cláusula para que lea County es New York County, su condado de interés. Si el condado no aparece en el tercer menú, haga clic en Buscar más para mostrar más resultados de búsqueda.
Sugerencia:
Recuerde cambiar el tipo de fuente a Único.
- Configure la tercera cláusula para que lea NAME es Census Tract 94, o un distrito censal de su área de interés.
- Asegúrese de que el control sobre las cláusulas esté definido como And.
Cuando se elige And, una entidad debe satisfacer las tres cláusulas. La tabla muestra una fila para la entidad seleccionada por las tres cláusulas. El gráfico circular mostrará los resultados de este distrito censal cuando no se haya seleccionado ninguno en el mapa.
- Haga clic en Aplicar cambios.
Nota:
La vista de gráfico predeterminada aparecerá cuando la aplicación web se abra por primera vez. La vista sin datos seguirá apareciendo cuando se seleccione una parte en blanco del mapa.
Modificar la apariencia del gráfico
Completará el widget Gráfico ajustando algunas de sus propiedades de aspecto. Empezará por eliminar los botones de la parte superior del widget. Proporcionan funciones que no son necesarias en su aplicación. Las eliminará para que no distraigan del mensaje del mapa.
- Desactive Vista en directo y seleccione el widget Gráfico.
- En el panel Gráfico, expanda la sección Herramientas. Desactive Selección.
Dos de los botones desaparecen del widget Gráfico.
- Haga clic en la pestaña Acción y haga clic en la pestaña Acción de datos. Desactive Habilitar acción de datos.
El tercer botón desaparece del gráfico. A continuación, cambiará el color de fondo del widget Gráfico.
- Haga clic en la pestaña Contenido y expanda la sección Apariencia. Haga clic en el color de fondo y haga clic en Más.
- En Hex, escriba #000000. En A, escriba 75.
A significa Alfa y controla la opacidad del color. El mapa ahora está parcialmente visible detrás del widget Gráfico. Sin embargo, el texto es casi invisible. Ahora, lo cambiará al color blanco.
- Junto a Elementos de texto, haga clic en el botón de configuración.
- En el panel Elementos de texto, junto a Etiqueta de leyenda, haga clic en el botón de edición.
- Haga clic en el cuadrado negro. En Colores estándar, elija el blanco.
- En el panel Gráfico, expanda la sección Zonas. Cambie el color de Contorno a negro.
El widget Gráfico terminado tiene texto blanco sobre un fondo oscuro.
Agregar un widget Texto
A continuación, agregará texto para dar contexto al mapa, incluidos un título y un agradecimiento para los datos. Formateará distintas partes del texto para que sea más legible y agregará algunos vínculos donde los usuarios de la aplicación pueden encontrar más información sobre los datos mostrados en el mapa.
- En la barra de herramientas lateral, haga clic en el botón Insertar. En el panel Insertar widget, borre la búsqueda. Busque el widget Texto y arrástrelo a la columna situada debajo del gráfico.
El widget Texto se posiciona automáticamente debajo del widget Gráfico con un pequeño espacio entre medias.
- Haga doble clic en el widget Texto y copie y pegue el siguiente texto:
¿En propiedad, alquilada o vacía?
Haga clic en un distrito censal para ver la información de vivienda para esa área.
Viviendas a nivel de distrito, condado y estado. La mediana del alquiler es $Rent. La mediana del valor de vivienda es $Value.
Mapa de Lisa Berry, Esri. Datos de la Encuesta sobre la Comunidad Estadounidense (ACS) de la Oficina del Censo de EE. UU. 2015-2019, estimaciones a 5 años, Tabla B25002.
Incluya el espaciado entre líneas de texto. La tercera línea de texto tendrá más sentido más adelante cuando agregue elementos dinámicos.
Sugerencia:
Use Ctrl+Mayús+V o Command+Mayús+V para pegar el texto sin formato.
A continuación, cambiará la altura del widget Texto.
- En el panel Texto, haga clic en la pestaña Estilo. Junto a Altura, haga clic en el botón de flecha y seleccione Auto.
Esta configuración garantizará que el widget Texto siempre sea lo suficientemente alto como para mostrar todo su contenido y nunca demasiado alto.
A continuación, elegirá los mismos colores de texto y de fondo que el widget Gráfico.
- En el panel Texto, en Fondo, haga clic en Personalizado y, a continuación, haga clic en el color Relleno. En Colores recientes, elija el negro semitransparente que creó para el fondo del gráfico circular.
- Haga clic en la pestaña Contenido. En Formato de texto, haga clic en el botón Color de fuente. En Colores estándar, elija el blanco.
- En Formato de texto, haga clic en el botón Centro.
El texto del gráfico ahora es de color blanco y está alineado en el centro. A continuación, formateará la primera línea de texto, el título de su aplicación, para que sea más grande y más en negrita.
- Resalte la primera línea de texto. En la barra de herramientas de texto, haga clic en el botón Negrita y cambie el tamaño a 25 px.
Sugerencia:
Si la barra de herramientas de texto no está visible, cambie las propiedades de fuente de la pestaña Contenido del panel Texto.
A continuación, incluirá un vínculo a un recurso de la Oficina del Censo de los EE. UU. para lectores que quizá no sepan qué es un distrito censal.
- En la segunda línea de texto, resalte las palabras distrito censal. En el panel Texto, en la pestaña Contenido, en Formato de texto, haga clic en el botón Vínculo.
- En el panel Definir vínculo, en Vínculo a, elija URL. En URL, copie y pegue https://www2.census.gov/geo/pdfs/education/CensusTracts.pdf.
- En Abrir en, elija Nueva ventana. Haga clic en Aceptar.
- Ponga el texto distrito censal en negrita.
También vinculará más información sobre la Encuesta sobre la Comunidad Estadounidense. Su visualización de datos se considerará más fiable si proporciona información sobre cómo se recopilaron los datos y quién lo ha hecho.
- En la última línea de texto, resalte el texto Encuesta sobre la Comunidad Estadounidense (ACS) y vincúlelo a la siguiente URL: https://www.census.gov/programs-surveys/acs/about.html.
- Ponga el texto Encuesta sobre la Comunidad Estadounidense (ACS) en negrita.
Como el widget Texto contiene el título del mapa, lo colocará en la parte superior de la columna.
- Arrastre el widget Gráfico debajo del widget Texto.
También eliminará el espacio entre los elementos de la columna.
- Haga clic en la parte inferior vacía de la columna o en el espacio entre los widgets Texto y Gráfico para seleccionar la columna.
- En el panel Columna, en Espacio, escriba 0 px.
Los widgets Texto y Gráfico aparecen ahora como un elemento.
Agregar texto dinámico
Para la tercera línea de texto, incluirá la información sobre vivienda que se actualiza para reflejar las selecciones en el mapa, del mismo modo que en el gráfico. Vio los campos que están disponibles en los datos cuando configuró el gráfico circular. Mostrará algunos de esos campos en el widget Texto.
- Seleccione el widget Texto. En el panel Texto, active Conectar a datos. Haga clic en Seleccionar datos.
- En el panel Seleccionar datos, expanda Mapa de vivienda y haga clic en Tract.
Ahora, el widget Texto tiene acceso a los datos sobre vivienda en el mapa.
- En el widget Texto, resalte la palabra distrito.
Reemplazará este texto por contenido dinámico.
- En la barra de herramientas del widget Texto, haga clic en el botón Contenido dinámico.
- En la ventana Contenido dinámico, haga clic en el campo NAME.
En el widget Texto, el texto resaltado se sustituye por {NAME}. También se agregó un espacio adicional entre el campo y la coma.
- Elimine el espacio adicional.
- Reemplace las siguientes palabras por los siguientes campos:
- Reemplace la palabra condado por el campo County.
- Reemplace la palabra estado por el campo State.
- Reemplace la palabra alquiler por el campo Median Rent (Contract Rent for Renter-Occupied Housing Units Paying Cash Rent).
- Reemplace la palabra valor por el campo Median Home Value (for Owner-Occupied Housing Units).
Sugerencia:
Para ver el nombre completo de un campo, apunte al campo.
- Elimine los espacios adicionales.
- Cambie todos los campos dinámicos a negrita.
- Active Vista en directo y haga clic en diferentes distritos censales del mapa.
El texto dinámico se actualiza para reflejar la información de vivienda del distrito seleccionado.
Agregar widget Buscar
Anteriormente, eliminó la barra de búsqueda del widget Mapa. Ahora, la reemplazará por un widget Buscar. Este widget ofrece más control de personalización que la herramienta integrada. Por ejemplo, puede colocarla en cualquier lugar y modificar su apariencia.
- Desactive Vista en directo. En el panel Insertar widget, haga clic en el widget Buscar y arrástrelo al mapa.
- Coloque el widget Buscar cerca de la esquina superior derecha del mapa.
El texto de sugerencia predeterminado del widget Buscar es Buscar dirección o lugar. Cambiará este texto.
- En el panel Buscar, haga clic en Nueva fuente de búsqueda y seleccione la Fuente de localizadores.
Aparece el panel Fijar la fuente de localizadores.
- En el panel Fijar la fuente de localizadores, haga clic en Seleccionar utilidad.
- En el panel Seleccionar utilidad, en la pestaña Organización, en Geocodificación, seleccione ArcGIS World Geocoding Service.
- En el panel Fijar la fuente de localizadores, en Opciones de búsqueda, en Sugerencia, escriba Busque su área.
El texto de sugerencia del widget Buscar cambia.
A continuación, conectará el widget Buscar al widget Mapa con una acción.
- En el panel Buscar, haga clic en la pestaña Acción. Haga clic en Agregar un desencadenador.
- En el panel Seleccionar un desencadenador, haga clic en Registrar cambios de selección.
- En Widgets, haga clic en Mapa. En Seleccionar una acción, haga clic en Desplazar a.
- Cierre el panel Configuración de acción.
Probará la búsqueda para asegurarse de que la acción se ha configurado correctamente.
- Active la Vista en directo. En el widget Buscar, escriba un topónimo. En los resultados de búsqueda, haga clic en uno de los topónimos.
El mapa se acerca a la ubicación seleccionada.
- En el mapa, cerca de los controles de zoom, haga clic en el botón Inicio.
- En la barra de herramientas del builder, desactive Vista en directo y haga clic en Guardar.
Agregar una página
La visualización de datos ya está completa. A continuación, agregará el artículo relacionado que escribieron sus compañeros de trabajo. Podría agregar un vínculo a la historia en el widget Texto, pero prefiere que la historia resulte más obvia y se comporte como parte de la aplicación web. Agregará una segunda página a la aplicación e integrará la historia en ella.
- En la barra de herramientas lateral, haga clic en el botón Página.
- En el panel Página, haga clic en el botón Agregar página y haga clic en la opción Pantalla completa en blanco.
Aparece un nuevo lienzo en blanco.
- En el panel Contenido, apunte a Página 2 y haga clic en el botón Más. Haga clic en Cambiar nombre.
- Cambie el nombre de Página 2 a Historia. Cambie el nombre de Página a Mapa.
- Desde el panel Insertar widget, agregue un widget Integrar al lienzo.
- En la barra de herramientas del widget Integrar, haga clic en el botón de posición y haga clic en Tamaño completo.
Para este tutorial, integrará How the Age of Housing Impacts Affordability, una historia escrita por Steven Aviles del equipo de Policy Maps de Esri.
- En el panel Integrar, en Integrar mediante, elija URL.
- Pegue el siguiente código de URL: https://storymaps.arcgis.com/stories/ae7f226a5ffd4466acbe0c7a14deab0e.
La historia aparece en el lienzo. Se creó con ArcGIS StoryMaps.
Agregar un widget Menú
A continuación, agregará un widget Menú. De esta forma, los usuarios podrán cambiar entre las dos páginas de la aplicación. Para evitar que el menú oculte partes de la historia, agregará primero un encabezado a la página.
- En la barra de herramientas lateral, haga clic en el botón Página. En el panel Página, haga clic en la página Historia.
- En el panel Historia, active Encabezado.
Aparece una barra azul en la parte superior de la página.
- En Altura, escriba 60 px.
- Apunte al encabezado y haga clic en Editar encabezado.
- En el panel Insertar widget, agregue un widget Menú al encabezado de la página.
- Alinee el widget Menú a la esquina superior derecha.
- En el panel Menú, en la pestaña Contenido, en Estilo, elija Pastillas.
El color azul del encabezado y el widget Menú no coinciden con el resto de su aplicación. En lugar de cambiar los colores en varias ubicaciones, cambiará el tema de la aplicación.
- En la barra de herramientas lateral, haga clic en el botón Tema. En el panel Tema, haga clic en Tinta.
El encabezado cambia al blanco y las pastillas de menú cambian a un color gris oscuro.
El widget Menú permite a los usuarios cambiar de la historia al mapa. Agregará el mismo widget Menú a la página del mapa para que también se pueda cambiar a la historia.
- Abra el panel Página y haga clic en la página Mapa.
No es necesario agregar un encabezado a la página, ya que los usuarios pueden desplazarse por el mapa para ver las áreas ocultas por widgets.
- En el panel Insertar widget, agregue un widget Menú a la página. Alinéelo a la esquina superior derecha.
- En el panel Menú 2, en Estilo, elija Pastillas.
- Mueva el widget Buscar hacia abajo y colóquelo debajo del widget Menú.
- Active la Vista en directo. Haga clic en los botones del menú para probar el cambio entre las dos páginas.
- En el panel Página, asegúrese de que el botón Convertir en página de inicio esté visible junto a la página Mapa.
Este botón indica qué página actúa como la página de inicio. Aparecerá cuando se abra la aplicación por primera vez.
- Haga clic en Guardar.
Ha creado una aplicación web con dos páginas que contienen un mapa y una historia. Ha configurado los widgets Mapa, Columna, Gráfico, Texto, Buscar, Integrar y Menú. Ha conectado widgets mediante acciones y contenido dinámico para ayudar a los usuarios a explorar la disponibilidad de viviendas.
Optimizar la aplicación para dispositivos móviles
Hasta ahora, ha alcanzado cuatro de los objetivos de la aplicación web:
- El mapa debería ser el foco principal de la aplicación.
- La aplicación debe permitir a los usuarios buscar su propia dirección o áreas de interés.
- La aplicación debe incluir texto dinámico y gráficos para permitir a los usuarios explorar e interactuar con los datos.
- El mapa debe ir acompañado de una historia periodística.
Nos queda un objetivo: la aplicación debería funcionar en un dispositivo móvil, así como en la pantalla de un equipo de sobremesa.
En este momento, su aplicación web solo tiene buen aspecto en una pantalla grande. Para finalizar el proyecto, ajustará elementos hasta que la aplicación tenga buen aspecto en cualquier tamaño de pantalla.
Optimizar la página de la historia para dispositivos móviles
Para que la página de la historia funcione con distintos tamaños de pantalla, ajustará el tamaño del widget Menú desde el tamaño relativo (definido en porcentajes) hasta el dimensionamiento absoluto (definido en píxeles).
- En caso necesario, vuelva a abrir su aplicación Disponibilidad de vivienda en ArcGIS Experience Builder. Active la Vista en directo.
- Si es necesario, en el menú de la aplicación, haga clic en el botón Historia para ver la página Historia.
- En la barra de herramientas del builder, haga clic en el botón Editar la página para dispositivos con pantalla pequeña para cambiar al modo de pantalla pequeña.
Con ello, se simula el aspecto que tendrá su aplicación en un dispositivo móvil.
- Desplácese por la historia para confirmar que ni el texto ni los mapas queden recortados.
Las historias de ArcGIS StoryMaps ya están configuradas para cambiar de tamaño cuando se usan en dispositivos móviles. Sin embargo, el widget Menú del encabezado de la página es demasiado corto para poder leerlo.
Puede crear un diseño personalizado para pantallas pequeñas, pero puede solucionar este problema cambiando el tamaño del widget Menú en todos los tamaños de pantalla. Las soluciones que funcionan en todos los tamaños de pantalla son preferibles a las soluciones personalizadas para distintos tamaños de pantalla, ya que facilitan la edición y el mantenimiento de la aplicación en el futuro.
- En la barra de herramientas del builder, haga clic en el botón Editar la página para dispositivos con pantalla grande.
Es necesario cambiar al modo de pantalla grande para reconfigurar los widgets.
- Desactive Vista en directo. Haga clic en Editar encabezado y haga clic en el widget Menú.
- En el panel Menú, haga clic en la pestaña Estilo. Busque la propiedad Ancho.
La propiedad Ancho se define como un porcentaje del ancho de la pantalla y se reduce demasiado con las pantallas estrechas. En su lugar, definirá el ancho en píxeles para garantizar que siempre tenga el mismo tamaño, independientemente del tamaño de la pantalla.
- En Ancho, haga clic en el botón Cambiar unidad y elija px.
- Cambie Ancho a 250 px.
- Cambie al modo de pantalla pequeña.
El menú es ahora lo suficientemente grande para leerse en la pantalla pequeña.
Optimizar la página del mapa para dispositivos móviles
A continuación, hará ajustes en la página del mapa para que también funcione en todos los tamaños de pantalla. Cambiará algunos elementos a un tamaño absoluto. También configurará un diseño personalizado para dispositivos móviles.
- En el panel Página, haga clic en la página Mapa.
En esta página, todos los widgets son demasiado estrechos. La mayor parte del texto no se puede leer.
- En la barra de herramientas del builder, haga clic en el botón Editar la página para dispositivos de pantalla mediana para cambiar al modo de pantalla mediana.
Con ello, se simula el aspecto que tendrá su aplicación en una tablet. Se ve mejor, pero la leyenda del gráfico y el menú siguen cortados. Ajustará sus anchos para cambiar a un tamaño absoluto.
- Cambie al modo de pantalla grande.
- Seleccione el widget Menú. En el panel Menú 2, en la pestaña Estilo, cambie Ancho a 250 px.
- Seleccione el widget Buscar. Cambie su valor Ancho a 250 px.
- Haga clic debajo del gráfico para seleccionar el widget Columna. Cambie su valor Ancho a 300 px.
- Cambie al modo de pantalla mediana.
Los cambios del diseño dan resultado en este tamaño de pantalla.
- Cambie al modo de pantalla pequeña.
Los cambios no dan resultado en este caso. El mapa está casi oculto detrás de los widgets Texto y Gráfico. Hablando con sus compañeros de equipo, han decidido que el gráfico no es necesario para la versión móvil de su aplicación web. Lo ocultará de la vista cuando el tamaño de la pantalla sea pequeño. Para ello, debe crear un diseño personalizado para pantallas pequeñas.
- Junto al lienzo, haga clic en Personalizado.
- En la ventana emergente de advertencia, haga clic en Aceptar.
Ahora puede hacer cambios en el diseño que solo afectarán a la aplicación cuando se visualice en pantallas pequeñas. Ocultará el widget Gráfico para que aparezca cuando la pantalla sea grande y desaparezca cuando la pantalla sea pequeña.
- Haga clic en el widget Gráfico. En su barra de herramientas, haga clic en el botón Mover a la lista de pendientes.
El widget Gráfico desaparece.
Es importante que no elimine el widget Gráfico. Aunque esté en modo personalizado, si elimina un widget, se eliminará de todas las versiones de la aplicación. La lista de pendientes le permite eliminar widgets de la vista sin eliminarlos.
Sugerencia:
Si ha eliminado accidentalmente el widget Gráfico, haga clic en el botón Deshacer de la barra de herramientas del builder. Si decide volver a agregar Gráfico más adelante, lo encontrará en el panel Insertar widget, en la pestaña Pendiente.
A continuación, cambiará el tamaño y la posición del widget Texto para que ya no oculte los widgets Buscar y Menú.
- Haga clic en el widget Texto. Arrástrelo fuera de la columna y colóquelo en el mapa.
- Mueva el widget Columna a la lista de pendientes.
- Alinee el widget Texto a la esquina inferior izquierda.
- En el panel Texto, haga clic en la pestaña Estilo. Cambie Ancho al 90 por ciento y Altura al 30 por ciento.
Este tamaño impide que los controles de navegación del mapa oculten cualquier texto.
Nota:
En el modo personalizado, puede cambiar el tamaño y la posición de los widgets sin afectar a otros tamaños de pantalla. Sin embargo, los cambios realizados en otras propiedades estarán visibles en todos los tamaños de pantalla. Por ejemplo, si elige un tamaño de fuente más pequeño para el widget Texto, aparecerá más pequeño en todos los tamaños de pantalla. Si desea un tamaño de fuente menor solo en las pantallas pequeñas, debe duplicar el widget Texto, mover el widget original a la lista de pendientes y cambiar el tamaño de fuente del nuevo widget.
Finalizar y publicar
Para finalizar el proyecto, obtendrá una vista previa, publicará y compartirá la aplicación web.
- En la barra de herramientas del builder, haga clic en el botón Guardar.
- Cuando aparezca el mensaje Guardado correctamente, haga clic en el botón Vista previa.
Aparece una nueva ventana de navegador con su aplicación.
- Pruebe la aplicación explorando el mapa, el gráfico y la historia.
- Cambie el tamaño de la ventana del navegador para probar el diseño de la aplicación en diferentes tamaños de pantalla.
- Vuelva a la pestaña de edición de Experience Builder. En la barra de herramientas del builder, haga clic en Publicar.
También actualizará la configuración de uso compartido de la aplicación para que esté disponible para el público.
- Haga clic en el botón Más y seleccione Cambiar configuración de uso compartido.
Aparece la página del elemento de la aplicación web.
- Haga clic en Compartir.
- Haga clic en Todos (público) y haga clic en Guardar.
En este tutorial, ha creado una aplicación web de varias páginas que presenta un mapa y una historia sobre el uso de viviendas en los Estados Unidos. Agregó widgets interactivos para mejorar la comprensión de los datos para los lectores. Por último, ha modificado el diseño para asegurarse de que funcione en pantallas de diferentes tamaños.
Ahora, usted y sus compañeros de equipo pueden integrar su trabajo en el sitio web del grupo de defensa de la vivienda o compartir vínculos de la aplicación web en las redes sociales.
Puede encontrar más tutoriales en la Galería de tutoriales de Learn ArcGIS.
