Ce chapitre commence par rappeler le programme NSI . Il traite ensuite de la progression pédagogique en exploitant les chapitres de ce livre et en précisant l'alignement avec le programme. Il termine enfin par discuter des mises en oeuvre et propose plusieurs projets qu'il est possible de donner aux élèves.
Le programme NSI est défini pour l'année de première et pour l'année de terminale.
Pour ce qui est de la programmation d'applications web, le programme de l'année de première se focalise sur HTML, le protocole HTTP et l'exploitation de Javascript dans le navigateur. Le programme pour l'année de terminale s'intéresse quant à lui aux bases de données.
Le Tableau 11.1 montre la correspondance entre les chapitres de ce livre et les deux années du programme NSI.
On peut voir que, pour l'année de première, les premiers chapitres de ce livre (1, 2, 4 et 5) ainsi que le chapitre 9 correspondent au programme. Il faut noter que CSS (chapitre 3) n'est pas au programme. Pour l'année de terminale, les chapitres 6, 7 et 8 traitent des bases de données. Les concepts avancés de session et de cookie que nous développons dans ce livre ne sont pas au programme NSI.
| Chapitre | NSI Première | NSI Terminale |
|---|---|---|
| Chapitre 1 : Serveur de Pages Web | X | |
| Chapitre 2 : HTML et les pages Web | X | |
| Chapitre 3 : Style CSS | ||
| Chapitre 4 : Mode statique et mode dynamique | X | |
| Chapitre 5 : Le protocole HTTP | X | |
| Chapitre 6 : Le modèle relationnel | X | |
| Chapitre 7 : Les requêtes | X | |
| Chapitre 8 : Lien entre serveur et base de données | X | |
| Chapitre 9 : Gestion des événements en Javascript | X | |
| Chapitre 10 : Session et compte utilisateur |
Tableau 11.1 : Correspondance entre les chapitres de ce livre et les années NSI.
Le programme de NSI pour la classe de première est composé de huit rubriques. Parmi celles-ci la rubrique Interaction entre l'homme et la machine sur le Web porte sur le développement des applications web. La description de cette rubrique est la suivante :
Lors de la navigation sur le Web, les internautes interagissent avec leur machine par le biais des pages Web. L’Interface Homme-Machine (IHM) repose sur la gestion d’événements associés à des éléments graphiques munis de méthodes algorithmiques. La compréhension du dialogue client-serveur déjà abordé en classe de seconde est consolidée, sur des exemples simples, en identifiant les requêtes du client, les calculs puis les réponses du serveur traitées par le client. Il ne s’agit pas de décrire exhaustivement les différents éléments disponibles, ni de développer une expertise dans les langages qui permettent de mettre en œuvre le dialogue tels que PHP ou JavaScript.Le programme NSI précise quatre contenus pour la rubrique Interaction entre l'homme et la machine sur le Web. Chaque rubrique est présentée avec une liste des capacités attendues et des commentaires. Le Tableau 11.2 rappelle ces contenus.
| Contenus | Capacités attendues | Commentaires |
|---|---|---|
| Modalités de l’interaction entre l’homme et la machine. Événements | Identifier les différents composants graphiques permettant d’interagir avec une application Web. Identifier les événements que les fonctions associées aux différents composants graphiques sont capables de traiter. | Il s’agit d’examiner le code HTML d’une page comprenant des composants graphiques et de distinguer ce qui relève de la description des composants graphiques en HTML de leur comportement (réaction aux événements) programmé par exemple en JavaScript. |
| Interaction avec l’utilisateur dans une page Web | Analyser et modifier les méthodes exécutées lors d’un clic sur un bouton d’une page Web. | |
| Interaction client / serveur. Requêtes HTTP, réponses du serveur | Distinguer ce qui est exécuté sur le client ou sur le serveur et dans quel ordre. Distinguer ce qui est mémorisé dans le client et retransmis au serveur. Reconnaître quand et pourquoi la transmission est chiffrée. | Il s’agit de faire le lien avec ce qui a été vu en classe de seconde et d’expliquer comment on peut passer des paramètres à un site grâce au protocole HTTP. |
| Formulaire d’une page Web. | Analyser le fonctionnement d’un formulaire simple. Distinguer les transmissions de paramètres par les requêtes POST ou GET. | Discuter les deux types de requêtes selon le type des valeurs à transmettre et/ou leur confidentialité. |
Tableau 11.2 : Les contenus du programme NSI pour la classe de première.
Le Tableau 11.3 présente une correspondance fine entre les contenus du programme NSI en classe de première et les chapitres de ce livre.
| Contenus NSI en classe de première | Chapitres du livre |
|---|---|
| Modalités de l’interaction entre l’homme et la machine. Événements. | Chapitres 1, 2 et 9 |
| Interaction avec l’utilisateur dans une page Web. | Chapitres 1, 2 et 9 |
| Interaction client / serveur. Requêtes HTTP, réponses du serveur. | Chapitres 1, 4, 5 et 9 |
| Formulaire d’une page Web. | Chapitres 1, 2, 4 et 5 |
Tableau 11.3 : Correspondance entre les chapitres de ce livre et le contenu du programme NSI en classe de première.
Pour la progression pédagogique il nous parait important de démarrer par le chapitre 1, ou du moins, de montrer le rôle joué par le serveur web : répondre aux requêtes des navigateurs en fournissant les ressources demandées. Le chapitre 1 permet aussi de comprendre le rôle des URLs et de faire le lien entre les pages web et les ressources web : une page web est composée de plusieurs ressources dont exactement une doit être du code HTML.
Il nous parait ensuite utile de continuer par le chapitre 2 afin de présenter le standard HTML. L'objectif est de présenter un sous-ensemble de balises HTML nécessaires et suffisantes pour construire des pages web classiques. La notion d'arbre DOM est aussi fondamentale. On pourrait faire l'impasse sur le positionnement des boîtes et sur le painting même si ces notions servent à comprendre comment se fait l'affichage d'une page web.
Pour la suite, même s'il est envisageable de démarrer par la gestion des interactions et des événements du côté du navigateur web, il nous parait néanmoins plus aisé de démarrer par le serveur web. Cette approche vise à présenter le protocole HTTP, les deux types de requêtes (GET et POST), et à expliquer le comportement du navigateur web et du serveur web. Il nous semble intéressant de commencer par expliquer le mode statique en expliquant les requêtes GET. Puis, en motivant le besoin de passer des paramètres, de présenter le mode dynamique et les requêtes POST. Cette progression fait un mix des chapitres 4 et 5. Notons qu'il est tout à fait envisageable de faire l'impasse sur la constitution des requêtes et réponses HTTP.
Enfin, nous proposons de terminer par Javascript dans le navigateur web. Il s'agit de montrer les objets du DOM et la gestion des événements. On doit pouvoir montrer la complémentarité entre un traitement front et un traitement back.
En résumé, la progression pédagogique que nous proposons se fait en cinq parties :
Pour coller pleinement au programme, il faudra expliquer la différence entre HTTP et HTTPS (parties 1, 3 et 4). Expliquer que c'est au serveur d'exiger la sécurisation des communications (actuellement tous les serveurs sur le web proposent exclusivement HTTPS).
De manière similaire à notre livre, nous proposons l'utilisation de NodeJS pour mettre en oeuvre les connaissances. Cette exploitation en Vanilla nécessite d'installer uniquement NodeJS. Il n'est même pas nécessaire d'avoir une connexion à Internet.
Les questions de cours et les exercices que nous proposons dans les chapitres de ce livre peuvent être repris pour un enseignement en NSI. Il est aussi possible de reprendre le projet de mur d'images. Nous proposons ici d'autres projets facilement déclinables avec notre proposition pédagogique en cinq parties.
L'objectif de ce projet est de faire une application web qui permet de deviner un mot caché. Le joueur a cinq essais pour proposer à chaque fois une lettre qui doit être contenue dans le mot. Après cinq essais infructueux le joueur a perdu.
Le rendu de ce projet est visible ici.
L'objectif de ce projet est de faire une application web qui propose l'élaboration collaborative d'une image en ASCII-Art.
Chaque utilisateur peut changer un caractère d'une image en ASCII-Art.
Le rendu de ce projet est visible ici.
L'objectif de ce projet est de faire une application web qui propose l'élaboration collaborative d'une image construite par pixel.
Ce projet s'inspire de R/Place de Reddit
Chaque utilisateur peut changer un pixel de l'image.
Le rendu de ce projet est visible ici.