選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

teaching-kids-to-program-ru.html 25KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300
  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8" />
  4. <!-- Set the viewport width to device width for mobile -->
  5. <meta name="viewport" content="width=device-width" />
  6. <title>Обучение детей программированию</title>
  7. <link rel="stylesheet" href="http://opengamestudio.org/theme/css/normalize.css" />
  8. <link rel="stylesheet" href="http://opengamestudio.org/theme/css/foundation.min.css" />
  9. <link rel="stylesheet" href="http://opengamestudio.org/theme/css/style.css" />
  10. <link rel="stylesheet" href="http://opengamestudio.org/theme/css/pygments.css" />
  11. <script src="http://opengamestudio.org/theme/js/custom.modernizr.js"></script>
  12. <!-- So Firefox can bookmark->"abo this site" -->
  13. <link href="feeds/all.atom.xml" rel="alternate" title="Opensource Game Studio" type="application/atom+xml">
  14. </head>
  15. <body>
  16. <!-- Nav Bar -->
  17. <nav>
  18. <!-- Show menu items and pages -->
  19. <div class="row">
  20. <div class="large-12 columns top-bar">
  21. <h1><a href="http://opengamestudio.org">Opensource Game Studio</a></h1>
  22. </div>
  23. </div>
  24. <div class="row top-menu">
  25. <div class="large-12 columns">
  26. <a href="/pages/games.html" class="menu-button secondary">Games</a>
  27. <a href="/pages/education.html" class="menu-button secondary">Education</a>
  28. <a href="/pages/about.html" class="menu-button secondary">About</a>
  29. </div>
  30. </div>
  31. </nav>
  32. <!-- End Nav -->
  33. <!-- Main Page Content and Sidebar -->
  34. <div class="row">
  35. <!-- Main Blog Content -->
  36. <div class="large-9 columns">
  37. <article>
  38. <header>
  39. <h3 class="article-title"><a href="http://opengamestudio.org/teaching-kids-to-program-ru.html" rel="bookmark"
  40. title="Permalink to Обучение детей программированию">Обучение детей программированию</a></h3>
  41. </header>
  42. <h6 class="subheader" title="2019-02-04T00:00:00+03:00">Пн 04 февраля 2019
  43. <a class="button secondary small translation-button" href="http://opengamestudio.org/teaching-kids-to-program.html">en</a>
  44. </h6> <p><img alt="Screenshot" src="http://opengamestudio.org/2019-02-04_teaching-kids-to-program-team.png"></p>
  45. <p>В этой статье Михаил делится своим опытом обучения детей программированию.</p>
  46. <p>Он расскажет о следующем:</p>
  47. <ul>
  48. <li>организация процесса обучения</li>
  49. <li>программа обучения</li>
  50. <li>игра на память</li>
  51. <li>инструмент программирования</li>
  52. <li>уроки</li>
  53. <li>результаты и планы</li>
  54. </ul>
  55. <p><strong>Организация процесса обучения</strong></p>
  56. <p>Обучение проходит в рамках социальной ответственности бизнеса: компания предоставляет помещение с оборудованием, а также объединяет сотрудников, желающих попробовать себя в роли преподавателей, с сотрудниками, желающими обучить своих детей. Всё это исключительно на добровольной основе.</p>
  57. <p>Потенциальных преподавателей разбивают по группам таким образом, чтобы группа из трёх преподавателей состояла из одного опытного и двух новичков. Одна группа преподавателей ведёт одну группу учеников. Учеников разбивают по возрасту и навыкам.</p>
  58. <p>В 2018-м я второй раз участвовал в программе обучения детей в возрасте примерно десяти лет. Наша группа работала с октября по декабрь 2018-го по субботам с 10:00 до 12:00. Пользуясь служебным положением, я также затащил на курсы и свою жену.</p>
  59. <p><strong>Программа обучения</strong></p>
  60. <p>Когда я участвовал первый раз, наша группа обучала детей программированию довольно бесцельно: мы придумывали простейшие задания на урок для объяснения операторов. В результате в конце обучения у нас не было ничего конкретного, что можно было бы оценить, чем похвастаться и что проанализировать.</p>
  61. <p>В этот второй раз я решил, что мы с детьми реализуем так называемую игру на память. Критерием успешности обучения я определил следующее условие: каждый ученик к концу курса самостоятельно создаёт простейшую игру на память с нуля за 1 час.</p>
  62. <p>Для достижения этого критерия я решил проверить утверждение "Повторение - мать учения", поэтому каждый урок мы создавали всё с нуля. Подчеркну, что мы ничего не сохраняли в учётной записи учеников. Задача была в сохранении навыка создания игры в голове, не в компьютере.</p>
  63. <p><strong>Игра на память</strong></p>
  64. <p>Давайте рассмотрим, что представляет собой игра на память.</p>
  65. <p><strong>1)</strong> В простейшем случае у нас есть 16 карт, причём уникальных лишь 8, остальные 8 являются их парами.</p>
  66. <p><img alt="Screenshot" src="http://opengamestudio.org/2019-02-04_teaching-kids-to-program-all-cards-face-up.png"></p>
  67. <p>В представленном изображении у нас есть лишь две карты с котом, собакой и т.д..</p>
  68. <p><strong>2)</strong> В начале игры мы перемешиваем карты и раскладываем их <strong>рубашкой</strong> вверх.</p>
  69. <p><img alt="Screenshot" src="http://opengamestudio.org/2019-02-04_teaching-kids-to-program-all-cards-face-down.png"></p>
  70. <p><strong>3)</strong> Первый из участников игры открывает две карты.</p>
  71. <p><img alt="Screenshot" src="http://opengamestudio.org/2019-02-04_teaching-kids-to-program-first-pair.png"></p>
  72. <p><strong>4)</strong> Если карты различаются, возвращаем их в исходное положение: кладём <strong>рубашкой</strong> вверх.</p>
  73. <p><img alt="Screenshot" src="http://opengamestudio.org/2019-02-04_teaching-kids-to-program-all-cards-face-down.png"></p>
  74. <p><strong>5)</strong> Следующий участник игры открывает другую пару карт.</p>
  75. <p><img alt="Screenshot" src="http://opengamestudio.org/2019-02-04_teaching-kids-to-program-second-pair.png"></p>
  76. <p><strong>6)</strong> Если карты совпадают, убираем их с игрового поля.</p>
  77. <p><img alt="Screenshot" src="http://opengamestudio.org/2019-02-04_teaching-kids-to-program-remove-pair.png"></p>
  78. <p>Цель игры в том, чтобы убрать все карты с поля. Игра в данном виде не включает соревнование, поэтому играть можно одному человеку.</p>
  79. <p>С одной стороны, игра на память довольно проста, с другой стороны, реализация игры затрагивает основную функциональность, необходимую для создания любой более-менее сложной игры:</p>
  80. <ul>
  81. <li>создание элементов</li>
  82. <li>их расстановка на поле</li>
  83. <li>выбор элементов</li>
  84. <li>сравнение выбранных элементов</li>
  85. <li>скрытие совпадающих элементов</li>
  86. </ul>
  87. <p><strong>Инструмент программирования</strong></p>
  88. <p>В качестве инструмента мы использовали среду <a href="https://scratch.mit.edu/">Scratch</a>. Она рассчитана на обучение детей программированию, поэтому каждое действие, каждый оператор в ней представлен графически.</p>
  89. <p>Например, следующим скриптом можно повернуть кота на 360 градусов за секунду:</p>
  90. <p><img alt="Screenshot" src="http://opengamestudio.org/2019-02-04_teaching-kids-to-program-cat-script-ru.png"></p>
  91. <p>Вот так выглядит результат:</p>
  92. <p><img alt="Animation" src="http://opengamestudio.org/2019-02-04_teaching-kids-to-program-cat-animation.gif"></p>
  93. <p>Замечу, что это довольно успешное решение для представления кода графически. Например, платное решение, продвигаемое нынче компанией SAP, предполагает использование так называемых кубиков для программирования:</p>
  94. <p><img alt="Screenshot" src="http://opengamestudio.org/2019-02-04_teaching-kids-to-program-sap-ui.png"></p>
  95. <p>Тут можно лишь ввести в нужные поля нужные значения. Если потребуется что-то нестандартное, то поможет лишь скрипт, который представлен опять же кубиком.</p>
  96. <p>По личному опыту скажу, что решение Scratch не тормозит от слова совсем, чего не скажешь о решении SAP.</p>
  97. <p><strong>Первый урок</strong></p>
  98. <p>Первый урок являлся вводным, поэтому компьютеры мы не использовали.</p>
  99. <p>План был следующим:</p>
  100. <ol>
  101. <li>Познакомиться</li>
  102. <li>Сыграть в игру на память</li>
  103. <li>Изучить понятие алгоритма</li>
  104. <li>Написать алгоритм игры</li>
  105. <li>Проанализировать урок</li>
  106. </ol>
  107. <p><strong>1)</strong> Знакомство</p>
  108. <p>Преподаватели с учениками встают в круг. Это уравнивает всех и делает каждого участником команды.</p>
  109. <p>Первый участник называет своё имя и рассказывает о том, почему он решил посетить этот курс. Второй и последующие участники сначала повторяют имя и рассказ каждого предыдущего участника, после чего называют своё имя и рассказывают.</p>
  110. <p>Примерно так это выглядит:</p>
  111. <ol>
  112. <li>Вася: "Меня зовут Вася, я хочу изучить Scratch, потому что меня заставил папа"</li>
  113. <li>Дима: "Это Вася, заниматься Scratch'ем его заставляет папа. Меня зовут Дима, и это мой четвёртый год Scratch'а"</li>
  114. <li>Оля: "Это Вася, его заставляют родители. Это Дима, он практически ветеран Scratch'а. Меня зовут Оля, я первый год преподаю, буду учиться вместе со всеми"</li>
  115. </ol>
  116. <p>Данный формат знакомства преследует следующие цели:</p>
  117. <ul>
  118. <li>Знакомство<ul>
  119. <li>Каждый участник команды должен знать по имени остальных участников команды</li>
  120. </ul>
  121. </li>
  122. <li>Общее пространство<ul>
  123. <li>Все участники в круге, а не за рабочими местами, что уменьшает отвлечение на игры в компьютере</li>
  124. </ul>
  125. </li>
  126. <li>Равенство<ul>
  127. <li>И преподаватели, и ученики в одном круге, что уравновешивает всех в качестве участников команды без иерархии</li>
  128. </ul>
  129. </li>
  130. <li>Внимание<ul>
  131. <li>Каждый участник команды должен внимательно слушать остальных участников, чтобы правильно повторить сказанное ими</li>
  132. </ul>
  133. </li>
  134. <li>Обратная связь<ul>
  135. <li>Каждый участник команды должен максимально чётко излагать свою мысль, иначе остальные просто не смогут её повторить</li>
  136. </ul>
  137. </li>
  138. <li>Веселье<ul>
  139. <li>Проблемы с запоминанием имён всех веселят</li>
  140. </ul>
  141. </li>
  142. </ul>
  143. <p><strong>2)</strong> Игра на память в карты</p>
  144. <ol>
  145. <li>Берём две колоды карт и выбираем из них по 8 одинаковых</li>
  146. <li>Раскладываем карты в сетку 4 x 4 рубашкой вверх на столе</li>
  147. <li>Ученики встают вокруг стола</li>
  148. <li>Каждый ученик по очереди переворачивает пару карт<ul>
  149. <li>Если карты совпали, то убираем их с поля</li>
  150. <li>Если карты различаются, то переворачиваем их рубашкой вверх</li>
  151. </ul>
  152. </li>
  153. </ol>
  154. <p>Ученикам очень нравится играть в настольные игры. В ходе игры преподаватели проговаривают то, что происходит.</p>
  155. <p>После пары партий переходим к изучению понятия алгоритма.</p>
  156. <p><strong>3)</strong> Понятие алгоритма</p>
  157. <ol>
  158. <li>Спрашиваем сначала учеников, даём возможность высказаться, узнаём уровень каждого ученика</li>
  159. <li>При необходимости поправляем высказывания, если они близки к ожидаемому ответу</li>
  160. <li>Предлагаем написать алгоритм перевода человека из состояния "стоит за дверью кабинета" в состояние "работает за компьютером в кабинете"</li>
  161. </ol>
  162. <p>Ученикам очень нравится подходить к доске и писать на ней, поэтому по очереди вызываем каждого ученика, чтобы он писал по одному пункту алгоритма. Самого активного ученика используем в качестве исполнителя алгоритма.</p>
  163. <p><strong>4)</strong> Алгоритм игры</p>
  164. <p>Предлагаем написать алгоритм игры, опять вызываем каждого добавлять по одному пункту на доске. После завершения описания алгоритма ещё раз играем с картами, но на этот раз каждый ученик должен проговаривать шаг алгоритма.</p>
  165. <p>Выглядит это примерно так:</p>
  166. <ol>
  167. <li>Вася: "Раскладываем 16 карт рубашкой вверх"</li>
  168. <li>Дима: "Переворачиваем пару карт"</li>
  169. <li>Паша: "Если две карты различаются, переворачиваем их рубашкой вверх"</li>
  170. <li>Филипп: "Переворачиваем пару карт"</li>
  171. <li>Миша: "Если две карты совпадают, убираем их с поля"</li>
  172. </ol>
  173. <p><strong>5)</strong> Анализ урока</p>
  174. <p>На этом первый урок заканчивается, и у преподавателей появляется возможность обсудить как свои впечатления об уроке, так и об учениках, выработать подходы к тихоням и активистам, договориться о дальнейших планах на следующие уроки.</p>
  175. <p>У нас были следующие решения:</p>
  176. <ol>
  177. <li>Рассаживать тихонь и активистов через одного, чтобы соблюсти баланс шума и тишины. Иначе группа активистов создаёт очаг бури, а группа тихонь - очаг пустыни, что замедляет процесс обучения.</li>
  178. <li>Требовать от учеников точности, т.к. активисты любят кривляться, что плохо влияет на дисциплину.</li>
  179. </ol>
  180. <p><strong>Второй и третий уроки</strong></p>
  181. <p>Последующие уроки мы опять же начинали с разминки: вставали в круг, называли имя и рассказывали, кто что сделал. А если не сделал, то почему. Как и прежде, каждый участник сначала повторял сказанное предыдущими и лишь затем говорил о себе.</p>
  182. <p>На втором уроке мы создавали требования для элемента игрового поля и пытались создать этот элемент в Scratch. Это вполне удалось.</p>
  183. <p>На третьем уроке мы пытались создать 16 элементов и расположить их в сетке 4x4. Тут мы застопорились, т.к. ученики не смогли понять систему координат, чтобы расположить 16 элементов в сетке. Стало очевидно, что планы уроков являются лишь планами, а действительность вносит свои изменения.</p>
  184. <p>У нас было два пути решения проблемы с системой координат:</p>
  185. <ol>
  186. <li>Продолжать обучать системе координат с риском не успеть создать игру до конца курса</li>
  187. <li>Изменить требования к игре таким образом, чтобы система координат была не нужна</li>
  188. </ol>
  189. <p>Мы решили пойти вторым путём, т.к. мы всё-таки не школа и цель у нас была научить создавать игру, т.е. применять знания на практике, а не в теории. Поэтому сетку элементов 4x4 мы решили заменить кругом из 16 элементов.</p>
  190. <p>Данное решение привело меня к следующим выводам:</p>
  191. <ol>
  192. <li>Для решения задачи часто можно найти более простой путь</li>
  193. <li>Этот путь легче для понимания, хоть и менее гибкий</li>
  194. <li>Перейти на сложный путь для увеличения гибкости можно позже, когда это будет действительно необходимо</li>
  195. <li>Упрощение приближает к конечной цели, усложнение отдаляет от неё</li>
  196. </ol>
  197. <p><strong>Четвёртый и последующие уроки</strong></p>
  198. <p>С четвёртого урока мы отменили стадию написания требований, т.к. она начала занимать бОльшую часть урока: мы снова сделали уклон на практику, а не теорию, чтобы уложиться в сроки. На этот раз все требования были написаны заранее и выданы "сверху". Но всё равно их никто не читал.</p>
  199. <p>Четвёртый и пятый уроки мы потратили на создание 16 элементов в виде круга, выделение пары элементов и проверку на их совпадение.</p>
  200. <p>С шестого урока и до девятого включительно мы каждый раз воссоздавали игру с нуля. С каждым разом это происходило всё быстрее и быстрее, поэтому с восьмого урока мы ввели турнирную таблицу, где записывали этапы создания игры и время каждого ученика.</p>
  201. <p><strong>Последний урок</strong></p>
  202. <p>К последнему уроку все справлялись с созданием игры с нуля более-менее самостоятельно за час-два.</p>
  203. <p>Такова турнирная таблица последнего урока (имена скрыты):</p>
  204. <p><img alt="Screenshot" src="http://opengamestudio.org/2019-02-04_teaching-kids-to-program-leaderboard.png"></p>
  205. <p>А ниже можно посмотреть на создание игры на память в Scratch ученика, который создал игру быстрее всех: за 30 минут.</p>
  206. <iframe width="560" height="315" src="https://www.youtube.com/embed/WlA193S3SPY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  207. <p><br/></p>
  208. <p><strong>Результаты и планы</strong></p>
  209. <p>Результат обучения превзошёл мои ожидания:</p>
  210. <ul>
  211. <li>трое учеников успели примерно за час или быстрее</li>
  212. <li>двое примерно за полтора часа или быстрее</li>
  213. </ul>
  214. <p>В этом году я планирую провести обучение не с помощью Scratch, а с использованием инструментария Opensource Game Studio: ученики будут работать с Lua, Git и GitHub Pages.</p>
  215. <p>На этом мы заканчиваем статью об опыте Михаила по обучению детей программированию.</p>
  216. <p class="subheader">Category: <a href="http://opengamestudio.org/category/news.html">News</a>
  217. </p>
  218. </article>
  219. </div>
  220. <!-- End Main Content -->
  221. <!-- Sidebar -->
  222. <aside class="large-3 columns">
  223. <!--k
  224. <h5 class="sidebar-title">Site</h5>
  225. <ul class="side-nav">
  226. <li><a href="http://opengamestudio.org/archives.html">Archives</a>
  227. <li><a href="http://opengamestudio.org/tags.html">Tags</a>
  228. <li><a href="http://opengamestudio.org/feeds/all.atom.xml" rel="alternate">Atom feed</a></li>
  229. </ul>
  230. <h5 class="sidebar-title">Categories</h5>
  231. <ul class="side-nav">
  232. <li><a href="http://opengamestudio.org/category/news.html">News</a></li>
  233. </ul>
  234. -->
  235. <h5 class="sidebar-title">Ads</h5>
  236. <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  237. <!-- ogs2 -->
  238. <ins class="adsbygoogle"
  239. style="display:block"
  240. data-ad-client="ca-pub-4473792248813084"
  241. data-ad-slot="9024247127"
  242. data-ad-format="auto"></ins>
  243. <script>
  244. (adsbygoogle = window.adsbygoogle || []).push({});
  245. </script>
  246. </aside> <!-- End Sidebar -->
  247. </div> <!-- End Main Content and Sidebar -->
  248. <!-- Footer -->
  249. <footer class="row">
  250. <div class="large-12 columns">
  251. <hr />
  252. <div class="row">
  253. <div class="large-7 columns">
  254. <p>Proudly powered by <a href="http://getpelican.com">Pelican</a>, which takes great advantage of <a href="http://python.org">Python</a>.</p>
  255. </div>
  256. </div>
  257. </div>
  258. <script type="text/javascript">
  259. var _gaq = _gaq || [];
  260. _gaq.push(['_setAccount', 'UA-3773114-1']);
  261. _gaq.push(['_trackPageview']);
  262. (function() {
  263. var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  264. ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  265. var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  266. })();
  267. </script>
  268. </footer>