diff --git a/photo numérique/activité_décryptage_image/sujet.pdf b/photo numérique/activité_décryptage_image/sujet.pdf new file mode 100644 index 0000000..0368236 Binary files /dev/null and b/photo numérique/activité_décryptage_image/sujet.pdf differ diff --git a/photo numérique/activité_décryptage_image/sujet.tex b/photo numérique/activité_décryptage_image/sujet.tex new file mode 100644 index 0000000..d83f414 --- /dev/null +++ b/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} diff --git a/python/tp_variables/sujet.pdf b/python/tp_variables/sujet.pdf index 653b497..5367237 100644 Binary files a/python/tp_variables/sujet.pdf and b/python/tp_variables/sujet.pdf differ diff --git a/python/tp_variables/sujet.tex b/python/tp_variables/sujet.tex index 0ba74d0..4192754 100644 --- a/python/tp_variables/sujet.tex +++ b/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 diff --git a/web/tp_fake_news/console.png b/web/tp_fake_news/console.png new file mode 100644 index 0000000..e306af4 Binary files /dev/null and b/web/tp_fake_news/console.png differ diff --git a/web/tp_fake_news/index.html b/web/tp_fake_news/index.html new file mode 100644 index 0000000..7fce80e --- /dev/null +++ b/web/tp_fake_news/index.html @@ -0,0 +1,11 @@ + + + + Un bel exemple ! + + + +

Voici un exemple de site internet

+

Il est possible d'ecrire du texte sur un site internet !

+ + diff --git a/web/tp_fake_news/style.css b/web/tp_fake_news/style.css new file mode 100644 index 0000000..0027dc6 --- /dev/null +++ b/web/tp_fake_news/style.css @@ -0,0 +1,7 @@ +p { + color:blue; +} + +h1 { + font-family: Arial, Helvetica, sans-serif; +} diff --git a/web/tp_fake_news/sujet.pdf b/web/tp_fake_news/sujet.pdf new file mode 100644 index 0000000..2084a3d Binary files /dev/null and b/web/tp_fake_news/sujet.pdf differ diff --git a/web/tp_fake_news/sujet.tex b/web/tp_fake_news/sujet.tex new file mode 100644 index 0000000..854de3f --- /dev/null +++ b/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} +

Je suis un texte quelconque

+\end{minted} +Remarquez que le texte débute par une balise « ouvrante » \textbf{

} et se termine par une balise « fermante » \textbf{

}. +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} + { + :; +} +\end{minted} +\begin{description} + \item[] doit être remplacé par un nom de balise, il permet de choisir où appliquer le style entre accolades. + \item[] doit être remplacé par une directive CSS, c’est à dire une caractéristique à modifier (couleur, marges, police…). + \item[] 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}