Interactions entre l’homme et la machine sur le Web

I- HTML/CSS

Afficher HTML/CSS

Cacher 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 => Cliquez ici.
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 :

Lien absolu :
http://bernon.fr/uploads/lien_internet.png

Lien relatif :
uploads/lien_internet.png

Dans le premier cas, l'adresse de l'image est donnée de façon absolue : n'importe quelle page web incluant cette adresse pourra afficher cette image pourtant stockée sur mon serveur internet.
Dans le second cas, seule une page internet située dans le répertoire courant de mon site web sera capable d'afficher cette image → à aucun autre emplacement d'internet il ne sera possible d'afficher l'image précédente en utilisant cette même adresse relative.

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 (lien Wikipedia).
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.

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 !

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

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

- 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

Afficher Javascript

Cacher 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.
A ce moment, 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 :

Calculer la somme des nombres jusqu'à 999 avec une boucle for

En javascript

En Python

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

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

Les 3 premières méthodes renvoient des tableaux dans lesquels 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.

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 <button onclick="bascule();">Colorer</button> puis d'ajouter dans la page le code suivant :

<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é)

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 <button onclick="majuscule();">En majuscule !</button> puis d'ajouter dans la page le code suivant :

<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>

Pour essayer → et pour annuler → (on stocke le contenu avant modification dans une variable)

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

Affiche Formulaires

Cacher 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.

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 commence par la balise <?php du_code_php et se finit par ?>.

Si je souhaite inclure l'heure dans une page internet, je peux utiliser le code suivant : <?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 et avec la méthode POST.

Méthode GET	Méthode POST
Cliquer pour agrandir	Cliquer pour agrandir

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 :

Méthode GET	Méthode POST
Cliquer pour agrandir	Cliquer pour agrandir

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

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.
Vous comprenez maintenant l'adresse de la page où se trouve ce cours !
https://www.bernon.fr/index.php?page=interactions-entre-lhomme-et-la-machine-sur-le-web signifie que la cible est toujours, quelle que soit la page que vous visualisez dans les menus, la page index.php, mais que vous demandez au serveur hébergeant mon site d'y afficher les données correspondant à la clé 'page' ayant pour valeur 'interactions-entre-lhomme-et-la-machine-sur-le-web' via la méthode GET.
Utiliser POST dans ce cas aurait rendu le partage direct d'adresse impossible
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

Utilisez les moteurs de recherche Google, Bing Qwant, Duckduckgo et Ecosia.
Faites une recherche quelconque et validez. Quelle méthode est utilisée ?