OGS-Main
/
ogs-site

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <head>
        <style>
            #header
            {
                background: #2BA6E3;
                padding: 0.7em;
                text-align: left;
            }
            #header a
            {
                color: white;
                text-decoration: none;
                padding: 0.5em 1em 0.5em 1em;
            }

            #lang
            {
                float: right;
            }

            .news_item
            {
                background: #FFFFFF;
                width: 720px;
                padding: 1em;
                margin-top: 2em;
                margin-bottom: 2em;
                border: 1px solid #E0E0E0;
                text-align: left;
            }
            .news_item_contents
            {
                color: #444;
                line-height: 1.5em;
            }
            .news_item_date
            {
                margin-bottom: 2em;
                color: #aaa;
            }

            html
            {
                font-family: sans-serif;
            }
            body
            {
                background: #FAFAFA;
            }
            code, pre
            {
                font-family: monospace, serif;
                font-size: 1em;
                color: #7f0a0c;
            }
            /*
            figure
            {
                margin: 0px;
                padding: 0px;
            }
            */
            img
            {
                width: 720px;
            }
            a
            {
                color: #3A91CB;
            }

            table
            {
                border-collapse: collapse;
            }
            table, th, td
            {
                border: 1px solid #aaa;
                padding: 0.5em;
                margin-top: 0.5em;
                margin-bottom: 0.5em;
            }
        </style>
    </head>
    <body>
        <div id="header">
            <strong id="title">Open Game Studio</strong>
            <a href="../../ru/news/index.html">Новости</a>
            <a href="../../ru/game/index.html">Игры</a>
            <a href="../../ru/tool/index.html">Инструменты</a>
            <a href="../../ru/page/about.html">О нас</a>
            <div id="lang">
                <a href="../../en/news/teaching-kids-to-program.html">EN</a>
                <a href="../../ru/news/teaching-kids-to-program.html">RU</a>
            </div>
        </div>
        <center>
            <h1>В новостях...</h1>
            <div class="news_item">
                <h2 class="news_item_title">
                    <a href="teaching-kids-to-program.html">Обучение детей программированию</a>
                </h2>
                <p class="news_item_date">
                    2019-02-04 00:00
                </p>
                <div class="news_item_contents">
<p><img src="../../images/2019-02-04_teaching-kids-to-program-team.png" alt="Ученики и учителя" /></p>
<p>В этой статье Михаил делится своим опытом обучения детей программированию.</p>
<p>Он расскажет о следующем:</p>
<ul>
<li>организация процесса обучения</li>
<li>программа обучения</li>
<li>игра на память</li>
<li>инструмент программирования</li>
<li>уроки</li>
<li>результаты и планы</li>
</ul>
<p><strong>Организация процесса обучения</strong></p>
<p>Обучение проходит в рамках социальной ответственности бизнеса: компания предоставляет помещение с оборудованием, а также объединяет сотрудников, желающих попробовать себя в роли преподавателей, с сотрудниками, желающими обучить своих детей. Всё это исключительно на добровольной основе.</p>
<p>Потенциальных преподавателей разбивают по группам таким образом, чтобы группа из трёх преподавателей состояла из одного опытного и двух новичков. Одна группа преподавателей ведёт одну группу учеников. Учеников разбивают по возрасту и навыкам.</p>
<p>В 2018-м я второй раз участвовал в программе обучения детей в возрасте примерно десяти лет. Наша группа работала с октября по декабрь 2018-го по субботам с 10:00 до 12:00. Пользуясь служебным положением, я также затащил на курсы и свою жену.</p>
<p><strong>Программа обучения</strong></p>
<p>Когда я участвовал первый раз, наша группа обучала детей программированию довольно бесцельно: мы придумывали простейшие задания на урок для объяснения операторов. В результате в конце обучения у нас не было ничего конкретного, что можно было бы оценить, чем похвастаться и что проанализировать.</p>
<p>В этот второй раз я решил, что мы с детьми реализуем так называемую игру на память. Критерием успешности обучения я определил следующее условие: каждый ученик к концу курса самостоятельно создаёт простейшую игру на память с нуля за 1 час.</p>
<p>Для достижения этого критерия я решил проверить утверждение "Повторение - мать учения", поэтому каждый урок мы создавали всё с нуля. Подчеркну, что мы ничего не сохраняли в учётной записи учеников. Задача была в сохранении навыка создания игры в голове, не в компьютере.</p>
<p><strong>Игра на память</strong></p>
<p>Давайте рассмотрим, что представляет собой игра на память.</p>
<p><strong>1)</strong> В простейшем случае у нас есть 16 карт, причём уникальных лишь 8, остальные 8 являются их парами.</p>
<p><img src="../../images/2019-02-04_teaching-kids-to-program-all-cards-face-up.png" alt="Карты лицом вверх" /></p>
<p>В представленном изображении у нас есть лишь две карты с котом, собакой и т.д..</p>
<p><strong>2)</strong> В начале игры мы перемешиваем карты и раскладываем их <strong>рубашкой</strong> вверх.</p>
<p><img src="../../images/2019-02-04_teaching-kids-to-program-all-cards-face-down.png" alt="Карты лицом вниз" /></p>
<p><strong>3)</strong> Первый из участников игры открывает две карты.</p>
<p><img src="../../images/2019-02-04_teaching-kids-to-program-first-pair.png" alt="Пара карт" /></p>
<p><strong>4)</strong> Если карты различаются, возвращаем их в исходное положение: кладём <strong>рубашкой</strong> вверх.</p>
<p><img src="../../images/2019-02-04_teaching-kids-to-program-all-cards-face-down.png" alt="Карты лицом вниз" /></p>
<p><strong>5)</strong> Следующий участник игры открывает другую пару карт.</p>
<p><img src="../../images/2019-02-04_teaching-kids-to-program-second-pair.png" alt="Вторая пара карт" /></p>
<p><strong>6)</strong> Если карты совпадают, убираем их с игрового поля.</p>
<p><img src="../../images/2019-02-04_teaching-kids-to-program-remove-pair.png" alt="Пара совпадающих карт убрана" /></p>
<p>Цель игры в том, чтобы убрать все карты с поля. Игра в данном виде не включает соревнование, поэтому играть можно одному человеку.</p>
<p>С одной стороны, игра на память довольно проста, с другой стороны, реализация игры затрагивает основную функциональность, необходимую для создания любой более-менее сложной игры:</p>
<ul>
<li>создание элементов</li>
<li>их расстановка на поле</li>
<li>выбор элементов</li>
<li>сравнение выбранных элементов</li>
<li>скрытие совпадающих элементов</li>
</ul>
<p><strong>Инструмент программирования</strong></p>
<p>В качестве инструмента мы использовали среду <a href="https://scratch.mit.edu/">Scratch</a>. Она рассчитана на обучение детей программированию, поэтому каждое действие, каждый оператор в ней представлен графически.</p>
<p>Например, следующим скриптом можно повернуть кота на 360 градусов за секунду:</p>
<p><img src="../../images/2019-02-04_teaching-kids-to-program-cat-script-ru.png" alt="Скрипт" /></p>
<p>Вот так выглядит результат:</p>
<p><img src="../../images/2019-02-04_teaching-kids-to-program-cat-animation.gif" alt="Анимация" /></p>
<p>Замечу, что это довольно успешное решение для представления кода графически. Например, платное решение, продвигаемое нынче компанией SAP, предполагает использование так называемых кубиков для программирования:</p>
<p><img src="../../images/2019-02-04_teaching-kids-to-program-sap-ui.png" alt="SAP UI" /></p>
<p>Тут можно лишь ввести в нужные поля нужные значения. Если потребуется что-то нестандартное, то поможет лишь скрипт, который представлен опять же кубиком.</p>
<p>По личному опыту скажу, что решение Scratch не тормозит от слова совсем, чего не скажешь о решении SAP.</p>
<p><strong>Первый урок</strong></p>
<p>Первый урок являлся вводным, поэтому компьютеры мы не использовали.</p>
<p>План был следующим:</p>
<ol>
<li>Познакомиться</li>
<li>Сыграть в игру на память</li>
<li>Изучить понятие алгоритма</li>
<li>Написать алгоритм игры</li>
<li>Проанализировать урок</li>
</ol>
<p><strong>1)</strong> Знакомство</p>
<p>Преподаватели с учениками встают в круг. Это уравнивает всех и делает каждого участником команды.</p>
<p>Первый участник называет своё имя и рассказывает о том, почему он решил посетить этот курс. Второй и последующие участники сначала повторяют имя и рассказ каждого предыдущего участника, после чего называют своё имя и рассказывают.</p>
<p>Примерно так это выглядит:</p>
<ol>
<li>Вася: "Меня зовут Вася, я хочу изучить Scratch, потому что меня заставил папа"</li>
<li>Дима: "Это Вася, заниматься Scratch'ем его заставляет папа. Меня зовут Дима, и это мой четвёртый год Scratch'а"</li>
<li>Оля: "Это Вася, его заставляют родители. Это Дима, он практически ветеран Scratch'а. Меня зовут Оля, я первый год преподаю, буду учиться вместе со всеми"</li>
</ol>
<p>Данный формат знакомства преследует следующие цели:</p>
<ul>
<li>Знакомство<ul>
<li>Каждый участник команды должен знать по имени остальных участников команды</li></ul></li>
<li>Общее пространство<ul>
<li>Все участники в круге, а не за рабочими местами, что уменьшает отвлечение на игры в компьютере</li></ul></li>
<li>Равенство<ul>
<li>И преподаватели, и ученики в одном круге, что уравновешивает всех в качестве участников команды без иерархии</li></ul></li>
<li>Внимание<ul>
<li>Каждый участник команды должен внимательно слушать остальных участников, чтобы правильно повторить сказанное ими</li></ul></li>
<li>Обратная связь<ul>
<li>Каждый участник команды должен максимально чётко излагать свою мысль, иначе остальные просто не смогут её повторить</li></ul></li>
<li>Веселье<ul>
<li>Проблемы с запоминанием имён всех веселят</li></ul></li>
</ul>
<p><strong>2)</strong> Игра на память в карты</p>
<ol>
<li>Берём две колоды карт и выбираем из них по 8 одинаковых</li>
<li>Раскладываем карты в сетку 4 x 4 рубашкой вверх на столе</li>
<li>Ученики встают вокруг стола</li>
<li>Каждый ученик по очереди переворачивает пару карт<ul>
<li>Если карты совпали, то убираем их с поля</li>
<li>Если карты различаются, то переворачиваем их рубашкой вверх</li></ul></li>
</ol>
<p>Ученикам очень нравится играть в настольные игры. В ходе игры преподаватели проговаривают то, что происходит.</p>
<p>После пары партий переходим к изучению понятия алгоритма.</p>
<p><strong>3)</strong> Понятие алгоритма</p>
<ol>
<li>Спрашиваем сначала учеников, даём возможность высказаться, узнаём уровень каждого ученика</li>
<li>При необходимости поправляем высказывания, если они близки к ожидаемому ответу</li>
<li>Предлагаем написать алгоритм перевода человека из состояния "стоит за дверью кабинета" в состояние "работает за компьютером в кабинете"</li>
</ol>
<p>Ученикам очень нравится подходить к доске и писать на ней, поэтому по очереди вызываем каждого ученика, чтобы он писал по одному пункту алгоритма. Самого активного ученика используем в качестве исполнителя алгоритма.</p>
<p><strong>4)</strong> Алгоритм игры</p>
<p>Предлагаем написать алгоритм игры, опять вызываем каждого добавлять по одному пункту на доске. После завершения описания алгоритма ещё раз играем с картами, но на этот раз каждый ученик должен проговаривать шаг алгоритма.</p>
<p>Выглядит это примерно так:</p>
<ol>
<li>Вася: "Раскладываем 16 карт рубашкой вверх"</li>
<li>Дима: "Переворачиваем пару карт"</li>
<li>Паша: "Если две карты различаются, переворачиваем их рубашкой вверх"</li>
<li>Филипп: "Переворачиваем пару карт"</li>
<li>Миша: "Если две карты совпадают, убираем их с поля"</li>
</ol>
<p><strong>5)</strong> Анализ урока</p>
<p>На этом первый урок заканчивается, и у преподавателей появляется возможность обсудить как свои впечатления об уроке, так и об учениках, выработать подходы к тихоням и активистам, договориться о дальнейших планах на следующие уроки.</p>
<p>У нас были следующие решения:</p>
<ol>
<li>Рассаживать тихонь и активистов через одного, чтобы соблюсти баланс шума и тишины. Иначе группа активистов создаёт очаг бури, а группа тихонь - очаг пустыни, что замедляет процесс обучения.</li>
<li>Требовать от учеников точности, т.к. активисты любят кривляться, что плохо влияет на дисциплину.</li>
</ol>
<p><strong>Второй и третий уроки</strong></p>
<p>Последующие уроки мы опять же начинали с разминки: вставали в круг, называли имя и рассказывали, кто что сделал. А если не сделал, то почему. Как и прежде, каждый участник сначала повторял сказанное предыдущими и лишь затем говорил о себе.</p>
<p>На втором уроке мы создавали требования для элемента игрового поля и пытались создать этот элемент в Scratch. Это вполне удалось.</p>
<p>На третьем уроке мы пытались создать 16 элементов и расположить их в сетке 4x4. Тут мы застопорились, т.к. ученики не смогли понять систему координат, чтобы расположить 16 элементов в сетке. Стало очевидно, что планы уроков являются лишь планами, а действительность вносит свои изменения.</p>
<p>У нас было два пути решения проблемы с системой координат:</p>
<ol>
<li>Продолжать обучать системе координат с риском не успеть создать игру до конца курса</li>
<li>Изменить требования к игре таким образом, чтобы система координат была не нужна</li>
</ol>
<p>Мы решили пойти вторым путём, т.к. мы всё-таки не школа и цель у нас была научить создавать игру, т.е. применять знания на практике, а не в теории. Поэтому сетку элементов 4x4 мы решили заменить кругом из 16 элементов.</p>
<p>Данное решение привело меня к следующим выводам:</p>
<ol>
<li>Для решения задачи часто можно найти более простой путь</li>
<li>Этот путь легче для понимания, хоть и менее гибкий</li>
<li>Перейти на сложный путь для увеличения гибкости можно позже, когда это будет действительно необходимо</li>
<li>Упрощение приближает к конечной цели, усложнение отдаляет от неё</li>
</ol>
<p><strong>Четвёртый и последующие уроки</strong></p>
<p>С четвёртого урока мы отменили стадию написания требований, т.к. она начала занимать бОльшую часть урока: мы снова сделали уклон на практику, а не теорию, чтобы уложиться в сроки. На этот раз все требования были написаны заранее и выданы "сверху". Но всё равно их никто не читал.</p>
<p>Четвёртый и пятый уроки мы потратили на создание 16 элементов в виде круга, выделение пары элементов и проверку на их совпадение.</p>
<p>С шестого урока и до девятого включительно мы каждый раз воссоздавали игру с нуля. С каждым разом это происходило всё быстрее и быстрее, поэтому с восьмого урока мы ввели турнирную таблицу, где записывали этапы создания игры и время каждого ученика.</p>
<p><strong>Последний урок</strong></p>
<p>К последнему уроку все справлялись с созданием игры с нуля более-менее самостоятельно за час-два.</p>
<p>Такова турнирная таблица последнего урока (имена скрыты):</p>
<p><img src="../../images/2019-02-04_teaching-kids-to-program-leaderboard.png" alt="Турнирная таблица" /></p>
<p>А ниже можно посмотреть на создание игры на память в Scratch ученика, который создал игру быстрее всех: за 30 минут.</p>
<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>
<p><br/></p>
<p><strong>Результаты и планы</strong></p>
<p>Результат обучения превзошёл мои ожидания:</p>
<ul>
<li>трое учеников успели примерно за час или быстрее</li>
<li>двое примерно за полтора часа или быстрее</li>
</ul>
<p>В этом году я планирую провести обучение не с помощью Scratch, а с использованием инструментария Opensource Game Studio: ученики будут работать с Lua, Git и GitHub Pages.</p>
<p>На этом мы заканчиваем статью об опыте Михаила по обучению детей программированию.</p>
                </div>
            </div>
            <div id="footer">
                Сайт сгенерирован <a href="http://opengamestudio.org/pskov/ru">ПСКОВОМ</a>
                из <a href="http://github.com/ogstudio/site-opengamestudio">этого исходного кода</a>.
                Сайт размещён на <a href="https://pages.github.com">GitHub Pages</a>.
            </div>
        </center>
    </body>
</html>