duranton.net

Chapitre 4 : Le web.

🕐 Historique:

  • 1965 : Invention et programmation du concept d’hypertexte par Ted Nelson
  • 1989 : Naissance au CERN par Tim Berners Lee
  • 1993 : Mise dans le domaine public, disponibilité du premier navigateur Mosaic
  • 1995 : Mise à disposition de technologies pour le développement de sites Web interactifs (langage JavaScript) et dynamique (langage PHP)
  • 2001 : Standardisation des pages grâce au DOM (Document Object Model)
  • 2010 : Mise à disposition de technologies pour le développement d’applications sur mobiles

1. Le Web

Qu'est-ce que le World Wide Web (Web) ?

Le World Wide Web, communément appelé le Web, est un système d'information en ligne qui permet d'accéder à des pages web contenant du texte, des images, des vidéos et plus encore. Il est devenu une ressource essentielle pour l'apprentissage, la communication et le divertissement.

Les Concepts Clés :

2. Fonctionnement du Web

Le Web fonctionne grâce à Internet, un réseau mondial d'ordinateurs interconnectés. Lorsque vous entrez une URL dans votre navigateur, celui-ci envoie une requête à un serveur web pour récupérer la page correspondante. Le serveur renvoie alors les données au navigateur, qui les affiche à l'écran.

3. Les navigateurs web

Pour naviguer sur le net, nous utilisons un navigateur web. Il s’agit d’un logiciel d’une extrême complexité, comportant des millions de lignes de code car c'est lui qui génère l'affichage des pages. Le premier navigateur web, appelé Mosaic, date de 1993. Actuellement, il en existe un grand nombre dont les plus connus sont les suivants :

Logo Nom Caractéristiques principales
Logo Firefox Mozilla Firefox Open source, respect de la vie privée.
Logo Brave Brave Protection de la vie privée, bloqueur de publicités intégré.
Logo Chromium Chromium Projet open source, base de nombreux navigateurs (Chrome, Edge).
Logo Safari Safari Créer par Apple pour ses appareils.
Logo Chrome Google Chrome Synchronisation avec le compte Google.
Logo Edge Microsoft Edge Créer par Microsoft et basé sur Chromium, intégration avec Windows.
Logo Opera Opera VPN gratuit intégré.

4. Exercice :

À faire dans le cahier.

Selon vous, pourquoi est-ce que Google a investi énormément d'argent pour développer son navigateur Chrome qu'il vous "offre" gratuitement ?

Vous noterez dans votre cahier les 3 bonnes réponses ci-dessous.

5. Critiques sur la vie privée.

En juillet 2024, est révélé que Google Chrome intègre une API qui permet aux sites et services de Google d'accéder aux informations tels que le processeur, le processeur graphique, la mémoire vive et aux journaux de visite des internautes sur les domaines Google.

Cette API est intégrée à l'extension hangout services ne peut être désactivée, bien que cela soit contraire à la législation européenne sur les marchés numériques (DMA). Cette API a été trouvée sur les navigateurs utilisant Chrome comme base, tels que Microsoft Edge, Opera et Brave.

Source : wikipedia

6. Découvrir les Moteurs de Recherche : Trouver l'Information en Ligne

Dans cette leçon, nous allons explorer les moteurs de recherche, des outils essentiels qui nous aident à trouver rapidement des informations en ligne.

Qu'est-ce qu'un Moteur de Recherche ?

Un moteur de recherche est un outil en ligne qui permet de rechercher et d'obtenir des informations à partir de milliards de pages web disponibles sur Internet. Il agit comme un guide vers l'énorme quantité de contenu en ligne.

Fonctionnement des Moteurs de Recherche :

Les moteurs de recherche utilisent des robots (appelés "spiders" ou "crawlers") pour explorer le web et indexer les pages qu'ils trouvent. Lorsque vous effectuez une recherche, le moteur de recherche parcourt son index pour afficher les résultats pertinents.

Étapes pour une Recherche Efficace :

  1. Définir les mots-clés : Choisissez des mots ou des phrases qui décrivent votre recherche.
  2. Saisir la recherche : Entrez les mots-clés dans la barre de recherche du moteur.
  3. Évaluer les résultats : Parcourez les résultats et lisez les descriptions pour déterminer leur pertinence.
  4. Affiner la recherche : Utilisez des opérateurs de recherche (AND, OR, NOT) pour affiner ou élargir vos résultats.

Évaluation des Résultats :

Lorsque vous obtenez des résultats, il est important de vérifier la fiabilité des sources et de sélectionner celles qui fournissent des informations précises et crédibles.

7. Activité :

A faire dans le cahier.

Google a cherché à développer un modèle de hiérarchisation exploitable dans tous les domaines, utilisable pour tous les mots clés, adaptable à un très grand nombre de données, même évolutives, tout en étant automatisable et suffisamment efficace.

C’est en répondant à ce cahier des charges que ce nouveau venu à réussi l’exploit, en quelques mois et malgré l’émergence de Bing ou encore Qwant, à obtenir le quasi-monopole de la rechercher thématique sur le web.

L’idée à la base du modèle de Larry Page et Sergey Brin, fondateurs de Google, revient à attribuer à chaque page un nombre positif appelé score (en anglais PageRank) de la page, qui caractérisera la pertinence de cette page. Ils proposent alors de déterminer ce score à partir des deux règles suivantes :

Leur idée : utiliser un surfeur aléatoire.

Principe du surfeur aléatoire.

Après avoir fait la liste (sans classement) de tous les sites traitant la requête, le surfeur aléatoire en choisit un au hasard. Puis il s’intéresse aux liens hypertextes du site sur lequel il se trouve vers les autres sites qu’il a listés. Il en choisit alors un au hasard et répète cette opération sans s’arrêter en comptant pour chacun des sites combien de fois il l’a visité.

Mise en pratique :

Pour illustrer comment un algorithme de calcul peut être mis en place à partir de ces règles, nous allons prendre l’exemple du classement de quatre pages.

Le problème de l’attribution du score peut être représenté par un graphe orienté : les quatre pages sont représentées par les quatre sommets d’un graphe dont les arêtes orientées représentent les références (liens) pouvant exister entre ces différentes pages.

Dans ce graphe, la flèche allant de 1 vers 2 signifie que la page 1 référence la page 2 et l’absence de flèche de 2 vers 4 signifie que la page 2 ne référence pas la page 4.

Afin de simuler un mouvement aléatoire, le bouton ci-dessous vous génère un nombre aléatoire entre 1 et 4 :

  1. Refaire ce tableau dans votre cahier:

    Site 1 2 3 4
    Nombre de visites
  2. Appuyez sur le bouton au dessus. Mettez une barre dans la case correspondante. Ce sera votre case de départ.
  3. Appuyez sur le bouton au dessus. Mettez une barre dans la case correspondante. Cela simule un utilisateur qui vient de cliquer sur le lien vers ce site.
  4. Simulez pendant un certain temps ce surfeur, il faut au moins 30 "rebonds" pour que l'expérience soit assez parlante.
  5. Comptez le nombre de barre dans chaque case de votre tableau et écrire le résultat obtenu.

8. Interactions Clients/Serveurs sur le Web : Comment les Pages Web Fonctionnent

Qu'est-ce qu'un Client et un Serveur sur le Web ?

Un client est généralement un navigateur web (comme Chrome ou Firefox) utilisé par les utilisateurs pour accéder aux pages web. Un serveur est un ordinateur distant qui stocke et fournit ces pages en réponse aux demandes des clients.

Le Processus d'Interaction :

  1. Demande (Requête) : Lorsqu'un utilisateur entre une URL dans le navigateur et appuie sur Entrée, le navigateur envoie une requête HTTP au serveur correspondant.
  2. Traitement au Serveur : Le serveur reçoit la requête, traite la demande et cherche le fichier ou la page demandée.
  3. Réponse du Serveur : Le serveur renvoie la page ou le fichier demandé au navigateur en utilisant une réponse HTTP.
  4. Affichage dans le Navigateur : Le navigateur reçoit la réponse et interprète le code HTML, CSS et JavaScript pour afficher la page web à l'utilisateur.

Protocole HTTP :

HTTP (Hypertext Transfer Protocol) est le protocole utilisé pour les communications entre les clients et les serveurs sur le Web. Il définit comment les demandes et les réponses sont formatées et échangées.

9. L'URL

A faire dans le cahier.

Donner toutes les informations que vous pouvez extraire de l'URL de cette page.

10. Gestes de Prévention sur le Web : Protéger Votre Sécurité en Ligne

Pourquoi la Sécurité en Ligne est-elle Importante ?

La sécurité en ligne est cruciale pour protéger vos informations personnelles, vos finances et votre identité contre les menaces en ligne telles que les cyberattaques et les fraudes.

Gestes de Prévention Importants :

Protection de la Vie Privée :

Limitez la quantité d'informations personnelles que vous partagez en ligne. Utilisez les paramètres de confidentialité pour contrôler qui peut accéder à vos données.

11. Cookie:

Un site web peut faire en sorte de laisser des données sur l'appareil du client pour une future connexion.

Le consentement pour les cookies est généralement requis dans les cas suivants :

Les cookies essentiels, qui sont nécessaires pour le fonctionnement de base d'un site web (comme les cookies de session pour les paniers d'achat ou les préférences linguistiques), ne nécessitent généralement pas de consentement. Cependant, il est toujours bon de fournir des informations claires sur leur utilisation.

12. Exercice:

A faire dans le cahier.

Est-ce que le site duranton.net dépose des cookies sur votre ordinateur?

13. Rôles de HTML, CSS et JavaScript :

A copier dans le cahier.

14. Le HTML

HTML signifie "HyperText Markup Language". Il est au coeur des pages webs que nous visitons.

Il fut inventé en 1993. Nous en sommes actuellement à la version 5 (c'est pour cela que l'on parle d'HTML5).

15. Balise html

Le langage html est un langage dit de balisage. Une balise est un composé du caractère "<", du typage puis de ">" .

On ferme une balise en tapant la même chose mais en faisant précéder le typage par un "/".

16. L'architecture basique

Le contenu de la page HTML est entre les deux balises "html" : <html lang="fr"> et </html>.

A l'intérieur, on distingue deux parties, la partie "head" et la partie "body".

17. Exemple

On peut prendre pour exemple le code suivant :

<!DOCTYPE html>
        <html lang="fr">
        
            <head>
                <meta charset="utf-8">
                <title>Mon titre</title>
            </head>
            
            <body>
                <h1>Un gros titre</h1>
                <h2>Un sous-titre</h2>
                <p>Mon paragraphe</p>
                <h2>Mon deuxième sous-titre</h2>
                <p>Un autre paragraphe</p>
                <ul>
                    <li>Une première ligne d'une liste non ordonnée (unordered list).</li>
                    <li>Une deuxième ligne.</li>
                </ul>
                <h2>Mon troisième sous-titre</h2>
                <p>Encore un paragraphe.</p>
                <p>Et un autre beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup
                    beaucoup plus long.</p>
                <ol>
                    <li>Une première ligne d'une liste ordonnée (ordered list).</li>
                    <li>Une deuxième ligne.</li>
                </ol>
            </body>
            
        </html>

18. Exercice

  1. Allez dans le dossier SNT ou en créer un.
  2. A l'intérieur du dossier SNT, aller dans le dossier chapitre04 ou en créer un.
  3. A l'intérieur du dossier chapitre04, créer un dossier exercice18.

  4. A l'intérieur du dossier exercice18 :

    Faire "clique-droit" ➡️ "Nouveau" ➡️ "Document texte".

  5. Renommer ce fichier index.html.

  6. Ouvrir ce fichier avec le bloc-note :

    "Clique-droit" ➡️ "Ouvrir avec une autre application" ➡️ "Autre application" ➡️ "Bloc-notes".

  7. Ecrire ce qu'il faut dans un fichier index.html afin que l'on obtienne :

19. Le CSS

Les pages que nous avons vu sont en noir et blanc et offrent peu de personnalisation.

Le CSS est là pour y apporter "du style".

Le CSS est né est 1996. CSS signifie "Cascading Style Sheets".

Nous en sommes actuellement à la version 3 (c'est pour cela que l'on parle de CSS3).

20. Utilisation du CSS

Le CSS peut être inclus de trois façons :

21. Exercice

Dans un dossier exercice21, écrire ce qu'il faut dans un fichier index.html afin que l'on obtienne :

22. Les balises à connaître pour débuter en HTML

Balises de Titre :

La balise <h1> à <h6> est utilisée pour définir des titres de différentes tailles, <h1> étant le plus grand.

<h1>Titre Principal</h1>
<h2>Sous-Titre</h2>

Paragraphe :

La balise <p> est utilisée pour créer des paragraphes de texte.

<p>Ceci est un paragraphe.</p>

Liste à Puces et Liste Numérotée :

Les balises <ul> (liste à puces) et <ol> (liste numérotée) sont utilisées pour créer des listes.

<ul>
    <li>Élément 1</li>
    <li>Élément 2</li>
</ul>

<ol>
    <li>Élément 1</li>
    <li>Élément 2</li>
</ol>

Liens :

La balise <a> est utilisée pour créer des liens hypertexte.

<a href="https://www.exemple.com">Visiter Exemple.com</a>

Image :

La balise <img> est utilisée pour afficher des images.

<img src="chemin/vers/image.jpg" alt="Description de l'image">

Division :

La balise <div> est une balise de division générique souvent utilisée pour grouper des éléments.

<div>
    <p>Ceci est un paragraphe à l'intérieur d'une division.</p>
</div>

23. Les éléments à connaitre pour débuter en CSS

Propriétés de Style :

Les propriétés CSS définissent le style des éléments sélectionnés. Voici quelques exemples :

/* Style des paragraphes : */
p {
    color: blue; /* pour que la couleur d'écriture soit bleue */
    font-size: 16px; /* pour définir la taille de la police */
    text-align: center; /* pour centrer le texte */
    font-weight: bold; /* pour rendre le texte en gras */
    background-color: yellow; /* pour ajouter un fond jaune */
    font-style: italic; /* pour mettre le texte en italique */
    margin-top: 20px; /* pour ajouter une marge en haut */
    border: 1px solid black; /* pour ajouter une bordure noire */
    padding: 5px; /* pour ajouter un espace à l'intérieur de l'élément */
    list-style-type: none; /* pour enlever les puces des listes (non applicable ici) */
    margin-bottom: 10px; /* pour ajouter un espace en bas de chaque élément */
}


/* Style des titres principaux : */
h1 {
    color: green; /* pour que la couleur d'écriture soit verte */
    font-size: 24px; /* pour définir la taille de la police */
    text-align: left; /* pour aligner le texte à gauche */
    font-weight: normal; /* pour rendre le texte en poids normal */
    background-color: lightgray; /* pour ajouter un fond gris clair */
    margin-top: 30px; /* pour ajouter une marge en haut */
    border-bottom: 2px solid darkgray; /* pour ajouter une bordure en bas */
    padding-bottom: 10px; /* pour ajouter un espace en bas à l'intérieur de l'élément */
}

24. Projet

Projet : créer un site internet

25. Code client/code serveur

Le code serveur n'est pas forcément le même que celui qui est exécuté côté serveur.