navegacion: al abrir, la actividad; los modulos en la pestaña Menu
docs/ESTUDIO_NAVEGACION.md compara cuatro formas de moverse por la app (lanzador en portada, boton de menu arriba, pestaña Menu abajo, hamburguesa) y se queda con la pestaña de abajo, el patron Mas de Android y de las apps grandes: al alcance del pulgar y en todas las pantallas. - la portada es la actividad; el lanzador ya no se pinta alli - quinta pestaña fija en la barra de abajo, Menu, que abre desde abajo una hoja con todos los modulos por secciones; se cierra con la X, tocando fuera o volviendo a tocar Menu. Sin JS: una casilla y CSS - textos en los 11 idiomas; caben cinco pestañas a 360px - capturas, portada y esquema de la interfaz al dia
|
Before Width: | Height: | Size: 280 KiB After Width: | Height: | Size: 305 KiB |
|
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 134 KiB |
|
Before Width: | Height: | Size: 159 KiB After Width: | Height: | Size: 160 KiB |
|
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 132 KiB After Width: | Height: | Size: 133 KiB |
|
Before Width: | Height: | Size: 109 KiB After Width: | Height: | Size: 110 KiB |
|
Before Width: | Height: | Size: 91 KiB After Width: | Height: | Size: 92 KiB |
|
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 105 KiB |
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 61 KiB |
|
|
@ -48,8 +48,8 @@ def portada():
|
|||
d.rectangle((80, bottom + 12, 420, bottom + 20), fill=FG)
|
||||
d.text((80, 196), "Rama PRUEBAS del hacklab · base Oasis 1.3.3 · tema Acampada, pensado para el pulgar",
|
||||
font=font(SANS, 27), fill=MUTED)
|
||||
shots = [("01-portada.png", "Lanzador de módulos"), ("02-tribus.png", "Tribus en filas"),
|
||||
("03-votacion.png", "Votar en semáforo"), ("07-oasismobile.png", "O el tema del dev")]
|
||||
shots = [("01-portada.png", "Actividad al abrir"), ("02-tribus.png", "Tribus en filas"),
|
||||
("03-votacion.png", "Votar en semáforo"), ("07-oasismobile.png", "El menú, tema del dev")]
|
||||
pw, gap, top = 320, 50, 270
|
||||
x = (W - (4 * (pw + 20) + 3 * gap)) // 2
|
||||
cap = font(ANTON, 34)
|
||||
|
|
@ -80,7 +80,7 @@ def esquema():
|
|||
d.text((46, 26), "LA INTERFAZ DE MÓVIL, POR DENTRO", font=font(ANTON, 46), fill=FG)
|
||||
bottom = d.textbbox((46, 26), "LA INTERFAZ DE MÓVIL, POR DENTRO", font=font(ANTON, 46))[3]
|
||||
d.rectangle((46, bottom + 10, 260, bottom + 16), fill=FG)
|
||||
d.text((46, bottom + 30), "Casi sesenta módulos no caben en una pantalla de teléfono. Se reparten en tres piezas.",
|
||||
d.text((46, bottom + 30), "Casi sesenta módulos no caben en una pantalla de teléfono. Lo primero es lo que pasa; el resto, en el menú.",
|
||||
font=font(SANS, 18), fill=MUTED)
|
||||
|
||||
# el movil esquematico
|
||||
|
|
@ -89,21 +89,19 @@ def esquema():
|
|||
d.rounded_rectangle((px0 + 16, py0 + 20, px1 - 16, py0 + 84), 14, fill=BG, outline=FG, width=3)
|
||||
s = font(SANS, 15)
|
||||
d.text((px0 + 46, py0 + 42), "logo · no molestar · avatar", font=s, fill=FG)
|
||||
secciones = [("COMUNIDAD", 8), ("BIBLIOTECA", 2), ("GOBERNANZA", 2)]
|
||||
# en medio, la actividad: lo que ha pasado en la red
|
||||
y = py0 + 110
|
||||
for nombre, n in secciones:
|
||||
d.text((px0 + 40, y), nombre, font=font(ANTON, 17), fill=FG)
|
||||
d.line((px0 + 40, y + 26, px1 - 40, y + 26), fill=FG, width=3)
|
||||
y += 38
|
||||
for i in range(n):
|
||||
cx = px0 + 48 + (i % 4) * 76
|
||||
if i and i % 4 == 0:
|
||||
y += 62
|
||||
d.rounded_rectangle((cx, y + 4, cx + 48, y + 52), 12, fill=FG)
|
||||
d.rounded_rectangle((cx, y, cx + 48, y + 48), 12, fill=BG, outline=FG, width=3)
|
||||
y += 72
|
||||
d.text((px0 + 40, y), "ACTIVIDAD", font=font(ANTON, 22), fill=FG)
|
||||
d.line((px0 + 40, y + 32, px1 - 40, y + 32), fill=FG, width=3)
|
||||
y += 52
|
||||
for i in range(4):
|
||||
d.rounded_rectangle((px0 + 40, y, px1 - 40, y + 86), 12, fill=BG, outline=FG, width=3)
|
||||
d.rectangle((px0 + 56, y + 18, px0 + 150, y + 30), fill=FG)
|
||||
d.rectangle((px0 + 56, y + 44, px1 - 70, y + 52), fill=MUTED)
|
||||
d.rectangle((px0 + 56, y + 62, px1 - 120, y + 70), fill=MUTED)
|
||||
y += 104
|
||||
d.rounded_rectangle((px0 + 16, py1 - 84, px1 - 16, py1 - 20), 14, fill=NEON, outline=FG, width=3)
|
||||
d.text((px0 + 92, py1 - 62), "barra: 4 atajos que eliges tú", font=s, fill=FG)
|
||||
d.text((px0 + 62, py1 - 62), "4 atajos que eliges tú · MENÚ", font=s, fill=FG)
|
||||
|
||||
bx0, bx1 = 560, 1320
|
||||
cajas = [
|
||||
|
|
@ -111,15 +109,14 @@ def esquema():
|
|||
["El logo vuelve al inicio y el avatar abre tu perfil.",
|
||||
"En medio, el botón de No molestar del Teléfono.",
|
||||
"Con muchos módulos activos salen también los filtros Personal y Social."], BG),
|
||||
((bx0, 375, bx1, 565), "EN MEDIO — EL LANZADOR",
|
||||
["Los módulos activos en una rejilla de iconos, por secciones,",
|
||||
"como el cajón de apps del móvil. Los nombres son los del Oasis",
|
||||
"oficial: Comunidad, Biblioteca, Gobernanza…",
|
||||
"Solo en la pantalla de inicio; dentro de cada módulo, filtros en fichas."], BG),
|
||||
((bx0, 600, bx1, 750), "ABAJO — LOS ATAJOS",
|
||||
["Cuatro módulos a tu elección: ni uno más, que es para el pulgar.",
|
||||
"Se cambian en Herramientas → Tu barra. La elección se guarda",
|
||||
"en tu nodo, así que sigue ahí después de cerrar la aplicación."], NEON),
|
||||
((bx0, 375, bx1, 565), "EN MEDIO — LA ACTIVIDAD",
|
||||
["Al abrir la app se ve lo que ha pasado en la red, no un menú.",
|
||||
"Dentro de cada módulo, los filtros van en fichas pequeñas",
|
||||
"y el botón principal (crear tribu, crear sala…) siempre igual."], BG),
|
||||
((bx0, 600, bx1, 750), "ABAJO — LOS ATAJOS Y EL MENÚ",
|
||||
["Cuatro atajos a tu elección y una quinta pestaña fija, Menú,",
|
||||
"que abre desde abajo una hoja con todos los módulos por secciones",
|
||||
"(Comunidad, Biblioteca, Gobernanza…). Está en todas las pantallas."], NEON),
|
||||
]
|
||||
flechas = [((px1 + 10, py0 + 52), (bx0 - 12, 262)), ((px1 + 10, 440), (bx0 - 12, 470)),
|
||||
((px1 + 10, py1 - 52), (bx0 - 12, 675))]
|
||||
|
|
|
|||