Thème 2

Thème 2 - Le Web

I. Introduction

1. Qu'est-ce que le web ?
2. La face cachée du web

II. Quizz Web

A faire sur pronote

III. Activité 1 - Écriture d'une page Web

Objectifs :  Comprendre l'arborescence d'un site web
 Réaliser sa première page HTML en manipulant les balises basiques
 Mettre en forme et améliorer sa page

1. Qu'est-ce qu'un site web ?
2. Ma première page HTML

IV. Activité 2 - Les moteurs de recherche

Objectifs :  Découvrir le fonctionnement d'un moteur de recherche
 Comprendre les métamoteurs de recherche
 Installer et modifier le moteur de recherche d'un navigateur
 Distinguer ce qui fait la différence entre 2 moteurs de recherche.

1. Introduction

2. Fonctionnement des moteurs de recherche
3. Utiliser les moteurs de recherche dans le navigateur Firefox
4. Requêtes et résultats dans les moteurs de recherche
5. Complément à lire : Les MétaMoteurs de Recherche
6. Quizz sur les moteurs de recherche...
7. Bonus : et son compte Google ?
8. Pour aller plus loin... Histoire des moteurs de recherche

V. Activité 3 - Sécurité et Vie Privée sur le Web

Objectifs : avoir des connaissances minimales sur la sécurité et le vie privée sur le web, à travers les notions de cookies,
navigation sécurisée...

1. Introduction
2. La CNIL
3. Mode de navigation privée
4. Bien comprendre les cookies
5. Sécurité minimale dans un navigateur

I. Introduction

À partir d'un téléphone, d'une tablette ou d'un ordinateur, nous regardons des films, écoutons de la musique, faisons des
recherches pour nos exposés et discutons avec notre famille.
Que se passe-t-il quand une page Web s'affiche sur notre écran ? Quand nous cliquons sur un lien ? Quand nous utilisons un
moteur de recherche ?
1. Qu'est-ce que le web ?
Le web est en fait l'abréviation de World Wide Web, qui se traduit littéralement par « Toile d'Araignée Mondiale ».
Ce terme fait référence au système hypertexte fonctionnant sur le réseau informatique mondial Internet. Internet étant la
contraction d'InterNetwork (réseaux interconnectés)
Ne pas confondre Web et Internet !
Regarder cette vidéo en prenant des notes sur un papier ou cahier. Vous les utiliserez ensuite pour répondre au Quizzweb
disponible sur Pronote.

 « Vidéo 1 - Le web – site internet ou site web ?.mp4 »

2. La face cachée du web
Le web se représente comme un iceberg...

Surface web ou Clear web
C'est une petite portion du World Wide Web.
Bien que planétaire et 100% légal, le clear web ne représenterait que 4% d'internet.
Deep web
Estimé à 500 fois plus important que le clear web, le deep web se différencie d'abord par sa non-indexation par les moteurs de
recherche et son utilisation, plus caché et anonyme.
Exemples :

 tous les sites où il est nécessaire de s'identifier pour accéder au contenu : banques ou webmails.
 plus généralement tous les sites qui contiennent du contenu visible en fonction de l'utilisateur.

Dark web
« Le supermarché de l'illégalité » : lieu où tout s'achète et tout se vend sans aucun contrôle (armes, drogues, faux papiers,
médicaments, cartes de crédit ...)
On peut y rajouter les réseaux parallèles (Freenet, I2P ou Tor) connectés au World Wide Web, seulement accessible à l'aide d'un
logiciel ou d'une configuration spéciale, il représenterait 6% d'internet.
L'anonymat est la règle, les échanges se font en crypto-monnaies (Bitcoin, Ethereum ...) ce qui empêche toute traçabilité des flux.

II. Quizz Web

A faire sur Pronote.

III. Activité 1 - Écriture d'une page Web

1. Qu'est-ce qu'un site web ?
A. Définition :

Un site web ou site internet est un ensemble de fichiers organisés en dossiers dans une arborescence stockée sur un serveur.
Un serveur est allumé en permanence, ce qui a un coût non négligeable pour la planète.
Les fichiers sont de différents types :
 texte
 son
 photo
 vidéo
 programme exécutable

B. Qu'est-ce qu'une page web ?
 Une page web est un fichier qui permet de publier :
o un contenu (textes, images, vidéos...) : le fond
o un style graphique : la forme
 Le contenu est écrit en langage HTML (langage à balises dont l'extension du fichier est .htm ou .html)
 Le style graphique est écrit en langage CSS (extension du fichier .css)
 Le fichier html fait appel par une instruction à un fichier css pour assurer la mise en forme

C. Supprimer la mise en forme d'une page web
Sur le navigateur Mozilla Firefox, on peut faire disparaître la mise en forme d'une page :
 Afficher le menu : clic-droit à côté des onglets > Barre de menus
 Menu Affichage > Style de la page > Aucun Style

D. Comment une page web est-elle écrite ?

Code source d'une page web minimale

Le code HTML (aussi appelé code source) ci-contre fournit la page ci-dessous dans un navigateur :

Rendu du code source HTML :

On aura remarqué l'usage des balises h1 et h2 qui permettent de déclarer des titres de niveaux 1 et 2. Ces titres ont une mise en
forme par défaut. Voyons à présent comment on peut améliorer cette mise en forme de ces titres.
Pour cela, créons un nouveau fichier style_perso.css et enregistrons-le juste à côté de notre fichier .html. On pourra ensuite l'appeler à
l'intérieur de notre page HTML avec la ligne suivante (dans la section <head>) :

<link href="style_perso.css" rel="stylesheet" type="text/css" />

Dans le fichier style_perso.css, ajoutons ces quelques lignes :

h1 {
color: blue;
}

h2 {
font-variant: small-caps;
color: green;
}

strong {
background-color: gold;
}
color: blue;
}

h2 {
font-variant: small-caps;
color: green;
}

strong {
background-color: gold;
}

Le résultat sur la page web est immédiat :

Rendu de la page web avec création d'un fichier CSS

Si le fichier .css est dans un dossier (css par exemple), alors, il faudra mettre ce lien qui permet d'accéder au fichier .css depuis le
fichier HTML :

<link href="css/style_perso.css" rel="stylesheet" type="text/css" />

À présent, vous avez toutes les informations pour réaliser votre propre page HTML dans l'activité qui suit.

2. Ma première page HTML
Le but de cet exercice est de réaliser une page HTML de présentation de votre film préféré. Cette page sera simple. On pourra
piocher les informations de votre film sur des bases de données en ligne de films telles que IMDb, AlloCiné, Wikipédia...
Mise en place de l'environnement de travail de notre site web :
Dans un premier temps :

 créez un dossier SNT dans votre répertoire personnel (s'il n'a pas déjà été crée avant),
 à l'intérieur, créez un dossier Web (qui correspond au thème SNT),
 puis créez un dernier dossier Activite_1 dans ce dossier Web.
Attention, on prendra soin de ne pas mettre d'espaces et d'accents dans notre arborescence de fichiers et dossiers.
Dans le dossier Activite_1, créez 2 dossiers :
1. medias
2. css
Enfin, copions le code HTML ci-dessous dans le logiciel Bloc-notes. Enregistrons-le dans le dossier Activite_1 et nommons-le
index.html

<!DOCTYPE html>
<html>

<head>
<title>Mon Film Préféré</title>

</head>

<body>

<p>Ce document a été réalisé par VOTRE NOM ET PRENOM</p>
<h1>TITRE DU FILM</h1>
<img src="" /> <!--affiche du film (à insérer durant l'activité) -->
<br />

Informations générales
Année de Sortie : <br />
Réalisateur : <br />
Acteurs Principaux : <br />
Genre : <br />

Résumé
<!--utiliser la balise paragraphe <p> -->
Bande-Annonce du Film
<!--à insérer durant l'activité -->
Sources des informations et médias
</body>
</html>

Une fois copié et enregistré, exécutez ce fichier avec le navigateur.

Premières modifications du fichier index.html
A. Analyse du fichier

Dans un premier temps, analysez le fichier et sa construction, les différentes balises <h1>, <br />. On remarque que TITRE DU FILM est
entouré de la balise <h1>, correspondant au titre de niveau 1.

B. Mise en forme de quelques portions de textes
Cette page sera composée d'un gros titre (le titre du film) puis de 4 titres de niveau inférieur. Pour ces 4 derniers, on utilisera la
balise <h2>
On pourra aussi mettre en évidence, avec la balise <strong>, les différents items de la partie Informations générales.

 Modifiez le texte Ce document a été réalisé par VOTRE NOM ET PRENOM et TITRE DU FILM
 Ajoutez les balises <h2> </h2> à Informations générales, Résumé, Bande-Annonce et Sources...
 Ajoutez les balises <strong></strong> aux 4 items des Informations générales :

1. Année de sortie,
2. Réalisateur,
3. Acteurs principaux
4. Genre.
Enregistrez votre travail puis exécutez ce fichier avec le navigateur. Admirez votre premier travail.
C. Compléter les informations
À l'aide des sites web du début de page, renseignez les différentes informations de la page.
D. Ajouter une image à notre page
Depuis un site web, télécharger le fichier image du film en faisant un clic-droit dessus Enregistrer l'image sous... Enregistrez ce
fichier dans le dossier médias crée précédemment.
Nommez cette image affiche.jpg, ou affiche.png selon le format initial du fichier image.
Pour ajouter une image dans une page HTML, il faut utiliser la balise <img src= ... />. La ligne de code, déjà présente dans le fichier
index.html, est la suivante :

<img src="chemin vers l'image" />

chemin vers l'image est le chemin à fournir à partir du fichier HTML. On explique ci-dessous ce qu'est le "chemin vers l'image".
E. Lien vers une ressource

Voici la structure actuelle de notre site web où le fichier affiche.jpg est contenu dans medias :

Il faut donner le chemin pour aller de index.html à affiche.jpg qui est contenu dans le dossier medias. Ce chemin s'écrit :

medias/affiche.jpg

Remarque : si le fichier affiche.jpg avait été enregistré à la racine du site (à côté de index.html), on aurait mis la ligne de code
suivante :

<img src="affiche.jpg"/>

Ajoutez l'affiche à votre page web en ajoutant la ligne de code HTML adéquate. Faites vérifier par votre enseignant.
Si votre affiche est trop grande, on peut demander au navigateur de réduire sa largeur en pixels (width) ou sa hauteur en pixels
(height).
À noter que sur le web, ce n'est pas une très bonne pratique car cela peut consommer beaucoup d'espace et l'image sera donc
longue à être téléchargée. Cette problématique est abordée tout au long de l'année dans les Thèmes 'Data' et 'Photographie
Numérique'.
Ainsi, on pourra ajouter width dans notre ligne de code comme ceci :

<img src="chemin vers l'image" width="taille en pixels" />

F. État actuel de votre page

G. Intégrer du contenu distant
Ce qui est chouette avec le web, c'est que l'on peut intégrer du contenu issu d'un autre site. Nous allons intégrer la bande-annonce,
la vidéo donc, à notre page.
Ce n'est pas plus compliqué qu'un simple copier-coller. Prenons l'exemple du site Youtube, il suffit de cliquer sur le bouton
Partager puis <Intégrer>, sélectionner le code qui commence par <iframe> et le coller sous notre titre bande-annonce.
Attention, bien cocher la case : Activer le mode confidentialité avancé.
Le code ressemble à cela :

<iframe width="560" height="315" src="https://www.youtube.com/...></iframe>

Vous remarquerez que l'on peut jouer sur la taille de la vidéo affichée et quelques paramètres, toujours en anglais.
H. Créer des liens hypertextes

On l'a vu précédemment, les liens hypertextes sont la base du Web. Voyons comment réaliser ces liens avec du HTML. Un lien
permet simplement de se déplacer vers une autre page HTML.
<a> désigne une ancre, c'est-à-dire un lien vers une cible de destination. Cette balise entoure généralement un mot (une image, un
paragraphe, un titre, ...) qui devient le texte 'support du lien' hypertexte.
La syntaxe est :

<iframe width="560" height="315" src="https://www.youtube.com/...></iframe>

Dans la partie Sources des informations et médias, ajouter le ou les site·s où
vous avez pris vos informations et l'affiche en créant un lien vers le ou les
site·s en question.
Enregistrez, vérifiez et montrez le résultat à votre enseignant. Vous devriez
obtenir une page comme cela :

I. Et si je veux mettre un peu de couleurs ?

Ok, le rendu précédent n'est pas très fun, c'est le rendu par défaut des différentes balises ; on va donc ajouter une feuille de styles
à notre page afin de la personnaliser à notre goût. Pour cela, copiez le code ci-dessous :

body {
background-color: pink;
}

h1 {
color: blue;
}

h2 {
font-variant: small-caps;
color: green;
}

strong {
background-color: gold;
}

Coller ce code dans un nouveau document Bloc-notes puis enregistrez-le dans le dossier css précédemment crée, et nommez-le
MesStyles.css

Il ne reste plus qu'à rajouter le lien (attention au chemin, prenez exemple sur le lien de votre image...) dans le bloc <head> de notre
page HTML. Visualisez le rendu en le montrant à votre enseignant puis personnalisez-le à votre guise en modifiant le fichier
MesStyles.css

Vous trouverez de nombreuses références sur les styles sur Internet.

J. Pour aller plus loin...

Vous avez terminé et c'est validé par votre enseignant ? Pas de panique, vous pouvez :

 rajouter des pages à votre site (autre film, 2è volet du film...)
 ...

III. Activité 2 - Les moteurs de recherche

1. Introduction
Il existe actuellement environ deux milliards de sites web et des dizaines de milliards de pages web. Pour chercher une
information dans cette toile d'araignée géante (toile = web en anglais) que constitue littéralement le Web, des applications Web (qui
s'exécutent dans un navigateur) appelés moteurs de recherche sont nécessaires.
On lance un moteur de recherche à l'aide d'un navigateur web, dont les plus répandus sont les suivants :

 Mozilla Firefox, le plus respectueux de votre vie privée, il est open-source et libre,
 Google Chrome, le navigateur de Google présent par défaut sur Android et qui envoie de nombreuses informations

personnelles aux serveurs de Google,
 Microsoft Edge (anciennement Internet Explorer) présent par défaut sur Windows© ; il collecte par défaut les données de

vos recherches (source)
 Safari, le navigateur présent sur les appareils Apple
 Opera, Brave... moins connus que les précédents mais qui ont chacun leurs spécificités.

Les réponses à l'activité seront à compléter sur le document LibreOffice ci-joint :
« Sujet_Eleve_-_Moteurs_de_Recherche.odt »
Les réponses seront dans le style de paragraphe Réponses élèves - Paragraphe ou le style de caractère Réponses élèves -
Caractères. Pour faire apparaître les styles, on peut cliquer, dans LibreOffice, sur la touche fonction F11. Pour appliquer le style, on
peut simplement double-cliquer sur le style. Ainsi, les réponses seront en italique et en vert.
Le nom du fichier LibreOffice sera le suivant : Nom1_Nom2_MoteurRecherche.odt où Nom1 et Nom2 seront à remplacer par le nom
des binômes. Pas d'accents et pas d'espaces !
Le fichier sera rendu sur Pronote, dans le travail à faire qui sera lié à la matière SNT. Pour un binôme, il ne faudra rendre qu'un
seul fichier !
Bon travail en autonomie !
2. Fonctionnement des moteurs de recherche

Après avoir visionné la vidéo « Vidéo 2 - Comment fonctionnent les moteurs de recherche.mp4 », répondre à la question ①

3. Utiliser les moteurs de recherche dans le navigateur Firefox
On compte de nombreux moteurs de recherche disponibles et certains sont disponibles nativement dans les navigateurs comme
Mozilla Firefox.
Ces manipulations sont à réaliser sur Firefox mais sont quasi identiques sur d'autres navigateurs web.

Voyons cela dans le détail.
A. Moteur de recherche par défaut
Ouvrir le menu d'options de Firefox en cliquant sur l'icône rayée en haut à droite de la barre de menu, sélectionner Paramètres (ou
préférences selon la version de Firefox) dans le menu déroulant puis Recherche dans le menu latéral.

Puis, sélectionner le menu Recherche dans le menu de gauche :
Changer le moteur de recherche par défaut en sélectionnant une des propositions de la liste déroulante (DuckDuckGo ou Qwant
sont une bonne alternative). Tester le bon fonctionnement en utilisant le champ où l'on tape des adresses URL.

B. Ajouter un moteur de recherche
Dans tous les navigateurs, il est aisé d'ajouter un moteur à cette liste. On peut utiliser 3 moyens :

1. Lancer le site Qwant Maps, et cliquer sur les 3 petits points de la barre de recherche (Cf. image ci-dessous) puis
Ajouter ce moteur de recherche ; constater par la suite la bonne réussite de l'opération en retrouvant ce moteur dans
la liste proposée par Firefox. On peut retrouver cette icone d'ajout de moteur à d'autres endroits...

2. Aller sur un nouveau moteur de recherche, par exemple Lilo. Ce site web va vous proposer d'ajouter ce moteur à votre
navigateur, réaliser l'ajout à votre navigateur :

3. Utiliser le menu Paramètres (ou Préférences) > Recherche et parcourir la liste des moteurs de recherche en cliquant
sur le lien "Découvrir d’autres moteurs de recherche"

C. Utiliser différents moteurs de recherche dans Firefox

Une fois les moteurs installés dans Firefox, on peut les utiliser de manière très simple en suivant cette courte vidéo : «Vidéo

3 - Recherche_Firefox.mp4 »
 Réaliser une recherche sur Wikipédia sans lancer la page d'accueil
 Réaliser une recherche du Lycée Francois Rabelais dans Qwant Maps.

D. Validation enseignant
Préparez-vous à :
 montrer la liste des moteurs de recherche de votre navigateur
 faire une recherche d'un bâtiment dans Qwant Maps en utilisant la méthode ci-dessus.

4. Requêtes et résultats dans les moteurs de recherche
Avec la domination de Google, des moteurs de recherche alternatifs essaient de se distinguer par le choix d'un modèle plus
respectueux de la vie privée de ses utilisateurs. On peut citer l'américain DuckDuckGo et le français / européen Qwant.
A. Premier lancement de Google
Au premier lancement de Google, vous devez dire si vous acceptez ou pas l'usage de cookies (nous verrons en détail ce que sont
les cookies lors de l'activité suivante).
Question ② :
 Ouvrir une fenêtre de navigation privée (menu contextuel de Firefox ou Ctrl + Maj + P) puis
 Aller sur le moteur de recherche Google et réaliser une capture d'écran de cette fenêtre du premier lancement du moteur de
recherche Google (la fenêtre comprend 2 boutons Personnaliser et J'accepte)

B. Requête dans 2 moteurs
Question ③ :
 Soumettre la requête « trotinette électrique » (la faute d'orthographe sur trotinette est volontaire, comparez la gestion de la

correction automatique par les deux moteurs) aux moteurs de recherche Google et Qwant (en désactivant les éventuels
bloqueurs de publicité, mais cela ne doit pas être le cas au lycée).
 Obtenez-vous les mêmes résultats avec les deux moteurs ?
Question ④ :
Dans les résultats du moteur de recherche Google, on remarque immédiatement une carte.
 Que recense cette carte ?
 Comment sait-il que vous vous situez dans ces environs ? Vous pourrez trouver la solution en fouillant le bas de la page...

C. Financement des moteurs de recherche
Ce n'est un secret pour personne, financer un moteur de recherche coûte cher. Il faut donc trouver des sources de financement. La
seule source actuellement est la publicité mais il y a de grandes différences entre les moteurs de recherches.
Prenons l'exemple de Google et Qwant.
Avec le moteur de recherche Google, repérez les résultats qui sont des annonces publicitaires (par exemple sur la requête
trottinette électrique) et cliquer sur l'icône avec le i entouré située à proximité de l'annonce. Cliquer sur le texte "Pourquoi ces
annonces ?", puis cliquez sur En savoir plus.
Question ⑤ :
D'après la notice d'informations qui s'affiche, quelles sont les raisons pour lesquelles une annonce peut être affichée par Google ?

Question ⑥ :
On lit dans la notice d'informations :
« Les annonces personnalisées ne sont pas affichées ou masquées en fonction de catégories sensibles, telles que l'origine
ethnique, la religion, l'orientation sexuelle ou la santé. »
Que peut-on en conclure quand aux informations prélevées par Google lorsque vous utilisez ses services ?
Il est possible de personnaliser ou pas les annonces affichées. Personne ne devrait accepter cette personnalisation qui fait de vous
un objet publicitaire.
En revenant en arrière et en cliquant sur les paramètres des annonces, vous pouvez désactiver ou réactiver la personnalisation
des annonces.

Question ⑦ :
 Concernant Qwant, avez-vous eu une demande de dépôt de cookie ?
 Accéder à la page d'URL https://about.qwant.com/fr/legal/confidentialite/ puis au paragraphe « Donc Qwant n'affiche pas de

publicité ciblée ? ».
 Quelle est la politique de Qwant en matière d'affichage publicitaire ?
D. Politique de confidentialité
Question ⑧ :
À partir des politiques de confidentialité de Google et de Qwant, compléter, sur votre document LibreOffice, le tableau ci-dessous
pour lister leurs points communs ou différences.

Google Qwant

Résultats géolocalisés et collecte de
données de position

Anonymisation des requêtes

Résultats en fonction de l'historique de
recherche

Données collectées par les appareils
(smartphone par exemple) ou applications

Données collectées par l'activité

E. Les paramètres de confidentialité de Google, trop compliqué pour Google !

Capture d'écran d'un article des Numériques

L'article en question : https://www.lesnumeriques.com/vie-du-net/google-avoue-ne-rien-comprendre-a-ses-parametres-de-
confidentialite-n153735.html

5. Complément à lire : Les MétaMoteurs de Recherche
A. Définition selon Wikipédia
Un métamoteur (ou méta-moteur) ou un méta-chercheur est un moteur de recherche qui puise ses informations à travers
plusieurs moteurs de recherche généralistes, classiquement Google, Bing ou Yahoo!.
De manière plus précise, le métamoteur envoie ses requêtes à plusieurs moteurs de recherche et retourne les résultats de chacun
d'eux. Le métamoteur permet aux utilisateurs de n'entrer le sujet de leur recherche qu'une seule fois tout en accédant aux
réponses de plusieurs moteurs de recherche différents.
Un métamoteur élimine les résultats similaires ; par exemple, si Google et Yahoo! renvoient sur les deux mêmes liens, le
métamoteur ne va l'afficher qu'une seule fois dans la liste des résultats.
Certains indiquent de quels moteurs de recherche provient chaque résultat, tels qu'Ixquick (avec des étoiles et une infobulle) et
Seeks (avec les logos respectifs et des infobulles). Enfin, un métamoteur trie les résultats pour fournir en premier les pages
fournies par plusieurs moteurs. Certains métamoteurs permettent en outre de mélanger une fonction annuaire (les résultats sont
classés par thèmes) et une fonction moteur. Cela permet d'avoir une double vue sur les résultats.
B. Les moteurs de recherches 'écologiques'
Dans le lycée, on nous reproche souvent de ne pas utiliser un moteur de recherche 'écologique', qui 'plante des arbres' ou qui
financent des projets sociaux ou environnementaux.
On peut citer Ecosia ou Lilo. Ces 2 services sont en réalité des méta-moteurs de recherche qui sont financés par les moteurs de
recherches ou les publicités.

C. Consommation énergétique
Une requête HTTP sur un moteur de recherche consomme de l'énergie, donc, utiliser ces moteurs de recherche consomme plus
d'énergie (puisque plusieurs requêtes) qu'un vrai moteur de recherche, du type Qwant, un des moteurs de recherche qui respecte
le plus votre vie privée.

D. Pour aller plus loin
Cet article du journal Le Monde propose une étude intéressante "Que valent les moteurs de recherche écolos ?" :
https://www.lemonde.fr/videos/video/2020/09/16/que-valent-les-moteurs-de-recherche-ecolos_6052458_1669088.html

6. Quizz sur les moteurs de recherche...

Question ⑨ :

Il existe de nombreux moteurs de recherche sur le Web, mais connaissez-vous les principaux ?

Cocher les moteurs de recherche existants (et pas les méta-moteurs). Notez le(s) sur votre document réponses.

Vous avez bien sûr le droit de vous aider de Wikipédia (pour information, dans cette liste, il y a des moteurs de recherche et des
navigateurs web).

 Microsoft Bing  Yandex
 Microsoft Edge  Google Search
 Qwant Search  Baidu
 Safari  Mozilla Firefox
 Yahoo!  Lycos

Question ⑩ : Origine de 2 gros moteurs de recherche méconnus

Yandex est un moteur de recherche d'origine ……………….alors que Baidu est un moteur de recherche ……………………

Question ⑪ : À propos de Lilo ou Écosia...

Concernant les méta-moteurs "écolos", Lilo ou Ecosia, consomment-ils plus d'énergie qu'un moteur classique (Google, Qwant...)

 Oui
 Non
 Je ne sais pas....

7. Bonus : et son compte Google ?

Si vous possédez un compte Google (ne pas créer de compte Google pour ces questions), connectez-vous pour constater qu'en
mode connecté, la personnalisation va beaucoup plus loin :

 Accédez à la page de paramétrage https://myaccount.google.com/data-and-personalization, activez l'Activité sur le Web et
les applications, puis dans les paramètres de recherche sélectionnez les Résultats privés.

Testez alors une recherche Google du type le prénom et le nom d'un contact de votre téléphone, vous devriez voir apparaître des
résultats de recherche lié à ce contact.

 Accédez à la page de personnalisation des annonces https://adssettings.google.com/ , vous pourrez juger de la pertinence et
filtrer les Facteurs de personnalisation de vos annonces :

8. Pour aller plus loin... Histoire des moteurs de recherche

A l'aide de ces paragraphes empruntés à ces 3 articles Wikipédia, répondre aux questions ci-dessous sur votre document
LibreOffice joint.

Yahoo !

« À l'origine, Yahoo! est un annuaire Web, le Jerry and David's
Guide to the World Wide Web to Yahoo! (« Guide de David et de Jerry
pour le World Wide Web ») créé en janvier 1994 par Yang et Filo,
deux étudiants en ingénierie informatique à l'université Stanford qui

passent leur temps à surfer sur le Web naissant, possédant ainsi une
collection de sites intéressants qu'ils ont de plus en plus de mal à
répertorier. Dans le cadre de leurs études, ils décident alors d'utiliser les infrastructures de l'université pour répertorier et
catégoriser les autres sites web à travers un annuaire organisé par thèmes dans une logique d'index comme dans les
encyclopédies. Ils facilitent également la recherche des utilisateurs en créant un moteur de recherche qui permet de rechercher
des sites par mots-clés.

Le rétroacronyme « Yet Another Hierarchical Officious Oracle » créé en avril 1994 est souvent cité comme signification, mais ses
créateurs Jerry Yang et David Filo, qui devaient choisir un nom de projet commençant par un « Y » pour s'inscrire dans la

nomenclature des projets informatiques de l'université Stanford, affirment avoir choisi le nom à cause des « Yahoos », nom donné
aux humains dans le dernier des Voyages de Gulliver de Jonathan Swift. En moins d'un an, le trafic sur Yahoo est tel qu'il sature le
réseau de l'université et les autorités universitaires leur demandent de quitter le campus. Yang et Filo fondent alors leur propre
entreprise le 2 mars 1995 et acceptent la proposition de Marc Andreessen (co-fondateur de Netscape Communications à Mountain

»View, en Californie) d'héberger leur site sur les serveurs de Netscape.

AltaVista

«AltaVista ou Alta Vista (littéralement « vue haute » en espagnol) était un

moteur de recherche du World Wide Web. Il fut mis en ligne à l'adresse web
altavista.digital.com en décembre 1995 et développé par des chercheurs de
Digital Equipment Corporation. Il fut le plus important moteur de recherche
textuelle utilisé avant son rachat.

Bien qu'il y ait une polémique concernant l'auteur de l'idée originale, on
s'accorde à dire que les deux principaux contributeurs ont été Louis Monier, qui a écrit le Robot d'indexation, et Michael Burrows,
qui a écrit l'indexeur.

AltaVista a été le premier moteur de recherche capable d'indexer rapidement une bonne partie des pages web existantes et devint
immédiatement très populaire. Il fut également le premier moteur de recherche multilingue (la version française fut ouverte le 15
février 2000), ainsi qu'à lancer la recherche d'images, de fichiers audio et de vidéos. Le site offrait aussi un service internet gratuit
au public.

AltaVista fonctionnait, en 1998, sur 20 serveurs multiprocesseurs 64 bits Digital Alpha. Au total ces machines étaient dotées de 130

»gigaoctets de mémoire vive, de 500 gigaoctets d'espace de disque, et répondaient à 13 millions de requêtes par jour.

Google

«Les fondements de l'histoire de l'entreprise Google commencent par la

rencontre de deux étudiants de l'université Stanford en 1995. Sergey Brin alors
âgé de vingt-trois ans et Larry Page de vingt-quatre ans sont « pratiquement
en désaccord sur tout ». Cela ne les empêche pourtant pas, en janvier 1996, de
commencer à travailler sur un nouveau moteur de recherche.

Les fondateurs de Google, alors doctorants, observent la façon dont sont classés les résultats lorsqu'ils effectuent des recherches
dans les bases de données scientifiques. Ils constatent que l'exploitation des informations contenues dans la structure
hypertextuelle dépend de la nature des liens entre ces documents. Ainsi l'idée d'analyser les liens inter-documents reposait sur
l'observation d'une caractéristique de la littérature scientifique et aux modes d'organisation du Sciences Citation Index (SCI), qui
consiste à attribuer une valeur à une publication scientifique proportionnellement au nombre de publications qui la cite. Ce
principe revient aux travaux de Jon Kleinberg qui avait mis au point pour IBM l'algorithme HITS (Hyperlink –Induced Topic Search)
qui prenait en considération l'autorité d'une page en fonction du nombre de liens pointant vers elle. C'est donc en s'inspirant des
travaux de Jon Kleinberg que les deux étudiants mettent au point l'algorithme de classement des pages web appelé Pagerank. Cet
algorithme prend en considération les liens pointant vers une page comme un vote pour cette page. Plus une page recevrait de

vote, plus elle serait considérée comme étant pertinente et plus le vote de cette page, lorsqu'elle pointerait elle-même vers
d'autres pages, aurait de la valeur.

Ils nomment leur projet BackRub. Ils imaginent un logiciel qui analyserait les relations entre les sites web afin d'offrir des
meilleurs résultats que ceux donnés par leurs concurrents de l'époque, AltaVista notamment.

Une fois leurs travaux terminés, les deux étudiants commencent à concrétiser leur projet de moteur de recherche et achètent à
cet effet un téraoctet de disques durs d'occasion, afin de créer une base de données. Cette installation sommaire a pris place dans
la chambre de Larry Page. Sergueï loue un bureau et se met en quête de financements. David Filo, fondateur de Yahoo!, convient de

»l'intérêt de leurs recherches, mais les encourage à créer leur propre moteur de recherche plutôt que vendre leurs travaux.

 Question : Quels sont les 2 modèles de recherche d'information dans le Web qui sont apparus à la fin des années 90 ?
 Question : Comment AltaVista puis Google ont-ils pu imposer leur moteur de recherche ?

VI. Activité 3 - Sécurité et Vie Privée sur le Web

1. Introduction
Difficile de passer à côté de ces fameux cookies quand on parle de vie privée sur le web...

Les réponses à l'activité seront à compléter sur le document LibreOffice ci-joint : « Sujet_Eleve_-_Vie_Privee_Cookies.odt »
Les réponses seront dans le style de paragraphe Réponses élèves - Paragraphe ou le style de caractère Réponses élèves -
Caractères. Pour faire apparaître les styles, on peut cliquer, dans LibreOffice, sur la touche fonction F11. Pour appliquer le style, on
peut simplement double-cliquer sur le style. Ainsi, les réponses seront en italique et en vert.
Le nom du fichier LibreOffice sera le suivant : Nom1_Nom2_ViePrivee_Cookies.odt où Nom1 et Nom2 seront à remplacer par le nom
des binômes. Pas d'accents et pas d'espaces !
Le fichier sera rendu sur Pronote, dans le travail à faire qui sera lié à la matière SNT. Pour un binôme, il ne faudra rendre qu'un
seul fichier !
Bon travail en autonomie !
2. La CNIL

Question 1 :
En faisant une recherche sur Wikipédia (en 1 clic dans votre navigateur - Cf vidéo activité 2 ou ci-dessous), donner la signification
de l'acronyme CNIL.

 « Vidéo 3 - Recherche_Firefox.mp4 »

Le 21 mars 1974, le journal quotidien Le Monde révèle un projet gouvernemental souhaitant identifier chaque citoyen par un
numéro et d'interconnecter, via ce numéro, tous les fichiers de l'administration.
Cette révélation crée une vive émotion dans l'opinion publique !
Et c'est ainsi que la CNIL est née, portée par la loi relative à l'informatique, aux fichiers et aux libertés du 6 janvier 1978 qui
constitue le fondement de la protection des données à caractère personnel dans les traitements informatiques mis en œuvre sur le
territoire français.
Question 2 :
Toujours à partir de la page Wikipédia, quel est le rôle de la CNIL ?
Question 3 :
Quel règlement a été ensuite voté par le Parlement Européen le 14 avril 2016 ? Donner le nom et l'acronyme.
Question 4 :
À quelle date ce règlement a été effectivement appliqué ?
3. Mode de navigation privée

Lire l'article d'URL https://support.mozilla.org/fr/kb/idees-recues-sur-navigation-privee et répondre aux 2 questions suivantes sur
votre document LibreOffice.
Question 5 :
Lorsque je navigue en mode privé, qui peut ou ne peut pas accéder aux traces numériques laissées pendant ma navigation ?
Question 6 :
Dans quelle·s situation·s ce mode peut-il constituer une protection intéressante de
mes données personnelles ?

 Methode : Activer la fenêtre de navigation en mode privée

 Raccourci clavier : CTRL + MAJ + P
 Menu contextuel de Firefox :

4. Bien comprendre les cookies

Extrait du site https://www.logicielmac.com/

 Visionnez la vidéo « Comment j’ai attrapé un cookie.mp4 » et répondre aux questions suivantes.

Question 7 :
En informatique, qu'appelle-t-on un cookie ?
Question 8 :
Les cookies sont-ils bons ou mauvais pour l’internaute ?
Question 9 :
Comment peut-on bloquer les cookies déposés par les sites tiers ?
Question 10 :
L'utilisation de cookies par les sites Web est-elle réglementée ?
Question 11 :
En utilisant l'outil capture d'écran, réaliser une capture du paramétrage par défaut du
blocage du pistage sur le Web (également appelés Traqueurs - les mauvais cookies - )
dans Firefox.
Il faudra, pour cela, vous rendre dans les Préférences ou Paramètres du navigateur (cf
image ci-contre), puis le sous-menu Vie Privée et Sécurité.
Quels sont les cookies bloqués par défaut ?

 Méthode : Visualiser les cookies de son ordinateur

Dans le menu latéral de Mozilla Firefox, sélectionner le menu Modules complémentaires et installer l'extension Disconnect. Cette
extension du navigateur (ou add-on en anglais) permet de visualiser et filtrer les tentatives de dépôts de cookies et autres
traceurs par des sites tiers lorsqu'on accède à une page web.
Dans la barre d'adresse du navigateur, saisir l'URL du site web du journal régional Le Progrès : https://www.leprogres.fr/ et
observer les requêtes de sites tiers interceptées par Disconnect.

Visualisation des cookies LeProgres.fr

Question 12 :
Combien de requêtes de sites tiers ont-elles été recensées par Disconnect ? Quelle est la différence entre les sites cerclés de
rouge et ceux cerclés de gris ?
Cliquer sur la petite icône du cadenas (à côté de l'URL du site - adresse web -) et sélectionner Effacer les cookies et les données de
ce site. Rafraîchir ensuite la page avec un appui sur la touche fonction F5 et un bandeau d'avertissement légal (et obligatoire)
devrait s'afficher sur la politique du site à propos des cookies :

Cliquer sur le bouton En Savoir Plus -> dans le bandeau, et répondre aux questions suivantes à partir des informations sur le
respect de la vie privée affichée par le site.

Question 13 :
Quelles sont les différentes utilisations de données effectuées par ce site et ses partenaires que vous pouvez immédiatement lire
sur ce bandeau ?
Question 14 :
Quels sont les paramétrages possibles pour l'utilisateur ?
Question 15 :
Ce site respecte l'obligation légale de demande de consentement pour le dépôt de cookies sur la machine du visiteur, mais pensez-
vous que celui-ci est bien informé lors de sa première visite ?
Choisir un paramétrage et cliquer sur le lien d'URL https://www.leprogres.fr/protection-des-donnees situé tout en bas de la page
puis lire la note d'information
Question 16 :
Quels sont les arguments du site pour déconseiller le blocage des cookies ?
Une source de revenus...
Le site n'en fait pas mention, mais placer des cookies permet donc de revendre vos informations personnelles à des sociétés
tierces qui en font un commerce afin de vendre de la publicité ciblée. Cette vente est une des sources de revenus des sites
d'actualités. C'est pourquoi, de plus en plus de sites web, proposent des abonnements payants en limitant les mauvais cookies sur
leur site.

Méthode : Automatiser le refus des mauvais cookies !

À travers votre expérience de navigation sur le web, c'est souvent chronophage de refuser les mauvais cookies. Automatisons ce
processus à travers l'installation d'un module complémentaire sur Firefox :
 Télécharger et installer le module complémentaire Consent-O-Matic dans Firefox.
 Se rendre sur un site qui demande à l'utilisateur d'accepter les cookies, exemple le site de tests de produits technologiques :

https://www.lesnumeriques.com/
 Que remarquez-vous ?
Faites valider par votre enseignant.
Question 17 :
Toujours sur la page du Progrès (https://www.leprogres.fr/protection-des-donnees), dans la partie Désactiver le suivi d'audience, il
est noté Google Analytics avec un lien. Cliquer sur ce lien.

 Que permet Google Analytics ?
 Que constatez-vous ?
 Est-ce que vous êtes surpris par la proposition de Google ?

5. Sécurité minimale dans un navigateur
A. Fonctionnement du protocole HTTP

Le protocole HTTP permet d'échanger des pages Web dans une interaction entre un client (le navigateur web) et le serveur sur
internet :

Schéma d'une requête classique et simple

Mais attention, il s'agit d'un protocole non chiffré c'est-à-dire que toutes les données sont transférées en clair entre le client
(généralement le navigateur) et le serveur.
C'est pourquoi il a été inventé le protocole HTTPS dont la vidéo ci-dessous vous permettra de comprendre pourquoi il est
nécessaire.

B. Le nouveau protocole : HTTPS

 Visionner la vidéo suivante : « Vidéo 5 - A quoi sert un site sécurisé en https ?.mp4 »

Pour sécuriser HTTP, on ajoute donc désormais une surcouche permettant
 d'une part d'authentifier le serveur par le biais d'un certificat numérique (certificat SSL) délivré par une autorité de
sûreté
 et d'autre part de chiffrer les requêtes HTTP avec une clef de chiffrement symétrique.
La combinaison d'un protocole de chiffrement (SSL puis
désormais TLS) avec HTTP constitue le protocole HTTPS
matérialisé par un cadenas vert dans la barre de recherche
des navigateurs.

Connexion sécurisés avec le site des Impôts

Question 18 :
Après avoir écouté la vidéo, saisir l'URL https://www.lemonde.fr/ dans la barre d'adresse
Est-ce que le site Le Monde utilise le protocole HTTPS ?
Comment est-ce matérialisé dans le navigateur ?
Dans le navigateur Firefox,

1. Saisir l'URL https://www.lemonde.fr/ dans la barre d'adresse
2. En utilisant le menu latéral de Firefox, ouvrir la fenêtre d'outils de développement web
3. Puis sélectionner le menu Réseau.
4. Recharger la page avec le bouton qui est apparu
5. Sélectionner la première requête qui a abouti, un nouveau menu apparaît sur la droite.
6. Répondre aux questions ci-dessous :
Question 19 :
Que représente le code d'état 200 (onglet En-têtes) ?

Onglet En-Têtes d'une requête

Onglet Sécurité d'une requête

Question 20 :
Dans l'onglet Sécurité, se trouvent les informations sur le chiffrement par TLS. Quelle est la version du protocole et quel est
l'algorithme de vérification de la signature du certificat ? et la période de validité du certificat ?
Question 21 :
Quel est le risque, quand on rentre un identifiant et un mot de passe sur un site web, qu'il ne soit pas en HTTPS (avec le cadenas
vert) ?
Question 22 :
Rédiger une conclusion générale sur l'activité :
 ce que vous avez appris,
 ce qui vous a plus, déplu,
 ce qui vous a surpris,
 ce qui pourrait changer dans votre comportement sur le web...