lrdlg/2CInfo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

4TQ séance 1

Browse Source
This commit is contained in:
lrdlg
2026-09-24 20:30:39 +02:00
parent 395829199b
commit b0f500a954
19 changed files with 1442 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
4tq-agent-education/files/4ae/index.html
+93
View File
@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>4e TQ Agent d'éducation · TIC</title>
<meta name="description" content="Les séances du cours de TIC (traitement de texte) de 4e TQ Agent d'éducation.">
<meta name="robots" content="noindex">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../assets/theme.css">
</head>
<body class="classe-ae">
<header class="entete">
<div class="entete__interieur">
<nav class="ariane" aria-label="Fil d'Ariane">
<a href="../index.html">Mes cours</a><span aria-hidden="true">/</span><strong>4e TQ Agent d'éducation</strong>
</nav>
<h1>4e TQ Agent d'éducation</h1>
<p class="entete__meta">TIC (traitement de texte) · M. Courcelle</p>
</div>
</header>
<main class="contenu">
<p class="chapeau">Cette année, la classe fonctionne comme une agence qui reçoit des missions. Choisis la séance sur laquelle tu travailles : chaque page se lit du début à la fin, avec des exercices à faire directement dedans.</p>
<h2>Période 1 : Bienvenue à l'agence</h2>
<!-- ==================================================================
POUR AJOUTER UNE SÉANCE
1. Créer le dossier de la séance à côté de ce fichier (seance2,
seance3...), avec son index.html dedans (le plus simple :
copier seance1).
2. Copier-coller le bloc <li class="module"> ci-dessous dans la
liste de la bonne période, et remplir les quatre champs.
3. Adapter le href vers le dossier de la nouvelle séance.
Gabarit à copier :
<li class="module">
<a class="module__lien" href="DOSSIER/index.html">
<span class="module__num">Période N · Séance N</span>
<span class="module__titre">Titre de la séance</span>
<span class="module__resume">Ce qu'on y fait, en une phrase.</span>
<span class="module__meta">Ce qu'il y a dans la page</span>
</a>
</li>
Une séance annoncée mais pas encore prête : ajouter la classe
« module--bientot » au <li> et remplacer le <a> par un
<div class="module__lien">, sans href.
================================================================== -->
<ul class="modules">
<li class="module">
<a class="module__lien" href="seance1/index.html">
<span class="module__num">Période 1 · Séance 1</span>
<span class="module__titre">Bienvenue à l'agence</span>
<span class="module__resume">Le fonctionnement du cours, un défi pour voir où tu en es, et ta première enquête : que raconte Internet sur le métier ?</span>
<span class="module__meta">Défi diagnostique · enquête · quiz « Cliché ou réalité ? »</span>
</a>
</li>
<li class="module module--bientot">
<div class="module__lien">
<span class="module__num">Période 1 · Séance 2</span>
<span class="module__titre">Ranger, nommer, mettre en forme</span>
<span class="module__resume">Organiser ton dossier d'apprentissage et mettre en forme un texte sans tricher avec les espaces.</span>
<span class="module__meta">Bientôt en ligne</span>
</div>
</li>
<li class="module module--bientot">
<div class="module__lien">
<span class="module__num">Période 1 · Séance 3</span>
<span class="module__titre">Les styles</span>
<span class="module__resume">Titres, volet de navigation, table des matières : structurer un document en quelques clics.</span>
<span class="module__meta">Bientôt en ligne</span>
</div>
</li>
</ul>
</main>
<footer class="pied">
<div class="pied__interieur">
Les exercices se font dans LibreOffice Writer. Enregistre ton travail dans ton dossier de l'année, sur ta clé.
</div>
</footer>
</body>
</html>
4tq-agent-education/files/4ae/seance1/S1_texte-brut.odt
BIN
View File
Binary file not shown.
4tq-agent-education/files/4ae/seance1/index.html
+274
View File
@@ -0,0 +1,274 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Séance 1 · Bienvenue à l'agence · 4e TQ Agent d'éducation</title>
<meta name="description" content="Séance 1 du cours de TIC de 4e TQ Agent d'éducation : défi diagnostique, enquête sur le métier, cliché ou réalité.">
<meta name="robots" content="noindex">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../../assets/theme.css">
<link rel="stylesheet" href="../../assets/atelier-texte.css">
<style>
/* Propre à cette page : l'autopositionnement. */
.auto { list-style: none; padding: 0; margin: 1rem 0; max-width: var(--lecture); }
.auto li { border-bottom: 1px solid var(--trait); padding: .6rem 0; margin: 0; }
.auto p { margin: 0 0 .4rem; }
.auto .zones { margin: 0; }
</style>
</head>
<body class="classe-ae">
<header class="entete">
<div class="entete__interieur">
<nav class="ariane" aria-label="Fil d'Ariane">
<a href="../../index.html">Mes cours</a><span aria-hidden="true">/</span><a href="../index.html">4e TQ Agent d'éducation</a><span aria-hidden="true">/</span><strong>Séance 1</strong>
</nav>
<div class="entete__barre">
<div>
<h1>Bienvenue à l'agence</h1>
<p class="entete__meta">Période 1 · Séance 1 · TIC (traitement de texte) · M. Courcelle</p>
</div>
<button type="button" class="action action--secondaire" id="projection" aria-pressed="false">Agrandir</button>
</div>
</div>
</header>
<div class="wrap">
<nav class="sommaire-lat" aria-label="Sommaire de la séance">
<div class="top">Séance 1</div>
<h2>Découvrir</h2>
<a href="#aujourdhui">Aujourd'hui</a>
<a href="#trois-mots">1. Trois mots</a>
<a href="#le-cours">2. Le cours en bref</a>
<h2>Faire</h2>
<a href="#diagnostic">3. Défi diagnostique</a>
<a href="#enquete">4. Enquête</a>
<a href="#cliche">5. Cliché ou réalité ?</a>
<h2>Faire le point</h2>
<a href="#ou-en-es-tu">6. Où en es-tu ?</a>
<a href="#ticket">7. Ticket de sortie</a>
</nav>
<main class="feuille">
<div class="regle" aria-hidden="true"></div>
<div class="inner">
<span class="module-tag">Période 1 · Séance 1</span>
<section id="aujourdhui">
<h2>Ce que tu vas faire aujourd'hui</h2>
<p>Tu vas découvrir comment fonctionne le cours, montrer ce que tu sais déjà faire à l'ordinateur, et mener ta première enquête : qu'est-ce qu'Internet raconte sur le métier d'agent d'éducation ?</p>
<p><strong>Rien de ce que tu fais aujourd'hui n'est coté.</strong></p>
</section>
<section id="trois-mots">
<h2>1. Trois mots</h2>
<p>Quand tu entends « éducateur » ou « éducatrice », quels sont les trois premiers mots qui te viennent en tête ? Écris-les sur le papillon que je te donne, sans ton nom. On les affiche au tableau, et on les regardera à nouveau en fin de séance.</p>
</section>
<section id="le-cours">
<h2>2. Le cours en bref</h2>
<p>Cette année, la classe fonctionne comme une agence qui reçoit des missions. Le numérique, tu le connais déjà : réseaux, messageries, vidéos courtes. Ici, tu vas apprendre à t'en servir comme un professionnel de l'éducation : chercher une information fiable, créer des documents clairs, communiquer pour un vrai public, respecter les personnes avec qui tu travailles.</p>
<p>L'année est découpée en cinq périodes. La première sert à prendre en main les outils. Ensuite, chaque période se termine par une mission.</p>
<div class="encadre">
<h3>Tes points</h3>
<p>Ils viennent de trois sources : des défis techniques courts, les missions, et la tenue de ton dossier d'apprentissage. Tout est expliqué dans la déclaration d'intention. Lis-la avec tes parents et rapporte-la signée à la prochaine séance.</p>
</div>
<p>En fin d'année, tu passeras ton épreuve de qualification, la <strong>SIPS</strong>. Tu devras présenter devant un jury ta vision du métier et ce qui a changé pendant l'année, puis observer une situation professionnelle. Ce cours t'aide à préparer le support de ta présentation et à tenir tes documents en ordre.</p>
</section>
<section id="diagnostic">
<h2>3. Défi diagnostique</h2>
<p>Ce défi me montre ce que tu sais déjà faire, pour que je puisse adapter le cours. Il n'y a pas de points. Tu as <strong>30 minutes</strong>. Fais les consignes dans l'ordre. Si tu bloques, passe à la suivante.</p>
<div class="actions">
<a class="action" href="S1_texte-brut.odt" download>Télécharger le fichier S1_texte-brut</a>
</div>
<h3>Niveau 1</h3>
<ol>
<li>Ouvre le fichier <code>S1_texte-brut</code> que tu viens de télécharger, ou celui du dossier que le professeur t'indique.</li>
<li>Enregistre-le sous un nouveau nom, sur ta clé, dans ton dossier de l'année. Le nom : <code>AAAA-MM-JJ_S1_diagnostic_Prenom</code>, avec la date du jour et ton prénom, sans accent et sans espace.</li>
<li>Mets le titre en gras.</li>
</ol>
<div class="nomtest">
<h4>Vérifie ton nom de fichier avant d'enregistrer</h4>
<label for="nom">Tape le nom que tu veux donner à ton fichier :</label><br>
<input id="nom" type="text" autocomplete="off" spellcheck="false" placeholder="2026-10-01_S1_diagnostic_Yasmine">
<ul class="check" id="nom-check" aria-live="polite"></ul>
</div>
<h3>Niveau 2</h3>
<ol start="4">
<li>Mets le titre en taille 16 et centre-le.</li>
<li>Justifie le paragraphe.</li>
<li>Transforme les quatre dernières lignes en liste à puces.</li>
<li>Corrige les trois mots soulignés en rouge par le correcteur.</li>
</ol>
<h3>Niveau 3</h3>
<ol start="8">
<li>Une faute n'est pas soulignée par le correcteur. Trouve-la et corrige-la.</li>
<li>Ajoute ton prénom dans le pied de page.</li>
</ol>
<p>Pour terminer : enregistre ton fichier et montre-le au professeur. Puis coche, sur ta feuille, comment chaque consigne s'est passée : réussi seul, réussi avec aide, ou pas réussi.</p>
</section>
<section id="enquete">
<h2>4. Enquête : le métier vu par Internet</h2>
<p>En binôme, <strong>25 minutes</strong>.</p>
<p>Lance une recherche d'images ou de vidéos avec ces mots : <code>éducateur</code>, <code>éducatrice spécialisée</code>, <code>éducateur internat</code>, <code>éducateur de rue</code>. Choisis quatre résultats différents et remplis le tableau de ta feuille.</p>
<table>
<thead>
<tr><th scope="col">Pour chaque résultat, note</th><th scope="col">Exemple de réponse</th></tr>
</thead>
<tbody>
<tr><td>Où ça se passe ?</td><td>une cour de récréation, un salon, une rue</td></tr>
<tr><td>Qui voit-on ?</td><td>des ados, un homme d'environ 30 ans</td></tr>
<tr><td>Que fait l'éducateur ?</td><td>il joue au foot avec eux</td></tr>
<tr><td>Quelle ambiance ?</td><td>détendue, tendue, triste</td></tr>
</tbody>
</table>
<p>Pour finir, complète la phrase : « D'après ces résultats, le métier d'éducateur, c'est surtout... »</p>
<div class="encadre encadre--attention">
<p>Si un résultat te met mal à l'aise ou n'a rien à voir avec le métier, ferme-le et préviens le professeur. Ne télécharge pas et ne partage pas de photos de personnes.</p>
</div>
</section>
<section id="cliche">
<h2>5. Cliché ou réalité ?</h2>
<p>Après la mise en commun, réponds à chaque affirmation. La correction s'affiche tout de suite.</p>
<div class="quiz" id="quiz-cliche"></div>
<div class="encadre encadre--cle">
<p>L'agent d'éducation accompagne des personnes au quotidien pour les aider à gagner en autonomie. Il travaille en équipe, dans des lieux très différents : aide à la jeunesse, handicap, petite enfance, personnes âgées, santé, maisons de jeunes, écoles et internats, travail de rue, aide aux adultes en difficulté.</p>
</div>
</section>
<section id="ou-en-es-tu">
<h2>6. Où en es-tu ?</h2>
<p>Pour chaque ligne, choisis ce qui te correspond aujourd'hui, puis reporte tes réponses sur ta feuille : cette page ne garde rien en mémoire. Tu referas cet exercice à la fin de la période pour voir ce qui a changé.</p>
<ul class="auto" id="auto"></ul>
</section>
<section id="ticket">
<h2>7. Ticket de sortie</h2>
<p>Réponds sur le papillon que je te donne, et remets-le en sortant.</p>
<ol>
<li>Un cliché sur le métier que tu as repéré aujourd'hui.</li>
<li>Un endroit où tu ne savais pas qu'un agent d'éducation pouvait travailler.</li>
</ol>
</section>
</div>
</main>
</div>
<footer class="pied">
<div class="pied__interieur">
Les exercices se font dans LibreOffice Writer. Enregistre ton travail dans ton dossier de l'année, sur ta clé.
</div>
</footer>
<script src="../../assets/atelier-texte.js"></script>
<script>
"use strict";
/* ---------- mode projection (TBI) ---------- */
(function(){
var b = document.getElementById('projection');
b.addEventListener('click', function(){
var on = document.documentElement.classList.toggle('projection');
b.setAttribute('aria-pressed', on ? 'true' : 'false');
b.textContent = on ? 'Taille normale' : 'Agrandir';
});
})();
/* ---------- vérification du nom de fichier ---------- */
(function(){
var champ = document.getElementById('nom');
var liste = document.getElementById('nom-check');
function dateValide(a, m, j){
var d = new Date(a, m - 1, j);
return d.getFullYear() === a && d.getMonth() === m - 1 && d.getDate() === j;
}
function verifier(){
var v = champ.value.trim();
if (!v) { liste.innerHTML = ''; return; }
var ext = /\.odt$/i.test(v);
var n = v.replace(/\.odt$/i, '');
var md = n.match(/^(\d{4})-(\d{2})-(\d{2})/);
var regles = [
['Commence par une date au format AAAA-MM-JJ', !!md && dateValide(+md[1], +md[2], +md[3])],
['La date est suivie de _S1_diagnostic_', /^\d{4}-\d{2}-\d{2}_S1_diagnostic_/.test(n)],
['Se termine par ton prénom', /_S1_diagnostic_[A-Za-z][A-Za-z-]+$/.test(n)],
['Aucun espace', !/\s/.test(n)],
['Aucun accent ni caractère spécial', /^[A-Za-z0-9_-]+$/.test(n)]
];
liste.innerHTML = regles.map(function(r){
return '<li class="' + (r[1] ? 'ok' : 'ko') + '">' + r[0] + '</li>';
}).join('') + (ext ? '<li class="ok">Pas besoin de taper .odt : Writer l\'ajoute tout seul.</li>' : '');
}
champ.addEventListener('input', verifier);
})();
/* ---------- cliché ou réalité ---------- */
var CR = ["C'est un cliché", "C'est la réalité"];
quiz(document.getElementById('quiz-cliche'), [
{ q: "Un agent d'éducation travaille surtout dans les écoles, comme surveillant.", r: CR, b: 0,
e: "L'école et l'internat ne sont qu'un secteur parmi d'autres : aide à la jeunesse, handicap, petite enfance, personnes âgées, santé mentale, maisons de jeunes, travail de rue..." },
{ q: "Un agent d'éducation peut travailler auprès de personnes âgées.", r: CR, b: 1,
e: "Les maisons de repos et les centres de jour pour personnes âgées font partie de ses lieux de travail." },
{ q: "Le métier consiste surtout à faire respecter la discipline.", r: CR, b: 0,
e: "Le cœur du métier, c'est l'accompagnement au quotidien : aider chaque personne à devenir plus autonome, selon ses possibilités. Les règles en font partie, mais ce n'est pas le but." },
{ q: "Un agent d'éducation travaille seul, sans collègues d'autres métiers.", r: CR, b: 0,
e: "Il travaille en équipe avec des assistants sociaux, des psychologues, des infirmiers, des enseignants, et avec des services extérieurs comme les centres PMS ou le CPAS." },
{ q: "Il existe des éducateurs qui travaillent dans la rue.", r: CR, b: 1,
e: "Les éducateurs de rue vont à la rencontre des jeunes là où ils se trouvent, dans le quartier." },
{ q: "Observer les personnes fait partie du métier.", r: CR, b: 1,
e: "L'observation est un outil de base de l'agent d'éducation : elle permet de comprendre ce que vivent les personnes et d'adapter son action. Tu la travailleras toute l'année." }
]);
/* ---------- autopositionnement ---------- */
(function(){
var items = [
"retrouver un fichier sur l'ordinateur ou sur ma clé",
"enregistrer un fichier sous un nouveau nom, au bon endroit",
"choisir un nom de fichier clair, que je retrouverai plus tard",
"mettre un texte en gras, changer sa taille, le centrer",
"faire une liste à puces",
"utiliser le correcteur orthographique",
"utiliser les styles de titre (Titre 1, Titre 2)",
"trouver une information sur Internet"
];
var choix = ['Oui', 'Un peu', 'Pas encore'];
var ul = document.getElementById('auto');
ul.innerHTML = items.map(function(t, i){
return '<li><p>Je sais ' + t + '.</p><div class="zones" role="group" aria-label="Je sais ' + t + '">' +
choix.map(function(c){ return '<button type="button" aria-pressed="false">' + c + '</button>'; }).join('') +
'</div></li>';
}).join('');
ul.addEventListener('click', function(e){
var b = e.target.closest('button');
if (!b) return;
b.parentNode.querySelectorAll('button').forEach(function(x){
x.setAttribute('aria-pressed', x === b ? 'true' : 'false');
});
});
})();
</script>
</body>
</html>