# design system de l'Etat <img width="150" src="custom/img/matchID-logo-square.svg"> <br> <span class="rf-text--lg"> application (v0.2.0) au site <a href="https://deces.matchid.io">deces.matchid.io</a> <br> 26 novembre 2020 <br> Fabien ANTOINE, ministère de la Justice </span>

# Le service <img width="150" src="custom/img/matchID-logo-square.svg"> <br> <span class="rf-text--lg"> <a href="https://deces.matchid.io">deces.matchid.io</a> <br> moteur de recherche des décès </span>

## deces.matchid.io <div class="rf-text">moteur de recherche des décès</div> <br> <div style="overflow: hidden;"> <iframe scrolling="no" style="margin-top: -200px;" class="rf-iframe--small rf-iframe--no-header" src="https://deces.matchid.io/search" allowfullscreen/> </div>

## D'où vient l'idée ? <div class="rf-container"> <div class="rf-grid-row rf-grid-row--gutters"> <div class="rf-col-xs-12 rf-col-xl-6"> <div class="rf-tile"> <div class="rf-tile__body"> <span class="rf-logo rf-logo--lg rf-text--left" title="République Française"> <span class="rf-logo__title"> Ministère<br>de l'Intérieur </span> </span> <h4 class="rf-tile__title">début 2017...</h4> <p class="rf-title__desc"> au "MI", le projet matchID réalise en POC un moteur de recherche des décès avec le fichier INSEE, alors en accès restreint </p> </div> </div> </div> <div class="rf-col-xs-12 rf-col-xl-6"> <div class="rf-tile"> <div class="rf-tile__body"> <img height="100px" width="100px" data-src="custom/img/logo_insee.svg" alt="logo Insee"> <h4 class="rf-tile__title">... fin 2019</h4> <p class="rf-tile__desc"> sur demande de la CADA, l'INSEE publie l'ensemble des 25 millions d'enregistrements de décès depuis 1970 <a href="https://www.data.gouv.fr/fr/datasets/fichier-des-personnes-decedees/)">data.gouv</a> </p> </div> </div> </div> </div> </div> <div class="rf-hide-mobile-background"></div>

<div class="rf-container"> <div class="rf-grid-row rf-grid-row--gutters"> <div class="rf-col-md-12 rf-col-xl-6"> <h2>pour qui</h2> <div class="rf-container-fluid"> <div class="rf-grid-row rf-grid-row--gutters"> <div class="rf-col-6"> <div class="rf-tile"> <div class="rf-tile__body"> <h4 class="rf-tile_title"> les particuliers </h4> <p class="rf-title__desc"> les familles<br> les généalogistes<br> </p> </div> </div> </div> <div class="rf-col-6"> <div class="rf-tile"> <div class="rf-tile__body"> <h4 class="rf-tile_title"> les professionnels </h4> <p class="rf-tile__desc"> associations médecins, hôpitaux préfectures, police </p> </div> </div> </div> </div> </div> </div> <div class="rf-col-md-12 rf-col-xl-6"> <h2> pour quoi ? </h2> <div class="rf-container-fluid"> <div class="rf-grid-row"> <div class="rf-col-6"> <div class="rf-tile"> <div class="rf-tile__body"> <h4 class="rf-tile_title"> recherche libre </h4> <p class="rf-tile__desc"> simple avancée géographique </p> </div> </div> </div> <div class="rf-col-6"> <div class="rf-tile"> <div class="rf-tile__body"> <h4 class="rf-tile_title"> appariement </h4> <p class="rf-tile__desc"> droit à l'oubli / RGPD fiabilisation fichiers études scientifiques </p> </div> </div> </div> </div> </div> </div> </div> </div>

## Fréquentation du site <div style="overflow: hidden;"> <iframe scrolling="no" style="margin-top: -195px;height:700px;" class="rf-iframe--small rf-iframe--no-header" src="https://deces.matchid.io/stats" allowfullscreen/> </div>

# Travaux d'intégration <br> <img width="75" src="custom/img/Svelte_Logo.svg"> <br> <span class="rf-text--lg"> Design system de l'État <br> au sein d'une SPA en Svelte.js </span>

## Contexte <div class="rf-container"> <div class="rf-grid-row rf-grid-row--gutters"> <div class="rf-col-4"> <div class="rf-tile"> <div class="rf-tile__body"> <h4 class="rf-tile_title"> sites de la Justice </h4> <p class="rf-title__desc"> opportunité d'utiliser le dsfr l'usage pour la refonte d'ensemble (justice.gouv.fr), site des tribunaux, ... </p> </div> </div> </div> <div class="rf-col-4"> <div class="rf-tile"> <div class="rf-tile__body"> <h4 class="rf-tile_title"> Diffusion au SI Justice ? </h4> <p class="rf-tile__desc rf-text--left rf-margin-left-3N"> - maturité ?<br> - évaluation d'impact ?<br> - démarche ? <br> </p> </div> </div> </div> <div class="rf-col-4"> <div class="rf-tile"> <div class="rf-tile__body"> <h4 class="rf-tile_title"> premier pas </h4> <p class="rf-tile__desc rf-text--left rf-margin-left-2N"> deces.matchid.io: <br> - SPA en Svelte.js (API node.js)<br> - CSS : Bulma<br> - Icones: FontAwesome <br> </p> </div> </div> </div> </div> </div>

## Les adaptations (~40h) <div class="rf-container"> <div class="rf-grid-row rf-grid-row--gutters"> <div class="rf-col-xs-12 rf-col-xl-6"> <div class="rf-tile"> <div class="rf-tile__body"> <h4 class="rf-tile__title">Composants CSS</h4> <p class="rf-title__desc"> <ul class="rf-text--sm"> <li> Menu (position burger)</li> <li> Icones : svg, cartes, menus </li> <li> Spinner </li> <li> Cartes dépliables </li> <li> Progress bar </li> <li> Tables </li> <li> Charts : orientations de design ?? </li> </ul> <br> <ul class="rf-text--sm"> <li><strong>109 classes css rf- complétées</strong></li> <li><strong>390 classes css custom supprimés</strong></li> </ul> </p> </div> </div> </div> <div class="rf-col-xs-12 rf-col-xl-6"> <div class="rf-tile"> <div class="rf-tile__body"> <h4 class="rf-tile__title">Intégration JS</h4> <p class="rf-title__desc"> <ul class="rf-text--sm"> <li> Acces clavier (reactivité svelte) </li> <li> Icônes hors fonte / Iconify </li> <li> Menu/Burger </li> <li> Pagination </li> <li> Accordéon avec composants JS </li> <li> Icône "progrès" </li> <li> Fonte Marianne dans Chart.js </li> </ul> <ul class="rf-text--sm"> <li><strong>1390 (76%) lignes html modifiées </strong></li> <li><strong>330 (9%) lignes js de l'UI modifiées </strong></li> </ul> </p> </div> </div> </div> </div> </div>

## Synthèse <div class="rf-container"> <div class="rf-grid-row rf-grid-row--gutters"> <div class="rf-col-xs-12 rf-col-xl-6"> <div class="rf-tile"> <div class="rf-tile__body"> <h4 class="rf-tile__title">Bénéfices</h4> <p class="rf-title__desc"> <ul class="rf-text--sm"> <li> rapide à comprendre (~ bootstrap, material, bulma) </li> <li> déjà fonctionnel (colonnes) </li> <li> réduit les débats de goûts </li> <li> sobre (honneur au contenu) </li> <li> confiance (image de sérieux) </li> <li> doc déjà très fournie </li> <li> perspectives de mutualisation++ </li> </ul> </p> </div> </div> </div> <div class="rf-col-xs-12 rf-col-xl-6"> <div class="rf-tile"> <div class="rf-tile__body"> <h4 class="rf-tile__title">Limites</h4> <p class="rf-title__desc"> (version 0.2.0) <ul class="rf-text--sm"> <li> poids de la librairie & fontes (+50% poids) </li> <li> composants pour apps (carte dépliable, tables, icones / svg) </li> <li> besoin lib / framework : Svelte, Vue, Angular, React </li> <li> doc in vivo </li> <li> ouverture Github attendue ! </li> <li> <strong>implique une reconception</strong> </li> </ul> </p> </div> </div> </div> </div> </div>

## Etat des travaux <div class="rf-container"> <div class="rf-grid-row rf-grid-row--gutters"> <div class="rf-col-xs-12 rf-col-xl-6"> <div class="rf-tile"> <div class="rf-tile__body"> <h4 class="rf-tile__title">Réalisé</h4> <p class="rf-title__desc"> <ul class="rf-text--sm"> <li> dév du 10 au 17 octobre</li> <li> optims (pageSpeedIndex / poids css/fontes) </li> <li> publication 17 octobre</li> <li> 0.1.0 puis 0.2.0 </li> <li> ajouts composants: about, stats </li> <li> <strong>bonus: adapatation Reveal.js</strong> </li> </ul> </p> </div> </div> </div> <div class="rf-col-xs-12 rf-col-xl-6"> <div class="rf-tile"> <div class="rf-tile__body"> <h4 class="rf-tile__title">Suites</h4> <p class="rf-title__desc"> <ul class="rf-text--sm"> <li> migration 0.3.1 </li> <li> scaffolding css rollup </li> <li> pruning (optim poids) </li> <li> test css in js </li> <li> adaptation site matchid.io (jekyll/bulma) </li> <li> contrib package Svelte.js ?</li> <li> adataption outil matchID (Vue.js) ? </lid> </ul> </p> </div> </div> </div> </div> </div>

# Annexe ## avant / Après <span class="rf-text--lg"> de Bulma <br> au Design system de l'État (0.2.0)</span>

## Accueil <div class="rf-container rf-margin-"> <div class="rf-grid-row rf-grid-row--gutters"> <div class="rf-col-xs-12 rf-col-xl-6"> <div class="rf-tile"> <div class="rf-tile__img rf-tile__img--1-2 rf-margin-4N"> <img data-src="custom/img/bulma/accueil.png" alt="accueil"> </div> <div class="rf-tile__body"> <h4 class="rf-tile__title">Bulma...</h4> <p class="rf-title__desc rf-text--left"> Bulma pousse aux couleurs "flash", avec un Hero très présent (flat design ~2015) <br> Le menu est très "aplicatif". </p> </div> </div> </div> <div class="rf-col-xs-12 rf-col-xl-6"> <div class="rf-tile"> <div class="rf-tile__img rf-tile__img--1-2 rf-margin-4N"> <img data-src="custom/img/dsfr/accueil.png" alt="accueil"> </div> <div class="rf-tile__body"> <h4 class="rf-tile__title">... Dsfr</h4> <p class="rf-tile__desc"> Menu sobre et espacé (2x plus grand) avec une place claire pour la marque d'Etat </p> </div> </div> </div> </div> </div> <div class="rf-hide-mobile-background"></div>

## Recherche simple <div class="rf-container"> <div class="rf-grid-row rf-grid-row--gutters"> <div class="rf-col-xs-12 rf-col-xl-6"> <div class="rf-tile"> <div class="rf-tile__img rf-tile__img--1-2 rf-margin-4N"> <img data-src="custom/img/bulma/premiere-recherche.png" alt="accueil"> </div> <div class="rf-tile__body"> <h4 class="rf-tile__title">Bulma...</h4> <p class="rf-title__desc rf-text--left"> Information placée sous le Hero, oblige à scroller en plein écran pour les résultats. </p> </div> </div> </div> <div class="rf-col-xs-12 rf-col-xl-6"> <div class="rf-tile"> <div class="rf-tile__img rf-tile__img--1-2 rf-margin-4N"> <img data-src="custom/img/dsfr/premiere-recherche.png" alt="accueil"> </div> <div class="rf-tile__body"> <h4 class="rf-tile__title">... Dsfr</h4> <p class="rf-tile__desc"> Choix de bascule du search sur le côté (mode large), l'occupation du header prenant trop d'espace. </p> </div> </div> </div> </div> </div> <div class="rf-hide-mobile-background"></div>

## Recherche avancée <div class="rf-container"> <div class="rf-grid-row rf-grid-row--gutters"> <div class="rf-col-xs-12 rf-col-xl-6"> <div class="rf-tile"> <div class="rf-tile__img rf-tile__img--1-2 rf-margin-4N"> <img data-src="custom/img/bulma/recherche-avancee.png" alt="accueil"> </div> <div class="rf-tile__body"> <h4 class="rf-tile__title">Bulma...</h4> <p class="rf-title__desc rf-text--left"> Inputs "customisés" pour tenir dans le hero </p> </div> </div> </div> <div class="rf-col-xs-12 rf-col-xl-6"> <div class="rf-tile"> <div class="rf-tile__img rf-tile__img--1-2 rf-margin-4N"> <img data-src="custom/img/dsfr/recherche-avancee.png" alt="accueil"> </div> <div class="rf-tile__body"> <h4 class="rf-tile__title">... Dsfr</h4> <p class="rf-tile__desc"> Les espacements obligatoires ont poussé à la bascule sur la gauche, plus standard </p> </div> </div> </div> </div> </div> <div class="rf-hide-mobile-background"></div>

## Fiche dépliée <div class="rf-container"> <div class="rf-grid-row rf-grid-row--gutters"> <div class="rf-col-xs-12 rf-col-xl-6"> <div class="rf-tile"> <div class="rf-tile__img rf-tile__img--1-3 rf-margin-4N"> <img data-src="custom/img/bulma/card.png" alt="accueil"> </div> <div class="rf-tile__body"> <h4 class="rf-tile__title">Bulma...</h4> <p class="rf-title__desc rf-text--left"> La notion de carte (card) comporte un header et un footer, l'incorporation d'une image et d'un bouton en standard, tout comme sous bootstrap. Le dépliement d'une carte est naturelle (body et footer de cart absents en mode repliés). </p> </div> </div> </div> <div class="rf-col-xs-12 rf-col-xl-6"> <div class="rf-tile"> <div class="rf-tile__img rf-tile__img--1-3 rf-margin-4N"> <img data-src="custom/img/dsfr/card.png" alt="accueil"> </div> <div class="rf-tile__body"> <h4 class="rf-tile__title">... Dsfr</h4> <p class="rf-tile__desc rf-text--left"> La carte (rf-card) ne correspond pas à une notion de fiche avec un body complexe <br> L'image est difficile à intégrer dans le header. <br> Tweak fait avec la mise en avant (rf-callout) pour le dépliement. </p> </div> </div> </div> </div> </div> <div class="rf-hide-mobile-background"></div>

## Table <div class="rf-container"> <div class="rf-grid-row rf-grid-row--gutters"> <div class="rf-col-xs-12 rf-col-xl-6"> <div class="rf-tile"> <div class="rf-tile__img rf-tile__img--1-3 rf-margin-4N"> <img data-src="custom/img/bulma/table.png" alt="accueil"> </div> <div class="rf-tile__body"> <h4 class="rf-tile__title">Bulma...</h4> <p class="rf-title__desc"> Bulma intègre les tables avec "strip" </p> </div> </div> </div> <div class="rf-col-xs-12 rf-col-xl-6"> <div class="rf-tile"> <div class="rf-tile__img rf-tile__img--1-3 rf-margin-4N"> <img data-src="custom/img/dsfr/table.png" alt="accueil"> </div> <div class="rf-tile__body"> <h4 class="rf-tile__title">... Dsfr</h4> <p class="rf-tile__desc"> Pas de cadre, reprise du css Bulma </p> </div> </div> </div> </div> </div> <div class="rf-hide-mobile-background"></div>

## Menus & icônes <div class="rf-container"> <div class="rf-grid-row rf-grid-row--gutters"> <div class="rf-col-xs-12 rf-col-xl-6"> <div class="rf-tile"> <div class="rf-tile__img rf-tile__img--1-2 rf-margin-4N"> <img width="50%" data-src="custom/img/bulma/menu.png" alt="accueil"> </div> <div class="rf-tile__body"> <h4 class="rf-tile__title">Bulma...</h4> <p class="rf-title__desc"> Bulma gère les icônes dans les menus </p> </div> </div> </div> <div class="rf-col-xs-12 rf-col-xl-6"> <div class="rf-tile"> <div class="rf-tile__img rf-tile__img--1-2 rf-margin-4N"> <img data-src="custom/img/dsfr/menu.png" alt="accueil"> </div> <div class="rf-tile__body"> <h4 class="rf-tile__title">... Dsfr</h4> <p class="rf-tile__desc rf-text--left"> - Intégration JS custom (Svelte): état du burger & aria <br> - Icones Remixicon via Iconify => code "rf-fi--icon" pour svg <br> - Ajout ombrage du menu (blanc sur blanc) <br> - Utilisation mixte de rf-nav et rf-shortcuts (pour réhausser les menus) </p> </div> </div> </div> </div> </div> <div class="rf-hide-mobile-background"></div>

## Appariement (tuiles) <div class="rf-container"> <div class="rf-grid-row rf-grid-row--gutters"> <div class="rf-col-xs-12 rf-col-xl-6"> <div class="rf-tile"> <div class="rf-tile__img rf-tile__img--1-2 rf-margin-4N"> <img data-src="custom/img/bulma/appariement.png" alt="accueil"> </div> <div class="rf-tile__body"> <h4 class="rf-tile__title">Bulma...</h4> <p class="rf-title__desc"> Css custom pour les étapes & les associations de colonnes. </p> </div> </div> </div> <div class="rf-col-xs-12 rf-col-xl-6"> <div class="rf-tile"> <div class="rf-tile__img rf-tile__img--1-2 rf-margin-4N"> <img data-src="custom/img/dsfr/appariement.png" alt="accueil"> </div> <div class="rf-tile__body"> <h4 class="rf-tile__title">... Dsfr</h4> <p class="rf-tile__desc rf-text--left"> - Tuiles (rf-tile) très pratiques multi usage </p> </div> </div> </div> </div> </div> <div class="rf-hide-mobile-background"></div>

## Accordéon <div class="rf-hide-mobile-background"> <br><br> <div style="overflow:hidden"> <iframe scrolling="no" style="margin-top:-220px;width: 100%;height:800px" src="https://deces.matchid.io/about" allowfullscreen/> </div> </div>

## Recherche géographique <div style="overflow:hidden"> <iframe scrolling="no" style="margin-top:-330px;height:1000px" class="rf-iframe--small" src="https://deces.matchid.io/search?q=pompidou&fuzzy=false&view=geo" allowfullscreen </iframe> </iframe> </div> <div class="rf-hide-mobile-background"></div>

## Appariement (résultats) <img src="custom/img/deces-appariement.png"><br>

# Questions ? <img width="150" src="custom/img/matchID-logo-square.svg">