{"id":457,"date":"2015-06-13T13:54:25","date_gmt":"2015-06-13T12:54:25","guid":{"rendered":"http:\/\/www.ecole-henri-matisse-damgan.fr\/site\/?p=457"},"modified":"2015-06-13T14:10:45","modified_gmt":"2015-06-13T13:10:45","slug":"premier-cours-de-programmation-les-enfants-mont-bluffe","status":"publish","type":"post","link":"https:\/\/www.ecole-henri-matisse-damgan.fr\/site\/premier-cours-de-programmation-les-enfants-mont-bluffe\/","title":{"rendered":"Premier cours de programmation: les enfants m&rsquo;ont bluff\u00e9!"},"content":{"rendered":"<p>Depuis quelques temps nous nous cantonnions \u00e0 la 3D car les enfants sont tr\u00e8s demandeurs. \u00a0Ce matin j&rsquo;ai quand m\u00eame souhait\u00e9 essayer une nouvelle approche du num\u00e9rique: le codage.<\/p>\n<p>Nous avons enti\u00e8rement cod\u00e9 l&rsquo;animation visible ci-dessous, c&rsquo;est pas beau \u00e7a? \ud83d\ude42 (faut cliquer sur le drapeau vert pour lancer l&rsquo;animation)<\/p>\n<p><iframe loading=\"lazy\" src=\"\/\/scratch.mit.edu\/projects\/embed\/66940034\/?autostart=false\" width=\"485\" height=\"402\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>(l&rsquo;originale est disponible <a href=\"https:\/\/scratch.mit.edu\/projects\/66940034\/\">ici<\/a>, vous pouvez la rejouer et la modifier)<\/p>\n<p>Coder veut dire\u00a0\u00e9crire des programmes, c&rsquo;est \u00e0 dire des s\u00e9quences\u00a0d&rsquo;instructions que comprend l\u2019ordinateur pour qu&rsquo;il fasse ce qu&rsquo;on souhaite.<\/p>\n<p>Dans le cas pr\u00e9sent, nous avons utilis\u00e9 un formidable outil p\u00e9dagogique qui donne une v\u00e9ritable vision de ce que nous programmeurs faisons tous les jours. Ca s&rsquo;appelle Scratch, c&rsquo;est gratuit, \u00e9ducatif et disponible en ligne:\u00a0<a href=\"https:\/\/scratch.mit.edu\/\">https:\/\/scratch.mit.edu\/<\/a><\/p>\n<p>Une fois sur <a href=\"https:\/\/scratch.mit.edu\/\">Scratch<\/a>, on peut choisir un personnage et lui faire ex\u00e9cuter des programmes qu&rsquo;on \u00e9crit en empilant des briques, chaque brique repr\u00e9sentant en quelque sorte un ordre \u00e0 ex\u00e9cuter.<\/p>\n<p>Tout va se jouer sur une sc\u00e8ne, \u00e0 nous de trouver un sc\u00e9nario et d&rsquo;arriver \u00e0 le faire jouer par nos acteurs que sont les \u00ab\u00a0lutins\u00a0\u00bb. Nous commen\u00e7ons par ajouter un bonhomme bleu et un micro.<\/p>\n<p><a href=\"http:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-content\/uploads\/2015\/06\/scratch1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-458\" src=\"http:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-content\/uploads\/2015\/06\/scratch1-1024x676.jpg\" alt=\"scratch1\" width=\"474\" height=\"313\" srcset=\"https:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-content\/uploads\/2015\/06\/scratch1-1024x676.jpg 1024w, https:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-content\/uploads\/2015\/06\/scratch1-300x198.jpg 300w, https:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-content\/uploads\/2015\/06\/scratch1.jpg 1408w\" sizes=\"auto, (max-width: 474px) 100vw, 474px\" \/><\/a><\/p>\n<p>Un \u00e9cran d&rsquo;ordinateur est compos\u00e9 de tout petits points appel\u00e9s pixels. Vous pouvez les voir en regardant de tr\u00e8s pr\u00e8s.\u00a0Ces pixels sont l&rsquo;unit\u00e9 utilis\u00e9e pour faire des actions. Par exemple on dit qu&rsquo;on va \u00ab\u00a0d\u00e9placer un objet de 10 pixels vers la droite\u00a0\u00bb. Notre sc\u00e8ne mesure 680 pixels de large sur 360 pixels de haut.<\/p>\n<p>Une derni\u00e8re notion importante abord\u00e9e est que l&rsquo;ex\u00e9cution d&rsquo;<strong>instructions<\/strong> est d\u00e9clench\u00e9e par des <strong>\u00e9v\u00e9nements<\/strong>.<\/p>\n<p>Par exemple pour d\u00e9marrer notre animation on dira de commencer l&rsquo;ex\u00e9cution du programme quand le drapeau vert sera cliqu\u00e9. C&rsquo;est la premi\u00e8re brique de notre programme pour le lutin bleu.<\/p>\n<p><a href=\"http:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-content\/uploads\/2015\/06\/greenflag.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-459 aligncenter\" src=\"http:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-content\/uploads\/2015\/06\/greenflag.png\" alt=\"greenflag\" width=\"215\" height=\"327\" srcset=\"https:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-content\/uploads\/2015\/06\/greenflag.png 215w, https:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-content\/uploads\/2015\/06\/greenflag-197x300.png 197w\" sizes=\"auto, (max-width: 215px) 100vw, 215px\" \/><\/a><\/p>\n<p>Par la suite, on va empiler des instructions qui se d\u00e9rouleront dans l&rsquo;ordre, chacune ne d\u00e9marrant que lorsque\u00a0la pr\u00e9c\u00e9dente\u00a0a \u00e9t\u00e9 ex\u00e9cut\u00e9e. Voil\u00e0 ce \u00e0 quoi nous avons abouti apr\u00e8s avoir bien patouill\u00e9:<\/p>\n<p><a href=\"http:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-content\/uploads\/2015\/06\/script-bleu.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-460 aligncenter\" src=\"http:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-content\/uploads\/2015\/06\/script-bleu.png\" alt=\"script bleu\" width=\"293\" height=\"304\" srcset=\"https:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-content\/uploads\/2015\/06\/script-bleu.png 293w, https:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-content\/uploads\/2015\/06\/script-bleu-289x300.png 289w\" sizes=\"auto, (max-width: 293px) 100vw, 293px\" \/><\/a><\/p>\n<p>Ce qui\u00a0signifie:<\/p>\n<ol>\n<li>On d\u00e9marre quand le drapeau vert est cliqu\u00e9<\/li>\n<li>On se positionne \u00e0 un endroit pr\u00e9cis (coordonn\u00e9es en pixels, en gros \u00e0 gauche de la sc\u00e8ne)<\/li>\n<li>On r\u00e9p\u00e8te en boucle 22 fois \u00ab\u00a0je me d\u00e9place de 10 pixels vers la droite\u00a0\u00bb, ce qui va nous amener en glissant pr\u00e8s du micro.<\/li>\n<li>On r\u00e9p\u00e8te en boucle 3 fois: \u00ab\u00a0je joue le son nomm\u00e9\u00a0Pop\u00a0\u00bb<\/li>\n<li>Je joue le son nomm\u00e9 enregistrement1 (avec un micro un petit outil permet d&rsquo;enregistrer des sons et de leur donner un nom)<\/li>\n<li>On r\u00e9p\u00e8te en boucle 10 fois \u00ab\u00a0je me d\u00e9place de 10 pixels vers le haut\u00a0\u00bb pour lib\u00e9rer la place devant le micro pour le prochain personnage.<\/li>\n<li>J&rsquo;envoie un message nomm\u00e9 \u00ab\u00a0message1\u00a0\u00bb \u00e0 tout le monde pour signaler que j&rsquo;ai fini\u00a0de faire ce que j&rsquo;avais \u00e0 faire.<\/li>\n<\/ol>\n<p>C&rsquo;est au tour de Ma\u00efann d&rsquo;entrer en sc\u00e8ne. On cr\u00e9e un nouveau \u00ab\u00a0lutin\u00a0\u00bb dont elle choisit la forme, une danseuse en l&rsquo;occurrence. En gros c&rsquo;est \u00e0 peu pr\u00e8s le m\u00eame sc\u00e9nario pour Ma\u00efann, avec un son diff\u00e9rent qu&rsquo;elle enregistre. Mais\u00a0on a un probl\u00e8me: on veut que le personnage bleu soit seul au d\u00e9part sur sc\u00e8ne. On \u00e9crit donc un deuxi\u00e8me programme pour la danseuse de Ma\u00efann:<\/p>\n<ul>\n<li>un petit programme qui se contente de la cacher quand le drapeau vert est cliqu\u00e9 (d\u00e9but de l&rsquo;animation)<\/li>\n<li>son programme principal qui\u00a0d\u00e9marre \u00a0non pas sur le \u00ab\u00a0clic drapeau vert\u00a0\u00bb mais sur l\u2019\u00e9v\u00e9nement \u00ab\u00a0message1\u00a0\u00bb (envoy\u00e9 par le bleu quand il a fini). Il faut aussi penser \u00e0 ajouter une brique \u00ab\u00a0montrer\u00a0\u00bb pour la faire appara\u00eetre quand elle entre en sc\u00e8ne puisqu&rsquo;on l&rsquo;avait cach\u00e9e au d\u00e9but de l&rsquo;animation.<\/li>\n<\/ul>\n<p><a href=\"http:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-content\/uploads\/2015\/06\/script-maiann.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-461\" src=\"http:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-content\/uploads\/2015\/06\/script-maiann.png\" alt=\"script maiann\" width=\"401\" height=\"267\" srcset=\"https:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-content\/uploads\/2015\/06\/script-maiann.png 401w, https:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-content\/uploads\/2015\/06\/script-maiann-300x200.png 300w\" sizes=\"auto, (max-width: 401px) 100vw, 401px\" \/><\/a><\/p>\n<p>De la m\u00eame mani\u00e8re on cr\u00e9e un nouveau message nomm\u00e9 \u00ab\u00a0finmaiann\u00a0\u00bb qu&rsquo;on enverra \u00e0 tout le monde pour dire qu&rsquo;on a fini.<\/p>\n<p>C&rsquo;est au tour de No\u00e9 puis Rapha\u00ebl de suivre la m\u00eame proc\u00e9dure.<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-content\/uploads\/2015\/06\/script-noe.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-462\" src=\"http:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-content\/uploads\/2015\/06\/script-noe.png\" alt=\"script noe\" width=\"432\" height=\"307\" srcset=\"https:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-content\/uploads\/2015\/06\/script-noe.png 432w, https:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-content\/uploads\/2015\/06\/script-noe-300x213.png 300w\" sizes=\"auto, (max-width: 432px) 100vw, 432px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-content\/uploads\/2015\/06\/script-rapahel.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-463 aligncenter\" src=\"http:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-content\/uploads\/2015\/06\/script-rapahel.png\" alt=\"script rapahel\" width=\"489\" height=\"222\" srcset=\"https:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-content\/uploads\/2015\/06\/script-rapahel.png 489w, https:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-content\/uploads\/2015\/06\/script-rapahel-300x136.png 300w\" sizes=\"auto, (max-width: 489px) 100vw, 489px\" \/><\/a><\/p>\n<p>Au final tout le monde ex\u00e9cute ce qu&rsquo;il a \u00e0 faire sur les \u00e9v\u00e9nements pr\u00e9vus pour et \u00e7a donne <a href=\"https:\/\/scratch.mit.edu\/projects\/66940034\/\">la sublime animation finale<\/a>\u00a0\ud83d\ude42<\/p>\n<p>J&rsquo;ai vraiment \u00e9t\u00e9 impressionn\u00e9 par la compr\u00e9hension des enfants. Nous avons fait tout \u00e7a en 3 quarts d&rsquo;heure, avec beaucoup de plaisir et d&rsquo;efficacit\u00e9. Les enfants ont bien compris la logique des instructions et des \u00e9v\u00e9nements, ils m&rsquo;ont bluff\u00e9 jusqu&rsquo;\u00e0 me corriger quand j&rsquo;avais oubli\u00e9 un envoi de message \ud83d\ude42<\/p>\n<p>Bravo \u00e0 eux, et bravo <a href=\"https:\/\/scratch.mit.edu\/\">Scratch<\/a>, un outil formidable.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Depuis quelques temps nous nous cantonnions \u00e0 la 3D car les enfants sont tr\u00e8s demandeurs. \u00a0Ce matin j&rsquo;ai quand m\u00eame souhait\u00e9 essayer une nouvelle approche du num\u00e9rique: le codage. Nous avons enti\u00e8rement cod\u00e9 l&rsquo;animation visible ci-dessous, c&rsquo;est pas beau \u00e7a? \ud83d\ude42 (faut cliquer sur le drapeau vert pour lancer l&rsquo;animation) (l&rsquo;originale est disponible ici, vous &#8230; <a title=\"Premier cours de programmation: les enfants m&rsquo;ont bluff\u00e9!\" class=\"read-more\" href=\"https:\/\/www.ecole-henri-matisse-damgan.fr\/site\/premier-cours-de-programmation-les-enfants-mont-bluffe\/\" aria-label=\"En savoir plus sur Premier cours de programmation: les enfants m&rsquo;ont bluff\u00e9!\">Lire la suite<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[2,3],"tags":[14,15,13],"class_list":["post-457","post","type-post","status-publish","format-standard","hentry","category-ce1","category-initiation-informatique-et-internet","tag-codage","tag-programmation","tag-scratch"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p51MjH-7n","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-json\/wp\/v2\/posts\/457","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-json\/wp\/v2\/comments?post=457"}],"version-history":[{"count":13,"href":"https:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-json\/wp\/v2\/posts\/457\/revisions"}],"predecessor-version":[{"id":476,"href":"https:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-json\/wp\/v2\/posts\/457\/revisions\/476"}],"wp:attachment":[{"href":"https:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-json\/wp\/v2\/media?parent=457"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-json\/wp\/v2\/categories?post=457"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ecole-henri-matisse-damgan.fr\/site\/wp-json\/wp\/v2\/tags?post=457"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}