livret « le web - ac-rouen.frmaths.spip.ac-rouen.fr/img/pdf/livret_snt_web.pdf · 2019. 11....
TRANSCRIPT
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
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
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
Sciences numériques et technologie
Académie de Rouen — Formations 2019Auteur : Laurent Cournil
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
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
Sciences numériques et technologie
Académie de Rouen — Formations 2019Auteur : Laurent Cournil
Le Web Création d’un site Web Fiche professeur
Contenus et capacités
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 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>
<option value="style2">Style 2</option>
<option value="style3">Style 3</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
Sciences numériques et technologie
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
Sciences numériques et technologie
Académie de Rouen — Formations 2019Auteur : Isabelle Pelletier
Le Web Du Web aux réseaux sociaux
1. Découverte de HTML et CSS
Fiche professeur
Contenus et capacités
Contenus Capacités attendues
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.
Hypertexte Maîtriser les renvois d’un texte à différents contenus.
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
Sciences numériques et technologie
Académie de Rouen — Formations 2019Auteur : Isabelle Pelletier
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
Contenus et capacités
Contenus Capacités attendues
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.
Hypertexte Maîtriser les renvois d’un texte à différents contenus.
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
Sciences numériques et technologie
Académie de Rouen — Formations 2019Auteur : Laurent Cournil
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
Sciences numériques et technologie
Académie de Rouen — Formations 2019Auteur : Laurent Cournil
Le Web Réputation d’un site Web Fiche professeur
Contenus et capacités
Contenus Capacités attendues
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
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
Sciences numériques et technologie
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
Sciences numériques et technologie
Académie de Rouen — Formations 2019Auteur : Alexis Lecomte d’après Maxime Fourny (Besançon)
Thème : Web Moteurs de recherche Fiche professeur
Contenus et capacités
Contenus Capacités attendues
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