Administración pública y servicios públicos · Nuevo recurso
Sistema de diseño DSFR.
Comprende la tipografía, la cuadrícula y el componente de acordeón API concretos del sistema del Estado francés dentro de su ámbito institucional. Compara los comportamientos de divulgación vinculados e independientes en un ejemplo educativo claramente neutral.
Interpretación neutral original de HTML/CSS/JavaScript de la estructura documentada del acordeón. No incluye recursos oficiales de DSFR ni su identidad visual estatal. · Referencia de implementación
02
Referencia de diseño del sistema de diseño DSFR
Documentación oficial de DSFR v1.15 y metadatos verificados del paquete @gouvfr/dsfr 1.15.3. Estos son valores de referencia oficiales; la vista previa neutral muestra la estructura de interacción sin usar la identidad visual estatal.
DSFR es el sistema de diseño del Estado francés. Las condiciones oficiales vigentes lo destinan a los servicios .gouv.fr y las aplicaciones móviles estatales, y distinguen a los usuarios y operadores estatales de las organizaciones externas. Se trata de un límite sustancial de adopción, no de una nota al pie que pueda eliminarse ocultando un logotipo.
Los equipos aptos deben seguir el proceso oficial de aprobación e implementación de proyectos. Un producto sin relación con el Estado puede estudiar la arquitectura de la información documentada y los criterios de accesibilidad sin presentarse como parte de la identidad del Estado francés. La vista previa de esta página es un ejercicio original y neutral sobre acordeones: no carga estilos, fuentes ni scripts de DSFR.
Referencia tipográfica oficial del sistema de diseño DSFR
Usos de Marianne y fuentes alternativas
La documentación tipográfica identifica Marianne y Spectral, con Arial y Georgia como fuentes alternativas, respectivamente. El texto estándar del cuerpo usa 16px/24px; el texto de artículos, 18px/28px. El H1 cambia de 32px/40px en móviles a 40px/48px en escritorio. Estos valores describen el sistema oficial, mientras que la demostración utiliza un tratamiento tipográfico neutral propio.
Las clases de tamaño de texto no sustituyen los niveles semánticos de los encabezados. Mantén el título de la página como h1 y asigna a cada título de acordeón el nivel adecuado. No uses un estilo visual más grande para saltarte niveles en la estructura del documento.
Los umbrales adaptables están definidos explícitamente
La referencia de cuadrícula define SM en 576px, MD en 768px, LG en 992px y XL en 1248px. El ancho máximo del contenido es de 1200px. Los márgenes internos son opcionales: 16px en los tamaños más pequeños y 24px a partir de LG. La cuadrícula de código no incluye márgenes internos de forma predeterminada; tenlo en cuenta al trasladar una cuadrícula de Figma al marcado.
El espaciado se basa en múltiplos de 4px, con excepciones documentadas de −6px, −2px, 2px y 6px. Por tanto, una clase de espaciado representa un sistema controlado, no una autorización para inventar desplazamientos arbitrarios. La vista previa neutral usa una columna de lectura independiente y no pretende reproducir la cuadrícula oficial.
Estructura del acordeón del sistema de diseño DSFR
Encabezado, control y panel asociado
El componente documentado contiene un section.fr-accordion, un encabezado.fr-accordion__title, un button.fr-accordion__btn y un div.fr-collapse a continuación. El valor aria-controls del botón debe coincidir con el id del panel; aria-expanded indica si está abierto. El nivel del encabezado depende de la estructura que lo rodea.
El panel contiene elementos de texto adecuados, como párrafos y listas. DSFR JavaScript nativo gestiona la clase de expansión; una aplicación apta no debe añadir un segundo controlador de clics independiente que interfiera con el componente. La vista previa neutral implementa su propio estado explícito de apertura y cierre para facilitar la comparación didáctica.
Acordeones agrupados o independientes del sistema de diseño DSFR
La configuración del grupo modifica el comportamiento
De forma predeterminada, fr-accordions-group vincula los elementos: al abrir uno, se cierra el otro que estuviera abierto. Con data-fr-group="false", se pueden mantener abiertos varios paneles. El ejemplo muestra ambos modos para que se puedan comparar sus efectos al consultar información relacionada.
Esta distinción es importante en las instrucciones de preparación. Alguien que consulte una lista de documentos quizá necesite mantener abierto a la vez un panel con una dirección. Un grupo que solo permite abrir un elemento conserva espacio, pero oculta el contexto repetidamente. Elige el modo según la tarea, en lugar de tratar el valor predeterminado como una norma editorial.
La página de accesibilidad va más allá del comportamiento predeterminado en tiempo de ejecución: recomienda usar grupos independientes de forma predeterminada, ya que los grupos vinculados pueden dificultar la usabilidad. Por eso, el ejemplo comienza en modo independiente.
El modo independiente permite comparar dos secciones a la vez.
El modo vinculado limita la pantalla a una sola sección expandida.
Al cambiar de modo, el estado interno de aria-expanded debe seguir siendo coherente.
Sistema de diseño de DSFR: qué debe permanecer visible
No ocultes el paso esencial
Las directrices del componente recomiendan usar acordeones para contenido extenso, opcional o relevante solo para algunas personas. Desaconsejan ocultar información que todos deben leer, usar acordeones para contenido muy breve, anidar controles complejos o incluirlos en un cuadro de diálogo modal.
Por ello, el ejemplo mantiene visibles su propósito y sus controles. Solo se pliegan las notas opcionales sobre el acceso a la sala, la lista de materiales y la explicación de la llegada. Cada encabezado plantea una pregunta distinta, y el contenido desplegado usa párrafos breves y listas, en lugar de un segundo flujo de interacción.
Mantén la instrucción principal fuera del acordeón.
Divide el material complementario según las preguntas de quien lo lee, no por una longitud arbitraria.
Usa un párrafo normal cuando la sección contenga solo una respuesta breve.
Sistema de diseño de DSFR: inspección del teclado y del estado
Comprueba la estructura antes de la decoración
Cada control de vista previa neutro es un botón real, por lo que Enter y Espacio activan el botón mediante el navegador. El script modifica tanto aria-expanded como el estado oculto del panel asociado. Al cerrar el panel, nunca elimina el control, y el foco permanece en el botón activado.
El selector de modo permite comparar al instante los comportamientos independiente y vinculado. Un pequeño indicador de estado visible enumera los paneles abiertos; es una ayuda didáctica del ejemplo, no un componente oficial de DSFR. En pantallas estrechas, los títulos se ajustan en varias líneas y el botón conserva todo el ancho disponible.
La página oficial de accesibilidad también documenta contrastes insuficientes al pasar el cursor en el tema oscuro y limitaciones concretas en los anuncios para lectores de pantalla y navegadores. No des por sentada la accesibilidad completa por usar el componente sin modificarlo; revisa esas limitaciones conocidas para la versión y el entorno en los que se implementará.
Integración en proyectos habilitados para el sistema de diseño de DSFR
Carga las dependencias del núcleo y del componente
La página oficial del código enumera las dependencias CSS del núcleo y del acordeón, además de los scripts de módulos del núcleo y del acordeón. Una vez cargados, el entorno de ejecución mejora automáticamente el marcado documentado. Su API público permite desplegar un panel mediante dsfr(element).collapse.disclose() después de la inicialización.
La guía de instalación proporcionada es para un proyecto institucional habilitado. Se ha verificado con las fuentes, pero no se ha ejecutado en esta vista previa neutra, que intencionadamente no depende del entorno de ejecución de DSFR. Al actualizar, los equipos de producción deben mantener juntos la estructura oficial de directorios de recursos, el marcado del componente y las condiciones de uso vigentes.
El documento completo incluye su estructura, controles e inicialización. Extrae el archivo de ejemplo enlazado para obtener los recursos del proveedor con sus rutas relativas exactas y luego sírvelo mediante HTTP.
HTML
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Accordion structure laboratory</title><style>*{box-sizing:border-box}body{margin:0;font:16px/1.6 Arial,sans-serif;color:#28251f;background:#faf9f6}main{max-width:54rem;margin:auto;padding:32px 24px}.notice{background:#eee9df;border-left:4px solid #6b573d;padding:16px}h1{font:700 32px/1.3 Georgia,serif;margin:24px 0}h2{font-size:18px;margin:0}.mode{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:24px 0}select{font:inherit;padding:10px;background:white;border:1px solid #777}section{border-bottom:1px solid #aaa18f}.trigger{font:700 18px/1.5 Arial,sans-serif;border:0;background:transparent;color:inherit;display:flex;justify-content:space-between;gap:16px;text-align:start;padding:20px 8px;width:100%;cursor:pointer}.trigger::after{content:'+'}.trigger[aria-expanded=true]::after{content:'−'}.panel{padding:0 24px 24px}.panel p{margin-top:0}:focus-visible{outline:3px solid #6b573d;outline-offset:3px}#state{font-size:14px;background:#eee9df;padding:12px;margin-top:24px}small{display:block;margin-top:24px;color:#625a4e;font-size:14px}[hidden]{display:none!important}@media(max-width:600px){main{padding:24px 16px}h1{font-size:28px}.panel{padding-inline:8px}}</style><main><div class="notice">Neutral interaction study · No DSFR visual identity or assets</div><h1>Prepare for a community workshop</h1><p>The purpose and main instruction stay visible: arrive with your booking note. Optional supporting details can be opened below.</p><div class="mode"><label for="mode">Panel behaviour</label><select id="mode"><option value="independent">Independent: compare sections</option><option value="linked">Linked: one section at a time</option></select></div><div id="group"><section><h2><button type="button" class="trigger" aria-expanded="false" aria-controls="access">Room access</button></h2><div class="panel" id="access" hidden><p>The fictional workshop room is reached from the courtyard. The step-free entrance is on the same level as the activity room.</p><p>Ask the example welcome desk for assistance if the courtyard route is unavailable. These are demonstration instructions, not a real venue guide.</p></div></section><section><h2><button type="button" class="trigger" aria-expanded="false" aria-controls="equipment">Equipment to bring</button></h2><div class="panel" id="equipment" hidden><p>The example workshop uses simple paper materials. Bring the following if convenient:</p><ul><li>A notebook for your own observations.</li><li>A pencil or pen you can use comfortably.</li><li>Your fictional booking reference.</li></ul></div></section><section><h2><button type="button" class="trigger" aria-expanded="false" aria-controls="arrival">What happens on arrival</button></h2><div class="panel" id="arrival" hidden><p>The example facilitator explains the activity before participants choose a seat. No personal information is collected by this demonstration.</p><p>Keep this panel open with the equipment list to compare the two instructions in independent mode.</p></div></section></div><p id="state" role="status">Open sections: none</p><small>Original OpenDesign educational specimen. DSFR documentation informs the structural comparison; this is not a government service or native DSFR rendering.</small></main><script>const buttons=[...document.querySelectorAll('.trigger')],mode=document.querySelector('#mode');function set(b,open){b.setAttribute('aria-expanded',String(open));document.getElementById(b.getAttribute('aria-controls')).hidden=!open}function announce(){const names=buttons.filter(b=>b.getAttribute('aria-expanded')==='true').map(b=>b.textContent);document.querySelector('#state').textContent='Open sections: '+(names.join(', ')||'none')}buttons.forEach(b=>b.onclick=()=>{const open=b.getAttribute('aria-expanded')!=='true';if(open&&mode.value==='linked')buttons.forEach(x=>set(x,false));set(b,open);announce()});mode.onchange=()=>{if(mode.value==='linked'){let retained=false;buttons.forEach(b=>{if(b.getAttribute('aria-expanded')==='true'){if(retained)set(b,false);retained=true}})}announce()};</script></html>
Descarga el ejemplo completo desde Fuentes. El README contiene el comando exacto para ejecutarlo en local.
Mantén las rutas de los recursos del proveedor relativas a este documento; el archivo incluye todos los recursos que utiliza esta vista previa.
04
Configuración del agente de IA para el sistema de diseño de DSFR
Punto de partida para la implementación
Instalación para proyectos habilitados, verificada con las fuentes; no se ejecuta en la vista previa neutra. Respeta el ámbito institucional y las condiciones oficiales vigentes. Copia el directorio dist para que los recursos dependientes conserven sus rutas relativas. El ZIP completo del ejemplo funcional, disponible en Fuentes, también incluye las dependencias exactas de la vista previa y el documento completo. Descomprímelo, ejecuta python3 -m http.server 8080 en ese directorio y abre http://localhost:8080/dsfr.html. No abras ejemplos basados en módulos mediante file://.
bash
# For a project within the documented DSFR institutional scope:
npm install @gouvfr/[email protected]
# Copy node_modules/@gouvfr/dsfr/dist to your public asset directory.
# In <head>:
# <link rel="stylesheet" href="/dsfr/core/core.min.css">
# <link rel="stylesheet" href="/dsfr/component/accordion/accordion.min.css">
# Before </body>:
# <script type="module" src="/dsfr/core/core.module.min.js"></script>
# <script type="module" src="/dsfr/component/accordion/accordion.module.min.js"></script>
Una instrucción para tu proyecto
Instrucción para el agente
Explica la estructura y el ámbito del acordeón de DSFR. Para un proyecto estatal habilitado, usa fr-accordion, fr-accordion__title, fr-accordion__btn y fr-collapse con ids y aria-controls coincidentes, recursos del núcleo y del acordeón, y data-fr-group=false cuando las comparaciones requieran que haya varias secciones abiertas. Para una vista previa educativa independiente, usa un estilo neutro original e indica claramente que es una interpretación estructural; no cargues las fuentes tipográficas de la identidad estatal ni afirmes que se trata de un servicio oficial.
05
Fuentes y ámbito del sistema de diseño de DSFR
DSFR tiene un ámbito de uso institucional documentado. Esta página es una referencia técnica y su vista previa neutra original no es un servicio del Gobierno francés ni una implementación con la identidad de DSFR.
