SNT-LE WEB

Thème n° 3 : Le web

• Activité 1: Découverte du Web
• Activité 2: Comprendre la construction d'une page web
• Activité 3: Décrypter la navigation
• Activité 4: Sécuriser la navigation
• Activité 5: Moteurs de recherche et publication d'informations
• Activité 6: Calculer la popularité d'une page Web

Activité n° 1 : Découvrir l'historique du Web

→ C'est quoi le Web ?

Questions auxquelles il faudra répondre avec les ressources qui vont suivre :

1- Définir les mots suivants : HTTP, HTTPS, URL, langage HTML, langage CSS, navigateur, CMS, moteur de recherche. 2- Compléter la frise chronologique avec les éléments du document 2. 3- Donner trois exemples de navigateurs et de moteurs de recherche.

Retour aux questions...

Retour aux questions...

Document 1: Naissance du web Le Web a été développé au CERN (Conseil Européen pour la Recherche Nucléaire) par le Britannique Sir Timothy John Berners-Lee et le Belge Robert Cailliau en 1989. À cette époque les principaux centres de recherche mondiaux étaient déjà connectés les uns aux autres, mais pour faciliter les échanges d'information, Tim Berners-Lee met au point un nouveau moyen de naviguer de documents en documents en cliquant sur des mots clés à travers le réseau internet. Ce système, basé sur le concept d’hypertexte déjà existant, donne naissance au Web. Les mots "cliquables" sont appelés hyperliens et sont souvent soulignés et en bleu. Ces hyperliens sont plutôt connus aujourd'hui sous le simple terme de "liens". La première page web est consultable à l'adresse suivante : http://info.cern.ch/hypertext/WWW/TheProject.html Elle explique le principe du web.

Retour aux questions...

Document 1: Naissance du web (suite) Tim Berners-Lee développe le premier navigateur web, il l'appelle simplement "WorldWideWeb". Il faudra attendre 1993 et l'arrivée du navigateur web "NCSA Mosaic" pour que le web commence à devenir populaire en dehors du petit monde de la recherche. Techniquement, le web repose sur plusieurs choses : --> le protocole HTTP (HyperText Transfert Protocol) qui permet la communication entre le client et le serveur (HTTPS pour la version sécurisée) ; --> les URL (Uniform Resource Locator) qui permettent au client d'avoir accès au document stocké sur le serveur; --> le langage de balises HTML (Hypertext Markup Language) qui décrit le contenu de la page. Leur style graphique est défini dans le langage CSS (Cascading Style Sheets). Une page web est donc un document qui décrit un contenu et une mise en page. Sur le Web, les textes, photos, vidéos, graphiques, sons, programmes sont exprimés et assemblés dans divers formats normalisés par un consortium mondial (W3C : World Wide Web Consortium créé en 1994), ce qui permet une circulation standardisée de ces informations. Vu la multitude de pages disponibles (plus de 1,8 milliards en 2017), on ne peut pas toutes les connaître. On utilise donc des moteurs de recherche qui créent un index des différentes pages en fonction de leur contenu et les classe en ordre de pertinence en fonction de la requête faite par l'utilisateur. Beaucoup de sites internet sont réalisés grâce à des systèmes de gestion des contenus ou CMS (Content Management System). Il s'agit de logiciels qui facilitent la création de sites en proposant des modèles de pages web préconstruites. Les CMS fonctionnent sur un principe simple : le WYSIWYG pour What You See Is What You Get (Ce que vous voyez est ce que vous obtenez).

Retour aux questions...

Document 2: La chronologie du web Évènements à replacer dans la frise chronologique :- Naissance du Web au CERN par Tim Berners-Lee- Invention du concept d’hypertexte par Ted Nelson (texte numérique contenant des liens vers d’autres textes numériques interconnectés)- Langages JavaScript et PHP permettent la création de sites Web dynamiques et interactifs (animations, vidéos, boutiques en lignes, forums…)- Premier navigateur : Mosaic - Applications mobiles, sites Web s’adaptant aux formats d’écran, Web apps (sites Web fonctionnant comme des applications) = Web mobile- Standardisation des pages Web grâce au DOM (Document Object Model) établi par le W3C (1ère version publiée en 1998)

Retour aux questions...

Activité n° 2 : Découvrir la construction d'une page Web

Objectif : Étudier et modifier une page HTML simple en manipulant du langage HTML et CSS. Le langage HTML permet de structurer une page web et d’y mettre du contenu. Le langage CSS est dédié à la mise en forme de la page. La programmation se fait avec un éditeur de texte (Notepad++ au lycée) et un navigateur pour visualiser le résultat.

→ les balises HTML et le code CSS avec la page web affichée.

Source: Manuel SNT Hatier

Activité n° 3 : Décrypter la navigation

Objectifs: --> Décomposer l'URL d'une page --> Décomposer le contenu d’une requête HTTP et identifier les paramètres passés

Questions auquelles il vous faudra répondre (les docs viennent ensuite) : 1- Que fait cette URL ? mailto://nomducorrespondant@messagerie.fr?subject=Commande&body=Bonjour (Doc. 1) 2- Qui peut administrer le sous-domaine de « corinneberthier » : www.corinneberthier.hebergeur.fr ? (Doc. 2) 3- Expliquez le rôle du serveur lors d’une requête HTTP. (Doc. 3) 4- Sur la requête HTTP en exemple, où apparaît le navigateur utilisé par le client ? (Doc. 4)

Source: Manuel SNT Hatier

Source: Manuel SNT Hatier

Pour aller plus loin:

Source: Manuel SNT Hatier

Source: Manuel SNT Hatier

Questions activité 3 : 1- Que fait cette URL ? mailto://nomducorrespondant@messagerie.fr?subject=Commande&body=Bonjour (Doc. 1) 2- Qui peut administrer le sous-domaine de « corinneberthier » : www.corinneberthier.hebergeur.fr ? (Doc. 2) 3- Expliquez le rôle du serveur lors d’une requête HTTP. (Doc. 3) 4- Sur la requête HTTP en exemple, où apparaît le navigateur utilisé par le client ? (Doc. 4)

Activité n° 4 : Sécuriser la navigation

Objectifs:

• Reconnaître les pages sécurisées
• Maîtriser les réglages les plus important concernant la gestion des cookies, la sécurité et la confidentialité d’un navigateur
• Sécuriser sa navigation en ligne et analyser les pages et fichiers

Source: Manuel SNT Hatier

Source: Manuel SNT Hatier

Source: Manuel SNT Hatier

Source: Manuel SNT Hatier

Activité n° 5 : Moteurs de recherche et publication d'information

Objectifs:

• Mener une analyse critique des résultats fournis par un moteur de recherche
• Comprendre les enjeux de la publication d’informations
• Connaître certaines notions juridiques (licence, droit d’auteur, droit d’usage, valeur d’un bien)

Source: Manuel SNT Hatier

Source: Manuel SNT Hatier

Le plus souvent, avec un moteur de recherche, on tape quelques mots clés et on visite les pages proposées. Mais on peut également réaliser des recherches plus fines avec quelques astuces:

• Les guillemets permettent de rechercher l’ensemble d’une expression.
• Ajouter un tiret devant un mot permet de l’exclure de la recherche.
• Ajouter un tilde (~) devant un mot permet d’inclure les synonymes de celui-ci.
• Utiliser une étoile (*) à la place des mots inconnus permet de les trouver : très utile lorsqu’on est à la recherche d’une expression oubliée. Exemple : Galette *, je t’aime
• Deux points permettent de trouver des résultats entre deux nombres ou dates. Exemple: Les plus grands tubes 1999..2005

Et plus encore

On peut aussi faire des recherches à partir d'images avec Google Image: https://images.google.com/

Source: Manuel SNT Hatier

Source: Manuel SNT Hatier

Activité n° 6 : Calculer la popularité d'une page web

Objectifs:

• Reproduire une analyse menée par un moteur de recherche
• Programmer et comprendre un algorithme
• Utiliser du langage Python

Six pages web nommées de A à F comportent des liens hypertextes formant une toile selon le schéma suivant :

Des internautes arrivent par hasard sur l’une des 6 pages.Ils suivent de manière aléatoire les liens proposés par chaque page, augmentant ainsi le compteur de vue de chacune.Dans 80 % des cas, le sujet les intéresse et ils poursuivent leur navigation.Après le passage de 1000 explorateurs, quelle sera la page la plus populaire ?

Source: Manuel SNT Hatier

Étape n° 1 : Saisir un programme en langage Python

1. Ouvrir Capytale (accessible depuis Toutatice) et taper le code: 88d7-524617

Si Capytale ne fonctionne pas

Rq: La variable « PageWeb » est ce que l’on appelle une liste. Une liste se définit en mettant des éléments (str, int, float) entre crochets [élément1, élément2, …]

Étape n° 1 : Saisir un programme en langage Python

1. Ouvrir le programme « Popularite_page_web_eleve.py » avec un éditeur de programme Python. --> Le fichier est téléchargeable sur Pearltrees et sur le réseau

Si vous faites l'activité de chez vous:

--> Ouvrez votre fichier avec le logiciel Thonny

HELP

Link

Rq: La variable « PageWeb » est ce que l’on appelle une liste. Une liste se définit en mettant des éléments (str, int, float) entre crochets [élément1, élément2, …]

Si vous rencontrez des difficultés, Contactez votre professeur via Pronote

Return

2. Complétez le programme avec les liens hypertextes pour chacune des pages en suivant l’exemple de la page web « A » (Hypertexte ["A"] = ["B", "C", "D"]). --> lignes 11 à 15

Source: Manuel SNT Hatier

Étape n° 2 : Comprendre et exécuter le programme

Exécutez votre programme...

--> Vous répondrez sur une feuille que vous rendrez à la fin de l'heure.

3- Que font les variables Nb_clic [] ?

4- La fonction random.choice est utilisée à deux reprises (lignes 25 et 29). Décrivez son rôle pour les deux cas.

5- Après avoir exécuter plusieurs fois le code, établissez en justifiant le classement de popularité des pages en partant de la plus populaire à la moins populaire.

Étape n° 3 : Modifier et améliorer la présentation du résultat

6. Copier-coller le code ci-dessous (coller à partir de la ligne 35):

histo = []for i in range (Nb_clic["A"]): histo.append("A")for i in range (Nb_clic["B"]): histo.append("B")for i in range (Nb_clic["C"]): histo.append("C")for i in range (Nb_clic["D"]): histo.append("D")for i in range (Nb_clic["E"]): histo.append("E")for i in range (Nb_clic["F"]): histo.append("F") #Paramètres d'affichage:plt.xlabel("x")plt.ylabel("y")plt.hist(histo, range=(0,6),bins=6,align="left",edgecolor = "white",density=True)plt.title("titre")plt.show()

7. Que permet de faire ce code?

8. Complétez le code pour améliorer la nouvelle présentation des résultats (lignes 50,51 et 53).

9. Conclusion: D'après cet algorithme, sur quel(s) critère(s) se fait le classement de popularité des pages Web?

10. Enregistrez votre travail sur Capytale et rendez votre feuille avec vos réponses --> Votre professeur vous communiquera alors un code qui vous permettra d'accéder à la conclusion de cette activité.

ENTER THE SECRET CODE

_ _ _ _

ENTER THE SECRET CODE

* _ _ _

ENTER THE SECRET CODE

* _ _ _

ENTER THE SECRET CODE

* * _ _

ENTER THE SECRET CODE

* * _ _

ENTER THE SECRET CODE

* * * _

ENTER THE SECRET CODE

* * * _

ENTER THE SECRET CODE

Oh, no!Error code

Bien tenté!!!

TRY AGAIN

BILAN:Vous venez de programmer une partie du moteur de recherche de Google, appelé le PageRank, permettant de classer les pages web selon leur popularité (qui est notamment fonction du nombre de pages web renvoyant vers la page). Le PageRank n'est qu'un indicateur parmi d'autres dans l'algorithme qui permet de classer les pages du Web dans les résultats de recherche de Google. Ce système a été inventé par Larry Page, cofondateur de Google. Ce mot est une marque déposée.

Image illustrant le fonctionnement de PageRank