Vous trouverez dans cet article toutes les ressources commentées pour mener à bien une année d’enseignement en ICN et ISN.

Les choix technologiques (HTML+JavaScript) et pédagogiques (autonomie) sont expliqués dans ce document de présentation et d’accompagnement.

Document de présentation et d’accompagnement

00_cours_debut_info – 01_html – 02_css – 03_html_avance – 04_blockly_games – 05_javascript_debut – aide_memoire_javascript – 06_javascript_fin – 07_codingame – 08_dom_events_canvas – 09_animation – 10_suivi_projets – 10_squelette_projet – 11_amusettes_cryptographiques – Exercices de cours – Exercices de JavaScript

Formation ICN-ISN

Présentation générale

Le but de ce parcours de formation est d’amener les élèves à maîtriser suffisamment les bases de certaines technologies informatiques afin qu’ils puissent mener à bien divers types de projet dès le mois de janvier. La formation est composée de séquences dans lesquelles les élèves se forment en autonomie à partir d’exemples qu’ils doivent tester puis exploiter pour répondre aux questions et exercices.

Chaque séquence ne correspond pas forcément à une semaine de cours et certaines séquences peuvent même s’étaler sur plusieurs semaines. Il est important que chaque élève suive le parcours à son rythme afin de bien assimiler toutes les techniques présentées.

Choix technologiques

Il est important de choisir des technologies qui paraissent actuelles aux élèves afin qu’ils y adhèrent spontanément et qu’ils soient motivés par leur apprentissage et leur projet.

De plus, il est préférable que les langages choisis nécessitent peu ou pas d’installation d’outils de développement, ce qui facilitera le travail en classe et le travail des élèves à la maison.

Enfin, un langage qui peut fonctionner sur toutes les plateformes sera extrêmement motivant pour les élèves car ils ont un rapport particulièrement proche avec leur smartphone ou leur tablette. Dans ce cas, la perspective de développer un projet qui fonctionnera partout, sans installation y compris sur leur téléphone sera un gros bonus pour l’investissement des élèves.

Pour répondre à toutes ces exigences j’ai donc choisi le couple HTML / JavaScript.

Le programme

La formation proprement dite se concentre essentiellement sur les langages HTML et JavaScript car tous les autres aspects du programme seront abordés à la demande au cours du projet : codage des images, sons, les droits des fichiers, le réseau, etc. En effet tous les projets nécessiteront de travailler sur ces questions et cela rend la formation plus efficace et motivante. Il est toujours préférable d’expliquer une notion dont l’élève a besoin à un moment donné plutôt que de lui expliquer quand il n’en voit pas encore l’intérêt.

Séquence 00 : Fonctionnement des ordinateurs

Ce premier contact permet de donner aux élèves des notions élémentaires mais essentielles sur le fonctionnement des machines informatiques.

La première séance de cours est divisée en deux (1h-1h). Lors de la première heure de cours on explique les fondements et l’histoire de l’informatique en avançant rapidement sur le support 00_cours_debut_info. L’essentiel est de raconter une histoire pour faire passer l’idée du binaire et de montrer le coté cumulatif qui aboutira aux machines que les élèves connaissent (anecdotes et petites histoires seront les bienvenues pour faire vivre cette narration). J’ai créé des exercices sur ces questions.

Séquence 01 : HTML

Lors de la deuxième heure les élèves apprennent le HTML avec la séquence 01_html. En général, cela fonctionne très bien et les élèves sont contents de produire quelque chose qu’ils utilisent au quotidien dès la première séance.

Séquence 02 : CSS

La séance de cours suivante est aussi coupée en deux (1h-1h). On terminera l’histoire de l’informatique lors de la première heure.

La deuxième heure sera consacrée à l’apprentissage du CSS (02_css), ce qui permet aux élèves de produire assez rapidement de belles page web. La encore, cela fonctionne très bien.

Séquence 03 : HTML avancé

Le « cours » d’introduction étant terminé, les élèves ont 2 heures pour aborder la fin du html et du css (03_html_avance). Il apprendront à faire des liens, insérer des images, composer une page avec des div, etc.

A la fin de cette séquence on propose aux élèves de construire une belle page web à partir d’un exemple expliqué en détail.

Cette séquence peut s’étaler sur un peu plus d’une semaine si les élèves sont motivés par la création de leur page. Cette séquence aussi fonctionne bien avec les élèves.

Séquence 04 : Programmation – Blockly games

Il est temps maintenant d’aborder la programmation et nous mettrons en place certains concepts à l’aide d’une séance de programmation par bloc et utilisant le site Blockly Games (04_blockly_games). Sur le support de formation les élèves trouveront les « jeux » qu’il est impératif de faire.

A ce stade on identifie très vite les élèves qu’il va falloir aider plus particulièrement.

Cette séquence aussi fonctionne bien avec les élèves. L’aspect ludique est réel et les poussent à réfléchir.

Séquence 05 : JavaScript (début)

Une fois les grands concepts de la programmation un peu dégrossis on va aborder l’apprentissage du langage JavaScript (05_javascript_debut).

Les élèves disposent d’un document de référence sur le langage JavaScript et ses structures avec des exemples. Ce document doit les accompagner et les aider toutes l’année : aide_memoire_javascript.

Comme je n’étais pas satisfait du fonctionnement de cette partie, je l’ai réorganisée en deux parties plus cohérentes. Dans un premier temps, les élèves découvrent les variables, les branchements conditionnels et les fonctions.

Puis je les invite à faire des exercices en ligne que j’ai créés pour consolider les acquis avant de passer à la suite.

Séquence 06 : JavaScript (fin)

Une fois les premières notions acquises on peut passer aux tableaux, et aux boucles qui posent souvent des problèmes aux élèves (06_javascript_fin).

Là encore les élèves doivent travailler les exercices en ligne pour s’imprégner de ces concepts.

Séquence 07 : Codin’Game

L’idée est d’utiliser les jeux de programmation du site Codin’game pour donner aux élèves des exercices de programmation vraiment motivants (07_codingame).

Cela fonctionne effectivement mais il faut suffisamment guider les élèves, car créer les premiers programmes est extrêmement difficile pour la plupart. Il faudrait donc plus d’accompagnement dans le support de formation.

Séquence 08 : DOM-Events-Canvas

On passe maintenant à la synthèse de ce que l’on a appris jusque là, en ajoutant de quoi interagir avec les pages web et les programmes JavaScript (08_dom_events_canvas). Il va être question d’interface, d’évènements, de callbacks. Cette séquence aussi fonctionne bien avec les élèves.

Séquence 09 : Animation

La dernière étape sera consacrée aux animations (09_animation). Avec une première partie de formation et une seconde sous forme de missions à valider pour progresser et enrichir ce qui devient un mini-projet.

Motivation assurée dès qu’il s’agit de faire bouger des images à l’écran. La séquence fonctionne bien.

Séquence 10 : Le Projet

Nous sommes donc arrivés aux vacances de Noël et les élèves partent en vacances avec la mission de trouver des idées de projets. Il est bienvenu de leur montrer quelques projets des années précédentes pour qu’ils aient une idée de ce qui est réalisable.

Les élèves choisissent leur projet et avec qui ils vont le réaliser.

A la première séance à la rentrée de janvier, on leur explique un peu les objectifs du projet, comment mener un projet (versions, archives, etc.) et comment être efficace en équipe.

Ensuite ils réalisent tous un mini-cahier des charges dans lequel ils dessinent sur papier ce qu’ils veulent obtenir à l’écran et écrivent ce qu’il doit se passer quand l’utilisateur interagit avec le programme. Puis le travail de réalisation commence.

On donne un squelette de projet (10_squelette_projet) élémentaire que l’on commente afin que les élèves ne perdent pas de temps sur le syndrome de la page blanche.

Il est important que les élèves travaillent seuls sur une tâche précise dont ils ont la responsabilité car le travail à 2 ou 3 conduit inévitablement à une dynamique de travail catastrophique pour certains.

Ensuite à chaque séance on passe dans chaque groupe pour le suivi des projets aidé de la fiche 10_suivi_projets :

• • Répartition et découpage du travail : qui va faire quoi cette semaine ?

  • Bilan du travail de chaque élève individuellement par rapport à ses objectifs de la semaine passée.

  • Pistes pour résoudre les problèmes qui ont persisté.

  • Choix d’une nouvelle tâche si la tâche en cours est fonctionnelle, validée et archivée.