Feat: importe le chapitre web

SNT/01_WEB/1B_web.tex

@@ -0,0 +1,59 @@
+\documentclass[a4paper,10pt]{article}
+\usepackage{myXsim}
+
+\author{Benjamin Bertrand}
+\title{WEB - Cours}
+\date{Septembre 2020}
+
+\pagestyle{empty}
+
+\begin{document}
+
+\maketitle
+
+\section{La page web}
+
+\subsection*{Les langages du web}
+
+        \begin{minipage}{0.3\textwidth}
+            \begin{center}
+                \includegraphics[scale=0.4]{./fig/CSS3_logo}
+
+                Décoration
+
+            \end{center}
+        \end{minipage}
+        \hfill
+        \begin{minipage}{0.3\textwidth}
+            \begin{center}
+                \includegraphics[scale=0.9]{./fig/HTML5_logo}
+
+                Contenu
+
+            \end{center}
+        \end{minipage}
+        \hfill
+        \begin{minipage}{0.3\textwidth}
+            \begin{center}
+                \textbf{Javascript}
+
+                \includegraphics[scale=0.3]{./fig/JavaScript_logo}
+
+                Interaction
+
+            \end{center}
+        \end{minipage}
+
+\subsection*{Navigateur web}
+
+Le \textbf{navigateur web} est un logiciel qui "comprend" les langages du web pour nous afficher la page web souhaitée.
+
+Exemples de navigateur web:
+\begin{itemize}
+    \item Firefox
+    \item Chrome
+    \item Safari
+    \item Edge
+\end{itemize}
+
+\end{document}

SNT/01_WEB/2B_html.tex

@@ -0,0 +1,47 @@
+\documentclass[a4paper,10pt]{article}
+\usepackage{myXsim}
+
+\author{Benjamin Bertrand}
+\title{WEB - Cours}
+\date{Septembre 2020}
+
+\pagestyle{empty}
+
+\begin{document}
+
+\maketitle
+
+\setcounter{section}{1}
+\section{Langage HTML}
+
+\begin{center}
+    HTML: HyperText Markup Language
+
+    En français: langage de balises pour l'hypertexte
+\end{center}
+
+Le html utilise des \textbf{balises} pour structurer le contenu de la page web.
+
+\subsection*{Balises}
+\begin{center}
+    \includegraphics[scale=2]{./fig/anatomie-element-html}
+\end{center}
+
+\subsubsection*{Exemples de balises}
+
+\begin{multicols}{2}
+    \begin{itemize}
+        \item \texttt{<p> ... </p>}
+        \item \texttt{<h1> ... </h1>}
+        \item \texttt{<h2> ... </h2>}
+        \item \texttt{<strong> ... </strong>}
+        \item \texttt{<ul> ... </ul>}
+        \item \texttt{<li> ... </li>}
+        \item \texttt{<img src="..." alt="...">}
+        \item \texttt{<a href="..."> ... </a>}
+    \end{itemize}
+\end{multicols}
+
+\afaire{Décrire l'utilisation des balises listées au-dessus.}
+
+\end{document}

SNT/01_WEB/3B_hebergement_url.tex

@@ -0,0 +1,47 @@
+\documentclass[a4paper,10pt]{article}
+\usepackage{myXsim}
+
+\author{Benjamin Bertrand}
+\title{WEB - Cours}
+\date{Septembre 2020}
+
+\pagestyle{empty}
+
+\begin{document}
+
+\maketitle
+
+\setcounter{section}{1}
+\section{Langage HTML}
+
+\begin{center}
+    HTML: HyperText Markup Language
+
+    En français: langage de balises pour l'hypertexte
+\end{center}
+
+Le html utilise des \textbf{balises} pour structurer le contenu de la page web.
+
+\subsection*{Balises}
+\begin{center}
+    \includegraphics[scale=2]{./fig/anatomie-element-html}
+\end{center}
+
+\subsubsection*{Exemples de balises}
+
+\begin{multicols}{2}
+    \begin{itemize}
+        \item \texttt{<p> ... </p>}
+        \item \texttt{<h1> ... </h1>}
+        \item \texttt{<h2> ... </h2>}
+        \item \texttt{<strong> ... </strong>}
+        \item \texttt{<ul> ... </ul>}
+        \item \texttt{<li> ... </li>}
+        \item \texttt{<img src="..." alt="...">}
+        \item \texttt{<a href="..."> ... </a>}
+    \end{itemize}
+\end{multicols}
+
+\afaire{Décrire l'utilisation des balises listées au-dessus.}
+
+\end{document}

SNT/01_WEB/index.rst

@@ -2,11 +2,106 @@ WEB
 ###
 
 :date: 2022-08-21
-:modified: 2022-08-21
+:modified: 2022-08-28
 :authors: Benjamin Bertrand
-:tags: WEB
+:tags: Web
 :category: SNT
 :summary: Découverte du HTML, du fonctionnement du web et de ses problématiques.
 
-Étape 1:
-========
+Le programme
+============
+
+Contenus
+- Repères historiques
+- Hypertexte
+- Langages HTML et CSS
+- URL
+- Requête HTTP
+- Modèle client/serveur
+- Moteurs de recherche: principes et usages
+- Paramètres de sécurité d’un navigateur
+
+Capacités attendues
+- Définir les étapes du développement du Web.
+- Maîtriser les renvois d’un texte à différents contenus.
+- Distinguer ce qui relève du contenu d’une page et de son style de présentation.
+- Étudier et modifier une page HTML simple.
+- Décomposer l’URL d’une page.
+- Reconnaître les pages sécurisées.
+- Décomposer le contenu d’une requête HTTP et identifier les paramètres passés.
+- Inspecter le code d’une page hébergée par un serveur et distinguer ce qui est exécuté par le client et par le serveur.
+- Mener une analyse critique des résultats fournis par un moteur de recherche.
+- Comprendre que toute requête laisse des traces.
+- Maîtriser les réglages les plus importants concernant la gestion des cookies, la sécurité et confidentialité d'un navigateur
+
+Progression
+===========
+
+Les étapes ne sont pas du tout égale en terme de répartition de temps. La première étape prend largement les 2/3 du temps alloué à la séquence.
+
+Étape 1: Le HTML
+----------------
+
+Cette étape se termine par la production évaluée d'une page web sur l'histoire du web. Il faut que les élèves aient vu cette vidéo avant la dernière séance.
+
+Brainstorming autour du web. Le but est d'essayer de mettre de l'ordre dans la tête des élèves: la différence entre web et internet, navigateur et moteur de recherche... Pour ensuite introduire les languages de "programmation" du web: HTML, CSS et javascript.
+
+Découverte du code source d'une page web et modification  avec l'inspecteur -> principes du language html et les balises.
+
+Bilan sur le web:
+
+.. image:: ./1B_web.pdf
+    :height: 200px
+    :alt: Bilan sur le web
+
+Etude de la `page à balise <./page_balises.zip>`_ pour extraire les balises principales et la structure d'une page
+
+Bilan sur les balises:
+
+.. image:: ./2B_html.pdf
+    :height: 200px
+    :alt: bilan sur le html et les balises
+
+A partir de la vidéo sur l'histoire du web et de la page blanche, les élèves doivent faire une page sur l'histoire du web.
+
+Barème:
+- 4 points sur le contenu (éléments historique, structure...)
+- 4 points sur la validité du code et la bonne utilisation des balises
+- 2 points pour les éléments originaux ajoutés
+
+Étape 2: Hébergement d'une page
+-------------------------------
+
+Les élèves vont déposer leur page web sur le serveur du lycée pour la rendre accessible à tout le monde. C'est l'occasion de parler aussi d'url et un peu de http.
+
+Bilan sur l'hébergement et les urls
+
+.. image:: ./3B_hebergement_url.pdf
+    :height: 200px
+    :alt: Bilan sur l'hébergement et les urls
+
+
+Cette étape peut être commencé avant le rendu final de la page web sur l'histoire du web. De cette façon les plus rapides pourront construire une page index qui donnera accès aux pages des autres élèves.
+
+Étape 3: Les usages du web
+--------------------------
+
+Utilité du moteur de recherche
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+??? je crois que Camille a quelque chose!
+
+Les cookies
+~~~~~~~~~~~
+
+On profite du fait que les ordinateurs perdent les profiles pour jouer avec les cookies.
+
+On commence par la prise de conscience que les sites internet conservent des données. Pour cela, les élèves choisissent un thème et le note. Ensuite, ils vont sur youtube (en acceptant le bandeau des cookies), cherchent et regarde rapidement des vidéos sur le thème. Après 15min, ils ferment le navigateur et passent leur ordinateur à un autre élève qui doit retrouver le thème choisi.
+
+On se demande comment youtube fait pour se rappeler le thème -> les cookies. On explique comment accéder à l'historique et à la gestion des cookies. On les efface et on remarque que l'on ne peut plus deviner le thème.
+
+On peut ensuite surveiller les cookies déposés quand on accepte ou non la bannière.
+
+On parle ensuite RGPD.
+
+Bilan sur les cookies

SNT/01_WEB/page_blanche.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<meta name="Author" content="">
+		<title></title>
+	</head>
+
+	<body>
+		<!-- corps: tout ce que l'on veut afficher doit être mis entre ces balises -->
+
+	</body>
+</html>

SNT/index.rst

@@ -2,8 +2,10 @@ SNT en 2nd
 ##########
 
 :date: 2022-07-25
-:modified: 2022-07-25
+:modified: 2022-08-28
 :authors: Bertrand Benjamin
 :category: SNT
 :tags: Progression
 :summary: Organisation de l'année en SNT pour les 2nd
+
+Période 1: `Le web (avec un peu de réseau quand même!) <./01_WEB/>`_