Client et serveur
Le navigateur joue le rôle de client. Il envoie des requêtes HTTP à un serveur qui renvoie des réponses contenant des ressources : HTML, CSS, JavaScript, images ou données.
Première NSI • Fiche de révision • QCM /20
Interactions entre l’homme et la machine sur le Web
L’essentiel du chapitre à connaître, puis 20 questions pour vérifier immédiatement tes acquis.
🌐
Fiche de révision
Le chapitre complet, structuré pour réviser efficacement
Les repères essentiels
HTML et CSS
HTML structure le contenu d’une page à l’aide de balises. CSS définit sa présentation. Il est important de séparer autant que possible structure et mise en forme.
Formulaires
Un formulaire permet à l’utilisateur de transmettre des données. Les attributs name identifient les champs envoyés. Les méthodes GET et POST correspondent à deux façons courantes de transmettre les données.
JavaScript et DOM
JavaScript peut réagir aux événements et modifier le DOM, représentation structurée de la page chargée dans le navigateur.
Sécurité et données
Les données reçues d’un utilisateur ne doivent jamais être considérées comme fiables sans contrôle. La validation côté client améliore l’ergonomie mais le serveur doit aussi vérifier les données.
La fiche détaillée
Toutes les notions du chapitre sont reprises ici avec les définitions, méthodes, exemples et points à retenir.
Interactions entre l’homme et la machine sur le Web
Cette fiche de révision appartient au chapitre « Interactions entre l’homme et la machine sur le Web ». Les notions suivantes sont abordées : les Interfaces Hommes-Machine, les interactions sur le Web en mode « Local », les interactions sur le Web en mode «Client-Serveur».
Les Interfaces Hommes-Machine
Les Interfaces Homme-machine sont appelées IHM, elles permettent à un utilisateur d’interagir avec une machine.
Les IHM peuvent prendre différentes formes :
•
les interfaces d’acquisition : clavier, joysticks, bouton, télécommande, capteur, …
•
les interfaces de restitution : écran, Led, haut parleur, …
•
les interfaces combinées : écran tactile, multi-touch, commande à retour d’efforts, ...
Les modes d’interactions des IHM peuvent être:
•
parlé: commandes ou guide vocaux, …
•
écrit: les entrées par le clavier, affichage du texte sur un écran, …
•
gestuel: désignation 2D ou 3D, souris, écran tactile, capteurs sur un gant de données,…
•
visuel: graphiques, images, animations, …
L'interaction est dite multimodale si elle met en jeu plusieurs modalités sensorielles et motrices.
Les interactions sur le Web en mode « Local »
Dans le cas d’un site internet, l’interaction se fait par le biais d’une page web. Il est possible pour interagir avec le site de:
•
cliquer sur des liens pour naviguer dans des pages
•
saisir dans des zones de textes ou cliquer sur des objets (boutons, checkbox, ...)
L’interaction peut se faire par un formulaire HTML, qui est encapsulé dans la page Web par les balises <FORM> et </FORM> il est possible de demander différents types de « champs » :
•
champs texte : <input type="text" name="name">
•
champs mot de passe : <input type="password" name="mdp"> (la saisie est cachée)
•
champs nombre : <input type="number" name="numero">
•
champs date : <input type="date" name="calendrier" value="2020-06-09">
•
champs zone de texte : <textarea name="nom" rows=4 cols=40>4 lignes</textarea>
•
liste d’options : <input type="radio" name="genre" value="H" checked >
•
liste à cocher : <input type="checkbox" name="passions" checked>
•
liste déroulante : <select name="pays"> <option selected>FRANCE</option></select>
•
bouton : <input type="submit" value="Envoyer le formulaire">
L’attribut « required » permet de rendre un champs « obligatoire ». Les éléments d’un formulaire peuvent servir à envoyer un mail, ou interagir en local avec l’ordinateur par l‘intermédiaire d’un langage comme le JavaScript. Il est préférable d’utiliser La méthode POST plutôt que GET car elle transmet les données dans le corps de la requête : les données sont donc moins visibles.
Le JavaScript est un langage de programmation par script contenu dans une pages web qui s’exécute principalement en local il est crée en 1995 par Brendan Eich. C’est un langage orienté objet qui gère les événements intervenant dans une page web, ce qui peut la rendre dynamique. De part sa nature le JavaScript peut changer le code HTML, par exemple en cliquant sur un bouton, le texte du site web va devenir rouge. Quelques exemples de fonctions qui appellent du code Javascript dans une page Web :
•
onclick=’maFonctionJs()’ : se déclenche lorsqu'un clic est fait sur l'élément
•
onload=’maFonctionJs()’ : se déclenche lorsque le document a terminé son chargement
•
onmouseover=’maFonctionJs()’: se déclenche lors de l’entrée du survol de la souris
•
onmouseout=’maFonctionJs()’: se déclenche lors du départ du survol de la souris
•
onchange=’maFonctionJs()’: se produit lors d’une modification sur un champ de saisie
•
onfocus=’maFonctionJs()’: se déclenche lorsque l'élément à le focus
Les interactions sur le Web en mode «Client-Serveur»
La plupart des sites internets sont en mode « Client-Serveur », c’est à dire que l’interaction qui est faite entre l’homme et la machine locale est envoyée sur un serveur distant qui traite l’information en utilisant un langage (ASP, Phyton, PHP, …). il peut aussi s’interfacer avec un serveur de bases de données (SGBD). Pour finir il retourne une réponse au client dans une page HTML.
Sur un site internet Américain en mode « Client Serveur », si on demande par exemple en PHP d’afficher l’heure <?php echo date("H:i:s"); ?> l’ heure affichée sera l’heure du serveur aux Etats- Unis et non pas l’heure française du client car le PHP est interprété sur le serveur.
Pour faire ces échanges, les pages Web utilisent le protocole de transmission HTTP. Il permet à un client de récupérer auprès d’un serveur web des données. Pour cela l’ordinateur client joint le serveur distant en le localisant grâce à son adresse IP par l’intermédiaire d’un serveur DNS (Système de nom de domaines). Puis il utilise un protocole de connexion TCP qui initie et termine les connexions entre les 2 communicants en général en utilisant le port standard 80 ou le port sécurisé 443 (HTTPS et SSL)
À retenir
Pour dynamiser une page web en HTML avec sa feuille de style CSS on peut le faire :
•
soit du coté client avec un langage comme JavaScript
•
soit du coté serveur avec un langage comme Php, ASP, .Net, …
Dans un site internet pour interagir avec un utilisateur on utilise souvent le Formulaire en HTML.
QCM : Interactions entre l’homme et la machine sur le Web
20 questions • score sur 20