Intéractions homme-machine sur le Web
Ce cours présente les principes de base du fonctionnement des interfaces web, telles qu'on peut en trouver dans des site web ou des applications web. Commençons par rappeler quelques éléments du cours de SNT en seconde.
Principe de web
Un navigateur ou client web, comme Firefox, permet de consulter du contenu web par le biais d'un réseau, en général Internet.
Pour afficher le contenu, le navigateur effectue une requête HTTP (ou HTTPS) auprès d'un logiciel responsable de distribuer ce contenu, appelé serveur web. Le serveur traite alors la requête et renvoie le contenu demandé ou un message d'erreur. Souvent, le contenu est une page web, mais il peut aussi être une image, un flux vidéo, ...
La page web peut contenir de données de contrôle, comme les liens hypertextes, que le navigateur sait exploiter pour faire d'autres requêtes, et ainsi dialoguer avec un ou plusieurs serveurs.
HTML, contenu de la page
Les pages web sont a minima des documents en langage HTML, qui décrivent des éléments imbriqués les uns dans les autres. Les éléments sont décris par des balises qui ont le nom de l'élément, par exemple pour un paragraphe, on a les balises <p> et </p>.
Le code suivant :
<article>
<h2> un titre </h2>
<p>
un paragraphe de texte
</p>
<p>
un autre paragraphe de texte
</p>
</article>
donnera quelque chose comme :
un titre
un paragraphe de texte
un autre paragraphe de texte
Un document HTML comporte en général des éléments spéciaux qui donne des informations sur le contenu qui ne sont pas rendues à l'écran, comme des feuilles de style. Ces éléments sont en général placés dans un élément head, par opposition au contenu qui est placé dans un élément body. Voici le code d'une page HTML complète :
<!DOCTYPE html>
<html>
<head></head>
<body>
<article>
<h2> un titre </h2>
<p>
un paragraphe de texte
</p>
<p>
un autre paragraphe de texte
</p>
</article>
</body>
</html>
Remarque
Vous pouvez, à partir de n'importe quel navigateur, afficher la structure d'une page web en faisant un clic droit sur un élément et en choisissant inspecter.
CSS, le style
Dans notre élément head, on peut ajouter un lien vers fichier en langage CSS pour améliorer le style de notre page, comme suit :
Le fichier CSS contient un certain nombre de règles. Chaque règle permet de modifier les propriétés des éléments correspondant à un selecteur. Un selecteur peut être le nom d'un élément HTML. Par exemple, si on ajoute un fichier CSS à notre page HTML, avec la règle
ça donne :
un titre
un paragraphe de texte
un autre paragraphe de texte
Classes et identifiants
Pour plus cibler plus facilement certains éléments HTML depuis le CSS, on peut leur ajouter des classes ou un identifiant.
<article>
<h2 class="avec-bordures"> un titre </h2> <!-- classe avec-bordures -->
<p id="premier-paragraphe"> <!-- identifiant premier-paragraphe-->
un paragraphe de texte
</p>
<p class="avec-bordures">
un autre paragraphe de texte
</p>
</article>
Un même identifiant ne peut être donné qu'à un seul élément dans le HTML, et chaque élément à au plus un identifiant, alors qu'une même classe peut être donnée à plusieurs éléments, et qu'un élément peut avoir plusieurs classes.
Dans le CSS, on fait référence à un identifiant en le préfixant d'un #. Pour un classe, on utilise un . :
Ajouter ces deux règles au CSS de notre page après y avoir ajouté les classes et identifiant comme présenté ci-dessus donnera :
un titre
un paragraphe de texte
un autre paragraphe de texte
Comportement de la page et dialogue avec le serveur
Dans ce cours, nous allons voir plus en détail comment une page web gère les intéractions avec l'utilisateur à l'aide d'un langage de programmation appelé JavaScript, puis comment une page web peut dialoguer avec un serveur, soit à l'aide de formulaires, soit à l'aide du JavaScript.