Cambiar el tamaño de los widgets para pantallas más pequeñas
Abrir la experiencia
Comenzará abriendo la experiencia creada en el tutorial anterior.
- Si ha completado el tutorial anterior, Agregar una ventana a una aplicación web, 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 4 de estuario.
- En la tarjeta Plantilla 4 de Estuario marino de American River, haga clic en el botón Crear.
Aparece el lienzo, que muestra la experiencia creada hasta el momento. Contiene un mapa, un encabezado, una columna con más widgets y un botón que abre una ventana.
- En la barra de herramientas del builder, haga clic en el título y cambie el nombre a Estuario marino de American River.
Habilitar la opción de diseño personalizado
La experiencia Estuario marino de American River está pensada para un quiosco interactivo, por lo que su diseño se ha centrado en un formato de pantalla grande. Sin embargo, su cliente ha indicado que también quiere establecer un vínculo con la aplicación desde su sitio web, de modo que los usuarios también puedan encontrarla en tabletas y teléfonos móviles. Utilizará la opción de diseño personalizado para realizar ajustes en el diseño que solo serán visibles en las pantallas más pequeñas.
- En la barra de herramientas del builder, haga clic en el botón Editar la página para dispositivos con pantalla mediana.
El lienzo se estrecha, como si se tratara de la pantalla de una tableta. La columna situada junto al mapa es ahora demasiado estrecha para ser útil. No se puede leer el contenido de los widgets.
Junto al menú, hay dos menús de estado: uno para el encabezado y otro para el cuerpo del mapa. Ambos están definidos como Automático, lo que significa que el diseño para pantallas pequeñas es el mismo que el diseño para pantallas medianas.
- Junto al cuerpo de la aplicación, haga clic en Personalizado.
- En la ventana Desea realmente habilitarlo, haga clic en Aceptar.
Ahora puede cambiar la disposición del diseño de la página en pantallas medianas sin afectar al diseño para pantallas grandes.
- Haga clic en la columna. Pruebe a hacer clic en el espacio entre dos widgets para seleccionar la columna en lugar de uno de los otros widgets.
Sugerencia:
Para confirmar que ha seleccionado el widget de columna, compruebe que ha aparecido el panel Columna. También puede seleccionar el widget de columna en la sección Contorno del panel Página.
- Arrastre hacia la derecha el manipulador lateral del widget de columna hasta que ocupe cuatro espacios verticales en lugar de dos.
La columna es ahora lo suficientemente ancha como para mostrar completamente la leyenda. Este cambio no afectará a la experiencia en las pantallas grandes.
Mover un elemento a la lista de pendientes
A veces, querrá eliminar por completo un widget de un diseño de pantalla pequeña. En lugar de borrar el widget, lo que lo eliminaría también del diseño de pantalla grande, puede moverlo a la lista de pendientes.
- En la barra de herramientas del builder, haga clic en el botón Editar la página para dispositivos con pantalla pequeña.
El lienzo se hace aún más pequeño. Los cambios necesarios aquí son más drásticos.
- En el lienzo, desplácese por la aplicación.
La columna se muestra en primer lugar, con el mapa situado debajo. En las pantallas pequeñas, los widgets de fila se muestran como columnas, por lo que su diseño se estructura ahora como una columna dentro de una columna en lugar de una columna dentro de una fila.
Las aplicaciones móviles tienen menos espacio, por lo que tienen más éxito si respetan un diseño sencillo. La información de los widgets de leyenda y marcador también está disponible en las ventanas emergentes, por lo que eliminará los widgets de la vista en pantallas pequeñas. La entidad swipe también es menos útil en una pantalla pequeña, así que también la eliminará. Significa que puede eliminar todo el widget de columna, dejando solo el mapa.
- Junto al cuerpo del lienzo, haga clic en Personalizado. Haga clic en Aceptar.
- Seleccione el widget de columna. Asegúrese de que lo que selecciona es la columna y no uno de los widgets que contiene.
No elimine el widget de columna. Al eliminar un widget en modo personalizado, se elimina de toda la aplicación, por lo que tampoco estará disponible en pantallas más grandes. En lugar de eliminar los widgets con diseño de pantalla mediana o pequeña, muévalos a la lista de pendientes. Así se asegurará de que sigan existiendo y que estén disponibles para otros tamaños de pantalla.
Sugerencia:
Si ha borrado accidentalmente el widget de columna, en la barra de herramientas, haga clic en el botón Deshacer.
- En la barra de herramientas del widget, haga clic en el botón Mover a la lista de pendientes.
La columna y todo su contenido desaparecen del lienzo. Solo se conserva el mapa.
Nota:
Si el mapa no ocupa todo el lienzo, haga clic y arrástrelo un poco para reajustar su tamaño.
Si las herramientas de mapa (por ejemplo, el botón de cambio de mapa) no están visibles en la parte inferior del lienzo, abra el panel Mapa en la pestaña Estilo. En Altura, elija Personalizada y ajuste el tamaño al 100 %.
Establecer el tamaño y la posición con píxeles
Al crear diseños personalizados para pantallas más pequeñas, surge un inconveniente: si decide hacer cambios en el diseño después, deberá hacerlos dos o tres veces. ççA veces, puede evitar habilitar un diseño personalizado dimensionando los elementos con píxeles en lugar de porcentajes.
En las pantallas pequeñas, el botón Acerca de este mapa de su experiencia no es lo suficientemente grande como para mostrar todo su texto.
Siempre podría hacer un tamaño personalizado para el botón que solo afectara a las pantallas pequeñas, pero optaremos por cambiar el tamaño general del botón para que funcione en todos los tamaños de pantalla y no sea necesario personalizarlo.
- En la barra de herramientas del builder, haga clic en el botón Editar la página para dispositivos con pantalla grande.
- Apunte al encabezado y haga clic en Editar encabezado. Haga clic en el widget del botón.
- En el panel Botón 2, haga clic en la pestaña Estilo.
En Tamaño y posición, los ajustes de Ancho y Alto se miden en porcentaje del tamaño de la pantalla. Provoca que el botón resulte demasiado corto para leerlo en los dispositivos de pantalla pequeña.
- Junto a Ancho, haga clic en el botón % y elija px. Cambie también % a px para el ajuste de Alto.
Si determina el tamaño del botón con píxeles, el botón tiene siempre el mismo tamaño, independientemente del tamaño de la pantalla.
- En Ancho, escriba 120. En Alto, escriba 30.
El botón parece un poco pequeño en las pantallas grandes, aunque seguirá pareciendo algo grande en las pantallas pequeñas. Sin embargo, su nuevo tamaño es una solución de compromiso que funciona en cualquier tamaño de pantalla. También determinará su posición en píxeles.
Debajo del parámetro Alto, verá un diagrama de posición. Este diagrama determina a qué distancia de los bordes del encabezado se coloca el botón.
- En el diagrama de posición, junto a las mediciones de posición inferior y derecha, haga clic en el botón % y elija px.
- Cambie ambas mediciones a 10 píxeles.
El botón se sitúa ahora a 10 píxeles de la esquina inferior derecha del encabezado.
A continuación, ajustará la posición del texto del título para que también esté a 10 píxeles del borde.
- En el lienzo, haga clic en el texto del título.
En el panel Texto, en la pestaña Estilo, en el diagrama de posición, las cuatro mediciones se establecen en un 0 por ciento. Se debe a que ha configurado el título para que ocupe todo el espacio del encabezado. Ajustará una de estas mediciones.
- En el diagrama de posición, cambie la medición izquierda a 10 píxeles.
En el lienzo, el widget de texto se desplaza ligeramente hacia la derecha.
- Haga clic en los botones Editar la página para dispositivos con pantalla mediana y Editar la página para dispositivos con pantalla pequeña para comprobar cómo aparece el encabezado en pantallas más pequeñas.
- En la barra de herramientas del builder, haga clic en el botón Editar la página para dispositivos con pantalla grande y en el botón Guardar.
En este tutorial, ha adaptado su diseño para que funcione en tres tamaños de pantalla. Ha habilitado la opción de diseño personalizado, ha movido los elementos no deseados a la lista de pendientes y ha fijado el tamaño y la posición de los widgets utilizando píxeles para asegurarse de que no cambien de tamaño al cambiar el tamaño de la pantalla. Pruebe el último tutorial de esta serie, Publicar una experiencia y una plantilla, para aprender a poner la experiencia a disposición del público.
