[[{"text":"","posi":2}],[{"text":"

Tim Berners-Lee développe le premier navigateur web (logiciel permettant de lire des pages contenant des hypertextes), 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 se base sur trois choses : le protocole HTTP (HyperText Transfert Protocol), les URL (Uniform Resource Locator) et le langage de description HTML (HyperText Markup Language). Nous aurons, très prochainement l'occasion de revenir sur ces trois éléments.

Une chose très importante à bien avoir à l'esprit : beaucoup de personnes confondent \"web\" et \"internet\". Même si le \"web\" \"s'appuie\" sur internet, les deux choses n'ont rien à voir puisqu'\"internet\" est un \"réseau de réseau\" s'appuyant sur le protocole IP alors que, comme nous venons de le voir, le web est la combinaison de trois technologies : HTTP, URL et HTML. D'ailleurs on trouve autre chose que le \"web\" sur internet, par exemple, les emails avec le protocole SMTP (Simple Mail Transfert Protocol) et les transferts de fichiers avec le protocole FTP (File Transfert Protocol).

"}],[{"text":"

Dans la barre d'adresse de votre navigateur web vous trouverez, quand vous visitez un site, des choses du genre : \"http://www.ac-grenoble.fr/disciplines/informatiquelycee/index.html\". Nous aurons l'occasion de reparler du \"http\" et du \"www.ac-grenoble.fr\" plus tard. La partie \"/disciplines/informatiquelycee/index.html\" s'appelle une URL.

Une URL (Uniform Resource Locator) permet d'identifier une ressource (par exemple un fichier) sur un réseau.

L'URL indique « l'endroit » où se trouve une ressource sur un ordinateur. Un fichier peut se trouver dans un dossier qui peut lui-même se trouver dans un autre dossier... On parle d'une structure en arborescence, car elle ressemble à un arbre à l'envers :

Comme vous pouvez le constater, la base de l'arbre s'appelle la racine de l'arborescence et se représente par un /

","title":"L'url","tagtitle":"h1"}],[{"text":"

Pour indiquer la position d'un fichier (ou d'un dossier) dans l'arborescence, il existe 2 méthodes : indiquer un chemin absolu ou indiquer un chemin relatif. Le chemin absolu doit indiquer « le chemin » depuis la racine. Par exemple l'URL du fichier fichier3.jpg sera : /dossier2/dossier3/fichier3.jpg

Remarquez que nous démarrons bien de la racine / (attention les symboles de séparation sont aussi des /)

Imaginons maintenant que le fichier fichier1.css fasse appel au fichier fichier3.jpg (comme un fichier HTML peut faire appel à un fichier CSS). Il est possible d'indiquer le chemin non pas depuis la racine, mais depuis le dossier (dossier2) qui accueille le fichier1.css, nous parlerons alors de chemin relatif :

dossier3/fichier3.jpg

Remarquez l’absence du / au début du chemin (c'est cela qui nous permettra de distinguer un chemin relatif et un chemin absolu).

Imaginons maintenant que nous désirions indiquer le chemin relatif du fichier fichier1.css depuis l'intérieur du dossier dossier4.

Comment faire ?

Il faut « remonter » d'un « niveau » dans l'arborescence pour se retrouver dans le dossier dossier2 et ainsi pouvoir repartir vers la bonne « branche ». Pour ce faire il faut utiliser 2 points : ..

../dossier2/fichier1.css

Il est tout à fait possible de remonter de plusieurs « crans » : ../../ depuis le dossier dossier4 permet de « retourner » à la racine.

","title":"Chemin absolu ou chemin relatif ?"}],[{"text":"

Exercice : 

Soit la structure en arborescence suivante:

Le contenu du fichier \"fichier7.odp\" utilise le fichier \"fichier5.svg\". Donnez le chemin relatif qui devra ẽtre renseigner dans le fichier \"fichier7.odp\" afin d'atteindre le fichier \"fichier5.svg\".

Donnez le chemin absolu permettant d'atteindre le fichier \"fichier6.html\".

"},{"edit":""}],[{"text":"Remarque : la façon d'écrire les chemins (avec des slash (/) comme séparateurs) est propre aux systèmes dits « UNIX », par exemple GNU/Linux ou encore Mac OS. Sous Windows, ce n'est pas le slash qui est utilisé, mais l'antislash (\\). Pour ce qui nous concerne ici, les chemins réseau (et donc le web), pas de problème, c'est le slash qui est utilisé."}],[{"text":"","title":"Client / Serveur"}],[{"text":"

Afin assurer une continuité de service, dans les sociétés, plusieurs serveurs assurent exactement le même rôle (on parle de redondance). Vous vous doutez bien que Google ne possède pas qu'un seul serveur, en effet, en moyenne, chaque seconde, c'est environ 65000 clients qui se connectent aux serveurs du moteur de recherche de Google. Aucun serveur, même extrêmement performant, ne serait capable de répondre à toutes ces requêtes. Google, Amazon ou encore Facebook possèdent un très grand nombre de serveurs afin de pouvoir satisfaire les demandes des utilisateurs en permanence. Ces entreprises possèdent d'immenses salles contenant chacune des centaines ou des milliers de serveurs (ces serveurs sont rangés dans des armoires appelées \"baie serveur\").

Souvent les serveurs sont spécialisés dans certaines tâches, par exemple, les serveurs qui envoient aux clients des pages au format HTML sont appelés \"serveur web\".

Il y a quelques années, le web était dit « statique » : le concepteur de site web écrivait son code HTML et ce code était simplement envoyé par le serveur web au client. Les personnes qui consultaient le site avaient toutes le droit à la même page, le web était purement « consultatif » ou statique.

"}],[{"text":"

Les choses ont ensuite évolué : les serveurs sont aujourd'hui capables de générer eux-mêmes du code HTML. Les résultats qui s'afficheront à l'écran dépendront donc des demandes effectuées par l'utilisateur du site : le web est devenu dynamique.

Différents langages de programmation peuvent être utilisés « côté serveur » afin de permettre au serveur de générer lui-même le code HTML à envoyer. Le plus utilisé encore aujourd'hui se nomme PHP. D'autres langages sont utilisables côté serveur (pour permettre la génération dynamique de code HTML) : Java, Python, nodejs...

","title":"Pages web dynamiques"}],[{"text":"

Le lien ci-dessous renvoie la température d'une salle :

http://sciencesappliquees.com/templates/php/temp.php

Réaliser une page html qui affiche la température dans un div toutes les secondes.

Aide : 

• Utiliser innerHTML pour mettre la valeur de la température dans le div;
• Utiliser la fonction XMLHttpRequest() avec la script ci-dessous pour récupérer la température  1 fois sur le serveur:

<script type=\"text/javascript\">
  //declaration de l'objet pour la requete
  var maRequete = new XMLHttpRequest();
  //l'adresse email du serveur 
  var url = \"http://sciencesappliquees.com/templates/php/temp.php\";
 
  //gestion de la reponse du serveur
  maRequete.onload = function() {
     //reponse du serveur
     alert(this.responseText); //Affiche la reponse du seveur dans une fenêtre \"alert\"

  };//fin de la fonction reponse (get ou post, adresse , asynchrone) 

   //Choisir le type de requete
   maRequete.open(\"GET\", url, true);
   //envoyer la requete au serveur
   maRequete.send();
 </script>

Essayez ce code. Expliquez, en détail, ce qu'il fait.","title":"Les requête entre le serveur et le client"},{"edit":""},{"htm":"","css":"","js":""}],[{"text":"

• Utiliser la fonction XMLHttpRequest() avec la script ci-dessous pour récupérer la température  toutes les 2 secondes sur le serveur: 

<script>

function lancerRequete(){
   var maRequete = null; //initialiser l'objet
   
   //déclare l'objet requete
   if(window.XMLHttpRequest){
      maRequete = new XMLHttpRequest();
   }
   
   //url du serveur
   var url = \"http://sciencesappliquees.com/templates/php/temp.php\";
 
   //Choisir le type de requete
   maRequete.open(\"GET\", url, true);
 

//gestion de la reponse du serveur
   maRequete.onreadystatechange = function(){
     if(maRequete.readyState == 4){
        //affiche la réponse du serveur
        alert(maRequete.responseText);

     }
   }

   //envoyer la requete au serveur
   maRequete.send();
 
   //relance la fonction au bout de 2 secondes
   setTimeout('lancerRequete()', 2000);
 }
 //lance la fonction 
 lancerRequete();
</script>

 

Faire valider votre travail par le professeur.

"},{"edit":""},{"htm":"","css":"","js":""}],[{"text":"

 

A l'aide de la bibliothèque RGraph, afficher la température dans une jauge toutes les secondes.

Aide :

• Il faut ajouter dans le body de la page html une balise canvas avec l'id \"monCanvas\" pour afficher la jauge à l'intérieur :

<canvas id=\"monCanvas\" width=\"100\" height=\"400\">
 [No canvas support]
</canvas>

• Pour utiliser RGraph, il faut importer les librairies suivantes :

<script src=\"https://www.rgraph.net/libraries/RGraph.common.core.js\" ></script>
<script src=\"https://www.rgraph.net/libraries/RGraph.thermometer.js\" ></script>

• Pour créer l'objet jauge, vous devez utilisez le script ci-dessous :

<script type=\"text/javascript\">
 var thermometre = new RGraph.Thermometer({
   id: 'monCanvas',
   min: 0,
   max: 30,
   value: 20.3,
   options: {
   }
   }).draw();

</script>

• Pour mettre à jour la valeur de la jauge, vous devez utiliser les instructions suivantes :

thermometre.value = laNouvelleValeur;
RGraph.Redraw();

 

Faire valider votre travail par le professeur.

","title":"La requête dans une Jauge"},{"edit":""},{"htm":"","css":"","js":""}],[{"text":"

Nous avons 2 \"input text\" sur une page html :

<label>Température</label><input type=\"text\" name=\"temp\" id=\"temp\" value=\"19\"><label>°C</label><br/>

<label>humidité</label><input type=\"text\" name=\"humi\" id=\"humi\" value=\"45\"><label>%</label>

Nous souhaitons envoyer leur contenu, au serveur ci-dessous, par la méthode Get.

http://sciencesappliquees.com/templates/php/metGet.php 

Réaliser le programme. 

Aide : 

• Pour la méthode Get, l'url doit être sous la forme : adresseServeur?parametre1=valeur1&parametre2=valeur2
• Pour récupérer la valeur d'un \"input text\", il faut utiliser l'instruction document.getElementById(\"idDuDiv\").value 

 Faire valider votre travail par le professeur. 

","title":"La requête Get"},{"edit":""},{"htm":"","css":"","js":""}],[{"text":"

Nous avons 2 \"input text\" sur une page html :

<label>Température</label><input type=\"text\" name=\"temp\" id=\"temp\" value=\"19\"><label>°C</label><br/>

<label>humidité</label><input type=\"text\" name=\"humi\" id=\"humi\" value=\"45\"><label>%</label>

Nous souhaitons envoyer leur contenu, au serveur ci-dessous, par la méthode Post.

http://sciencesappliquees.com/templates/php/metPost.php 

Réaliser le programme. 

Aide : 

• Utiliser la fonction XMLHttpRequest() avec la script ci-dessous pour récupérer la température  1 fois sur le serveur:

<script>

   //déclaration de l'objet contenant les données à envoyer.
   var data = \"parametre1=valeur1&parametre2=valeur2\";

   //declaration de l'objet pour la requete   
   var maRequete = new XMLHttpRequest();

   //url du serveur
   var url = \"adresse de la page\";
 

//gestion de la reponse du serveur
   maRequete.onreadystatechange = function(){
       if(maRequete.readyState == 4){
          //affiche la réponse du serveur
          alert(maRequete.responseText);
       }
   }

    //Choisir le type de requete
    maRequete.open(\"POST\", url, true);
    

    //Entête de la requete pour la méthode POST
    maRequete.setRequestHeader(\"Content-Type\", \"application/x-www-form-urlencoded\");

   //envoyer la requete au serveur
   maRequete.send(data);

</script>

Faire valider votre travail par le professeur. 

 

","title":"La requête Post"},{"edit":""},{"htm":"","css":"","js":""}],[{"text":"

Donner une définition du JSON.

Le serveur ci-dessous envoie les datas au format JSON.

http://sciencesappliquees.com/templates/php/json.php

Elles sont sous la forme suivante :

{
  \"temp\":19.07,
  \"humi\":27,
  \"led1\":\"OFF\"
}

Réaliser une page html qui affiche les 3 grandeurs dans 3 div toutes les secondes.

Aide :

• Pour convertir la \"responseText\" en JSON, il faut utiliser l'instruction suivante : 

var data = JSON.parse(maRequete.responseText);

• Pour récupérer la valeur d'une grandeur d'un JSON, par exemple \"temp\", il faut utiliser : data.temp  

Faire valider votre travail par le professeur. 

 

","title":"Les datas au format JSON"},{"edit":""},{"htm":"","css":"","js":""}],[{"text":"

Revenons sur l'adresse qui s'affiche dans la barre d'adresse d'un navigateur web et plus précisément sur le début de cette adresse c'est-à-dire le \"http\"

Selon les cas cette adresse commencera par http ou https (nous verrons ce deuxième cas à la fin de cette activité).

Le protocole (un protocole est ensemble de règles qui permettent à 2 ordinateurs de communiquer ensemble) HTTP (HyperText Transfert Protocol) va permettre au client d'effectuer des requêtes à destination d'un serveur web. En retour, le serveur web va envoyer une réponse.

Voici une version simplifiée de la composition d'une requête HTTP (client vers serveur) :

• la méthode employée pour effectuer la requête
• l'URL de la ressource
• la version du protocole utilisé par le client (souvent HTTP 1.1)
• le navigateur employé (Firefox, Chrome) et sa version
• le type du document demandé (par exemple HTML)
• ...

Certaines de ces lignes sont optionnelles.

","title":"Http"}],[{"text":"

Voici un exemple de requête HTTP :

\nGET /mondossier/monFichier.html HTTP/1.1\nUser-Agent : Mozilla/5.0\nAccept : text/html\n\t\t\t

Nous avons ici plusieurs informations :

• \"GET\" est la méthode employée (voir ci-dessous)
• \"/mondossier/monFichier.html\" correspond l'URL de la ressource demandée
• \"HTTP/1.1\" : la version du protocole est la 1.1
• \"Mozilla/5.0\" : le navigateur web employé est Firefox de la société Mozilla
• \"text/html\" : le client s'attend à recevoir du HTML

Revenons sur la méthode employée :

Une requête HTTP  utilise une méthode (c'est une commande qui demande au serveur d'effectuer une certaine action). Voici la liste des méthodes disponibles :

GET, HEAD, POST, OPTIONS, CONNECT, TRACE, PUT, PATCH, DELETE

Détaillons 4 de ces méthodes :

• GET : C'est la méthode la plus courante pour demander une ressource. Elle est sans effet sur la ressource.
• POST : Cette méthode est utilisée pour soumettre des données en vue d'un traitement (côté serveur). Typiquement c'est la méthode employée lorsque l'on envoie au serveur les données issues d'un formulaire.
• DELETE : Cette méthode permet de supprimer une ressource sur le serveur.
• PUT : Cette méthode permet de modifier une ressource sur le serveur

"}],[{"text":"

Une fois la requête reçue, le serveur va renvoyer une réponse, voici un exemple de réponse du serveur :

\nHTTP/1.1 200 OK\nDate: Thu, 15 feb 2019 12:02:32 GMT\nServer: Apache/2.0.54 (Debian GNU/Linux) DAV/2 SVN/1.1.4\nConnection: close\nTransfer-Encoding: chunked\nContent-Type: text/html; charset=ISO-8859-1\n<!doctype html>\n<html lang=\"fr\">\n<head>\n<meta charset=\"utf-8\">\n<title>Voici mon site</title>\n</head>\n<body>\n <h1>Hello World! Ceci est un titre</h1>\n<p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>\n</body>\n</html>\n\t\t\t

Nous n'allons pas détailler cette réponse, voici quelques explications sur les éléments qui nous seront indispensables par la suite :

Commençons par la fin : le serveur renvoie du code HTML, une fois ce code reçu par le client, il est interprété par le navigateur qui affiche le résultat à l'écran. Cette partie correspond au corps de la réponse.

La 1re ligne se nomme la ligne de statut :

• HTTP/1.1 : version de HTTP utilisé par le serveur
• 200 : code indiquant que le document recherché par le client a bien été trouvé par le serveur. Il existe d'autres codes dont un que vous connaissez peut-être déjà : le code 404 (qui signifie  «Le document recherché n'a pu être trouvé»).

Les 5 lignes suivantes constituent l'en-tête de la réponse, une ligne nous intéresse plus particulièrement :

\nServer: Apache/2.0.54 (Debian GNU/Linux) DAV/2 SVN/1.1.4\n\t\t\t

Le serveur web qui a fourni la réponse http ci-dessus a comme système d'exploitation une distribution GNU/Linux nommée \"Debian\" (pour en savoir plus sur GNU/Linux, n'hésitez pas à faire vos propres recherches). \"Apache\" est le coeur du serveur web puisque c'est ce logiciel qui va gérer les requêtes http (recevoir les requêtes http en provenance des clients et renvoyer les réponses http). Il existe d'autres logiciels capables de gérer les requêtes http (nginx, lighttpd...) mais, aux dernières nouvelles, Apache est toujours le plus populaire puisqu'il est installé sur environ la moitié des serveurs web mondiaux !

","title":"Réponse du serveur à une requête HTTP"}],[{"text":"

Le \"HTTPS\" est la version \"sécurisée\" du protocole HTTP. Par \"sécurisé\" en entend que les données sont chiffrées avant d'être transmises sur le réseau.

Voici les différentes étapes d'une communication client - serveur utilisant le protocole HTTPS :

• le client demande au serveur une connexion sécurisée (en utilisant \"https\" à la place de \"http\" dans la barre d'adresse du navigateur web)
• le serveur répond au client qu'il est OK pour l'établissement d'une connexion sécurisée. Afin de prouver au client qu'il est bien celui qu'il prétend être, le serveur fournit au client un certificat prouvant son \"identité\". En effet, il existe des attaques dites \"man in the middle\", où un serveur \"pirate\" essaye de se faire passer, par exemple, pour le serveur d'une banque : le client, pensant être en communication avec le serveur de sa banque, va saisir son identifiant et son mot de passe, identifiant et mot de passe qui seront récupérés par le serveur pirate. Afin d'éviter ce genre d'attaque, des organismes délivrent donc des certificats prouvant l'identité des sites qui proposent des connexions \"https\".
• à partir de ce moment-là, les échanges entre le client et le serveur seront chiffrés grâce à un système de \"clé publique - clé privée\" (nous n'aborderons pas ici le principe du chiffrement par \"clé publique - clé privée\"). Même si un pirate arrivait à intercepter les données circulant entre le client et le serveur, ces dernières ne lui seraient d'aucune utilité, car totalement incompréhensible à cause du chiffrement (seuls le client et le serveur sont aptes à déchiffrer ces données)

D'un point vu strictement pratique il est nécessaire de bien vérifier que le protocole est bien utilisé (l'adresse commence par \"https\") avant de transmettre des données sensibles (coordonnées bancaires...). Si ce n'est pas le cas, passez votre chemin, car toute personne qui interceptera les paquets de données sera en mesure de lire vos données sensibles.

","title":"HTTPS"}],[{"text":"Sources : "}]]