anarcoop
Sep 22, 2025
Hace unos meses colaboramos con AMARC México para implementar el micrositio de la campaña Nuestras Voces Cuentan, un espacio que reúne testimonios, materiales descargables y cápsulas multilingües para promover los derechos político-electorales de mujeres indígenas y afromexicanas, y visibilizar/denunciar la VPMRG, desde un enfoque intercultural e interseccional. El sitio está publicado en el dominio de AMARC: amarcmexico.org/nuestras-voces-cuentan/.
👉 Visítalo: https://amarcmexico.org/nuestras-voces-cuentan/
Arquitectura y stack
Optamos por una arquitectura estática y ligera, priorizando velocidad, accesibilidad y baja huella de datos:
- HTML semántico para estructura clara y mejor indexación.
- CSS responsivo (mobile-first) con utilidades propias para tipografía, grillas y componentes.
- JavaScript vanilla enfocado en:
- Controles de audio (play/pausa, progreso, accesibilidad por teclado).
- Navegación y pequeños realces de UI sin dependencias pesadas.
- Matomo para métricas respetuosas con la privacidad (ver más abajo).
La toma de decisiones buscó reducir dependencias y scripts de terceros, manteniendo el control sobre identidad visual, contenidos y datos.
Contenidos clave
- Secciones informativas sobre objetivos y alcance de la campaña.
- Páginas por lengua que alojan testimonios y materiales (por ejemplo, Español, Tseltal, Mazateco), cada una con reproductores de audio integrados y textos introductorios breves.
- Materiales descargables (guías y recursos impresos) enlazados desde el propio micrositio.
Estas páginas temáticas y multilingües permiten que cada comunidad acceda a la información en su propio idioma y formato (audio/texto/descarga).
Identidad visual
Se mantuvo una línea visual limpia para destacar a las voces y sus territorios:
- Jerarquías tipográficas claras (títulos, bajadas y cuerpo).
- Paleta sobria con énfasis en contraste y legibilidad.
- Componentes reutilizables (cards, listas de materiales, reproductores) para coherencia en todo el sitio.
Accesibilidad
- HTML semántico + atributos ARIA en botones de audio.
- Teclado primero: los controles del player y la navegación funcionan sin ratón.
- Contraste suficiente y tamaños de fuente legibles.
- Peso de página contenido para conexiones limitadas.
Métricas con Matomo (privacidad y soberanía de datos)
Para analítica elegimos Matomo, que permite configuraciones sin cookies y sin identificadores personales, útiles cuando se busca cumplir normativa y, al mismo tiempo, no perfilar a la audiencia. Ventajas:
- Posibilidad de operar sin pedir consentimiento cuando no se colocan cookies ni se recolectan datos personales.
- Propiedad de los datos y despliegue auto-hospedado.
Ejemplo de inserción (simplificado) del tag de Matomo:
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
_paq.push(['disableCookies']); // sin cookies
_paq.push(['anonymizeIp']); // anonimiza IP
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//metrics.anar.coop/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']); // ID del sitio
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<noscript><p><img src="//metrics.anar.coop/matomo.php?idsite=1&rec=1" style="border:0;"
alt=""/></p></noscript>
<!-- End Matomo Code -->
En Anarcoop no trabajamos con instituciones estatales ni con dependencias como el INE. Esta colaboración fue directamente con AMARC México, desde un enfoque de autonomía y comunicación comunitaria.