AP - Prise de notes en cours

src/cours/CIEL1/00-anglais/choose_hardware.md

@@ -0,0 +1,20 @@
+---
+puppeteer:
+    format: A4
+---
+
+## Work to perform
+
+Your task is to choose a specific computer depending on a specific demand. There are multiple demands. The demand you’ll be asked to answer to will be chosen by your teachers. Once your choice is done, you’ll have to explain it, during a short presentation of 2 or 3 minutes, with strong arguments. Make a detailed presentation: talk about the components, processing power, features use at least 2 computers to compare them, don’t forget to give the price !
+
+## Demand 1
+
+The client wishes to have 20 high-performance computers, one for each employee, intended for use in an open space and remote working. Each computer must be equipped with the necessary power to enable efficient work. Additionally, each employee should have two screens in the office to facilitate multitasking. The client is looking for compact and efficient computers. The required specifications for the screens, such as size and resolution, must also be considered to meet the needs of the business. Also, the client requires to have a professional support in case of malfunction.
+
+## Demand 2
+
+A client is launching a new e‑commerce website that must handle heavy traffic, especially during sales and marketing campaigns. The client needs a reliable server that can manage many simultaneous connections. You must describe the CPU, the amount of memory, the type of storage, RAID options, network interface speed. 
+
+## Demand 3
+
+An industrial company wants to deploy IoT devices in a factory and in a warehouse to collect sensor data in real time. Each device must read values from several sensors (temperature, humidity, vibration, presence, etc.) and send the data securely to a central server. Power supply is not a problem, but the warehouse has no wired network. You must describe the processor type, available memory, type of storage (eMMC, SSD), wired and wireless communication interfaces (Ethernet, Wi‑Fi, 4G/5G, LoRaWAN), and the number and type of input/output ports for sensors (USB, serial, GPIO, industrial buses).

src/cours/CIEL1/02-reseau/evaluations/adressage_IP_correction.md

@@ -0,0 +1,37 @@
+---
+puppeteer:
+    format: A4
+    margin:
+        top: "0.1cm"
+        bottom: "0.1cm"
+        left: "0.5cm"
+        right: "0
+---
+
+# Adressage IP - Correction
+
+- **Masque** : 255.255.255.0 ou /24
+- **Première adresse** : 192.168.1.1 (192.168.1.0 = adresse réseau)
+- **Dernière adresse** : 192.168.1.254 (192.168.1.255 = broadcast)
+- **Nombre de machines connectables** : $2^{8} - 2 = 254$
+- **Adresse de broadcast** : 192.168.1.255
+- **Choix du réseau** : Ce réseau est adéquat pour 80 machines, il supporte jusqu’à 254 machines ; il y a donc de la marge.
+- **Usage de broadcast** : Pour envoyer un message à toutes les machines du réseau local (par exemple, découverte de services).
+
+- Découpage en 8 sous-réseaux :
+  - **Nouveau masque** : Extension de 3 bits supplémentaires (car $2^3=8$), donc /27 (255.255.255.224)
+  - **Adresses** :
+      | N°  | Adresse de sous-réseau | 1ere adresse  | Dernière adresse | Adresse de broadcast |
+      | --- | ---------------------- | ------------- | ---------------- | -------------------- |
+      | 0   | 192.168.1.0            | 192.168.1.1   | 192.168.1.30     | 192.168.1.31         |
+      | 1   | 192.168.1.32           | 192.168.1.33  | 192.168.1.62     | 192.168.1.63         |
+      | 2   | 192.168.1.64           | 192.168.1.65  | 192.168.1.94     | 192.168.1.95         |
+      | 3   | 192.168.1.96           | 192.168.1.97  | 192.168.1.126    | 192.168.1.127        |
+      | 4   | 192.168.1.128          | 192.168.1.129 | 192.168.1.158    | 192.168.1.159        |
+      | 5   | 192.168.1.160          | 192.168.1.161 | 192.168.1.190    | 192.168.1.191        |
+      | 6   | 192.168.1.192          | 192.168.1.193 | 192.168.1.222    | 192.168.1.223        |
+      | 7   | 192.168.1.224          | 192.168.1.225 | 192.168.1.254    | 192.168.1.255        |
+- Avec le nouveau masque /27 (255.255.255.224), elles sont dans des sous-réseaux différents (120 appartient au bloc 96-127 ; 130 au bloc 128-159). Elles ne peuvent pas communiquer **sans passer par un routeur**.
+- **Adresses par sous-réseau** : $2^{5}-2=30$ machines utilisables par sous-réseau (car 32 adresses - réseau et broadcast)
+- **Adresses perdues** : 8 × 30 = 240, or le /24 permettait 254, il y a donc 14 adresses perdues à cause de découpage.
+- **Sous-réseau 4** commence à 192.168.1.128, la première machine est 192.168.1.129/27

src/cours/CIEL1/05-web-js/activite3-js-bases.md

@@ -72,7 +72,7 @@ Le tout dans un répertoire avec le nom suivant `YYYY-MM-DD_TPX_NOM1_Prenom1_NOM
 
     console.log(carré(5));
     ~~~
-- Écrire le code suivant puis l'exécuter
+- Écrire le code suivant puis analyser la portée des variables et retirer les lignes `console.log` nécessaires pour faire fonctionner le programme
     ~~~js
     var maVariable = "Hello";
     function maFonction(){
@@ -87,12 +87,13 @@ Le tout dans un répertoire avec le nom suivant `YYYY-MM-DD_TPX_NOM1_Prenom1_NOM
         console.log(`Hors du if : autreVariable = ${autreVariable}`);
         console.log(`Hors du if : variableInterne = ${variableInterne}`);
     }
+
+    maFonction();
     console.log("Hors de la fonction");
     console.log(`maVariable = ${maVariable}`);
     console.log(`autreVariable = ${autreVariable}`);
     console.log(`variableInterne = ${variableInterne}`);
     ~~~
-- Modifier le code précédent pour exécuter la fonction `maFonction`
 ```
 
 ```admonish note title="Dans le compte rendu"

src/cours/CIEL1/05-web-js/td/td_javascript.md

@@ -0,0 +1,108 @@
+---
+puppeteer:
+    format: A4
+    margin:
+        top: "0.1cm"
+        bottom: "0.1cm"
+        left: "0.5cm"
+        right: "0
+---
+
+# WEB - TD2 - JavaScript
+
+## Ex1
+
+La fonction `prompt()` en JS fonctionne comme `input` en python. Elle permet de demander du texte à l'utilisateur.
+
+```js
+let texte = prompt("Entrez du texte")
+```
+
+La fonction `alert` permet de créer une boîte de dialogue et afficher du texte à l'utilisateur
+
+```js
+alert("Aleeeeeerte !!");
+```
+
+1. Utiliser ces fonctions pour demander un texte à l'utilisateur et écrire ce texte dans une boîte de dialogue.
+2. De même, demander un texte à l'utilisateur et afficher ce texte dans le corps de la page (body)
+
+## Ex2
+
+1. Créer deux variables `a` et `b` qui valent respectivement 17432 et 5
+1. Créer une variable `result` qui contient la somme des variables `a` et `b`. Afficher le résultat de la somme dans une boite de dialogue.
+
+## Ex3 
+
+1. À l'aide de la fonction `prompt()`, demander un prix HT à l'utilisateur puis insérer le prix TTC (TVA 20 %) dans la page HTML à l'aide de `document.body.textContent`
+2. Modifier le code pour insérer le prix TTC sous forme de titre, grâce à `document.body.innerHTML`
+3. Modifier le code pour changer la couleur du texte selon la règle suivante :
+   1. Si le prix ttc est supérieur à 100, affciher le texte en rouge
+   2. Sinon, l'afficher en vert
+
+## Ex4
+
+Grâce à la boucle de votre choix, afficher en console tous les multiples de 10 jusqu'à 1000.
+
+## Ex5
+
+En utilisant la boucle for, afficher la table de multiplication du chiffre 5 dans la page HTML. L'affichage attendu doit ressembler à ça (sans le cadre):
+
+![mult](mult.png)
+
+## Ex6
+
+Dans une page HTML, créer un bouton qui affiche une boîte de dialogue avec le message "Hello !" lorsqu'on clique dessus
+- Utiliser l'attribut `onclick`
+- Modifier le code pour utiliser `addEventListener`
+
+## Ex8
+
+Objectif :
+- La page contient un titre, un paragraphe, et un bouton.
+- Au clic sur le bouton, le thème passe du mode clair au mode sombre et vice-versa.
+- Le mode clair a un fond blanc avec texte noir.
+- Le mode sombre a un fond noir avec texte blanc.
+
+1. Prenez le code suivant et intégrez le css et un code javascript dans la page
+2. Ajoutez un gestionnaire d'évènement `click` avec `addEventListener` au bouton
+3. Ajoutez un selecteur sur la classe `dark` au CSS qui contienne le style du mode sombre
+4. Basculez la classe de body à `dark` lorsqu'on clique sur le bouton
+5. Changez le texte du bouton pour qu'il affiche le texte "Mode sombre" ou "Mode clair" selon le thème
+
+```css
+body {
+    background-color: white;
+    color: black;
+    font-family: Arial, sans-serif;
+    text-align: center;
+    padding: 2em;
+    transition: background-color 0.3s, color 0.3s;
+}
+button {
+    margin-top: 1em;
+    padding: 0.5em 1em;
+    cursor: pointer;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8" />
+  <title>Exercice thème</title>
+</head>
+<body>
+  <h1>Changer le thème</h1>
+  <p>Appuyez sur le bouton pour changer le thème clair / sombre.</p>
+  <button id="btnTheme">Changer le thème</button>
+</body>
+</html>
+```
+
+## Ex9 
+
+1. Créer une liste en HTML
+2. Ajoutez un bouton qui ouvre une boîte de dialogue pour demander un texte à l'utilisateurice et l'ajoute à la suite de la liste
+3. Ajoutez un bouton au bout de chaque élément de la liste qui permette de le supprimer

src/slides/B1/ap/03_prise_de_notes.md

@@ -0,0 +1,146 @@
+---
+marp: true
+theme: catppuccin
+paginate: true
+size: 4:3
+transition: coverflow
+footer: ''
+math: katex
+lang: "fr"
+---
+
+<style>
+section {
+  font-size: 28px;
+  text-align: left
+}
+</style>
+
+# Prise de notes
+
+---
+
+## Pourquoi ?
+
+- Cours
+- Documentations techniques
+- Recherches
+
+---
+
+- Ne pas oublier d'informations
+- Écoute **passive** : on **perd 80%** de l'information
+- Écoute **active** : on **retient** mieux
+- Force à **comprendre** pour pouvoir écrire l'essentiel
+
+
+**Remarque** : Pas besoin de **tout** noter !
+
+---
+
+## Comment faire (en théorie) ?
+
+---
+
+### Écoute active : 
+- Notes au fur et à mesure
+  - \+ complète
+  - \- risque de noter du superflu
+- Notes à la fin
+  - \+ plus synthétique
+  - \- risque d'oubli, d'arrêter d'écouter
+
+---
+
+### Analyse
+
+- S'assurer d'avoir compris : on fait une relecture active
+- On se pose des questions :
+  - Qui
+  - Quoi
+  - Quand
+  - Comment
+  - Pourquoi
+  - Combien
+
+---
+
+## Comment faire (en pratique) ?
+
+---
+
+### S'organiser
+
+- Prévoir le matériel 
+  - Feuille, crayons -> à la main = + efficace
+  - (PC)
+- Utiliser des abréviations
+- Organiser la prise de notes -> **lisibilité**
+  - **Titres** : dégager la structure
+  - Éléments importants
+  - **Colorer**
+  - Aérer
+- **Ranger**
+  - classeur : 
+    - intercalaires par matière / séquence
+  - répertoires : 
+    - choisir une **nomenclature** (noms structurés)
+
+---
+
+### Relire ses notes 
+
+- Relire **immédiatement** après le cours
+- Relire en fin de journée et faire un **résumé**
+- **Se poser des questions** et les noter
+- **Compléter** : 
+  - Quand vous faites des recherches
+  - Quand vous posez des questions
+  - Quand vous comprenez qqch
+  - Ajout d'exemples
+
+---
+
+### S'aider d'une méthode
+
+- Mind mapping
+- Méthode par blocs
+
+---
+
+#### Mind mapping
+
+- Infos essentielles
+- Aide à faire des liens
+- Mémoire visuelle
+
+![mindmap height:400px](images/mindmap.png)
+
+---
+
+#### Méthode par blocs
+
+4 blocs :
+- Titre et date
+- Notes générales
+- Questions et mots-clés
+- Résumé
+
+![notes bg right width:450px](images/notes.png)
+
+---
+
+## Mise en application
+
+1. Se (re)documenter et prendre des notes sur 1 sujet au choix en lien avec les cours
+
+    Exemples de sujets :
+    - Bases de HTML
+    - Bases de CSS
+    - Bases de JavaScript
+    - Bases de l'utilisation de Linux
+    - Bases de Python
+    - Adressage IP
+    - ...
+
+2. Prendre des notes aux prochains cours, et s'entraîner

src/slides/B1/web/04_dom.md

@@ -0,0 +1,235 @@
+---
+marp: true
+theme: catppuccin
+paginate: true
+size: 4:3
+transition: coverflow
+footer: ''
+math: katex
+lang: "fr"
+---
+
+<style>
+section {
+  font-size: 28px;
+  text-align: left
+}
+</style>
+
+# JavaScript et le DOM
+
+---
+
+## C'est quoi le DOM ?
+(Non ce n'est pas le diminutif de Dominique)
+
+---
+
+- Le DOM est une API.
+  - DOM = Document Object Model
+    - Décrit la structure d'un document (HTML)
+  - API = Application Programming Interface
+    - Ensemble de fonctions utilisables dans un programme pour interagir avec un autre programme
+
+---
+
+Le document est composé d'éléments (noeuds) qui peuvent eux-mêmes contenir des éléments.
+
+```html
+<!doctype html>
+<html lang="en">
+ <head>
+   <title>My first web page</title>
+  </head>
+ <body>
+    <h1>Hello, world!</h1>
+    <p>How are you?</p>
+  </body>
+</html>
+```
+
+![dom bg right height:80%](images/dom.png)
+
+---
+
+## Interagir avec le DOM
+
+---
+
+- Objet `document` ([doc](https://developer.mozilla.org/fr/docs/Web/API/Document)) :
+  - **Propriétés** : les éléments du document
+    - `body`, `head`, `doctype`...
+  - **Méthodes** : pour interagir avec le document
+    - Créer, supprimer ou modifier des **éléments**
+    - Gérer des **évènements**
+    - Manipuler le **stockage**
+  - **Événements** : pour interpréter les actions des utilisateurs
+
+---
+
+### Sélectionner des éléments
+
+- `document.getElementById("id")`
+  - Récupère l'élément par son id
+- `document.getElementsByClassName("classe")`
+  - Récupère **une liste** d'éléments par leur classe
+  - attention : getElement**s**
+- `document.querySelector("selecteur_css")`
+  - Récupère **premier** élément par le sélecteur CSS
+  - ex: `#id` `.class` `balise[attribut]`...
+
+---
+<style scoped>
+pre {
+  font-size: 28px;
+}
+</style>
+
+```html
+<h3 id="titre">Bonjour !</h3>
+<p class="special">Texte mis en valeur</p>
+<p>Ordinaire</p>
+<button id="btn">Cliquez</button>
+```
+
+```js
+const title = document.getElementById("titre")
+const special = document.getElementsByClassName("special")
+const paragraphs = document.querySelector("p")
+```
+
+---
+
+### Manipuler le contenu d'un élément
+
+On manipule les propriétés d'un élément :
+- `textContent` : texte de l'élément
+- `innerHTML` : HTML de l'élément
+- (<del>`innerText`</del> : texte de l'élément)
+  - visible uniquement, pas efficace, source d'erreurs
+
+- Les **propriétés** sont comme des **variables** : on peut les lire ou les modifier
+
+```html
+<p id="demo">Contenu initial</p>
+
+<script>
+    document.getElementById("demo").innerHTML = "<em>Nouveau contenu <strong>HTML</strong></em>";
+    // Ou si on veut uniquement le texte :
+    document.getElementById("demo").textContent = "Nouveau texte";
+</script>
+```
+
+---
+
+### Manipuler le style d'un élément
+
+On manipule la propriété `style` d'un élément, qui nous donne accès aux propriétés de style (comme le CSS)
+
+```js
+titre.style.color = "red";
+titre.style.fontStyle = "italic"; // Remarquez le passage au camelCase de font-style
+```
+
+**Remarque** : la casse des propriétés de style
+- en JS : `camelCase` 
+- en CSS :  `kebab-case`
+
+---
+
+### Créer, insérer, remplacer, supprimer des éléments
+
+- Créer : `createElement("balise");`
+- Insérer : 
+  - `appendChild(nouvel_element)` : ajoute un enfant à un élément parent
+  - `insertBefore(nouvel_element, autre_element)` : ajoute un élément avant un autre
+- Remplacer :
+  - `replaceChild(nouvel_element, ancien_element)`
+- Supprimer :
+  - `remove()` : supprime l'élément sur lequel elle est appliquée
+  - `removeChild(element)` : retire l'élément enfant d'un élément parent
+
+---
+```html
+<div id="container">
+  <p id="parag1">Paragraphe 1</p>
+  <p id="parag2">Paragraphe 2</p>
+</div>
+```
+
+```js
+const container = document.getElementById("container");
+
+// CRÉER un nouvel élément <p>
+const nouveau = document.createElement("p");
+nouveau.textContent = "Nouveau paragraphe créé";
+
+// INSÉRER à la fin du container
+container.appendChild(nouveau);
+
+// REMPLACER le paragraphe 1 par un nouveau
+const remplacement = document.createElement("p");
+remplacement.textContent = "Je remplace le premier paragraphe";
+const parag1 = document.getElementById("parag1");
+container.replaceChild(remplacement, parag1);
+
+// SUPPRIMER le paragraphe 2
+const parag2 = document.getElementById("parag2");
+parag2.remove();
+```
+---
+
+### Gérer les évènements
+
+**Évènements** : actions qui se produisent dans le navigateur
+- Clic de souris
+- Frappe au clavier
+- Chargement de page
+
+- On gère les interactions grâce aux évènements
+  - On lie un évènement à un gestionnaire d'évènement
+  - **Gestionnaire d'évènement** : fonction appelée quand l'évènement survient
+
+---
+
+#### Attributs
+
+On peut lier un gestionnaire d'évènement à un évènement grâce à un attribut dans le HTML
+
+```html
+<button id="btn" onclick="alert('Bouton cliqué !')">Cliquez-moi</button>
+```
+- `onclick` : appelle le code quand on clique sur le bouton 
+- Facile et rapide mais **mauvaise pratique**
+  - Mélange HTML et JavaScript
+    - mauvaise séparation des responsabilités
+  - Peu flexible
+    - un seul gestionnaire à la fois
+    - difficile à maintenir
+
+---
+
+#### EventListener
+
+On préfère cette méthode : lier un gestionnaire d'évènements à un évènement dans le code JS
+- méthode `addEventListener`
+
+```html
+<button id="btn">Cliquez-moi</button>
+```
+
+```js
+const bouton = document.getElementById("btn");
+bouton.addEventListener("click", function() {
+    texte.textContent = "Bouton cliqué !";
+  });
+```
+
+---
+
+Plusieurs types d'évènements :
+- `input` : modification d’une zone de saisie
+- `change` : changement d’état (ex. : sélection)
+- `mouseover` / `mouseout` : passage de la souris sur un élément
+- `keydown` / `keyup` : touches du clavier pressées ou relâchées.
+​