Diseño de apps

Este capítulo se enfoca en algunos aspectos críticos de la representación de contenido fuera de la pestaña del navegador.

La ventana

Los distintos sistemas operativos tienen diferentes ideas sobre la ventana de una app. Por ejemplo, en iPhones, una aplicación siempre ocupa el 100% de la pantalla. En Android y iPad, las aplicaciones suelen ejecutarse en pantalla completa, pero es posible compartir la pantalla entre dos apps; sin embargo, solo hay una instancia de app abierta a la vez. Por el contrario, en un dispositivo de escritorio, una aplicación puede tener más de una instancia abierta a la vez. Comparte el espacio de pantalla disponible con todas las demás aplicaciones abiertas. Se puede cambiar el tamaño y la posición de cada instancia de aplicación en cualquier parte de la pantalla, incluso sobre otras aplicaciones.

El ícono

Reconocemos las apps por su ícono. Ese ícono aparece cuando buscas apps, en la configuración, donde sea que inicies las apps y donde veas las apps en ejecución.

Estos incluyen los siguientes:

• Pantalla principal (iOS, iPadOS y Android)
• Selector de aplicaciones (macOS y Android)
• Menú Inicio o Menú de la app (Windows, ChromeOS y Linux)
• Paneles Dock, TaskBar o multitareas (todos los sistemas operativos).

Cuando crees el ícono para tu app web progresiva, asegúrate de que el ícono sea independiente de la plataforma, ya que cada sistema operativo puede renderizar íconos y aplicarles diferentes máscaras de forma, como las que se muestran en la siguiente imagen.

Temas para tu app

Existen varias formas de personalizar el estilo de la app en tu AWP, incluidas las siguientes:

• Color del tema: Define el color de la barra de título de la ventana en el escritorio y el color de la barra de estado en los dispositivos móviles. Con una metaetiqueta, puedes tener opciones para diferentes esquemas, como el modo oscuro o claro, que se usarán según las preferencias del usuario.
• Background color: Define el color de la ventana antes de que se carguen la app y su CSS.
• Color de los elementos destacados: Define el color de los componentes integrados del navegador, como los controles de formularios.

Una AWP de escritorio que muestra los colores del tema y de los elementos destacados, y una pantalla de presentación de la AWP de Android que muestra los colores del tema y el fondo

Nota: Cuando planifiques la interfaz de usuario de tu app web progresiva, ten en cuenta que no puedes usar imágenes ni gradientes para el tema, sino colores planos. Es mejor elegir colores sin transparencia y usar los colores rgb o hsl, códigos hexadecimales o colores con nombre. Asignar temas a tu app también puede afectar los temas del navegador incluso sin instalarla, como cuando se usa el elemento <meta name="theme-color">.

Modos de visualización

Puedes definir el tipo de experiencia de ventana que deseas para tu app web progresiva. Puedes elegir entre tres opciones:

• Pantalla completa
• Independiente
• Interfaz de usuario mínima

Nota: Si un modo de visualización específico no es compatible o no se puede usar para mostrar tu AWP, se recurrirá al siguiente modo de visualización disponible. La opción de pantalla completa volverá al modo independiente; el modo independiente volverá a la interfaz de usuario mínima y la interfaz de usuario mínima recurrirá al navegador, la opción predeterminada. El modo de visualización del navegador no aparece como una ventana propia, sino que muestra la AWP en una pestaña del navegador desde la que se instaló, como un favorito web en una pantalla principal.

Experiencia de pantalla completa

Las experiencias de pantalla completa son adecuadas para experiencias inmersivas, como juegos, RV o RA. Actualmente, solo está disponible en dispositivos Android y oculta la barra de estado y la barra de navegación, lo que permite que tu AWP ocupe el 100% de la pantalla del contenido.

En computadoras de escritorio y iPadOS, no se admiten las AWP de pantalla completa. Sin embargo, puedes usar la API de pantalla completa desde tu AWP para mostrar tu app en pantalla completa cuando el usuario lo solicite.

Experiencia independiente

El modo independiente, la opción más común para una app web progresiva, muestra la AWP en una ventana estándar del SO sin ninguna IU de navegación del navegador. La ventana también puede incluir un menú controlado por el navegador en el que el usuario puede hacer lo siguiente:

• Copia la URL actual.
• Consulta, aplica o inhabilita extensiones del navegador.
• Consulta y cambia los permisos.
• Verificar el origen actual y el certificado SSL

La barra de título también puede mostrar permisos y uso de hardware en reemplazo del cuadro multifunción o la barra de URL cuando la AWP se renderiza en la pestaña.

En las imágenes anteriores, se muestra cómo se muestra una AWP en modo independiente en el escritorio en Microsoft Edge y Chrome.

En los dispositivos móviles, una experiencia de AWP independiente creará una pantalla estándar que mantendrá la barra de estado visible, de modo que el usuario pueda seguir viendo las notificaciones, la hora y el nivel de batería. A menudo, no tiene ningún menú controlado por el navegador como se pueden incluir las experiencias independientes en computadoras de escritorio.

Algunos navegadores en Android crean una notificación fija y silenciosa mientras la AWP está en primer plano, lo que le permite al usuario copiar la URL actual y otras opciones.

Interfaz de usuario mínima

Este modo está disponible para las apps web progresivas en los sistemas operativos Android y de escritorio. Cuando la uses, el navegador que renderiza tu AWP mostrará una interfaz de usuario mínima para ayudarlo a navegar dentro de la aplicación.

En Android, obtendrás una barra de título que renderiza el elemento <title> actual y el origen con un pequeño menú desplegable disponible. En una computadora de escritorio, tendrás un conjunto de botones en la barra de título para ayudarte con la navegación, que incluye un botón Atrás y un control que alterna entre una acción de detener y volver a cargar, según el estado de carga actual.

Advertencia: Safari en iOS y iPadOS no es compatible con el modo de IU mínima para las AWP. En su lugar, se usa un atajo del navegador como resguardo. El usuario puede agregar un ícono a la pantalla principal, pero ese ícono dirigirá a Safari como favorito y no podrá disfrutar de una experiencia en la app fuera de la pestaña del navegador.

Optimización del diseño para computadoras de escritorio

Cuando diseñas una app web progresiva para que funcione en una computadora de escritorio, debes pensar en las infinitas posibilidades del tamaño de la ventana en comparación con estar en la pestaña del navegador o como una app en un sistema operativo móvil.

En el Capítulo 3, mencionamos el modo mini: una app de escritorio puede tener un tamaño mínimo de 200 por 100 píxeles. Esta ventana usará el contenido del elemento <title> en tu HTML como título de la ventana. Ese contenido también se renderiza cuando usas la pestaña alternativa entre apps y en otros lugares.

Presta atención al elemento <title> de tu HTML y vuelve a pensar cómo lo usas. <title> no es solo para SEO o para renderizar solo los primeros caracteres en una pestaña del navegador, sino que formará parte de la experiencia del usuario de la ventana independiente para computadoras de escritorio.

Nota: Si desarrollas tu app con una biblioteca del cliente, como React o Vue, no olvides cambiar <title> a algún valor práctico cuando te muevas entre secciones o rutas de tu app. Es hora de reinventar la <title>.

Prácticas recomendadas para CSS

Toda tu experiencia con el diseño, el diseño y la animación de CSS es válida cuando tu contenido se renderiza en su experiencia independiente. Sin embargo, existen algunas sugerencias y trucos para mejorar la experiencia en una ventana independiente.

Recuerda que CSS solo define estilos para el contenido de la AWP. Más adelante en este curso, veremos cómo especificar declaraciones de estilo para la ventana alrededor de tu contenido, como las propiedades en el manifiesto de la aplicación web.

Consultas de medios

La primera consulta de medios que puedes aprovechar en tu AWP es la propiedad display-mode, que acepta los valores browser, standalone, minimal-ui o fullscreen.

Esta consulta de medios aplica diferentes estilos a cada modo. Por ejemplo, puedes renderizar una invitación de instalación solo en el modo de navegador o proporcionar información específica solo cuando el usuario usa tu app desde el ícono del sistema. Esto podría incluir agregar un botón Atrás para usar cuando tu app se inicie en modo independiente.

/* It targets only the app used within the browser */
@media (display-mode: browser) {
}
/* It targets only the app used with a system icon in standalone mode */
@media (display-mode: standalone) {
}
/* It targets only the app used with a system icon in all mode */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
}

Nota: Los usuarios esperan que las apps se integren con la plataforma, por lo que debes ofrecer los modos claro y oscuro usando prefers-colors-scheme y respetar las consultas de medios prefers-reduced-motion para inhabilitar o reducir las transiciones y las animaciones.

La experiencia de la app

Cuando los usuarios usan una AWP instalada, esperan el comportamiento de la app. Si bien no es fácil definir lo que significa, el comportamiento web predeterminado no brinda la mejor experiencia en algunas situaciones.

Selección de usuarios

Por lo general, el contenido se puede seleccionar con un mouse, un puntero o un gesto de mantener presionado un elemento. Si bien es útil para el contenido, no proporciona la mejor experiencia para los elementos de navegación, los menús y los botones de tu AWP.

Por lo tanto, es una buena idea inhabilitar la selección del usuario en estos elementos con user-select: none y su versión del prefijo -webkit-:

.unselectable {
   user-select: none;
}

La selección del usuario es una característica vital de todas las apps web en términos de usabilidad y accesibilidad. No inhabilites la selección del usuario en todo el contenido, solo en elementos de la IU cuando no lo hagas, ya que se crea una experiencia deficiente o inesperada.

Accent color

En tu AWP, puedes definir un color para que coincida con tu marca en los controles del formulario HTML con la propiedad accent-color.

Fuentes del sistema

Si quieres que un elemento, como diálogos o mensajes, coincida con la fuente predeterminada de la plataforma del usuario, puedes usar la siguiente familia de fuentes:

selector {
  font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell,
    "Helvetica Neue", sans-serif;
}

Desliza para actualizar

Los navegadores para dispositivos móviles modernos, como Google Chrome y Safari, tienen una función que actualiza la página cuando se abre. En algunos navegadores, como Chrome en Android, ese comportamiento también está habilitado en AWP independientes.

Te recomendamos que inhabilites esta acción. Por ejemplo, cuando proporcionas tu propia administración de gestos o acción de actualización, o si existe la posibilidad de que tu usuario active la acción de manera no intencional.

Es posible inhabilitar este comportamiento usando overscroll-behavior-y: contain:.

  body {
    overscroll-behavior-y: contain;
  }

Áreas seguras

Algunos dispositivos no tienen pantallas rectangulares sin obstrucciones. En su lugar, es posible que su pantalla tenga otra forma, como un círculo, o que tenga partes de la pantalla que no se puedan usar, como la muesca del iPhone 13. En estos casos, algunos navegadores exponen variables de entorno con áreas seguras que pueden mostrar contenido.

Si deseas acceso completo a la pantalla, incluso al área invisible, para renderizar tu color o imagen, incluye viewport-fit=cover en el contenido de la etiqueta <meta name="viewport">. Luego, usa las variables de entorno safe-area-inset-* para extender tu contenido de forma segura a esas áreas.

Precaución: Cuando apliques viewport-fit=cover, recuerda que ahora puedes renderizar píxeles detrás de esquinas y recortes redondeados, por lo que siempre debes usar márgenes o paddings seguros para el contenido fundamental y los elementos interactivos.

Recursos

• Consulta de medios en modo de visualización de CSS
• Controla tu desplazamiento: personaliza los efectos de "deslizar hacia abajo para actualizar" y "desbordar"
• prefers-color-scheme: Hola, oscuridad, mi viejo amigo
• prefers-reduced-motion: A veces, menos movimiento es más.
• Función de CSS env()
• Color de los elementos destacados de CSS