Livret « Le web - ac-rouen.frmaths.spip.ac-rouen.fr/IMG/pdf/livret_snt_web.pdf · 2019. 11. 11. · Académie de Rouen — Formations 2019 Auteur : Laurent Cournil Le Web Création

Sciences Numériques et Technologie

Livret « Le web »

Soutien aux formations assurées dans l’Académie de Rouen en mai 2019

Préambule

Depuis la publication du Bulletin officiel spécial n°1 du 22 janvier 2019, l’enseignement de sciences numé-riques et technologie (SNT) est officiellement programmé pour la classe de seconde générale et technolo-gique dès la rentrée 2019. A destination des enseignants susceptibles d’enseigner cette nouvelle discipline,une formation de 4 journées a été prévue dans l’Académie de Rouen, répartie entre mai 2019 et oc-tobre 2019. Sous l’impulsion de plusieurs corps d’inspection, des professeurs de collèges et de lycées del’académie rouennaise se sont impliqués dans la conception de cette formation.

Ce livret regroupe une partie du contenu de cette formation. Ce document est donc destiné à des en-seignants et donne des pistes de réflexion, sans donner, pour autant, systématiquement, des activitésfournies clé en main. Ce recueil ne se veut pas être un modèle exclusif d’activités à mener avec ses élèvesmais est le fruit de travaux de professeurs, de disciplines variées, ayant réfléchi sur un thème particulier.La compilation de ces productions servira de support de travail lors des formations. Selon les sensibilités(matière d’origine, expertise dans un thème...) de chaque concepteur d’activités, les contenus sont d’uneapproche et d’un niveau différents. Le choix a été de conserver cette hétérogénéité car les enseignants,destinataires de cette formation, n’ont justement pas la même homogénéité de connaissances et ce livretespère, ainsi, satisfaire le plus grand nombre. Ce recueil conserve toutefois la perception officielle de cetenseignement : « L’enseignement de sciences numériques et technologie en classe de seconde a pour objetde permettre d’appréhender les principaux concepts des sciences numériques, mais également de permettreaux élèves, à partir d’un objet technologique, de comprendre le poids croissant du numérique et les enjeuxqui en découlent ». Il n’est donc pas question de trouver, ici, des activités expertes mais plutôt de quoienrichir la culture numérique de tous les élèves.

Dans le cadre de cet enseignement, sept thématiques sont au programme :• Internet• Le Web• Les réseaux sociaux• Les données structurées et leur traitement• Localisation, cartographie et mobilité• Informatique embarquée et objets connectés• La photographie numérique

Une thématique transversale est l’algorithmique par l’utilisation de Python. Pour plus d’informations à cesujet, le lecteur est invité à consulter le livret de formation sur Python que le pôle de compétences demathématiques de l’Académie de Rouen a créé pour les formations académiques 2018 dans le cadre desprogrammes de seconde.

Ce livret traite principalement du thème « Le Web » même si par transversalité, d’autres thèmes pourrontêtre abordés.

Ce recueil est téléchargeable sur le site académique de Rouen à l’adresse suivante :http://maths.spip.ac-rouen.fr/spip.php?article784.

Outre ce document, y sont entreposés des compléments comme des approfondissements, des corrections,des fichiers Python, une sitographie, certaines activités nationales... Notamment, tous les fichiers évoquésdans les activités de ce livret, suivis d’un astérisque (∗), seront téléchargeables sur le site académique deRouen à l’adresse ci-dessus.

2

https://www.education.gouv.fr/pid285/bulletin_officiel.html?cid_bo=138143

http://maths.spip.ac-rouen.fr/spip.php?rubrique149

http://maths.spip.ac-rouen.fr/spip.php?article784

Afin de faciliter l’usage de ce livret, sont listés ci-dessous, les contenus et capacités attendues dans leprogramme de SNT. Même si ce tableau est donné à titre indicatif et que ses informations sont reprises,adéquatement, dans chaque activité, il ne remplace pas le contenu explicite du programme de SNT.

Contenus Capacités attendues

Repères historiques Définir les étapes du développement du Web.Hypertexte Maîtriser les renvois d’un texte à différents contenus.

Langages HTML et CSSDistinguer ce qui relève du contenu d’une page et de son style deprésentation.Étudier et modifier une page HTML simple.

URLDécomposer l’URL d’une page.Reconnaître les pages sécurisées.

Requête HTTP Décomposer le contenu d’une requête HTTP et identifier les pa-ramètres passés.

Modèle client/serveur Inspecter le code d’une page hébergée par un serveur et distinguerce qui est exécuté par le client et par le serveur.

Moteurs de recherche : principeset usages

Mener une analyse critique des résultats fournis par un moteur derecherche.Comprendre que toute requête laisse des traces.

Paramètres de sécurité d’un naviga-teur

Maîtriser les réglages les plus importants concernant la gestiondes cookies, la sécurité et la confidentialité d’un navigateur.

Exemples d’activités

• Construire une page Web simple contenant des liens hypertextes, la mettre en ligne.• Modifier une page Web existante, changer la mise en forme d’une page en modifiant son CSS. Insérer

un lien dans une page Web.• Comparer les paramétrages de différents navigateurs.• Utiliser plusieurs moteurs de recherche, comparer les résultats et s’interroger sur la pertinence des

classements.• Réaliser à la main l’indexation de quelques textes sur quelques mots puis choisir les textes corres-

pondant à une requête.• Calculer la popularité d’une page à l’aide d’ un graphe simple puis programmer l’algorithme.• Paramétrer un navigateur de manière qu’il interdise l’exécution d’un programme sur le client.• Comparer les politiques des moteurs de recherche quant à la conservation des informations sur les

utilisateurs.• Effacer l’historique du navigateur, consulter les cookies, paramétrer le navigateur afin qu’il ne garde

pas de traces.• Utiliser un outil de visualisation tel que Cookieviz pour mesurer l’impact des cookies et des traqueurs

lors d’une navigation.

3

https://cache.media.education.gouv.fr/file/SP1-MEN-22-1-2019/08/5/spe641_annexe_1063085.pdf

https://cache.media.education.gouv.fr/file/SP1-MEN-22-1-2019/08/5/spe641_annexe_1063085.pdf

Table des matières

Création d’un site Web 5

Fiche élève . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5Langage HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5Habillage CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Fiche professeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Du Web aux réseaux sociaux 15

Fiche élève . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15Découverte de HTML et CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Fiches professeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18Découverte de HTML et CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18Du Web aux réseaux sociaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Réputation d’un site Web 21

Fiche élève . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21Fiche professeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

Moteurs de recherche 28

Fiche élève . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28Fiche professeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Synthèse du contenu des activités 32

4

Sciences numériques et technologie

Académie de Rouen — Formations 2019Auteur : Laurent Cournil

Le Web Création d’un site Web

Partie 1 — Langage HTML

Fiche élève

Présentation d’une page HTML simple

« HTML » est un acronyme pour Hyper Text Markup Language. Les pages des sites Internet sont écritesdans ce langage, et les navigateurs l’interprètent pour mettre en forme les pages.

Langage balisé

« Markup Language » signifie « langage balisé » : des balises permettent aux navigateurs comment inter-préter le texte.

Ainsi, comme dans l’exemple ci-contre :• tout fichier HTML commence par une la balise

<html> et se termine par </html> ;• comme il existe plusieurs versions du langage

HTML, on « dit » au navigateur lequel est utiliségrâce à la déclaration : <!DOCTYPE html> ;

• les balises <head>...</head> encadrent l’en-tête du fichier, où sont regroupées des infor-mations techniques, dont le titre de la page(<title>...</title>) et l’encodage des carac-tères (dans une balise orpheline <meta>) ;

• ce qui apparaîtra sur l’écran est balisé par<body>...</body> ;

• le titre du texte est balisé par <h1>...</h1> ;• les paragraphes sont balisés par <p>...</p>.

<!DOCTYPE html>

<html>

<head>

<title>Titre de la page</title>

<meta charset="UTF-8">

</head>

<body>

<h1>Le titre du texte</h1>

<p>

Un paragraphe, avec

<a href="URL"> un lien </a>

</p>

</body>

</html>

Hypertexte

Toujours dans l’acronyme « HTML », « Hyper Text » signifie que le texte est enrichi par des liens versd’autres fichiers. C’est le rôle des balises :

<a href="URL"> texte du lien </a>

Explications / vocabulaire

• href="URL" est un paramètre ; href signifie « hypertext reference ».• La valeur de ce paramètre est un URL (Uniform Ressource Locator) : c’est l’adresse de la page Web

vers laquelle pointe le lien.• Le texte du lien, entre les balises <a> et </a>, décrit le lien, selon le choix du rédacteur de la page.

Exemple :<a href="http://lycees.ac-rouen.fr/prevert/">Site du lycée Prévert</a>

5

Premiers tests

1. Depuis le réseau du lycée (à préciser : ENT, partage. . .), télécharger le fichier « site.zip∗ » et ledécompresser.

2. Ouvrir alors le fichier « pascaline.html » :• dans le navigateur Firefox ;• dans l’éditeur de texte Notepad++ (ou tout autre éditeur de texte adapté, mais surtout pas Word

ou LibreOffice).

3. Dans Notepad++, modifier le titre de la page (balises <title>...</title>). Enregistrer le fichier,puis actualiser la page dans Firefox (touche F5 ). Repérer où s’affiche ce titre.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4. Repérer les balises ci-dessous dans le fichier, et décrire leur action ; si elles ne sont pas présentes, les

ajouter avec du texte de test.Ne pas hésiter à modifier le fichier, à mener tous les tests nécessaires. Les autres fichiers du dossierpeuvent être utilisés : images, fichiers HTML. . .

Balises Description

<h1>...</h1> Titre principal

<h2>...</h2>

<h3>...</h3>

<p>...</p> Paragraphe

<a href="...">...</a>

<strong>...</strong>

<em>...</em>

<br>

(balise orpheline)

<img src="...">

(balise orpheline)

<ul>

<li>...</li>

<li>...</li>

</ul>

<ol>

<li>...</li>

<li>...</li>

</ol>

6

5. Il existe deux sortes de liens dans la page « pascaline.html » :• des liens relatifs, s’adressant à des fichiers situés dans le même dossier que le fichier source ;• des liens absolus, s’adressant à des URL situés sur le Web.Donner un exemple de chaque type de lien.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6. Ouvrir les deux autres fichiers HTML du dossier, et les compléter avec :• du texte associé au titre, une image si possible (à rechercher sur le Web) ;• des liens vers des pages Wikipédia donnant des compléments d’information ;• des liens vers les autres fichiers HTML du dossier.Vérifier, dans Firefox, la cohérence de l’ensemble des trois fichiers du dossier : aucun lien ne doit êtrebrisé ou mal défini.

Travail à faire chez soi

Page suivante, sont listés des scientifiques, des objets, des concepts.1. Choisir un des sujets listés ; le déclarer au professeur, de sorte que chacun ait son sujet dans la classe.

Noter les noms des rédacteurs des autres sujets, pour pouvoir échanger en cas de problème.

2. Rédiger un fichier HTML sur le modèle de pascaline.html.Le nom du fichier doit être exactement celui indiqué dans la 2e colonne.Le texte doit être court, présentant clairement le sujet, sans détails inutiles mais avec un repéragechronologique clair ; pas de copier-coller d’un texte existant.Les liens vers les sources documentaires (pages Wikipédia ou autres) doivent être présents.Les liens vers d’autres pages, réalisées par les autres membes de la classe, peuvent être préparés enutilisant les noms des fichiers (2e colonne du tableau). Ces liens seront vérifiés lors du prochain cours.

3. Déposer le fichier dans le casier ENT du professeur.

7

Liste des sujets à traiter

Thème Nom du fichier Nom - Prénom du rédacteur

Alan Turing turing.html

Premier microprocesseur IBM ibm.html

Machine Enigma enigma.html

Tim Berners Lee tbl.html

Réseau Arpanet arpanet.html

Le télégraphe telegraphe.html

Le téléphone telephone.html

La fibre optique fibre.html

Premier satellite de communication satellite.html

La radio radio.html

La télévision tv.html

Le moteur de recherche Google google.html

Le moteur de recherche Qwant qwant.html

Facebook facebook.html

Tweeter tweeter.html

Mastodon mastodon.html

Microsoft microsoft.html

Linus Torvalds linus.html

Wikipédia wikipedia.html

Richard Stallman stallman.html

Pong pong.html

IBM PC pc.html

Linux, GNU / Linux linux.html

Windows windows.html

Mac OS macos.html

Android android.html

La Commission Nationale Informatique etLibertés (CNIL)

cnil.html

Le GPS gps.html

Les navigateurs Web historiques navigateurs.html

8



Le Web Création d’un site Web

Partie 2 — Habillage CSS

Fiche élève

Site « Repères chronologiques » : synthèse et vérification des liens

1. Depuis l’espace Classe / Travail du réseau, télécharger le fichier « site.zip 1 ». et le décompresser :il comporte l’ensemble des pages HTML réalisées par la classe lors de l’activité précédente, plus unfichier index.html.

2. Ouvrir le fichier « index.html avec Firefox, et vérifier le lien vers votre propre fichier.Depuis votre fichier, vérifier également les liens vers les pages rédigées par vos camarades.

3. Ouvrir votre fichier avec Notepad++ (ou tout autre éditeur de texte adapté). Ajouter un lien vers« index.html », intitulé « Retour au sommaire ». Vérifier son fonctionnement.

Habillage CSS

1. Dans l’en-tête (entre les balises <head> et </head>), ajouter la ligne :<link rel="stylesheet" href="style.css">

Enregistrer et recharger la page dans Firefox. Que se passe-t-il ?1. Dans Notepad++, ouvrir le fichier « style.css » : son

but est d’adapter l’aspect de la page, son style, à l’aide de« feuilles de style en cascade » (cascading style sheets ouCSS).Chaque balise HTML peut ainsi être paramétrée, commecelle ci-contre.Tester différents styles à l’aide des exemples du tableauci-dessous. À chaque changement, enregistrer le fichier« style.css », puis recharger votre page dans Firefox.

h1 {

font-family: sans-serif;

font-style: normal;

font-size: 2.5em;

font-weight: bold;

color: blue;

text-align: center;

}

Paramètre Valeurs possibles

font-family sans-serif, serif, monospace, Arial, Helvetica, Times. . .

font-style normal, italic

font-weight normal, bold

font-size taille de référence : 1em, correspondant à 16 pixels

text-align left, right, center, justify

color Raccourcis : red, blue, yellow, green, white, black, silverou codage RVB (exemple : #ff00ff)https://www.w3schools.com/colors/colors_names.aspbackground-color

1. Fichier dépendant du travail fourni dans la partie 1

9

https://www.w3schools.com/colors/colors_names.asp

Structurer la page avec <div> et les classes CSS

La balise <div> est particulière : elle permet de créer des zones différentes dans la page. Les <div>

peuvent être imbriquées les unes dans les autres, et différenciées, de sorte que chacune ait un style CSSpropre.

1. Ouvrir le fichier « pascaline.html » dans Note-pad++, et ajouter les balises <div class="page">

et </div> de sorte qu’elles englobent tout le contenude la page (voir ci-contre).

<body>

<div class="page">

<h2>Les repères ...</h2>

<h1>La Pascaline</h1>

...

</div>

</body>

2. Dans le fichier « style.css », ajouter les lignes ci-contre.Sauvegarder les deux fichiers, ouvrir« pascaline.html » dans Firefox : quels change-ments ont eu lieu ?

div.page {

width: 500px;

margin-left: auto;

margin-right: auto;

background-color: darkorange;

}

3. Dans « pascaline.html », créer les deux <div> suivantes :• <div class="liens_externes"> contenant la partie « Pour aller plus loin » avec tous ses liens ;• <div class="liens_internes"> contenant la partie « Autres précurseurs des ordinateurs » avec

tous ses liens.Créer alors les styles CSS correspondants dans « style.css ». Des aides sont disponibles ci-dessous.

Paramètre Exemples de valeurs possibles

margin-top10px, 1em. . .

margin-bottom

margin-left10px, 0px, auto

margin-right

border-width 1px, 2px, none

border-color voir tableau précédent

border-style solid, dotted, dashed, double, groove. . .

Pour la prochaine séance

Reprendre votre fichier HTML et le fichier « style.css » que vous avez modifié.

Modifier le nom de celui-ci : il doit porter le même nom que le fichier HTML.Exemple : « pascaline.html » et « pascaline.css ».

Dans votre fichier HTML, modifier la ligne <link> de l’en-tête en remplaçant style.css par le nom devotre fichier CSS.

Finaliser l’habillage CSS de votre page, et déposer les deux fichiers dans le casier de votre professeur.

10



Le Web Création d’un site Web Fiche professeur

Contenus et capacités


Repères historiques Définir les étapes du développement du Web.

Hypertexte Maîtriser les renvois d’un texte à différents contenus.

Langages HTML et CSS Distinguer ce qui relève du contenu d’une page et de sonstyle de présentation. Étudier et modifier une page HTMLsimple.

Modèle client/serveur Inspecter le code d’une page hébergée par un serveur etdistinguer ce qui est exécuté par le client et par le serveur.

Modalités

Deux séances, moins d’une heure chacune, plus un temps de synthèse.

Demi-classe devant ordinateurs, possibilité de travailler à deux ; la synthèse peut être faite en classe entière.

Travail à compléter d’une séance sur l’autre ; le professeur se charge de la collecte des fichiers, de leurorganisation, et de la rédaction d’une page HTML de sommaire.

Les logiciels cités sont Firefox (navigateur Internet) et Notepad++ (éditeur de texte). On peut bien sûrfaire d’autres choix. Attention, cependant à ne pas confondre éditeur de texte et traitement de texte :un éditeur ne fait pas de mise en page, ne transforme pas le texte, il a pour but de produire du code.Proscrire Word, LibreOffice et OpenOffice.

Descriptif

Les trois fichiers zippés « site1.zip∗ », « site2.zip∗ » et « site3.zip∗ » présentent, pour les besoinsd’illustration de la formation, trois états successifs du mini-site « site1.zip » évoqué dans les deux fichesélève.

Séance 1 : langage HTML

En examinant trois fichiers exemples, les élèves s’initient au langage HTML : balises, en-tête, corps, liens.Fichiers : voir dossier zippé « site1.zip∗ ».

Le travail est ensuite réparti entre les élèves en fin de séance : ils doivent rechercher du contenu pourrédiger une courte page de présentation d’un thème imposé, sur le modèle du fichier examiné en classe.

Le but est de réaliser, en collectant tous les fichiers, un mini-site sur les repères historiques du numérique.

Le professeur collecte tous les fichiers, et rédige la page d’accueil du site (« index.html ») pour la séancesuivante.

11

Séance 2 : habillage CSS

Les élèves récupèrent l’ensemble du site : la page « index.html » et toutes les pages rédigées par leurscamarades. Ils vérifient la cohérence des liens, ajoutent un lien de retour au sommaire et des liens entrepages, si nécessaire.Fichiers : voir dossier zippé « site2.zip∗ ».

Reprenant le fichier qu’ils ont rédigé, les élèves ajoutent une feuille de style CSS, fournie par le professeur.Ils modifient cette feuille de style avec les éléments de base fournis par l’énoncé du TD. On peut lancerun concours de la plus belle présentation. . .

Ce travail d’habillage peut se finir hors classe, la procédure de collecte des fichiers (HTML et CSS) par leprofesseur se répétant.

Synthèse

Version 1

Le professeur prépare, avec les fichiers collectés, un dossier contenant tous les fichiers : HTML, images,éventuelles, CSS. Il met à jour si nécessaire le fichier « index.html » de la deuxième séance.Le tout est vidéo-projeté et commenté. On peut envisager un vote pour élire le plus bel habillage CSS.

Version 2

Cette version nécessite de disposer d’un hébergement adapté sur un serveur, cette partie est donc à adapterselon les outils à disposition dans l’établissement.

Le professeur prépare, avec les fichiers collectés :• un dossier contenant tous les fichiers : HTML, images, éventuelles, CSS ;• un fichier « index.php », qui est identique au fichier « index.html » réalisé pour la deuxième séance,

mais sur lequel un formulaire et un script PHP permettent de changer d’habillage CSS.Fichiers : voir dossier zippé « site3.zip∗ ».

Le dossier est placé sur un serveur disposant d’Apache et de PHP : serveur interne à l’établissement,Raspberry Pi. . .

Lors de la synthèse en classe, le site est projeté ; chaque page a sa feuille de style, et on peut chargercette feuille pour la page d’index via le formulaire, ce qui permet de montrer un exemple d’interactionclient-serveur.

12

Informations supplémentaires pour le professeur : PHP

Le langage de programmation PHP permet de rédiger des pages HTML dynamiques : elles s’adaptentselon ce que demande l’utilisateur.

PHP et la sécurité

Un vrai site utilisant PHP nécessite de prendre beaucoup de précautions : un formulaire peut en effet êtredétourné pour transmettre des données visant à perturber le fonctionnement d’un site, le pirater. . .

Il n’est pas question d’aborder dans le cours de SNT, les notions de vérification des données transmises.L’exemple fourni est élémentaire et n’a pas à se retrouver en ligne — en tout cas, le moins longtempspossible.

Ajoutons qu’une production d’élève est soumise à autorisation parentale pour toute publication. Le siteproduit ici a donc encore moins vocation à se retrouver en ligne, accessible de l’extérieur de l’établissement.

Examen du formulaire et du script PHP de l’activité

1. Le formulaire (ci-contre) est entièrementen HTML ; il transmet au serveur une va-leur (1, 2 ou 3 ici), associée à un nom devariable (styl).Un formulaire peut envoyer des donnéesà n’importe quelle page ; ici, en l’absencede paramètres à ce sujet, la page couranteest rechargée.

<form>

<select name="styl" size="5">

<option value="style1">Style 1</option>



</select>

<input type="submit" value="Envoyer">

</form>

2. Le script PHP (ci-dessous), au chargement de la page, récupère le contenu envoyé par le formulaire ;ce contenu est dans la variable d’environnement $_GET["styl"].

3. Le script alors produit le code HTML permettant de charger la feuille de style voulue : « style1.css »,« style2.css » ou « style3.css ».

<?php

if (isset($_GET["styl"])) // Si un formulaire a transmis des variables :

{

$nom_style = $_GET["styl"]; // on récupère le contenu de "styl"

}

else

{

$nom_style = "style1"; // sinon : valeur par défaut

}

// Assemblage de la balise link dans une variable

// opérateur de concaténation : le point

$lien_style = "<link rel=\"stylesheet\" href=\"" . $nom_style . ".css\">";

// Affichage de la balise

print $lien_style;

?>

13

Compléments sur la syntaxe PHP

• PHP est un langage à accolades, contrairement à Python (langage à indentation).

• Le début et la fin d’un script sont balisés par :<?php

... code ...

?>

• Chaque instruction se termine par un point-virgule.

• Les commentaires sont signalés par un double slash : //

• Tout nom de variable doit débuter par $.

• print est la commande permettant d’écrire une chaîne de caractère dans le code HTML produit ensortie.

• La condition, dans un if, doit être écrite entre parenthèses.

• Dans une chaîne de caractères, si on veut produire des guillemets, il faut les « échapper » pour lesdistinguer des guillemets encadrant la chaîne : on écrit donc « \" ».Ainsi la variable $lien_style est une concaténation de trois chaînes, dont deux contiennent desguillemets échappés :1. "<link rel=\"stylesheet\" href=\""

2. le contenu de la variable $nom_style

3. ".css\">"

Résultat du code HTML, si $nom_style contient style3 :

<link rel="stylesheet" href="style3.css">

14


Académie de Rouen — Formations 2019Auteur : Isabelle Pelletier

Le Web Du Web aux réseaux sociaux

1. Découverte de HTML et CSS

Fiche élève

Présentation, ouverture des fichiers

Ce TD a pour but de découvrir comment sont faites les pages web.Chaque page web est en fait un programme codé en langage HTML.

Contenu du dossier TD1CRIEE∗

Image

Style

contacts.html

index.html

visite.html

Ce dossier est à télécharger dans votre répertoire personnel sur le réseau dulycée.Il contient :• Image : les images du site ;• Styles : feuilles de styles utilisées ;• index.html, visite.html et contacts.html : les trois pages du site.

Ouverture de index.html de deux manières

Dans un navigateur

Ouvrir la page index.html dans un navigateur :Firefox ou autre.

Dans un éditeur

Ouvrir la page index.html dans un éditeur detexte : Notepad++ ou autre.

15

Modification des pages HTML du site

1. Modifier la page index.html afin d’afficher l’image port.jpg en remplacement de l’imagecrieepoulgoazec.jpg.

2. Modifier la liste à puces ci-dessous, à gauche afin de rajouter la ligne « financée à 85% par la région »et d’obtenir le résultat de droite.

Avant

La criée de POULGOAZEC est :• située sur la commune de Plouhinec (29)• constituée de 48 bateaux

Après

La criée de POULGOAZEC est :• située sur la commune de Plouhinec (29)• constituée de 48 bateaux• financée à 85% par la région

3. Ouvrir la page visite.html dans l’éditeur et ajouter unhoraire de visite le vendredi à 8 h afin d’obtenir le résultatci-contre.

Les Horaires

Jours Heures de rendez-vousLundi 7 heuresJeudi 8 heuresVendredi 8 heures

4. Sur les pages index.html et visite.html, ajouter le lien hypertexte qui permet d’ouvrir la pagecontacts.html quand l’utilisateur clique sur l’option « contacts » du menu.

Modification de la feuille de style du site

La ligne 7 de chacun des fichiers HTML est un commentaire. Un commentaire se paramètre ainsi :<!--̇commentaire--̇>

1. Modifier la ligne 7 dans les pages index.html et visite.html en supprimant les marques de com-mentaire afin de faire le lien entre les pages HTML et la feuille de style.

2. Enregistrer le travail puis visualiser les pages du site dans le navigateur.

3. Visiter la page en passant la souris sur les liens. . .Que remarque-t-on ?

4. Ouvrir la page style1.css dans l’éditeur de texte.Modifier la couleur d’arrière-plan des pages du site.

5. Modifier la puce des listes afin d’obtenir le résultatci-contre.

6. Modifier le style de la bordure du bloc « section ».

• Accueil• Visite de la criée• Contacts

La criée de POULGOAZEC est :• située sur la commune de Plouhinec (29)• constituée de 48 bateaux

16

Pour aller plus loin

Document HTML

Dans la page d’accueil, se trouve un lien vers la page visite.html qui présente toutes les activités dela criée. M. Rivoire souhaite ajouter les contacts à la fin de la page afin de permettre aux internautes detéléphoner pour se renseigner sur les visites.

1. Modifier la page visite.html, et insérer le texteci-contre au-dessus du tableau des horaires.

Le programme de la visite :1. Rendez-vous fixé au local de la Mairie an-

nexe sur le port.2. Projection d’une vidéo sur la pêche au bar.3. Visite de la criée.4. Débat avec les marins-pêcheurs.

2. Modifier la page visite.html, etinsérer le tableau ci-contre après letableau des horaires.

Nom Téléphone MèlM. Maréchal 06 65 34 87 56 [email protected]. Grumier 06 23 54 16 78 [email protected]

3. Tout comme cela a été fait pour les mots « description » et « horaires », faire en sorte qu’un clic sur lemot « contacts » conduise directement au tableau des contacts en bas de page.

Document CSS

1. Inverser les listes ordonnées pour obtenir la présentation ci-contre.

2. Compléter, modifier la présentation et la charte graphique selon vosgoûts !

A. Sorties en mer1. individuelles2. groupes

B. Visites de la criée

17



Le Web Du Web aux réseaux sociaux

1. Découverte de HTML et CSS

Fiche professeur





Modalités

Groupes de 3 élèves, sur ordinateur.Le mini-site étudié est déposé, au format zippé, sur un partage réseau ou sur l’ENT : TD1CRIEE.zip∗.

Descriptif

La séance a pour but d’introduire un projet plus approfondi, mené en parallèle entre les cours d’anglais etde SNT : voir la fiche suivante : « Compléter un site web en cours de création en Anglais ».Elle est consacrée à la découverte des langages HTML et CSS.

Les étapes

1. Échange avec le groupe sur le dossier étudié afin d’aborder rapidement les points suivants :• structure d’une page HTML ;• concept de balise : les balises de structure et les balises de texte ;• comment modifier une page : ajouter un paragraphe sur la page ;• comment afficher une page ;• afficher la feuille de style et effectuer une modification : trame de fond d’un bloc.

2. Travail en autonomie : effectuer des modifications simples sur le contenu (ajouter une ligne à un tableau,ajouter une ligne sur une liste à puces. . .) et sur la mise en forme (couleur de police, taille d’un bloc,modification d’une image, ajouter un lien hypertexte. . .).

18



Le Web

Réseaux sociaux

Du Web aux réseaux sociaux

2. Compléter un site web en cours de

création en Anglais

Fiche professeur





Réseaux sociaux existants Distinguer plusieurs réseaux sociaux selon leurs caractéris-tiques, y compris un ordre de grandeur de leurs nombresd’abonnés.

Modèle économique des réseaux sociaux Identifier les sources de revenus des entreprises de réseau-tage social.

Harcèlement numérique Connaître les dispositions de l’article 222-33-2-2 du codepénal.

Modalités

Groupes de 3 élèves, sur ordinateur ; une part en classe inversée.Projet mené par l’enseignant de sciences numériques et technologie et l’enseignant d’anglais.

Prérequis

Avoir déjà abordé les langages HTML et CSS, par exemple, via l’activité « Découverte de HTML et CSS ».

Descriptif

Cette séquence a été conçue à partir de mini-projets et d’activités réalisés avec une classe de seconde.

La collaboration avec l’enseignant d’anglais est due au contexte du lycée de l’auteure, qui propose dessections de classes européennes et l’option internationale du baccalauréat (OIB). Cette séquence peutparfaitement se réaliser en collaboration avec d’autres enseignants. Si une collaboration n’est pas possible,l’enseignant de SNT peut tout à fait mener le projet du début jusqu’à la fin.

Travail à réaliser par les élèves

Chaque groupe dispose d’un site web incomplet composé de 4 pages :• page d’accueil : définition, les différentes catégories de réseaux sociaux, les enjeux de la confidentialité

des données. . .• informations légales ;• deux pages : ces pages ne reprendront que les éléments communs et seront complétées par les élèves.

19

Chaque groupe devra réaliser deux pages afin de présenter le réseau social choisi :• présentation d’un réseau social : les objectifs, la catégorie, le nombre d’abonnés, le paramétrage pour

assurer la confidentialité des données personnelles, le modèle économique ;• harcèlement numérique : présentation des grandes lignes de l’article de loi ;• modification de la page d’accueil : ajouter dans la barre de navigation les liens vers les nouvelles pages.

Les contraintes

• Chaque page doit contenir au moins une image.• Un tableau et une liste à puces doivent être paramétrés.• Effectuer quelques modifications sur la charte graphique : couleur d’arrière-plan, bordures. . .

Remarques

La structure du site sera très simple. Les différents blocs (constructeurs) seront empilés verticalement afinde ne pas aborder les différentes possibilités de paramétrage pour des blocs juxtaposés. Ces concepts sontplus difficiles à appréhender (positions absolue, relative, float. . .).

Les étapes du projet

Cours d’anglais

Prendre connaissance de la page d’accueil du site et constituer un document collaboratif qui reprendra lespoints suivants :• trouver au moins un réseau collaboratif par catégorie ;• parmi la liste définie, choisir un réseau et effectuer le travail de recherche et de traduction qui va

permettre d’alimenter le site.

Cours Sciences numériques et technologie

Il est prévu que ce cours se fasse en classe inversée qui consiste à fournir aux élèves des documentsressources afin de pouvoir aborder, chez eux, les principaux concepts du HTML et du CSS. Certains deces points seront revus rapidement au début de la séance suivante en classe. Ces documents (vidéos etsupport écrits) sont en cours de réalisation et seront fournis ultérieurement. Ils permettront aux élèvesd’aborder entre autres les points suivants :• les outils pour créer et visualiser une page HTML,• le principe de séparation des données (HTML) et de la mise en page et mise en forme (CSS),• la structure d’une page HTML (doctype, html, head, body),• les balises sémantiques pour structurer une page (header, footer, section, article, aside. . .),• les balises de texte (p, h1. . .),• comment créer un tableau,• . . .

Sur poste informatique, travail individuel

Faire le point sur les concepts étudiés. Manipulations sur une page web et sur une feuille de style.

Sur poste informatique, travail en groupe

Réalisation du site internet sur les réseaux sociaux.

Améliorations possibles

• Visualisation d’un CMS comme WordPress afin de montrer qu’un site peut être réalisé rapidement,mais que lorsqu’il est nécessaire d’effectuer des modifications importantes sur la mise en forme ou lamise en page, les connaissances de HTML et CSS sont indispensables.

• Le droit à l’image : lors de la recherche d’images pour compléter le site, sensibiliser les élèves sur lesimages libres de droit, comment effectuer cette vérification et comment les rechercher sur le Web.

20



Le Web Réputation d’un site Web Fiche élève

Partie A — Robots explorateurs du Web

Principe de fonctionnement d’un robot d’indexation

Les moteurs de recherche doivent en permanence avoir en mémoire le plus grand nombre de pages Webpossible. Mais personne n’a pour mission de leur transmettre les informations concernant une nouvellepage. . . Par conséquent, les firmes comme Google, Qwant, Bing ou autre disposent de robots d’indexa-tion : ce sont des programmes qui parcourent le Web en suivant des liens hypertextes au hasard.

La mission de ces robots est double :• ils indexent (enregistrent) toutes les pages qu’ils peuvent trouver ;• ils relèvent tous les liens entre ces pages.

Travail à faire

Depuis le dossier Classes / Travail du réseau, télé-charger le fichier « site.zip∗ » et le décompresser.

Le dossier contient 13 pages HTML.

Choisir une de ces pages et l’ouvrir dans Firefox. Na-viguer alors dans l’ensemble des pages en suivant lesliens.

Compléter le graphe de la page suivante au fur et àmesure de la navigation.

Si, à un moment, un problème survient, il faudra fairepreuve d’initiative pour continuer. . . Et noter, sur pa-pier, quelle initiative a été prise !

Règles concernant les graphes orientésOn représente un lien entre deux pages par uneflèche, qui pointe vers la cible du lien.Exemple : dans site0.html se trouve le lien<a href="site4.html">Site 4</a>.Cela se traduit par :

0 41

Le nombre de liens est indiqué au-dessus dela flèche. Ainsi, ci-dessous, 2 liens partent dusommet 10 vers le sommet 3.

10 32

Un lien d’un sommet vers lui-même se traduitaussi par une flèche :

4

1

21

Graphe orienté

0

1

2

3

45

6

7

8

9

10

11

12

1

1

1

Initiative(s) prise(s) en cas de problème :

22

Partie B — Calcul de réputation : l’algorithme PageRank

Principe

Quand une requête est transmise à un moteur de recherche, celui-ci commence par extraire de sa base dedonnées l’ensemble des pages concernées par cette requête.Il lui faut ensuite classer ces pages. Pour cela, il va considérer l’ensemble des liens entre ces pages, pourdéterminer laquelle est la plus réputée : en effet, une page vers laquelle pointent beaucoup de liens estsans doute pertinente.

Dans la suite, on suppose que les pages renvoyées par la requête sont les 13 de la partie A.

1. On lance un robot explorateur sur cet ensemble de pages. Ilse déplace en suivant les règles suivantes :

• 85 fois sur 100, si la page sur laquelle il est comporte desliens, il suit un de ces liens au hasard ;

• 15 fois sur 100, et dans les cas où la page ne comporte pasde liens, il se téléporte sur une page au hasard.

Prenons l’exemple de la page site0.html de la partie A.Soient les événements suivants :• S : « le robot choisit un lien présent sur la page » ;• S est l’événement contraire ;• P0 : « le robot est sur la page site0.html » ;• P1 : « le robot est sur la page site1.html » ;• . . .• P12 : « le robot est sur la page site12.html ».

Compléter l’arbre pondéré ci-contre, et calculer la probabi-lité que le robot, à l’étape suivante, se retrouve sur la pagesite2.html.

Remarque : l’arbre n’est pas complet. . . Faute de place !

2. Que deviendrait cet arbre si le robot démarrait de la pagesite5.html ?

P0

S

. . .

P1

. . .

P2

. . .

P12

. . .

S

0, 15

P0

. . .P1

. . .

P2. . .

P12

. . .

23

Simulation d’un robot sous Python

Cette partie a pour but de simuler un robot explorateur de pages à l’aide de Python, et de le lancer ungrand nombre de fois sur l’ensemble de pages de la partie A.

1. Récupérer sur l’ENT le fichier calcul_reputation.ipynb∗ ; le recopier dans l’espace « Mes docu-ments » de l’ENT, et l’ouvrir.Compiler la première cellule de code, qui charge la bibliothèque random.

2. La première partie consiste en une modélisation des liens entre les 13 pages de la partie A, sous formede listes.Ainsi :• L[0] est la liste de tous les liens issus de la page site0.html.

Comme cette page contient un lien vers la page site1.html, trois vers la page site2.html et unvers la page site12.html, on obtient la liste :

L[0] = [1,2,2,2,12]

Compléter de la même manière les listes L[1] à L[12].Compiler la cellule.

3. La fonction exploration_robot ci-contre apour but de faire partir le robot de la pagedepart, et de lui faire réaliser nbEtapes sautsde pages en suivant les règles énoncées pageprécédente.Elle renvoie le numéro de la page sur laquellele robot se trouve à la fin de son périple.

Compléter les instructions manquantes.

Aides techniques• random() : renvoie un nombre aléatoire

entre 0 et 1.Ainsi le test random()<0.85 est vérifié avecune probabilité 0,85.

• len(...) : renvoie la longueur d’une liste.• choice(Sites) : renvoie un élément au ha-

sard de la liste Sites.

def exploration_robot(depart, nbEtapes):

r = ...

for k in range(...):

if random()<0.85 and len(...)>0:

r = choice(...)

else:

r = choice(Sites)

return r

Application

exploration_robot(0,50)

4. Tester, alors, la fonction 10 fois, en partant de la page 0 et en faisant 50 étapes. Relever les résultatsdans le tableau ci-dessous (ligne « Effectifs »).Une synthèse de tous les résultats de la classe sera faite au tableau : appeler le professeur quand lessimulations sont réalisées.

Page d’arrivée 0 1 2 3 4 5 6 7 8 9 10 11 12

Effectifs

Effectifs de la classe

Fréquences

24

5. La fonction stat ci-contre a pour but de généraliserl’étude précédente à un grand nombre d’explorationsdu robot.

Le robot est lancé nbExpl fois, en partant à chaquefois de depart et pour nbEtapes sauts de pages.

La liste Res devra contenir, à la fin, la liste des fré-quences d’arrivées sur chacune des 13 pages.

Exemple : si le robot a fait 1000 explorations etqu’il est arrivé 27 fois sur la page 4, alors Res[4]

contiendra la valeur 0,027.

Compléter les instructions manquantes, et tester lafonction plusieurs fois avec de grands nombres d’ex-plorations.

Que peut-on dire des fréquences obtenues ? Que sepasse-t-il si on change de page de départ ? Et si onchange le nombre d’étapes ?Reporter des approximations des résultats ci-dessous.

def stats(depart, nbEtapes, nbExpl):

# Initialisation de la

# liste des résultats

Res = []

for k in range(13):

Res.append(0)

# Simulation des

# explorations et comptage

for k in range(...):

r = ...

Res[r] = Res[r]+1

# Calcul des fréquences

for k in range(13):

Res[k] = ...

return Res

Application

stats(0,50,10000)

Page d’arrivée 0 1 2 3 4 5 6 7 8 9 10 11 12

Fréquences

6. Le rédacteur de la page site4.html est payé par celui de la page site12.html pour qu’il agisse enfaveur de sa réputation.Modifier L[4] en lui ajoutant un lien vers la page 12. Tester le calcul de réputation.Ajouter un lien vers 12 sur quelques autres pages.Commenter les résultats.

25



Le Web Réputation d’un site Web Fiche professeur



Moteurs de recherche : principes etusages

Mener une analyse critique des résultats fournis par un mo-teur de recherche.Comprendre les enjeux de la publication d’informations.

Modalités

Une séance en demi-classe (1h30), devant ordinateurs.La partie A peut être laissée en travail hors classe, pourvu que les élèves puissent travailler sur ordinateurchez eux.

Prérequis

Il serait bon d’avoir déjà abordé le langage HTML, de sorte que la syntaxe d’un lien ne soit pas unedécouverte (comme <a href="site4.html">Site 4</a> qui se trouve dans le code source des pageshtml du mini-site de la partie A).

Avoir déjà travaillé sur la notion de graphe, par exemple dans le thème Internet, ferait également gagnerdu temps sur la partie A.

Descriptif

Il s’agit d’étudier la notion de calcul de réputation d’un site Web par un moteur de recherche, sans entrerdans des justifications probabilistes.

La partie A introduit la notion de graphe orienté ; les élèves prennent le rôle d’un robot explorateur, etétablissent le graphe des liens entre treize pages Web.

La partie B pose le problème du calcul de réputation, selon l’algorithme historique PageRank (utilisé parGoogle).L’algorithme est décrit, le calcul de probabilités évoqué, puis un programme Python permet de simulerun grand nombre d’explorations du graphe de la partie A à l’aide d’un robot. Ainsi, sans avoir à menerdes calculs de probabilités complexes, on arrive à une stabilisation des fréquences d’arrivée du robot surchacune des pages du graphe.

La dernière question pose le problème des « fermes de liens », qui a obligé les moteurs de recherche àaffiner leurs algorithmes. En effet, des sites étaient créés spécialement pour héberger des liens vers d’autressites, qui les payaient pour ce faire ; la réputation des sites cibles en était augmentée. Ce type de pratiquea été pénalisé dans les évolutions de l’algorithme PageRank.Plus de renseignements sur : https://fr.wikipedia.org/wiki/Ferme_de_liens

26

https://fr.wikipedia.org/wiki/Ferme_de_liens

Complément théorique à destination des enseignants

L’étude de graphes probabilistes se fait à l’aide de matrices, de façon assez abordable en spécialité demathématiques de terminale S, encore en vigueur à la rentrée 2019.L’explication théorique est disponible sur le document d’accompagnement sur les matrices pour la spécialitémath de la série S, en 2012, pages 20 et suivantes.La stabilisation des fréquences observée ici est liée à une étude de convergence de puissances de matrices,qui est, largement, hors programme du lycée.

Graphe orienté : correction

0

1

2

3

45

6

7

8

9

10

11

12

1

3

1

11

1

1

1

1

1

11

1

1

2

1

1

1

2 1

1

1

1

1

1

1

2

27

http://cache.media.eduscol.education.fr/file/Mathematiques/20/8/LyceeGT_ressources_SpeMath_Matrices_218208.pdf


Académie de Rouen — Formations 2019Auteur : Alexis Lecomte d’après Maxime Fourny (Besançon)

Le Web Moteurs de recherche Fiche élève

Introduction

Etant donné l’énorme quantité de données disponibles sur Internet, la recherche d’information est rapide-ment devenue essentielle sur le Web. Ce n’est qu’en 1998 qu’un algorithme efficace est apparu (c’est-à-direrapide et pertinent), le PageRank, développé par Larry Page et Sergey Brin, qui ont ensuite fondé la sociétéGoogle.Lorsqu’un utilisateur fait une recherche, il envoie une requête au serveur du moteur de recherche, qui,parmi toutes les pages traitant du sujet, attribue un score de pertinence à chacune d’entre elles (appelé« PageRank » de la page, un score compris entre 0 et 1) afin de les classer et de les afficher à l’utilisateur.Nous allons illustrer cette méthode de classement sur des exemples simples.Elle repose sur le système d’hyperliens entre les pages et les deux principes suivants :• Le score d’une page est d’autant plus élevé lorsque celle-ci est référencée par une page ayant, elle-même,

un score élevé.• Plus une page contient de liens, moins le score des pages citées est élevé.

Principe :

On estime qu’on ne conserve du Web que les pages qui traitent du mot-clé de la recherche. Celles-ciauront (ou pas...) des hyperliens entre elles.

Exemple 1 :

On considère uniquement 4 pages (traitant d’un même mot-clé), représentées par le graphe suivant :

1 2

3 4

On peut l’interpréter de la façon suivante : la page 1 possède deux liens (vers 2 et 3), la page 2 n’enpossède qu’un seul (vers 3), la page 3 possède deux liens (vers 1 et 2) ainsi que la page 4 (vers 2 et 3).Afin d’attribuer un score à chaque page, on va procéder de la manière suivante : on choisit au hasard unepage que visite un utilisateur virtuel, puis on suit (également au hasard) un des liens que contient la page.On répète ce principe un grand nombre de fois en notant à chaque fois la page visitée.1. Choisir au hasard une page comme page de départ d’un utilisateur virtuel (qu’on nommera surfeur

aléatoire...)2. A l’aide de la calculatrice 2, simuler le déplacement du surfeur un grand nombre de fois, en prenant soin

de noter à chaque fois, sur quelle page il se trouve (on pourra compléter un tableau).3. Proposer un classement de ces 4 pages. Comparer alors avec les groupes voisins.

2. On utilisera la commande Int (accessible sur CASIO) depuis OPTN/NUM et Ran# accessible depuis OPTN/PROB :par exemple la commande Int(Ran#× 3+1) affiche un nombre entier aléatoire entre 1, 2 et 3 et Int(Ran#× 2+1) afficheun nombre entier aléatoire entre 1 et 2, etc.

28

Exemple 2 :

Voici un nouveau graphe :

1 2

3 4

1. Tenter de proposer un classement des 4 pages, à l’œil nu, en suivant les deux principes énoncés enintroduction.

2. Répéter le travail de l’exemple 1 et comparer le résultat des scores avec vos projections.

Autres exemples : limites de la méthode

Observez bien les graphes ci-dessous et répondez aux questions suivantes sans faire de simulation :

5 4

1

2 3

1 2

3 4

3 5

1 4

2

1. Pour le premier graphe, obtiendrait-on le même résultat à chaque simulation ? Expliquer.2. Quels problèmes soulèvent les deuxième et troisième graphes ?

Les mathématiques à la rescousse...

Le théorème (de niveau post-bac) de Perron-Frobenius, permet notamment d’affirmer que si, pour toutnœud, un chemin existe vers n’importe quel autre nœud, alors la fréquence des positions du surfeuraléatoire se rapproche toujours de la même valeur, quelle que soit la position initiale choisie. C’est biencette propriété que les trois derniers graphes ne vérifient pas. . .L’idée originelle de Sergey Brin et Larry Page est donc de transformer le graphe afin qu’il vérifie lesconditions d’applications du théorème.Plus précisément :• A chaque étape, on poursuit le cheminement, comme précédemment, avec une probabilité de 0.85.• Avec une probabilité de 0.15, on choisit au hasard une autre page du graphe.Ainsi, même si la probabilité est faible, chaque sommet est relié à tous les autres sommets du graphe etle théorème précédent s’applique. En pratique, les valeurs limites des fréquences ne sont pas calculées,on se contente de valeurs approchées au bout d’un certain nombre de répétitions (comme simulées, enexemples, dans la première partie). Ces valeurs sont les scores des pages (leur PageRank) qui permettrontde les classer afin des les afficher à l’utilisateur.

A votre tour !

Vous trouverez, dans votre casier de l’ENT, un fichier Jupyter nommé « PageRank.ipynb∗ », déjà complétéavec le programme traduisant l’algorithme précédent.Déplacer ce fichier dans « Mes Documents », renommer-le en y ajoutant votre nom, compléter ce fichieravant de le déposer dans le casier de votre enseignant.

29


Académie de Rouen — Formations 2019Auteur : Alexis Lecomte d’après Maxime Fourny (Besançon)

Thème : Web Moteurs de recherche Fiche professeur



Moteurs de recherche :principes et usages

Mener une analyse critique des résultats fournis par un mo-teur de recherche.

Exemple d’activités

Calculer la popularité d’une page à l’aide d’un graphe simple puis programmer l’algorithme.

Modalités

Au moins une séance d’1h30 : première partie en débranché, la seconde en salle informatique (ou auvidéoprojecteur suivant l’équipement disponible)

Il est conseillé que les élèves soient déjà familiarisés avec le concept d’hyperlien avant de commencer cetteactivité.

Descriptif

L’objectif de cette activité est de montrer aux élèves que lors d’une recherche sur le Web, l’ordre desrésultats affichés dépend d’un algorithme.Pour cela, on les entraîne sur quelques exemples de graphes représentant des pages reliées entre elles pardes hyperliens.

En appliquant « à la main » un principe algorithmique (celui du PageRank), les élèves arrivent dans lapremière partie de l’activité à un classement de ces différentes pages.

Dans la seconde partie, on donne une version simple du programme du PageRank, afin qu’ils puissentvérifier le classement déterminé empiriquement. Leur travail consiste à compléter des listes de probabilitésreprésentant les liens entre les pages.

30

Voici ce programme, que l’on peut donner aux élèves à l’aide d’un fichier Jupyter nommé « PageRank.ipynb∗ » :

def classement(n, liste_liens):

for longueur in range(len(liste_liens)):

if sum(liste_liens[longueur]) == 0 :

for k in range(len(liste_liens[longueur])):

liste_liens[longueur][k]=1/len(liste_liens[longueur])

position_surfeur=[1]

for j in range(len(liste_liens)-1):

position_surfeur.append(0)

for k in range(n):

position_surfeur2 = []

for i in range(len(position_surfeur)):

position_surfeur2.append(0)

for index in range(len(position_surfeur)) :

position_surfeur2[index] = 0

for j in range(len(position_surfeur)) :

position_surfeur2[index] += position_surfeur[j]*(0.15/len(position_surfeur)+0.85*liste_liens[j][index])

position_surfeur = position_surfeur2

return position_surfeur

liste_graphe1 = [

[0,1/2,1/2,0],

[0,0,1,0],

[1/2,1/2,0,0],

[0,1/2,1/2,0]

]

Les élèves doivent ensuite utiliser la console Python en tapant classement(100, liste_graphe1) etcréer ensuite les liste_graphe2, liste_graphe3, liste_graphe4 et liste_graphe5 pour tester lafonction classement avec les autres graphes de la première partie.

31

Synthèse du contenu des activités

Act

ivit

éco

nnec

tée

Act

ivit

édé

bran

chée

Intr

oduc

tion

deP

ytho

n

Lien avec d’autres thématiques

Création d’un site Web x

Du Web aux réseaux sociaux x Réseaux sociaux

Réputation d’un site Web x x

Moteurs de recherche x x x

Artisans de ce livret

32