L'organisation de la séquence sur le WEB

Le découpage de la séquence

  1. Histoire du web;
  2. Les mots du web;
  3. Fonctionnement du web : url/http;
  4. Ecrire des sites web : html/css;
  5. Moteur de recherche;

Projet/minisite

Un mini site sur un thème à choisir parmi une liste imposée

L'évaluation

L'évaluation sur ce thème sera double:

Une histoire du web.

Regarder la vidéo suivante :

Les mots du web

Nous allons découvrir et définir les mots liés au web

Télécharger ce document

Répartissons nous les mots

Regarder cette vidéo et noter les définitions des mots sous votre responsabilité :

Code de déblocage de la solution :

Internet et le Web sont deux choses complètement différentes.
Image pour mémoriser la différence :
"Si vous regardez la plomberie, chez vous, il y a les tuyaux et il y a ce qui passe dedans : l'eau chaude, l'eau froide, le gaz ...
Les tuyaux, c'est Internet. L'eau chaude, c'est le Web. Et on fait passer d'autres choses [que le Web] sur Internet : les emails, la telephonie,..."

Un lien hypertexte est un lien inclus dans un texte ou une image d'une page web qui cible une autre page ou une autre ressource. Ces liens tissent un réseau d'informations : le World Wide Web.

Fonctionnement du web

Notion d'URL

La composition d'une URL

Les sites Web ont une structure en arborescence comme vos répertoires et fichiers sur votre ordinateur. Une ressource (page, photo, vidéo, …) peut se trouver dans un dossier, lui-même situé dans un autre dossier et ainsi de suite.

Une URL (Uniform Resource Locator) est l’adresse d’une ressource d’un site Web : elle indique où elle se trouve dans l’arborescence du site. Elle se compose de 4 grandes parties : le protocole HTTP, le nom de domaine, le chemin vers la ressource et le nom du fichier.

Distinguer les quatre parties de l’URL suivante : http://eduscol.education.fr/actualites/article/sciences-numerique-technologie.html

Code de déblocage de la correction :

À la suite du nom du fichier, l'URL peut comporter aussi des paramètres : ces paramètres débutent après un point d'interrogation ?
Ils sont utiles pour les sites dynamiques qui utilisent une base de données.

Voici un exemple d'adresse :

https://www.qwant.com/?client=brz-moz&q=URL

La partie ?client=brz-moz&q=URL signifie :

  • que l'utilisateur (appelé client) utilise un navigateur Mozilla Firefox (d'après client=brz-moz)

  • que la recherche sur Qwant porte sur le mot URL (d'après q=URL)

Vous avez été recruté.e par le service de contre-espionnage français du fait de vos compétences en informatique.
Vous avez pour tâche de surveiller des membres d'un groupuscule jugé potentiellement dangereux. Vous avez réussi à introduire un logiciel espion dans l'ordinateur d'un des membres à surveiller. Ce logiciel vous permet de recevoir l'ensemble des URL que consulte ce membre à partir de son ordinateur.

Voici la dernière URL reçue : https://www.qwant.com/?q=nitroglycerine%20composition&t=web&client=brz-moz

Que pouvez-vous dire de l'activité du membre surveillé ?

Code de déblocage de la correction :

Une URL (Uniform Resource Locator) est l'adresse d'une ressource du Web. Elle contient souvent quatre éléments :

Protocole HTTP

Les requêtes HTTP

Le Web s’appuie sur un dialogue entre clients et serveurs.
Les clients sont les applications qui se connectent au Web, comme les navigateurs, qui envoient des requêtes HTTP (HyperText Transfert Protocol) aux serveurs, ordinateurs où sont stockées les données consultées.
HTTP est un protocolequi permet aux ordinateurs de communiquer entre eux.

Voici un exemple de requête envoyé par un client à un serveur avec quelques éléments expliqués :

Reprendre l'image de l'exemple précédent et s'aider des explications pour répondre aux questions suivantes :

  1. Quel est le serveur auquel le client envoie sa requête ?

  2. Quelle page veut consulter le client ?

  3. De quelle page provient le visiteur de la page demandé ?

Code de déblocage de la correction :

L'interaction client-serveur

Lorsque l’on effectue une requête HTTP sur notre navigateur, le serveur Web lui renvoie du code que le navigateur interprète et met en forme de manière lisible.

Les clients peuvent recevoir des codes exécutables, comme le Java-Script, qui permettent de rendre les pages plus dynamiques.

Ce que nous pouvons voir sur ce cours est le résultat d’une interaction constante entre le serveur et le client

Le protocole HTTP permet de transférer des fichiers mais ne se préoccupent pas du chemin suivi, ce qui rend les informations sensibles, privées ou financières, vulnérables à une interception et à un détournement.
Pour pallier à ce problème, le protocole de sécurité SSL (Secure Socket Layer) va s'ajouter au protocole HTTP et crypter les informations entre le serveur et le client. HTTP devient alors HTTPS . Un cadenas apparaît dans la barre d'adresse du navigateur pour indiquer que la communication est sécurisée.

Attention, HTTPS ne garantit en rien que le site soit un site sûr, seule la communication est sécurisée !
Ainsi, avec le protocole HTTP, un pirate informatique peut intercepter des informations transitant entre le client et le serveur et les lire tandis qu'avec le protocole HTTPS, il peut les intercepter mais ne peut plus les lire puisque les données sont cryptées.

Voici l'image, où seules des données personnelles ont été supprimées, obtenues au moment du paiement en ligne d'un achat :

Quel commentaire pouvez-vous faire quant au texte apparaissant en bas du prix : L'adresse de ce site de paiement préfixée par https indique que vous êtes sur un site sécurisé et que vous pouvez régler votre achat en toute tranquillité. ?

Code de déblocage de la correction :

Le protocole de transfert hypertexte HTTP (HyperTexte Transfer Protocol) est une méthode de communication entre un client (machine qui navigue sur le web) et un serveur informatique (machine hébergeant des ressources Web) pour échanger des informations.

Voici le fonctionnement d'un échange entre un client et un serveur :

  1. Le client émet des requêtes HTTP : un code informatique donnant des informations sur le client et des consignes d'exécutions au serveur.

  2. Le serveur renvoie une réponse HTTP : la ressource sous forme de code.

  3. Le navigateur du client met en forme la réponse pour l'afficher.

Le protocole HTTPS garantit le fait que si quelqu'un intercepte une information transmise entre le client et le serveur, il ne pourra pas l'utiliser car l'information est cryptée. Par contre, ce protocole HTTPS ne garantit pas la fiabilité du site visité.

Le langage du web : HTML/CSS

Le langage HTML

HTML

La programmation d’une page Web repose sur l’utilisation d’un langage de description appelé HTML pour (HyperText Markup Language).
Le langage HTML utilise des balises pour délimiter le début et la fin de chaque instruction lue par le navigateur.

Chaque instruction HTML est délimitée par une balise ouvrante < élément> et une balise fermante </élément>.
Ces balises sont invisibles à l’écran mais elles permettent au navigateur d’interpréter ce qu’il doit afficher

Toute page HTML d'un site Web se présente ainsi :

le code HTML est contenu entre les deux balises <html> et </html>.

Voici ci-dessous un code HTML :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
	<title> le lycée </title> <!--ligne 5-->
	<link rel="stylesheet" href="style.css">
  </head>
  <body> <!--ligne 8-->
   <h1> Notre site</h1> <!--ligne 9-->
   <ol><!--ligne 10-->
	<li> comsommation énergétique du web</li><!--ligne 11-->
	 <ul><!--ligne 12-->
		<li> Les datacenters</li><!--ligne 13-->
		<li> netflix</li><!--ligne 14-->
	 </ul><!--ligne 15-->
    <li> comment réduire cette comsommation énergétique ?</li><!--ligne 16-->
   </ol><!--ligne 17-->
  </body><!--ligne 18-->
</html>
				
  1. Expliquer le rôle de chacune des lignes du code précédent possèdant un commentaire donnant le numéro de la ligne, c'est-à-dire la ligne 5 et celles dont le numéro est compris entre 8 et 18.

    Faire une recherche Internet sur le nom des balises h1, ol, ul et li peut vous aider.

  2. Parmi les quatre images ci-dessous, laquelle peut correspondre au rendu visuel qu'affichera un navigateur pour le code HTML ci-dessus ?

    $\quad$ $\quad$

    image 1 :

    image 2 :

    image 3 :

    image 4 :

  3. Code de déblocage de la correction :

Rendez-vous sur ce site qui va nous permettre de travailler le code html en travaillant de manière déportée.

Dans la partie HTML copiez/collez le contenu du body du code précédent. Puis cliquez surRrun.

Vous pouvez retrouver le code ci-dessus sans la plupart des numéros repérant les lignes avec ce lien.

  1. Que fait l'élément h1 ?

  2. Que se passe-t-il si vous remplacer l'élément h1 par un élément h2 ou h3 ou ... ou h6 ?

  3. Que fait se passe-t-il si la ligne 15 est supprimée ?

  4. À quoi sert l'élément ol ?

  5. À quoi sert l'élément ul ?

Code de déblocage de la correction :

CSS

CSS

Le langage CSS (pour Cascading Style Sheets) permet de définir le style graphique d’une page Web (arrière-plan, type et taille des polices de caractères, etc.). La modification du style d’un élément dans une feuille de style se répercute automatiquement à toutes les pages HTML qui y font appel

body{
	background-color: white;/*ligne 2*/
	font-family: "OpenSans", sans-serif;
	padding: 5px 25px;
	font-size: 18px;/*ligne 5*/
	margin: 0;
	color: purple;
}
h1{
	font-family: "Merryweather",serif;
 	font-size: 32px;
    color: #FF0000;
}
					

Retournez sur le site de jsfiddle est copiez/collez le code précédent dans la case CSS. En ayant pris la peine de récupérer votre code html précédent. Appuyez sur Run.

Vous pouvez retrouver le code ci-dessus sans les numéros repérant les lignes avec ce lien.

  1. Quels sont les éléments modifiés pas le fichier css ?

  2. Dans la ligne 5, remplacez 18 par 32. A quoi sert l'attribut font-size ?

  3. Dans la ligne 2, remplacer white par green. Que fait l'attribut background-color ?

  4. Que fait l'attribut color ?

Code de déblocage de la correction :

Les liens vers un site internet externe

Un lien externe est un lien vers une page pointée par son URL.

Ce type de lien est un exemple de lien hypertexte.

Le code en langage html ci-dessous

 <a href="https://www.societe-informatique-de-france.fr/"> Société informatique</a>

conduit à l'affichage suivant sur la page web de : Société informatique .

  1. Cliquez sur le lien ci-dessus : que se passe-t-il ?

  2. Quel est le rôle de la balise <a> ?

  3. Quel est le rôle de l'attribut href ?

Code de déblocage de la correction :

Reprenez votre travail précédent sur jsfiddle et insérer dans votre code html un lien vers cette page de cours de SNT sur le web.

Insertion d'image

Pour insérer une image dans une page web, il suffit d'utiliser la balise <img>.

Supposons qu'une image nommée html5.png soit stockée dans le même répertoire que votre fichier html de travail.

Le code en langage html ci-dessous

 <img src="html5.png">

conduit à l'affichage suivant sur votre page web de :

Quel est le rôle de l'attribut src ?

Code de déblocage de la correction :

La balise <img> est une des rares balises à ne pas avoir à être fermée par une balise fermante du type "</img>".
En effet, tout le contenu nécessaire à l'insertion est contenu entre les chevrons < et > donc la balise prend fin avec le chevron fermant >.

  1. Dans le même répertoire de votre ordinateur, stocker :

    • le fichier html dont le contenu correspond à celui obtenu à la fin de l'avant dernier exercice.

      Attention à ne pas oublier de mettre l'en-tête du head au début du fichier html.

    • le fichier css, forcément nommé style.css dont le contenu correspond à celui obtenu à la fin de l'exercice sur le CSS.

      Le nom du fichier css doit être le même que celui écrit comme valeur de l'attribut href de la balise <link>. A priori, ici c'est style.css d'après le code

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

    • L'image nommée css3.png téléchargeable directement ici.

  2. Insérer dans votre code html le code pour faire afficher l'image css3.png.

  3. Visualiser le contenu de la page web en cliquant sur le fichier hmtl ; normalement votre navigateur par défaut fait apparaître ce contenu dans un nouvel onglet.

Une page Web statitique est constituée de deux langages : le HTML (HyperText Markup Language) et le CSS (Cascading Style Sheets).

Le HTML structure la page Web en utilisant des balises de description.
Le contenu est organisé comme dans un livre avec une partie en-tête, des titres, des paragraphes, des images, mais il permet aussi d'insérer des liens hypertextes vers d'autres pages ou vers des vidéos.
La plupart des instructions HTML sont délimitées par une balise ouvrante <élément> et une balise fermante </élément>.
Ces balises sont invisibles à l’écran mais elles permettent au navigateur d’interpréter ce qu’il doit afficher.

Le CCS définit la mise en forme du contenu en précisant pour chaque élément de la structure sa couleur, sa taille, sa police de caractère, son arrière-plan, ses marges, ...
La modification du style d’un élément dans une feuille de style css se répercute automatiquement à toutes les pages HTML qui y font appel.

Le navigateur compose avec ces deux langages pour faire apparaître le rendu à l'écran.

Inspecteur du navigateur

Il est possible d'examiner le code html et css de n'importe quelle page web grâce à l'inspecteur du navigateur.

Sur Mozilla Firefox, il suffit d'appuyer sur la touche F12 puis de cliquer sur l'onglet pour le faire apparaître en bas de la page web.

Toute modification apportée au niveau de cette inspecteur ne modifie que le rendu visuel sur votre navigateur ouvert mais pas le fichier initial.
Il suffit de rafraîchir la page pour revenir au rendu visuel du fichier initial.

  1. Visualiser sur votre Mozilla Firefox le contenu du fichier html obtenu dans l'exercice précédent.

  2. Faire apparaître l'inspecteur du navigateur.

    1. Cliquer dans cet inspecteur sur la ligne <h1> Notre site</h1>,

      Normalement, vous devez voir apparaître un visuel proche de celui-ci :

    2. Dans la partie centrale de l'inspecteur, cliquer sur le rond rouge de la couleur #FF0000 pour faire apparaître un nuancier de couleur.

      Changer la teinte rouge en une nuance de bleue.

    3. Visualiser l'effet sur le visuel de la page.

    4. La modification en bleue est-elle conservée lors d'un rafraîchissement de la page, permis par exemple avec l'appui sur les touches CTRL et R ?

Voici un défi vu votre niveau pour faire croire à vos proches que vous avez acquis les compétences d'un.e vrai.e hacker.euse.

  1. Aller sur le site google.com ; vous devez voir apparaître un visuel proche de celui-ci :

  2. Utiliser l'inspecteur pour changer le texte "Recherche Google" par celui "J'ai piraté Google !?!" et changer la couleur du texte en rouge.
    Vous pouvez alors faire apparaître un visuel proche de :

  3. Appeler la personne que vous désirez bluffer avant de rafraîchir la page ;-) !

Il est possible de voir le contenu de chaque site en HTML et CSS en utilisant l'inspecteur du navigateur.

Toute modification effectuer dans cet inspecteur ne modifie pas le fichier initial : un simple rafraîchissement de la page supprime ces modifications.

Les moteur de recherche

Fonctionnement général

  1. Regarder la vidéo ci-dessous

  2. Répondre aux questions suivantes pour vérifier que vous avez compris l'essentiel :

    1. Comment les spiders robots parcourent-ils le Web ?

    2. Quel est le rôle de ces robots ?

    3. Où sont stockées les informations obtenues par ces spiders ?

    4. Comment sont classées les pages comportant les mots-clés d'une recherche ? (hors annonces publicitaires)

    5. Tous les résultats affichés sont-ils nécessairement pertinents ? Pourquoi ?

Code de déblocage de la correction :

Voici un shéma qui résume le fonctionnement d'un moteur de recherche

moteur de recherche

Les moteurs de recherche fonctionnent en trois temps :

  1. D’abord, l’exploration consiste à faire parcourir le Web par des "robots" pour collecter des informations sur les pages Web.

  2. Puis, c’est l’indexation : les données sont analysées et classées dans des bases de données sur des serveurs afin de permettre leur exploitation (grâce à des algorithmes qui analysent les textes, mots-clés, popularité de la page, liens entrants, etc).

  3. Enfin, un internaute effectue une requête. Un algorithme est appliqué pour identifier dans l’index les sites qui correspondent le mieux aux mots-clés de la recherche.
    L'un de ces algorithme est le PageRank qui évalue la popularité des sites grâce aux liens entre eux.

Les réponses affichées dépendent du moteur de recherche utilisé.

Certains moteurs de recherche, comme Qwant et DuckDuckGo, préservent davantage la vie privée.

Modélisation de l'algorithme de PageRank en Python

projet

Vous allez vous mettre en groupe de 3/4 avec l'accord de votre enseignant

Chaque groupe choisit un thème parmi :

Votre objectif est de réaliser un exposé dont le support sera une page html d'une durée maximum de 10 minutes.
Le dossier comprenant votre page html, le css modifié, les images utilisées dans le site devra être envoyé avant votre passage à votre enseignant.e sous format compressé.

Pour coder en HTML, il existe beaucoup de solutions hors ligne ou en ligne. Nous vous suggérons d'utiliser le logiciel https://code.visualstudio.com/.

Pour cela nous mettons à votre disposition un "squelette" de site web à télécharger Le squelette à télécharger

Des vidéos pour vous aider :

Cet exposé sera évalué.

Les éléments pris en compte dans l'évaluation :

Coté technique Contenu Organisation du groupe Investissement

Licence Creative Commons
Les différents auteurs mettent l'ensemble du site à disposition selon les termes de la licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International