361 lines
16 KiB
HTML
361 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Schema UF</title>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');
|
||
|
||
:root {
|
||
--font-sans: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||
--color-background-primary: #ffffff;
|
||
--color-background-secondary: #f8fafc;
|
||
--color-border-tertiary: #e2e8f0;
|
||
--color-text-primary: #0f172a;
|
||
--color-text-secondary: #475569;
|
||
--color-text-tertiary: #94a3b8;
|
||
--border-radius-lg: 16px;
|
||
--color-accent: #534AB7;
|
||
--color-accent-light: #EEEDFE;
|
||
--color-accent-dark: #3C3489;
|
||
}
|
||
|
||
.slide-wrap { font-family: var(--font-sans); max-width: 720px; margin: 0 auto; }
|
||
.slide-surface {
|
||
background: var(--color-background-primary);
|
||
border: 1px solid var(--color-border-tertiary);
|
||
border-radius: var(--border-radius-lg);
|
||
overflow: hidden;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
|
||
transition: box-shadow 0.3s ease;
|
||
}
|
||
.slide-surface:hover {
|
||
box-shadow: 0 20px 40px rgba(83, 74, 183, 0.08), 0 1px 3px rgba(0, 0, 0, 0.02);
|
||
}
|
||
.slide-topbar {
|
||
background: var(--color-background-secondary);
|
||
border-bottom: 1px solid var(--color-border-tertiary);
|
||
padding: 14px 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.slide-kicker {
|
||
font-size: 11.5px;
|
||
font-weight: 600;
|
||
color: var(--color-text-secondary);
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
}
|
||
.slide-badge {
|
||
font-size: 11.5px;
|
||
font-weight: 600;
|
||
color: var(--color-accent);
|
||
background: var(--color-accent-light);
|
||
border: 1px solid rgba(83, 74, 183, 0.2);
|
||
border-radius: 20px;
|
||
padding: 4px 12px;
|
||
}
|
||
.slide-body { padding: 12px 12px 6px; }
|
||
|
||
/* SVG Interactive Node Styling */
|
||
.node {
|
||
cursor: pointer;
|
||
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
.node rect:first-of-type {
|
||
fill: var(--color-background-primary, #ffffff);
|
||
stroke: var(--color-border-tertiary, #e2e8f0);
|
||
stroke-width: 1px;
|
||
transition: fill 0.25s ease, stroke 0.25s ease, stroke-width 0.25s ease;
|
||
}
|
||
.node:hover {
|
||
transform: translateY(-4px);
|
||
}
|
||
.node:hover rect:first-of-type {
|
||
stroke: var(--color-accent);
|
||
stroke-width: 1.5px;
|
||
fill: var(--color-background-secondary);
|
||
}
|
||
|
||
/* Selected State */
|
||
.node.is-selected rect:first-of-type {
|
||
fill: #f5f3ff !important;
|
||
stroke: var(--color-accent) !important;
|
||
stroke-width: 2px !important;
|
||
}
|
||
|
||
/* Typography inside SVG cards */
|
||
.node .th {
|
||
font-family: var(--font-sans), sans-serif;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
fill: var(--color-accent-dark);
|
||
transition: fill 0.25s ease;
|
||
}
|
||
.node.is-selected .th {
|
||
fill: var(--color-accent);
|
||
}
|
||
.node .ts {
|
||
font-family: var(--font-sans), sans-serif;
|
||
font-size: 11.5px;
|
||
font-weight: 500;
|
||
fill: var(--color-text-secondary);
|
||
transition: fill 0.25s ease;
|
||
}
|
||
.node.is-selected .ts {
|
||
fill: var(--color-text-primary);
|
||
}
|
||
|
||
/* SVG Inner Pills styling */
|
||
.node rect[fill="#3C3489"] {
|
||
fill: var(--color-accent-light) !important;
|
||
opacity: 1 !important;
|
||
stroke: rgba(83, 74, 183, 0.12);
|
||
stroke-width: 0.5px;
|
||
transition: fill 0.25s ease;
|
||
}
|
||
.node:hover rect[fill="#3C3489"] {
|
||
fill: #e0ddff !important;
|
||
}
|
||
.node.is-selected rect[fill="#3C3489"] {
|
||
fill: var(--color-accent-light) !important;
|
||
}
|
||
.node text[style*="font-size:11px"] {
|
||
fill: var(--color-accent-dark) !important;
|
||
font-size: 10px !important;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.uf-detail-panel {
|
||
background: var(--color-background-secondary);
|
||
border-top: 1px solid var(--color-border-tertiary);
|
||
padding: 18px 24px;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
gap: 16px;
|
||
min-height: 90px;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
.dp-col { display: flex; flex-direction: column; gap: 6px; }
|
||
.dp-label {
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--color-text-tertiary);
|
||
}
|
||
.dp-value {
|
||
font-size: 13px;
|
||
color: var(--color-text-primary);
|
||
line-height: 1.6;
|
||
font-weight: 450;
|
||
}
|
||
.dp-tag {
|
||
display: inline-block;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
background: var(--color-accent-light);
|
||
color: var(--color-accent-dark);
|
||
border: 0.5px solid rgba(83, 74, 183, 0.2);
|
||
border-radius: 6px;
|
||
padding: 3px 8px;
|
||
line-height: 1.4;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="slide-wrap">
|
||
<h2 style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)">Schéma des 5 unités de formation de la formation IA-PRO, avec progression du panorama vers l'éthique</h2>
|
||
<div class="slide-surface">
|
||
<div class="slide-topbar">
|
||
<span class="slide-kicker">Formation IA-PRO — Architecture pédagogique</span>
|
||
<span class="slide-badge">5 unités de formation</span>
|
||
</div>
|
||
|
||
<div class="slide-body">
|
||
<svg width="100%" viewBox="0 0 680 310" role="img">
|
||
<title>Les 5 unités de formation IA-PRO</title>
|
||
<desc>Progression linéaire de gauche à droite : UF1 Présentation IA générative, UF2 Rédaction et prompt engineering, UF3 Confidentialité, UF4 Contenus inclusifs, UF5 Éthique et impacts sociaux.</desc>
|
||
<defs>
|
||
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
|
||
<path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</marker>
|
||
</defs>
|
||
|
||
<!-- Arc de progression haut -->
|
||
<text class="ts" x="340" y="30" text-anchor="middle" style="fill:var(--color-text-tertiary);font-size:11px;letter-spacing:0.08em;">Du panorama à l'éthique</text>
|
||
<path d="M 76 44 Q 340 10 604 44" fill="none" stroke="#AFA9EC" stroke-width="0.5" stroke-dasharray="4 3" marker-end="url(#arrow)"/>
|
||
|
||
<!-- Ligne de certification en bas -->
|
||
<text class="ts" x="340" y="290" text-anchor="middle" style="fill:#534AB7;font-size:11px;">Fil rouge certification · C1 à C6 · toutes UF</text>
|
||
<line x1="76" y1="278" x2="604" y2="278" stroke="#AFA9EC" stroke-width="0.5" stroke-dasharray="3 3"/>
|
||
|
||
<!-- UF1 -->
|
||
<g class="node c-purple" onclick="selectUF(0)" id="uf1-g">
|
||
<rect x="40" y="55" width="108" height="200" rx="8" stroke-width="0.5"/>
|
||
<text class="th" x="94" y="82" text-anchor="middle" dominant-baseline="central">UF1</text>
|
||
<text class="ts" x="94" y="105" text-anchor="middle" dominant-baseline="central">Présentation</text>
|
||
<text class="ts" x="94" y="121" text-anchor="middle" dominant-baseline="central">IA générative</text>
|
||
<rect x="58" y="145" width="72" height="22" rx="4" fill="#3C3489" opacity="0.25"/>
|
||
<text class="ts" x="94" y="160" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">2 chapitres</text>
|
||
<rect x="58" y="174" width="72" height="22" rx="4" fill="#3C3489" opacity="0.18"/>
|
||
<text class="ts" x="94" y="189" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">Classe inversée</text>
|
||
<rect x="58" y="203" width="72" height="22" rx="4" fill="#3C3489" opacity="0.18"/>
|
||
<text class="ts" x="94" y="218" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">TP binômes</text>
|
||
</g>
|
||
|
||
<!-- Flèche 1→2 -->
|
||
<line x1="151" y1="155" x2="165" y2="155" class="arr" marker-end="url(#arrow)" stroke="#AFA9EC"/>
|
||
|
||
<!-- UF2 -->
|
||
<g class="node c-purple" onclick="selectUF(1)" id="uf2-g">
|
||
<rect x="167" y="55" width="108" height="200" rx="8" stroke-width="0.5"/>
|
||
<text class="th" x="221" y="82" text-anchor="middle" dominant-baseline="central">UF2</text>
|
||
<text class="ts" x="221" y="105" text-anchor="middle" dominant-baseline="central">Rédaction &</text>
|
||
<text class="ts" x="221" y="121" text-anchor="middle" dominant-baseline="central">prompt eng.</text>
|
||
<rect x="185" y="145" width="72" height="22" rx="4" fill="#3C3489" opacity="0.25"/>
|
||
<text class="ts" x="221" y="160" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">4 chapitres</text>
|
||
<rect x="185" y="174" width="72" height="22" rx="4" fill="#3C3489" opacity="0.18"/>
|
||
<text class="ts" x="221" y="189" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">Démo live</text>
|
||
<rect x="185" y="203" width="72" height="22" rx="4" fill="#3C3489" opacity="0.18"/>
|
||
<text class="ts" x="221" y="218" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">Ateliers</text>
|
||
</g>
|
||
|
||
<!-- Flèche 2→3 -->
|
||
<line x1="278" y1="155" x2="292" y2="155" class="arr" marker-end="url(#arrow)" stroke="#AFA9EC"/>
|
||
|
||
<!-- UF3 -->
|
||
<g class="node c-purple" onclick="selectUF(2)" id="uf3-g">
|
||
<rect x="294" y="55" width="108" height="200" rx="8" stroke-width="0.5"/>
|
||
<text class="th" x="348" y="82" text-anchor="middle" dominant-baseline="central">UF3</text>
|
||
<text class="ts" x="348" y="105" text-anchor="middle" dominant-baseline="central">Confidentialité</text>
|
||
<text class="ts" x="348" y="121" text-anchor="middle" dominant-baseline="central">& sécurité</text>
|
||
<rect x="312" y="145" width="72" height="22" rx="4" fill="#3C3489" opacity="0.25"/>
|
||
<text class="ts" x="348" y="160" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">2 chapitres</text>
|
||
<rect x="312" y="174" width="72" height="22" rx="4" fill="#3C3489" opacity="0.18"/>
|
||
<text class="ts" x="348" y="189" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">RGPD · IA Act</text>
|
||
<rect x="312" y="203" width="72" height="22" rx="4" fill="#3C3489" opacity="0.18"/>
|
||
<text class="ts" x="348" y="218" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">Cas pratiques</text>
|
||
</g>
|
||
|
||
<!-- Flèche 3→4 -->
|
||
<line x1="405" y1="155" x2="419" y2="155" class="arr" marker-end="url(#arrow)" stroke="#AFA9EC"/>
|
||
|
||
<!-- UF4 -->
|
||
<g class="node c-purple" onclick="selectUF(3)" id="uf4-g">
|
||
<rect x="421" y="55" width="108" height="200" rx="8" stroke-width="0.5"/>
|
||
<text class="th" x="475" y="82" text-anchor="middle" dominant-baseline="central">UF4</text>
|
||
<text class="ts" x="475" y="105" text-anchor="middle" dominant-baseline="central">Contenus</text>
|
||
<text class="ts" x="475" y="121" text-anchor="middle" dominant-baseline="central">inclusifs</text>
|
||
<rect x="439" y="145" width="72" height="22" rx="4" fill="#3C3489" opacity="0.25"/>
|
||
<text class="ts" x="475" y="160" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">2 chapitres</text>
|
||
<rect x="439" y="174" width="72" height="22" rx="4" fill="#3C3489" opacity="0.18"/>
|
||
<text class="ts" x="475" y="189" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">Accessibilité</text>
|
||
<rect x="439" y="203" width="72" height="22" rx="4" fill="#3C3489" opacity="0.18"/>
|
||
<text class="ts" x="475" y="218" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">Production IA</text>
|
||
</g>
|
||
|
||
<!-- Flèche 4→5 -->
|
||
<line x1="532" y1="155" x2="546" y2="155" class="arr" marker-end="url(#arrow)" stroke="#AFA9EC"/>
|
||
|
||
<!-- UF5 -->
|
||
<g class="node c-purple" onclick="selectUF(4)" id="uf5-g">
|
||
<rect x="548" y="55" width="108" height="200" rx="8" stroke-width="0.5"/>
|
||
<text class="th" x="602" y="82" text-anchor="middle" dominant-baseline="central">UF5</text>
|
||
<text class="ts" x="602" y="105" text-anchor="middle" dominant-baseline="central">Éthique &</text>
|
||
<text class="ts" x="602" y="121" text-anchor="middle" dominant-baseline="central">impacts sociaux</text>
|
||
<rect x="566" y="145" width="72" height="22" rx="4" fill="#3C3489" opacity="0.25"/>
|
||
<text class="ts" x="602" y="160" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">2 chapitres</text>
|
||
<rect x="566" y="174" width="72" height="22" rx="4" fill="#3C3489" opacity="0.18"/>
|
||
<text class="ts" x="602" y="189" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">Études de cas</text>
|
||
<rect x="566" y="203" width="72" height="22" rx="4" fill="#3C3489" opacity="0.18"/>
|
||
<text class="ts" x="602" y="218" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">Prise de recul</text>
|
||
</g>
|
||
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- Panneau de détail dynamique -->
|
||
<div class="uf-detail-panel" id="detail-panel">
|
||
<div class="dp-col">
|
||
<span class="dp-label">Intention pédagogique</span>
|
||
<span class="dp-value" id="dp-intent" style="color:var(--color-text-tertiary);font-style:italic;">Cliquez sur une UF pour voir le détail</span>
|
||
</div>
|
||
<div class="dp-col">
|
||
<span class="dp-label">Méthodes clés</span>
|
||
<span class="dp-value" id="dp-methods"></span>
|
||
</div>
|
||
<div class="dp-col">
|
||
<span class="dp-label">Compétences visées</span>
|
||
<span class="dp-value" id="dp-skills"></span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const DATA = [
|
||
{
|
||
intent: "Créer le contexte, ancrer l'IA dans le réel professionnel de l'apprenant. Partir de ce qu'il connaît déjà.",
|
||
methods: "Classe inversée · TP binômes · Analyse de contexte professionnel",
|
||
skills: "C1 – Identifier les usages IA pertinents pour son métier"
|
||
},
|
||
{
|
||
intent: "Cœur pratique de la formation. Faire expérimenter le prompt engineering et la création de contenu augmenté.",
|
||
methods: "Démo live · Ateliers guidés · Micro-tâches professionnelles",
|
||
skills: "C2 – Rédiger des prompts · C3 – Produire du contenu visuel"
|
||
},
|
||
{
|
||
intent: "Poser le cadre légal et éthique sans freiner la pratique. Gérer les risques avec lucidité.",
|
||
methods: "Études de cas RGPD · Quiz décisionnels · Mise en situation",
|
||
skills: "C4 – Sécuriser l'usage de l'IA en contexte professionnel"
|
||
},
|
||
{
|
||
intent: "Produire avec l'IA sans exclure. Intégrer l'accessibilité dès la conception du contenu.",
|
||
methods: "Production commentée · Révision par pairs · Checklist accessibilité",
|
||
skills: "C5 – Concevoir des contenus IA inclusifs et accessibles"
|
||
},
|
||
{
|
||
intent: "Prendre du recul sur l'IA. Ancrer la pratique dans une réflexion sur les impacts sociaux et les responsabilités.",
|
||
methods: "Études de cas métier · Débat structuré · Synthèse personnelle",
|
||
skills: "C6 – Adopter une posture éthique face à l'IA"
|
||
}
|
||
];
|
||
|
||
let selected = -1;
|
||
|
||
function selectUF(idx) {
|
||
const ids = ['uf1-g','uf2-g','uf3-g','uf4-g','uf5-g'];
|
||
ids.forEach((id, i) => {
|
||
const g = document.getElementById(id);
|
||
if (g) {
|
||
if (i === idx) {
|
||
g.classList.add('is-selected');
|
||
} else {
|
||
g.classList.remove('is-selected');
|
||
}
|
||
const rect = g.querySelector('rect');
|
||
if (rect) {
|
||
rect.style.strokeWidth = (i === idx) ? '2' : '0.5';
|
||
}
|
||
}
|
||
});
|
||
|
||
const d = DATA[idx];
|
||
document.getElementById('dp-intent').textContent = d.intent;
|
||
document.getElementById('dp-intent').style.fontStyle = 'normal';
|
||
document.getElementById('dp-intent').style.color = 'var(--color-text-primary)';
|
||
document.getElementById('dp-methods').textContent = d.methods;
|
||
document.getElementById('dp-skills').innerHTML = '<span class="dp-tag">' + d.skills + '</span>';
|
||
selected = idx;
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|
||
|
||
|