Interaction Homme-Machine sur le web

I- HTML/CSS

1) Rappels

Echange d'informations entre un ordinateur et un serveur

Vous avez vu en SNT ce qu'était le Web, sa différence d'avec Internet, ce qu'était le protocole HTTP, le principe des serveurs DNS, puis avez rapidement travaillé sur les langages HTML et CSS.

Si vous avez besoin de vous rafraîchir la mémoire, il vous est possible d'aller (re)lire le cours => Internet - Le Web.

Vous ne devriez pas avoir trop de problème pour créer une page ressemblant à première vue à celle-là : CV de James Bond

2) Chemin relatif / chemin absolu

Dans un document HTML et en informatique d'une façon générale, il est possible d'indiquer "où" se trouve un fichier de 2 façons différentes :

Note

• De façon absolue, c'est à dire que vous donnez son adresse complète, et vous pourrez y accéder d'où que vous vous trouviez sur internet.
  dans ce cas, l'adresse est de la forme http(s)://serveur.xyz/dossier_1/dossier_2/.../dossier_n/mon_image.png

• De façon relative, et là l'emplacement de l'image est donné par rapport à la page sur laquelle vous vous trouvez
  Si votre page est dans http(s)://serveur.xyz/dossier_1/dossier_2/ma_page.html et que l'image est dans http(s)://serveur.xyz/dossier_1/dossier_2/images/mon_image.png, il vous sera possible d'y faire référence dans ma_page.html avec l'adresse images/mon_image.png ce qui est plus court mais qui ne marchera plus si jamais vous changez la page web d'emplacement sur votre serveur !

Note

Ces 2 façons d'indiquer un chemin ont chacune leur avantage et leur inconvénient :

• Dans le premier cas, on peut utiliser n'importe quel document disponible sur internet sans même avoir à l'enregistrer sur son propre site internet. Il faut néanmoins s'interroger sur les droits que nous avons, puisque dans ce cas, ce sont les ressources du site web hébergeant l'image qui sont mobilisées lorsqu'une personne navigant sur notre site visionne l'image. On appelle cela le hotlinking

• Dans le second cas, il faut imaginer qu'un site web peut tout à fait changer d'adresse. Par exemple l'adresse du mien était initialement http://julien.bernon.free.fr (et il est d'ailleurs partiellement toujours en service). La migration ne concerne pas forcément les données qui peuvent rester sur le même ordinateur, avec la même adresse IP, ce seront simplement les DNS qui associeront cette adresse IP à une nouvelle adresse web. A ce moment, les adresses absolues ne fonctionneront plus, puisqu'elles seront liées à l'ancienne adresse du site qui aura été remplacée dans les serveurs DNS. Au contraire, les adresses relatives ne changeront pas, puisque la position des fichiers hébergées par votre site resteront les mêmes par rapport à votre page web. Il est donc plus sûr d'utiliser des liens relatifs vers ses propres fichiers au sein d'un site web.

Exercice : réarranger un mini site Web (sur les poneys)

Un exercice proposé par mon collègue Stéphane Levy : un petit site web est enregistré dans cette archive
Cliquer pour télécharger

Le site ne s'affiche pas comme il le devrait car les liens (tous relatifs) ne sont pas correctement renseignés, à vous de les corriger !

Cliquer pour voir le corrigé

Si l'on réalise l'arborescence de ce fichier on obtient cela :

Arborescence

📋 Texte

racine
|->index.html
|->images
|  |->fondPage1.png
|  |->fondPage2.jpg
|  |->lovePP.gif
|->pages_prim
|  |->page1.html
|  |->page2.html
|  |->pages_sec
|     |->pagePP.html
|->style
|  |->design.css</pre>

• Il est nécessaire que la page index.html accède à son propre design : on indique un chemin en "style/design.css".
• Pour les pages page1.html et pagePP.html c'est différent : elles ne sont pas dans le répertoire parent du répertoire style. Il faut alors indiquer qu'il est nécessaire de remonter dans le répertoire parent à l'aide de ../ avant de redescendre dans le dossier style.
  Cela donne pour page1.html ../style/design.css et pour pagePP.html ../../style/design.css (car il faut remonter de 2 répertoires).

II- Javascript

1) Présentation

Javascript est un langage de programmation, permettant de rendre les pages web interactives. Pour en voir un exemple simple, il vous suffit de cliquer de nouveau sur le CV de James Bond, puis d'appuyer sur la touche "espace"... Vous pourrez déplacer la "raquette" à l'aide des touches ← et →.

Comme pour le langage CSS, il est possible de placer du code javascript à 3 endroits différents : - Dans un fichier séparé (meilleure pratique), il s'agit d'un fichier texte, portant l'extension .js.
On fera appel à ce fichier à l'aide de <script src="adresse_du_script/nom_du_script.js"></script> - A l'intérieur de la page HTML, le code est écrit entre les balises <script>du code javascript</script> - A l'intérieur d'une balise, généralement pour déterminer une action lors d'un événement. Pour du code qui s'éxécute lorsque l'on clique sur un objet, on aura par exemple :
<div onclick="du code javascript"></div>

2) Syntaxe

Dans son écriture Javascript est plus proche du PHP (chapitre suivant) et du C que du Python. Néanmoins vous ne devriez pas être complètement dépaysés :

En javascriptEn python

JavaScript

function jusque(nombre){
    somme=0;
    for (i=0;i<1000;i++){
        somme+=i;
    }
    console.log(somme);
    return somme
}
jusque(1000);

🐍 Script Python

def jusque(nombre):
    somme=0
    for i in range(1000):
        somme+=1
    print(somme)
    return somme
jusque(1000)

Remarques

• Pour voir la sortie console, les navigateurs internet ont la fonction "outils de développement".
• L'indentation n'a pas vraiment d'importance pour l'interpréteur : la fin de "ligne de commande" est définie par le point virgule, qui peut être oublié si vous allez à la ligne.
• Ce qui sépare les blocs d'instruction sont les accolades { et }.
• On définit une fonction à l'aide de function

3) Intéraction avec les objets du DOM

Une page web est structurée en forme d'arbre regroupant tous les objets. Javascript permet une interaction simple avec chacun d'eux de 4 façons différentes :

• de part leur type (div, span, td, ...) avec la commande getElementsByTagName
• de part leur classe avec la commande getElementsByClassName
• de part leur classe avec la commande getElementsByName
• de part leur identifiant avec la commande getElementsById

Note

Les 3 premières méthodes renvoient des listes dans lesquelles chaque item est un élément du DOM correspondant à la demande. La dernière méthode ne retourne que l'objet muni de l'identifiant donné puisqu'un identifiant est censé être unique à l'intérieur d'une page web.

modifier les propriété d'un type d'élément

Je souhaite modifier toutes les objets div de la page en colorant leur fond en rouge, en cliquant sur un bouton de la page. Il me suffit de créer un bouton à l'aide de

CodeAspect

JavaScript

<input type="button" onclick="bascule();" value="Colorer">

puis d'ajouter dans la page le code suivant :

JavaScript

<script>
function bascule(){
    liste_div=document.getElementsByTagName("div");//récupération des div, stockés dans liste_div
    for(i=0;i<liste_div.length;i++){
        liste_div[i].style.backgroundColor="red"; //on modifie la propriété style.backgroundColor de chaque élément
    }
}
</script>

Pour essayer → et pour annuler →
(la fonction est presque similaire, elle efface simplement tous les attributs backgroundColor, et le style CSS par défaut est alors utilisé)*

Modifier un encadré

Je souhaite modifier uniquement cet encadré que j'ai préalablement nommé "a_changer", en basculant tout le texte en majuscules, en cliquant sur un bouton de la page. Il me suffit de créer un bouton à l'aide de

JavaScript

<button onclick="majuscule();">En majuscule </button>
// ou
<input type="button" onclick="majuscule();" value="En majuscule" >

Essayer !

puis d'ajouter dans la page le code suivant :

JavaScript

<script>
function majuscule(){
    liste_div=document.getElementById("a_changer");//récupération de l'encadré
    liste_div.innerHTML=liste_div.innerHTML.toUpperCase(); //on modifie le contenu de l'encadré
}
</script>

4) Gestion des événements

Il est également possible d'utiliser des événements pour intéragir avec la page web. L'un a été utilisé au-dessus : c'est l'événement onclick, que l'on peut intégrer à un élément. Dans l'exemple du CV de James Bond, on utilise onkeydown (appui sur une touche du clavier) et onkeyup (lorsqu'une touche est relâchée).

III- Formulaires

1) Présentation

Un formulaire peut vous permettre de récupérer des informations, que ce soit pour remplir une fiche d'information, mais également pour saisir des identifiants afin de se connecter à votre site, ou bien pour réaliser des exercices corrigés.

Tip

Un bon tutoriel concernant les formulaires est présent sur le site de Mozilla : Voir le tutoriel

Pour résumer :

Une zone formulaire commence par la balise <form> à l'intérieur de laquelle sont précisées :

• la méthode utilisée pour envoyer les données(POST ou GET)
• la page web destinataire des informations
• La zone contient différents champs sous forme de balises <input type=le_type>
• Enfin, un bouton qui a pour fonction d'envoyer les informations à la page indiquée

2) Un (très) bref aperçu de PHP

HTML, CSS et javascript sont tous trois executés sur le client, c'est à dire sur l'ordinateur/téléphone/tablette/réfrigérateur connecté de la personne consultant le site. Il est cependant nécessaire que certaines tâches soient exécutées sur le serveur, notamment pour que l'utilisateur n'ait pas accès à toutes les données du site.

On peut par exemple utiliser le langage php (d'autres sont possibles, comme python avec Django, javascript avec NodeJS, ...). Il est possible d'inclure du code php dans une page web, mais comme ce code sera traité par le serveur avant que celui-ci n'envoie la page au client, il n'apparaîtra pas dans le code HTML visible par l'utilisateur.

Le code PHP s'écrit entre balises :

PHP

    <?php
    ...du_code_php...
    ?>

Inclure l'heure dans une page internet

Je peux utiliser le code suivant :

PHP

<?php 
    echo date('d/m/Y h:i:s'); 
?>

→Voir le résultat (si vous cliquez et affichez la source, vous ne verrez que la date et non cette ligne de code, pourtant présente).

Il est nécessaire de parler de php, car le formulaire, une fois rempli, va être traité par le serveur. Il faut donc comprendre qu'à partir du moment où l'on soumet un formulaire, celui-ci a été affiché sur votre écran grâce à HTML-CSS-javascript, mais sera maintenant traité grâce à PHP.

Un tutoriel interessant pour débuter :

Afin de pouvoir tester les méthodes qui viennent et les possibilités du php, il va vous être nécessaire d'installer sur votre ordinateur un serveur php.

Il en existe plusieurs comme Wampserver, Easyphp ou MAMP.

Les spécificités de ce langage n'étant pas au programme de 1^ere, je vous propose ce MOOC : Concevez votre site web avec PHP et MySQL sur Openclassroom qui est une introduction claire à php, et pourra vous emmener plus loin.

3) Méthode GET, méthode POST

Il y a 2 façons d'envoyer un formulaire au serveur : la méthode GET et la méthode POST.

Voici 2 formulaires identiques rédigés

avec la méthode GET	avec la méthode POST
:---:	:---:

Vous pouvez récupérer l'archive contenant les 2 formulaires ainsi que leurs pages cible respectives en cliquant ici
Une fois le bouton Valider cliqué, vous êtes dirigé vers la page cible et les 2 méthodes affichent des résultats identiques.

Cours

La seule différence réside dans la barre d'adresse :

• La méthode GET transfère les données du formulaire à la suite de l'URL de la page cible, séparées par un ?.
• La méthode POST transfère les données du formulaire de façon masquée, mais non chiffrée

Intérêt

• La méthode GET permet d'afficher les informations transmises, ce qui facilite le transfert d'une recherche à quelqu'un d'autre ou l'accès à une page web d'un site généré en PHP.

• Les données transférées via la barre d'adresse sont fortement limitées, il n'est donc par exemple pas possible de transmettre une image au serveur par cette méthode

• La méthode POST permet de transférer des données bien plus conséquentes, c'est au serveur d'en limiter la capacité (généralement quelques Mo), il est donc possible de transférer par ce moyen des images, des sons, et tout type de documents.

la méthode POST n'est pas sécurisée !

Ce n'est pas parce que le contenu transféré par la méthode POST n'est pas visible que celui-ci n'est pas sécurisé. Il est toujours lisible sans problème lorsque l'on lit directement les paquets transférés par votre navigateur. Aussi, si vous avez besoin de partager des données sensibles (mot de passe, numéro de carte bancaire, ...) il est impératif d'utiliser le protocole https qui chiffre la transmission entre le client et le serveur afin que le contenu de l'échange ne soit pas lisible par une personne qui intercepterait la communication !

Exercice

Utilisez les moteurs de recherche Google, Bing, Qwant, Duckduckgo et Ecosia

Faites une recherche quelconque et validez. Quelle méthode est utilisée ?