01
Bandeja con el estado a la vista
Todos los avisos del municipio, filtrables por estado. Cada tarjeta dice de qué va, dónde está y en qué punto se encuentra, sin abrir nada.
Demo interactiva · App municipal
Una app de avisos ciudadanos que puedes probar aquí mismo.
El vecino comunica una incidencia con foto y ubicación, recibe un número de registro y sigue en qué punto está. Pruébala aquí mismo: funciona en el navegador, sin instalar nada.
Es una demo real y funciona con el ratón o el dedo. Si se te queda pequeña, ábrela a pantalla completa.
TecnologíaHTML, CSS y JavaScript
PlataformasiOS, Android y web
AccesibilidadWCAG 2.2 nivel AA
Base de códigoUna sola, tres destinos
Qué hace
Tres pantallas y ningún paso de más.
La mayoría de apps municipales fallan por lo mismo: piden registro antes de dejarte hacer nada, esconden el estado del aviso y no funcionan con una mano en la calle. Esta va al revés.
02
Enviar en cuatro pasos
Categoría, qué ocurre, dónde y foto opcional. La ubicación se puede tomar del GPS del móvil o escribirse a mano si el vecino prefiere no darla.
03
Seguimiento con fechas
Número de registro y línea de tiempo: cuándo entró, quién lo valoró, cuándo se abrió la orden de trabajo y cuándo se cerró.
Accesibilidad
Lo que un informe de conformidad va a mirar.
Una app de una administración pública está sujeta al Real Decreto 1112/2018 y a la norma EN 301 549. Eso no se resuelve al final con un plugin: son decisiones que se toman mientras se construye cada pantalla.
Estas son las de esta demo, y todas se pueden comprobar en el propio código.
El estado nunca se dice solo con color
Cada etiqueta de estado lleva su texto además del color. Es el criterio 1.4.1, el que más se incumple en paneles de seguimiento.
Contraste verificado, no estimado
Todas las combinaciones de texto y fondo se midieron sobre la app ya construida. Dos grises no llegaban a 4,5:1 y se corrigieron.
Errores que se anuncian y llevan al campo
Si el formulario falla, aparece un resumen que el lector de pantalla lee en voz alta y el foco salta al primer campo que hay que corregir.
Semántica real, no cajas apiladas
Encabezados con su nivel, grupos de opciones anunciados como tal («opción 3 de 8») y cada tarjeta como un único elemento con todo su contexto.
Objetivos táctiles de 48 píxeles
WCAG 2.2 pide 24. Aquí se usa 48, incluido el botón de volver de la cabecera, que de serie venía a 30.
Teclado, idioma y movimiento
Contorno de foco visible para quien navega con tabulador, la página declara español y se respeta la preferencia del sistema de reducir animaciones.
Cómo está hecha
Un prototipo que se usa, no una captura.
Es un prototipo interactivo hecho con HTML, CSS y JavaScript, sin librerías: se descargan menos de 20 KB y abre al instante en cualquier móvil. Usa el GPS y la cámara del propio navegador, y lo que envías se guarda solo en tu dispositivo.
Sirve para decidir pantallas, textos y flujo con el ayuntamiento antes de programar la app definitiva, que yo haría con React Native para publicarla en App Store y Google Play con la misma base de código.
HTML
CSS
JavaScript sin dependencias
Geolocalización del navegador
Cámara del móvil
WCAG 2.2 AA
“Si la demo no se puede tocar desde el móvil del cliente, no es una demo: es una captura de pantalla con más pasos.”
Qué es y qué no
Hasta dónde llega esta demo.
Es una maqueta funcional, no un servicio en producción
El municipio es ficticio y los avisos que envías se guardan solo en tu navegador; puedes borrarlos desde la propia demo. No se envía nada a ninguna administración. Para una implantación real haría falta añadir:
- Backend con registro de entrada y numeración oficial
- Identificación del ciudadano (Cl@ve o similar) cuando el trámite lo exija
- Panel interno para los servicios técnicos y las contratas
- Mapa con capas municipales y avisos duplicados
- Notificaciones push al cambiar el estado
- Información de protección de datos y política de conservación
¿Necesitas algo así para tu ayuntamiento o tu empresa?
Cuéntame qué proceso quieres llevar al móvil y para quién. Te digo si encaja como app nativa, como app web o como las dos, y con qué alcance conviene empezar.