%\documentclass{article} %DÉSACTIVER POUR A5 \documentclass[a5paper]{article} %ACTIVER POUR A5 %######## % Packages # %######## \usepackage[utf8]{inputenc} \usepackage[T1]{fontenc} \usepackage[french]{babel} %######Affichage des maths \DecimalMathComma %pour ne plus avoir d'espace après la virgule dans l'écriture décimale des nombres \usepackage{amsmath} \usepackage{amssymb,amsthm} \usepackage{mathrsfs} \usepackage{amsopn} \usepackage[np]{numprint}%écriture des nombres avec des espaces et en écriture scientifique \usepackage{dsfont} %Pour faire le 1 double barre de la fonction caractérisitque dans un enironnement maths. \mathds{1} %\usepackage{bbold} %Double barre mais en petit pour tout les nombres dans un enironnement maths.\mathbb{1} %######Graphique \usepackage[dvipsnames]{xcolor} \usepackage{graphicx} \usepackage{pgf} \usepackage{tikz} \usepackage{tkz-tab} \usetikzlibrary{shapes,arrows} \usepackage{geometry} \geometry{hscale=0.85,vscale=0.85,centering} %######Tableau \usepackage{array} %pour centrer dans un tableau \usepackage{colortbl} %pour colorier les cellules lignes colonnes d'un tableau: \rowcolor{}, \columncolor{}, \cellcolor{purple!25} \usepackage{tabularx} %quelques amélioraions de l'environnement tabular \usepackage{diagbox} %Pour faire une diagonale dans une case d'un tableau: \diagbox{bas gauche}{haut droit} \usepackage{multirow} %fusionner des cellules horizontalement %######Hyperliens dans les pdf \usepackage[colorlinks=true,linkcolor=magenta,urlcolor=magenta]{hyperref}% Pour créer des liens à l'intérieur du pdf: \hyperlink{label}{texte du lien} permettra d'atteindre la cible identifiée par \hypertarget{label}{texte de la cible}. Les textes du lien et de la cible peuvent être vides. %######Des symboles et images \usepackage{marvosym} %Image de téléphone protable avec la commande \Mobilefone \usepackage{fdsymbol} %Notamment le cœur plein: \varheartsuit \usepackage{eurosym}%pour afficher le symbole euro %######Vrac \usepackage{enumerate}%énumération avec des lettres Pour avoir une liste en ligne utiliser \begin{tasks} et non pas enumerate puis \task et non pas \item \usepackage{stmaryrd}%pour faire des "intervalles" d'entiers \llbracket et \rrbracket \usepackage{xlop}%poser les calculs en colonne: \opdiv[displayintermediary=nonzero,voperation=top,shiftdecimalsep=none]{27}{45} \opset{decimalsepsymbol={,}} \usepackage{verbatim}%pour utiliser commande \exclure et normalement pour faire l'affichage tel quel sans compiler le texte. %\usepackage{alltt}%Pour utiliser une commande latex dans un environnement verbatim il faut utiliser: alltt %Pour écrire juste suelques mots en verbatim au milieu d'un phrase: \verb|quelques mots| \usepackage{fancyhdr} %######Algo \usepackage{listings} % \begin{lstlisting} \end{lstlisting} affiche du code comme le fait le langage choisi. \lstset{language=Pascal} \lstset{language=Python} pour choisir le langage dans le document avant chaque programme ou avant le \begin{document} pour l'appliquer à tout le document. %\lstset{} permet d'indiquer toutes les options. Pas de caractère accentué (option lourdingue à rajouter) qui vont s'ppliquer pour toute la suite du document: \lstset{language=Python} %Il espossible d'inclure un code python d'un fichier extérieur \lstinputlisting{source_filename.py}. %Il est possible de définir une présentation personnalisé par un ensemble de configuration enregistré dans un fichier de style \lstdefinestyle{pythonstyle}{ language=Python, backgroundcolor=\color{gray!30}, commentstyle=\color{Plum}, keywordstyle=\color{blue}, numberstyle=\tiny\color{black}, stringstyle=\color{ForestGreen}, basicstyle=\ttfamily\color{black}, breakatwhitespace=false, breaklines=true, captionpos=b, keepspaces=true, numbers=none, numbersep=5pt, showspaces=false, showstringspaces=false, showtabs=false, tabsize=1 } \lstset{style=pythonstyle} \lstdefinestyle{bashstyle}{ language=bash, backgroundcolor=\color{black}, commentstyle=\color{white}, keywordstyle=\color{magenta}, numberstyle=\tiny\color{black}, stringstyle=\color{white}, basicstyle=\ttfamily\footnotesize\color{white}, breakatwhitespace=false, breaklines=true, captionpos=b, keepspaces=true, numbers=left, numbersep=5pt, showspaces=false, showstringspaces=false, showtabs=false, tabsize=1 } %\lstset{style=bashstyle} \usepackage[french]{algorithm2e}%pseudocode \usepackage{scratch3} %############### Formule developpée molécule chimie \usepackage{chemfig} %##################### % Commande et environnement # %##################### \theoremstyle{plain} %Pour redéfinir les commande section (changer la couleur centrer): \usepackage{titlesec} \titleformat{\section}[block]{\color{blue}\Large\bfseries\filcenter}{}{1em}{} \titleformat{\subsection}[hang]{\color{purple}\large\bfseries}{\thesubsection}{1em}{} \titleformat{\subsubsection}[hang]{\bfseries}{\thesubsubsection}{1em}{} \titleformat{\paragraph}[hang]{}{}{1em}{} \renewcommand{\thesection}{{}} \renewcommand{\thesubsection}{\color{purple}\Roman{subsection}} \renewcommand{\thesubsubsection}{} \newenvironment{correction}{\color{Brown}}{\medskip} \newenvironment{sujet}{}{\medskip} %environnement bareme \newenvironment{bareme}{\color{RoyalBlue}\footnotesize \hfill }{\footnotesize \emph{~points}} %environnement détais du barème \newenvironment{details}{\color{RoyalBlue}\noindent ~\\}{~\\} %environnement notabene \newenvironment{notabene}{\color{PineGreen}\noindent ~\\}{~\\} %environnement exemples \newenvironment{exemples}{\color{RoyalBlue}}{} \newenvironment{remarques}{\color{Black!80}}{} \newenvironment{lecon}{\color{black}}{} \newenvironment{culturegenerale}{\color{Violet}}{} %Pour redéfinir les environnements exercices et autres avec de la couleur \newsavebox{\selvestebox} \newenvironment{colbox}[1] {\newcommand\colboxcolor{#1}% \begin{lrbox}{\selvestebox}% \begin{minipage}{\dimexpr\columnwidth-2\fboxsep\relax}} {\end{minipage}\end{lrbox}% \begin{center} \colorbox{\colboxcolor}{\usebox{\selvestebox}} \end{center}} %environnement exercice \newcounter{Exercice} \setcounter{Exercice}{1} \newcounter{Exercicecorrection} \newenvironment{exercice}[1]{ \setcounter{Exercicecorrection}{\theExercice} \color{blue} \begin{colbox}{blue!10} \hfill {\color{RoyalBlue}Exercice \theExercice. #1} \hfill \addtocounter{Exercice}{1} \small}{ \end{colbox} } %environnement exercicecorrection \newenvironment{exercicecorrection}{\medskip \small \color{Brown} \noindent \underline{Correction exercice \theExercicecorrection} }{~\newline} \newenvironment{exerciceapplication}{ \setcounter{Exercicecorrection}{\theExercice} \color{blue} \begin{colbox}{blue!10} \hfill {\color{RoyalBlue}Exercice \theExercice. Application.} \hfill \addtocounter{Exercice}{1} \small}{ \end{colbox} } \newenvironment{concours}{\setcounter{Exercicecorrection}{\theExercice} \color{blue} \medskip \hfill {\color{RoyalBlue}Exercice \theExercice. Concours.} \hfill \addtocounter{Exercice}{1} \small}{\medskip} \newenvironment{recherche}{\setcounter{Exercicecorrection}{\theExercice} \color{blue} \medskip \hfill { \color{RoyalBlue}Exercice \theExercice. Recherche.} \hfill \addtocounter{Exercice}{1} \small}{\medskip} %environnement definition \newcounter{Definition} \setcounter{Definition}{1} \newenvironment{definition}{\medskip \noindent {\color{orange}Définition \theDefinition} \addtocounter{Definition}{1} \newline \noindent \begin{tabular}{|m{12cm}|}\hline \\ }{\\ \hline \end{tabular}} %environnement théorème il est possible d'ajouter un titre de théorème en mettant entre accolade le titre après le begin{theoreme} \newcounter{Theoreme} \setcounter{Theoreme}{1} \newenvironment{theoreme}[1]{\medskip \noindent {\color{purple}Théorème \theTheoreme #1} \addtocounter{Theoreme}{1} \noindent \begin{tabular}{||m{12cm}||}\hline \\ }{\\ \hline \end{tabular}} %environnement proposition \newcounter{Proposition} \setcounter{Proposition}{1} \newenvironment{proposition}[1]{\medskip \noindent {\color{PineGreen}Proposition \theProposition #1} \addtocounter{Proposition}{1} \noindent \begin{tabular}{|m{12cm}|}\hline \\ }{\\ \hline \end{tabular}} %environnement propriété \newcounter{Propriete} \setcounter{Propriete}{1} \newenvironment{propriété}[1]{\medskip \noindent {\color{PineGreen}Propriété \thePropriete #1} \addtocounter{Propriete}{1} \noindent \begin{tabular}{|m{12cm}|}\hline \\ }{\\ \hline \end{tabular}} %environnement lemme \newcounter{Lemme} \setcounter{Lemme}{1} \newenvironment{lemme}[1]{\medskip \noindent {\color{PineGreen}Lemme \theLemme #1} \addtocounter{Lemme}{1} \noindent \begin{tabular}{|m{12cm}|}\hline \\ }{\\ \hline \end{tabular}} %environnement corollaire \newcounter{Corollaire} \setcounter{Corollaire}{1} \newenvironment{corollaire}[1]{\medskip \noindent {\color{PineGreen}Corollaire \theCorollaire #1} \addtocounter{Corollaire}{1} \noindent \begin{tabular}{|m{12cm}|}\hline \\ }{\\ \hline \end{tabular}} %environnement démonstration \newcounter{Demonstration} \setcounter{Demonstration}{1} \newenvironment{preuve}[1]{\medskip \noindent {\color{PineGreen}Démonstration \theDemonstration #1} \addtocounter{Demonstration}{1} \color{CadetBlue} }{} %environnement conclusion encadré et coloré \newenvironment{conclusion} {\color{PineGreen}\begin{tabular}{|c|}\hline \\ \begin{minipage}{0.85\linewidth} \begin{center} } {\end{center} \end{minipage} \\ \\ \hline \end{tabular} } %Commande pour l'objectif et l'écrire en vert \newcommand{\objectif}[1]{{\color{PineGreen}#1} \medskip} %######################## %Test conditionnel pour l'affichage # %######################## \newif\ifs %\strue%affiche la boite à trous \sfalse%affiche la réponse %Pour faire une case à trou complétable sur le pdf \newcounter{Trous} \setcounter{Trous}{1} \newcommand{\trous}[2][3cm]{ \ifs \begin{Form} \TextField[name=\theTrous ,bordercolor=,borderwidth=0, backgroundcolor=gray!20, align=1, width=#1 ,height=0.2cm, bordersep=0,color=black] {} \end{Form} \xspace \else #2 \fi \addtocounter{Trous}{1} } %######################### %en tête puis pied de page %######################### \pagestyle{empty} \pagestyle{fancy} \renewcommand{\headrulewidth}{0pt}%Pas de ligne horizontale en haut \lhead[]{}%entre crochets pages paires entre accolades pages impaires \chead[\small ]{\footnotesize \href{http://unemainlavelautre.net/}{Le web.} }% l left, c center, r right \rhead[]{} \lfoot[]{} \cfoot[\small -\thepage -]{\small -\thepage -} \rfoot[]{} %############################ %les environnements qu'on affiche ou pas # %############################ \newcommand{\exclure}[1]{\renewenvironment{#1}{\begingroup\comment}{\endcomment\endgroup\ignorespaces}} \exclure{details} \exclure{bareme} %\exclure{notabene}\exclure{exercicecorrection}\exclure{correction}\exclure{preuve}\exclure{corollaire}\exclure{proposition}\exclure{theoreme}\exclure{culturegenerale}\exclure{remarques}\exclure{exemples}\exclure{definition}\exclure{lecon} %\exclure{sujet} %############################### %#Double numérotation des pages# %############################### %\pagenumbering{roman} %À mettre juste avant \begin{document}. DOnc simplement décommenter. %\pagenumbering{arabic} %À copier décommenté \begin{document} \begin{notabene} PHP et javascripts sont à placer avant HTTP et HTTPS. Pas au bon endroit à cuase des activités sur ordinateurs et je n'avais pas accès au salles. \end{notabene} \section{Le Web.} \subsection{Introduction et vocabulaire.} \begin{lecon} Un \emph{\color{purple}hypertexte} est un texte augmenté de renvois automatiques à d'autres textes, des images ou des sons, un autre paragraphe dans le même texte. \medskip Les renvois à d'autres documents se font grâce aux liens hypertextes. Un \emph{\color{purple}lien hypertexte} (ou hyperlien, ou lien) est une référence dans un texte (ou sur une image) permettant de passer du document consulté à un autre document situé ailleurs sur un autre ordinateur. \medskip Le \emph{\color{purple}Web} (ou \emph{\color{purple}toile} ou \emph{\color{purple}réseau}) désigne le système donnant accès à un ensemble de données (page, image, son, vidéo) reliées par des \emph{\color{purple}liens hypertextes} et accessibles sur le réseau Internet. Tandis qu'Internet correspond à la connexion des machines entre-elles et les règles d'échange d'informations entre ordinateurs, le Web correspond à la connexion des contenus entre eux au moyen de liens hypertextes. Internet est formé des liens entre les machines tandis que le web est formé des liens entre les sites web. Il ne faut donc pas parler des sites Internet mais bien des sites Web. \begin{notabene} Schéma avec ordinateurs puis schéma avec sites web. \end{notabene} \medskip Pour que les hyperliens puissent fonctionner il nécessaire que chaque document ait une référence, un emplacement, une adresse unique qui permet de le retrouver. Cet emplacement unique est appelé une URL. Une \emph{\color{purple}URL} (Uniform Resource Locator) n'est pas simplement l'adresse d'un site mais l'adresse très précise d'un document sur ce site internet. Si l'adresse du sous-domaine français de wikipedia est \url{https://fr.wikipedia.org} l'URL de la page qui parle des URL est \url{https://fr.wikipedia.org/wiki/Uniform_Resource_Locator}. Remarquons que les URL ne se limitent pas aux seuls sites Web et fonctionnent pour des adresses mail, les serveurs FTP, et d'autres encore. \begin{notabene} Et que faut-t-il utiliser pour retrouver l'ordinateur sur lequel est installé le site internet correspondant à une URL? \end{notabene} \begin{notabene} Si chacun choisi son alphabet il devient impossible de partager des textes. De même sur internet pour que tout les ordinateurs puisse le lire il faut des règles communes de communication, d'affichage. \end{notabene} \medskip Certaines normes furent décidées pour que les hypertextes fonctionnent correctement sur tous les ordinateurs. \begin{itemize} \item Trouver le document hypertexte: un adressage unique de chaque page internet appelé l'URL. \item Les règles d'écriture du document hypertexte: un langage informatique pour écrire le texte qui inclus des informations de mise en page et les indications de lien appelé le langage HTML. \item Des règles de mise en page du document hypertexte: un ensemble de réglages pour la présentation (couleur et polices) appelé le langage CSS. \item Le protocole, la façon, dont un hypertexte est communiqué d'un ordinateur à un autre: un ensemble de règles pour envoyer le contenu du page web à un autre ordinateur appelé protocole HTTP. \item Le logiciel pour afficher l'hypertexte: ils sont appelés navigateurs web (firefox, chrome, opéra,). \end{itemize} \end{lecon} \subsection{Les URL.} \subsubsection{Une adresse locale.} \begin{lecon} Il est possible avec Firefox d'afficher une adresse locale sur l'ordinateur par exemple sur mon ordinateur l'URL \url{file:///home/pi/unemainlavelautre/} affiche le contenu de mon dossier appelé \og unemainlavelautre \fg{}. Nous retrouvons bien toute l'arborescence de l'ordinateur: les différents répertoires et la façon dont ils sont rangés les uns dans les autres. \begin{notabene} Comparer l'arborescence sur firefox et pcmanfm. Les représenter sous forme d'arbre probabiliste. \end{notabene} \end{lecon} \subsubsection{Une adresse sur internet.} \begin{lecon} Voici un exemple d'URL: {\color{black}\href{http://unemainlavelautre.net/site_exemple/page_exemple.html}{ \hspace*{-1cm} \begin{tabular}{cccccccc} \cellcolor{Orange!20} http & \cellcolor{Orange!20} :// & \cellcolor{LimeGreen!60} unemainlavelautre.net & \cellcolor{Orange!20} / & \cellcolor{LimeGreen!60} site\_exemple/page\_exemple.html \end{tabular} }} que nous pouvons déchiffrer de la façon suivante: \medskip \hspace*{-1cm} \begin{tabular}{|m{6cm}|m{6cm}|} \hline \cellcolor{Orange!20} http & nom du protocole utilisé \\ \hline \cellcolor{Orange!20} :// & séparateur \\ \hline \cellcolor{LimeGreen!60} unemainlavelautre.net & nom de domaine \\ \hline \cellcolor{LimeGreen!20} unemainlavelautre & nom du site \\ \hline \cellcolor{LimeGreen!20} net & extension de domaine \\ \hline \cellcolor{Orange!20} / & séparateur \\ \hline \cellcolor{LimeGreen!60} site\_exemple/page\_exemple.html & chemin local dans le répertoire du site web \\ \hline \cellcolor{LimeGreen!20}site\_exemple & nom du dossier où est rangé la page \\ \hline \cellcolor{Orange!20} / & séparateur \\ \hline \cellcolor{LimeGreen!20}page\_exemple.html & fichier au format html dans lequel est l'hypertexte \\ \hline \end{tabular} \begin{notabene} Montrer ce qu'il se passe sur mon ordinateur. Cliquer sur le lien mais aussi naviguer dans l'arborescence des répertoires pour mettre en évidence le rangement du site. \end{notabene} \end{lecon} \subsubsection{Exercices.} \begin{exercice}{} \emph{Promenade dans les dossiers du serveur.} \begin{enumerate} \item Allez jusqu'à l'URL : \url{http://dpernoux.com/Cours/Cours_maths.htm} \item Dans la barre d'adresse supprimez la fin de l'adresse et ne laissez que \emph{http://dpernoux.com/Cours}, puis appuyez sur la touche entrée. \item Cliquez sur le dossier \og Cours \fg{} et expliquez ce que vous voyez. \end{enumerate} \begin{notabene} Sur la plupart des sites web cette navigation sur le site est interdite par son créateur. \end{notabene} \end{exercice} \begin{exercice}{} \emph{Le vrai du faux.} \begin{enumerate} \item Cliquez sur le lien suivant \href{http://unemainlavelautre.net/2ieme_sciences_numeriques_et_technologie/2020-2021/web/voyage_madrid/voyage_a_madrid_levavasseur.html}{https://lycee-levavasseur.re/voyage-a-madrid/} \item Après avoir ouvert un nouvel onglet dans votre navigateur, rendez-vous sur le site web du lycée dont l'URL est : \url{https://lycee-levavasseur.re/}. Dans l'onglet \og Vie des élèves \fg{} choisissez \og Voyages scolaires \fg{} et enfin voyage à Madrid. \item Comparez les deux pages obtenues aux questions 1 et 2 (jeux des sept différences). \item Quels problèmes de sécurité cela concerne-t-il et comment y remédier? \end{enumerate} \end{exercice} \begin{exercicecorrection} \begin{enumerate} \item La principale façon d'identifier la fausse page est de déchiffrer l'URL. Il est également possible d'identifier des fautes d'orthographe ou des icônes qui s'affichent mal. \end{enumerate} \end{exercicecorrection} \begin{correction} La méthode de fraude présentée ci-dessus s'appelle du \emph{phishing} ou du \emph{\color{purple}hameçonnage} en français. Elle consiste à proposer des liens qui mènent vers de faux sites qui propageront des virus ou plus classiquement essaieront de vous voler de l'argent en vous faisant acheter des produits que vous ne recevrez jamais. Il existe diverses méthodes pour parer à ce genre de fraude. \begin{itemize} \item Plutôt que d'utiliser des liens allez directement à la page d'accueil du site et naviguez ensuite dans celui-ci. \item Vérifiez l'URL du site que vous consultez. \item Vérifiez les fautes d'orthographe et plus encore de grammaire. \item Préférez des connexion https. \end{itemize} \end{correction} \begin{exercice}{} L'arborescence d'un site désigne l'arborescence des répertoires qui sont sur l'ordinateur qui sert de serveur web et que l'on peut atteindre avec un navigateur. \begin{enumerate} \item Ouvrez le navigateur Firefox allez sur le moteur de recherche Google et entrez \og \verb|site:https://lycee-levavasseur.re/| \fg{} (aucun espace). \item Essayez de retrouvez le début l'arborescence du site du lycée et présentez-la sous forme d'un arbre (comme ceux de probabilité) sur deux niveaux (n'allez pas plus profondément). \end{enumerate} \end{exercice} \begin{exercice}{} Faites des recherches sur Tim Bernes-Lee et expliquez son rôle dans le développement de ce qui nous intéresse dans cette leçon. \end{exercice} \subsection{Le langage HTML.} \subsubsection{Le principe des balises.} \begin{lecon} Le langage HTML est formé de l'ensemble des règles qui permettent la mise en page d'un texte sur un site web. \medskip Comme Python, le langage HTML est un langage textuel. Il est donc possible de l'écrire dans n'importe quel fichier texte d'un ordinateur en lui ajoutant l'extension \og .html\fg{}. \medskip Il fonctionne sur le principe des \emph{\color{purple}balises} qui encadrent le texte. Ainsi pour que le texte \og Hello world \fg{} soit écrit en gras il faut l'insérer entre les balises comme suit: \begin{center} Hello world \end{center} Il y a une balise de début, , et une balise de fin, . La balise de fin est la même que celle de début mais précédé du slash (/). \end{lecon} \subsubsection{Ouvrir une page HTML.} \begin{lecon} Nous utiliserons en général deux logiciels pour ouvrir nos pages HTML. \begin{itemize} \item Le logiciel du client (dans l'architecture client-serveur) qui est le navigateur web avec lequel on se promène sur internet: Firefox, Chrome, etc. \item Le logiciel du serveur, le logiciel pour créer la page HTML qui est un simple éditeur de texte (ou un peu plus sophistiqué): bloc-note, notepad, etc. \end{itemize} \end{lecon} \subsubsection{Un exemple minimaliste de page HTML.} \begin{lecon} Une page HTML requière certains éléments incontournables. Voici une page web dans un éditeur de texte. \end{lecon} \begin{center} \begin{tabular}{|m{11cm}|} \hline \begin{verbatim}
Paragraphe pour présenter un lien hypertexte:
Ici les mots qui seront un lien hypertexte.
Et une image:
et
délimitent un paragraphe de texte. \item La balise} et telle que: \begin{itemize} \item la police à une taille de 24 pixel, \item l'arrière plan est orange, \item la largeur maximale du paragraphe est de $600$ pixels, \item le paragraphe est au centre de la page car les marges sont réglées automatiquement. \end{itemize} \end{enumerate} \end{enumerate} \end{exercice} \subsection{HTTP et HTTPS.} \subsubsection{HTTP.} \begin{lecon} Les échanges d'informations entre ordinateurs sur internet se font suivant un protocole (ensemble de règle de communication) appelé TCP. Via ce protocole TCP deux ordinateurs peuvent échanger des informations. Ainsi l'ordinateur hébergeant un site web et l'ordinateur d'un internaute peuvent se mettre en relation. Dans ce cas particuliers les règles de communications entre ces deux ordinateurs sont appelées HTTP. \begin{enumerate} \item Le client (l'ordinateur de l'internaute) demande une URL précise, \item le serveur envoie à l'ordinateur de l'internaute le HTML, le CSS et toutes les images ou vidéos liées à l'URL demandée, \item le client reçoit toutes les informations et les transmet au navigateur qui les affiche sur l'écran. \end{enumerate} Voici un exemple pour les deux premières étapes. \begin{enumerate} \item Le client envoie au serveur la requête. \begin{center} \begin{tabular}{|m{6cm}|} \hline GET /index.html HTTP/1.1\\ Host: unemainlavelautre.net\\ \hline \end{tabular} \end{center} \item Si la page est introuvable le serveur répond \begin{notabene} En ligne de commande: GET /index.html HTTP/1.1 Host: unemainlavelautre.net/test.html \end{notabene} \begin{center} \begin{tabular}{|m{6cm}|} \hline HTTP/1.1 404 Not Found\\ \hline \end{tabular} \end{center} Sinon le serveur répond \begin{notabene} En ligne de commande: GET /index.html HTTP/1.1 Host: unemainlavelautre.net \end{notabene} \begin{center} \begin{tabular}{|m{8cm}|} \hline HTTP/1.1 200 OK\\ Date: Mon, 4 Mar 2019 18:24:23 GMT\\ Content-Type: text/html; charset=UTF8\\ Content-Length:983\\ Last-Modified: Wed, 8 Jan 2019 05:10:35\\ \\ \\
...\\ \hline \end{tabular} \end{center} \end{enumerate} \end{lecon} \begin{exercice}{} Le client envoie au serveur la requête. \begin{center} \begin{tabular}{|m{6cm}|} \hline GET /index.html HTTP/1.1\\ Host: unemainlavelautre.net\\ \hline \end{tabular} \end{center} Si la page est introuvable le serveur répond \begin{center} \begin{tabular}{|m{6cm}|} \hline HTTP/1.1 404 Not Found\\ \hline \end{tabular} \end{center} Sinon le serveur répond \begin{center} \begin{tabular}{|m{8cm}|} \hline HTTP/1.1 200 OK\\ Date: Mon, 4 Mar 2019 18:24:23 GMT\\ Content-Type: text/html; charset=UTF8\\ Content-Length:983\\ Last-Modified: Wed, 8 Jan 2019 05:10:35\\ \\ \\ ...\\ \hline \end{tabular} \end{center} Expliquez le rôle des différentes instructions dans cet exemple de requêtes HTTP. \end{exercice} \begin{exercice}{} Lorsque le client et le serveur communiquent ils échangent des informations sur ce qu'ils sont. Suivez \href{http://www.anonymat.org/vostraces/index.php}{ce lien} et indiquez qu'elle sont les informations que vous communiquez au site internet sur lequel vous souhaitez vous connecter. \end{exercice} \subsubsection{Le cache.} \begin{lecon} Pour accélérer la navigation les navigateurs enregistrent (temporairement) les pages visitées sur l'ordinateur du client. On dit alors que les pages sont \emph{\color{purple}mises en cache}. C'est ce qui permet d'utiliser les boutons précédents et suivants du navigateur. Les pages mises en cache constituent des traces de notre navigation. L'ensemble des toutes les pages mises en cache constituent ce qu'on appelle l'historique de navigation qui est le plus souvent consultable sur le navigateur. \end{lecon} \begin{exercice}{} Allez sur votre navigateur internet et identifiez dans les préférences les réglages possibles concernant l'historique de navigation. Notez les différents réglages possibles. \end{exercice} \subsubsection{Les cookies.} \begin{lecon} Le protocole HTTP prévoit que le site web puisse enregistrer des informations du client sur l'ordinateur du client dans de petits fichiers textes appelés les \emph{\color{purple}cookies}. Ainsi les préférences de présentation, d'affichage choisis par le client, sont renvoyés dans un cookie par le serveur à chaque fois qu'il se connecte au serveur. Les cookies peuvent servir à enregistrer toutes les démarches du clients sur le serveur. De nos jours les cookies sont utilisés pour garantir des sessions d'utilisation de client sur les sites commerciaux. Lorsque l'utilisateur du site donne ses identifiants et mots de passe un cookie est créé sur son ordinateur avec un mot de passe temporaire pour identifier l'utilisateur pendant toute sa visite du site. Les cookies ont une très mauvaise réputation car ils ont autrefois servis à enregistrer beaucoup d'informations sur les clients et conservaient aussi des mots de passe et des informations personnelles. \end{lecon} \begin{exercice}{} Allez sur votre navigateur internet et identifiez dans les préférences les réglages possibles concernant les cookies. Notez les différents réglages possibles. \end{exercice} \subsubsection{HTTPS.} \begin{lecon} À l'heure du commerce sur internet (et donc des échanges d'argent) il est devenu nécessaire de sécuriser davantage les communications HTTP. Il s'agit notamment de protéger le client de deux types d'attaques classiques: le phishing et le man-in-the-middle. \begin{notabene} Faire des schéma pour les attaques et pour le HTTPS: communication entre client et serveur demande de carte d'identité (certificat) (contre le phishing), et pour que personne ne puisse entendre notre communication nous allons utiliser une langue secrète (chiffremment SSL) (contre le man-in-the-middle). \end{notabene} \medskip Le phishing consiste pour un serveur escroc à se faire passer pour un site internet valide. Les clients y font des versements ou laisse leurs informations bancaires et sont volés. Il fallait donc une manière de vérifier l'identité d'un site internet. Le protocole HTTPS prévoit donc un système de certificat qui est décerné à un site pour garantir son authenticité. Il est possible de créer soi-même un certificat pour son site web mais dans ce cas il ne sera pas reconnu tout de suite par le client: lors de la première connexion le client doit choisir de faire confiance ou non au serveur. \begin{notabene} Faire un essai en ssl sur mon site. \end{notabene} Les sites commerciaux en général paient un organisme de certification qui vérifie que le site n'est pas frauduleux et dans ce cas le client fait automatiquement confiance au serveur. \medskip Une fois l'identité du serveur vérifiée il faut, pour éviter l'attaque par man-in-the-middle, que les échanges entre le client et le serveur restent secrets. Pour cela le protocole HTTPS prévoit de chiffrer (utiliser un code secret) pour rendre les échanges incompréhensible pour une tierce personne. Ce code est appelé le TLS (Transport Layer Security) il repose sur un codage asymétrique construit à partir du certificat du site internet. \end{lecon} \subsection{PHP et Javascript.} \begin{lecon} Les pages web que nous avons créés pour l'instant diffusent les mêmes informations à tous les internautes il s'agit donc de sites web statiques. Il est possible de personnaliser le contenu d'un site web en fonction de chaque utilisateur ce sont des sites dits dynamiques. Concrètement il ne s'agit plus d'afficher du texte (avec des liens hypertextes) mais d'exécuter des programmes qui permettront d'effectuer des affichages actualisés (afficher l'heure) ou des actions à la demande de l'utilisateur (changer la présentation). Mais s'il s'agit d'exécuter un programme il y a deux possibilités. Soit il s'agit d'un programme exécuté par l'ordinateur client dans ce cas le langage de programmation est Javascript, soit le programme est exécuté par l'ordinateur serveur dans ce cas le langage de programmation est PHP. \medskip Remarque PHP est un acronyme récursif: \medskip Voici un exemple de page HTML intégrant des éléments PHP et Javascript. \end{lecon} \begin{notabene} Fichier à tester avec \href{https://www.w3schools.com/php/phptryit.asp?filename=tryphp_intro}{ceci}. \end{notabene} \begin{center} \begin{tabular}{|m{11cm}|} \hline \begin{verbatim}