{"id":26,"date":"2017-03-05T16:58:17","date_gmt":"2017-03-05T15:58:17","guid":{"rendered":"http:\/\/ens-info.irem.univ-mrs.fr\/?p=26"},"modified":"2019-03-01T22:31:36","modified_gmt":"2019-03-01T21:31:36","slug":"ressources-une-annee-complete-de-formation-en-icn-isn","status":"publish","type":"post","link":"https:\/\/ens-info.irem.univ-mrs.fr\/?p=26","title":{"rendered":"Ressources : une ann\u00e9e compl\u00e8te de formation en ICN \/ ISN"},"content":{"rendered":"

Vous trouverez dans cet article toutes les ressources comment\u00e9es pour mener \u00e0 bien une ann\u00e9e d’enseignement en ICN et ISN.<\/p>\n

Les choix technologiques (HTML+JavaScript) et p\u00e9dagogiques (autonomie) sont expliqu\u00e9s dans ce document de pr\u00e9sentation et d’accompagnement.<\/p>\n

Document de pr\u00e9sentation et d’accompagnement<\/a><\/p>\n

00_cours_debut_info<\/a>\u00a0–\u00a001_html<\/a> –\u00a002_css<\/a> –\u00a003_html_avance<\/a> –\u00a004_blockly_games<\/a> –\u00a005_javascript_debut<\/a> –\u00a0aide_memoire_javascript<\/a> –\u00a006_javascript_fin<\/a> –\u00a007_codingame<\/a> –\u00a008_dom_events_canvas<\/a> –\u00a009_animation<\/a> – 10_suivi_projets<\/a> –\u00a010_squ<\/a>elette_projet<\/a> –\u00a011_amusettes_cryptographiques<\/a> –\u00a0Exercices de cours<\/a> – Exercices de JavaScript<\/a><\/p>\n

Formation ICN-ISN<\/h1>\n

Pr\u00e9sentation g\u00e9n\u00e9rale<\/h2>\n

Le but de ce parcours de formation est d\u2019amener les \u00e9l\u00e8ves \u00e0 ma\u00eetriser suffisamment les bases de certaines technologies informatiques afin qu\u2019ils puissent mener \u00e0 bien divers types de projet <\/b>d\u00e8s le<\/b> mois de janvier<\/b>. La formation est compos\u00e9e de s\u00e9quences dans lesquelles les \u00e9l\u00e8ves se forment en autonomie<\/b> \u00e0 partir d\u2019exemples qu\u2019ils doivent tester puis exploiter pour r\u00e9pondre aux questions et exercices.<\/p>\n

Chaque s\u00e9quence ne correspond pas forc\u00e9ment \u00e0 une semaine de cours et certaines s\u00e9quences peuvent m\u00eame s\u2019\u00e9taler sur plusieurs semaines. Il est important que chaque \u00e9l\u00e8ve suive le parcours \u00e0 son rythme<\/b> afin de bien assimiler toutes les techniques pr\u00e9sent\u00e9es.<\/p>\n

Choix technologiques<\/h2>\n

Il est important de choisir des technologies qui paraissent actuelles aux \u00e9l\u00e8ves<\/b> afin qu\u2019ils y adh\u00e8rent spontan\u00e9ment et qu\u2019ils soient motiv\u00e9s par leur apprentissage et leur projet<\/b>.<\/p>\n

De plus, il est pr\u00e9f\u00e9rable que les langages choisis n\u00e9cessitent peu ou pas d\u2019installation d\u2019outils<\/b> de d\u00e9veloppement, ce qui facilitera le travail en classe et le travail des \u00e9l\u00e8ves \u00e0 la maison<\/b>.<\/p>\n

Enfin, un langage qui peut fonctionner sur toutes les plateformes sera extr\u00eamement motivant pour les \u00e9l\u00e8ves<\/b> car ils ont un rapport particuli\u00e8rement proche avec leur smartphone ou leur tablette<\/b>. Dans ce cas, la perspective de d\u00e9velopper un projet qui fonctionnera partout, sans installation y compris sur leur t\u00e9l\u00e9phone sera un gros bonus pour l\u2019investissement des \u00e9l\u00e8ves<\/b>.<\/p>\n

Pour r\u00e9pondre \u00e0 toutes ces exigences j\u2019ai donc choisi le couple HTML \/ JavaScript<\/b>.<\/p>\n

Le programme<\/h2>\n

La formation proprement dite se concentre essentiellement sur les langages HTML et JavaScript car tous les autres aspects du programme seront abord\u00e9s \u00e0 la demande au cours du projet<\/b> : codage des images, sons, les droits des fichiers, le r\u00e9seau, etc. En effet tous les projets n\u00e9cessiteront de travailler sur ces questions<\/b> et cela rend la formation plus efficace et motivante. Il est toujours pr\u00e9f\u00e9rable d\u2019expliquer une notion dont l\u2019\u00e9l\u00e8ve a besoin \u00e0 un moment donn\u00e9 plut\u00f4t que de lui expliquer quand il n\u2019en voit pas <\/b>encore<\/b> l\u2019int\u00e9r\u00eat<\/b>.<\/p>\n

S\u00e9quence 00 : Fonctionnement des ordinateurs<\/h2>\n

Ce premier contact permet de donner aux \u00e9l\u00e8ves des notions \u00e9l\u00e9mentaires mais essentielles sur le fonctionnement des machines informatiques.<\/p>\n

La premi\u00e8re s\u00e9ance de cours est divis\u00e9e en deux (1h-1h). Lors de la premi\u00e8re heure de cours on explique les fondements et l\u2019histoire de l\u2019informatique en avan\u00e7ant rapidement sur le support 00_cours_debut_info<\/a>. L\u2019essentiel est de raconter une histoire pour faire passer l\u2019id\u00e9e du binaire et de montrer le cot\u00e9 cumulatif qui aboutira aux machines que les \u00e9l\u00e8ves connaissent (anecdotes et petites histoires seront les bienvenues pour faire vivre cette narration). J\u2019ai cr\u00e9\u00e9 des exercices<\/a> sur ces questions.<\/p>\n

S\u00e9quence 01 : HTML<\/h2>\n

Lors de la deuxi\u00e8me heure les \u00e9l\u00e8ves apprennent le HTML avec la s\u00e9quence 01_html<\/a>. En g\u00e9n\u00e9ral, cela fonctionne tr\u00e8s bien et les \u00e9l\u00e8ves sont contents de produire quelque chose qu\u2019ils utilisent au quotidien d\u00e8s la premi\u00e8re s\u00e9ance.<\/p>\n

S\u00e9quence 02 : CSS<\/h2>\n

La s\u00e9ance de cours suivante est aussi coup\u00e9e en deux (1h-1h). On terminera l\u2019histoire de l\u2019informatique lors de la premi\u00e8re heure.<\/p>\n

La deuxi\u00e8me heure sera consacr\u00e9e \u00e0 l\u2019apprentissage du CSS (02_css<\/a>), ce qui permet aux \u00e9l\u00e8ves de produire assez rapidement de belles page web. La encore, cela fonctionne tr\u00e8s bien.<\/p>\n

S\u00e9quence 03 : HTML avanc\u00e9<\/h2>\n

Le \u00ab\u00a0cours\u00a0\u00bb d\u2019introduction \u00e9tant termin\u00e9, les \u00e9l\u00e8ves ont 2 heures pour aborder la fin du html et du css (03_html_avance<\/a>). Il apprendront \u00e0 faire des liens, ins\u00e9rer des images, composer une page avec des div, etc.<\/p>\n

A la fin de cette s\u00e9quence on propose aux \u00e9l\u00e8ves de construire une belle page web \u00e0 partir d\u2019un exemple expliqu\u00e9 en d\u00e9tail.<\/p>\n

Cette s\u00e9quence peut s\u2019\u00e9taler sur un peu plus d\u2019une semaine si les \u00e9l\u00e8ves sont motiv\u00e9s par la cr\u00e9ation de leur page. Cette s\u00e9quence aussi fonctionne bien avec les \u00e9l\u00e8ves.<\/p>\n

S\u00e9quence 04 : Programmation – Blockly games<\/h2>\n

Il est temps maintenant d\u2019aborder la programmation et nous mettrons en place certains concepts \u00e0 l\u2019aide d\u2019une s\u00e9ance de programmation par bloc et utilisant le site Blockly Games (04_blockly_games<\/a>). Sur le support de formation les \u00e9l\u00e8ves trouveront les \u00ab\u00a0jeux\u00a0\u00bb qu\u2019il est imp\u00e9ratif de faire.<\/p>\n

A ce stade on identifie tr\u00e8s vite les \u00e9l\u00e8ves qu\u2019il va falloir aider plus particuli\u00e8rement.<\/p>\n

Cette s\u00e9quence aussi fonctionne bien avec les \u00e9l\u00e8ves. L\u2019aspect ludique est r\u00e9el et les poussent \u00e0 r\u00e9fl\u00e9chir.<\/p>\n

S\u00e9quence 05 : JavaScript (d\u00e9but)<\/h2>\n

Une fois les grands concepts de la programmation un peu d\u00e9grossis on va aborder l\u2019apprentissage du langage JavaScript (05_javascript_debut<\/a>).<\/p>\n

Les \u00e9l\u00e8ves disposent d\u2019un document de r\u00e9f\u00e9rence sur le langage JavaScript et ses structures avec des exemples. Ce document doit les accompagner et les aider toutes l\u2019ann\u00e9e : aide_memoire_javascript<\/a>.<\/p>\n

Comme je n\u2019\u00e9tais pas satisfait du fonctionnement de cette partie, je l\u2019ai r\u00e9organis\u00e9e en deux parties plus coh\u00e9rentes. Dans un premier temps, les \u00e9l\u00e8ves d\u00e9couvrent les variables<\/b>, les branchements conditionnels<\/b> et les fonctions<\/b>.<\/p>\n

Puis je les invite \u00e0 faire des exercices<\/a> en ligne que j\u2019ai cr\u00e9\u00e9s pour consolider les acquis avant de passer \u00e0 la suite.<\/p>\n

S\u00e9quence 06 : JavaScript (fin)<\/h2>\n

Une fois les premi\u00e8res notions acquises on peut passer aux tableaux<\/b>, et aux boucles<\/b> qui posent souvent des probl\u00e8mes aux \u00e9l\u00e8ves (06_javascript_fin<\/a>).<\/p>\n

L\u00e0 encore les \u00e9l\u00e8ves doivent travailler les exercices<\/a> en ligne pour s\u2019impr\u00e9gner de ces concepts.<\/p>\n

S\u00e9quence 07 : Codin\u2019Game<\/h2>\n

L\u2019id\u00e9e est d\u2019utiliser les jeux de programmation du site Codin\u2019game pour donner aux \u00e9l\u00e8ves des exercices de programmation vraiment motivants (07_codingame<\/a>).<\/p>\n

Cela fonctionne effectivement mais il faut suffisamment guider les \u00e9l\u00e8ves, car cr\u00e9er les premiers programmes est extr\u00eamement difficile pour la plupart. Il faudrait donc plus d\u2019accompagnement dans le support de formation.<\/p>\n

S\u00e9quence 08 : DOM-Events-Canvas<\/h2>\n

On passe maintenant \u00e0 la synth\u00e8se de ce que l\u2019on a appris jusque l\u00e0, en ajoutant de quoi interagir avec les pages web et les programmes JavaScript (08_dom_events_canvas<\/a>). Il va \u00eatre question d\u2019interface, d\u2019\u00e9v\u00e8nements, de callbacks. Cette s\u00e9quence aussi fonctionne bien avec les \u00e9l\u00e8ves.<\/p>\n

S\u00e9quence 09 : Animation<\/h2>\n

La derni\u00e8re \u00e9tape sera consacr\u00e9e aux animations (09_animation<\/a>). Avec une premi\u00e8re partie de formation et une seconde sous forme de missions \u00e0 valider pour progresser et enrichir ce qui devient un mini-projet.<\/p>\n

Motivation assur\u00e9e d\u00e8s qu\u2019il s\u2019agit de faire bouger des images \u00e0 l\u2019\u00e9cran. La s\u00e9quence fonctionne bien.<\/p>\n

S\u00e9quence 10 : Le Projet<\/h2>\n

Nous sommes donc arriv\u00e9s aux vacances de No\u00ebl et les \u00e9l\u00e8ves partent en vacances avec la mission de trouver des id\u00e9es de projets. Il est bienvenu de leur montrer quelques projets des ann\u00e9es pr\u00e9c\u00e9dentes pour qu\u2019ils aient une id\u00e9e de ce qui est r\u00e9alisable.<\/p>\n

Les \u00e9l\u00e8ves choisissent leur projet et avec qui ils vont le r\u00e9aliser.<\/b><\/p>\n

A la premi\u00e8re s\u00e9ance \u00e0 la rentr\u00e9e de janvier, on leur explique un peu les objectifs du projet, comment mener un projet (versions, archives, etc.) et comment \u00eatre efficace en \u00e9quipe<\/b>.<\/p>\n

Ensuite ils r\u00e9alisent tous un mini-cahier des charges<\/b> dans lequel ils dessinent sur papier ce qu\u2019ils veulent obtenir \u00e0 l\u2019\u00e9cran et \u00e9crivent ce qu\u2019il doit se passer quand l\u2019utilisateur interagit avec le programme. Puis le travail de r\u00e9alisation commence.<\/p>\n

On donne un squelette de projet (10_squelette_projet<\/a>) \u00e9l\u00e9mentaire que l\u2019on commente afin que les \u00e9l\u00e8ves ne perdent pas de temps sur le syndrome de la page blanche.<\/p>\n

Il est important que les \u00e9l\u00e8ves travaillent seuls sur une t\u00e2che pr\u00e9cise dont ils ont la responsabilit\u00e9 car le travail \u00e0 2 ou 3 conduit in\u00e9vitablement \u00e0 une dynamique de travail catastrophique pour certains.<\/b><\/u><\/p>\n

Ensuite \u00e0 chaque s\u00e9ance on passe dans chaque groupe<\/b> pour le suivi des projets aid\u00e9 de la fiche\u00a010_suivi_projets<\/a> :<\/p>\n