Google se compromete a impulsar la igualdad racial para las comunidades afrodescendientes. Obtén información al respecto.

Cómo optimizar apps para el Sistema operativo Chrome

Las apps para Android cumplen una función importante a la hora de redefinir el aspecto de la informática moderna en pantallas grandes. Por lo tanto, con solo asegurar la portabilidad de tu app para dispositivos móviles en Chromebooks, no garantizarás la mejor experiencia de los usuarios. En esta página, se detallan algunas formas en las que puedes adaptar tu experiencia para laptops y los factores de forma convertibles.

Cómo aprovechar la compatibilidad con Multiventana de formato libre

La implementación de apps para Android en el Sistema operativo Chrome incluye compatibilidad básica con la función Multiventana. En lugar de ocupar siempre la pantalla completa, Android procesa las apps del Sistema operativo Chrome en contenedores de ventana de formato libre adecuados para este factor de forma, como se muestra en la figura 1.

Figura 1: Una app en diferentes tamaños de ventana

Los usuarios pueden cambiar el tamaño de la ventana que aloja tu app para Android, como se muestra en la figura 2. Para asegurarte de que tus ventanas de formato libre cambien de tamaño sin problemas y puedan mostrar todo su contenido al usuario, lee las pautas y lo que debes tener en cuenta en Compatibilidad de tamaño de pantalla para Chromebooks.

Figura 2: Una ventana de app que puede cambiar de tamaño

Para mejorar la experiencia del usuario cuando se ejecuta tu app en el Sistema operativo Chrome, sigue estas prácticas recomendadas:

  • Asegúrate de que tu app ajuste su diseño adecuadamente cada vez que el usuario cambie el tamaño de su ventana.
  • Personaliza las dimensiones iniciales de la ventana de la app especificando el tamaño de inicio.
  • La orientación de la actividad raíz de la app afecta a todas sus ventanas. Ten en cuenta las reglas de actividad raíz.

Para obtener más información, lee sobre la administración de ventanas.

Personaliza el color de la barra superior

El Sistema operativo Chrome usa el tema de la app para colorear la barra superior que aparece sobre la app y que muestra cuándo los usuarios tienen los controles de la ventana y el botón Atrás. Para que tu app se vea optimizada y personalizada en el Sistema operativo Chrome, define los valores colorPrimary y (si es posible) colorPrimaryDark en el tema de tu app. Este último se usa para colorear la barra superior. Si solo se define colorPrimary, el Sistema operativo Chrome usa una versión más oscura en la barra superior. Para obtener más información, consulta Cómo usar el tema de material.

Agrega compatibilidad con teclado, panel táctil y mouse

Todas las Chromebooks tienen un teclado físico y un panel táctil, algunas incluso tienen pantalla táctil. Además, algunos dispositivos pueden convertirse de formato de laptop a formato de tablet.

Todas las apps para el Sistema operativo Chrome deben ser compatibles con el mouse, el panel táctil y el teclado, y deben poder usarse sin pantalla táctil. Muchas apps ya admiten el mouse y el panel táctil sin necesidad de realizar ningún trabajo adicional. Sin embargo, siempre es mejor personalizar el comportamiento de tu app de manera correcta para el mouse, y deberías admitir y distinguir entre el mouse y las entradas táctiles. Obtén más información sobre la compatibilidad con el mouse en Compatibilidad con entradas para Chromebooks.

Debes garantizar lo siguiente:

  • Se puede hacer clic con el mouse en todos los destinos.
  • Todas las superficies donde se puedan hacer desplazamientos táctiles deben deslizarse cuando se usa la rueda del mouse.
  • Los estados de desplazamiento se implementan con la intención y el criterio de mejorar el descubrimiento de la IU sin abrumar al usuario.

Figura 3: Desplazamiento con la rueda del mouse

Figura 4: Estados de desplazamiento del botón

Cuando corresponda, deberías diferenciar entre las entradas táctiles y del mouse. Por ejemplo, presionar un elemento podría activar una IU de varias selecciones, mientras que hacer clic en el mismo elemento podría activar una sola selección.

Cursores personalizados

Las apps deberían personalizar los cursores del mouse para indicar con qué elemento de su IU se puede interactuar y cómo. Puedes configurar el PointerIcon para usar cuando los usuarios interactúan con una vista llamando al método setPointerIcon().

Las apps deberían mostrar lo siguiente:

  • Punteros para escritura de texto
  • Controles para cambiar el tamaño en los bordes de la capa de tamaño variable
  • Punteros de mano abierta/mano cerrada para contenido que se puede desplazar o arrastrar con un clic y un gesto de arrastre
  • Procesamiento de íconos giratorios

La clase PointerIcon proporciona constantes que puedes usar para implementar cursores personalizados.

Combinaciones de teclas y navegación

Como cada Chromebook tiene un teclado físico, deberías proporcionar teclas de acceso rápido para permitir que tus usuarios sean más productivos. Por ejemplo, si tu app admite impresión, puedes usar Control + P para abrir un diálogo de impresión. Del mismo modo, toda la IU crucial debería controlarse mediante navegación de pestañas. Esto resulta particularmente importante para la accesibilidad. Sin embargo, para cumplir con los estándares de accesibilidad, todas las superficies de la IU deben tener estados enfocados evidentes y compatibles con la accesibilidad.

Figura 5: Tabulación transversal

Figura 6: Reemplazo de un gesto de deslizamiento con un control que aparece cuando se desplaza el cursor

También debes asegurarte de implementar alternativas de teclado o mouse a las funciones principales ocultas en interacciones táctiles específicas, como pulsaciones prolongadas, deslizamientos o algún otro gesto multitáctil. Una solución de ejemplo sería proporcionar botones que aparecen en una superficie cuando colocas el cursor sobre ella.

Amplía las entradas del usuario

Si quieres obtener la funcionalidad de escritorio para tu app, ten en cuenta estas entradas adicionales orientadas a la productividad.

Menús contextuales

Figura 7: Un menú contextual que aparece cuando haces clic con el botón derecho

Los menús contextuales de Android, que son otro acelerador para llevar a los usuarios a las funciones de tu app, pueden activarse mediante un clic con el botón derecho de un mouse o el botón secundario de un panel táctil, o si se mantiene presionada la pantalla táctil.

Arrastrar y soltar

Figura 8: Arrastrar y soltar en una interfaz de árbol de archivos

La creación de interacciones que implican arrastrar y soltar puede brindar una funcionalidad de productividad intuitiva y eficiente a tu app. Para obtener más información, consulta Arrastrar y soltar.

Compatibilidad con pluma stylus

La compatibilidad con la pluma stylus es muy importante para dibujar y tomar notas en apps. Proporciona compatibilidad mejorada para las Chromebooks y tablets equipadas con la pluma stylus mediante la implementación de interacciones personalizadas que tienen como fin el uso de la pluma stylus. Ten en cuenta las posibles variaciones en el hardware de la pluma stylus cuando diseñes las interacciones con la pluma stylus. Consulta Compatibilidad de entrada para Chromebooks si quieres obtener un resumen de las API de la pluma stylus.

Cómo hacer que tus diseños sean receptivos

Tu app debe aprovechar el espacio disponible en pantalla, independientemente del estado visual (pantalla completa, vertical, horizontal, con ventanas). Algunos ejemplos de buen uso del espacio son los siguientes:

  • Mostrar la arquitectura de la app
  • Limitar la longitud del texto y el tamaño de la imagen a un ancho máximo
  • Hacer mejor uso del espacio en la barra de herramientas de la app
  • Mejorar la ubicación de las posibilidades de IU, adaptándola al uso del mouse en lugar del uso del pulgar
  • Establecer un conjunto de altura y ancho máximos para todos los medios, así como maximizar la legibilidad y la capacidad de escaneo, a fin de optimizar el tamaño de los videos y las imágenes
  • Implementar un sistema de columnas sensible (para obtener más información, consulta IU responsiva)
  • Cambiar el tamaño y modificar la IU cuando sea necesario mediante el sistema de columnas, y evitar abrir nuevas ventanas cuando sea posible
  • Quitar o reducir la importancia de los componentes de desplazamiento horizontal
  • Evitar la IU modal de pantalla completa y usar la interfaz de usuario en línea, incluidos indicadores de progreso y alertas, para todas las acciones no críticas
  • Usar componentes de IU mejorados, como selectores de fecha y hora, campos de texto y menús desplegables, diseñados para mouse, teclado y pantallas más grandes
  • Mediante ediciones directas, usar una columna adicional o una IU modal en lugar de una actividad nueva para la función de ediciones pequeñas y medianas
  • Quitar o modificar los botones de acción flotante (FAB) para mejorar la navegación del teclado: De forma predeterminada, un FAB se coloca en último lugar en el orden de tabulación transversal; debería estar primero, porque es la acción principal, o bien reemplazarse por otro nivel más alto

A medida que tu app se personaliza cada vez más para un entorno de laptops, considera avanzar hacia un patrón de navegación que quita énfasis al botón Atrás. La app debería poder manejar su propia pila de historial y proporcionar botones de retroceso en la app, rutas de navegación o rutas de escape, como botones de cierre o cancelación, como parte de su IU de pantalla grande. Un botón Atrás a nivel del sistema es un patrón que se transfiere desde las raíces portátiles de Android, que no encaja tan bien en un contexto de escritorio.

Puedes controlar si tu app muestra o no un botón Atrás en su ventana estableciendo una preferencia dentro de la etiqueta <activity>. Si configuras la etiqueta en true, se ocultará el botón Atrás:

    <meta-data android:name="WindowManagerPreference:SuppressWindowControlNavigationButton" android:value="true" />
    

Cómo resolver problemas con las imágenes de vista previa de la cámara

Los problemas de la cámara pueden surgir cuando la app solo puede ejecutarse en orientación vertical, pero el usuario la ejecuta en una pantalla horizontal. En este caso, la vista previa, o el resultado capturado, podría rotarse incorrectamente.

El modo de compatibilidad cambia la forma en que el sistema maneja los eventos, como los cambios de orientación, en el Sistema operativo Chrome. Esto ayuda a evitar problemas cuando la cámara se usa en el modo de orientación incorrecto. Para habilitar el modo de compatibilidad, haz lo siguiente:

  • Orienta la app a Android 7.0 (API nivel 24), como mínimo. Todavía puedes elegir un nivel mínimo de SDK.
  • Permite que tu app pueda cambiar de tamaño.

Cómo controlar la configuración del dispositivo

Cómo cambiar el volumen

Los dispositivos con Sistema operativo Chrome son dispositivos de volumen fijo. Las apps que reproducen sonido deben tener sus propios controles de volumen. Sigue las instrucciones para trabajar con dispositivos de volumen fijo.

Cómo cambiar el brillo de la pantalla

No puedes ajustar el brillo del dispositivo en el Sistema operativo Chrome. Se ignoran las llamadas a system settings y WindowManager.LayoutParams.

Materiales de aprendizaje adicionales

Si quieres obtener más información sobre cómo optimizar tus apps para Android en Chromebooks, consulta los siguientes recursos: