HTML and cryptage

photo numérique/activité_décryptage_image/sujet.tex

@@ -0,0 +1,221 @@
+\documentclass[11pt,a4paper]{../../template_cours}
+
+\title{Activité débranchée — Codage des images}
+\def\thesequence{Photographie numérique}
+\author{Adrian Amaglio}
+
+\usepackage{tabularx}
+
+
+% Format de fichier inspiré de JPEG
+% Structure d'un fichier JPEG (header)
+%    https://fr.wikipedia.org/wiki/JPEG#Syntaxe_et_structure
+%
+% Données EXIF associées à une image (footer)
+%    https://fr.wikipedia.org/wiki/Exchangeable_image_file_format#Exemple
+%    https://www.media.mit.edu/pia/Research/deepview/exif.html [En anglais]
+
+% Exemple de métadonnées EXIF :
+% Balise                                  Valeur
+% Constructeur                            HP
+% Modèle                                  R707
+% Orientation                             haut - gauche
+% Résolution X                            72,00
+% Résolution Y                            72,00
+% Unité de résolution                     Pouce
+% Logiciel                                Ver1.01
+% Date et heure                           2003:08:11 16:45:32
+% Position YCbCr                          centrée
+% Compression                             compression JPEG
+% Résolution X                            72,00
+% Résolution Y                            72,00
+% Unité de résolution                     Pouce
+% Vitesse d’obturation                    1/250 s
+% Nombre F                                f/4,0
+% ProgrammeExposition                     Programme normal
+% Version Exif                            Exif version 2.1
+% Date et heure (d’origine)               2003:08:11 16:45:32
+% Date et heure (numérisation)            2003:08:11 16:45:32
+% ConfigurationComposants                 Y Cb Cr -
+% Taux de compression bits par pixel      4.01
+% Compensation d’exposition               0.0
+% Valeur d’ouverture maximale             2.00
+% Mode de mesure de distance              Formes
+% Flash                                   Flash inactif
+% Longueur de focale                      20,1 mm
+% Annoteur                                432 bytes donnée inconnue
+% FlashPixVersion                         FlashPix version 1.0
+% Espace colorimétrique                   sRGB
+% Dimension X en pixels                   2240
+% Dimension Y en pixels                   1680
+% Source du fichier                       DSC
+% Index d’interopérabilité                R98
+% Version d’interopérabilité              (null)
+
+\begin{document}
+
+\maketitle
+
+\section{Votre mission}
+Les textes suivants sont des fichiers images, ouverts comme du texte.
+On peut donc y lire les instructions nécessaires à l’affichage de l’image, pixel par pixel.
+
+\begin{exercice}
+    Vous allez dessiner les images décrites ci dessous.
+    Puis vous devrez les assembler dans l’ordre !\\
+    Vous avez le choix entre les deux résolutions d’image suivantes :\\
+    Sur une feuille à grands carreaux coupée en 4, dessinez l’image avec un pixel par carreau.\\
+    Sur une feuille à petits carreaux coupée en 4, dessinez l’image avec un pixel pour 4 carreaux.\\
+    Vous aurez pour cela besoin des informations suivantes.
+\end{exercice}
+
+\section{Documentation technique de notre format d’image}
+Un fichier image contient plusieurs informations.
+Chacune de ces informations a un nom et une valeur :
+\\
+\begin{table}[h]
+\begin{tabularx}{\textwidth}{|l|X|X|}
+    \hline
+    Nom & Description & Valeurs possibles \\
+    \hline
+    SOI & « Start Of Image », il indique le début du fichier image & Aucune \\
+    \hline
+    SOF0 & « Start Of Frame », il indique les dimensions, le nombre de couleurs et la profondeur des couleurs & 4 valeurs : L,H,N,P = largeur, hauteur, nombre de couleurs, profondeur des couleurs\\
+    \hline
+    DHT & Define Huffman Table & Informations de compression codées en base64 \\
+    \hline
+    DRI  & Define Quantization Table & Informations de compression codées en hexadécimal \\
+    \hline
+    SOS & « Start Of Scan », indique le début de la description des pixels & Une suite de chiffres contenant les couleurs de chaque pixels \\
+    \hline
+    APP0 & Les métadonnées sont stockées ici & Les valeurs sont sous la forme « clé=valeur,clé=valeur… »\\
+    \hline
+    COM & Commentaire & On peut mettre ce que l’on veut ici \\
+    \hline
+    EOI & « End Of Image », indique la fin du fichier image & Aucune \\
+    \hline
+\end{tabularx}
+\end{table}
+
+
+
+
+
+
+\newpage
+
+
+
+
+
+% Displays an image described by text.
+% It must be read with its documentation (first page)
+\newcommand{\image}[6]{% arg1: scantext, arg2: datetime, arg3: gpslat, arg4: gpslong, arg5: rotation, arg6: commentary
+    \thispagestyle{empty} % Remove header and footer %
+    \begin{minipage}{.5\textwidth}
+    \sloppy
+    \texttt{SOI\\
+        SOF0 5,5,3,1\\
+        DHT QXUgdmVudCBxdWkgc291ZmZsZSBsYSB0ZW1\\
+        ww6p0ZSBzZSByw6ljb2x0ZW50IGxlcyBqb3Vycy\\
+        BkZSBmw6p0ZS4=\\
+        DRI c2abc2a0496c206e6520666175742070617\\
+        32076656e647265206c61207065617520646520\\
+        6ce280996f757273c2a0c2bb207e2050726f766\\
+        57262652076c3a967616e65\\
+        SOS\\
+        #1\\
+        APP0 version exif=2.1, Date et heure=#2, software=alamainV2.0, GPS latitude=#3, GPS longitude=#4, GPS altitude=1312m, rotation=#5\\
+        COM https://maps.openrouteservice.org permet d’entrer des
+    coordonnées GPS ! #6\\
+        EOI
+    }\\\textbf{}\\
+    \end{minipage}
+}
+
+
+% TODO user array https://tex.stackexchange.com/questions/37426/create-an-array-of-variables
+\newcommand{\dateone}{1773:12:16}
+\newcommand{\datetwo}{1789:07:14}
+\newcommand{\datethree}{1831:11:21}
+\newcommand{\datefour}{1871:05:21}
+\newcommand{\datefive}{1917:11:07}
+\newcommand{\datesix}{1968:05:03}
+\newcommand{\dateseven}{2018:11:17}
+\newcommand{\dateeight}{2019:12:05}
+\newcommand{\datenine}{2021:10:03}
+\newcommand{\dateten}{2033:05:12}
+
+\newcommand{\latone}{42.3518}
+\newcommand{\lattwo}{48.8532}
+\newcommand{\latthree}{45.7747}
+\newcommand{\latfour}{48.8872}
+\newcommand{\latfive}{59.9378}
+\newcommand{\latsix}{48.84878}
+\newcommand{\latseven}{48.87145}
+\newcommand{\lateight}{43.6124}
+\newcommand{\latnine}{}
+\newcommand{\latten}{}
+
+\newcommand{\longone}{-71.0416}
+\newcommand{\longtwo}{2.3692}
+\newcommand{\longthree}{4.8318}
+\newcommand{\longfour}{2.342}
+\newcommand{\longfive}{30.3099}
+\newcommand{\longsix}{2.3437}
+\newcommand{\longseven}{2.30241}
+\newcommand{\longeight}{3.8492}
+\newcommand{\longnine}{}
+\newcommand{\longten}{}
+
+% Simple color definition %
+\newcommand{\R}{100}
+\newcommand{\G}{010}
+\newcommand{\B}{001}
+\newcommand{\W}{111}
+\newcommand{\K}{000}
+
+% Pictures definitions %
+% Ces exemples sont durs à lire, les élèves reconnaissent à peine les lettres. Ça les force à utiliser les métadonnées pour les remettre dans l’ordre.
+\newcommand{\picI}{\K\B\B\B\K\W\K\G\K\W\\\K\W\G\W\K\W\K\G\K\W\\\K\R\R\R\K} % Un I
+\newcommand{\picIrot}{180°}
+\newcommand{\picL}{\B\R\G\G\G\B\K\G\G\G\\\B\R\G\G\G\B\K\G\G\G\\\B\R\K\R\G} % Un L
+\newcommand{\picLrot}{0°}
+\newcommand{\picO}{\K\B\G\R\K\K\W\W\W\K\\\W\B\G\R\W\K\W\W\W\K\\\K\B\G\R\K} % Un O
+\newcommand{\picOrot}{90°}
+\newcommand{\picV}{\B\G\B\G\B\R\G\R\G\R\\\K\G\K\G\K\R\G\R\G\R\\\B\B\G\B\B} % Un V
+\newcommand{\picVrot}{0°}
+\newcommand{\picE}{\K\K\K\K\K\W\W\W\W\W\\\W\R\W\R\W\W\R\R\R\W\\\R\R\B\R\R} % Un E
+\newcommand{\picErot}{90°}
+\newcommand{\picSecond}{\W\W\W\B\W\B\K\W\K\B\\\W\W\W\B\K\W\K\B\K\B\\\W\W\W\B\K} % Un 2
+\newcommand{\picSecondrot}{0°}
+\newcommand{\picHeart}{\K\R\K\R\K\R\G\R\G\R\\\R\G\W\G\R\K\R\G\R\K\\\K\K\R\K\K} % Un cœur
+\newcommand{\picHeartrot}{0°}
+\newcommand{\picExclamation}{\R\K\G\B\W\R\K\G\B\W\\\R\K\G\B\W\R\R\G\W\W\\\R\K\G\B\W} % Deux points d’exclamation
+\newcommand{\picExclamationrot}{0°}
+\newcommand{\picFirst}{\K\B\B\B\R\K\K\B\R\R\\\W\W\B\W\W\R\R\B\B\K\\\R\R\B\K\K} % Un 1
+\newcommand{\picFirstrot}{180°}
+\newcommand{\picSixth}{\G\B\B\B\G\W\B\W\W\W\\\G\B\B\B\G\W\B\W\B\W\\\G\B\B\B\G} % Un 6
+\newcommand{\picSixthrot}{0°}
+\newcommand{\picFiveteen}{\G\R\G\G\G\G\R\G\W\G\\\G\G\G\W\G\R\R\R\W\W\\\B\B\B\B\B} % Un 15
+\newcommand{\picFiveteenrot}{-90°}
+\newcommand{\picSeventeen}{\K\G\K\K\K\K\W\G\W\K\\\K\G\G\G\K\K\W\G\W\K\\\K\G\G\G\K} % Un 17
+\newcommand{\picSeventeenrot}{0°}
+\newcommand{\picEighteen}{\R\R\R\R\R\K\W\K\W\K\\\G\G\G\G\G\G\B\G\B\G\\\G\G\G\G\G} % Un 18
+\newcommand{\picEighteenrot}{90°}
+
+% Les rotations sont en sens horaire
+\image{\picI}{\dateone}{\latone}{\longone}{\picIrot}{i}
+\image{\picL}{\datetwo}{\lattwo}{\longtwo}{\picLrot}{l}
+\image{\picO}{\datethree}{\latthree}{\longthree}{\picOrot}{0}
+\image{\picV}{\datefour}{\latfour}{\longfour}{\picVrot}{\^}
+\image{\picE}{\datefive}{\latfive}{\longfive}{\picErot}{3}
+\image{\picSecond}{\datesix}{\latsix}{\longsix}{\picSecondrot}{sec}
+\image{\picFirst}{\dateseven}{\latseven}{\longseven}{\picFirstrot}{first}
+\image{\picSixth}{\dateseven}{\latseven}{\longseven}{\picSixthrot}{sixth}
+\image{\picFiveteen}{\dateseven}{\latseven}{\longseven}{\picFiveteenrot}{fifteenth}
+\image{\picSeventeen}{\dateseven}{\latseven}{\longseven}{\picSeventeenrot}{seventeenth}
+\image{\picEighteen}{\dateseven}{\latseven}{\longseven}{\picEighteenrot}{eighteenth}
+\image{\picHeart}{\dateeight}{\lateight}{\longeight}{\picHeartrot}{k}
+\image{\picExclamation}{\datenine}{\latnine}{\longnine}{\picExclamationrot}{punct}
+\end{document}

python/tp_variables/sujet.tex

@@ -6,6 +6,9 @@
 \author{Adrian Amaglio}
 \def\thesequence{Programmation}
 
+\newcommand{\copyablespace}{\BeginAccSupp{method=hex,unicode,ActualText=00A0}\ \EndAccSupp{}}
+\newcommand{\tab}{\copyablespace\copyablespace\copyablespace\copyablespace}
+
 \begin{document}
 Durée : 1h
 

web/tp_fake_news/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Un bel exemple !</title>
+        <link rel="stylesheet" href="./style.css" />
+    </head>
+    <body>
+        <h1>Voici un exemple de site internet</h1>
+        <p>Il est possible d'ecrire du texte sur un site internet !</p>
+    </body>
+</html>

web/tp_fake_news/style.css

@@ -0,0 +1,7 @@
+p {
+    color:blue;
+}
+
+h1 {
+    font-family: Arial, Helvetica, sans-serif;
+}

web/tp_fake_news/sujet.tex

@@ -0,0 +1,110 @@
+\documentclass[11pt,a4paper]{../../template_cours}
+\usepackage{listings}
+
+\usepackage{minted}
+
+\title{Créer et modifier une page web}
+\author{Adrian Amaglio}
+\def\thesequence{Web}
+
+\begin{document}
+Durée : 1h
+
+% ---
+\section{HTML — Structure et contenu}
+Le HTML est le langage de balisage utilisé pour structuré une page web.\\
+Une balise est de la forme :\\
+\begin{minted}{HTML}
+    <p>Je suis un texte quelconque</p>
+\end{minted}
+Remarquez que le texte débute par une balise « ouvrante » \textbf{<p>} et se termine par une balise « fermante » \textbf{</p>}.
+Le \textbf{/} est donc important à la fin car il indique la fin du paragraphe.
+
+Ici, on utilise la balise \textbf{p}.
+Elle signifie que son contenu est un paragraphe de texte.
+Pour en faire un titre principal, on aurait utilisé la balise \textbf{h1}.
+
+\begin{exercice}
+    Dans un dossier que vous pourrez retrouver plus tard dans l’année, créez un dossier et nomez le « web1 ».
+\end{exercice}
+
+\begin{exercice}
+    Ouvrez un éditeur de texte comme « notepad++ ».
+    Créez un nouveau fichier texte (menu \textbf{File > new} ou raccourci \textbf{CTRL+n}) et enregistrez le dans le dossier créé à l’exercice précédent (menu \textbf{File > save As}) sous le nom « index.html ».
+
+    Votre fichier devra avoir le contenu suivant. Il s’agit de la base de toutes les pages web.
+    \lstinputlisting[language=HTML]{index.html}
+\end{exercice}
+
+\begin{exercice}
+    Ouvrez le fichier « index.html » avec un navigateur.
+    \\
+    Remarquez que seul le texte entre deux balises est visible, les balises ne s’affichent pas !
+    C’est parce que le HTML est interprété par le navigateur, plutôt que d’afficher la balise h1 il va garder l’information que le texte qu’elle contient est un titre.
+\end{exercice}
+
+\begin{exercice}
+    Ajoutez dans le fichier « index.html », juste après le dernier paragraphe, un titre \textbf{h2} avec le contenu de votre choix.
+\end{exercice}
+
+\begin{exercice}
+    Ajoutez dans le fichier « index.html », juste après le dernier paragraphe, un paragraphe \textbf{p} avec le contenu de votre choix.
+\end{exercice}
+
+% ---
+\section{CSS — La mise en forme}
+
+\begin{exercice}
+    Dans le même dossier que votre fichier « index.html » créez un fichier « style.css » avec le contenu suivant :
+    \lstinputlisting[language=HTML]{style.css}
+    Enregistrez le puis actualiser la page index.html dans votre navigateur, le texte des paragraphes doit maintenant être écrit en bleu.
+\end{exercice}
+
+Les fichiers CSS sont structuré comme une suite de blocs suivants :
+\begin{minted}{HTML}
+<sélecteur> {
+    <directive>:<valeur>;
+}
+\end{minted}
+\begin{description}
+    \item[<sélecteur>] doit être remplacé par un nom de balise, il permet de choisir où appliquer le style entre accolades.
+    \item[<directive>] doit être remplacé par une directive CSS, c’est à dire une caractéristique à modifier (couleur, marges, police…).
+    \item[<valeur>] doit être remplacé par une valeur à donner à la directive précédente (rouge, 200px, Arial…).
+\end{description}
+
+\begin{exercice}
+    La règle CSS suivante permet de souligner du texte : « text-decoration: underline; ».\\
+    Appliquez cette règle à tous les titres h1.
+\end{exercice}
+
+% ---
+\section{Une fausse nouvelle faite maison}
+\begin{exercice}
+    Ouvrez un nouvel onglet dans votre navigateur et rendez vous sur le site d’information de votre choix (nextimpact, la quadrature du net…).
+\end{exercice}
+
+\begin{exercice}
+    Sur un titre, effectuez un clique droit et dans le menu qui s’ouvre choisissez l’option « examiner l’élément ».
+    \\
+    La fenêtre qui s’ouvre ensuite s’appelle la « Console de développement » car elle est utilisé par les créateurs et créatrices de sites web (développeurs et développeuses).
+    \\
+    Le code HTML de la page web devrait s’afficher et le titre sur lequel vous avez cliqué devrait être en surbrillance comme sur la capture suivante :
+    \begin{center}
+        \includegraphics[width=.8\textwidth]{console.png}
+    \end{center}
+    Modifiez maintenant le contenu de la balise titre pour y afficher le texte de votre choix.
+\end{exercice}
+
+\begin{exercice}
+    Effectuez une capture d’écran de votre fausse nouvelle, enregistrez la et envoyez la à un ou une amie.
+\end{exercice}
+
+% ---
+\section{Un site internet plus avancé}
+\begin{exercice}
+    Rendez vous sur le site internet suivant et suivez le tutoriel.
+    L’objectif est d’ajouter un menu à votre page web.
+    https://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html
+\end{exercice}
+
+\end{document}