Téléverser les fichiers vers "/"
This commit is contained in:
@@ -0,0 +1,247 @@
|
|||||||
|
|
||||||
|
<style>
|
||||||
|
.slide-wrap { font-family: var(--font-sans); max-width: 720px; margin: 0 auto; }
|
||||||
|
.slide-surface {
|
||||||
|
background: var(--color-background-primary);
|
||||||
|
border: 0.5px solid var(--color-border-tertiary);
|
||||||
|
border-radius: var(--border-radius-lg);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.slide-topbar {
|
||||||
|
background: var(--color-background-secondary);
|
||||||
|
border-bottom: 0.5px solid var(--color-border-tertiary);
|
||||||
|
padding: 10px 18px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.slide-kicker {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
.slide-badge {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #534AB7;
|
||||||
|
background: #EEEDFE;
|
||||||
|
border: 0.5px solid #AFA9EC;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 3px 10px;
|
||||||
|
}
|
||||||
|
.slide-body { padding: 0 4px 4px; }
|
||||||
|
.uf-detail-panel {
|
||||||
|
background: var(--color-background-secondary);
|
||||||
|
border-top: 0.5px solid var(--color-border-tertiary);
|
||||||
|
padding: 14px 20px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
gap: 10px;
|
||||||
|
min-height: 80px;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
.dp-col { display: flex; flex-direction: column; gap: 3px; }
|
||||||
|
.dp-label {
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--color-text-tertiary);
|
||||||
|
}
|
||||||
|
.dp-value {
|
||||||
|
font-size: 12.5px;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
.dp-tag {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 500;
|
||||||
|
background: #EEEDFE;
|
||||||
|
color: #3C3489;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 2px 7px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<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);
|
||||||
|
const rect = g ? g.querySelector('rect') : null;
|
||||||
|
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>
|
||||||
Reference in New Issue
Block a user