Feat: début des bilans et ajoute des projets

1NSI/02_Programmation_Python_et_microbit/1B_microbit.tex

@@ -0,0 +1,37 @@
+\documentclass[a4paper,10pt]{article}
+\usepackage{myXsim}
+
+\author{Benjamin Bertrand}
+\title{Python et micro:bit - Cours}
+\date{Septembre 2022}
+
+\pagestyle{empty}
+
+\begin{document}
+
+\maketitle
+
+\section{Carte micro:bit}
+
+\begin{definition}[Carte Micro:bit]
+
+    BBC micro:bit est une carte à microcontrôleur conçue en 2015 au Royaume-Uni pour développer l'apprentissage de l'algorithmique et de la programmation.
+
+\begin{center}
+   \includegraphics[scale=0.5]{./fig/micro-bit}
+\end{center}
+
+Quelques unes de ses capacités
+\begin{itemize}
+    \item 25 LEDs programmables individuellement
+    \item 2 boutons programmables
+    \item Broches de connexion (pin ou GPIO)
+    \item Capteurs de lumière et de température
+    \item Capteurs de mouvements (accéléromètre et boussole)
+    \item Communication sans fil, via Radio et Bluetooth
+    \item Interface USB
+\end{itemize}
+
+\end{definition}
+
+\end{document}

1NSI/02_Programmation_Python_et_microbit/2B_bases_programmation.tex

@@ -0,0 +1,108 @@
+\documentclass[a4paper,10pt]{article}
+\usepackage{myXsim}
+
+\author{Benjamin Bertrand}
+\title{Web HTML CSS - Cours}
+\date{Septembre 2022}
+
+\pagestyle{empty}
+
+\begin{document}
+
+\maketitle
+
+\section{Le web}
+
+\begin{definition}[ Le web ]
+    Le World Wide Web (littéralement la « toile (d’araignée) mondiale », abrégé www ou le Web), la Toile mondiale ou la Toile, est un système hypertexte public fonctionnant sur Internet. Le Web permet de consulter, avec un navigateur, des pages accessibles sur des sites. L’image de la toile d’araignée vient des hyperliens qui lient les pages web entre elles.
+
+    \flushright{Source: Wikipedia}
+\end{definition}
+
+\subsection*{Les navigateurs web}
+
+\afaire{Lister 5 navigateurs web}
+
+\vspace{2cm}
+
+\subsection*{Les languages du web}
+
+On utilise classiquement 3 langages pour programmer des pages web. C'est 3 langages se complètent et ont un rôle distinct dans le rendu final.
+\begin{center}
+    \begin{tabular}{ccc}
+        \includegraphics[scale=0.4]{./fig/CSS3_logo}
+        &
+        \includegraphics[scale=0.9]{./fig/HTML5_logo}
+        &
+        \includegraphics[scale=0.3]{./fig/JavaScript_logo}
+        \\
+        Décoration & Contenu & Interaction
+    \end{tabular}
+\end{center}
+
+\section{HTML}
+
+\begin{definition}[ Le HTML ]
+    Le HyperText Markup Language, généralement abrégé HTML ou, dans sa dernière version, HTML5, est le langage de balisage conçu pour représenter les pages web.
+
+    \flushright{Source: Wikipedia}
+\end{definition}
+
+\subsection*{Les balises}
+
+Les balises permettent de \textbf{structurer} le contenu d'une page HTML.
+
+\begin{center}
+    \includegraphics[scale=2]{./fig/anatomie-element-html}
+\end{center}
+
+Quelques balises:
+\afaire{Reprendre la liste des balises vues en classe et expliquer leur utilité}
+\vspace{2cm}
+
+On peut ajouter à cette liste deux balises génériques qui jouent le role de conteneur pour la décoration CSS:
+\begin{itemize}
+    \item \texttt{<span>...</span>}: balise \textbf{sans} retour à la ligne avant utilisé pour le mise en forme d'une partie d'un texte.
+    \item \texttt{<div>...</div>}: balise \textbf{avec} retour à la ligne avant utilisé pour la mise en forme d'une partie de la page.
+\end{itemize}
+
+\bigskip
+
+Les balises doivent être bien imbriquée. C'est à dire qu'il faut fermer la dernière balise ouverte avant les autres.
+
+\begin{multicols}{2}
+    Balises bien imbriquées
+    \begin{lstlisting}
+    <div>
+        Conversation
+        <p>
+            Bonjour
+        </p>
+    </div>
+    \end{lstlisting}
+
+
+    Balises mal imbriquées
+    \begin{lstlisting}
+    <div>
+        Conversation
+        <p>
+            Bonjour
+    </div>
+        </p>
+    \end{lstlisting}
+\end{multicols}
+
+
+
+\subsection*{Validation}
+
+Même si le rendu d'une page web peut sembler correcte, cela ne signifie pas que le code respecte les normes du HTML. En effet, les navigateurs sont en général très permissifs sur la qualité du code qui leur est fourni.
+
+Ces normes sont définis pas le W3C (World Wide Web Consortium). Cet organisme propose un validateur:
+\begin{center}
+    \url{https://validator.w3.org/#validate_by_upload}
+\end{center}
+
+
+\end{document}

1NSI/02_Programmation_Python_et_microbit/exercises.tex

@@ -123,8 +123,9 @@
         \end{minipage}
     \end{center}
     \begin{enumerate}
+        \setcounter{enumi}{3}
         \item Changer les images affichées.
-        \item Afficher une flèche qui fait le tour autour du centre de la matrice.
+        \item Afficher une aiguille qui tourne.
     \end{enumerate}
 \end{exercise}
 
@@ -145,4 +146,51 @@
     \end{enumerate}
 \end{exercise}
 
+\begin{exercise}[subtitle={Plus ou moins}, step={5}, origin={Classique}, topics={ Programmation Python et microbit }, tags={ Python, Programmation, Architecture }]
+    Écrire un programme qui compte le nombre de fois où vous avez appuyé sur le bouton A et sur le bouton B et qui affiche les symboles:
+    \begin{itemize}
+        \item "=": si vous avez autant appuyé sur A que sur B.
+        \item ">": si vous avez plus appuyé sur A que sur B.
+        \item "<": si vous avez moins appuyé sur A que sur B.
+    \end{itemize}
+\end{exercise}
+
 % ---- Miniprojets
+
+
+\begin{exercise}[subtitle={Queulorior}, step={6}, origin={Pydefi}, topics={ Programmation Python et microbit }, tags={ Python, Programmation, Architecture }]
+    \begin{minipage}{0.15\linewidth}
+        \includegraphics[scale=0.2]{./fig/queulorior-pedia}
+    \end{minipage}
+    \begin{minipage}{0.7\linewidth}
+        Le Queulorior a ceci de particulier que de la peinture s'écoule au bout de sa queue. Ainsi, lorsqu'il se déplace, il laisse une trace.
+    \end{minipage}
+
+    Sacha sait que vous avez un Queulorior et pour communiquer avec vous, il vous envoie des instructions à donner au Queulorior. Ces instructions forment une séquence assez longue composée de 4 lettres : N, S, O et E. La lettre N indique au Queulorior de faire un pas vers le nord, la lettre S lui indique de faire un pas vers le sud, la lettre E un pas vers l'est et la lettre O un pas vers l'ouest.
+
+    Par exemple, donnez ces instructions au Queulorior :
+
+    \begin{center}
+        NNEESOOEES
+    \end{center}
+
+    Il va faire deux pas vers le nord, deux pas vers l'est, un pas vers le sud, deux pas vers l'ouest, deux pas vers l'est et un pas vers le sud, ce qui dessinera un A approximatif :
+
+    \begin{center}
+        \includegraphics[scale=1]{./fig/trajet_queulorior}
+    \end{center}
+
+    Écrire un programme où le message est stocké dans une variable et où le message décodé s'affiche sur l'écran.
+\end{exercise}
+
+\begin{exercise}[subtitle={Snake}, step={6}, origin={Classique}, topics={ Programmation Python et microbit }, tags={ Python, Programmation, Architecture }]
+    On souhaite coder un prototype du jeu snake sur le micro:bit. Vous pouvez le commencer seul ou suivre les étapes suivantes
+    \begin{enumerate}
+        \item Pour le moment le serpent a une taille de 1 pixel. Le faire avancer en ligne droite sur la matrice. Quand il sort de la matrice, tout l'écran doit clignoter.
+        \item On veut pouvoir le faire tourner à droite ou à gauche avec les boutons A et B. Ajouter cette possibilité de changement de direction.
+        \item Ajouter une choses à manger (un pixel). La matrice doit afficher un cœur quand la chose est touché par le serpent puis la chose réapparait à un autre endroit.
+        \item (*) Faire en sorte que le serpent face 2 pixels de long.
+        \item (*) Le serpent doit s'allonger de 1 pixel à chaque fois qu'il mange un pixel.
+        \item (*) La partie doit être perdue quand la tête du serpent touche une partie de son corps.
+    \end{enumerate}
+\end{exercise}