Maquettes Claude Design avec visio de classe
This commit is contained in:
Adam Belkacemi
parent
238070ae54
commit
236d2d3567
243 changed files with 27992 additions and 0 deletions
242
design/_backup-ludique/resources/views/cours/cm.blade.php
Normal file
242
design/_backup-ludique/resources/views/cours/cm.blade.php
Normal file
|
|
@ -0,0 +1,242 @@
|
|||
@extends('layouts.vitrine')
|
||||
|
||||
@section('titre', 'CM · Adressage IPv4')
|
||||
|
||||
@section('contenu')
|
||||
<div class="sticky top-0 z-30 border-b-4 border-black bg-white">
|
||||
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-4 px-5 py-3 lg:px-10">
|
||||
<span class="border-2 border-black bg-white px-2 font-mono text-sm font-semibold">CM</span>
|
||||
<p class="min-w-0 flex-1 truncate font-extrabold">Adressage IPv4 et sous-réseaux</p>
|
||||
<p class="font-mono text-sm font-semibold">Lu : <span id="pct">0</span> %</p>
|
||||
<p class="flex items-center gap-2 border-2 border-black bg-[#FFD23F] px-3 py-1 font-mono font-semibold" role="timer"><span aria-hidden="true">⏱</span><span id="chrono">00:00</span><span class="text-xs">/ 20:00 conseillées</span></p>
|
||||
</div>
|
||||
<div class="h-2 bg-white"><div id="barre-lecture" class="h-full w-0 bg-[#ec3013]"></div></div>
|
||||
</div>
|
||||
<section class="border-b-4 border-black bg-white">
|
||||
<div class="mx-auto max-w-7xl px-5 pb-12 pt-10 lg:px-10">
|
||||
<nav aria-label="Fil d’Ariane" class="flex flex-wrap gap-2 font-semibold"><a href="{{ route('cours.index') }}" class="underline underline-offset-4">Cours</a><span>/</span><a href="{{ route('cours.show') }}" class="underline underline-offset-4">Adressage IPv4</a><span>/</span><span>CM</span></nav>
|
||||
<h1 class="mt-6 max-w-4xl text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl">Adressage IPv4 et sous-réseaux</h1>
|
||||
<p class="mt-6 max-w-2xl text-xl font-medium leading-relaxed">Lis le cours jusqu’au bout. Le QCM de lecture se débloque quand toutes les parties ont été lues et que 5 minutes se sont écoulées.</p>
|
||||
<ol class="mt-8 flex flex-wrap gap-2 text-sm font-extrabold" aria-label="Parcours">
|
||||
<li class="border-2 border-black bg-black px-3 py-1 text-white">1 · CM</li><li class="border-2 border-black bg-[#FFD23F] px-3 py-1">2 · QCM de lecture</li><li class="border-2 border-dashed border-black bg-white px-3 py-1">3 · TD optionnel</li><li class="border-2 border-black bg-[#7CF2C0] px-3 py-1">4 · TP</li><li class="border-2 border-black bg-[#ec3013] px-3 py-1 text-white">5 · Examen</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-14 lg:grid-cols-12 lg:px-10">
|
||||
<nav class="lg:col-span-3" aria-label="Parties du cours">
|
||||
<ol class="sticky top-24 grid gap-2">
|
||||
<li><a href="#pourquoi" data-lien="pourquoi" class="flex items-center gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFFBEA]"><span data-coche class="grid h-5 w-5 shrink-0 place-items-center border-2 border-black text-xs"></span>1. Pourquoi des adresses ?</a></li>
|
||||
<li><a href="#bits" data-lien="bits" class="flex items-center gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFFBEA]"><span data-coche class="grid h-5 w-5 shrink-0 place-items-center border-2 border-black text-xs"></span>2. Une adresse, 32 bits</a></li>
|
||||
<li><a href="#masque" data-lien="masque" class="flex items-center gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFFBEA]"><span data-coche class="grid h-5 w-5 shrink-0 place-items-center border-2 border-black text-xs"></span>3. Le masque de sous-réseau</a></li>
|
||||
<li><a href="#et" data-lien="et" class="flex items-center gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFFBEA]"><span data-coche class="grid h-5 w-5 shrink-0 place-items-center border-2 border-black text-xs"></span>4. Trouver l’adresse réseau : le ET logique</a></li>
|
||||
<li><a href="#diffusion" data-lien="diffusion" class="flex items-center gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFFBEA]"><span data-coche class="grid h-5 w-5 shrink-0 place-items-center border-2 border-black text-xs"></span>5. Diffusion et nombre d’hôtes</a></li>
|
||||
<li><a href="#decoupe" data-lien="decoupe" class="flex items-center gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFFBEA]"><span data-coche class="grid h-5 w-5 shrink-0 place-items-center border-2 border-black text-xs"></span>6. Découper un réseau en sous-réseaux</a></li>
|
||||
<li><a href="#privees" data-lien="privees" class="flex items-center gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFFBEA]"><span data-coche class="grid h-5 w-5 shrink-0 place-items-center border-2 border-black text-xs"></span>7. Adresses privées et adresses particulières</a></li>
|
||||
<li><a href="#retenir" data-lien="retenir" class="flex items-center gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFFBEA]"><span data-coche class="grid h-5 w-5 shrink-0 place-items-center border-2 border-black text-xs"></span>8. À retenir</a></li>
|
||||
</ol>
|
||||
</nav>
|
||||
<article class="grid gap-16 text-lg font-medium leading-relaxed lg:col-span-9">
|
||||
<section id="pourquoi" data-partie class="grid scroll-mt-28 gap-6" aria-labelledby="t-pourquoi">
|
||||
<h2 id="t-pourquoi" class="text-4xl font-black leading-tight tracking-tighter">1. Pourquoi des adresses ?</h2>
|
||||
<p>Sur un réseau, chaque machine doit pouvoir être trouvée. Comme une lettre a besoin d’une adresse postale, un paquet a besoin d’une adresse IP de destination.</p>
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
<div class="border-4 border-black bg-[#C4B5FD] p-5"><p class="font-mono text-sm font-semibold">La rue</p><p class="mt-1 text-2xl font-black">= le réseau</p><p class="mt-2 font-semibold">Toutes les maisons de la rue partagent le même nom de rue.</p></div>
|
||||
<div class="border-4 border-black bg-[#7CF2C0] p-5"><p class="font-mono text-sm font-semibold">Le numéro</p><p class="mt-1 text-2xl font-black">= l’hôte</p><p class="mt-2 font-semibold">Chaque maison a son numéro, unique dans la rue.</p></div>
|
||||
</div>
|
||||
<p>Une adresse IPv4 contient les deux informations. Le <strong>masque</strong> indique où s’arrête la rue et où commence le numéro.</p>
|
||||
</section>
|
||||
<section id="video" class="grid scroll-mt-28 gap-4 border-4 border-black bg-[#13233A] p-6 text-white shadow-[8px_8px_0px_#FF6FB5]" aria-labelledby="t-video">
|
||||
<h2 id="t-video" class="text-3xl font-black">Vidéo de contexte</h2>
|
||||
<div id="v-cadre" class="grid aspect-video place-items-center border-4 border-black bg-[#0D192B] text-center"><p class="max-w-md px-4 font-semibold text-[#9fb0c8]">Ton prof peut ajouter ici une vidéo YouTube pour illustrer le cours.</p></div>
|
||||
<form id="v-form" class="flex flex-wrap gap-3"><label class="sr-only" for="v-url">Lien YouTube</label><input id="v-url" class="min-w-[240px] flex-1 border-4 border-black px-3 py-2 font-mono text-sm font-semibold text-black" placeholder="https://www.youtube.com/watch?v=…"><button type="submit" class="border-4 border-black bg-[#FFD23F] px-4 py-2 font-extrabold text-black">Intégrer la vidéo</button></form>
|
||||
<p class="text-sm font-semibold text-[#9fb0c8]">Espace prof · la vidéo s’affiche en mode sans cookie (youtube-nocookie.com).</p>
|
||||
</section>
|
||||
<section id="bits" data-partie class="grid scroll-mt-28 gap-6" aria-labelledby="t-bits">
|
||||
<h2 id="t-bits" class="text-4xl font-black leading-tight tracking-tighter">2. Une adresse, 32 bits</h2>
|
||||
<p>Une adresse IPv4 est un nombre de <strong>32 bits</strong>. Pour la lire plus facilement, on la découpe en 4 octets de 8 bits, écrits en décimal et séparés par des points.</p>
|
||||
<figure class="overflow-x-auto border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]">
|
||||
<p class="font-mono text-2xl font-semibold">192.168.10.77</p>
|
||||
<div class="mt-4 flex min-w-max items-end gap-1"><span class="flex gap-0.5"><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span></span><span class="self-end px-0.5 font-black">.</span><span class="flex gap-0.5"><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span></span><span class="self-end px-0.5 font-black">.</span><span class="flex gap-0.5"><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span></span><span class="self-end px-0.5 font-black">.</span><span class="flex gap-0.5"><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-white">1</span></span></div>
|
||||
<figcaption class="mt-3 font-semibold">192 = 11000000 · 168 = 10101000 · 10 = 00001010 · 77 = 01001101</figcaption>
|
||||
</figure>
|
||||
<p>Chaque octet va de 0 (00000000) à 255 (11111111). Une adresse comme 192.168.10.300 est donc impossible.</p>
|
||||
</section>
|
||||
<section id="masque" data-partie class="grid scroll-mt-28 gap-6" aria-labelledby="t-masque">
|
||||
<h2 id="t-masque" class="text-4xl font-black leading-tight tracking-tighter">3. Le masque de sous-réseau</h2>
|
||||
<p>Le masque est lui aussi un nombre de 32 bits. Il commence par une suite de 1 (la partie réseau) suivie d’une suite de 0 (la partie hôte). La notation <strong>CIDR</strong> écrit simplement le nombre de 1 : <code class="border-2 border-black bg-[#FFD23F] px-1 font-mono">/26</code>.</p>
|
||||
<figure class="overflow-x-auto border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]">
|
||||
<p class="font-mono text-2xl font-semibold">/26 = 255.255.255.192</p>
|
||||
<div class="mt-4 flex min-w-max items-end gap-1"><span class="flex gap-0.5"><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span></span><span class="self-end px-0.5 font-black">.</span><span class="flex gap-0.5"><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span></span><span class="self-end px-0.5 font-black">.</span><span class="flex gap-0.5"><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span></span><span class="self-end px-0.5 font-black">.</span><span class="flex gap-0.5"><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#C4B5FD]">1</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#7CF2C0]">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#7CF2C0]">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#7CF2C0]">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#7CF2C0]">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#7CF2C0]">0</span><span class="grid h-7 w-5 place-items-center border-2 border-black font-mono text-xs font-semibold bg-[#7CF2C0]">0</span></span></div>
|
||||
<figcaption class="mt-3 flex flex-wrap gap-4 font-semibold"><span class="flex items-center gap-2"><span class="h-4 w-4 border-2 border-black bg-[#C4B5FD]"></span>26 bits de réseau</span><span class="flex items-center gap-2"><span class="h-4 w-4 border-2 border-black bg-[#7CF2C0]"></span>6 bits d’hôte</span></figcaption>
|
||||
</figure>
|
||||
<p>Dans le dernier octet, les 2 premiers bits valent 1 : 128 + 64 = 192. D’où 255.255.255.192.</p>
|
||||
</section>
|
||||
<section id="et" data-partie class="grid scroll-mt-28 gap-6" aria-labelledby="t-et">
|
||||
<h2 id="t-et" class="text-4xl font-black leading-tight tracking-tighter">4. Trouver l’adresse réseau : le ET logique</h2>
|
||||
<p>Pour trouver le réseau d’une adresse, on fait un <strong>ET logique</strong> bit à bit entre l’adresse et le masque. Le résultat vaut 1 seulement si les deux bits valent 1.</p>
|
||||
<div class="grid gap-6 md:grid-cols-2">
|
||||
<table class="border-4 border-black bg-white text-center font-mono text-lg shadow-[6px_6px_0px_#000000]"><caption class="sr-only">Table du ET logique</caption><thead class="bg-black text-white"><tr><th class="px-4 py-2">A</th><th class="px-4 py-2">B</th><th class="px-4 py-2">A ET B</th></tr></thead><tbody class="divide-y-2 divide-black"><tr><td class="py-1">0</td><td>0</td><td class="font-semibold">0</td></tr><tr><td class="py-1">0</td><td>1</td><td class="font-semibold">0</td></tr><tr><td class="py-1">1</td><td>0</td><td class="font-semibold">0</td></tr><tr class="bg-[#FFD23F]"><td class="py-1">1</td><td>1</td><td class="font-semibold">1</td></tr></tbody></table>
|
||||
<div class="border-4 border-black bg-[#13233A] p-5 font-mono text-white shadow-[6px_6px_0px_#7CF2C0]">
|
||||
<p class="text-sm text-[#9fb0c8]">Dernier octet seulement</p>
|
||||
<p class="mt-2"> 01001101 <span class="text-[#9fb0c8]">(77)</span></p>
|
||||
<p>ET 11000000 <span class="text-[#9fb0c8]">(192)</span></p>
|
||||
<p class="border-t-2 border-white pt-1 text-[#FFD23F]">= 01000000 (64)</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>Les trois premiers octets du masque valent 255 : ils recopient l’adresse telle quelle. L’adresse réseau de 192.168.10.77/26 est donc <strong>192.168.10.64</strong>.</p>
|
||||
</section>
|
||||
<section id="diffusion" data-partie class="grid scroll-mt-28 gap-6" aria-labelledby="t-diffusion">
|
||||
<h2 id="t-diffusion" class="text-4xl font-black leading-tight tracking-tighter">5. Diffusion et nombre d’hôtes</h2>
|
||||
<p>L’adresse de <strong>diffusion</strong> (broadcast) met tous les bits d’hôte à 1. Un paquet envoyé à cette adresse arrive à toutes les machines du réseau.</p>
|
||||
<p>Ici, les 6 bits d’hôte à 1 donnent 01111111 = 127 : la diffusion est <strong>192.168.10.127</strong>.</p>
|
||||
<div class="border-4 border-black bg-[#FF6FB5] p-5 text-xl font-black shadow-[6px_6px_0px_#000000]">Hôtes utilisables = 2<sup>bits d’hôte</sup> − 2</div>
|
||||
<p>On retire 2 adresses : celle du réseau et celle de diffusion. Avec 6 bits : 2⁶ − 2 = <strong>62 hôtes</strong>, de 192.168.10.65 à 192.168.10.126.</p>
|
||||
</section>
|
||||
<section id="decoupe" data-partie class="grid scroll-mt-28 gap-6" aria-labelledby="t-decoupe">
|
||||
<h2 id="t-decoupe" class="text-4xl font-black leading-tight tracking-tighter">6. Découper un réseau en sous-réseaux</h2>
|
||||
<p>Emprunter des bits d’hôte pour le réseau crée des sous-réseaux plus petits. Emprunter 2 bits à un /24 donne 2² = 4 sous-réseaux en /26.</p>
|
||||
<figure class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]">
|
||||
<p class="font-mono font-semibold">192.168.10.0/24 découpé en 4 × /26</p>
|
||||
<div class="mt-4 grid grid-cols-4 border-4 border-black font-mono text-sm font-semibold">
|
||||
<div class="border-r-4 border-black bg-[#FFD23F] p-3">.0<br>→ .63</div><div class="border-r-4 border-black bg-[#7CF2C0] p-3">.64<br>→ .127</div><div class="border-r-4 border-black bg-[#C4B5FD] p-3">.128<br>→ .191</div><div class="bg-[#FF6FB5] p-3">.192<br>→ .255</div>
|
||||
</div>
|
||||
<figcaption class="mt-3 font-semibold">Chaque bloc : 64 adresses, 62 hôtes. L’adresse .77 tombe dans le 2ᵉ bloc.</figcaption>
|
||||
</figure>
|
||||
<p>Astuce : la taille d’un bloc vaut 256 moins la valeur du dernier octet du masque. Pour 192 : 256 − 192 = 64.</p>
|
||||
</section>
|
||||
<section id="privees" data-partie class="grid scroll-mt-28 gap-6" aria-labelledby="t-privees">
|
||||
<h2 id="t-privees" class="text-4xl font-black leading-tight tracking-tighter">7. Adresses privées et adresses particulières</h2>
|
||||
<p>Certaines plages sont réservées aux réseaux internes (RFC 1918). Elles ne sont pas routées sur Internet.</p>
|
||||
<ul class="grid gap-3 sm:grid-cols-3"><li class="border-4 border-black bg-[#FFD23F] p-4 font-mono text-lg font-semibold">10.0.0.0/8</li><li class="border-4 border-black bg-[#7CF2C0] p-4 font-mono text-lg font-semibold">172.16.0.0/12</li><li class="border-4 border-black bg-[#C4B5FD] p-4 font-mono text-lg font-semibold">192.168.0.0/16</li></ul>
|
||||
<ul class="grid gap-2"><li class="flex flex-wrap gap-3"><span class="font-mono font-semibold">127.0.0.1</span><span>la boucle locale : la machine elle-même</span></li><li class="flex flex-wrap gap-3"><span class="font-mono font-semibold">169.254.x.x</span><span>adresse automatique quand aucun DHCP ne répond</span></li><li class="flex flex-wrap gap-3"><span class="font-mono font-semibold">0.0.0.0</span><span>« n’importe quelle adresse » ou « pas encore d’adresse »</span></li><li class="flex flex-wrap gap-3"><span class="font-mono font-semibold">255.255.255.255</span><span>diffusion limitée au réseau local</span></li></ul>
|
||||
</section>
|
||||
<section id="retenir" data-partie class="grid scroll-mt-28 gap-6" aria-labelledby="t-retenir">
|
||||
<h2 id="t-retenir" class="text-4xl font-black leading-tight tracking-tighter">8. À retenir</h2>
|
||||
<ul class="grid gap-3"><li class="flex gap-3 border-2 border-black bg-white p-3 font-bold"><span aria-hidden="true">■</span><span>Une adresse IPv4 = 32 bits = 4 octets de 0 à 255.</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-bold"><span aria-hidden="true">■</span><span>Le masque sépare la partie réseau de la partie hôte. /n = n bits à 1.</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-bold"><span aria-hidden="true">■</span><span>Adresse réseau = adresse ET masque. Diffusion = bits d’hôte à 1.</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-bold"><span aria-hidden="true">■</span><span>Hôtes utilisables = 2<sup>bits d’hôte</sup> − 2.</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-bold"><span aria-hidden="true">■</span><span>Taille d’un bloc = 256 − dernier octet du masque.</span></li></ul>
|
||||
</section>
|
||||
<section id="qcm-lecture" class="scroll-mt-28 border-4 border-black bg-[#FFD23F] p-6 shadow-[10px_10px_0px_#000000]" aria-labelledby="t-lecture">
|
||||
<h2 id="t-lecture" class="text-4xl font-black tracking-tighter">QCM de lecture</h2>
|
||||
<p class="mt-3 font-semibold">4 questions sur les notions du texte, pour vérifier que tu as bien lu.</p>
|
||||
<div id="verrou" class="mt-6 border-4 border-black bg-white p-5">
|
||||
<p class="text-xl font-black">🔒 Encore un peu de lecture</p>
|
||||
<p id="verrou-texte" class="mt-2 font-semibold">Parties lues : 0 / 8 · Temps : 0 / 5 min</p>
|
||||
<button type="button" id="debloquer" class="mt-4 text-sm font-bold underline underline-offset-4">Aperçu : débloquer sans attendre</button>
|
||||
</div>
|
||||
<form id="form-lecture" hidden class="mt-6 grid gap-6">
|
||||
|
||||
<fieldset class="border-4 border-black bg-white p-5 shadow-[5px_5px_0px_#000000]" data-q data-ok="2">
|
||||
<legend class="-ml-2 border-2 border-black bg-[#FFD23F] px-2 font-mono text-sm font-semibold">Question 1</legend>
|
||||
<p class="text-xl font-extrabold">Combien de bits contient une adresse IPv4 ?</p>
|
||||
<div class="mt-4 grid gap-2 sm:grid-cols-2">
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l0" value="0" class="h-5 w-5 accent-black"><span>8</span></label>
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l0" value="1" class="h-5 w-5 accent-black"><span>16</span></label>
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l0" value="2" class="h-5 w-5 accent-black"><span>32</span></label>
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l0" value="3" class="h-5 w-5 accent-black"><span>64</span></label>
|
||||
</div>
|
||||
<div data-correction hidden class="mt-4 border-2 border-black p-4"><p data-verdict class="font-black"></p><p class="mt-1 font-medium">Une adresse IPv4 fait 32 bits, découpés en 4 octets de 8 bits (partie 2).</p></div>
|
||||
</fieldset>
|
||||
<fieldset class="border-4 border-black bg-white p-5 shadow-[5px_5px_0px_#000000]" data-q data-ok="1">
|
||||
<legend class="-ml-2 border-2 border-black bg-[#FFD23F] px-2 font-mono text-sm font-semibold">Question 2</legend>
|
||||
<p class="text-xl font-extrabold">Dans l’analogie de l’adresse postale, à quoi correspond le numéro de la maison ?</p>
|
||||
<div class="mt-4 grid gap-2 sm:grid-cols-2">
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l1" value="0" class="h-5 w-5 accent-black"><span>Au réseau</span></label>
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l1" value="1" class="h-5 w-5 accent-black"><span>À l’hôte</span></label>
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l1" value="2" class="h-5 w-5 accent-black"><span>Au masque</span></label>
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l1" value="3" class="h-5 w-5 accent-black"><span>À la diffusion</span></label>
|
||||
</div>
|
||||
<div data-correction hidden class="mt-4 border-2 border-black p-4"><p data-verdict class="font-black"></p><p class="mt-1 font-medium">La rue représente le réseau, le numéro représente l’hôte, unique dans ce réseau (partie 1).</p></div>
|
||||
</fieldset>
|
||||
<fieldset class="border-4 border-black bg-white p-5 shadow-[5px_5px_0px_#000000]" data-q data-ok="2">
|
||||
<legend class="-ml-2 border-2 border-black bg-[#FFD23F] px-2 font-mono text-sm font-semibold">Question 3</legend>
|
||||
<p class="text-xl font-extrabold">Quelle opération permet de trouver l’adresse réseau ?</p>
|
||||
<div class="mt-4 grid gap-2 sm:grid-cols-2">
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l2" value="0" class="h-5 w-5 accent-black"><span>Un OU logique</span></label>
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l2" value="1" class="h-5 w-5 accent-black"><span>Une addition</span></label>
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l2" value="2" class="h-5 w-5 accent-black"><span>Un ET logique</span></label>
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l2" value="3" class="h-5 w-5 accent-black"><span>Une soustraction</span></label>
|
||||
</div>
|
||||
<div data-correction hidden class="mt-4 border-2 border-black p-4"><p data-verdict class="font-black"></p><p class="mt-1 font-medium">On fait un ET logique bit à bit entre l’adresse et le masque (partie 4).</p></div>
|
||||
</fieldset>
|
||||
<fieldset class="border-4 border-black bg-white p-5 shadow-[5px_5px_0px_#000000]" data-q data-ok="1">
|
||||
<legend class="-ml-2 border-2 border-black bg-[#FFD23F] px-2 font-mono text-sm font-semibold">Question 4</legend>
|
||||
<p class="text-xl font-extrabold">Laquelle de ces adresses est privée ?</p>
|
||||
<div class="mt-4 grid gap-2 sm:grid-cols-2">
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l3" value="0" class="h-5 w-5 accent-black"><span>8.8.8.8</span></label>
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l3" value="1" class="h-5 w-5 accent-black"><span>172.20.4.1</span></label>
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l3" value="2" class="h-5 w-5 accent-black"><span>172.32.0.1</span></label>
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="l3" value="3" class="h-5 w-5 accent-black"><span>193.168.1.1</span></label>
|
||||
</div>
|
||||
<div data-correction hidden class="mt-4 border-2 border-black p-4"><p data-verdict class="font-black"></p><p class="mt-1 font-medium">172.16.0.0/12 va de 172.16.0.0 à 172.31.255.255. 172.20.4.1 en fait partie, pas 172.32.0.1 (partie 7).</p></div>
|
||||
</fieldset>
|
||||
<div class="flex flex-wrap items-center gap-5"><button type="submit" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] disabled:cursor-not-allowed disabled:bg-[#444141] disabled:shadow-none">Valider ma lecture</button><p id="score-lecture" hidden class="border-4 border-black bg-white px-4 py-2 text-2xl font-black"></p></div>
|
||||
</form>
|
||||
</section>
|
||||
<section class="border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000]" aria-labelledby="t-plus">
|
||||
<h2 id="t-plus" class="text-2xl font-black">Pour aller plus loin</h2>
|
||||
<p class="mt-2 font-semibold">Des plateformes externes pour s’entraîner encore, à ton rythme. Elles ne font pas partie de Paillasse.</p>
|
||||
<div class="mt-4"><ul class="grid gap-2"><li><a href="https://www.hackerrank.com/domains/python" target="_blank" rel="noopener" class="flex items-center justify-between gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFD23F]"><span>HackerRank · Python</span><span class="font-mono" aria-hidden="true">↗</span></a></li><li><a href="https://www.hackerrank.com/domains/sql" target="_blank" rel="noopener" class="flex items-center justify-between gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFD23F]"><span>HackerRank · SQL</span><span class="font-mono" aria-hidden="true">↗</span></a></li><li><a href="https://www.hackerrank.com/domains/shell" target="_blank" rel="noopener" class="flex items-center justify-between gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFD23F]"><span>HackerRank · Linux Shell</span><span class="font-mono" aria-hidden="true">↗</span></a></li><li><a href="https://www.datacamp.com/category/python" target="_blank" rel="noopener" class="flex items-center justify-between gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFD23F]"><span>DataCamp · Python</span><span class="font-mono" aria-hidden="true">↗</span></a></li><li><a href="https://www.datacamp.com/category/sql" target="_blank" rel="noopener" class="flex items-center justify-between gap-3 border-2 border-black bg-white px-3 py-2 font-bold hover:bg-[#FFD23F]"><span>DataCamp · SQL</span><span class="font-mono" aria-hidden="true">↗</span></a></li></ul></div>
|
||||
</section>
|
||||
<section id="suite" hidden class="grid gap-6 md:grid-cols-3" aria-label="Étapes suivantes">
|
||||
<a href="{{ route('cours.show') }}#td" class="relative border-4 border-dashed border-black bg-white p-6 shadow-[6px_6px_0px_#000000] hover:-translate-y-1"><span class="absolute -right-3 -top-4 rotate-3 border-2 border-black bg-[#C4B5FD] px-2 text-sm font-extrabold">Optionnel</span><p class="font-mono text-sm font-semibold">Étape 3</p><p class="mt-2 text-2xl font-black">TD corrigé</p><p class="mt-2 font-semibold">3 exercices pour s’entraîner.</p></a>
|
||||
<a href="{{ route('labs.essai') }}" class="border-4 border-black bg-[#7CF2C0] p-6 shadow-[6px_6px_0px_#000000] hover:-translate-y-1"><p class="font-mono text-sm font-semibold">Étape 4</p><p class="mt-2 text-2xl font-black">TP sur VM</p><p class="mt-2 font-semibold">Deux VM, un routeur, 45 min.</p></a>
|
||||
<a href="{{ route('examen') }}" class="border-4 border-black bg-black p-6 text-white shadow-[6px_6px_0px_#ec3013] hover:-translate-y-1"><p class="font-mono text-sm font-semibold">Étape 5</p><p class="mt-2 text-2xl font-black">Examen</p><p class="mt-2 font-semibold">Quand ton prof le programme.</p></a>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
<script>
|
||||
(function () {
|
||||
var debut = Date.now(), vues = {}, total = 8, MIN = 300, force = false;
|
||||
var chrono = document.getElementById('chrono'), pct = document.getElementById('pct'), barre = document.getElementById('barre-lecture');
|
||||
var verrou = document.getElementById('verrou'), vt = document.getElementById('verrou-texte'), form = document.getElementById('form-lecture');
|
||||
function s() { return Math.floor((Date.now() - debut) / 1000); }
|
||||
function maj() {
|
||||
var t = s(), n = Object.keys(vues).length;
|
||||
chrono.textContent = String(Math.floor(t / 60)).padStart(2, '0') + ':' + String(t % 60).padStart(2, '0');
|
||||
var p = Math.round(n / total * 100); pct.textContent = p; barre.style.width = p + '%';
|
||||
vt.textContent = 'Parties lues : ' + n + ' / ' + total + ' · Temps : ' + Math.min(5, Math.floor(t / 60)) + ' / 5 min';
|
||||
if (force || (n === total && t >= MIN)) { verrou.hidden = true; form.hidden = false; }
|
||||
}
|
||||
var io = new IntersectionObserver(function (es) {
|
||||
es.forEach(function (e) {
|
||||
if (e.isIntersecting && e.intersectionRatio > 0.35) {
|
||||
vues[e.target.id] = true;
|
||||
var a = document.querySelector('[data-lien="' + e.target.id + '"]');
|
||||
if (a) { a.classList.add('bg-[#7CF2C0]'); a.querySelector('[data-coche]').textContent = '✓'; a.querySelector('[data-coche]').classList.add('bg-black', 'text-white'); }
|
||||
}
|
||||
});
|
||||
maj();
|
||||
}, { threshold: [0.35] });
|
||||
document.querySelectorAll('[data-partie]').forEach(function (el) { io.observe(el); });
|
||||
document.getElementById('debloquer').addEventListener('click', function () { force = true; maj(); });
|
||||
setInterval(maj, 1000); maj();
|
||||
})();
|
||||
|
||||
(function () {
|
||||
var form = document.getElementById('form-lecture'), score = document.getElementById('score-lecture');
|
||||
form.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
var bons = 0, total = 0;
|
||||
form.querySelectorAll('[data-q]').forEach(function (q) {
|
||||
total++;
|
||||
var choix = q.querySelector('input:checked'), ok = choix && choix.value === q.dataset.ok, c = q.querySelector('[data-correction]');
|
||||
if (ok) bons++;
|
||||
c.hidden = false; c.className = 'mt-4 border-2 border-black p-4 ' + (ok ? 'bg-[#7CF2C0]' : 'bg-[#FFD9E8]');
|
||||
q.querySelector('[data-verdict]').textContent = ok ? 'Bonne réponse.' : (choix ? 'Pas tout à fait.' : 'Pas de réponse.');
|
||||
q.querySelectorAll('label').forEach(function (l, i) { var b = String(i) === q.dataset.ok; l.classList.toggle('outline', b); l.classList.toggle('outline-4', b); l.classList.toggle('outline-black', b); });
|
||||
});
|
||||
score.hidden = false; score.textContent = bons + ' / ' + total;
|
||||
document.getElementById('suite').hidden = false;
|
||||
});
|
||||
})();
|
||||
(function () {
|
||||
var cadre = document.getElementById('v-cadre'), cle = 'paillasse-video-' + location.pathname;
|
||||
function montrer(u) {
|
||||
var m = String(u).match(/(?:youtu\.be\/|v=|embed\/|shorts\/)([\w-]{11})/); if (!m) return false;
|
||||
cadre.innerHTML = '<iframe class="h-full w-full" src="https://www.youtube-nocookie.com/embed/' + m[1] + '" title="Vidéo de contexte" allow="accelerometer; encrypted-media; picture-in-picture" allowfullscreen></iframe>';
|
||||
return true;
|
||||
}
|
||||
var s = localStorage.getItem(cle); if (s) montrer(s);
|
||||
document.getElementById('v-form').addEventListener('submit', function (e) { e.preventDefault(); var u = document.getElementById('v-url').value; if (montrer(u)) localStorage.setItem(cle, u); else alert('Lien YouTube non reconnu.'); });
|
||||
})();
|
||||
</script>
|
||||
@endsection
|
||||
88
design/_backup-ludique/resources/views/cours/index.blade.php
Normal file
88
design/_backup-ludique/resources/views/cours/index.blade.php
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
@extends('layouts.vitrine')
|
||||
|
||||
@section('titre', 'Cours gratuits')
|
||||
|
||||
@section('contenu')
|
||||
<section class="relative overflow-hidden border-b-4 border-black bg-white">
|
||||
<div aria-hidden="true" class="pointer-events-none absolute inset-0"><span class="zigzag absolute right-10 top-16 h-4 w-40"></span><span class="etoile flotte absolute right-[22%] bottom-24 h-10 w-10 bg-[#C4B5FD] [--r:12deg]"></span><span class="flotte absolute right-[8%] bottom-10 h-9 w-9 rounded-full border-4 border-black bg-[#7CF2C0] [animation-delay:1.5s]"></span></div>
|
||||
<div class="relative mx-auto max-w-7xl px-5 pb-16 pt-14 lg:px-10 lg:pt-20">
|
||||
<p class="inline-block -rotate-2 border-2 border-black bg-[#FFD23F] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Gratuit, sans compte</p>
|
||||
<h1 class="mt-8 max-w-5xl text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl xl:text-8xl">99 cours gratuits, calés sur vos référentiels.</h1>
|
||||
<p class="mt-8 max-w-2xl text-xl font-medium leading-relaxed">Chaque cours suit le découpage de l’Éducation nationale : un CM pour comprendre, un TD pour s’exercer sur papier, un TP sur une vraie VM, un QCM corrigé et expliqué.</p>
|
||||
<dl class="mt-12 grid max-w-3xl grid-cols-2 border-4 border-black sm:grid-cols-4">
|
||||
<div class="border-b-4 border-r-4 border-black bg-white p-4 sm:border-b-0"><dt class="font-mono text-sm font-semibold">Cours</dt><dd class="text-4xl font-black">99</dd></div>
|
||||
<div class="border-b-4 border-black bg-[#C4B5FD] p-4 sm:border-b-0 sm:border-r-4"><dt class="font-mono text-sm font-semibold">TD</dt><dd class="text-4xl font-black">45</dd></div>
|
||||
<div class="border-r-4 border-black bg-[#7CF2C0] p-4"><dt class="font-mono text-sm font-semibold">TP sur VM</dt><dd class="text-4xl font-black">59</dd></div>
|
||||
<div class="bg-[#FFD23F] p-4"><dt class="font-mono text-sm font-semibold">QCM corrigés</dt><dd class="text-4xl font-black">98</dd></div>
|
||||
</dl>
|
||||
<div class="mt-8 flex flex-wrap gap-4"><a href="{{ route('bibliotheque') }}" class="inline-flex items-center gap-3 border-4 border-black bg-black px-5 py-3 font-extrabold text-white shadow-[4px_4px_0px_#ec3013]">Bibliothèque complète · 225 fiches →</a><a href="{{ route('generateur') }}" class="inline-flex items-center gap-3 border-4 border-black bg-[#FF6FB5] px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000]">Générateur de TD</a><a href="{{ route('ide') }}" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000]">IDE en ligne</a></div>
|
||||
</div>
|
||||
</section>
|
||||
<nav class="sticky top-0 z-20 border-b-4 border-black bg-white" aria-label="Filtres des cours">
|
||||
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-3 px-5 py-4 lg:px-10">
|
||||
<span class="mr-1 font-extrabold">Cursus</span>
|
||||
<a href="#nsi" class="border-2 border-black bg-[#FFD23F] px-3 py-1 font-extrabold hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Lycée NSI</a>
|
||||
<a href="#sio" class="border-2 border-black bg-[#7CF2C0] px-3 py-1 font-extrabold hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">BTS SIO SISR</a>
|
||||
<a href="#ciel" class="border-2 border-black bg-[#C4B5FD] px-3 py-1 font-extrabold hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">BTS CIEL</a>
|
||||
<a href="#but" class="border-2 border-black bg-[#FF6FB5] px-3 py-1 font-extrabold hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">BUT R&T</a>
|
||||
<a href="#tssr" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Titre pro TSSR</a>
|
||||
<a href="#prog" class="border-2 border-black bg-[#FF6FB5] px-3 py-1 font-extrabold hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Programmation</a>
|
||||
<div class="ml-auto flex flex-wrap items-center gap-2" role="group" aria-label="Filtrer par type">
|
||||
<span class="mr-1 font-extrabold">Contient</span>
|
||||
<button type="button" data-filtre="Tout" aria-pressed="true" class="border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold aria-pressed:bg-black aria-pressed:text-white">Tout</button>
|
||||
<button type="button" data-filtre="TD" aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold aria-pressed:bg-black aria-pressed:text-white">TD</button>
|
||||
<button type="button" data-filtre="TP" aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold aria-pressed:bg-black aria-pressed:text-white">TP</button>
|
||||
<button type="button" data-filtre="QCM" aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold aria-pressed:bg-black aria-pressed:text-white">QCM</button>
|
||||
<button type="button" data-filtre="IDE" aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold aria-pressed:bg-black aria-pressed:text-white">IDE</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="border-b-4 border-black bg-white">
|
||||
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-4 px-5 py-3 text-sm font-semibold lg:px-10">
|
||||
<span class="flex items-center gap-2"><span class="border-2 border-black bg-white px-1.5 font-mono text-xs font-semibold">CM</span> Cours magistral</span>
|
||||
<span class="flex items-center gap-2"><span class="border-2 border-black bg-[#C4B5FD] px-1.5 font-mono text-xs font-semibold">TD</span> Travaux dirigés, corrigés</span>
|
||||
<span class="flex items-center gap-2"><span class="border-2 border-black bg-[#7CF2C0] px-1.5 font-mono text-xs font-semibold">TP</span> Travaux pratiques sur VM</span>
|
||||
<span class="flex items-center gap-2"><span class="border-2 border-black bg-[#FFD23F] px-1.5 font-mono text-xs font-semibold">QCM</span> Quiz à correction expliquée</span>
|
||||
<span class="flex items-center gap-2"><span class="border-2 border-black bg-[#13233A] text-white px-1.5 font-mono text-xs font-semibold">IDE</span> Exercice de code dans l’IDE</span>
|
||||
</div>
|
||||
</div>
|
||||
@php
|
||||
$cursus = config('cours');
|
||||
$fond = ['CM' => 'bg-white', 'TD' => 'bg-[#C4B5FD]', 'TP' => 'bg-[#7CF2C0]', 'QCM' => 'bg-[#FFD23F]', 'IDE' => 'bg-[#13233A] text-white'];
|
||||
@endphp
|
||||
@foreach ($cursus as $c)
|
||||
<section id="{{ $c['id'] }}" class="scroll-mt-24 border-b-4 border-black" aria-labelledby="t-{{ $c['id'] }}">
|
||||
<div class="mx-auto max-w-7xl px-5 py-16 lg:px-10">
|
||||
<div class="flex flex-wrap items-end gap-x-8 gap-y-3">
|
||||
<h2 id="t-{{ $c['id'] }}" class="inline-block {{ $loop->odd ? '-rotate-1' : 'rotate-1' }} border-4 border-black {{ $c['couleur'] }} px-4 py-1 text-5xl font-black tracking-tighter shadow-[6px_6px_0px_#000000] sm:text-6xl">{{ $c['nom'] }}</h2>
|
||||
<p class="text-lg font-semibold">{{ $c['sous_titre'] }} · {{ collect($c['blocs'])->sum(fn ($b) => count($b['cours'])) }} cours</p>
|
||||
</div>
|
||||
<div class="mt-12 grid gap-10 lg:grid-cols-2">
|
||||
@foreach ($c['blocs'] as $b)
|
||||
<div data-bloc class="border-4 border-black bg-white shadow-[6px_6px_0px_#000000] {{ $loop->even ? 'lg:translate-y-6' : '' }}">
|
||||
<h3 class="border-b-4 border-black {{ $c['couleur'] }} px-5 py-3 text-lg font-black">{{ $b['titre'] }}</h3>
|
||||
<ul class="divide-y-2 divide-black">
|
||||
@foreach ($b['cours'] as $k)
|
||||
<li data-types="{{ implode(' ', $k['types']) }}"><a href="{{ isset($k['exercice']) ? route('ide', ['ex' => $k['exercice']]) : route('cours.show') }}" class="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3 hover:bg-[#FFFBEA]"><span class="min-w-0 flex-1 font-extrabold">{{ $k['titre'] }}</span><span class="flex gap-1">@foreach ($k['types'] as $t)<span class="border-2 border-black {{ $fond[$t] }} px-1.5 font-mono text-xs font-semibold">{{ $t }}</span>@endforeach</span><span class="w-10 text-right font-mono text-sm font-semibold">{{ $k['heures'] }} h</span></a></li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@endforeach
|
||||
<script>
|
||||
document.querySelectorAll('[data-filtre]').forEach(function (b) {
|
||||
b.addEventListener('click', function () {
|
||||
var f = b.dataset.filtre;
|
||||
document.querySelectorAll('[data-filtre]').forEach(function (x) { x.setAttribute('aria-pressed', x === b); });
|
||||
document.querySelectorAll('[data-types]').forEach(function (li) {
|
||||
li.hidden = f !== 'Tout' && li.dataset.types.split(' ').indexOf(f) === -1;
|
||||
});
|
||||
document.querySelectorAll('[data-bloc]').forEach(function (b) { b.hidden = !b.querySelector('[data-types]:not([hidden])'); });
|
||||
document.querySelectorAll('section[id]').forEach(function (s) { if (s.querySelector('[data-bloc]')) s.hidden = !s.querySelector('[data-bloc]:not([hidden])'); });
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
224
design/_backup-ludique/resources/views/cours/show.blade.php
Normal file
224
design/_backup-ludique/resources/views/cours/show.blade.php
Normal file
|
|
@ -0,0 +1,224 @@
|
|||
@extends('layouts.vitrine')
|
||||
|
||||
@section('titre', 'Adressage IPv4 et sous-réseaux')
|
||||
|
||||
@section('contenu')
|
||||
<section class="border-b-4 border-black bg-[#7CF2C0]">
|
||||
<div class="mx-auto max-w-7xl px-5 pb-14 pt-10 lg:px-10">
|
||||
<nav aria-label="Fil d’Ariane" class="flex flex-wrap gap-2 font-semibold"><a href="{{ route('cours.index') }}" class="underline underline-offset-4">Cours</a><span>/</span><a href="{{ route('cours.index') }}#sio" class="underline underline-offset-4">BTS SIO SISR</a><span>/</span><span>Bloc 2</span></nav>
|
||||
<h1 class="mt-6 max-w-4xl text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl">Adressage IPv4 et sous-réseaux</h1>
|
||||
<div class="mt-8 flex flex-wrap gap-3 text-sm font-extrabold">
|
||||
<span class="border-2 border-black bg-white px-3 py-1">BTS SIO SISR · Bloc 2</span>
|
||||
<span class="border-2 border-black bg-white px-3 py-1">Aussi : BTS CIEL, BUT R&T S1</span>
|
||||
<span class="border-2 border-black bg-black px-3 py-1 text-white">4 h</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 lg:grid-cols-12 lg:px-10">
|
||||
<nav class="lg:col-span-3" aria-label="Parties du cours">
|
||||
<ol class="sticky top-6 grid gap-3">
|
||||
<li><a href="{{ route('cours.cm') }}" class="flex items-center gap-3 border-4 border-black bg-white px-4 py-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:bg-[#FFFBEA]"><span class="font-mono">1</span> CM · Lire</a></li>
|
||||
<li><a href="#qcm" class="flex items-center gap-3 border-4 border-black bg-[#FFD23F] px-4 py-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><span class="font-mono">2</span> QCM · Valider</a></li>
|
||||
<li><a href="#td" class="flex items-center gap-3 border-4 border-dashed border-black bg-[#C4B5FD] px-4 py-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><span class="font-mono">3</span> TD · optionnel</a></li>
|
||||
<li><a href="#tp" class="flex items-center gap-3 border-4 border-black bg-[#7CF2C0] px-4 py-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><span class="font-mono">4</span> TP · Pratiquer</a></li>
|
||||
<li><a href="#exam" class="flex items-center gap-3 border-4 border-black bg-black px-4 py-3 font-extrabold text-white shadow-[4px_4px_0px_#ec3013] hover:bg-[#ec3013]"><span class="font-mono">5</span> Examen</a></li>
|
||||
</ol>
|
||||
</nav>
|
||||
<div class="grid gap-20 lg:col-span-9">
|
||||
<section id="cm" class="scroll-mt-6" aria-labelledby="t-cm">
|
||||
<h2 id="t-cm" class="text-5xl font-black tracking-tighter"><span class="font-mono text-2xl align-middle">1 · CM ·</span> Lire le cours</h2>
|
||||
<a href="{{ route('cours.cm') }}" class="mt-8 grid gap-6 border-4 border-black bg-white p-7 shadow-[8px_8px_0px_#000000] transition-transform hover:-translate-y-1 md:grid-cols-[1fr_auto]">
|
||||
<div>
|
||||
<p class="text-3xl font-black leading-tight">Adressage IPv4 et sous-réseaux · cours complet</p>
|
||||
<p class="mt-3 text-lg font-semibold">8 parties illustrées : bits, masque, ET logique, diffusion, découpage, adresses privées. Chronométré, à lire en entier pour débloquer le QCM de lecture.</p>
|
||||
</div>
|
||||
<div class="grid content-start gap-2 text-center"><span class="border-4 border-black bg-[#FFD23F] px-4 py-2 font-mono text-2xl font-semibold">⏱ 20 min</span><span class="font-extrabold">Lire le CM →</span></div>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<section id="qcm" class="scroll-mt-6" aria-labelledby="t-qcm">
|
||||
<div class="flex flex-wrap items-end justify-between gap-4">
|
||||
<h2 id="t-qcm" class="text-5xl font-black tracking-tighter"><span class="font-mono text-2xl align-middle">2 · QCM ·</span> Valider les notions</h2>
|
||||
<p class="font-semibold">5 questions · correction expliquée</p>
|
||||
</div>
|
||||
<form id="qcm-form" class="mt-8 grid gap-6">
|
||||
|
||||
<fieldset class="border-4 border-black bg-white p-5 shadow-[5px_5px_0px_#000000]" data-q data-ok="1">
|
||||
<legend class="-ml-2 border-2 border-black bg-[#FFD23F] px-2 font-mono text-sm font-semibold">Question 1</legend>
|
||||
<p class="text-xl font-extrabold">Combien d’adresses d’hôtes utilisables dans un réseau /27 ?</p>
|
||||
<div class="mt-4 grid gap-2 sm:grid-cols-2">
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q0" value="0" class="h-5 w-5 accent-black"><span class="font-mono">32</span></label>
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q0" value="1" class="h-5 w-5 accent-black"><span class="font-mono">30</span></label>
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q0" value="2" class="h-5 w-5 accent-black"><span class="font-mono">27</span></label>
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q0" value="3" class="h-5 w-5 accent-black"><span class="font-mono">62</span></label>
|
||||
</div>
|
||||
<div data-correction hidden class="mt-4 border-2 border-black p-4">
|
||||
<p data-verdict class="font-black"></p>
|
||||
<p class="mt-1 font-medium">Un /27 laisse 32 − 27 = 5 bits pour les hôtes, soit 2⁵ = 32 adresses. On retire l’adresse du réseau et celle de diffusion : il reste 30 hôtes.</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="border-4 border-black bg-white p-5 shadow-[5px_5px_0px_#000000]" data-q data-ok="2">
|
||||
<legend class="-ml-2 border-2 border-black bg-[#FFD23F] px-2 font-mono text-sm font-semibold">Question 2</legend>
|
||||
<p class="text-xl font-extrabold">Quelle est l’adresse réseau de 10.0.3.200/22 ?</p>
|
||||
<div class="mt-4 grid gap-2 sm:grid-cols-2">
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q1" value="0" class="h-5 w-5 accent-black"><span class="font-mono">10.0.3.0</span></label>
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q1" value="1" class="h-5 w-5 accent-black"><span class="font-mono">10.0.2.0</span></label>
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q1" value="2" class="h-5 w-5 accent-black"><span class="font-mono">10.0.0.0</span></label>
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q1" value="3" class="h-5 w-5 accent-black"><span class="font-mono">10.0.4.0</span></label>
|
||||
</div>
|
||||
<div data-correction hidden class="mt-4 border-2 border-black p-4">
|
||||
<p data-verdict class="font-black"></p>
|
||||
<p class="mt-1 font-medium">Le masque /22 vaut 255.255.252.0. Sur le 3ᵉ octet, 3 ET 252 = 0. L’adresse réseau est donc 10.0.0.0, et le réseau va jusqu’à 10.0.3.255.</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="border-4 border-black bg-white p-5 shadow-[5px_5px_0px_#000000]" data-q data-ok="1">
|
||||
<legend class="-ml-2 border-2 border-black bg-[#FFD23F] px-2 font-mono text-sm font-semibold">Question 3</legend>
|
||||
<p class="text-xl font-extrabold">Quel masque correspond à /26 ?</p>
|
||||
<div class="mt-4 grid gap-2 sm:grid-cols-2">
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q2" value="0" class="h-5 w-5 accent-black"><span class="font-mono">255.255.255.128</span></label>
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q2" value="1" class="h-5 w-5 accent-black"><span class="font-mono">255.255.255.192</span></label>
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q2" value="2" class="h-5 w-5 accent-black"><span class="font-mono">255.255.255.224</span></label>
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q2" value="3" class="h-5 w-5 accent-black"><span class="font-mono">255.255.255.240</span></label>
|
||||
</div>
|
||||
<div data-correction hidden class="mt-4 border-2 border-black p-4">
|
||||
<p data-verdict class="font-black"></p>
|
||||
<p class="mt-1 font-medium">26 bits = 24 bits (255.255.255) + 2 bits dans le dernier octet. 2 bits à 1 à gauche : 128 + 64 = 192.</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="border-4 border-black bg-white p-5 shadow-[5px_5px_0px_#000000]" data-q data-ok="1">
|
||||
<legend class="-ml-2 border-2 border-black bg-[#FFD23F] px-2 font-mono text-sm font-semibold">Question 4</legend>
|
||||
<p class="text-xl font-extrabold">192.168.1.130/25 et 192.168.1.100/25 sont-ils dans le même réseau ?</p>
|
||||
<div class="mt-4 grid gap-2 sm:grid-cols-2">
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q3" value="0" class="h-5 w-5 accent-black"><span class="font-mono">Oui</span></label>
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q3" value="1" class="h-5 w-5 accent-black"><span class="font-mono">Non</span></label>
|
||||
</div>
|
||||
<div data-correction hidden class="mt-4 border-2 border-black p-4">
|
||||
<p data-verdict class="font-black"></p>
|
||||
<p class="mt-1 font-medium">Avec /25, le dernier octet se coupe en deux blocs : 0 à 127 et 128 à 255. 100 est dans le premier, 130 dans le second. Il faut un routeur pour qu’ils communiquent.</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="border-4 border-black bg-white p-5 shadow-[5px_5px_0px_#000000]" data-q data-ok="1">
|
||||
<legend class="-ml-2 border-2 border-black bg-[#FFD23F] px-2 font-mono text-sm font-semibold">Question 5</legend>
|
||||
<p class="text-xl font-extrabold">Quelle commande affiche les adresses IP sous Debian ?</p>
|
||||
<div class="mt-4 grid gap-2 sm:grid-cols-2">
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q4" value="0" class="h-5 w-5 accent-black"><span class="font-mono">ipconfig</span></label>
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q4" value="1" class="h-5 w-5 accent-black"><span class="font-mono">ip addr</span></label>
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q4" value="2" class="h-5 w-5 accent-black"><span class="font-mono">ifconfig /all</span></label>
|
||||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q4" value="3" class="h-5 w-5 accent-black"><span class="font-mono">netstat -r</span></label>
|
||||
</div>
|
||||
<div data-correction hidden class="mt-4 border-2 border-black p-4">
|
||||
<p data-verdict class="font-black"></p>
|
||||
<p class="mt-1 font-medium">ip addr (ou ip a) fait partie d’iproute2, installé par défaut. ipconfig est une commande Windows, et ifconfig vient de net-tools, qui n’est plus installé par défaut.</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="flex flex-wrap items-center gap-5">
|
||||
<button type="submit" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none">Corriger mon QCM</button>
|
||||
<button type="reset" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] transition-transform hover:bg-[#FFD23F] active:translate-x-1 active:translate-y-1 active:shadow-none">Recommencer</button>
|
||||
<p id="qcm-score" class="border-4 border-black bg-[#FFD23F] px-4 py-2 text-2xl font-black" hidden></p>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section id="td" class="scroll-mt-6" aria-labelledby="t-td">
|
||||
<h2 id="t-td" class="text-5xl font-black tracking-tighter"><span class="font-mono text-2xl align-middle">3 · TD ·</span> S’exercer <span class="ml-2 inline-block rotate-2 border-2 border-black bg-[#C4B5FD] px-2 align-middle text-base">optionnel</span></h2>
|
||||
<ol class="mt-8 grid gap-6">
|
||||
<li class="border-4 border-black bg-[#C4B5FD] p-6 shadow-[6px_6px_0px_#000000] ">
|
||||
<p class="font-mono text-sm font-semibold">Exercice 1</p>
|
||||
<p class="mt-2 text-xl font-extrabold">Pour 172.16.5.130/25, donnez l’adresse réseau, la diffusion et le nombre d’hôtes.</p>
|
||||
<details class="mt-4 border-2 border-black bg-white">
|
||||
<summary class="cursor-pointer px-4 py-2 font-extrabold">Voir la correction expliquée</summary>
|
||||
<p class="border-t-2 border-black px-4 py-3 font-medium">Un /25 coupe le dernier octet en blocs de 128. 130 est dans le bloc 128–255. Réseau : 172.16.5.128. Diffusion : 172.16.5.255. Hôtes : 2⁷ − 2 = 126.</p>
|
||||
</details>
|
||||
</li>
|
||||
<li class="border-4 border-black bg-[#C4B5FD] p-6 shadow-[6px_6px_0px_#000000] md:ml-10">
|
||||
<p class="font-mono text-sm font-semibold">Exercice 2</p>
|
||||
<p class="mt-2 text-xl font-extrabold">Découpez 192.168.1.0/24 en 4 sous-réseaux de même taille.</p>
|
||||
<details class="mt-4 border-2 border-black bg-white">
|
||||
<summary class="cursor-pointer px-4 py-2 font-extrabold">Voir la correction expliquée</summary>
|
||||
<p class="border-t-2 border-black px-4 py-3 font-medium">4 sous-réseaux = 2 bits empruntés, donc /26. Sous-réseaux : 192.168.1.0, .64, .128 et .192, avec 62 hôtes chacun.</p>
|
||||
</details>
|
||||
</li>
|
||||
<li class="border-4 border-black bg-[#C4B5FD] p-6 shadow-[6px_6px_0px_#000000] ">
|
||||
<p class="font-mono text-sm font-semibold">Exercice 3</p>
|
||||
<p class="mt-2 text-xl font-extrabold">Le service comptabilité a 50 postes. Quel est le plus petit sous-réseau qui convient ?</p>
|
||||
<details class="mt-4 border-2 border-black bg-white">
|
||||
<summary class="cursor-pointer px-4 py-2 font-extrabold">Voir la correction expliquée</summary>
|
||||
<p class="border-t-2 border-black px-4 py-3 font-medium">Il faut 2ʰ − 2 ≥ 50. Avec h = 6 : 64 − 2 = 62. On garde 6 bits d’hôte, soit un /26 (255.255.255.192). Un /27 ne donnerait que 30 hôtes.</p>
|
||||
</details>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<section id="tp" class="scroll-mt-6" aria-labelledby="t-tp">
|
||||
<h2 id="t-tp" class="text-5xl font-black tracking-tighter"><span class="font-mono text-2xl align-middle">4 · TP ·</span> Pratiquer sur VM</h2>
|
||||
<div class="mt-8 grid gap-8 md:grid-cols-2">
|
||||
<div class="border-4 border-black bg-[#7CF2C0] p-6 shadow-[6px_6px_0px_#000000]">
|
||||
<h3 class="text-2xl font-black">Deux VM, un routeur</h3>
|
||||
<ol class="mt-4 grid gap-2 font-semibold">
|
||||
<li>1. Placez deux VM dans 192.168.10.0/26.</li>
|
||||
<li>2. Vérifiez qu’elles se joignent avec ping.</li>
|
||||
<li>3. Passez la seconde en 192.168.10.70/26.</li>
|
||||
<li>4. Constatez l’échec, puis ajoutez une route.</li>
|
||||
</ol>
|
||||
<p class="mt-4 font-mono text-sm font-semibold">4 étapes vérifiées automatiquement · 45 min</p>
|
||||
<a href="{{ route('labs.essai') }}" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none mt-6">Lancer le TP <span class="font-mono" aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="border-4 border-black bg-[#13233A] p-5 font-mono text-sm text-white shadow-[6px_6px_0px_#FF6FB5] md:translate-y-6">
|
||||
<p><span class="text-[#7CF2C0]">eleve@vm1</span>:~$ sudo ip addr add 192.168.10.10/26 dev ens3</p>
|
||||
<p><span class="text-[#7CF2C0]">eleve@vm1</span>:~$ ip -br addr</p>
|
||||
<p>ens3 UP 192.168.10.10/26</p>
|
||||
<p><span class="text-[#7CF2C0]">eleve@vm1</span>:~$ ping -c 1 192.168.10.11</p>
|
||||
<p>1 packets transmitted, 1 received</p>
|
||||
<p class="mt-2 text-[#FFD23F]">✓ Étape 2 validée</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="exam" class="scroll-mt-6" aria-labelledby="t-exam">
|
||||
<h2 id="t-exam" class="text-5xl font-black tracking-tighter"><span class="font-mono text-2xl align-middle">5 · EXAMEN ·</span> Quand le prof le décide</h2>
|
||||
<div class="mt-8 grid gap-6 border-4 border-black bg-black p-7 text-white shadow-[8px_8px_0px_#ec3013] md:grid-cols-[1fr_auto]">
|
||||
<p class="text-xl font-bold">Le prof compose son sujet dans la banque de questions, le programme pour la classe, et suit l’épreuve en direct : sorties d’onglet, copier-coller bloqué, remise automatique.</p>
|
||||
<div class="grid content-start gap-3"><a href="{{ route('examen') }}" class="border-4 border-white bg-[#ec3013] px-5 py-3 font-extrabold">Voir le mode examen</a><a href="{{ route('banque') }}" class="border-4 border-white bg-white px-5 py-3 font-extrabold text-black hover:bg-[#FFD23F]">Banque de sujets (profs)</a></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
(function () {
|
||||
var form = document.getElementById('qcm-form');
|
||||
var score = document.getElementById('qcm-score');
|
||||
form.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
var bons = 0, total = 0;
|
||||
form.querySelectorAll('[data-q]').forEach(function (q) {
|
||||
total++;
|
||||
var choix = q.querySelector('input:checked');
|
||||
var ok = choix && choix.value === q.dataset.ok;
|
||||
if (ok) bons++;
|
||||
var c = q.querySelector('[data-correction]');
|
||||
c.hidden = false;
|
||||
c.className = 'mt-4 border-2 border-black p-4 ' + (ok ? 'bg-[#7CF2C0]' : 'bg-[#FFD9E8]');
|
||||
q.querySelector('[data-verdict]').textContent = ok ? 'Bonne réponse.' : (choix ? 'Pas tout à fait.' : 'Pas de réponse.');
|
||||
q.querySelectorAll('label').forEach(function (l, i) {
|
||||
l.classList.toggle('outline', String(i) === q.dataset.ok);
|
||||
l.classList.toggle('outline-4', String(i) === q.dataset.ok);
|
||||
l.classList.toggle('outline-black', String(i) === q.dataset.ok);
|
||||
});
|
||||
});
|
||||
score.hidden = false;
|
||||
score.textContent = bons + ' / ' + total;
|
||||
});
|
||||
form.addEventListener('reset', function () {
|
||||
form.querySelectorAll('[data-correction]').forEach(function (c) { c.hidden = true; });
|
||||
form.querySelectorAll('label').forEach(function (l) { l.classList.remove('outline', 'outline-4', 'outline-black'); });
|
||||
score.hidden = true;
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
@endsection
|
||||
Loading…
Add table
Add a link
Reference in a new issue