Revisar la aplicación

Primero, revisará la aplicación para determinar qué elementos se deben modificar para los dispositivos de pantalla pequeña.

  1. 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.

  2. En la cinta, haga clic en el botón de aplicaciones y elija Experience Builder.

    Opción Experience Builder en el menú de aplicaciones

    Sugerencia:

    Como alternativa, puede ir directamente al sitio de Experience Builder.

    Aparece Experience Builder. La página de inicio muestra las experiencias recientes que ha creado.

  3. Haga clic en el botón Crear nuevo.

    Botón Crear nuevo

    Aparece una lista de plantillas. Las plantillas tienen diseños y widgets preconfigurados que puede modificar. Creará una aplicación utilizando una plantilla de aplicación de información del parque creada para este tutorial.

  4. Haga clic en la pestaña ArcGIS Online.

    Pestaña ArcGIS Online

  5. En la barra de búsqueda, escriba Parque Nacional de las Grandes Montañas Humeantes owner:Learn_ArcGIS. En la lista de resultados, en Parque Nacional de las Grandes Montañas Humeantes (Tutorial), haga clic en Crear.
    Sugerencia:

    La plantilla correcta tiene una vista en miniatura que muestra una fotografía del parque. Puede ver el nombre completo de la plantilla señalando su nombre.

    Botón Crear para la plantilla Parque Nacional de las Grandes Montañas Humeantes

    Se crea una aplicación con la plantilla. Se le llevará a un editor, donde puede realizar cambios según sea necesario.

    Aplicación predeterminada en el editor

    La aplicación tiene siete páginas, a las que se puede navegar desde la página de inicio. Aunque la aplicación parece completa, solo está diseñada para pantallas de escritorio. Cambiará la visualización para ver qué aspecto tiene en los dispositivos de pantalla pequeña.

  6. En la cinta, haga clic en el botón Editar la página para dispositivos con pantalla pequeña.

    Botón Editar la página para dispositivos con pantalla pequeña

    Nota:

    El menú desplegable de dimensiones situado junto al botón le permite obtener una vista previa de la aplicación para tamaños de pantalla más específicos. Sin embargo, solo puede reorganizar su diseño para los tres modos generales del dispositivo.

    El diseño de la aplicación cambia.

    Aplicación con el diseño de dispositivos de pantalla pequeña

    Muchos de los elementos de la aplicación son ahora demasiado pequeños para que el texto sea legible y el texto del título ya no se ajusta al encabezado.

    De forma predeterminada, el encabezado y el cuerpo de la aplicación se ajustaron con el diseño Automático. En este diseño, Experience Builder realiza cambios automáticamente. Deberá realizar varios cambios personalizados para que esta aplicación se optimice para dispositivos móviles.

Editar el cuerpo

La página de inicio de la aplicación tiene dos componentes: el encabezado y el cuerpo. El encabezado es la parte superior de la página y contiene el título, el logotipo y los botones de navegación. El cuerpo es la parte inferior de la página y contiene el contenido principal. Primero, editará el cuerpo.

  1. Para el cuerpo, haga clic en Personalizar.

    Botón personalizado para el cuerpo de la aplicación

    Aparece un mensaje que le indica que al habilitarlo personalizado, puede organizar manualmente los widgets por separado de otros modos de dispositivo.

  2. En ¿Desea realmente habilitarlo?, haga clic en Aceptar.

    Ahora puede hacer ediciones en el cuerpo. Primero, cambiará el botón Condiciones actuales. En una pantalla pequeña, su texto está cortado.

  3. Haga clic en el widget del botón Condiciones actuales.

    Widget del botón Condiciones actuales

    Aparece un panel con opciones para editar el widget.

  4. En el panel Condiciones actuales, haga clic en la pestaña Estilo.

    Pestaña Estilo

    Centrará el botón, ajustará su anchura y cambiará su posición con respecto al centro del cuerpo.

  5. Haga clic en el botón Centro horizontal.

    Botón Centro horizontal

  6. En Tamaño y posición , en Ancho, escriba 50. En el gráfico de posición relativa, haga clic en el número y escriba 5.

    Parámetros Tamaño y posición

    Los cambios se aplican automáticamente al botón de la vista previa. Ahora, el botón es lo suficientemente ancho para mostrar todo el texto. También se mueve a la parte superior del cuerpo, dejando más espacio para los ajustes que haga en el resto del contenido.

    Botón Condiciones actuales con cambios de estilo

  7. En la cinta, haga clic en el botón Guardar.

    Botón Guardar

    Nota:

    Hacer cambios de tamaño y posición en un widget para dispositivos de pantalla pequeña no cambia la configuración de otros tamaños de pantalla. Si hace clic en el botón Editar la página para dispositivos con pantalla grande, verá que no se han realizado cambios en ese diseño. Una excepción es si elimina por completo un widget. Al eliminar un widget de una vista, se elimina de todas las vistas, por lo que tenga cuidado de no eliminar nada que desee conservar.

    A continuación, arreglará las cinco tarjetas, que están apretadas en la pantalla pequeña. Aunque puede intentar moverlas y cambiar su tamaño como el botón Condiciones actuales, son demasiado voluminosas para que quepan en la pantalla en su estado actual.

    Moverá las tarjetas a la lista de pendientes. La lista de pendientes es una forma de ocultar un widget en un tamaño de pantalla sin eliminarlo de otros tamaños de pantalla. Se recomienda usar la lista de pendientes si desea distintos widgets en distintos modos de dispositivo o si desea cambiar la configuración del widget que no sea el tamaño o la posición.

  8. Haga clic en la tarjeta Guías del visitante (la tarjeta situada más a la izquierda). En la barra de herramientas del widget, haga clic en el botón Mover a la lista de pendientes.

    Botón Mover a la lista de pendientes

    El widget desaparece de la vista, pero no se elimina de la aplicación y sigue apareciendo en otros tamaños de pantalla. (Si hubiera eliminado el widget, también se habría eliminado de otros tamaños de pantalla).

    Nota:

    Para ver la lista de pendientes, en el panel Insertar widget, haga clic en la pestaña Pendiente. Puede volver a agregar widgets de la lista de pendientes en cualquier momento.

  9. Mueva las otras cuatro tarjetas a la lista de pendientes.

    Ahora que ha liberado espacio, agregará botones para sustituir las tarjetas que ha movido a la lista de pendientes. El botón Condiciones actuales no ocupa mucho espacio y se puede leer en dispositivos móviles, por lo que copiará su estilo.

  10. Haga clic en el botón Condiciones actuales. En la barra de herramientas, haga clic en el botón Duplicar.

    Botón Duplicar

    Aparece una copia del botón denominado Condiciones actuales 2. Cambiará el nombre y su texto.

  11. En el panel Condiciones actuales 2, haga clic en el título del panel y escriba Guía del visitante. En Texto, sustituya el texto por Guía del visitante.

    Título y texto de la guía del visitante

    Para diferenciar este botón del botón Condiciones actuales, cambiará su apariencia. La ventana Estilo rápido que aparece cuando duplica el botón proporciona algunas opciones de estilo predeterminadas, pero puede realizar cambios más específicos en la sección Avanzado del panel del botón.

  12. En el panel Guía del visitante, en Fondo, haga clic en la muestra de color Relleno.

    Muestra de color de relleno

    Cambiará el color a tono de marrón utilizado en la guía de estilo del Servicio de Parques Nacionales.

  13. En el selector de color, haga clic en Más. En HEX, escriba #6f4930.

    Valor HEX establecido en #6f4930

    A continuación, definirá el vínculo del botón para que vaya a la página adecuada de la aplicación.

  14. En el panel Guía del visitante, haga clic en Definir vínculo.

    Establecer un botón de enlace

  15. En el panel Definir vínculo, en Vínculo a, elija Página. En Seleccionar una página, elija Guía del visitante.

    Panel Definir vínculo

  16. Haga clic en Aceptar. En la vista previa de la aplicación, cierre la ventana Estilo rápido y arrastre el botón Guía del visitante para centrarla un 25 por ciento debajo del botón Condiciones actuales.
    Sugerencia:

    Las guías azules que aparecen en la pantalla al mover el botón muestran la distancia del botón desde otros elementos. Las guías rojas muestran la alineación del botón con otros elementos.

    Botón Guía del visitante movido el 25 por ciento debajo del botón Condiciones actuales

  17. Duplique el botón Guía del visitante cuatro veces. Edite el nombre, el texto y el vínculo de cada botón duplicado de las siguientes formas:
    • Para el primer botón, edite el nombre y el texto de Historia del parque y defina el vínculo de la página Historial del parque.
    • Para el segundo botón, edite el nombre y el texto como Información de la ruta y defina el vínculo en la página Información de la ruta.
    • Para el tercer botón, edite el nombre y el texto como Biodiversidad y defina el vínculo en la página Bosques de Hemlock.
    • Para el cuarto botón, edite el nombre y el texto como Encuesta para visitantes y defina el vínculo en la página Encuesta de satisfacción del visitante.
  18. En la vista previa de la aplicación, arrastre cada botón para centrarlo a una distancia del 5 por ciento debajo del botón anterior.

    Cuerpo final con todos los botones

    Estos botones son claros y legibles incluso en pantallas pequeñas y tienen las mismas opciones de navegación que las tarjetas de la aplicación de escritorio original.

  19. Guarde la aplicación.

Editar el encabezado

Ahora que ha terminado de editar el cuerpo, editará el encabezado. El encabezado contiene tres widgets: uno para el título, uno para el logotipo y otro con los vínculos a todas las páginas de la aplicación. Actualmente, los widgets se cortan y se superponen entre sí.

  1. En el encabezado, haga clic en Personalizar. En ¿Desea realmente habilitarlo?, haga clic en Aceptar.
  2. En la vista previa de la aplicación, señale el encabezado y haga clic en Editar encabezado. Haga clic en el título (Parque Nacional de las Grandes Montañas Humeantes).

    Título resaltado en el encabezado

    Aparece el panel Título de Hemlock con la configuración del widget de título. Reducirá el tamaño de la fuente.

    Es posible que recuerde que solo puede cambiar la configuración de tamaño y posición de un widget sin afectar al widget en otros modos de dispositivo. Esto significa que al cambiar el tamaño del texto también se cambiará en la aplicación de escritorio, donde no es necesario cambiar el tamaño del texto.

    Para evitar este problema, duplicará el título y moverá el título original a la lista de pendientes. A continuación, cambiará el tamaño del texto del título duplicado para que el título tenga un tamaño adecuado para el móvil sin cambiarlo en otros dispositivos.

  3. En la vista previa de la aplicación, en la barra de herramientas del widget del título, haga clic en el botón Duplicar.

    El título duplicado se selecciona de forma predeterminada.

  4. Seleccione de nuevo el título original. En la barra de herramientas del widget, haga clic en el botón Mover a la lista de pendientes.
  5. Seleccione el título duplicado. En el panel Título de Hemlock 2, en Formato de texto, cambie el tamaño del texto a 16 px.

    Tamaño del texto definido en 16 px

    El título duplicado no está alineado con el centro del encabezado, por lo que ajustará su configuración de estilo.

  6. En el panel Título de Hemlock 2, haga clic en la pestaña Estilo. En Ancho, escriba 225 px.

    Ancho cambiado a 225 px

  7. Haga clic en el botón Centro horizontal. Haga clic en el botón Alinear a la parte superior y elija Centro vertical.

    Centrado horizontal y vertical

    El título se centra en el encabezado, pero aún tiene superpuesto el resto de widgets, lo que lo hace ilegible. A continuación, reducirá el logotipo. Es difícil hacer clic en el logotipo en la vista previa de la aplicación debido a la superposición, por lo que abrirá una lista de todos los widgets de la página para cambiar su configuración.

  8. En la barra de herramientas izquierda, haga clic en el botón Página.

    Botón Página

    Aparece una lista de todos los widgets de la aplicación, ordenados por página. De forma predeterminada, se muestra la página de inicio.

  9. En Contorno, en Encabezado, elija Logo.

    Widget de logotipo

    El logotipo se selecciona en la vista previa de la aplicación y aparece su panel de configuración. Solo desea cambiar su tamaño y su posición.

  10. En la vista previa de la aplicación, arrastre la esquina del logotipo para cambiar su tamaño a un ancho de alrededor de 62 px. Recoloque el logotipo a la izquierda del título.
    Sugerencia:

    Puede cambiar el tamaño y la posición del logotipo o cualquier otro widget, ya sea utilizando las herramientas de tamaño y posición del panel del widget o cambiando el tamaño y reposicionando el widget en la vista previa. Utilice el método que prefiera.

    Logotipo redimensionado y reposicionado junto al título

    A continuación, cambiará el menú de vínculos a otras páginas. Debido a los botones que creó en el cuerpo, tampoco es necesario mostrar todos los vínculos en el encabezado. Reemplazará el menú actual por un icono que se adapte a tamaños de pantalla pequeños.

  11. En el panel Página, en Contorno, haga clic en Menú.

    Widget Menú

  12. En la vista previa de la aplicación, en la barra de herramientas del widget, haga clic en Duplicar. Mueva el menú original a la lista de pendientes y vuelva a seleccionar el menú duplicado.
  13. En el panel Menú 2, en la pestaña Contenido, en Tipo, elija Icono.

    Opción Icono del parámetro Tipo

  14. Haga clic en la pestaña Estilo. Cambie Ancho a 30 px y sitúe el icono a la derecha del título.

    Encabezado final

    Después de los cambios, el encabezado es demasiado alto. Reducirá su altura para dispositivos de pantalla pequeña.

  15. En el panel Página, haga clic en Inicio.

    Opción Inicio

    Aparece el panel Inicio con opciones de la página de inicio.

  16. En el panel Inicio, en Encabezado, cambie Altura a 70 px.

    Parámetro de altura del encabezado

    Nota:

    Cambiar la altura del encabezado puede reposicionar algunos de los elementos del encabezado. Si es necesario, no dude en recolocarlos.

  17. Guarde la aplicación. De forma opcional, en la cinta, haga clic en Vista en directo para ver y probar la página de inicio de la aplicación finalizada.

    Aplicación final

En este tutorial, ha editado el diseño de una aplicación web para asegurarse de que está optimizada para dispositivos móviles. Ha movido y cambiado el tamaño de los widgets y ha utilizado la lista de pendientes para proporcionar diferentes configuraciones en distintos tamaños de pantalla.

Este tutorial solo cubre la realización de cambios en una sola página. Si desea más práctica cambiar las páginas de aplicaciones para dispositivos móviles, la aplicación Parque Nacional de las Grandes Montañas Humeantes tiene seis páginas con las que puede experimentar. Para ver cómo alteraron cada página los creadores de la aplicación, puede ver la plantilla completada en su propio dispositivo móvil.

Encontrará más tutoriales en la página de recursos de ArcGIS Experience Builder.