Desarrolladores

Si vas a construir un sitio, trámite o aplicación para una institución pública, esta página reúne lo que necesitas para partir. El sistema entrega un framework CSS, un conjunto de tokens y componentes ya resueltos en accesibilidad, para que no tengas que implementar desde cero cada elemento de interfaz.

Adoptar el sistema reduce el código propio que debes mantener y traslada al framework la responsabilidad de la consistencia visual y del cumplimiento de los criterios de accesibilidad.

1. Entiende el sistema antes de instalar

• Acerca del sistema: qué es, para qué sirve y cómo se aplica en proyectos de gobierno.
• Gobernanza: quién decide, cómo se proponen cambios y cómo se incorporan nuevos componentes.
• Glosario: lenguaje común para conversar con diseño, contenido y contraparte institucional.

2. Instala el framework

La sección de Desarrollo contiene la documentación técnica del Framework Kit de Gobierno.

• Primeros pasos: instalación vía CDN o NPM, carga de tipografías y dependencias.
• Changelog: versiones publicadas y cambios entre releases.

Antes de escribir código: verifica el orden de carga de los estilos y dependencias. El framework se basa en Bootstrap 4, por lo que requiere jQuery, Popper.js y Bootstrap cargados en el orden correcto.

3. Consume los tokens, no los valores

Los tokens de diseño se distribuyen como custom properties de CSS. Úsalos siempre en lugar de valores literales.

.ejemplo {
  padding: var(--spacing-4);
  border-radius: var(--radius-m);
  color: var(--color-text-base-subtle);
}

Revisa también los fundamentos que originan esos valores:

• Color: paletas y escalas del sistema.
• Tipografía: escala tipográfica y pesos.
• Espaciado: escala base de 4 píxeles.
• Grilla: estructura de columnas y breakpoints.

Regla práctica: si necesitas un valor que no existe como token, es una señal para discutirlo con el equipo del sistema, no para escribirlo directamente en el componente.

4. Implementa con los componentes existentes

El catálogo de componentes documenta el markup exacto de cada pieza, con sus clases BEM y atributos de accesibilidad.

Componentes de uso frecuente:

• Formularios: text field, text area, select, checkbox, radio button, switch, file input, otp input.
• Acción y navegación: button, breadcrumb, tabs, pagination, stepper, navigation drawers.
• Retroalimentación: alerts, snackbar, progress, modal dialog, tooltips.
• Estructura: header, footer, cards, table, item list.

Copia el markup documentado tal cual. Los atributos role, aria-* y scope no son decorativos: son parte del contrato de accesibilidad del componente.

5. Resuelve los flujos con patrones

Los patrones combinan varios componentes para resolver flujos completos.

• Clave Única: integración del sistema de autenticación del Estado.

6. Verifica la accesibilidad en el código

La accesibilidad se define en diseño, pero se pierde o se conserva en la implementación.

• Accesibilidad y asistencia digital: criterios generales.
• Mejores prácticas WCAG: pautas WCAG 2.2.
• Herramientas de validación: validadores automáticos y manuales.

Checklist mínimo de implementación:

• HTML semántico: usa button, nav, main y table según su función real.
• Jerarquía de encabezados sin saltos de nivel.
• Todo control operable con teclado y con foco visible.
• Etiquetas asociadas a cada campo mediante for e id.
• Errores de formulario anunciados a tecnologías de asistencia.
• Imágenes con alt descriptivo, o alt="" cuando son decorativas.
• Validación automática complementada con navegación por teclado y lector de pantalla.

7. Cuida el rendimiento y la privacidad

• Aloja fuentes y assets en tu propio servidor en vez de cargarlos desde CDN de terceros.
• Revisa Analítica web y Privacidad y cumplimiento antes de incorporar scripts de medición.
• Considera las condiciones reales de conectividad y los dispositivos de las personas usuarias.

8. Mide y mejora

• Instrumentos de evaluación: criterios y checklists para revisar el servicio.
• Herramientas de analítica: qué medir y con qué instrumentos.
• Recursos: documentación técnica, herramientas y referencias externas.

Cuando necesitas algo que no existe

1. Verifica que realmente no exista un componente equivalente en el catálogo.
2. Documenta el caso de uso y por qué las alternativas actuales no funcionan.
3. Propón la mejora a través de los canales de Soporte.
4. Mientras se evalúa, construye la solución respetando los tokens y los criterios de accesibilidad del sistema.

Evita bifurcar el framework. Un componente propio que replica uno existente se convierte en deuda técnica apenas se publica una nueva versión.

Conecta con otros equipos de desarrollo

Comparte implementaciones, aprendizajes y dudas con equipos de otras instituciones en la sección de Comunidad.