Fix: opytex.org bucket is empty...

.drone.yml

@@ -6,47 +6,107 @@ type: docker
 clone:
   skip_verify: true
 
-workspace:
-    path: /drone/content/
-
 steps:
-- name: Push Raw
-  image: alpine
-  commands:
-  - apk add --no-cache openssh-client ca-certificates bash
-  - apk add rsync
-  - echo Début du Push
-  - eval `ssh-agent -s`
-  - echo "$SSH_KEY" | ssh-add -
-  - mkdir -p ~/.ssh
-  - echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
-  - rsync -rv --delete -e "ssh -p 22" --exclude ".git" --exclude "config*" --exclude "*/Evaluations/DS*" --exclude "tools/" --exclude "*.rst" --exclude "*.tex" ./ sshcontent@91.121.90.228:~/raw.opytex.org/www/ --checksum
-  environment:
-    SSH_KEY:
-      from_secret: sshcontent-key
+  - name: Clean before push
+    image: alpine
+    volumes:
+      - name: tosend
+        path: /tosend
+    commands:
+      - apk add --no-cache rsync
+      - >
+        rsync -am --include="*/" 
+        --include="*.html"
+        --include="*.css"
+        --include="*.png"
+        --include="*.jpg"
+        --include="*.odt"
+        --include="*.pdf" 
+        --exclude="*" 
+        ./ /tosend
 
-- name: Build Opytex 2022-2023
-  image: python:3.8-alpine
-  commands:
-  - apk add --no-cache git imagemagick-dev imagemagick
-  - cd ..
-  - git init .
-  - git remote add origin https://git.opytex.org/lafrite/site_opytex.git
-  - git pull origin 2022-2023
-  - git checkout 2022-2023
-  - git submodule init
-  - git submodule update
-  - pip install --no-cache-dir -r requirements.txt
-  - export MAGICK_HOME=/usr
-  - pelican content/ -o output -s publishconf.py --relative-urls
+  - name: Push bucket Raw
+    image: plugins/s3-sync:1
+    volumes:
+      - name: tosend
+        path: /drone/src/tosend
+    settings:
+      bucket: raw
+      endpoint: https://storage.opytex.org
+      access_key:
+        from_secret: minio_access_key
+      secret_key:
+        from_secret: minio_secret_key
+      source: /tosend
+      target: /
+      path_style: true
+      delete: true
 
-  - apk add --no-cache openssh-client ca-certificates bash rsync
-  - eval `ssh-agent -s`
-  - echo "$SSH_KEY" | ssh-add -
-  - mkdir -p ~/.ssh
-  - echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
-  - ssh sshcontent@91.121.90.228 'mkdir -p ~/raw.opytex.org/www/enseignements/2022-2023/'
-  - rsync -rv --delete -e "ssh -p 22" ./output/ sshcontent@91.121.90.228:~/opytex.org/www/enseignements/2022-2023/ --checksum
-  environment:
-    SSH_KEY:
-      from_secret: sshcontent-key
+  # - name: Push Raw
+  #   image: alpine
+  #   commands:
+  #   - apk add --no-cache openssh-client ca-certificates bash
+  #   - apk add rsync
+  #   - echo Début du Push
+  #   - eval `ssh-agent -s`
+  #   - echo "$SSH_KEY" | ssh-add -
+  #   - mkdir -p ~/.ssh
+  #   - echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
+  #   - rsync -rv --delete -e "ssh -p 22" --exclude ".git" --exclude "config*" --exclude "*/Evaluations/DS*" --exclude "tools/" --exclude "*.rst" --exclude "*.tex" ./ sshcontent@91.121.90.228:~/raw.opytex.org/www/ --checksum
+  #   environment:
+  #     SSH_KEY:
+  #       from_secret: sshcontent-key
+
+  - name: Build Opytex 2022-2023
+    image: python:3.8-alpine
+    volumes:
+      - name: pelican-output
+        path: /output
+    commands:
+      - apk add --no-cache git imagemagick-dev imagemagick
+      - cd ..
+      - git init .
+      - git remote add origin https://git.opytex.org/lafrite/site_opytex.git
+      - git pull origin 2022-2023
+      - git checkout 2022-2023
+      - git submodule init
+      - git submodule update
+      - pip install --no-cache-dir -r requirements.txt
+      - export MAGICK_HOME=/usr
+      - pelican ./src/ -o /output -s publishconf.py --relative-urls
+      - ls /output
+
+  - name: Push to bucket opytex.org
+    image: plugins/s3-sync:1
+    volumes:
+      - name: pelican-output
+        path: /drone/src/output
+    settings:
+      bucket: opytex.org
+      endpoint: https://storage.opytex.org
+      access_key:
+        from_secret: minio_access_key
+      secret_key:
+        from_secret: minio_secret_key
+      source: /output
+      target: /enseignements/2022-2023
+      path_style: true
+      delete: true
+
+    # - apk add --no-cache openssh-client ca-certificates bash rsync
+    # - eval `ssh-agent -s`
+    # - echo "$SSH_KEY" | ssh-add -
+    # - mkdir -p ~/.ssh
+    # - echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
+    # - ssh sshcontent@91.121.90.228 'mkdir -p ~/raw.opytex.org/www/enseignements/2022-2023/'
+    # - rsync -rv --delete -e "ssh -p 22" ./output/ sshcontent@91.121.90.228:~/opytex.org/www/enseignements/2022-2023/ --checksum
+    # environment:
+    #   SSH_KEY:
+    #     from_secret: sshcontent-key
+    #
+
+volumes:
+  - name: tosend
+    temp: {}
+  - name: pelican-output
+    temp: {}

1NSI/00_Projets/cahier_bord.md

@@ -0,0 +1,37 @@
+# Cahier de bord pour le projet ...
+
+Élèves du groupe : ...
+
+Ce document est votre cahier de bord qui nous permettra de suivre votre projet et de le documenter. À chaque fin de séance, vous devrez créer une archive contenant le code. Cette archive sera placée sur le réseau dans l'espace commun.
+
+## Le projet
+
+### Description
+
+...
+
+### Technologies
+
+...
+
+
+## Taches
+
+Une tache doit avoir une description succincte et contenir la phrase "Cette tache est terminée quand...". Une tache est bien définie ne doit pas vous prendre plus de 20min à être réalisée.
+
+Quand elle est terminée, elle est placée dans la partie "Terminées" avec la date associée.
+
+### À faire
+
+- Préparer le cahier de bord. Cette tache est terminée quand le document est mis en ligne (sur FramaPad) et que l'URL est partagée entre les membres du groupe et l'enseignant.
+- Définir le projet. Cette tache est terminée quand la section "Le projet" est complété (une description succincte est suffisante)
+- Choisir les technologies adaptées. Cette tache est terminée quand le(s) langage(s) de programmation et les modules sont choisis et renseignés dans la partie appropriée.
+-
+
+### En cours (non terminé)
+
+### Terminées
+
+Pensez à indiquer la date où elle a été réalisée.
+
+## Documentation/liens

1NSI/00_Projets/index.rst

@@ -2,7 +2,7 @@ Projets
 #######
 
 :date: 2022-12-06
-:modified: 2023-01-10
+:modified: 2023-04-06
 :authors: Benjamin Bertrand
 :tags: Divers
 :category: 1NSI
@@ -111,6 +111,75 @@ Une "correction" et quelques éléments sur la géométrie de la fenêtre :
 
  - `Explication sur la géométrie de la fenêtre <./snake_expl.pdf>`_
 
+Introduction à Bottle
+~~~~~~~~~~~~~~~~~~~~~
+
+L'exercice 5 du `plan de travail sur l'interaction client/serveur <../05_Interaction_client-serveur/plan_de_travail.pdf>`_ est à faire par équipe de deux en mode pair programming (changement toutes les 10min). Le rendu est ensuite noté suivant les critères ci-dessous
+
+.. list-table:: Notation
+    :header-rows: 1
+
+    * - Description
+      - Points
+    * - Qualité du code (lisibilité, nom explicite des variables, organisation, documentation...)
+      - 2
+    * - Découpage en fonctions élémentaires
+      - 2
+    * - Validité des chemins et requêtes adaptées
+      - 2
+    * - Bissextile et nombre de jours fonctionnent correctement
+      - 2
+    * - Ajout du CSS
+      - 1
+    * - Validité du code HTML
+      - 1
 
 Trimestre 3: Version la plus aboutie possible du projet
 -------------------------------------------------------
+
+Cahier de bord
+~~~~~~~~~~~~~~
+
+Suivi du projet avec `un cahier de bord <./cahier_bord.md>`_ à compléter au fur et à mesure. Chaque séance sera conclue par un archivage sur le réseau de l'état du projet.
+
+README
+~~~~~~
+
+Pendant les vacances de Pâques, les élèves sont invités à avancer leur projet. Ils devront en particulier rédiger un fichier README qui détaillera les points suivants
+
+- Une courte description du projet avec un détail des librairies utilisées
+- Une explication sur comment lancer le projet
+- Une explication de trois points techniques résolus lors de la construction du projet.
+
+Notation
+~~~~~~~~
+
+.. list-table:: Notation
+    :header-rows: 1
+
+    * - Catégorie
+      - Détails
+    * - Qualité du code (lisibilité, nom explicite des variables, organisation, documentation...)
+      - Lisibilité globale
+    * -
+      - Utilisation de fonctions, noms des variables
+    * -
+      - Organisation
+    * -
+      - Documentation interne des fonctions et commentaires
+    * - Explication (le README)
+      - Description du projet
+    * -
+      - Comment faire marcher le programme
+    * -
+      - Explication des points techniques
+    * - Organisation du travail
+      - Autonomie du groupe
+    * -
+      - Suivi des taches et dépôt du code
+    * -
+      - Situations particulières de travail
+    * - Le projet en lui-même (par des non-experts)
+      - Avancement global
+    * -
+      - Plaisir d'utilisation

1NSI/05_Interaction_client-serveur/1B_http.tex

@@ -0,0 +1,88 @@
+\documentclass[a4paper,10pt]{article}
+\usepackage{myXsim}
+\usepackage{minted}
+
+\author{Benjamin Bertrand}
+\title{Interaction client/serveur - Cours}
+\date{janvier 2023}
+
+\pagestyle{empty}
+
+\begin{document}
+
+\maketitle
+
+\section{Protocole HTTP}
+
+\begin{definition}[HTTP]
+    \texttt{HTTP} est un protocole qui permet de récupérer des ressources telles que des documents HTML, les feuilles CSS, les images... Il est à la base de tout échange de données sur le Web.
+
+    C'est un protocole de type client-serveur, ce qui signifie que les \textbf{requêtes} sont initiées par le client (qui est généralement un navigateur web) et attendent une \textbf{réponse} du serveur.
+\end{definition}
+
+\paragraph{Remarques:} pour obtenir une page web complète, il faut la plupart du temps faire plusieurs \textbf{requêtes} HTTP vers plusieurs serveurs.
+
+\begin{center}
+    \includegraphics[scale=0.2]{./fig/fetching_a_page}
+\end{center}
+
+\section{Requêtes HTTP}
+
+\begin{propriete}[Requête]
+    Une requête est l'un des deux types de message que l'on peut s'échanger dans le protocole HTTP.
+
+    Elle est constituée des éléments suivants
+    \begin{multicols}{3}
+        \begin{itemize}
+            \item Une méthode
+            \item un chemin
+            \item la version du protocole
+            \item d'une entête
+            \item d'un corps
+        \end{itemize}
+    \end{multicols}
+
+
+\end{propriete}
+
+Le protocole HTTP propose différentes méthodes pour faire des requêtes:
+
+\begin{definition}[requêtes GET]
+
+    Les requêtes GET permettent de demander l'accès à des ressources au serveur.
+
+
+\end{definition}
+
+\paragraph{Utilisation d'une requête GET}
+\begin{itemize}
+    \item En tapant \colorbox{highlightbg}{http://monsite.fr/fichier}, le navigateur réalise la requête suivante :
+        \begin{center}
+            \colorbox{highlightbg}{
+                \begin{minipage}{0.5\linewidth}
+                    GET /fichier HTTP/2 \\ \\
+                    Host: monsite.fr \\
+                    User-Agent: Mozilla/5.0 ... \\
+                    Accept-Language: fr,fr-FR
+                \end{minipage}
+            }
+        \end{center}
+
+    \item Il est possible de passer des paramètres à une requête GET en les ajoutant après un ? dans l'URL.
+
+        En tapant \colorbox{highlightbg}{http://monsite.fr/fichier?age=12\&nom=bob}, le navigateur réalise la requête suivante :
+        \begin{center}
+            \colorbox{highlightbg}{
+                \begin{minipage}{0.5\linewidth}
+                    GET /fichier?age=12\&name=jkl HTTP/2 \\ \\
+                    Host: monsite.fr \\
+                    User-Agent: Mozilla/5.0 ... \\
+                    Accept-Language: fr,fr-FR
+                \end{minipage}
+            }
+        \end{center}
+
+        Comme ces paramètres sont écrits directement dans l'URL, il n'est pas conseillé de l'utiliser pour transmettre des informations confidentielles ou nombreuses.
+\end{itemize}
+
+\end{document}

1NSI/05_Interaction_client-serveur/2B_post_formulaire.tex

@@ -0,0 +1,103 @@
+\documentclass[a4paper,10pt]{article}
+\usepackage{myXsim}
+\usepackage{minted}
+
+\author{Benjamin Bertrand}
+\title{Interaction client/serveur - Cours}
+\date{janvier 2023}
+
+\pagestyle{empty}
+
+\begin{document}
+
+\maketitle
+
+\begin{definition}[requêtes POST]
+
+    Les requêtes POST permettent d'envoyer des informations au serveur. Ces informations ne sont pas transmises via l'URL, mais dans le corps de la requête. Elles peuvent donc être sécurisées.
+
+\end{definition}
+
+\paragraph{Construction d'une requête POST}
+Le \textbf{formulaire} HTML est l'élément qui permet de construire des requêtes POST.
+
+Exemple de formulaire
+
+
+\begin{minipage}{0.8\linewidth}
+    \inputminted[bgcolor=base3,linenos]{html}{./scripts/formulaire.html}
+\end{minipage}
+
+Ce formulaire enverra le nom (de type texte) et si l'utilisateur est majeur (type booléen) par la méthode POST vers le fichier bonjour. Soit la requête suivante
+
+        \begin{center}
+            \colorbox{highlightbg}{
+                \begin{minipage}{0.5\linewidth}
+                    GET /bonjour HTTP/2 \\
+
+                    Host: monsite.fr \\
+                    User-Agent: Mozilla/5.0 ... \\
+                    Accept-Language: fr,fr-FR \\
+
+                    nom=azert\&majeur=on
+                \end{minipage}
+            }
+        \end{center}
+
+Type de input disponibles:
+
+\afaire{compléter la liste}
+
+\vspace{2cm}
+
+\section{Réponse du serveur}
+
+\begin{definition}[Réponse du serveur]
+    C'est l'autre type de message que l'on peut s'échanger dans le protocole HTTP.
+
+    Il est constitué des éléments suivants :
+
+    \begin{multicols}{2}
+        \begin{itemize}
+            \item La version du protocole
+            \item le code d'état (status code)
+            \item du message d'état
+            \item d'une entête
+        \end{itemize}
+    \end{multicols}
+
+
+\end{definition}
+
+Exemple d'une réponse
+\begin{center}
+    \colorbox{highlightbg}{
+        \begin{minipage}{0.5\linewidth}
+            HTTP/1.1 200 OK \\
+
+            Date: Sat, 09 Oct 2010 14:28:02 GMT \\
+            Server: Apache \\
+            Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT \\
+            Content-Type: text/html \\
+            ... \\
+
+            <!DOCTYPE html...
+
+        \end{minipage}
+    }
+\end{center}
+
+\begin{propriete}[Code status]
+    Les codes status d'un serveur est un nombre à 3 chiffres auquel on associe une message.
+
+    \begin{itemize}
+        \item Code en 2..: réponse fructueuse (tout s'est bien passée)
+        \item Code en 3..: la requête a été redirigée
+        \item Code en 4..: le client a fait une erreur de requête
+        \item Code en 5..: le serveur est en erreur
+    \end{itemize}
+
+\end{propriete}
+
+
+\end{document}

1NSI/05_Interaction_client-serveur/exercises.tex

@@ -16,7 +16,7 @@
 \end{exercise}
 
 
-\begin{exercise}[subtitle={Faire son serveur web avec Bottle}, step={2}, origin={Ma tête}, topics={  Interaction client-serveur }, tags={ HTTP, Flask }]
+\begin{exercise}[subtitle={Application web avec Bottle - requête GET}, step={2}, origin={Ma tête}, topics={  Interaction client-serveur }, tags={ HTTP, Flask }]
     Dans cette partie, vous allez programmer une application web en utilisant la librairie python \texttt{bottle}. Vous trouverez la documentation (en anglais) à l'adresse suivante
     \begin{center}
         \url{https://bottlepy.org/docs/dev/tutorial.html}
@@ -31,6 +31,7 @@
                             \inputminted[bgcolor=base3,linenos]{python}{./scripts/bottle_base.py}
                         \end{minipage}
                     \end{center}
+                    \label{bottle_base}
 
                 \item Exécuter votre programme puis rendez-vous avec le navigateur à l'adresse
 
@@ -75,11 +76,11 @@
 
                 \item Pour le moment, le code renvoyé par notre application n'est pas du code HTML valide. Il est possible d'écrire des modèles (template en anglais) dans lesquels on va pouvoir injecter des variables python pour les rendre modulables.
 
-                    À côté du fichier de votre application, créer un dossier \texttt{views/} puis un fichier \texttt{utilisateur.html} dans lequel vous mettrait le code HTML suivant
+                    À côté du fichier de votre application, créer un fichier \texttt{utilisateur.html} dans lequel vous mettrait le code HTML suivant
 
                     \begin{center}
                         \begin{minipage}{0.9\linewidth}
-                            \inputminted[bgcolor=base3,linenos]{python}{./scripts/utilisateur.html}
+                            \inputminted[bgcolor=base3,linenos]{html}{./scripts/utilisateur.html}
                         \end{minipage}
                     \end{center}
 
@@ -100,3 +101,122 @@
     \end{enumerate}
 
 \end{exercise}
+
+\begin{exercise}[subtitle={Application web avec Bottle - requête POST}, step={2}, origin={Ma tête}, topics={  Interaction client-serveur }, tags={ HTTP, Flask }]
+    Les requêtes POST envoient des informations au serveur. Ces informations sont le plus souvent envoyé à partir d'une formulaire HTML.
+
+    On reprend le code de la question \ref{bottle_base} de l'exercice précédent.
+
+    \begin{enumerate}
+        \item Supprimer la route \texttt{hello} et ajouter la route suivante
+
+            \begin{center}
+                \begin{minipage}{0.9\linewidth}
+                    \inputminted[bgcolor=base3,linenos]{python}{./scripts/bottle_get_form.py}
+                \end{minipage}
+            \end{center}
+        \item Quelle URL doit-on entrer dans le navigateur pour accéder à ce formulaire? Envoyez un nom et étudier la requête.
+        \item On ajoute maintenant la route suivante du type POST pour réceptionner cette requête. Mais avant cela, vous devez ajouter la fonction \texttt{post} dans les imports.
+
+            \begin{center}
+                \begin{minipage}{0.9\linewidth}
+                    \inputminted[bgcolor=base3,linenos]{python}{./scripts/bottle_post_form.py}
+                \end{minipage}
+            \end{center}
+
+        \item Remplissez le formulaire, envoyez le et étudier les requêtes.
+        \item \textbf{Bilan sur les formulaires et les requêtes post}:
+            \begin{enumerate}
+                \item Identifier les nouvelles balises HTML utiles pour créer un formulaire.
+                \item Chercher sur internet d'autres type possible pour la balise \texttt{input}.
+                \item Comment \texttt{bottle} fait pour accéder au information du formulaire lors une requête POST?
+                \item Quelles sont les différences entre transmettre une information avec une requête POST et l'utilisation des query?
+            \end{enumerate}
+    \end{enumerate}
+\end{exercise}
+
+\begin{exercise}[subtitle={Application web avec Bottle - Accès authentifié}, step={2}, origin={Ma tête}, topics={  Interaction client-serveur }, tags={ HTTP, Flask }]
+    Vous devez écrire une application web qui a les routes suivantes :
+    \begin{itemize}
+        \item \textbf{la racine (/)}: contient un formulaire de connexion avec deux champs (utilisateur et mot de passe). L'envoie du formulaire se fait vers la route \texttt{/prive}
+        \item \textbf{/privé}: route avec deux comportements :
+            \begin{itemize}
+                \item Affiche "accès autorisé" sur le couple utilisateur et mot de passe correspond à l'utilisateur et au mot de passe enregistré dans le code l'application.
+                \item Affiche "accès non autorisé" sinon.
+            \end{itemize}
+    \end{itemize}
+\end{exercise}
+
+\begin{exercise}[subtitle={Projet Bottle - Années}, step={2}, origin={Ma tête}, topics={  Interaction client-serveur }, tags={ HTTP, Flask }]
+    Vous devez écrire une application web qui a les routes suivantes :
+    \begin{itemize}
+        \item \textbf{/ (la racine)}: contient plusieurs formulaires. Un qui permet de savoir si une année est bissextile et un autre qui compte le nombre de jours depuis le début de l'année.
+        \item \textbf{/bissextile}: qui affiche l'année et qui dit si l'année est bissextile ou non.
+        \item \textbf{/jours}: qui affiche la date et le nombre de jour depuis le début de l'année.
+    \end{itemize}
+    Bonus : du CSS à votre site (pensez à ajouter la route pour servir le fichier)
+\end{exercise}
+
+
+\begin{exercise}[subtitle={QCM}, step={2}, origin={Annales}, topics={  Interaction client-serveur }, tags={ HTTP, Flask }]
+    \begin{enumerate}
+        \item Parmi GET et POST, quelle méthode d'envoi de formulaire crypte les informations envoyées au serveurs?
+            \begin{tasks}(2)
+                \task les deux: GET et POST
+                \task GET seulement
+                \task POST seulement
+                \task aucune des deux
+            \end{tasks}
+        \item Parmi les réponses suivantes, que permet d'effectuer la méthode POST du protocole HTTP?
+            \begin{tasks}(2)
+                \task Définir le style d'une page
+                \task Pirater des données bancaire
+                \task Envoyer une page web vers le client
+                \task Envoyer les données saisies dans un formulaire HTML vers un serveur
+            \end{tasks}
+        \item Charles veut accéder à son forum favori. Il sais son adresse (URL) sur son navigateur Web, qui lui affiche une erreur 404.
+
+            Quelle cas de figure \textbf{n'explique pas} sa situation?
+            \begin{tasks}(2)
+                \task une mise à jour du serveur qui héberge le forum
+                \task une erreur de saisie de sa part
+                \task une panne de sa connexion internet
+                \task un changement de titre du forum qu'il veut consulter
+            \end{tasks}
+        \item Parmi les éléments suivants, lequel est un protocole?
+            \begin{tasks}(4)
+                \task GET
+                \task POST
+                \task HTTP
+                \task HTML
+            \end{tasks}
+        \item Dans une page HTML, que pet la balise \texttt{<form action="http://monsite.fr" method="POST">}?
+            \begin{tasks}
+                \task d'envoyer des données à l'URL \texttt{http://monsite.fr} sans les ajouter au corps de la requête HTTP
+                \task d'envoyer des données à l'URL \texttt{http://monsite.fr} et de  les ajouter au corps de la requête HTTP mais pas à l'URL
+                \task de télécharger une formulaire depuis l'URL \texttt{http://monsite.fr}
+                \task de récupérer des données depuis l'URL \texttt{http://monsite.fr}
+            \end{tasks}
+        \item Dans le contexte du Web, qu'est-ce qu'une transmission chiffrée?
+            \begin{tasks}
+                \task une transmission optimisée pour les grands nombres
+                \task une transmission sous forme binaire
+                \task une transmission d'information cryptée
+                \task une transmission facturée proportionnellement à la taille du message
+            \end{tasks}
+        \item Mehdi a écrit une page HTML contenant des éléments \texttt{input} de formulaire. Il place ces éléments de formulaire:
+            \begin{tasks}
+                \task entre la balise \texttt{<form>} et la balise \texttt{</form>}
+                \task entre la balise \texttt{<formulary>} et la balise \texttt{</formulary>}
+                \task entre la balise \texttt{<code>} et la balise \texttt{</code>}
+                \task entre la balise \texttt{<script>} et la balise \texttt{</script>}
+            \end{tasks}
+        \item Quelle utilisation faut-il avoir pour garantir qu'une transmission entre un client et un serveur sera-t-elle chiffrée?
+            \begin{tasks}(2)
+                \task lorsqu'on utilise le navigateur web Firefox
+                \task lorsqu'on utilise la méthode POST
+                \task lorsqu'on utilise le protocole HTTPS
+                \task lorsqu'on utilise HTML et CSS
+            \end{tasks}
+    \end{enumerate}
+\end{exercise}

1NSI/05_Interaction_client-serveur/index.rst

@@ -2,7 +2,7 @@ Interaction client-serveur
 ###########################
 
 :date: 2023-01-03
-:modified: 2023-01-03
+:modified: 2023-01-22
 :authors: Benjamin Bertrand
 :tags: Http, Flask
 :category: 1NSI
@@ -31,15 +31,34 @@ Interaction client-serveur
 Progression
 ===========
 
-Étape 1: Étude des headers
---------------------------
+Plan de travail
+
+.. image:: ./plan_de_travail.pdf
+    :height: 200px
+    :alt: Plan de travail
+
+Etape 1: requetes
+=================
 
 Cours: rappels de ce qui a été déjà fait sur le web: client serveur, url, positionnement du protocole HTTP dans la stack web. Introduction des concepts requêtes/reponses.
 
 Exploration de l'onglet "Network" dans les outils de dev des navigateurs.
 
-Étape 2: Formulaire
--------------------
+Bilan:
 
-Étape 3: Construire un serveur web avec Flask
----------------------------------------------
+.. image:: ./1B_http.pdf
+    :height: 200px
+    :alt: Bilan sur le protocole HTTP et les requêtes GET
+
+.. image:: ./2B_post_formulaire.pdf
+    :height: 200px
+    :alt: Bilan sur les requêtes POST, les formulaires et les codes status du serveur
+
+Etape 2: construction d'un serveur
+==================================
+
+Pour faire les exercices utilisant Bottle, il faut placer `le fichier bottle.py <https://raw.githubusercontent.com/bottlepy/bottle/master/bottle.py>`_  à côté de votre script.
+
+
+Etape 3: QCM type
+=================

1NSI/05_Interaction_client-serveur/scripts/bottle_get_form.py

@@ -0,0 +1,9 @@
+@get('/formulaire')
+def get_formulaire():
+    formulaire = """
+    <form method='post' action='bonjour'>
+    <input type='text' name='nom' placeholder='Votre nom ?'/>
+    <input type='submit' value='Bonjour bottle !'/>
+    </form>
+    """
+    return formulaire

1NSI/05_Interaction_client-serveur/scripts/bottle_post_form.py

@@ -0,0 +1,6 @@
+@post('/bonjour')
+def bonjour() :
+    nom = bottle.request.forms.get('nom')
+    body = "<p>Bonjour mon(a) che(è)r(e) " + nom + "</p>"
+
+    return body

1NSI/05_Interaction_client-serveur/scripts/bottle_query.py

@@ -1,4 +1,4 @@
-from botte import request, get
+from bottle import request, get
 
 @get('/age')
 def age_de():
@@ -6,9 +6,9 @@ def age_de():
     name = request.query.name
     age = request.query.age
 
-    if age > 1:
+    if int(age) > 1:
         return name + " a " + age + " ans."
-    elif age <= 0:
+    elif int(age) <= 0:
         return "Mouai..."
     else:
         return name + " a " + age + " an."

1NSI/05_Interaction_client-serveur/scripts/bottle_template_app.py

@@ -0,0 +1,7 @@
+from bottle import get, run, template
+
+@get('/page/<utilisateur>')
+def page_utilisateur(utilisateur):
+    return template("utilisateur.html", utilisateur=utilisateur)
+
+run(host='localhost', port=8080, debug=True)

1NSI/05_Interaction_client-serveur/scripts/formulaire.html

@@ -0,0 +1,7 @@
+<form method='post' action='bonjour'>
+
+    <input type='text' name='nom' placeholder='Votre nom ?'/>
+    <input type='checkbox' name='majeur' placeholder='Etes vous majeur?'/>
+
+    <input type='submit' value='Bonjour bottle !'/>
+</form>

1NSI/05_Interaction_client-serveur/scripts/modele_base.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang=fr>
+	<head>
+		<meta charset="UTF-8">
+		<meta name="Author" content="">
+        <title></title>
+	</head>
+
+	<body>
+        {{ body }}
+	</body>
+</html>

1NSI/06_Listes_et_tuples/1B_liste.tex

@@ -0,0 +1,84 @@
+\documentclass[a4paper,10pt]{article}
+\usepackage{myXsim}
+\usepackage{minted}
+
+\author{Benjamin Bertrand}
+\title{Listes et tuples - Cours}
+\date{janvier 2023}
+
+\pagestyle{empty}
+
+\begin{document}
+
+\maketitle
+
+\section{Les tableaux}
+
+\begin{definition}[Listes]
+
+    Un tableau est une structure de données qui est un conteneur (qui contient des objets) et une séquence (c'est à dire qu'elle elle ordonnée). En python, un tableau est appelé \mintinline{python}{list}.
+
+\end{definition}
+
+Exemple:
+
+\begin{center}
+    \begin{minipage}{0.9\linewidth}
+        \inputminted[bgcolor=base3]{python}{./scripts/1B_list.py}
+    \end{minipage}
+\end{center}
+\afaire{Compléter les espaces avec le résultat de l'opération.}
+
+\begin{propriete}[Opérations sur les listes Python]
+    \begin{itemize}
+        \item \textbf{Ajouter un élément} avec la méthode \mintinline{python}{.append(...)}
+        \item \textbf{Supprimer un élément} avec la méthode \mintinline{python}{.remove(...)}
+        \item \textbf{Concaténer deux listes} avec l'opération \mintinline{python}{+}
+    \end{itemize}
+\end{propriete}
+
+\begin{center}
+    \begin{minipage}{0.9\linewidth}
+        \inputminted[bgcolor=base3]{python}{./scripts/1B_operation.py}
+    \end{minipage}
+\end{center}
+
+\afaire{Compléter les espaces avec le résultat de l'opération.}
+
+\begin{propriete}[Parcours d'une tableau]
+    \begin{multicols}{2}
+        \begin{itemize}
+            \item On peut parcourir un tableau avec une boucle for
+                \begin{center}
+                    \begin{minipage}{0.9\linewidth}
+                        \inputminted[bgcolor=base3]{python}{./scripts/1B_for.py}
+                    \end{minipage}
+                \end{center}
+            \columnbreak
+            \item Utiliser les listes de comprehension
+                \begin{center}
+                    \begin{minipage}{0.9\linewidth}
+                        \inputminted[bgcolor=base3]{python}{./scripts/1B_comprehension.py}
+                    \end{minipage}
+                \end{center}
+        \end{itemize}
+    \end{multicols}
+\end{propriete}
+
+\begin{definition}[Liste de listes]
+
+    Pour décrire des tableaux à deux dimensions, on peut faire des listes de listes. Ce sont des listes dont les éléments sont des listes de chose.
+
+        \begin{minipage}{0.4\linewidth}
+            \inputminted[bgcolor=base3]{python}{./scripts/1B_list_list.py}
+        \end{minipage}
+        \hfill
+        \begin{minipage}{0.4\linewidth}
+            \inputminted[bgcolor=base3]{python}{./scripts/1B_list_list_2.py}
+        \end{minipage}
+
+    Cela permet de représenter des plateaux de jeux, des images...
+
+\end{definition}
+
+\end{document}

1NSI/06_Listes_et_tuples/2B_tuple.tex

@@ -0,0 +1,36 @@
+\documentclass[a4paper,10pt]{article}
+\usepackage{myXsim}
+\usepackage{minted}
+
+\author{Benjamin Bertrand}
+\title{Listes et tuples - Cours}
+\date{janvier 2023}
+
+\pagestyle{empty}
+
+\begin{document}
+
+\maketitle
+
+\setcounter{section}{1}
+\section{Les p-uplets}
+
+\begin{definition}[P-uplets - Tuples]
+
+    Un objet de type \mintinline{python}{tuple} (un p-uplet) est une suite ordonnée d’éléments qui peuvent être chacun de n’importe quel type.
+
+    Ce type d'objet est nom mutable c'est à dire qu'une fois créé, on ne peut plus le modifier.
+
+\end{definition}
+
+Dans la pratique, il s'utilise comme un objet de type \mintinline{python}{list}.
+
+\begin{center}
+    \begin{minipage}{0.9\linewidth}
+        \inputminted[bgcolor=base3]{python}{./scripts/2B_tuple.py}
+    \end{minipage}
+\end{center}
+
+
+
+\end{document}

1NSI/06_Listes_et_tuples/3E_suites_enplus.tex

@@ -0,0 +1,23 @@
+\documentclass[a4paper,10pt,landscape,twocolumn]{article}
+\usepackage{myXsim}
+
+\author{Benjamin Bertrand}
+\title{}
+\date{Février 2023}
+
+\DeclareExerciseCollection[step=3]{banque}
+\xsimsetup{collect}
+
+\pagestyle{empty}
+
+
+\begin{document}
+\input{exercises.tex}
+
+\printcollection{banque}
+\vfill
+
+\printcollection{banque}
+\vfill
+
+\end{document}

1NSI/06_Listes_et_tuples/Découverte des listes et des tuples.ipynb

@@ -0,0 +1,585 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "id": "ed3c16da",
+   "metadata": {},
+   "source": [
+    "# Découverte des listes et des tuples\n",
+    "\n",
+    "## Mise en situation\n",
+    "\n",
+    "On souhaite écrire un programme qui fait une moyenne de notes.\n",
+    "\n",
+    "1. Écrire une fonction `moyenne3` qui prend en argument 3 notes et qui renvoie la moyenne de ces trois notes"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "352fd339",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# tests\n",
+    "assert moyenne3(1, 2, 3) == 2\n",
+    "assert moyenne3(10, 0, 5) == 5"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "ddd2db52",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# fonction"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "3e58998e",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "markdown",
+   "id": "97396105",
+   "metadata": {},
+   "source": [
+    "2. Écrire une fonction `moyenne_question` qui prend en argument un nombre de notes puis renvoie la moyenne des notes entrée par l'utilisateur (avec input)."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "4dd1cb77",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# pas de tests à cause de l'utilisation du input"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "572a9917",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# fonction"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "af965cbe",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "markdown",
+   "id": "91486d89",
+   "metadata": {},
+   "source": [
+    "3. On voudrait maintenant écrire une fonction qui prend en argument plusieurs notes (qu'on ne connait pas à l'avance) et qui renvoie la moyenne de ces notes. Quels sont les obstacles qui empêchent de réaliser une telle fonction?"
+   ]
+  },
+  {
+   "cell_type": "raw",
+   "id": "ac18a2ae",
+   "metadata": {},
+   "source": []
+  },
+  {
+   "cell_type": "markdown",
+   "id": "28501a12",
+   "metadata": {},
+   "source": [
+    "## Les listes\n",
+    "\n",
+    "Les `list` sont un autre type de variable (au même titre que les `int`, `float`...). Ils ont la particularité de stocker un nombre arbitraire de variables. En voici des exemples"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "0c8dd096",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "liste1 = [1, 2, 3, 4, 5]\n",
+    "liste2 = [\"a\", \"c\" \"uio\", \"éé\"]\n",
+    "liste3 = [-1, 2.2, \"uio\", 10, 100, \"1000\"] "
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "28c340b2",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "print(liste1)\n",
+    "print(liste2)\n",
+    "print(liste3)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "9dd742c8",
+   "metadata": {},
+   "source": [
+    "### Accéder à un élément de liste\n",
+    "\n",
+    "Pour accéder à un élément particulier d'une liste, on utilise les crochets`[]`.\n",
+    "\n",
+    "1. Deviner ce qui va être afficher par les commandes ci-dessous avant de l'exécuter."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "87fc0d29",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "print(liste1[3])\n",
+    "print(liste2[2])\n",
+    "print(liste3[0])\n",
+    "print(liste1[-1])"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "61cb8afe",
+   "metadata": {},
+   "source": [
+    "2. Écrire les commandes pour accéder au nombre 2 de la liste1, \"éé\" de la liste2 et \"uio\" de la liste3"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "f11b02a8",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "markdown",
+   "id": "cadb6818",
+   "metadata": {},
+   "source": [
+    "3. Que se passe-t-il quand on essayer d'accéder à une valeur qui n'existe pas?"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "37903285",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "raw",
+   "id": "9a0e4586",
+   "metadata": {},
+   "source": []
+  },
+  {
+   "cell_type": "markdown",
+   "id": "da97681e",
+   "metadata": {},
+   "source": [
+    "4. On peut aussi modifier un élément d'une liste"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "f594935a",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "liste1[1] = \"azert\"\n",
+    "print(list1)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "bd595043",
+   "metadata": {},
+   "source": [
+    "5. Construire une liste avec les nombres pairs inférieur à 10. Puis modifier la pour que les multiples de 4 soient remplacés par \"a\"."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "4677cbb0",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "markdown",
+   "id": "f08d4c53",
+   "metadata": {},
+   "source": [
+    "### Ajouter/supprimer des éléments\n",
+    "\n",
+    "Pour ajouter des éléments, on utilise la méthode `.append(...)`."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "ff4e90a0",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "liste3 = [-1, 2.2, \"uio\", 10, 100, \"1000\"]\n",
+    "print(liste3)\n",
+    "liste3.append(\"nsi\")\n",
+    "print(liste3)\n",
+    "liste3.append(\"azert\")\n",
+    "print(liste3)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "8a0f012c",
+   "metadata": {},
+   "source": [
+    "1. Écrire une fonction `table` qui prend en argument un nombre `a` et une longueure `n` et qui renvoie les multiples de a de 0 à a*n."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "59a55bc2",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Testes\n",
+    "assert table(2, 10) == [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20]\n",
+    "assert table(3, 5) == [0, 3, 6, 9, 12, 15]"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "69fb46d6",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Fonction"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "04e04b5d",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "markdown",
+   "id": "36258d27",
+   "metadata": {},
+   "source": [
+    "Pour enlever un élément, on utilise la méthode `.remove(...)`."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "id": "549a996d",
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "[-1, 2.2, 'uio', 10, 100, 10]\n",
+      "[-1, 2.2, 10, 100, 10]\n",
+      "[-1, 2.2, 100, 10]\n"
+     ]
+    }
+   ],
+   "source": [
+    "liste3 = [-1, 2.2, \"uio\", 10, 100, 10]\n",
+    "print(liste3)\n",
+    "liste3.remove(\"uio\")\n",
+    "print(liste3)\n",
+    "liste3.remove(10)\n",
+    "print(liste3)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "0bc67d3c",
+   "metadata": {},
+   "source": [
+    "### Longueur d'une liste\n",
+    "\n",
+    "Pour mesurer la longueur d'une liste, on utilise la fonction `len(...)`."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "id": "9c809de2",
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "5\n",
+      "3\n",
+      "6\n"
+     ]
+    }
+   ],
+   "source": [
+    "liste1 = [1, 2, 3, 4, 5]\n",
+    "print(len(liste1))\n",
+    "liste2 = [\"a\", \"c\" \"uio\", \"éé\"]\n",
+    "print(len(liste2))\n",
+    "liste3 = [-1, 2.2, \"uio\", 10, 100, \"1000\"] \n",
+    "print(len(liste3))"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "88060355",
+   "metadata": {},
+   "source": [
+    "1. Écrire une fonction `somme` qui prend en argument une liste de nombres et qui renvoie la somme des nombres"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "19510eb8",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Tests\n",
+    "assert somme([1, 2, 3]) == 6\n",
+    "assert somme([1]) == 1\n",
+    "assert somme([1, 5, 10, 0, 4]) == 20\n",
+    "assert somme([1.2, 1, 1.5]) == 3.7"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 6,
+   "id": "38c79fed",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Fonction"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "f4cd9cbf",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "markdown",
+   "id": "3e7e0a3a",
+   "metadata": {},
+   "source": [
+    "2. Écrire une fonction `moyenne` qui prend en argument une liste de nombres et qui renvoie la moyenne de ces nombres"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "e83df22f",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Tests\n",
+    "assert moyenne([1, 2, 3]) == 2\n",
+    "assert moyenne([1]) = 1"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "750b4e2f",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Fonctions"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "35efeef8",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "markdown",
+   "id": "9bff74a3",
+   "metadata": {},
+   "source": [
+    "### Boucle for sur une liste\n",
+    "\n",
+    "Il est possible de faire une boucle `for` sur les éléments d'une liste.\n",
+    "\n",
+    "Par exemple, la fonction `moyenne` précédement rédigée peut être réécrite de la manière suivante"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "id": "c93f43d4",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def moyenne(notes:list)->float:\n",
+    "    \"\"\"Calculer la moyenne des notes de la liste\"\"\"\n",
+    "    total = 0\n",
+    "    for note in notes:\n",
+    "        total = total + note\n",
+    "    return total / len(notes)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "53c180b6",
+   "metadata": {},
+   "source": [
+    "1. Ecrire une fonction `somme` qui prend en argument une liste de nombres et qui renvoie la somme de ces nombres."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "f956b1ec",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "markdown",
+   "id": "4ec924e6",
+   "metadata": {},
+   "source": [
+    "2. Ecrire une fonction `multiplie` qui prend en argument un nombre et une liste de nombres et qui renvoie la liste des nombres multipliées par l'autre nombre."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "c90251a7",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "#tests\n",
+    "assert multiplie(2, [1, 2, 3]) == [2, 4, 6]\n",
+    "assert multiplie(0, [1, 3, 6]) == [0, 0, 0]\n",
+    "assert multiplie(-1, [1, 10, 100, -1]) == [-1, -10, -100, 1]"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 8,
+   "id": "81f3ebdf",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "#Fonction"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "bd7c1976",
+   "metadata": {},
+   "source": [
+    "3. Ecrire une fonction `filtre_impaire` qui prendre en argument une liste de nombres et qui renvoie une liste contenant uniquement les nombres impaires."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 6,
+   "id": "b484693e",
+   "metadata": {},
+   "outputs": [
+    {
+     "ename": "NameError",
+     "evalue": "name 'filtre_impaire' is not defined",
+     "output_type": "error",
+     "traceback": [
+      "\u001b[0;31m---------------------------------------------------------------------------\u001b[0m",
+      "\u001b[0;31mNameError\u001b[0m                                 Traceback (most recent call last)",
+      "Input \u001b[0;32mIn [6]\u001b[0m, in \u001b[0;36m<module>\u001b[0;34m\u001b[0m\n\u001b[1;32m      1\u001b[0m \u001b[38;5;66;03m#tests\u001b[39;00m\n\u001b[0;32m----> 2\u001b[0m \u001b[38;5;28;01massert\u001b[39;00m \u001b[43mfiltre_impaire\u001b[49m([\u001b[38;5;241m1\u001b[39m, \u001b[38;5;241m2\u001b[39m, \u001b[38;5;241m3\u001b[39m, \u001b[38;5;241m4\u001b[39m, \u001b[38;5;241m5\u001b[39m]) \u001b[38;5;241m==\u001b[39m [\u001b[38;5;241m1\u001b[39m, \u001b[38;5;241m3\u001b[39m, \u001b[38;5;241m5\u001b[39m]\n\u001b[1;32m      3\u001b[0m \u001b[38;5;28;01massert\u001b[39;00m filtre_impaire([\u001b[38;5;241m2\u001b[39m, \u001b[38;5;241m4\u001b[39m]) \u001b[38;5;241m==\u001b[39m []\n\u001b[1;32m      4\u001b[0m \u001b[38;5;28;01massert\u001b[39;00m filtre_impaire([]) \u001b[38;5;241m==\u001b[39m []\n",
+      "\u001b[0;31mNameError\u001b[0m: name 'filtre_impaire' is not defined"
+     ]
+    }
+   ],
+   "source": [
+    "#tests\n",
+    "assert filtre_impaire([1, 2, 3, 4, 5]) == [1, 3, 5]\n",
+    "assert filtre_impaire([2, 4]) == []\n",
+    "assert filtre_impaire([]) == []"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 7,
+   "id": "c43261b1",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Fonctions"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "fc069c83",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.10.9"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

1NSI/06_Listes_et_tuples/exercises.tex

@@ -0,0 +1,217 @@
+\begin{exercise}[subtitle={QCM}, step={2}, origin={Annales}, topics={Tuples et listes}, tags={tuple, liste}]
+    \begin{enumerate}
+        \item Quel est le type de l'expression \texttt{f(4)} si la fonction \texttt{f} est définie par
+
+            \begin{center}
+                \begin{minipage}{0.9\linewidth}
+                    \inputminted[bgcolor=base3]{python}{./scripts/QCM_f.py}
+                \end{minipage}
+            \end{center}
+
+
+            \begin{tasks}(4)
+                \task un entier
+                \task un flottant
+                \task une liste
+                \task un tuple
+            \end{tasks}
+
+        \item On dispose d'une liste définie par \mintinline{python}{L = [15, 17, 12, 23]}.
+
+            Quelle est la valeur de L après l'instruction \mintinline{python}{L[2] = 25}
+
+            \begin{tasks}(2)
+                \task \mintinline{python}{[15, 25, 12, 23]}
+                \task \mintinline{python}{[15, 17, 25, 12, 23]}
+                \task \mintinline{python}{[15, 25, 25, 23]}
+                \task \mintinline{python}{[15, 17, 12, 25, 23]}
+            \end{tasks}
+
+        \item Après l'affectation suivante :
+
+                \mintinline{python}{alphabet = [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',] }
+
+            quelle est l'expression qui permet d'accéder à la lettre E?
+
+            \begin{tasks}(2)
+                \task \mintinline{python}{alphabet.E}
+                \task \mintinline{python}{alphabet['E']}
+                \task \mintinline{python}{alphabet[4]}
+                \task \mintinline{python}{alphabet[5]}
+            \end{tasks}
+
+        \item On considère le script suivant:
+
+            \begin{center}
+                \begin{minipage}{0.9\linewidth}
+                    \inputminted[bgcolor=base3]{python}{./scripts/QCM_t.py}
+                \end{minipage}
+            \end{center}
+
+            Quelle est la valeur de t à la fin de son exécution?
+
+            \begin{tasks}(4)
+                \task \mintinline{python}{[2, 13, 9, 2]}
+                \task \mintinline{python}{[2, 8, 14, 2]}
+                \task \mintinline{python}{[2, 13, 14, 2]}
+                \task \mintinline{python}{[2, 13, 9, 2]}
+            \end{tasks}
+
+
+        \item On considère la fonction suivante:
+
+            \begin{center}
+                \begin{minipage}{0.9\linewidth}
+                    \inputminted[bgcolor=base3]{python}{./scripts/QCM_somme.py}
+                \end{minipage}
+            \end{center}
+
+            Par quelle instruction faut-il remplacer les points de suspension pour que l'appel
+
+            \mintinline{python}{somme([10, 11, 12, 13, 14])} renvoie 60?
+
+            \begin{tasks}(2)
+                \task \mintinline{python}{s = tab[i]}
+                \task \mintinline{python}{s = s + tab[i]}
+                \task \mintinline{python}{tab[i] = tab[i] + s}
+                \task \mintinline{python}{s = s + i}
+            \end{tasks}
+
+        \item On exécute le script suivant:
+
+            \begin{center}
+                \begin{minipage}{0.9\linewidth}
+                    \inputminted[bgcolor=base3]{python}{./scripts/QCM_double.py}
+                \end{minipage}
+            \end{center}
+
+            Quelle est la valeur de m à la fin de son exécution?
+
+            \begin{tasks}(1)
+                \task \mintinline{python}{[ [0, 0, 0, 0, 0], [0, 1, 2, 3, 4], [0, 2, 4, 6, 8] ] }
+                \task \mintinline{python}{[ [0, 0, 0], [0, 1, 2], [0, 2, 4], [0, 3, 6], [0, 4, 8] ] }
+                \task \mintinline{python}{[ [1, 1, 1], [2, 4, 6], [3, 6, 9], [4, 8, 12], [5, 10, 15] ] }
+                \task \mintinline{python}{[ [1, 1, 1, 1, 1], [2, 4, 6, 8, 10], [3, 6, 9, 12, 15], [4, 8, 12, 16, 20], [5, 10, 15, 20, 25] ]}
+            \end{tasks}
+
+        \item L est une liste d'entiers. On définit la fonction suivante
+
+            \begin{center}
+                \begin{minipage}{0.9\linewidth}
+                    \inputminted[bgcolor=base3]{python}{./scripts/QCM_filtre.py}
+                \end{minipage}
+            \end{center}
+
+            Que calcule cette fonction?
+            \begin{tasks}(1)
+                \task le maximum de la liste L passée en argument
+                \task le minimum de la liste L passée en argument
+                \task le premier terme de la liste L passée en argument
+                \task le dernier terme de la liste L passée en argument
+            \end{tasks}
+
+        \item Quelle est la valeur de la variable r à la fin de l'exécution du script suivant?
+
+            \begin{center}
+                \begin{minipage}{0.9\linewidth}
+                    \inputminted[bgcolor=base3]{python}{./scripts/QCM_tuple.py}
+                \end{minipage}
+            \end{center}
+
+            \begin{tasks}(4)
+                \task -9
+                \task 2
+                \task 3
+                \task 6
+            \end{tasks}
+
+
+        \item On définit : \mintinline{python}{[10,9,8,7,6,5,4,3,2,1]}
+
+            Quelle est la valeur de \mintinline{python}{L[L[3]]}
+
+            \begin{tasks}(4)
+                \task 3
+                \task 4
+                \task 7
+                \task 8
+            \end{tasks}
+
+        \item On considère la liste de listes suivantes
+
+            \begin{center}
+                \begin{minipage}{0.9\linewidth}
+                    \inputminted[bgcolor=base3]{python}{./scripts/QCM_tictactoe.py}
+                \end{minipage}
+            \end{center}
+
+            Quelle instruction permet d'obtenir une diagonale de "X"?
+
+            \begin{tasks}(2)
+                \task \mintinline{python}{tictactoe[3] = "X"}
+                \task \mintinline{python}{tictactoe[4] = "X"}
+                \task \mintinline{python}{tictactoe[1][1] = "X"}
+                \task \mintinline{python}{tictactoe[2][2] = "X"}
+            \end{tasks}
+
+        \item On définit ainsi une liste M
+
+            \begin{center}
+                \mintinline{python}{M = [['A','B','C','D'], ['E','F','G','H'], ['I','J','K','L']] }
+            \end{center}
+            Quelle expression vaut la chaîne de caractères 'H'?
+
+            \begin{tasks}(4)
+                \task \mintinline{python}{M[1][3]}
+                \task \mintinline{python}{M[3][1]}
+                \task \mintinline{python}{M(7)}
+                \task \mintinline{python}{M(8)}
+            \end{tasks}
+
+
+
+    \end{enumerate}
+\end{exercise}
+
+\begin{exercise}[subtitle={Suite de Fibonacci}, step={3}, origin={Annales}, topics={Tuples et listes}, tags={tuple, liste}]
+    En mathématiques, la suite de Fibonacci est une suite d'entiers dans laquelle chaque terme est la somme des deux termes qui le précèdent.
+
+    Voici les premiers termes de la suite
+
+    \begin{center}
+        1, 2, 3, 5, 8, 13, 21 ...
+    \end{center}
+
+    Écrire une fonction \texttt{Fibonacci} qui prend en argument un nombre $n$ et qui retourne la liste des $n$ premiers nombres de la suite de Fibonacci.
+\end{exercise}
+
+\begin{exercise}[subtitle={Suite de Syracuse}, step={3}, origin={Annales}, topics={Tuples et listes}, tags={tuple, liste}]
+    Une suite de Syracuse est une suite d'entiers naturels définie de la manière suivante : on part d'un nombre entier strictement positif ; s’il est pair, on le divise par 2 ; s’il est impair, on le multiplie par 3 et l'on ajoute 1. En répétant l’opération, on obtient une suite d'entiers strictement positifs dont chacun ne dépend que de son prédécesseur.
+
+    Par exemple, à partir de 14, on construit la suite des nombres :
+    \begin{center}
+        14, 7, 22, 11, 34, 17, 52, 26, 13, 40, 20, 10, 5, 16, 8, 4, 2, 1, 4, 2...
+    \end{center}
+    C'est la suite de Syracuse du nombre 14.
+
+    Après que le nombre 1 a été atteint, la suite des valeurs 1, 4, 2, 1, 4, 2… se répète indéfiniment en un cycle de longueur 3, appelé cycle trivial. On s'arrêtera donc au premier 1 rencontré.
+
+    \begin{enumerate}
+        \item Écrire une fonction \texttt{syracuse} qui prend en argument le nombre de départ puis qui renvoie la liste des termes de la suite de Syracuse associée à ce nombre. On s'arrêtera au premier 1 rencontré.
+        \item
+            \begin{enumerate}
+                \item Écrire une fonction \texttt{temps\_de\_vol} qui prend en argument la liste des termes de la liste et qui renvoie le nombre de termes avant d'arriver à 1.
+                \item Lister les temps de vol de tous les nombres de 2 à 50.
+            \end{enumerate}
+        \item
+            \begin{enumerate}
+                \item Écrire une fonction \texttt{altitude\_de\_vol} qui prend en argument la liste des termes de la liste et qui renvoie la plus haute valeur.
+                \item Lister les altitudes de vol de tous les nombres de 2 à 50.
+            \end{enumerate}
+        \item
+            \begin{enumerate}
+                \item Écrire une fonction \texttt{temps\_en\_altitude} qui prend en argument la liste des termes de la liste et qui renvoie le nombre de terme plus haut que le premier terme de la liste.
+                \item Lister les temps en altitude de tous les nombres entre 2 et 50.
+            \end{enumerate}
+    \end{enumerate}
+\end{exercise}

1NSI/06_Listes_et_tuples/index.rst

@@ -0,0 +1,28 @@
+Listes et tuples
+################
+
+:date: 2023-01-22
+:modified: 2023-01-22
+:authors: Benjamin Bertrand
+:tags: Listes, Python
+:category: 1NSI
+:summary: Découverte et manipulation de listes et de tuples
+
+
+Éléments du programme
+=====================
+
+Contenus
+--------
+
+Capacités attendues
+-------------------
+
+Commentaires
+------------
+
+Progression
+===========
+
+Étape 1:
+--------

1NSI/06_Listes_et_tuples/plan_de_travail.tex

@@ -0,0 +1,45 @@
+\documentclass[a4paper,12pt]{article}
+\usepackage{myXsim}
+\usepackage{minted}
+
+\author{Benjamin Bertrand}
+\title{Listes et tuples - Plan de travail}
+\tribe{1NSI}
+\date{janvier 2023}
+
+\pagestyle{empty}
+
+\DeclareExerciseCollection{banque}
+\xsimsetup{
+}
+
+
+\begin{document}
+\maketitle
+
+% Résumé
+
+\bigskip
+
+Savoir-faire de la séquence
+\begin{itemize}
+    \item
+\end{itemize}
+
+\bigskip
+
+Ordre des étapes à respecter
+
+
+\section{}
+
+\listsectionexercises
+
+
+\pagebreak
+
+\input{exercises.tex}
+\printcollection{banque}
+
+
+\end{document}

1NSI/06_Listes_et_tuples/scripts/1B_comprehension.py

@@ -0,0 +1,14 @@
+>>> carres = [i**2 for i in range(10)]
+>>> print(carres)
+
+
+>>> moitier_carres = [
+        carre / 2 for carre in carres
+        ]
+>>> print(moitier_carres)
+
+
+>>> impaire = [
+        i for i in range(10) if i % 2
+        ]
+>>> print(impaire)

1NSI/06_Listes_et_tuples/scripts/1B_for.py

@@ -0,0 +1,12 @@
+choses = ["a", 2, -3, 5]
+
+# Parcours sur l'index
+for index in range(len(choses)):
+    print(choses[index])
+
+
+
+
+# Parcours sur les éléments directement
+for element in choses:
+    print(element)

1NSI/06_Listes_et_tuples/scripts/1B_list.py

@@ -0,0 +1,15 @@
+>>> conteneur = [1, -2, 3.3, "ahah", "plop"]
+>>> len(conteneur)
+
+
+>>> conteneur[0]
+
+
+>>> conteneur[3]
+
+
+>>> conteneur[-1]
+
+
+>>> conteneur[0] = "début"
+>>> print(conteneur)

1NSI/06_Listes_et_tuples/scripts/1B_list_list.py

@@ -0,0 +1,5 @@
+>>> L = [
+        ["", "X", ""],
+        ["X", "", "X"],
+        ["", "X", ""]
+        ]

1NSI/06_Listes_et_tuples/scripts/1B_list_list_2.py

@@ -0,0 +1,4 @@
+>>> L[1]
+
+
+>>> L[0}[1]

1NSI/06_Listes_et_tuples/scripts/1B_operation.py

@@ -0,0 +1,10 @@
+>>> conteneur = [1, 2, 3, 5]
+>>> conteneur.append("a")
+>>> print(conteneur)
+
+
+>>> conteneur.remove(1)
+>>> print(conteneur)
+
+
+>>> conteneur + conteneur

1NSI/06_Listes_et_tuples/scripts/2B_tuple.py

@@ -0,0 +1,17 @@
+>>> conteneur = ( 1, -2, 3.3, "ahah", "plop" )
+>>> len(conteneur)
+
+
+>>> conteneur[0]
+
+
+>>> conteneur[3]
+
+
+>>> conteneur[-1]
+
+
+# les méthodes qui suivent ne marchent pas
+>>> conteneur[0] = "début"
+>>> conteneur.append(2)
+>>> conteneur.remove(1)

1NSI/06_Listes_et_tuples/scripts/QCM_double.py

@@ -0,0 +1,6 @@
+m = []
+for i in range(5):
+    n = []
+    for j in range(3):
+        n.append(i*j)
+        m.append(n)

1NSI/06_Listes_et_tuples/scripts/QCM_f.py

@@ -0,0 +1,2 @@
+def f(x):
+    return (x, x**2)

1NSI/06_Listes_et_tuples/scripts/QCM_filtre.py

@@ -0,0 +1,6 @@
+def f(L):
+    m = L[0]
+    for x in L:
+    if x > m:
+        m = x
+    return m

1NSI/06_Listes_et_tuples/scripts/QCM_somme.py

@@ -0,0 +1,5 @@
+def somme(tab):
+    s = 0
+    for i in range(len(tab)):
+        ......
+    return s

1NSI/06_Listes_et_tuples/scripts/QCM_t.py

@@ -0,0 +1,2 @@
+t = [2, 8, 9, 2]
+t[2] = t[2] + 5

1NSI/06_Listes_et_tuples/scripts/QCM_tictactoe.py

@@ -0,0 +1,3 @@
+tictactoe = [['X', 'o', 'o'],
+             ['o', 'o', 'o'],
+             ['o', 'o', 'X']]

1NSI/06_Listes_et_tuples/scripts/QCM_tuple.py

@@ -0,0 +1,2 @@
+t = (10,6,1,12,15)
+r = t[3] - t[1]

1NSI/06_Listes_et_tuples/solutions.tex

@@ -0,0 +1,28 @@
+\documentclass[a4paper,10pt]{article}
+\usepackage{myXsim}
+
+\usetikzlibrary{shapes.geometric}
+
+\author{Benjamin Bertrand}
+\title{Listes et tuples - Solutions}
+\tribe{1NSI}
+\date{janvier 2023}
+
+\DeclareExerciseCollection{banque}
+\xsimsetup{
+    exercise/print=false,
+    solution/print=true,
+}
+
+\pagestyle{empty}
+
+
+\begin{document}
+
+\maketitle
+
+\input{exercises.tex}
+%\printcollection{banque}
+%\printsolutions{exercises}
+
+\end{document}

1NSI/07_Representation_de_texte/02_unicode.ipynb

@@ -0,0 +1,135 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "id": "651b99d9",
+   "metadata": {},
+   "source": [
+    "# Unicode et python\n",
+    "\n",
+    "La fonction `chr` permet de passer du point de code au caractère. Le point de code peut être exprimé en décimal ou en exadécimal.\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "id": "1b5a86a7",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "'🙏'"
+      ]
+     },
+     "execution_count": 1,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "chr(128591)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "id": "128b0f7b",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "'😂'"
+      ]
+     },
+     "execution_count": 5,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "chr(0x01F602)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "442746cb",
+   "metadata": {},
+   "source": [
+    "La fonciton `print` quand à elle peut directement accépté le point de code. Pour cela, il faut ajouter \\U et les 0 nécéssaires pour avec un mot de 8 caractères"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 10,
+   "id": "59bcd496",
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "🔥\n"
+     ]
+    }
+   ],
+   "source": [
+    "print(\"\\U0001F525\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "60dfa4c9",
+   "metadata": {},
+   "source": [
+    "1. Utilisez la fonction `chr` (en décimal) pour faire un tableau de 10 colonnes sur 5 lignes avec les caractères après 🔥"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "a9f74419",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "markdown",
+   "id": "9bb194d8",
+   "metadata": {},
+   "source": [
+    "2.  Utiliser la fonction `chr` (en héxadécimal) pour faire un tableau de 15 colonnes sur 10 lignes avec les caractères après U+A000"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "eb44cde5",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.10.9"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

1NSI/07_Representation_de_texte/03_str.ipynb

@@ -0,0 +1,342 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "id": "bf0de95a",
+   "metadata": {},
+   "source": [
+    "# Les strings\n",
+    "\n",
+    "Dans ce TP, vous apprendrez les manipulations de bases des chaine de caractères en python (`str`)."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "e42ebfb4",
+   "metadata": {},
+   "source": [
+    "## Str\n",
+    "\n",
+    "Les `str` en python ont de nombreuses similarités avec les `list` et les `tuple`."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "id": "64156203",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "mot = \"Salut tout le monde\""
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "6a818ba8",
+   "metadata": {},
+   "source": [
+    "Reprendre le cours sur les listes et les tuples et trouver les similarités avec les `str`. "
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "640433ba",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "f758b002",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "35bbe2e4",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "markdown",
+   "id": "ca07c701",
+   "metadata": {},
+   "source": [
+    "Les `str` ont des méthodes spécifiques"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "id": "70da034e",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "'Salut_tout_le_monde'"
+      ]
+     },
+     "execution_count": 5,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "mot.replace(\" \", \"_\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 6,
+   "id": "952f4936",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "'SALUT TOUT LE MONDE'"
+      ]
+     },
+     "execution_count": 6,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "mot.upper()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "45762d2b",
+   "metadata": {},
+   "source": [
+    "## Exercices techniques"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "6c221743",
+   "metadata": {},
+   "source": [
+    "1. Ecrire une fonction `renverse` qui prend en argument une chaine de caractère et qui renverse cette dernière."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 11,
+   "id": "24a281d3",
+   "metadata": {},
+   "outputs": [
+    {
+     "ename": "TypeError",
+     "evalue": "renverse() takes 0 positional arguments but 1 was given",
+     "output_type": "error",
+     "traceback": [
+      "\u001b[0;31m---------------------------------------------------------------------------\u001b[0m",
+      "\u001b[0;31mTypeError\u001b[0m                                 Traceback (most recent call last)",
+      "Input \u001b[0;32mIn [11]\u001b[0m, in \u001b[0;36m<module>\u001b[0;34m\u001b[0m\n\u001b[1;32m      1\u001b[0m \u001b[38;5;66;03m# tests\u001b[39;00m\n\u001b[0;32m----> 2\u001b[0m \u001b[38;5;28;01massert\u001b[39;00m \u001b[43mrenverse\u001b[49m\u001b[43m(\u001b[49m\u001b[38;5;124;43m\"\u001b[39;49m\u001b[38;5;124;43mazerty\u001b[39;49m\u001b[38;5;124;43m\"\u001b[39;49m\u001b[43m)\u001b[49m \u001b[38;5;241m==\u001b[39m \u001b[38;5;124m\"\u001b[39m\u001b[38;5;124mytreza\u001b[39m\u001b[38;5;124m\"\u001b[39m\n",
+      "\u001b[0;31mTypeError\u001b[0m: renverse() takes 0 positional arguments but 1 was given"
+     ]
+    }
+   ],
+   "source": [
+    "# tests\n",
+    "assert renverse(\"azerty\") == \"ytreza\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 10,
+   "id": "7cb00bce",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# votre fonction"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "1691a5f7",
+   "metadata": {},
+   "source": [
+    "2. Un palindrome est une chaine de caractère qui est identique peu importe le sens dans lequel on la lit.\n",
+    "\n",
+    "Écrire une fonction `est_palindrome` qui prend en argument une chaine de caractère et qui renvoie vrai ou faux suivant si elle est un palindrome ou non (on ne tiendra pas compte des espaces)."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 9,
+   "id": "b16877c0",
+   "metadata": {},
+   "outputs": [
+    {
+     "ename": "NameError",
+     "evalue": "name 'est_palindrom' is not defined",
+     "output_type": "error",
+     "traceback": [
+      "\u001b[0;31m---------------------------------------------------------------------------\u001b[0m",
+      "\u001b[0;31mNameError\u001b[0m                                 Traceback (most recent call last)",
+      "Input \u001b[0;32mIn [9]\u001b[0m, in \u001b[0;36m<module>\u001b[0;34m\u001b[0m\n\u001b[1;32m      1\u001b[0m \u001b[38;5;66;03m# tests\u001b[39;00m\n\u001b[0;32m----> 2\u001b[0m \u001b[38;5;28;01massert\u001b[39;00m \u001b[43mest_palindrom\u001b[49m(\u001b[38;5;124m\"\u001b[39m\u001b[38;5;124mcoucou\u001b[39m\u001b[38;5;124m\"\u001b[39m) \u001b[38;5;241m==\u001b[39m \u001b[38;5;28;01mFalse\u001b[39;00m\n\u001b[1;32m      3\u001b[0m \u001b[38;5;28;01massert\u001b[39;00m est_palidrome(\u001b[38;5;124m\"\u001b[39m\u001b[38;5;124mazertreza\u001b[39m\u001b[38;5;124m\"\u001b[39m) \u001b[38;5;241m==\u001b[39m \u001b[38;5;28;01mTrue\u001b[39;00m\n\u001b[1;32m      4\u001b[0m \u001b[38;5;28;01massert\u001b[39;00m est_palindrome(\u001b[38;5;124m'\u001b[39m\u001b[38;5;124mcaser vite ce palindrome ne mord ni lape cet ivre sac\u001b[39m\u001b[38;5;124m'\u001b[39m) \u001b[38;5;241m==\u001b[39m \u001b[38;5;28;01mTrue\u001b[39;00m\n",
+      "\u001b[0;31mNameError\u001b[0m: name 'est_palindrom' is not defined"
+     ]
+    }
+   ],
+   "source": [
+    "# tests\n",
+    "assert est_palindrome(\"coucou\") == False\n",
+    "assert est_palindrome(\"azertreza\") == True\n",
+    "assert est_palindrome('caser vite ce palindrome ne mord ni lape cet ivre sac') == True\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 12,
+   "id": "4f8ca51b",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Votre fonction"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "a06bc2e4",
+   "metadata": {},
+   "source": [
+    "## Chiffrement\n",
+    "\n",
+    "Le chiffrement de Césars consiste à décaler l'alphabet dans un message pour le rendre non comprehensible. Le décalage est appelé `clé de chiffrement`.\n",
+    "\n",
+    "Ainsi si la clé de chiffrement est 2, on aura\n",
+    "\n",
+    "| message orginnal | message chiffré |\n",
+    "| --- | --- |\n",
+    "| les | ngu |\n",
+    "\n",
+    "On supposera que le message original ne contient que des caractères ASCII (entre 32 et 126). Le message chiffré sera lui aussi composé de caractères ASCII entre 32 et 126.\n",
+    "\n",
+    "1. Écrire une fonction `chiffre_lettre` qui prend en argument la clé de chiffrement et un caractère et qui renvoie le caractère chiffré. "
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 13,
+   "id": "db6ab5b9",
+   "metadata": {},
+   "outputs": [
+    {
+     "ename": "NameError",
+     "evalue": "name 'chiffre_lettre' is not defined",
+     "output_type": "error",
+     "traceback": [
+      "\u001b[0;31m---------------------------------------------------------------------------\u001b[0m",
+      "\u001b[0;31mNameError\u001b[0m                                 Traceback (most recent call last)",
+      "Input \u001b[0;32mIn [13]\u001b[0m, in \u001b[0;36m<module>\u001b[0;34m\u001b[0m\n\u001b[1;32m      1\u001b[0m \u001b[38;5;66;03m# tests\u001b[39;00m\n\u001b[0;32m----> 2\u001b[0m \u001b[38;5;28;01massert\u001b[39;00m \u001b[43mchiffre_lettre\u001b[49m(\u001b[38;5;241m2\u001b[39m, \u001b[38;5;124m'\u001b[39m\u001b[38;5;124ml\u001b[39m\u001b[38;5;124m'\u001b[39m) \u001b[38;5;241m==\u001b[39m \u001b[38;5;124m'\u001b[39m\u001b[38;5;124mn\u001b[39m\u001b[38;5;124m'\u001b[39m\n\u001b[1;32m      3\u001b[0m \u001b[38;5;28;01massert\u001b[39;00m chiffre_lettre(\u001b[38;5;241m4\u001b[39m, \u001b[38;5;124m'\u001b[39m\u001b[38;5;124m~\u001b[39m\u001b[38;5;124m'\u001b[39m) \u001b[38;5;241m==\u001b[39m \u001b[38;5;124m'\u001b[39m\u001b[38;5;124m#\u001b[39m\u001b[38;5;124m'\u001b[39m\n\u001b[1;32m      4\u001b[0m \u001b[38;5;28;01massert\u001b[39;00m chiffre_lettre(\u001b[38;5;241m-\u001b[39m\u001b[38;5;241m10\u001b[39m, \u001b[38;5;124m'\u001b[39m\u001b[38;5;124m?\u001b[39m\u001b[38;5;124m'\u001b[39m) \u001b[38;5;241m==\u001b[39m \u001b[38;5;124m'\u001b[39m\u001b[38;5;124m5\u001b[39m\u001b[38;5;124m'\u001b[39m\n",
+      "\u001b[0;31mNameError\u001b[0m: name 'chiffre_lettre' is not defined"
+     ]
+    }
+   ],
+   "source": [
+    "# tests\n",
+    "assert chiffre_lettre(2, 'l') == 'n'\n",
+    "assert chiffre_lettre(4, '~') == '#'\n",
+    "assert chiffre_lettre(-10, '?') == '5'"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 14,
+   "id": "b5b0a910",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Fonction"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "765d8791",
+   "metadata": {},
+   "source": [
+    "2. Écrire une fonction `chiffre_message` qui prend en argument la clé de chiffrement et le message et qui renvoie tout le message chiffré."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "93ab941b",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "ca7c256c",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "markdown",
+   "id": "43e00026",
+   "metadata": {},
+   "source": [
+    "3. Écrire une fonction `dechiffre_message` qui prend en argument la clé de chiffrement et un message chiffré et qui renvoie le message déchiffré."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "395c7b40",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "534209fd",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "markdown",
+   "id": "271a2087",
+   "metadata": {},
+   "source": [
+    "4. Statistiquement, le caractère le plus présent dans un message et l'espace. Servez vous de cette connaissance pour écrire une fonction qui sera capable de trouver "
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.10.9"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

1NSI/07_Representation_de_texte/1B_table_encodage.tex

@@ -0,0 +1,89 @@
+\documentclass[a4paper,10pt]{article}
+\usepackage{myXsim}
+\usepackage{minted}
+
+\author{Benjamin Bertrand}
+\title{Representation de texte - Cours}
+\date{Février 2023}
+
+\pagestyle{empty}
+
+\begin{document}
+
+\maketitle
+
+Dans cette séquence, on traitera des différentes façons de faire correspondre un caractère (une lettre, un espace...) avec une représentation binaire.
+
+\section{Table et encodage}
+
+\begin{definition}[Table ASCII]
+
+    En 1960, la norme \textbf{ASCII} (American Standard Code for Information Interchange) a été crée pour uniformiser l'encodage des caractère par \textbf{l'ANSI} (American National Standards Institute).
+
+    Elle définit 128 codes, comprenant 95 caractères imprimables :
+    \begin{itemize}
+        \item les chiffres arabes de 0 à 9
+        \item les 26 lettres de l'alphabet latin en minuscules et en capitales
+        \item des symboles mathématiques et de ponctuation
+    \end{itemize}
+
+    Chaque caractère est codé sur 7 bits même si on le représente le plus souvent sur 8 bits (1 octet)
+\end{definition}
+
+\paragraph{Remarques:}
+\begin{itemize}
+    \item Avantages de la table ASCII: \dotfill
+    \item Limitations: \dotfill
+\end{itemize}
+
+\begin{definition}[ISO-8859-1 ou Latin-1]
+    Pour rendre l'utilisation de la table ASCII plus universelle d'autres tables ont été créées.
+
+    L'ISO (Organisation internationale de normalisation) a proposé la norme ISO-8859 qui utilise le 8e bit pour ajouter 128 caractères supplémentaires pour un total de $2^8 = 256$ caractères.
+
+    Parmi les tables issues de cette norme, la table ISO-8859-1 (ou Latin-1) est celle qui a été le plus utilisée en occident car elle ajoute les caractères accentués et des nouveaux signes de ponctuation.
+\end{definition}
+
+
+\paragraph{Remarques:}
+\begin{itemize}
+    \item Avantages de la table ISO-8859-1: \dotfill
+    \item Limitations: \dotfill
+\end{itemize}
+
+\begin{definition}[Unicode]
+    Pour assurer l'universalité de la représentation de caractères la norme \textbf{Unicode} découpe l'encodage en deux étape:
+    \begin{itemize}
+        \item Le point de code: association entre un caractère et un \textbf{point de code} codés sur 20 ou 21 bits
+        \item L'encodage du point de code (UTF-n où n est le nombre minimal de bit pour représenter un point de code).
+    \end{itemize}
+    Encodages les plus utilisés:
+    \begin{itemize}
+        \item UTF-8: le point de code est encodé sur 1 à 4 octets (ou 8 à 32 bits)
+        \item UTF-16: le point de code est encodé sur 2 à 4 octets (16 à 32bits)
+        \item UTF-32: le point de code est encodé sur 4octets (ou 32 bits)
+    \end{itemize}
+\end{definition}
+
+\paragraph{Encodage et décodage avec l'Unicode} (en vous aidant de \url{https://unicode-table.com/fr})
+\begin{center}
+    \begin{tabular}{p{3cm}|p{3cm}|p{3cm}|p{3cm}}
+        Caractère & Point de code & UTF-8 & UTF-32 \\
+        \hline
+        a       & & & \\
+        \euro   & & & \\
+        $\aleph$ & & & \\
+    \end{tabular}
+\end{center}
+
+
+
+\paragraph{Remarques:}
+\begin{itemize}
+    \item Avantages de l'Unicode: \dotfill
+    \item Limitations: \dotfill
+\end{itemize}
+
+
+
+\end{document}

1NSI/07_Representation_de_texte/1E_ascii.tex

@@ -0,0 +1,19 @@
+\documentclass[a4paper,10pt]{article}
+\usepackage{myXsim}
+\usepackage{minted}
+
+\author{Benjamin Bertrand}
+\title{Représentation de caractères - Exercices}
+\date{Février 2023}
+
+\DeclareExerciseCollection[step=1]{banque}
+\xsimsetup{collect}
+
+\pagestyle{empty}
+
+\begin{document}
+\input{exercises.tex}
+
+\printcollection{banque}
+
+\end{document}

1NSI/07_Representation_de_texte/exercises.tex

@@ -0,0 +1,132 @@
+\begin{exercise}[subtitle={Table ASCII}, step={1}, origin={}, topics={ Representation de texte }, tags={ ASCII, Chiffrement }]
+    Vous trouverez la table ASCII à la fin de l'exercice.
+
+    \begin{enumerate}
+        \item Combien de caractères sont décrits par cette table?
+        \item Quels sont les caractères d'écriture absents de cette table?
+        \item Combien de bits sont nécessaires pour encoder un caractère avec la table ascii? Combien d'octets?
+        \item Encoder en binaire puis en héxadécimal grâce à la table ASCII le message \Ovalbox{\texttt{NSI <3}}.
+        \item Décoder grace à la table ASCII le message
+            \begin{center}
+                01001101 01100001 01110100 01101000 00100000 00101011 00100000 01010011 01010110 01010100 00100000 00101011 00100000 01010000 01000011 00100000 00111101 00100000 00111100 00110011
+            \end{center}
+        \item Décoder grace à la table ASCII le message
+            \begin{center}
+               4D 61 74 68 3A 29
+            \end{center}
+        \item Le programme de première NSI contient \np{25107} caractères. Quelle sera son poids s'il est numérisé en ASCII? Vous exprimerez le résultat en octet et en bit.
+    \end{enumerate}
+    \begin{center}
+        \includegraphics[scale=0.35]{./fig/ascii_table}
+    \end{center}
+\end{exercise}
+
+\begin{exercise}[subtitle={Table ASCII et Python}, step={1}, origin={}, topics={ Representation de texte }, tags={ ASCII, Chiffrement }]
+    En Python, il existe deux fonctions qui permettent de convertir un caractère en son point de code (lisez place dans la table ASCII pour le moment) en décimal et inversement.
+    \begin{itemize}
+        \item \mintinline{python}{ord}: caractère vers point de code
+        \item \mintinline{python}{chr}: point de code vers le caractère
+    \end{itemize}
+    \begin{enumerate}
+        \item Avec python afficher les 128 craactères de la table ascii (Bonus: faites les apparaitres sur 4 colonnes comme dans la table au dessus).
+        \item Comparer le résultat avec la table obtenu.
+    \end{enumerate}
+\end{exercise}
+
+\begin{exercise}[subtitle={Norme ISO-8859-1}, step={1}, origin={}, topics={ Representation de texte }, tags={ ASCII, Chiffrement }]
+    \begin{enumerate}
+        \item Chercher la table d'encodage ISO-8859-1 (ou latin-1).
+        \item Comparer cette table avec la table ASCII.
+        \item Encoder le mot \texttt{a«€éø}
+    \end{enumerate}
+\end{exercise}
+
+\begin{exercise}[subtitle={Unicode table}, step={2}, origin={}, topics={ Representation de texte }, tags={ ASCII, Chiffrement }]
+    La norme Unicode découpe le processus d'encodage en deux parties: le point de code et l'encodage.
+
+    Vous trouverez les points de code et les encodages correspondant sur le moteur de recherche \url{https://unicode-table.com/fr}.
+
+    \begin{enumerate}
+        \item Compléter le tableau ci-dessous avec les points de code et les encodage (représentée sous la forme qui vous semble la plus familière).
+            \begin{center}
+                \begin{tabular}{|p{3cm}|p{3cm}|p{3cm}|p{3cm}|p{3cm}|}
+                    \hline
+                    Caractère & Point de code & UTF-8 & UTF-16BE  & UTF-32BE \\
+                    \hline
+                    I       & & & &\\
+                    \hline
+                    \euro   & & & &\\
+                    \hline
+                    $\aleph$ & & & &\\
+                    \hline
+                     & U+20B3 & & &\\
+                    \hline
+                     & U+1F606 & & &\\
+                    \hline
+                     & U+FE9A & & &\\
+                    \hline
+                \end{tabular}
+            \end{center}
+        \item Quels sont les caractères qui sont inclus dans la norme Unicode?
+        \item Quels sont les encodages possibles et quelles sont leur caractéristiques?
+        \item Comment est placé la table ASCII dans cette norme?
+    \end{enumerate}
+\end{exercise}
+
+\begin{exercise}[subtitle={Exploration de l'Unicode}, step={2}, origin={}, topics={ Representation de texte }, tags={ ASCII, Chiffrement }]
+    Notebook \texttt{02\_unicode}
+\end{exercise}
+
+\begin{exercise}[subtitle={Les strings en Python et cryptographie}, step={2}, origin={}, topics={ Representation de texte }, tags={ ASCII, Chiffrement }]
+    Notebook \texttt{03\_str}
+\end{exercise}
+
+\begin{exercise}[subtitle={QCM}, step={4}, origin={}, topics={ Representation de texte }, tags={ ASCII, Chiffrement, QCM}]
+    \begin{enumerate}[label={\textbf{Question \arabic*:}}, leftmargin=*, wide=0pt]
+        \item Quel est un avantage du codage UTF8 par rapport au codage ASCII ?
+            \begin{tasks}(2)
+                \task il permet de coder un caractère sur un octet au lieu de deux
+                \task il permet de coder différentes polices de caractères
+                \task il permet de coder les majuscules
+                \task il permet de coder tous les caractères
+            \end{tasks}
+
+        \item On considère les codes ASCII en écriture hexadécimale (en base 16).
+
+            Le code ASCII de la lettre A est 0x41, celui de la lettre B est 0x42, celui de la lettre C est 0x43, etc.
+
+            Quelle est le code ASCII, en hexadécimale, de la lettre X (c'est la 24ième lettre de l'alphabet usuel)
+            \begin{tasks}(4)
+                \task 0x58
+                \task 0x64
+                \task 0x7A
+                \task 0x88
+            \end{tasks}
+
+        \item  Laquelle de ces affirmations concernant le codage UTF-8 des caractères est vraie ?
+            \begin{tasks}(2)
+                \task le codage UTF-8 est sur 7bits
+                \task le codage UTF-8 est sur 8bits
+                \task le codage UTF-8 est sur 1 à 4 octets
+                \task le codage UTF-8 est sur 8 octets
+            \end{tasks}
+        \item  Parmi les caractères ci-dessous, lequel ne fait pas partie du code ASCII ?
+            \begin{tasks}(4)
+                \task a
+                \task A
+                \task @
+                \task é
+            \end{tasks}
+        \item Dans le bloc <head> d'un fichier HTML, afin d'encoder les caractères avec le standard Unicode/UTF-8  on insère la ligne :
+            \begin{center}
+                <meta http-equiv="Content -Type" content="text/html; charset=UTF-8">
+            \end{center}
+            Pourquoi cela ?
+            \begin{tasks}(2)
+                \task UTF-8 est l'encodage Linux
+                \task ASCII est une vieille norme, il est temps d'en changer
+                \task UTF-8 est une norme conçue pour permettre un affichage correct des caractères spéciaux sur tout système
+                \task UTF-8 est un encodage qui protège mieux contre le piratage informatique.
+            \end{tasks}
+    \end{enumerate}
+\end{exercise}

1NSI/07_Representation_de_texte/index.rst

@@ -0,0 +1,33 @@
+Représentation du texte
+#######################
+
+:date: 2023-02-03
+:modified: 2023-02-14
+:authors: Benjamin Bertrand
+:tags: Str, Python
+:category: 1NSI
+:summary: Table de caractère, encodage et manipulation des str en Python.
+
+
+Éléments du programme
+=====================
+
+Plan de travail
+
+.. image:: ./plan_de_travail.pdf
+    :height: 200px
+    :alt: Plan de travail
+
+
+Étape 1: Manipulation ASCII et ISO-8859-1
+-----------------------------------------
+
+Explication cours sur la différence entre table de caractère et encodage. Présentation de la table ASCII puis ISO-8859-1.
+
+Étape 2: Unicode
+----------------
+
+Étape 3: String et python
+-------------------------
+
+`String et python - jupyter notebook <./03_str.ipynb>`_

1NSI/07_Representation_de_texte/plan_de_travail.tex

@@ -0,0 +1,42 @@
+\documentclass[a4paper,12pt]{article}
+\usepackage{myXsim}
+\usepackage{minted}
+
+\author{Benjamin Bertrand}
+\title{Representation de texte - Plan de travail}
+\tribe{1NSI}
+\date{janvier 2023}
+
+\pagestyle{empty}
+
+\DeclareExerciseCollection{banque}
+\xsimsetup{
+}
+
+
+\begin{document}
+\maketitle
+
+\section{Tables d'encodage}
+
+\listsectionexercises
+
+\section{Unicode}
+
+\listsectionexercises
+
+\section{Les strings en Python}
+
+\listsectionexercises
+
+\section{QCM}
+
+\listsectionexercises
+
+
+\bigskip
+
+\input{exercises.tex}
+\printcollection{banque}
+
+\end{document}

1NSI/07_Representation_de_texte/solutions.tex

@@ -0,0 +1,28 @@
+\documentclass[a4paper,10pt]{article}
+\usepackage{myXsim}
+
+\usetikzlibrary{shapes.geometric}
+
+\author{Benjamin Bertrand}
+\title{Representation de texte - Solutions}
+\tribe{1NSI}
+\date{janvier 2023}
+
+\DeclareExerciseCollection{banque}
+\xsimsetup{
+    exercise/print=false,
+    solution/print=true,
+}
+
+\pagestyle{empty}
+
+
+\begin{document}
+
+\maketitle
+
+\input{exercises.tex}
+%\printcollection{banque}
+%\printsolutions{exercises}
+
+\end{document}

1NSI/08_Interaction_web/1B_javascript.tex

@@ -0,0 +1,75 @@
+\documentclass[a4paper,10pt]{article}
+\usepackage{myXsim}
+\usepackage{minted}
+
+\author{Benjamin Bertrand}
+\title{Interaction Homme machine sur le WEB- Cours}
+\date{Février 2023}
+
+\pagestyle{empty}
+
+\begin{document}
+
+\maketitle
+
+\section{Language Javascript}
+
+\begin{definition}[Javascript]
+    \hfill
+    \begin{minipage}{0.2\linewidth}
+       \includegraphics[scale=0.3]{./fig/JavaScript_logo}
+    \end{minipage}
+    \hfill
+    \begin{minipage}{0.7\linewidth}
+    \textbf{JavaScript} est un langage de programmation de scripts principalement employé dans les pages web interactives et à ce titre est une partie essentielle des applications web.
+
+    Dans les navigateurs, il a pour principale fonction de réagir aux évènements déclenchés par l'utilisateur et de modifier le code HTML ou CSS de la page consultée à travers la manipulation du DOM (document Object Model). On peut utiliser directement du language Javascript dans la console du navigateur accessible en pressant \texttt{F12}.
+    \end{minipage}
+    \hfill
+\end{definition}
+
+\paragraph{Remarque:} Rendez vous sur le lien suivant pour comprendre le lien entre le code HTML, CSS et javascript et le DOM.
+
+\begin{center}
+    \url{https://gitlab.com/frederic-junier/parc-nsi/-/raw/master/docs/chapitre23/images/schema-dom.png}
+\end{center}
+
+\section{Corpus Python et Javascript}
+
+\subsection*{Variables}
+\begin{multicols}{2}
+    \inputminted[bgcolor=base3]{python}{./script/1B_var.py}
+
+    \inputminted[bgcolor=base3]{js}{./script/1B_var.js}
+\end{multicols}
+
+\subsection*{Types de base}
+\begin{multicols}{2}
+    \inputminted[bgcolor=base3]{python}{./script/1B_type.py}
+
+    \inputminted[bgcolor=base3]{js}{./script/1B_type.js}
+\end{multicols}
+
+\subsection*{Conditions}
+\begin{multicols}{2}
+    \inputminted[bgcolor=base3]{python}{./script/1B_conditions.py}
+
+    \inputminted[bgcolor=base3]{js}{./script/1B_conditions.js}
+\end{multicols}
+
+\subsection*{Boucles}
+\begin{multicols}{2}
+    \inputminted[bgcolor=base3]{python}{./script/1B_boucles.py}
+
+    \inputminted[bgcolor=base3]{js}{./script/1B_boucles.js}
+\end{multicols}
+
+\subsection*{Fonctions}
+\begin{multicols}{2}
+    \inputminted[bgcolor=base3]{python}{./script/1B_fonctions.py}
+
+    \inputminted[bgcolor=base3]{js}{./script/1B_fonctions.js}
+\end{multicols}
+
+
+\end{document}

1NSI/08_Interaction_web/2B_DOM.tex

@@ -0,0 +1,78 @@
+\documentclass[a4paper,10pt]{article}
+\usepackage{myXsim}
+\usepackage{minted}
+
+\author{Benjamin Bertrand}
+\title{Interaction Homme machine sur le WEB- Cours}
+\date{Mars 2023}
+
+\pagestyle{empty}
+
+\begin{document}
+
+\maketitle
+
+\setcounter{section}{1}
+\section{Le DOM}
+
+\begin{definition}[Le DOM]
+    Le DOM (Document Objet Model) est une façon de représenter et d'interagir avec des documents HTML.
+
+    Le DOM est une représentation du document sous forme d'arbre où chaque nœud représente un partie du document.
+
+    Le navigateur télécharge la page HTML, le transforme en DOM, complète l'arbre avec les valeurs CSS. Puis le javascript manipule l'arbre pour faire les transformations.
+
+\end{definition}
+
+\paragraph{Exemple} ~
+
+\begin{minipage}{0.4\linewidth}
+ \begin{minted}[bgcolor=base3]{html}
+<html>
+	<body>
+        <h1> Titre </h1>
+        <p> Coucou </p>
+        <ul>
+        <li id="premier">un élément</li>
+        <li>un autre</li>
+        <li id="prefere">encore</li>
+        </ul>
+	</body>
+</html>
+\end{minted}
+\end{minipage}
+
+\afaire{transformer ce document html en DOM}
+
+\begin{propriete}[Javascript et manipulation du DOM]
+    Quelques commandes javascript pour manipuler et interagir avec le DOM.
+
+    Le mot \mintinline{js}{element} correspond dans la suite à un noeud du DOM.
+
+    \begin{itemize}
+        \item \mintinline{js}{document.getElementById(id)}: \dotfill
+        \item \mintinline{js}{document.createElement(type)}: \dotfill
+        \item \mintinline{js}{element.style}: \dotfill
+        \item \mintinline{js}{element.innerHTML}: \dotfill
+        \item \mintinline{js}{element.children}: \dotfill
+        \item \mintinline{js}{element.appendChild(...)}: \dotfill
+    \end{itemize}
+\end{propriete}
+
+\paragraph{Exemple}
+\begin{itemize}
+    \item Récupérer le contenu de la balise avec l'id "premier"
+        \vspace{1cm}
+
+    \item Changer la couleur du titre
+
+        \vspace{1cm}
+
+    \item Avoir la liste des balises li
+
+        \vspace{1cm}
+    \item Ajouter un élément dans ul
+        \vspace{1cm}
+\end{itemize}
+
+\end{document}

1NSI/08_Interaction_web/3B_interaction.tex

@@ -0,0 +1,54 @@
+\documentclass[a4paper,10pt]{article}
+\usepackage{myXsim}
+\usepackage{minted}
+
+\author{Benjamin Bertrand}
+\title{Interaction Homme machine sur le WEB- Cours}
+\date{Mars 2023}
+
+\pagestyle{empty}
+
+\begin{document}
+
+\maketitle
+
+\setcounter{section}{2}
+\section{Interaction et évènements}
+
+\begin{definition}[Gestionnaire d'évènements]
+Javascript permet grâce à l'interface DOM d'attacher une fonction gestionnaire d'événement à un élément d'un document HTML.
+
+Ce gestionnaire est lié à un événement, qui est une action de l'utilisateur (déplacement de la souris, pression sur une touche du clavier) ou une modification d'un autre élément du document.
+
+Lorsque l'événement ciblé atteint l'élément surveillé par le gestionnaire, celui-ci le capture et déclenche une action.
+\end{definition}
+
+\begin{propriete}[Attacher des évènemnets]
+    Pour attacher un gestionnaire d'événement nommé gestionnaire, à un élément, nommé \mintinline{js}{element}, et le lier à un événement, par exemple click, on peut procéder de deux façons :
+    \begin{itemize}
+        \item Directement dans le code HTML
+
+                \begin{minipage}{0.9\linewidth}
+                    \begin{minted}[bgcolor=base3]{html}
+<element id="id_element" onclick="fonction_a_realiser()"> ... </element>
+                    \end{minted}
+                \end{minipage}
+            \item Dans le code javascript avec la méthode \mintinline{js}{addEventListener}
+
+                \begin{minipage}{0.9\linewidth}
+                    \begin{minted}[bgcolor=base3]{js}
+let v = document.getElementById("id_element");
+v.addEventListener("click", fonction_a_realiser);
+                    \end{minted}
+                \end{minipage}
+
+    \end{itemize}
+\end{propriete}
+
+\paragraph{Remarques: } Il existe de nombreuses type d'évènements que vous pouvez retrouver à l'adresse
+\begin{center}
+    \url{https://developer.mozilla.org/fr/docs/Web/Events#listing_des_%C3%A9v%C3%A9nements}
+\end{center}
+
+
+\end{document}

1NSI/08_Interaction_web/QCM.tex

@@ -0,0 +1,19 @@
+\documentclass[a4paper,10pt]{article}
+\usepackage{myXsim}
+\usepackage{minted}
+
+\author{Benjamin Bertrand}
+\title{Interaction WEB - Exercices}
+\date{Mars 2023}
+
+\DeclareExerciseCollection[step=4]{banque}
+\xsimsetup{collect}
+
+\pagestyle{empty}
+
+\begin{document}
+\input{exercises.tex}
+
+\printcollection{banque}
+
+\end{document}

1NSI/08_Interaction_web/codes/2E_compteur.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+  <title>Compteur de clics </title>
+  <meta charset="utf-8">
+  <script>
+
+      let compteur = 0;
+
+      function suivant(){
+          compteur = compteur + 1;
+          let v = document.getElementById("valeur");
+          if (compteur <= 1) {
+            v.innerHTML = compteur + " clic";
+          }
+          else {
+            v.innerHTML = compteur + " clics";
+          }
+      }
+
+      function reinitialiser(){
+          compteur = 0;
+          let v = document.getElementById("valeur");
+          v.innerHTML = compteur + " clic";
+      }
+
+  </script>
+</head>
+
+<body>
+  <h1>Compteur de clics en Javascript </h1>
+    <button onclick="suivant();">Clic !</button>
+    <br>
+    <span id="valeur">0</span>
+    <br>
+    <button onclick="reinitialiser();">Réinitialiser !</button>
+</body>
+
+</html>

1NSI/08_Interaction_web/codes/popup/2E_popup.css

@@ -0,0 +1,34 @@
+section {
+	background-color: #f1f1f1;
+	padding: 20px;
+	margin: 20px 0;
+	border: 1px solid black;
+}
+
+section h2 {
+	margin-top: 0;
+}
+
+section .close {
+    float: right;
+}
+
+section a {
+    text-decoration: none;
+    color: black;
+}
+
+#popup {
+    position: fixed;
+    top: 10%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 20px;
+    background-color: red;
+    border: 1px solid black;
+    z-index: 9999;
+}
+
+.hidden {
+    display: none;
+}

1NSI/08_Interaction_web/codes/popup/2E_popup.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Exemple de liens avec popup</title>
+	<link rel="stylesheet" type="text/css" href="./2E_popup.css">
+</head>
+<body>
+	<h1>Venez voir mes super articles</h1>
+
+	<section id="section1">
+		<h2>Article 1
+                <a href="#" id="close-section1" class="close">X</a>
+            </h2>
+		<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
+	</section>
+
+	<section id="section2">
+		<h2>Article 2
+                <a href="#" id="close-section2" class="close">X</a>
+            </h2>
+		<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
+	</section>
+
+	<section id="section3">
+		<h2>Article 3
+                <a href="#" id="close-section3" class="close">X</a>
+        </h2>
+		<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
+	</section>
+
+	<div id="popup" class="hidden">
+		<p>Cette section est maintenant fermée.</p>
+		<a href="#" id="close-popup">OK</a>
+	</div>
+    <script src="./2E_popup.js"></script>
+</body>
+</html>

1NSI/08_Interaction_web/codes/popup/2E_popup.js

@@ -0,0 +1,46 @@
+const popup = document.getElementById('popup');
+
+
+function closeSection1 () {
+    let section = document.getElementById('section1');
+    section.style.display = "none";
+    popup.classList.remove('hidden');
+
+}
+document.getElementById("close-section1").addEventListener('click', closeSection1)
+
+function closeSection2 () {
+    let section = document.getElementById('section2');
+    popup.classList.remove('hidden');
+
+    let p = document.createElement('p')
+    p.innerHTML = "Je disparais pas!"
+    section.appendChild(p)
+}
+
+document.getElementById("close-section2").addEventListener('click', closeSection2)
+
+let compteur = 0
+function closeSection3 () {
+    let popup = document.getElementById('popup');
+    let section = document.getElementById('section3');
+    if (compteur > 2) {
+        section.style.display = "none";
+        popup.classList.remove('hidden');
+    } else {
+        compteur = compteur + 1;
+        popup.classList.remove('hidden');
+        let p = document.createElement('p')
+        p.innerHTML = "Restez! Je vous fait une promo de 10%!"
+        section.appendChild(p)
+    }
+
+}
+document.getElementById("close-section3").addEventListener('click', closeSection3)
+
+
+const closePopupLink = document.getElementById('close-popup');
+closePopupLink.addEventListener('click', (event) => {
+    event.preventDefault();
+    popup.classList.add('hidden');
+});

1NSI/08_Interaction_web/codes/projets/age.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+
+<html lang="fr">
+
+<!-- Début en-tête -->
+<head>
+
+  <title>Âge avec JS </title>
+
+  <meta charset="utf-8">
+
+   <script type="text/Javascript" src="code-age.js" defer="defer"></script>
+
+</head>
+<!-- Fin en-tête -->
+
+<!-- Début corps -->
+<body class="bg-light">
+
+
+
+<!-- Début de la balise container bootstrap -->
+<div>
+
+  <h1>Calcul d'âge avec Javascript. </h1>
+
+
+
+      <label>Saisissez votre date de naissance </label>
+       <br>
+      <input type="number" id="naissance" value="1975" required />
+      <br>
+      <button id="bouton" onclick="calcul_age()">Calculer</button>
+      <br>
+      <p> Nous sommes en <span id="courant"></span>,
+        donc vous  avez  <span id="age"></span> ans. </p>
+
+
+
+
+<!-- Fin de la balise container bootstrap -->
+</div>
+
+ <p>
+<a href="index.html">Retour à l'accueil</a>
+</p>
+
+</body>
+</html>

1NSI/08_Interaction_web/codes/projets/code-age.js

@@ -0,0 +1,13 @@
+//gestionnaire d'événement clic pour l'élément bouton
+function calcul_age(){
+    let n = document.getElementById("naissance");
+    let naissance = parseInt(n.value);
+    let date = new Date();
+    let courant = date.getFullYear();
+    let c = document.getElementById("courant");
+    c.innerHTML = courant;
+    //àcompléter
+}
+
+//age par défaut :
+calcul_age();

1NSI/08_Interaction_web/codes/projets/code-temperature.js

@@ -0,0 +1,21 @@
+//gestionnaire d'événement clic pour l'élément bouton
+function conversion_unite(){
+    let u = document.getElementById("unite_source");
+    let m = document.getElementById("mesure_source");
+    let c = document.getElementById("unite_cible");
+    let v = document.getElementById("valeur");
+    if (u.value === 'celsius'){
+        v.innerHTML = 9/5 * parseInt(m.value) + 32;
+        c.innerHTML = 'fahrenheit';
+    }
+    //à compléter avec un bloc else
+}
+
+/*
+Compléter en attachant le  gestionnaire d'événement conversion_unite
+ à l'élément #bouton pour l'événement click
+*/
+
+/* conversion par défaut au chargement de la page
+décommenter la ligne suivante*/
+//conversion_unite();

1NSI/08_Interaction_web/codes/projets/evenements.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+
+<html lang="fr">
+
+<!-- Début en-tête -->
+<head>
+
+  <title>Onmouseover avec JS </title>
+
+  <meta charset="utf-8">
+
+   <script type="text/Javascript" defer="defer">
+   function chatouille(){
+        let titre = document.getElementById("titre");
+        if (titre.style.color === "red"){
+            titre.style.color = "blue";
+        }
+        else {
+            titre.style.color = "red";
+        }
+   }
+
+   //à compléter avec une fonction griffe
+    </script>
+
+
+</head>
+<!-- Fin en-tête -->
+
+<!-- Début corps -->
+<body>
+
+
+
+  <!--  à compléter avec un gestionnaire d'événement click -->
+  <h1 onmouseover="chatouille()"  id="titre" style='color : red'>J'aime les souris </h1>
+
+<p>
+<a href="index.html">Retour à l'accueil</a>
+</p>
+
+
+</body>
+</html>

1NSI/08_Interaction_web/codes/projets/evenements2.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+
+<html lang="fr">
+
+<!-- Début en-tête -->
+<head>
+
+  <title>Evenements avec JS </title>
+
+  <meta charset="utf-8">
+
+   <script type="text/Javascript" defer="defer">
+   function chatouille(){
+        let chat = document.getElementById("chat");
+        chat.src = 'images/chat-touille.png';
+   }
+
+   //àcompléter avec une fonction chatpince
+
+   function chatbonjour(){
+        let chat = document.getElementById("chat");
+        chat.src = 'images/chat-bonjour.png';
+   }
+    </script>
+
+
+</head>
+<!-- Fin en-tête -->
+
+<!-- Début corps -->
+<body>
+
+
+
+  <!-- à compléter avec un  gestionnaire d'événement click -->
+  <img src="images/chat-bonjour.png"   alt="Bonjour" onmouseover="chatouille()"  onmouseout="chatbonjour()" id="chat">
+
+<p>
+<a href="index.html">Retour à l'accueil</a>
+</p>
+
+
+</body>
+</html>

1NSI/08_Interaction_web/codes/projets/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+
+<html lang="fr">
+
+<head><!-- Début en-tête -->
+  <title>Accueil </title>
+  <meta charset="utf-8">
+</head><!-- Fin en-tête -->
+
+<body><!-- Début corps -->
+  <h1>Menu  </h1>
+
+   <ul>
+    <li> <a href="age.html"> Calcul d'âge </a> </li>
+    <li> <a href="evenements.html"> Jouer avec les événements I </a> </li>
+     <li> <a href="evenements2.html"> Jouer avec les événements II </a> </li>
+    <li> <a href="temperature.html"> Conversion d'unité de température </a> </li>
+   </ul>
+
+</body><!-- Fin corps -->
+
+</html>

1NSI/08_Interaction_web/codes/projets/script.js

@@ -0,0 +1,24 @@
+let compteur = 0;
+
+function suivant(){
+    compteur = compteur + 1;
+    let v = document.getElementById("valeur");
+    if (compteur <= 1) {
+      v.innerHTML = compteur + " clic";
+    }
+    else {
+      v.innerHTML = compteur + " clics";
+    }
+}
+
+function reinitialiser(){
+    compteur = 0;
+    let v = document.getElementById("valeur");
+    v.innerHTML = compteur + " clic";
+}
+
+
+let bouton_clic = document.getElementById("bouton_clic");
+bouton_clic.addEventListener("click", suivant);
+let bouton_reset = document.getElementById("bouton_reset");
+bouton_reset.addEventListener("click", reinitialiser);

1NSI/08_Interaction_web/codes/projets/temperature.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+
+<html lang="fr">
+
+<!-- Début en-tête -->
+<head>
+
+  <title>Conversion d'unité en JS </title>
+
+  <meta charset="utf-8">
+
+  <script type="text/Javascript" src="code-temperature.js" defer="defer">
+</script>
+
+</head>
+<!-- Fin en-tête -->
+
+<!-- Début corps -->
+<body>
+
+
+
+    <h1> Conversion d'unité d'une mesure de température.  </h1>
+
+
+
+        <label for="unite_source">Choisir l'unité de la mesure source :</label>
+        <select name="unite_source" id="unite_source">
+            <option value="celsius"selected >Celsius</option>
+            <option value="fahrenheit">Fahrenheit</option>
+        </select>
+        <br>
+        <label for="mesure_source">Saisir la mesure de température dans l'unité source : </label>
+        <input type="number" id="mesure_source" value="0">
+        <br>
+        <button id="bouton">Convertir</button>
+        <br>
+        <label>Conversion en <span id="unite_cible"></span> : <span id="valeur"></span>. </label>
+
+<p>
+<a href="index.html">Retour à l'accueil</a>
+</p>
+
+</body>
+</html>

1NSI/08_Interaction_web/exercises.tex

@@ -0,0 +1,224 @@
+\begin{exercise}[subtitle={JS pour modifier page web}, step={1}, origin={<++>}, topics={ Interaction web }, tags={ Javascript, Web }]
+    Le but de cet exercice est d'utiliser le language Javascript pour modifier une page web.
+    \begin{enumerate}
+        \item Créer une fichier \texttt{index.html} avec le code suivant
+            \begin{center}
+                \begin{minipage}{0.8\linewidth}
+                    \inputminted[bgcolor=base3]{html}{./script/1E_index.html}
+                \end{minipage}
+            \end{center}
+
+        \item Dans les outils du développeur (\texttt{F12}) allez dans l'onglet console et taper successivement les commandes suivantes. Expliquer l'action de chaque commande et commencer à ce faire un mémo des commandes javascript.
+            \begin{center}
+                \begin{minipage}{0.8\linewidth}
+                    \inputminted[bgcolor=base3]{js}{./script/1E_index.js}
+                \end{minipage}
+            \end{center}
+
+        \item Passez la console en mode multiligne en pressant \texttt{CTRL+B}, saisir puis exécuter le code suivant.
+            \begin{center}
+                \begin{minipage}{0.8\linewidth}
+                    \inputminted[bgcolor=base3]{js}{./script/1E_interaction.js}
+                \end{minipage}
+            \end{center}
+
+            Interagir avec la page. Quelles sont les interactions possibles ? Comment ont-elles été programmées ?
+
+        \item Recharger la page. Qu'en est-il des interactions ?
+    \end{enumerate}
+\end{exercise}
+
+\begin{exercise}[subtitle={Corpus du Javascript}, step={1}, origin={<++>}, topics={ Interaction web }, tags={ Javascript, Web }]
+    Pour réaliser l'exercice suivant vous devez ouvrir la console de votre navigateur (F12 le plus souvent).
+
+    Cet exercice propose des commandes javascript à vous d'extraire les spécificités du language et de le comparer au language Python.
+
+    \begin{multicols}{2}
+        \begin{enumerate}
+            \item \textbf{Opérations et variables}: exécuter les commandes suivantes les unes après les autres puis compléter les pointillées
+                \begin{center}
+                    \begin{minipage}{\linewidth}
+                        \inputminted[bgcolor=base3]{js}{./script/1E_ope_varia.js}
+                    \end{minipage}
+                \end{center}
+                Pour la suite passer l'éditeur en mode multiligne (\texttt{CTRL-B})
+            \item \textbf{Conditionnement}
+                \begin{center}
+                    \begin{minipage}{\linewidth}
+                        \inputminted[bgcolor=base3]{js}{./script/1E_condi.js}
+                    \end{minipage}
+                \end{center}
+            \item \textbf{Boucles}
+                \begin{center}
+                    \begin{minipage}{\linewidth}
+                        \inputminted[bgcolor=base3]{js}{./script/1E_boucles.js}
+                    \end{minipage}
+                \end{center}
+            \item \textbf{Fonctions}
+                \begin{center}
+                    \begin{minipage}{\linewidth}
+                        \inputminted[bgcolor=base3]{js}{./script/1E_fonction.js}
+                    \end{minipage}
+                \end{center}
+            \item Traduire les programmes précédents en Python.
+        \end{enumerate}
+    \end{multicols}
+\end{exercise}
+
+\begin{exercise}[subtitle={Compteur de clics}, step={2}, origin={frederic-junier}, topics={ Interaction web }, tags={ Javascript, Web }]
+    Dans cet exercice, on étudie un compteur de clics.
+
+    \begin{enumerate}
+        \item Ouvrir le fichier \texttt{2E\_compteur.html} avec un navigateur et lister les interactions possibles ainsi que les éléments auxquels ils sont liés.
+        \item Dans l'outil Inspecteur du navigateur, vérifier que les interactions apparaissent bien à travers les boites \texttt{event}. Quels sont évènements qui déclenchent l'évènement?
+        \item Ouvrir le code source de la page. Identifier la partie code javascript et comment les évènements sont attachés aux éléments HTML.
+        \item Expliquer comment le compteur arrive à être augmenté.
+        \item Expliquer comment le compteur est réinitialisé.
+    \end{enumerate}
+\end{exercise}
+
+\begin{exercise}[subtitle={Le pire du web!}, step={2}, origin={}, topics={ Interaction web }, tags={ Javascript, Web }]
+    Dans cet exercice, on étudie la pire création du web!
+
+    \begin{enumerate}
+        \item Ouvrir le fichier \texttt{2E\_pire\_web.html}. Lister les interactions que vous remarquez et les éléments auxquels elles sont liées.
+        \item Ouvrir le fichier \texttt{2E\_pire\_web.html} avec un éditeur de texte. Comment est importé le code javascript?
+        \item Comment sont associés les évènements aux liens?
+        \item (*) Ajouter un 4e article identique aux premiers. Arriverez-vous à faire disparaitre la croix pour fermer l'article quand on passe la souris dessus puis la faire réapparaitre ?
+    \end{enumerate}
+\end{exercise}
+
+\begin{exercise}[subtitle={Projets multiples}, step={3}, origin={frederic-junier.org/NSI/premiere/chapitre23/javascript-git2/}, topics={ Interaction web }, tags={ Javascript, Web }]
+    Copier et coller le dossier \texttt{codes} dans votre répertoire personnel.
+
+    La page d'accueil (\texttt{index.html}) contient une liste de liens vers des pages dynamiques qui contiennent ou sont liés à des codes Javascript à compléter
+
+    \begin{enumerate}
+        \item Depuis la page d'accueil, suivre le lien vers l'activité Calcul d'âge de la page age.html.
+
+            \begin{enumerate}
+                \item Quel élément HTML a reçu un gestionnaire d'événement ? Quel événement est surveillé ?
+                \item Compléter le code Javascript dans le fichier code-age.js afin que la page puisse calculer l'âge de l'utilisateur à partir de sa date de naissance?
+            \end{enumerate}
+
+        \item Revenir sur la page d'accueil et suivre le lien vers l'activité Jouer avec les événements I. Compléter le code Javascript qui se trouve dans l'en-tête du fichier evenements.html pour :
+
+            \begin{enumerate}
+                \item attacher un gestionnaire d'événement click à l'élément d'identifiant titre
+                \item un clic sur cet élément doit déclencher l'apparition d'une fenêtre pop-up avec le message "Attention, je peux griffer !"
+            \end{enumerate}
+
+        \item Revenir sur la page d'accueil et suivre le lien vers l'activité Jouer avec les événements II. Compléter le code Javascript qui se trouve dans l'en-tête du fichier evenements2html pour :
+
+            \begin{enumerate}
+                \item attacher un gestionnaire d'événement click à l'élément img d'identifiant chat
+                \item un clic sur cet élément doit déclencher le changement de sa propriété src, qui doit prendre pour valeur le chemin "images/chat-bonjour.png", ainsi un clic sur l'image devra provoquer son changement.
+            \end{enumerate}
+
+        \item Revenir sur la page d'accueil et suivre le lien vers l'activité Conversion d'unité de température. La page temperature.html propose de convertir une mesure de température de Celsius en Fahrenheit ou réciproquement. Le code Javascript se trouve dans le fichier code-temperature.js.
+
+            \begin{enumerate}
+                \item Quel élément HTML a reçu un gestionnaire d'événement ? Quel événement est surveillé ?
+                \item Compléter le code Javascript qui se trouve dans le fichier code-temperature.js pour rendre la page temperature.html fonctionnelle.
+            \end{enumerate}
+    \end{enumerate}
+\end{exercise}
+
+\begin{exercise}[subtitle={IMC version WEB}, step={3}, origin={}, topics={ Interaction web }, tags={ Javascript, Web }]
+    Dans cet exercice, vous allez programmer un calculateur d'IMC interactif.
+
+    Pour rappelle, l'indice d'IMC, ce calcule à partir de la masse et de la taille d'une personne par la formule
+    \[
+        IMC = \frac{\mbox{mass}}{\mbox{taille}^2}
+    \]
+
+    \begin{enumerate}
+        \item Créer une page HTML avec un formulaire où l'on a deux inputs masse et taille et un bouton soumettre ainsi qu'un endroit où mettre le résultat de l'IMC.
+        \item Ajouter un évènement sur le bouton soumettre pour qu'il calcule l'indice IMC et l'affiche au bon endroit.
+        \item Modifier l'évènement pour que l'interprétation  soit affichée sous l'indice et que le fond de la page s'accorde avec la couleur de l'image:
+            \begin{center}
+                \includegraphics[scale=0.5]{./fig/IMC}
+            \end{center}
+    \end{enumerate}
+
+\end{exercise}
+
+
+\begin{exercise}[subtitle={QCM}, step={4}, origin={}, topics={ Interaction web }, tags={ Javascript, Web }]
+    \begin{enumerate}
+        \item Parmi les langages suivants, lequel est exécuté sur le serveur lors de la consultation d’une page Web ?
+            \begin{tasks}(4)
+                \task JavaScript
+                \task HTML
+                \task CSS
+                \task PHP
+            \end{tasks}
+
+        \item Dans une page HTML, lequel de ces codes permet la présence d'un bouton qui appelle la fonction javascript \mintinline{javascript}{afficher_reponse()} lorsque l'utilisateur clique dessus ?
+            \begin{tasks}(1)
+                \task \mintinline{html}{<a href="afficher_reponse()">Cliquez ici</a> }
+                \task \mintinline{html}{<button if_clicked="afficher_reponse()">Cliquez ici</button> }
+                \task \mintinline{html}{<button  value="Cliquez ici"><a> afficher_reponse()</a></button> }
+                \task \mintinline{html}{<button onclick="afficher_reponse()">Cliquez ici</button>}
+            \end{tasks}
+        \item On souhaite qu’un menu apparaisse à chaque fois que l’utilisateur passe sa souris sur l’image de bannière du site. L’attribut de la balise img dans lequel on doit mettre un code Javascript à cet effet est :
+            \begin{tasks}(4)
+                \task \mintinline{html}{onclick }
+                \task \mintinline{html}{src  }
+                \task \mintinline{html}{alt }
+                \task \mintinline{html}{onmouseover }
+            \end{tasks}
+        \item Une page HTML contient la ligne suivante dans laquelle un mot a été remplacé par des points de supsension :  \mintinline{html}{<p ...... ="alert('hello')"> Survolez-moi </p> }
+
+            Au survol de la souris, le message hello apparait dans une boite de dialogue.
+
+            Par quel mot faut-il remplacer les points de suspension ?
+            \begin{tasks}(4)
+                \task \mintinline{javascript}{onmouseout }
+                \task \mintinline{javascript}{onmouseover }
+                \task \mintinline{javascript}{onmouseleave }
+                \task \mintinline{javascript}{onclick}
+            \end{tasks}
+
+        \item \mintinline{javascript}{onmouseover} est une méthode qui permet de traiter un événement de quel type ?
+            \begin{tasks}(2)
+                \task l'appui d'une touche du clavier
+                \task un clic sur un bouton de souris
+                \task un mouvement de la souris
+                \task le survol par la souris d'un élément de la page
+            \end{tasks}
+
+        \item Parmi les propriétés suivantes d’une balise <button /> dans une page HTML, laquelle doit être rédigée en langage JavaScript ?
+
+            \begin{tasks}(4)
+                \task la propriété name
+                \task la propriété type
+                \task la propriété onclick
+                \task la propriété id
+            \end{tasks}
+
+        \item Un élève a écrit une fonction javascript qui détermine la moyenne des valeurs entrées par l'utilisateur dans un  formulaire de sa page HTML.
+
+            Il place sa fonction javascript :
+            \begin{tasks}(1)
+                \task entre la balise <js> et la balise </js>
+                \task entre la balise <code> et la balise </code>
+                \task entre la balise <script> et la balise </script>
+                \task entre la balise <javascript> et la balise </javascript>
+            \end{tasks}
+
+        \item Voici un extrait d'un document HTML.
+
+            \begin{minipage}{0.8\linewidth}
+                \inputminted[bgcolor=base3]{html}{./script/QCM_body.html}
+            \end{minipage}
+
+            Quelle doit être la ligne qui remplace les pointillés pour obtenir un bouton dont l'appui déclenche la fonction javascript \mintinline{javascript}{actionBouton()} ?
+            \begin{tasks}(2)
+                \task \mintinline{html}{<button click = "actionBouton();"> }
+                \task \mintinline{html}{<button onclick = "actionBouton();"> }
+                \task \mintinline{html}{<button onclick => "actionBouton();" }
+                \task \mintinline{html}{<button> onclick = "actionBouton();"}
+            \end{tasks}
+    \end{enumerate}
+\end{exercise}

1NSI/08_Interaction_web/index.rst

@@ -0,0 +1,55 @@
+Interaction web
+###############
+
+:date: 2023-02-21
+:modified: 2023-03-04
+:authors: Benjamin Bertrand
+:tags: Javascript, Web
+:category: 1NSI
+:summary: Programmation javascript et évènement sur une page web.
+
+
+Éléments du programme
+=====================
+
+.. list-table:: Interaction Homme machine sur le web
+    :header-rows: 1
+
+    * - Contenus
+      - Capacités attendues
+      - Commentaires
+
+    * - Modalités de l’interaction entre l’homme et la machine
+      - Identifier les différents composants graphiques permettant d’interagir avec une application Web.
+      - Il s’agit d’examiner le code HTML d’une page comprenant des composants graphiques et de distinguer ce qui relève de la description des composants graphiques en HTML de leur comportement (réaction aux événements) programmé par exemple en JavaScript.
+
+    * - Événements
+      - Identifier les événements que les fonctions associées aux différents composants graphiques sont capables de traiter.
+      -
+
+    * - Interaction avec l’utilisateur dans une page Web
+      - Analyser et modifier les méthodes exécutées lors d’un clic sur un bouton d’une page Web.
+      -
+
+
+Progression
+===========
+
+Étape 1: Découverte du language Javascript dans la console
+----------------------------------------------------------
+
+Toutes les activités de cette étape se dérouleront dans la console du navigateur. On commencera par un effet Wahou du javascript. Puis une étude un peu plus théorique du corpus de Javascript.
+
+Bilan: Description du language JS, comparaison du corpus de Python et de Javascript.
+
+Étape 2: Trouver les interactions possibles
+-------------------------------------------
+
+Des pages HTML avec du code javascript intégré ou importé. Les élèves doivent comprendre les interactions et décortiquer le code Javascript.
+
+Bilan: importer du code JS dans une page HTML et les fonctions de bases de manipulation du DOM.
+
+Étape 3: Page HTML avec CSS et Javascript
+-----------------------------------------
+
+Des pages HTML à reproduire et des interactions à ajouter.

1NSI/08_Interaction_web/plan_de_travail.tex

@@ -0,0 +1,41 @@
+\documentclass[a4paper,12pt]{article}
+\usepackage{myXsim}
+\usepackage{minted}
+
+\author{Benjamin Bertrand}
+\title{Interaction web - Plan de travail}
+\tribe{1NSI}
+\date{février 2023}
+
+\pagestyle{empty}
+
+\DeclareExerciseCollection{banque}
+\xsimsetup{
+}
+
+
+\begin{document}
+\maketitle
+
+% Résumé
+
+\bigskip
+
+
+\section{Découverte du javascript}
+
+\listsectionexercises
+
+\section{Interactions}
+
+\listsectionexercises
+
+\section{Page web complètes}
+
+\listsectionexercises
+
+\input{exercises.tex}
+\printcollection{banque}
+
+
+\end{document}

1NSI/08_Interaction_web/script/1B_boucles.js

@@ -0,0 +1,3 @@
+for (var i = 0; i < 3; i++){
+    console.log(i)
+}

1NSI/08_Interaction_web/script/1B_boucles.py

@@ -0,0 +1,2 @@
+for i in range(3):
+    print(i)

1NSI/08_Interaction_web/script/1B_conditions.js

@@ -0,0 +1,7 @@
+let age = 12;
+let permi = True;
+if (age > 18) && (permi === True) {
+    console.log("Tu peux conduire")
+} else {
+    console.log("Tu ne peux pas conduire")
+}

1NSI/08_Interaction_web/script/1B_conditions.py

@@ -0,0 +1,6 @@
+age = 12
+permi = True
+if age > 18 and permi == True:
+    print("Tu peux conduire")
+else:
+    print("Tu ne peux pas conduire")

1NSI/08_Interaction_web/script/1B_fonctions.js

@@ -0,0 +1,3 @@
+function carre(n) {
+    return n**2
+}

1NSI/08_Interaction_web/script/1B_fonctions.py

@@ -0,0 +1,2 @@
+def carre(n):
+    return n**2

1NSI/08_Interaction_web/script/1B_type.js

@@ -0,0 +1,5 @@
+let entier = 1;
+let string = "coucou";
+let virgule = 2.2;
+let bouleen = true;
+let liste = [1, 2, 3];

1NSI/08_Interaction_web/script/1B_type.py

@@ -0,0 +1,5 @@
+entier = 1
+string = "coucou"
+virgule = 2.2
+bouleen = True
+liste = [1, 2, 3]

1NSI/08_Interaction_web/script/1B_var.js

@@ -0,0 +1,3 @@
+let a = 2;
+let mot = "coucou";
+const constante = "coucou"

1NSI/08_Interaction_web/script/1B_var.py

@@ -0,0 +1,2 @@
+a = 2
+b = "coucou"

1NSI/08_Interaction_web/script/1E_boucles.js

@@ -0,0 +1,3 @@
+for (let i = 5; i<10; i++){
+    console.log("allez " + i);
+}

1NSI/08_Interaction_web/script/1E_condi.js

@@ -0,0 +1,8 @@
+let age = prompt("Quel age as tu?")
+if (age === 10) {
+    console.log("Tu as 10ans!")
+} else if (age > 18) {
+    alert("Va voter!")
+} else {
+    console.log("C'est pour bientot")
+}

1NSI/08_Interaction_web/script/1E_fonction.js

@@ -0,0 +1,5 @@
+function vousAlerte(texte) {
+    alert("Je vous alerte!")
+    alert(texte)
+}
+vousAlerte("Regarde derrière toi!")

1NSI/08_Interaction_web/script/1E_index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <title> "Langages" </title>
+    <meta charset="utf-8">
+</head>
+<body>
+    <h1>Langages du web</h1>
+    <ul id="langages">
+        <li> HTML </li>
+        <li> CSS </li>
+    </ul>
+</body>
+</html>