106 lines
5.3 KiB
Markdown
106 lines
5.3 KiB
Markdown
# Cómo moverse por Oasis en el móvil
|
||
|
||
Estudio para decidir la navegación de la rama. 19/10/2026.
|
||
|
||
## La pregunta
|
||
|
||
Oasis tiene casi sesenta módulos. En un escritorio caben en un menú lateral; en un
|
||
móvil no. ¿Qué tiene que ver alguien al abrir la app, y cómo llega al resto?
|
||
|
||
## Lo que hay ahora
|
||
|
||
Medido en el emulador (Pixel 9, 412 px de ancho) con el workflow acampada (16 módulos):
|
||
|
||
- Al abrir, la portada es el lanzador: una rejilla de iconos por secciones que ocupa
|
||
unos 1.300 px, casi pantalla y media. La actividad, que es lo que ha pasado en la
|
||
red, empieza debajo y no se ve sin bajar.
|
||
- Abajo hay una barra de cuatro atajos que elige cada cual (Actividad, Chats,
|
||
Publicar, Buzón de serie).
|
||
- Para ir a un módulo que no está en la barra hay que volver a la portada y buscarlo
|
||
en la rejilla. Desde dentro de un módulo no hay acceso directo al resto.
|
||
|
||
O sea: la portada es un menú, no un sitio donde pase algo, y el menú solo está en la
|
||
portada.
|
||
|
||
## Cómo lo hacen otras
|
||
|
||
- Instagram, TikTok, X: el contenido es la portada. Abajo, cinco destinos fijos
|
||
(inicio, buscar, crear, vídeos, perfil). Lo demás vive en el perfil o en ajustes.
|
||
- WhatsApp, Signal, Telegram: pestañas con las tres o cuatro cosas que se usan
|
||
siempre. Lo demás, en un menú de tres puntos.
|
||
- Google Maps, Gmail y la guía de Material Design: una barra abajo con entre tres y
|
||
cinco destinos; si hay más, el último es "Más" y abre una hoja con el resto.
|
||
- El menú hamburguesa arriba a la izquierda (muy usado en 2012-2016) se ha ido
|
||
abandonando: lo que no se ve se usa menos, y arriba queda lejos del pulgar.
|
||
|
||
## Qué pedimos a la navegación
|
||
|
||
1. Al abrir, ver qué pasa (actividad), no un menú.
|
||
2. Llegar a cualquier módulo desde cualquier pantalla, en dos toques como mucho.
|
||
3. Que el sitio para hacerlo se vea sin explicarlo.
|
||
4. Que se alcance con el pulgar con el móvil en una mano.
|
||
5. No tapar contenido ni quitar sitio de pantalla.
|
||
|
||
## Opciones
|
||
|
||
| | Portada | Llegar a un módulo | Pulgar | Se ve | Comentario |
|
||
|---|---|---|---|---|---|
|
||
| A. Como ahora | Lanzador | Volver a portada y buscar | Medio | Sí, en portada | La actividad queda enterrada |
|
||
| B. Botón "Menú" bajo la barra de arriba | Actividad | 2 toques | Lejos (arriba) | Sí | La idea inicial; ocupa una fila arriba |
|
||
| C. "Menú" como quinta pestaña de abajo | Actividad | 2 toques | Cerca | Sí | Patrón "Más" de Android y de las apps grandes |
|
||
| D. Hamburguesa arriba | Actividad | 2 toques | Lejos | Poco | Lo que se esconde se usa menos |
|
||
|
||
## Recomendación
|
||
|
||
C: la portada pasa a ser la actividad, y la barra de abajo tiene siempre una quinta
|
||
pestaña, "Menú", que abre desde abajo una hoja con todos los módulos agrupados (el
|
||
mismo lanzador de ahora). Se cierra tocando fuera, con la X o volviendo a tocar Menú.
|
||
|
||
Es la idea de B, un botón que despliega las opciones, pero puesto donde llega el
|
||
pulgar y donde está el resto de la navegación. Funciona igual en todas las pantallas.
|
||
Está hecho con una casilla y CSS; un script mínimo hace que el botón atrás de Android
|
||
cierre la hoja en vez de cambiar de página.
|
||
|
||
## Lo que salió en la prueba (emulador, 19/10/2026)
|
||
|
||
- Portada a Tribus: dos toques (Menú, Tribus). Desde Foros a Votaciones: dos toques.
|
||
- En la primera versión la hoja dejaba ver 690 px y los módulos medían 1.200: Tribus
|
||
quedaba fuera. Con cinco iconos por fila y los grupos pequeños de dos en dos, los 20
|
||
módulos caben a 412 y a 360 px.
|
||
- Se cierra tocando fuera, con la X y volviendo a tocar Menú.
|
||
- Con la hoja abierta, atrás cambiaba de página. Ahora la cierra.
|
||
- Al volver atrás desde un módulo abierto desde la hoja, la portada salía con la hoja
|
||
abierta (la entrada del historial de la hoja seguía ahí). Ahora se quita antes de
|
||
ir al módulo: atrás lleva a la portada, cerrada.
|
||
|
||
## Tamaños y sistemas (19/10/2026)
|
||
|
||
| Dónde | Motor | Resultado |
|
||
|---|---|---|
|
||
| Pixel 9, Android 16, 412 dp, gestos y tres botones | WebView actual | Bien. APK real |
|
||
| 360 × 540 dp | WebView actual | La hoja se desliza; todo se alcanza |
|
||
| Tableta 800 dp | WebView actual | Contenido y hoja centrados a 720 y 640 px |
|
||
| Letra al 130 % | WebView actual | Bien |
|
||
| Pixel 3a, Android 9, 412 dp | WebView 69 | Tras los arreglos, bien (ver abajo) |
|
||
| 360 dp, Android 11 | Chrome/WebView 83 | Bien: 9 pantallas sin desbordar, 5 pestañas de 70 dp |
|
||
|
||
En Android 9 y 11 de emulador la APK no arranca: el node del dev es arm64 y el
|
||
traductor ARM de las imágenes x86 se para con una instrucción que no conoce (SIGILL).
|
||
Pasa igual con la APK oficial, así que no es de la rama. Se probó el motor con el
|
||
servidor local.
|
||
|
||
Lo que fallaba en WebView 69 y está arreglado:
|
||
|
||
- Fichas y filtros pegados unos a otros (no hay `gap` en flex): márgenes.
|
||
- La hoja del menú no se veía (no hay `inset` ni `dvh`): top/left/right/bottom y `vh`.
|
||
- Los grupos pequeños del menú se montaban (no hay `:has`): de dos en dos solo donde
|
||
hay `:has`; en el viejo, cada grupo a lo ancho.
|
||
- El botón No molestar quedaba encima de la hoja: ahora va por debajo de ella.
|
||
|
||
## Qué mirar en la prueba
|
||
|
||
- Desde la portada, cuántos toques hacen falta para llegar a Tribus, a Votaciones y a
|
||
Ajustes, y desde dentro de un foro.
|
||
- Si alguien que no conoce la app encuentra el menú sin que se lo digan.
|
||
- Si al volver atrás la hoja se queda abierta (no debería).
|
||
- Que la barra de cinco quepa a 360 px de ancho.
|