lrdlg/2CInfo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
588c2b0c353c50edcc0a9eca52483b668015ec5f
2CInfo/3tq-technique-sociale/module2/index.html
T
lrdlg a489298897 mise à niveau de tout le site
2026-09-21 10:56:04 +02:00

351 lines
21 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Module 2 — 3e TQ Technique sociale</title>
<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">
</head>
<body class="classe-ts">
<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">3e TQ Technique sociale</a><span aria-hidden="true">/</span><strong>Module 2</strong>
</nav>
<h1>Saisir au kilomètre</h1>
<p class="entete__meta">Traitement de texte · ponctuation, raccourcis, vitesse de frappe</p>
</div>
</header>
<div class="wrap">
<nav class="sommaire-lat" aria-label="Sommaire">
<a class="top" href="#haut">Module 2</a>
<h2>Module 2, saisir au kilomètre</h2>
<a href="#m2-demo">La démonstration</a>
<a href="#m2-kilometre">Saisir au kilomètre</a>
<a href="#m2-entree">La touche Entrée</a>
<a href="#m2-ponctuation">La ponctuation</a>
<a href="#m2-caracteres">Accents et signes</a>
<a href="#m2-raccourcis">Raccourcis</a>
<a href="#m2-correcteur">Le correcteur</a>
<a href="#m2-textes">Textes à saisir</a>
<a href="#m2-chrono">Chronomètre</a>
<a href="#m2-quiz">Teste-toi</a>
<h2>Autres modules</h2>
<a href="../index.html">Tous les modules de la classe</a>
<a href="../module1/index.html">Module 1, le poste et les fichiers</a>
</nav>
<main class="feuille" id="haut">
<div class="regle" aria-hidden="true"></div>
<div class="inner">
<p class="chapeau">Taper vite et bien commence par une règle simple : on tape les mots, la présentation vient après. Ce module montre pourquoi, et entraîne la frappe.</p>
<h2 id="m2-demo">Commence par ceci</h2>
<p>Voici le même paragraphe, tapé de deux façons. À gauche, le texte a été saisi au kilomètre : une seule marque de paragraphe, tout à la fin. À droite, quelqu'un a appuyé sur Entrée en fin de chaque ligne.</p>
<p>Affiche les marques, puis agrandis la police. Regarde ce qui arrive à la colonne de droite.</p>
<div class="demo">
<div class="demo-barre">
<button id="btn-marques" class="plein" aria-pressed="false">Afficher les marques</button>
<label for="taille">Taille&nbsp;: <output id="taille-val">11</output>&nbsp;pt</label>
<input type="range" id="taille" min="11" max="26" value="11" step="1">
</div>
<div class="demo-corps">
<div class="demo-col" id="col-bon">
<h4>Saisi au kilomètre</h4>
<div class="txt"></div>
</div>
<div class="demo-col" id="col-mauvais">
<h4>Entrée à chaque ligne</h4>
<div class="txt"></div>
</div>
</div>
</div>
<p>À gauche, le texte se réorganise tout seul. À droite, il part en morceaux. C'est toute la différence entre un document qu'on peut encore modifier et un document qu'il faudra retaper.</p>
<h2 id="m2-kilometre"><span class="module-tag">Module 2</span><br>Saisir au kilomètre</h2>
<p>Saisir au kilomètre, c'est taper tout le texte d'une traite, sans s'occuper de son apparence. Pas de gras, pas de centrage, pas de police choisie. Rien que les mots, dans l'ordre. La mise en forme vient après.</p>
<p>Ce n'est pas un exercice d'école, c'est la façon dont on travaille vraiment. Tu vas plus vite, tu fais moins de fautes, et tu peux changer la présentation d'un seul coup à la fin.</p>
<h2 id="m2-entree">La touche Entrée</h2>
<p>Le logiciel passe tout seul à la ligne quand la ligne est pleine. Tu n'as rien à faire.</p>
<div class="regle-cle">
<p>Entrée sert à une seule chose : terminer un paragraphe et en commencer un autre. Elle insère une marque de paragraphe <span class="pil"></span>.</p>
</div>
<p><code>Ctrl+F10</code> affiche les marques. Utilise-le chaque fois que quelque chose te semble bizarre : tu verras ce que tu as réellement tapé. Remonte en haut de la page pour revoir la démonstration.</p>
<p>Une ligne vide entre deux paragraphes se règle par un espacement, pas par trois touches Entrée. Ça vient au module 3.</p>
<h2 id="m2-ponctuation">La ponctuation</h2>
<table>
<tr><th>Signe</th><th>Espace avant</th><th>Espace après</th></tr>
<tr><td>virgule <code>,</code></td><td>non</td><td>oui</td></tr>
<tr><td>point <code>.</code></td><td>non</td><td>oui</td></tr>
<tr><td>point-virgule <code>;</code></td><td>oui, insécable</td><td>oui</td></tr>
<tr><td>deux-points <code>:</code></td><td>oui, insécable</td><td>oui</td></tr>
<tr><td>point d'interrogation <code>?</code></td><td>oui, insécable</td><td>oui</td></tr>
<tr><td>point d'exclamation <code>!</code></td><td>oui, insécable</td><td>oui</td></tr>
<tr><td>parenthèse ouvrante <code>(</code></td><td>oui</td><td>non</td></tr>
<tr><td>parenthèse fermante <code>)</code></td><td>non</td><td>oui</td></tr>
</table>
<p>Une espace insécable empêche le logiciel de couper la ligne à cet endroit. Sans elle, un point d'interrogation peut se retrouver tout seul au début de la ligne suivante. On l'obtient par <code>Ctrl+Maj+Espace</code>.</p>
<div class="regle-cle">
<p>Les deux erreurs qui se voient le plus sur un document imprimé : une espace avant la virgule, et pas d'espace après le point.</p>
</div>
<h3>Trouve les espacements fautifs</h3>
<p>Clique sur chaque endroit où l'espacement est faux. Il y en a huit.</p>
<div class="chasse" id="chasse-esp"></div>
<p class="score" id="score-esp"></p>
<div class="actions"><button id="reset-esp">Recommencer</button><button id="sol-esp">Montrer la solution</button></div>
<h2 id="m2-caracteres">Accents et signes</h2>
<p>Les majuscules s'accentuent. On écrit <strong>École</strong>, <strong>À partir de</strong>, <strong>Étienne</strong>. La méthode qui marche sur tous les postes : tape <code>é</code>, sélectionne-le avec <code>Maj</code>+flèche gauche, puis Format, Texte, MAJUSCULES. Sur certains claviers, <code>Verr.Maj</code> suivi de <code>é</code> donne directement <code>É</code> ; sur d'autres, il donne un 2. Essaie sur ton poste.</p>
<p>Les symboles absents du clavier (degré, case à cocher, flèche, lettres grecques) se trouvent au même endroit.</p>
<figure>
<img src="../images/m2-caractere-special.png" alt="Boîte de dialogue Caractère spécial"
onerror="this.outerHTML='&lt;div class=\'manque\'&gt;Capture à ajouter : &lt;code&gt;3tq-technique-sociale/images/m2-caractere-special.png&lt;/code&gt;&lt;br&gt;Boîte Caractère spécial, liste des polices et champ de recherche visibles.&lt;/div&gt;'">
<figcaption>Insertion, puis Caractère spécial.</figcaption>
</figure>
<h2 id="m2-raccourcis">Raccourcis</h2>
<p>La souris est lente. Tape un mot pour filtrer la liste.</p>
<label for="filtre">Filtrer</label><br>
<input id="filtre" type="text" placeholder="par exemple : sélectionner" spellcheck="false">
<table id="tab-racc"><tbody></tbody></table>
<h2 id="m2-correcteur">Le correcteur ne relit pas à ta place</h2>
<p>Le correcteur souligne les mots qu'il ne trouve pas dans son dictionnaire. Il ne voit pas un mot qui existe mais qui n'est pas le bon.</p>
<p>Dans le texte ci-dessous, tous les mots existent en français. Clique sur ceux qui sont faux. Il y en a dix.</p>
<div class="chasse" id="chasse-mots"></div>
<p class="score" id="score-mots"></p>
<div class="actions"><button id="reset-mots">Recommencer</button><button id="sol-mots">Montrer la solution</button></div>
<div class="regle-cle">
<p>Le correcteur trouve les mots qui n'existent pas. Pas les mots qui ne sont pas à leur place. Tu relis toi-même, toujours, après lui.</p>
</div>
<p>Vérifie aussi la langue du document, en bas de la fenêtre. Un texte français réglé sur l'anglais est souligné en rouge de bout en bout.</p>
<h2 id="m2-textes">Textes à saisir</h2>
<p>Les textes des exercices, pour les avoir sous les yeux pendant que tu tapes. Ne recopie pas les retours à la ligne que tu vois à l'écran : appuie sur Entrée uniquement entre deux paragraphes.</p>
<details><summary>Exercice 1, le centre de vacances La Ruche</summary>
<div class="specimen">
<p>Le centre de vacances La Ruche ouvre ses portes du 1er au 15 juillet. Il accueille les enfants de six à douze ans, du lundi au vendredi, de huit heures trente à seize heures trente. Une garderie est assurée à partir de sept heures trente et jusqu'à dix-sept heures trente.</p>
<p>Chaque semaine est construite autour d'un thème. La première semaine sera consacrée à la nature et à la découverte de la forêt voisine. La seconde portera sur les arts du cirque, avec l'intervention de deux artistes professionnels le jeudi.</p>
<p>Les inscriptions se prennent au secrétariat, au 12 de la rue des Écoles, ou par téléphone au 069 22 34 56. Le nombre de places est limité à quarante enfants par semaine. Une fiche médicale complétée par les parents est indispensable.</p>
<p>Le prix de la semaine est de cinquante euros pour le premier enfant et de quarante euros à partir du second. Ce montant comprend les collations, le matériel et les assurances. Le repas de midi n'est pas fourni.</p>
</div>
<p>Quatre paragraphes, donc quatre marques <span class="pil"></span>. Attention au É de « rue des Écoles ».</p>
</details>
<details><summary>Exercice 3, les services aux familles</summary>
<div class="specimen">
<p>Services proposés aux familles</p>
<p>L'agence communale ouvre un guichet unique destiné aux familles. Que vous cherchiez une place en crèche, une aide administrative ou une information sur les activités extrascolaires, une seule adresse suffit désormais.</p>
<p>Quels services trouve-t-on au guichet ? Trois missions principales lui sont confiées.</p>
<p>L'accueil et l'orientation : un agent reçoit sans rendez-vous et oriente vers le service compétent. Il dispose de la liste complète des milieux d'accueil de la commune.</p>
<p>L'aide au remplissage des documents : allocations, primes de naissance, inscriptions scolaires. Aucune connaissance administrative n'est nécessaire de la part des familles.</p>
<p>Le suivi des demandes : chaque dossier reçoit un numéro et peut être suivi par téléphone. Le délai de traitement annoncé est de quinze jours ouvrables.</p>
<p>Le guichet est ouvert du lundi au vendredi, de huit heures trente à midi, et le mercredi après-midi de treize heures à seize heures. Il est fermé les jours fériés. Une permanence téléphonique reste assurée en dehors de ces heures.</p>
<p>Étienne Delval, échevin des Affaires sociales</p>
</div>
<p>Espaces insécables devant les deux-points et le point d'interrogation. Et le É d'Étienne.</p>
</details>
<details><summary>Exercice 6, texte du chronomètre</summary>
<div class="specimen">
<p>L'animation d'un groupe d'enfants demande de la préparation. Avant chaque séance, l'animateur prévoit le matériel, vérifie l'espace disponible et prépare une activité de remplacement en cas de mauvais temps. Il connaît le nombre d'enfants attendus et les éventuelles allergies alimentaires signalées par les parents.</p>
<p>Pendant la séance, il observe autant qu'il anime. Un enfant qui reste à l'écart, un groupe qui se forme contre un autre, une consigne qui n'est pas comprise : ce sont des informations utiles pour la suite. L'animateur note ce qu'il remarque, sans interrompre l'activité.</p>
<p>Après la séance, un temps de rangement collectif est prévu. Les enfants y participent, car il fait partie de l'activité et non de la corvée qui la suit. L'animateur profite de ce moment pour recueillir les impressions du groupe sur ce qui vient d'être fait.</p>
</div>
</details>
<h2 id="m2-chrono">Chronomètre</h2>
<p>Cinq minutes de frappe. Tape dans le cadre, le compteur avance tout seul. Ce relevé n'est pas coté : il sert à voir ta progression d'un mois à l'autre. Note tes deux chiffres dans ta grille.</p>
<div class="chrono">
<div class="temps" id="temps">05:00</div>
<button id="go" class="plein">Démarrer</button>
<button id="stop">Arrêter</button>
<div>Mots&nbsp;: <strong id="mots">0</strong></div>
</div>
<textarea id="zone-frappe" placeholder="Le chronomètre démarre quand tu cliques sur Démarrer." spellcheck="false" disabled></textarea>
<p id="bilan"></p>
<h2 id="m2-quiz">Teste-toi, module 2</h2>
<div class="quiz" id="quiz2"></div>
</div>
</main>
</div>
<footer class="pied">
<div class="pied__interieur">
<p>Cours de traitement de texte, 3e année Techniques sociales et d'animation. M. Courcelle, 2026-2027.</p>
<p>Les captures d'écran sont à réaliser sur la version de LibreOffice installée en salle.</p>
</div>
</footer>
<script src="../../assets/atelier-texte.js"></script>
<script>
"use strict";
/* ---------- démonstration des marques de paragraphe ---------- */
const PARA = "Le centre de vacances La Ruche ouvre ses portes du 1er au 15 juillet. Il accueille les enfants de six à douze ans, du lundi au vendredi. Une garderie est assurée dès sept heures trente.";
const LIGNES = ["Le centre de vacances La Ruche ouvre ses","portes du 1er au 15 juillet. Il accueille","les enfants de six à douze ans, du lundi","au vendredi. Une garderie est assurée dès","sept heures trente."];
let marques = false;
function rendreDemo(){
const pil = marques ? '<span class="marque">¶</span>' : '';
const bon = marques ? PARA.replace(/ /g,'<span class="esp">·</span>') : PARA;
document.querySelector('#col-bon .txt').innerHTML = '<p>'+bon+pil+'</p>';
const mauvais = LIGNES.map(l=>{
const t = marques ? l.replace(/ /g,'<span class="esp">·</span>') : l;
return '<p style="margin:0">'+t+pil+'</p>';
}).join('');
document.querySelector('#col-mauvais .txt').innerHTML = mauvais;
}
document.getElementById('btn-marques').addEventListener('click', e=>{
marques = !marques;
e.target.setAttribute('aria-pressed', marques);
e.target.textContent = marques ? 'Masquer les marques' : 'Afficher les marques';
rendreDemo();
});
document.getElementById('taille').addEventListener('input', e=>{
const v = e.target.value;
document.getElementById('taille-val').textContent = v;
document.querySelectorAll('.demo-col .txt').forEach(n=>n.style.fontSize = v+'pt');
});
rendreDemo();
/* espacements fautifs, 8 erreurs */
const T_ESP = [
{t:"L'",f:true},{t:"animatrice"},{t:"a"},{t:"posé"},{t:"la"},{t:"question"},{t:"suivante"},
{t:":«",f:true},{t:"qui"},{t:"veut"},{t:"participer"},{t:"?"},{t:"»"},
{t:"Douze"},{t:"enfants"},{t:"ont"},{t:"levé"},{t:"la"},{t:"main"},{t:",trois",f:true},
{t:"sont"},{t:"restés"},{t:"silencieux"},{t:".",f:true},
{t:"Marie"},{t:"a"},{t:"expliqué"},{t:"le"},{t:"programme"},{t:":"},{t:"départ"},
{t:"à"},{t:"neuf"},{t:"heures"},{t:",retour",f:true},{t:"à"},{t:"seize"},{t:"heures."},
{t:"Attention"},{t:"!"},{t:"Les"},{t:"parents"},{t:"signent"},{t:"avant"},
{t:"mercredi"},{t:";aucune",f:true},{t:"inscription"},{t:"ne"},{t:"sera"},{t:"acceptée"},{t:"après"},{t:"cette"},{t:"date."},
{t:"Le"},{t:"prix(",f:true},{t:"cinq"},{t:"euros"},{t:")comprend",f:true},{t:"le"},{t:"transport."}
];
chasse(document.getElementById('chasse-esp'), document.getElementById('score-esp'),
document.getElementById('reset-esp'), document.getElementById('sol-esp'),
T_ESP, T_ESP.filter(j=>j.f).length, "Relis la règle : jamais d'espace avant la virgule ou le point.");
/* mots faux mais existants, 10 erreurs */
const T_MOT = [
{t:"Les"},{t:"enfants"},{t:"son",f:true},{t:"arrivés"},{t:"a",f:true},{t:"dix"},{t:"heures."},
{t:"L'animateur"},{t:"les"},{t:"a"},{t:"accueilli",f:true},{t:"dans"},{t:"la"},{t:"grande"},{t:"salle."},
{t:"Ceux"},{t:"qui"},{t:"avais",f:true},{t:"apporté"},{t:"leur"},{t:"pique-nique"},
{t:"l'on",f:true},{t:"déposé"},{t:"dans"},{t:"le"},{t:"frigo."},
{t:"Les"},{t:"autres"},{t:"on",f:true},{t:"reçu"},{t:"un"},{t:"ticket."},
{t:"La"},{t:"sortie"},{t:"et",f:true},{t:"prévue"},{t:"pour"},{t:"quatorze"},{t:"heures."},
{t:"Les"},{t:"parents"},{t:"qui"},{t:"souhaite",f:true},{t:"venir"},{t:"doivent"},
{t:"ce",f:true},{t:"faire"},{t:"connaître."},{t:"Le"},{t:"car"},{t:"peu",f:true},{t:"prendre"},{t:"cinquante"},{t:"personnes."}
];
chasse(document.getElementById('chasse-mots'), document.getElementById('score-mots'),
document.getElementById('reset-mots'), document.getElementById('sol-mots'),
T_MOT, T_MOT.filter(j=>j.f).length, "Et pourtant, le correcteur n'en souligne presque aucune.");
/* ---------- raccourcis filtrables ---------- */
const RACC = [
["Enregistrer","Ctrl+S"],
["Annuler la dernière action","Ctrl+Z"],
["Rétablir","Ctrl+Y"],
["Afficher les marques de paragraphe","Ctrl+F10"],
["Couper","Ctrl+X"],["Copier","Ctrl+C"],["Coller","Ctrl+V"],
["Coller sans la mise en forme","Ctrl+Maj+V"],
["Tout sélectionner","Ctrl+A"],
["Espace insécable","Ctrl+Maj+Espace"],
["Aller au début de la ligne","Origine"],
["Aller à la fin de la ligne","Fin"],
["Aller au début du document","Ctrl+Origine"],
["Aller à la fin du document","Ctrl+Fin"],
["Avancer d'un mot","Ctrl+flèche droite"],
["Sélectionner en se déplaçant","Maj + une touche de déplacement"],
["Sélectionner un mot","double-clic sur le mot"],
["Vérification orthographique","F7"],
["Rechercher et remplacer","Ctrl+H"]
];
const tb = document.querySelector('#tab-racc tbody');
function rendreRacc(q){
const f = q ? RACC.filter(r=>(r[0]+' '+r[1]).toLowerCase().includes(q.toLowerCase())) : RACC;
tb.innerHTML = f.length
? f.map(r=>'<tr><td>'+r[0]+'</td><td><code>'+r[1]+'</code></td></tr>').join('')
: '<tr><td colspan="2">Aucun raccourci ne correspond. Essaie un autre mot.</td></tr>';
}
document.getElementById('filtre').addEventListener('input', e=>rendreRacc(e.target.value));
rendreRacc('');
quiz(document.getElementById('quiz2'), [
{q:"Quand appuies-tu sur Entrée&nbsp;?",
r:["À la fin de chaque ligne","Seulement pour changer de paragraphe","Quand le texte touche la marge"],
b:1, e:"Le passage à la ligne est automatique. Entrée termine un paragraphe et en ouvre un autre."},
{q:"Quel espacement est correct&nbsp;?",
r:["Les enfants , les parents et les animateurs","Les enfants, les parents et les animateurs","Les enfants ,les parents et les animateurs"],
b:1, e:"Jamais d'espace avant la virgule, toujours une après."},
{q:"Comment obtient-on une espace insécable&nbsp;?",
r:["Ctrl+Maj+Espace","Deux fois la barre d'espace","Alt+Espace"],
b:0, e:"Elle empêche le logiciel de couper la ligne juste avant un signe comme ? ou :."},
{q:"Le correcteur ne souligne rien dans « les enfants son arrivés ». Pourquoi&nbsp;?",
r:["Il est mal réglé","Parce que « son » existe en français","Parce que la phrase est correcte"],
b:1, e:"Le correcteur vérifie l'existence des mots, pas leur place dans la phrase."},
{q:"Que fait <code>Ctrl+F10</code>&nbsp;?",
r:["Il enregistre le document","Il affiche les marques de paragraphe et les espaces","Il corrige l'orthographe"],
b:1, e:"C'est le moyen de voir ce que tu as réellement tapé quand quelque chose semble bizarre."},
{q:"Tu colles un texte venu d'un site web et il arrive avec sa mise en forme. Que fais-tu&nbsp;?",
r:["Tu le retapes","Tu utilises Ctrl+Maj+V et Texte non formaté","Tu changes la police à la main"],
b:1, e:"Le collage spécial en texte non formaté enlève tout ce qui vient du site."}
]);
/* ---------- chronomètre ---------- */
let reste = 300, tid = null;
const tEl = document.getElementById('temps');
const zone = document.getElementById('zone-frappe');
const motsEl = document.getElementById('mots');
const bilan = document.getElementById('bilan');
function affiche(){
const m = String(Math.floor(reste/60)).padStart(2,'0');
const s = String(reste%60).padStart(2,'0');
tEl.textContent = m+':'+s;
}
function compter(){
const n = zone.value.trim() ? zone.value.trim().split(/\s+/).length : 0;
motsEl.textContent = n;
return n;
}
function arreter(){
if(!tid && !zone.value) return; // rien n'a été lancé
clearInterval(tid); tid = null; zone.disabled = true;
bilan.innerHTML = '<strong>'+compter()+' mots en '+Math.round((300-reste)/60*10)/10+' minute(s).</strong> '
+ 'Relis maintenant et compte tes fautes de frappe, puis note les deux chiffres dans ta grille.';
}
document.getElementById('go').addEventListener('click',()=>{
if(tid) return;
reste = 300; affiche(); zone.disabled = false; zone.value = ''; compter();
bilan.textContent = ''; zone.focus();
tid = setInterval(()=>{ reste--; affiche(); if(reste<=0) arreter(); },1000);
});
document.getElementById('stop').addEventListener('click', arreter);
zone.addEventListener('input', compter);
affiche();
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink