Architecture et langages Web (NFA040)

Introduction, panorama, prise en main

Olivier Pons
(pons@cnam.fr)

2022

Pour naviguer sur le Web, il faut :

  1. Une connexion au réseau
    • Réseau
      • Connexion physique (câbles,sans fils, ...) à des machines
      • Protocoles de communication
        Plusieurs niveau (couche) :
        • Internet protocole IP
        • Transmission Control Protocol TCP
        • ...
        • HyperText Transfer Protocol HTTP
        • ...
      • Fournisseur d'accès (FAI) (Free,SFR ...)
  2. Un navigateur Web (Browser) graphique ou texte

Trouver sa ressource

Uniform Resource Locator (adresse web)

http :// www.cnam.fr / .../repertoire/... / unepage.html
↑   ↑   ↑   ↑
protocole   adresse du serveur   chemin vers le fichier/   page demandée

Page web affichée par un navigateur graphique

la page sur un écran graphique

Page web affichée par un téléphone mobile

la page sur un vieux telephone

la page sur un android (émulateur)

la page sur un iphone (émulateur)

Page web affichée par un navigateur en mode texte

la page sur un navigateur en mode texte

Page web reçue par le navigateur

<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="UTF-8">
  <title>Developpement web 1</title>
</head>

<body>
  <h1>Bienvenue au cours Developpement Web</h1>
  <img src="../images/nenuphars.png" alt="Un beau nénuphars en fleur">
  <p>
    Ce cours a pour objectif de dresser un tableau complet de
    l'architecture
    du <a href="http://fr.wikipedia.org/wiki/Web">WEB</a> et des technologies
    concernées dans la construction d'un site basique.
  </p>
  <h2>le complément</h2>
  <p>
    Le cours de programmation javascript
  </p>
</body>

</html>

Comment est créer le code de la page

écrite avec un éditeur de texte

La page HTML

La page HTML

structure de la page

La page HTML (emboîtement de balises)

la page comme emboitement de balise

La page HTML (vue comme un arbre)

la page comme un arbre

Structuration vs présentation

Structuration : HTML ✅

Mais comment présenter?
- Couleur du fond ? - Taille, couleur de titres - Position des blocs ...

Présentation : CSS (cascading style sheet)

body  {background-color:white;}        /* fond blanc */                 
h1    {color:red;font-size:xx-large}   /* titre de niveau 1 en rouge et tres gros */
img+p {border:dashed;}                 /* les paragraphes qui suivent une image
...                                    /*  ont un bord pointillé                  */
Sélecteur {suite de couples `propriété:valeur;`}

Lien HTML et CSS

Fichier HTML avec CSS entre les balises (<style>) css

...

<head>
  <meta charset="UTF-8">
  <title>Developpement web 1</title>
  <style>
    body  {background-color:yellowgreen;}                   
    h1 {color:red; font-size:xx-large}
    img+p {border:dashed;}   
  </style>
</head>

<body>
...

Lien HTML et CSS

Fichier HTML avec le lien (<link>) vert le fichier css externe

...

<head>
  <meta charset="UTF-8">
  <title>Developpement web 1</title>
  <link rel="stylesheet" href="pageExample.css">
</head>

<body>
  <h1>Bienvenue au cours Developpement Web</h1>
...

Feuille de style : fichier texte en langage CSS (extension css):

body  {background-color:yellowgreen;}                   
h1 {color:red; font-size:xx-large}
img+p {border:dashed;}  
...

HTML et CSS (résultat)

Fichier CSS transmis au navigateur après (ou avec) la page web.
interprété pour afficher:

le code html avec le lien css

Intérêt des feuilles de style externes

En résumé

Mais, ce n'est pas suffisant...

Pages dynamiques: appel de scripts coté serveur

Insuffisance des pages statiques

On veut construire les pages au moment de la demande,
lire/stoker des informations sur le serveur, ...

Exemple : Reservation de Train

Impossible à faire avec juste HTML + CSS !!!!!!, il faut un langage de programmation qui produit du code html sur le serveur.

Pages dynamiques: appel de scripts coté serveur

En résumé

principe du dynamisme cote serveur

Dynamisme coté Navigateur

Appel de script Javascript

principe de l'exécution coté client

Exemple verification de formulaire

Démo

Verification de formulaire : source HTML

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <title>Example de formulaire</title>
    <script src="traitementJS.js"></script>
</head>

<body>
    <h1>Example de formulaire </h1>
    <form action="http://cedric.cnam.fr/~pons/ECHO/index.php" 
          method="get" onsubmit="return verification()">
        <label for="nom">nom</label>
        <input name="nom" id="nom" required>
        <input type="submit">
    </form>
</body>

</html>

Vérification de formulaire source JS

function  verification(){
    const nom =document.getElementById('nom').value;
     let result=(/^[a-z]/i).test(nom);
     if(!result){alert("le nom doit commencer par une lettre !")}   
     return result;
}

Web 2.O et suivant, Mixer les 2 approches, Ajax, ...

les prochains cours