OGS-Main/ogs-site
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Publish 2020-02 teaching to program article

Browse Source
This commit is contained in:
Михаил Капелько
2020-02-12 19:15:13 +03:00
parent 418eec7ce6
commit 71ed1d2390
32 changed files with 1425 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

253
ru/news/2020-02-11_teaching-programming-2019.md Normal file
View File

@@ -0,0 +1,253 @@
Title: Обучение программированию 2019, или в поисках идеальной программы: Последовательность
Date: 2020-02-12 00:00
Category: News
Slug: teaching-to-program-2019
Lang: ru
![МУРОМ][screenshot]
В этой статье Михаил расскажет об обучении ребят программированию в 2019-м году.
**Предисловие**
Осенью 2019-го я в третий раз участвовал в курсе обучения ребят 10-15 лет программированию в качестве одного из преподавателей. Наши курсы проходили с середины сентября по середину декабря. Каждое занятие было в субботу с 10:00 до 12:00. Подробнее о структуре каждого урока и деталях создаваемой на курсе игры можно узнать из [статьи за 2018-й год][article-2018].
Лично для себя я выделил две основные цели, к которым иду с помощью курсов:
* создать удобный инструмент для создания простейших игр, понятный заинтересованным людям в возрасте от 10 лет;
* создать программу обучения программированию, позволяющая заинтересованным людям в возрасте от 10 лет самостоятельно делать простейшие игры.
**Игра**
![Игра][screenshot-game]
Простейшей игрой уже второй раз является игра на память, суть которой в поиске совпадающих элементов на игровом поле. Детально механика игры разобрана в [статье за 2018-й год][article-2018]. Поиграть в созданную на курсе игру вы можете прямо из браузера [по этой ссылке][game].
**Инструмент**
![Среда][screenshot-ide]
Основным критерием при создании инструмента для меня являлась **неприхотливость**, выражающаяся в следующем:
1. работает на любой операционной системе
* разработка на Linux, macOS, Windows
* воспроизведение результата на ПК, планшете и мобилках
1. не нужно ничего настраивать: открыл ссылку в браузере и начал работу
1. фактически не нужен интернет: можно работать локально, т.к. нет какого-либо сервера на стороне
1. результат доступен всем
* если положить на GitHub Pages, то достаточно дать ссылку
* если кинуть файл по Skype, то его можно открыть локально
Инструмент представляет из себя интегрированную среду разработки (ИСР), технически являющуюся одним файлом HTML. В этом единственном файле находится как ИСР, так и создаваемый результат (в данном случае игра на память). Инструмент в целом выглядит довольно стандартно:
1. слева находится панель кода выбранного модуля;
1. посередине - панель с кнопками перезапуска, сохранения результата и управления модулями;
1. в правом верхнем углу - результат;
1. в правом нижнем углу - список всех модулей: как относящихся к ИСР, так и созданных для игры.
Ввиду того, что у нас лишь один файл, нам нужно уметь запускать его в двух режимах:
1. воспроизведение
* является режимом по умолчанию
* достаточно просто открыть файл HTML
1. редактирование
* доступно при добавлении символов `?0` в адресной строке
Временное хранение изменений осуществляется с помощью хранилища браузера (IndexedDB). Для сохранения изменений на постоянной основе, например, для публикации, необходимо скачать этот же самый файл с изменениями, нажав на соответствующую кнопку в средней панели.
**Первые занятия**
Для первого занятия я подготовил [80 строк кода на JavaScript][80-sloc], распечатал их и раздал каждому. Каждый ученик должен был набрать распечатанный код в инструменте. Набором кода я преследовал две цели:
1. узнать скорость набора текста учениками;
1. показать API инструмента.
Скорость набора оказалась чрезвычайно низкой: от примерно 14 символов в минуту (ученик успел набрать лишь половину) до примерно 39 символов в минуту. Сам я этот код набирал со скоростью 213 символов в минуту, поэтому от результатов учеников опешил: у меня появилось подозрение, что написать необходимые 300 строк игры за 1 час мы к концу курса не осилим физически.
На втором занятии мы в набранном ранее коде искали опечатки. Я встретил такие опечатки, которые ни у себя, ни у других коллег в жизни не находил. Тут я опешил второй раз: ученикам было чрезвычайно сложно найти опечатки, даже имея перед глазами распечатанный код. Страшно представить, что случилось бы с их психикой, если бы мы проходили [жесточайший тест по дизайну интерфейсов][cant-unsee] с вопросами вроде такого:
![Can't unsee][screenshot-cant-unsee]
С третьего по шестое занятия я уменьшал код вплоть до 10 строк, выдавал инструмент уже с частично набранным кодом, в котором нужно было найти и исправить ошибки. Ничего не помогало: ученики просто не воспринимали написанное, как-будто вместо чего-то членораздельного на экране видели иероглифы.
**Успешное седьмое занятие**
Прошло уже больше половины курса, а я не продвинулся ни на йоту. В очередной попытке найти хоть какой-то способ объяснить код игры я ещё раз переписал игру. На этот раз с модулем под интригующим названием `последовательность`.
К моему удивлению, на занятии был оглушительный успех: мы успели до "звонка", и ребята буквально горели энтузиазмом. Горели настолько, что устроили под конец занятия мозговой штурм о том, чего бы ещё добавить в появившуюся в ходе занятия игру:
![Мозговой штурм][screenshot-brainstorm]
Итак, давайте разберём это занятие подробнее.
**Доска**
Предыдущие занятия у нас строились в формате "преподаватели подходят к каждому ученику и помогают ему индивидуально". За шесть занятий мы - два преподавателя - осознали, что подход к каждому и погружение в частные опечатки/ошибки занимает времени больше, чем объяснение нового материала.
С седьмого занятия мы решили завязать всех учеников на доску, т.е. доска становилась центральным местом, где все мы творили, куда выходили и где писали. Компьютеры же превращались в место, куда ученики копируют содержимое доски. Практика показала, что доски в школах существуют не зря:
* все в школе привыкли получать информацию с доски, поэтому знали, куда смотреть;
* преподаватель работает с тем, что на доске, поэтому может объяснять сразу всем про одно, без углубления в индивидуальные ошибки;
* исправление индивидуальных ошибок происходит быстрее, т.к. большинство из них связаны с невнимательностью, т.е. опечатками при копировании с доски.
Важно отметить, что на доске преподаватели работают совместно с учениками: преподаватель задаёт направление, но ученики сами выходят и пишут на ней ответы на вопросы, заданные преподавателем. Плюсы такого подхода следующие:
* ученик сам пишет, т.е. принимает решение и реализует его сам, учитель не записывает с его слов;
* ученик выходит к доске, т.е. двигается, что и полезно, и уменьшает количество необузданной энергии;
* ученику приходится запоминать код, чтобы записать его на доске;
* по тому, насколько легко и организованно ученик запомнил и записал код на доске, можно судить о его внимательности.
**Последовательность**
Модуль `последовательность` для игры на память выглядит следующим образом:
![Последовательность][screenshot-sequence]
Последовательность позволяет записать алгоритм в виде событий и реакций:
* события (`начало`, `выбор` и т.д.) расположены без отступа слева;
* реакции (`настроить ThreeJS`, `показать заставку`) расположены под соответствующими событиями с отступом.
Таким образом, при запуске игры (событие `начало`) мы настраиваем ThreeJS (реакция `настроить ThreeJS`), показываем заставку (реакция `показать заставку`) и т.д.
Занятие мы начинали с практически пустым модулем `последовательность`, присутствовали заранее лишь события без реакций:
![События][screenshot-events]
Эти же события я выписал на доске, оставив свободное место для записи реакций (замазано уже в GIMP для удобства иллюстрации):
![События на доске][screenshot-board-events]
Реакции мы искали в модуле `память.реакции`:
![Реакции][screenshot-reactions]
Каждая реакция модуля `последовательность` представлена в модуле `память.реакции` [функцией-конструктором][constructor-function]. Например, реакции `проверить окончание` однозначно соответствует функция `ПроверитьОкончание`:
```javascript
function ПроверитьОкончание(мир) // 1.
{
мир.состояние["скрыто сфер"] = 0; // 2.
this.исполнить = function() // 3.
{
мир.состояние["скрыто сфер"] += 2; // 4.
var скрыто = мир.состояние["скрыто сфер"]; // 5.
var сфер = мир.состояние["сферы"].length; // 6.
if (сфер == скрыто) // 7.
{
мир.события["конец"].уведомить(); // 8.
}
};
}
```
Рассмотрим эту функцию подробнее:
1. Функция принимает на вход `мир` (словарь), используемый для общения функций друг с другом. `мир` состоит из трёх областей (ключей словаря):
* `состояние` содержит переменные значения для обмена данными;
* `настройки` содержат константные значения для настройки функций;
* `события` содержат издателей для организации возможности подписать функции на события.
1. Экземпляр функции-конструктора создаётся оператором `new` при разборе модуля `последовательность`. Фактически всё, что не входит в метод `исполнить`, является телом конструктора. В частности, здесь мы создаём переменную `скрыто сфер` для учёта количества скрытых сфер.
1. Метод `исполнить` вызывается на каждое уведомление о событии.
1. Т.к. реакцию `проверить окончание` вызывают на событие сокрытия пары сфер, то счётчик `скрыто сфер` увеличиваем на `2`.
1. Просто задаём короткий псевдоним для счётчика `скрыто сфер`.
1. Получаем общее количество сфер на игровом поле.
1. Сравниваем количество скрытых сфер с общим их количеством.
1. Если они равны, т.е. все сферы скрыты, уведомляем о завершении игры с помощью события `конец`.
Поиск функций в модуле `память.реакции` ученики осуществляли по очереди:
* ученик ищет функцию в модуле (для упрощения я разделил функции символами `// // // //`);
* при нахождении озвучивает название функции и выходит к доске;
* на доске пишет название функции в общий список найденных функций (допускается пользоваться любыми средствами для запоминания названия, кроме подсказки преподавателя).
Это упражнение тоже позволяет проследить, кто внимательно следит за поиском и записью функции, а кто не может, когда подходит его очередь, найти свою функцию.
После выписывания названий всех функций на доску мы сопоставляли события с реакциями (функциями) схожим образом:
* преподаватель спрашивает, например, какие из функций подходят для события `начало`
* в случае верного ответа предлагает ученику
* выйти к доске
* написать реакцию под событием
* вычёркнуть соответствующую функцию из списка найденных функций
После получения более-менее рабочего набора реакций для одного события можно предложить ученикам перенести реакции с доски в компьютеры. Таким образом мы заполняем реакции как на доске:
![Последовательность на доске][screenshot-board-sequence]
![Функции на доске][screenshot-board-functions]
так и в инструменте:
![Последовательность][screenshot-sequence]
**Следующие занятия**
На следующих занятиях мы пытались создать новую реакцию и соответствующую ей функцию-конструктор. Сначала я пытался опять наскоками (целыми строками кода) вбить решение в головы, однако, существенных результатов это не дало. Поэтому пришлось разбирать в течение нескольких занятий примерно такой код:
```js
var кот = "9";
console.log(кот);
```
К сожалению, донести смысл этих двух строк кода так и не удалось: ребята путались в том, что такое переменная, а что такое значение. На этом проблемы не закончились: в новой функции нужно было работать с массивом, что оказалось просто невозможно объяснить. Мне ещё предстоит научиться объяснять переменные и массивы в ходе следующих курсов.
К концу занятий мы, конечно, функцию написали, но понимания и последующей веры в себя, выраженной в горящем энтузиазме, как это было на седьмом занятии, уже не было.
**Последнее занятие**
На последнем занятии вместо стандартного круга приветствия я попросил каждого (включая себя) высказаться, что понравилось в курсе (+), а что стоит изменить (-). Получилась следующая таблица:
![Ретро][screenshot-retro]
Как ни странно, ребятам не нравилось писать на доске, несмотря на то, что она увеличивала эффективность изложения материала. С одной стороны, была "объёмная программа", а с другой - "одно и то же каждый урок", т.е. повторение пройденного ранее материала.
Раз в несколько занятий мы сохраняли результат на GitHub. Давалось это тоже нелегко: мы тратили до получаса на то, чтобы каждый вошёл в свою учётную запись. Как всегда, никто не помнил свой пароль (причём каждый раз) либо для подтверждения захода с нового устройства требовался доступ к почте, пароль от которой либо тоже никто не помнил, либо почта была родительская (ребята звонили родителям).
Так или иначе, у каждого ученика к концу курса осталась собственная версия игры с персональными заставкой и концовкой:
![Адрес][screenshot-addr]
**Выводы**
С одной стороны, были явные успехи:
* инструмент оказался неприхотливым и полностью работоспособным;
* концепция последовательностей была хорошо принята.
С другой стороны, были явные неудачи:
* инструмент предполагает навык работы с JavaScript, чем ученики не обладали;
* программа обучения буксовала практически все занятия.
Поэтому в ходе курса обучения программированию 2020-го года я попробую ответить на следующие вопросы:
1. Будет ли другой язык (Python, Lua) проще для объяснения и работы?
1. Можно ли скрыть работу с Git внутри инструмента, чтобы сохранять результат на [Git, не покидая инструмента][isomorphic-git]?
1. Можно ли сделать декларативный API по аналогии со [SwiftUI][swiftui]?
1. Как всё-таки объяснить переменные и массивы?
Ответы на эти и другие вопросы будут через год ;)
![Группа][screenshot-group]
[screenshot]: ../../images/2020-02-11_teaching-to-program-2019_screenshot.png
[article-2018]: teaching-kids-to-program.html
[screenshot-game]: ../../images/2020-02-11_teaching-to-program-2019_game.png
[game]: http://kornerr.ru/ekids2019
[screenshot-ide]: ../../images/2020-02-11_teaching-to-program-2019_ide.png
[80-sloc]: http://kornerr.ru/ekids19?техника
[cant-unsee]: https://cantunsee.space/
[screenshot-cant-unsee]: ../../images/2020-02-11_teaching-to-program-2019_cant-unsee.jpg
[screenshot-brainstorm]: ../../images/2020-02-11_teaching-to-program-2019_brainstorm.jpg
[screenshot-sequence]: ../../images/2020-02-11_teaching-to-program-2019_sequence.png
[screenshot-events]: ../../images/2020-02-11_teaching-to-program-2019_events.png
[screenshot-board-events]: ../../images/2020-02-11_teaching-to-program-2019_board-events.jpg
[screenshot-reactions]: ../../images/2020-02-11_teaching-to-program-2019_reactions.png
[constructor-function]: https://learn.javascript.ru/constructor-new
[screenshot-board-sequence]: ../../images/2020-02-11_teaching-to-program-2019_board-sequence.jpg
[screenshot-board-functions]: ../../images/2020-02-11_teaching-to-program-2019_board-functions.jpg
[screenshot-retro]: ../../images/2020-02-11_teaching-to-program-2019_retro.jpg
[screenshot-addr]: ../../images/2020-02-11_teaching-to-program-2019_addr.jpg
[screenshot-group]: ../../images/2020-02-11_teaching-to-program-2019_group.jpg
[isomorphic-git]: https://isomorphic-git.org/
[swiftui]: https://medium.com/someswift/swiftui-dsl-%D0%BD%D0%B0-%D0%BC%D0%B0%D0%BA%D1%81%D0%B8%D0%BC%D0%B0%D0%BB%D0%BA%D0%B0%D1%85-891741685efe

33
ru/news/index.html
View File

@@ -94,6 +94,23 @@
<center>
<h1>Новости</h1>
<div class="news_item">
<h2 class="news_item_title">
<a href="teaching-to-program-2019.html">Обучение программированию 2019, или в поисках идеальной программы: Последовательность</a>
</h2>
<p class="news_item_date">
2020-02-12 00:00
</p>
<div class="news_item_contents">
<p><img src="../../images/2020-02-11_teaching-to-program-2019_screenshot.png" alt="МУРОМ" /></p>
<p>В этой статье Михаил расскажет об обучении ребят программированию в 2019-м году.</p>
<p><strong>Предисловие</strong></p>
<p>Осенью 2019-го я в третий раз участвовал в курсе обучения ребят 10-15 лет программированию в качестве одного из преподавателей. Наши курсы проходили с середины сентября по середину декабря. Каждое занятие было в субботу с 10:00 до 12:00. Подробнее о структуре каждого урока и деталях создаваемой на курсе игры можно узнать из <a href="teaching-kids-to-program.html">статьи за 2018-й год</a>.. . .</p>
</div>
<div class="news_item_more">
<a href="teaching-to-program-2019.html">Читать далее</a>
</div>
</div>
<div class="news_item">
<h2 class="news_item_title">
<a href="the-pros-and-cons-of-restarting-from-scratch.html">Минусы и плюсы начинания с начала</a>
@@ -228,22 +245,6 @@
<a href="examples-and-dependencies.html">Читать далее</a>
</div>
</div>
<div class="news_item">
<h2 class="news_item_title">
<a href="example-driven-development.html">Разработка через создание примеров</a>
</h2>
<p class="news_item_date">
2018-06-27 00:00
</p>
<div class="news_item_contents">
<p><img src="../../images/2018-06-27-example-driven-development.png" alt="Брокер отладки" /></p>
<p>Эта статья описывает то, как создание третьего кросс-платформенного примера OpenSceneGraph привело нас к разработке через создание примеров.</p>
<p><strong>ИЗМЕНЕНИЯ ОТ 2018-08</strong>: третий пример был переименован в четвёртый в связи с причинами, изложенными в <a href="examples-and-dependencies.html">следующей статье</a>.. . .</p>
</div>
<div class="news_item_more">
<a href="example-driven-development.html">Читать далее</a>
</div>
</div>
<p class="pagination_title">Страница 1 из 7</p>
<p>

32
ru/news/index2.html
View File

@@ -94,6 +94,22 @@
<center>
<h1>Новости</h1>
<div class="news_item">
<h2 class="news_item_title">
<a href="example-driven-development.html">Разработка через создание примеров</a>
</h2>
<p class="news_item_date">
2018-06-27 00:00
</p>
<div class="news_item_contents">
<p><img src="../../images/2018-06-27-example-driven-development.png" alt="Брокер отладки" /></p>
<p>Эта статья описывает то, как создание третьего кросс-платформенного примера OpenSceneGraph привело нас к разработке через создание примеров.</p>
<p><strong>ИЗМЕНЕНИЯ ОТ 2018-08</strong>: третий пример был переименован в четвёртый в связи с причинами, изложенными в <a href="examples-and-dependencies.html">следующей статье</a>.. . .</p>
</div>
<div class="news_item_more">
<a href="example-driven-development.html">Читать далее</a>
</div>
</div>
<div class="news_item">
<h2 class="news_item_title">
<a href="openscenegraph-examples.html">Кросс-платформенные примеры OpenSceneGraph</a>
@@ -222,22 +238,6 @@
<a href="scripting-research.html">Читать далее</a>
</div>
</div>
<div class="news_item">
<h2 class="news_item_title">
<a href="openscenegraph-cross-platform-guide.html">OpenSceneGraph cross-platform guide</a>
</h2>
<p class="news_item_date">
2017-07-17 00:00
</p>
<div class="news_item_contents">
<p><img src="../../images/2017-07-openscenegraph-guide.png" alt="Приложение OpenSceneGraph на десктопе и мобилке" /></p>
<p>Эта статья резюмирует создание кросс-платформенного руководства OpenSceneGraph.</p>
<p>Июнь ознаменовал собой окончание работы над <a href="https://github.com/OGStudio/openscenegraph-cross-platform-guide">кросс-платформенным руководством OpenSceneGraph</a>. Мы опубликовали последний самоучитель (из изначально запланированных). Этот самоучитель описывает <a href="https://github.com/OGStudio/openscenegraph-cross-platform-guide/tree/master/1.10.SampleWeb">сборку и запуск примера приложения OpenSceneGraph в вебе</a> с помощью Emscripten.. . .</p>
</div>
<div class="news_item_more">
<a href="openscenegraph-cross-platform-guide.html">Читать далее</a>
</div>
</div>
<p class="pagination_title">Страница 2 из 7</p>
<p>

32
ru/news/index3.html
View File

@@ -94,6 +94,22 @@
<center>
<h1>Новости</h1>
<div class="news_item">
<h2 class="news_item_title">
<a href="openscenegraph-cross-platform-guide.html">OpenSceneGraph cross-platform guide</a>
</h2>
<p class="news_item_date">
2017-07-17 00:00
</p>
<div class="news_item_contents">
<p><img src="../../images/2017-07-openscenegraph-guide.png" alt="Приложение OpenSceneGraph на десктопе и мобилке" /></p>
<p>Эта статья резюмирует создание кросс-платформенного руководства OpenSceneGraph.</p>
<p>Июнь ознаменовал собой окончание работы над <a href="https://github.com/OGStudio/openscenegraph-cross-platform-guide">кросс-платформенным руководством OpenSceneGraph</a>. Мы опубликовали последний самоучитель (из изначально запланированных). Этот самоучитель описывает <a href="https://github.com/OGStudio/openscenegraph-cross-platform-guide/tree/master/1.10.SampleWeb">сборку и запуск примера приложения OpenSceneGraph в вебе</a> с помощью Emscripten.. . .</p>
</div>
<div class="news_item_more">
<a href="openscenegraph-cross-platform-guide.html">Читать далее</a>
</div>
</div>
<div class="news_item">
<h2 class="news_item_title">
<a href="ios-tutorial.html">Самоучитель iOS</a>
@@ -221,22 +237,6 @@
<a href="2016-october-recap.html">Читать далее</a>
</div>
</div>
<div class="news_item">
<h2 class="news_item_title">
<a href="2016-tech-showcases.html">Демонстрации технологий</a>
</h2>
<p class="news_item_date">
2016-10-31 00:00
</p>
<div class="news_item_contents">
<p><img src="../../images/2016-10-31_tech-showcases.png" alt="Файл с функциональностью на фоне" /></p>
<p>Сегодня мы ещё раз взглянем на формат демонстраций в 2015-2016 годах, а также сообщим о новом формате 2017-го.</p>
<p><strong>2015 и 2016: демонстрации в прямом эфире.</strong>. . .</p>
</div>
<div class="news_item_more">
<a href="2016-tech-showcases.html">Читать далее</a>
</div>
</div>
<p class="pagination_title">Страница 3 из 7</p>
<p>

31
ru/news/index4.html
View File

@@ -94,6 +94,22 @@
<center>
<h1>Новости</h1>
<div class="news_item">
<h2 class="news_item_title">
<a href="2016-tech-showcases.html">Демонстрации технологий</a>
</h2>
<p class="news_item_date">
2016-10-31 00:00
</p>
<div class="news_item_contents">
<p><img src="../../images/2016-10-31_tech-showcases.png" alt="Файл с функциональностью на фоне" /></p>
<p>Сегодня мы ещё раз взглянем на формат демонстраций в 2015-2016 годах, а также сообщим о новом формате 2017-го.</p>
<p><strong>2015 и 2016: демонстрации в прямом эфире.</strong>. . .</p>
</div>
<div class="news_item_more">
<a href="2016-tech-showcases.html">Читать далее</a>
</div>
</div>
<div class="news_item">
<h2 class="news_item_title">
<a href="2016-september-recap.html">Сентябрь 2016 кратко</a>
@@ -217,21 +233,6 @@
<a href="once-mahjong-always-mahjong.html">Читать далее</a>
</div>
</div>
<div class="news_item">
<h2 class="news_item_title">
<a href="ogs-editor-0.9.html">Материалы прямого эфира за май 2016</a>
</h2>
<p class="news_item_date">
2016-05-29 00:00
</p>
<div class="news_item_contents">
<iframe width="560" height="315" src="https://www.youtube.com/embed/8gHYOkMRoos?list=PLWMTZqE4MAMKp3wP1N63xbdhdgfKi-d-J" frameborder="0" allowfullscreen></iframe>
<p>В этот раз мы показали, как создать простую игру на основе Домино. Ниже приведены все материалы, связанные с созданием игры.. . .</p>
</div>
<div class="news_item_more">
<a href="ogs-editor-0.9.html">Читать далее</a>
</div>
</div>
<p class="pagination_title">Страница 4 из 7</p>
<p>

29
ru/news/index5.html
View File

@@ -94,6 +94,21 @@
<center>
<h1>Новости</h1>
<div class="news_item">
<h2 class="news_item_title">
<a href="ogs-editor-0.9.html">Материалы прямого эфира за май 2016</a>
</h2>
<p class="news_item_date">
2016-05-29 00:00
</p>
<div class="news_item_contents">
<iframe width="560" height="315" src="https://www.youtube.com/embed/8gHYOkMRoos?list=PLWMTZqE4MAMKp3wP1N63xbdhdgfKi-d-J" frameborder="0" allowfullscreen></iframe>
<p>В этот раз мы показали, как создать простую игру на основе Домино. Ниже приведены все материалы, связанные с созданием игры.. . .</p>
</div>
<div class="news_item_more">
<a href="ogs-editor-0.9.html">Читать далее</a>
</div>
</div>
<div class="news_item">
<h2 class="news_item_title">
<a href="may-live-session-announcement.html">Прямой эфир: 28 мая 2016</a>
@@ -210,20 +225,6 @@
<a href="livesession-materials-editor-07.html">Читать далее</a>
</div>
</div>
<div class="news_item">
<h2 class="news_item_title">
<a href="livesession-editor-07.html">Создание простой игры в прямом эфире: 15 ноября 2015</a>
</h2>
<p class="news_item_date">
2015-11-09 00:00
</p>
<div class="news_item_contents">
<p>Мы рады сообщить, что трансляция <a title="LiveCoding" href="https://www.livecoding.tv/kornerr">LiveCoding</a> состоится <a title="Локальное время" href="http://www.timeanddate.com/worldclock/fixedtime.html?msg=Whac-a-mole+game+from+scratch+live&amp;iso=20151115T14&amp;p1=166&amp;ah=3">15 ноября 2015 в 14:00 MSK</a>. Присоединяйтесь!. . .</p>
</div>
<div class="news_item_more">
<a href="livesession-editor-07.html">Читать далее</a>
</div>
</div>
<p class="pagination_title">Страница 5 из 7</p>
<p>

28
ru/news/index6.html
View File

@@ -94,6 +94,20 @@
<center>
<h1>Новости</h1>
<div class="news_item">
<h2 class="news_item_title">
<a href="livesession-editor-07.html">Создание простой игры в прямом эфире: 15 ноября 2015</a>
</h2>
<p class="news_item_date">
2015-11-09 00:00
</p>
<div class="news_item_contents">
<p>Мы рады сообщить, что трансляция <a title="LiveCoding" href="https://www.livecoding.tv/kornerr">LiveCoding</a> состоится <a title="Локальное время" href="http://www.timeanddate.com/worldclock/fixedtime.html?msg=Whac-a-mole+game+from+scratch+live&amp;iso=20151115T14&amp;p1=166&amp;ah=3">15 ноября 2015 в 14:00 MSK</a>. Присоединяйтесь!. . .</p>
</div>
<div class="news_item_more">
<a href="livesession-editor-07.html">Читать далее</a>
</div>
</div>
<div class="news_item">
<h2 class="news_item_title">
<a href="soon-game-creation-editor-07.html">СКОРО: Создание простой игры в прямом эфире (Редактор 0.7)</a>
@@ -214,20 +228,6 @@
<a href="editor-0.4.0-plans.html">Читать далее</a>
</div>
</div>
<div class="news_item">
<h2 class="news_item_title">
<a href="user-servey-finish-promise.html">Окончание опроса</a>
</h2>
<p class="news_item_date">
2014-12-31 11:00
</p>
<div class="news_item_contents">
<p>Около года назад мы начинали опрос, с помощью которого планировали узнать ваше отношение к Open Source вообще и нашему проекту в частности. Сегодня мы его завершаем. Ответы набирались довольно медленно, но в целом мы собрали довольно приличное ответов, за что вам очень благодарны.. . .</p>
</div>
<div class="news_item_more">
<a href="user-servey-finish-promise.html">Читать далее</a>
</div>
</div>
<p class="pagination_title">Страница 6 из 7</p>
<p>

14
ru/news/index7.html
View File

@@ -94,6 +94,20 @@
<center>
<h1>Новости</h1>
<div class="news_item">
<h2 class="news_item_title">
<a href="user-servey-finish-promise.html">Окончание опроса</a>
</h2>
<p class="news_item_date">
2014-12-31 11:00
</p>
<div class="news_item_contents">
<p>Около года назад мы начинали опрос, с помощью которого планировали узнать ваше отношение к Open Source вообще и нашему проекту в частности. Сегодня мы его завершаем. Ответы набирались довольно медленно, но в целом мы собрали довольно приличное ответов, за что вам очень благодарны.. . .</p>
</div>
<div class="news_item_more">
<a href="user-servey-finish-promise.html">Читать далее</a>
</div>
</div>
<div class="news_item">
<h2 class="news_item_title">
<a href="2014-another-year-passed.html">И вот прошел еще один год</a>

290
ru/news/teaching-to-program-2019.html Normal file
View File

@@ -0,0 +1,290 @@
<!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;
text-decoration: none;
}
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-to-program-2019.html">EN</a>
<a href="../../ru/news/teaching-to-program-2019.html">RU</a>
</div>
</div>
<center>
<h1>В новостях...</h1>
<div class="news_item">
<h2 class="news_item_title">
<a href="teaching-to-program-2019.html">Обучение программированию 2019, или в поисках идеальной программы: Последовательность</a>
</h2>
<p class="news_item_date">
2020-02-12 00:00
</p>
<div class="news_item_contents">
<p><img src="../../images/2020-02-11_teaching-to-program-2019_screenshot.png" alt="МУРОМ" /></p>
<p>В этой статье Михаил расскажет об обучении ребят программированию в 2019-м году.</p>
<p><strong>Предисловие</strong></p>
<p>Осенью 2019-го я в третий раз участвовал в курсе обучения ребят 10-15 лет программированию в качестве одного из преподавателей. Наши курсы проходили с середины сентября по середину декабря. Каждое занятие было в субботу с 10:00 до 12:00. Подробнее о структуре каждого урока и деталях создаваемой на курсе игры можно узнать из <a href="teaching-kids-to-program.html">статьи за 2018-й год</a>.</p>
<p>Лично для себя я выделил две основные цели, к которым иду с помощью курсов:</p>
<ul>
<li>создать удобный инструмент для создания простейших игр, понятный заинтересованным людям в возрасте от 10 лет;</li>
<li>создать программу обучения программированию, позволяющая заинтересованным людям в возрасте от 10 лет самостоятельно делать простейшие игры.</li>
</ul>
<p><strong>Игра</strong></p>
<p><img src="../../images/2020-02-11_teaching-to-program-2019_game.png" alt="Игра" /></p>
<p>Простейшей игрой уже второй раз является игра на память, суть которой в поиске совпадающих элементов на игровом поле. Детально механика игры разобрана в <a href="teaching-kids-to-program.html">статье за 2018-й год</a>. Поиграть в созданную на курсе игру вы можете прямо из браузера <a href="http://kornerr.ru/ekids2019">по этой ссылке</a>.</p>
<p><strong>Инструмент</strong></p>
<p><img src="../../images/2020-02-11_teaching-to-program-2019_ide.png" alt="Среда" /></p>
<p>Основным критерием при создании инструмента для меня являлась <strong>неприхотливость</strong>, выражающаяся в следующем:</p>
<ol>
<li>работает на любой операционной системе<ul>
<li>разработка на Linux, macOS, Windows</li>
<li>воспроизведение результата на ПК, планшете и мобилках</li></ul></li>
<li>не нужно ничего настраивать: открыл ссылку в браузере и начал работу</li>
<li>фактически не нужен интернет: можно работать локально, т.к. нет какого-либо сервера на стороне</li>
<li>результат доступен всем<ul>
<li>если положить на GitHub Pages, то достаточно дать ссылку</li>
<li>если кинуть файл по Skype, то его можно открыть локально</li></ul></li>
</ol>
<p>Инструмент представляет из себя интегрированную среду разработки (ИСР), технически являющуюся одним файлом HTML. В этом единственном файле находится как ИСР, так и создаваемый результат (в данном случае игра на память). Инструмент в целом выглядит довольно стандартно:</p>
<ol>
<li>слева находится панель кода выбранного модуля;</li>
<li>посередине - панель с кнопками перезапуска, сохранения результата и управления модулями;</li>
<li>в правом верхнем углу - результат;</li>
<li>в правом нижнем углу - список всех модулей: как относящихся к ИСР, так и созданных для игры.</li>
</ol>
<p>Ввиду того, что у нас лишь один файл, нам нужно уметь запускать его в двух режимах:</p>
<ol>
<li>воспроизведение<ul>
<li>является режимом по умолчанию</li>
<li>достаточно просто открыть файл HTML</li></ul></li>
<li>редактирование<ul>
<li>доступно при добавлении символов <code>?0</code> в адресной строке</li></ul></li>
</ol>
<p>Временное хранение изменений осуществляется с помощью хранилища браузера (IndexedDB). Для сохранения изменений на постоянной основе, например, для публикации, необходимо скачать этот же самый файл с изменениями, нажав на соответствующую кнопку в средней панели.</p>
<p><strong>Первые занятия</strong></p>
<p>Для первого занятия я подготовил <a href="http://kornerr.ru/ekids19?техника">80 строк кода на JavaScript</a>, распечатал их и раздал каждому. Каждый ученик должен был набрать распечатанный код в инструменте. Набором кода я преследовал две цели:</p>
<ol>
<li>узнать скорость набора текста учениками;</li>
<li>показать API инструмента.</li>
</ol>
<p>Скорость набора оказалась чрезвычайно низкой: от примерно 14 символов в минуту (ученик успел набрать лишь половину) до примерно 39 символов в минуту. Сам я этот код набирал со скоростью 213 символов в минуту, поэтому от результатов учеников опешил: у меня появилось подозрение, что написать необходимые 300 строк игры за 1 час мы к концу курса не осилим физически.</p>
<p>На втором занятии мы в набранном ранее коде искали опечатки. Я встретил такие опечатки, которые ни у себя, ни у других коллег в жизни не находил. Тут я опешил второй раз: ученикам было чрезвычайно сложно найти опечатки, даже имея перед глазами распечатанный код. Страшно представить, что случилось бы с их психикой, если бы мы проходили <a href="https://cantunsee.space/">жесточайший тест по дизайну интерфейсов</a> с вопросами вроде такого:</p>
<p><img src="../../images/2020-02-11_teaching-to-program-2019_cant-unsee.jpg" alt="Can't unsee" /></p>
<p>С третьего по шестое занятия я уменьшал код вплоть до 10 строк, выдавал инструмент уже с частично набранным кодом, в котором нужно было найти и исправить ошибки. Ничего не помогало: ученики просто не воспринимали написанное, как-будто вместо чего-то членораздельного на экране видели иероглифы.</p>
<p><strong>Успешное седьмое занятие</strong></p>
<p>Прошло уже больше половины курса, а я не продвинулся ни на йоту. В очередной попытке найти хоть какой-то способ объяснить код игры я ещё раз переписал игру. На этот раз с модулем под интригующим названием <code>последовательность</code>.
К моему удивлению, на занятии был оглушительный успех: мы успели до "звонка", и ребята буквально горели энтузиазмом. Горели настолько, что устроили под конец занятия мозговой штурм о том, чего бы ещё добавить в появившуюся в ходе занятия игру:</p>
<p><img src="../../images/2020-02-11_teaching-to-program-2019_brainstorm.jpg" alt="Мозговой штурм" /></p>
<p>Итак, давайте разберём это занятие подробнее.</p>
<p><strong>Доска</strong></p>
<p>Предыдущие занятия у нас строились в формате "преподаватели подходят к каждому ученику и помогают ему индивидуально". За шесть занятий мы - два преподавателя - осознали, что подход к каждому и погружение в частные опечатки/ошибки занимает времени больше, чем объяснение нового материала.</p>
<p>С седьмого занятия мы решили завязать всех учеников на доску, т.е. доска становилась центральным местом, где все мы творили, куда выходили и где писали. Компьютеры же превращались в место, куда ученики копируют содержимое доски. Практика показала, что доски в школах существуют не зря:</p>
<ul>
<li>все в школе привыкли получать информацию с доски, поэтому знали, куда смотреть;</li>
<li>преподаватель работает с тем, что на доске, поэтому может объяснять сразу всем про одно, без углубления в индивидуальные ошибки;</li>
<li>исправление индивидуальных ошибок происходит быстрее, т.к. большинство из них связаны с невнимательностью, т.е. опечатками при копировании с доски.</li>
</ul>
<p>Важно отметить, что на доске преподаватели работают совместно с учениками: преподаватель задаёт направление, но ученики сами выходят и пишут на ней ответы на вопросы, заданные преподавателем. Плюсы такого подхода следующие:</p>
<ul>
<li>ученик сам пишет, т.е. принимает решение и реализует его сам, учитель не записывает с его слов;</li>
<li>ученик выходит к доске, т.е. двигается, что и полезно, и уменьшает количество необузданной энергии;</li>
<li>ученику приходится запоминать код, чтобы записать его на доске;</li>
<li>по тому, насколько легко и организованно ученик запомнил и записал код на доске, можно судить о его внимательности.</li>
</ul>
<p><strong>Последовательность</strong></p>
<p>Модуль <code>последовательность</code> для игры на память выглядит следующим образом:</p>
<p><img src="../../images/2020-02-11_teaching-to-program-2019_sequence.png" alt="Последовательность" /></p>
<p>Последовательность позволяет записать алгоритм в виде событий и реакций:</p>
<ul>
<li>события (<code>начало</code>, <code>выбор</code> и т.д.) расположены без отступа слева;</li>
<li>реакции (<code>настроить ThreeJS</code>, <code>показать заставку</code>) расположены под соответствующими событиями с отступом.</li>
</ul>
<p>Таким образом, при запуске игры (событие <code>начало</code>) мы настраиваем ThreeJS (реакция <code>настроить ThreeJS</code>), показываем заставку (реакция <code>показать заставку</code>) и т.д.</p>
<p>Занятие мы начинали с практически пустым модулем <code>последовательность</code>, присутствовали заранее лишь события без реакций:</p>
<p><img src="../../images/2020-02-11_teaching-to-program-2019_events.png" alt="События" /></p>
<p>Эти же события я выписал на доске, оставив свободное место для записи реакций (замазано уже в GIMP для удобства иллюстрации):</p>
<p><img src="../../images/2020-02-11_teaching-to-program-2019_board-events.jpg" alt="События на доске" /></p>
<p>Реакции мы искали в модуле <code>память.реакции</code>:</p>
<p><img src="../../images/2020-02-11_teaching-to-program-2019_reactions.png" alt="Реакции" /></p>
<p>Каждая реакция модуля <code>последовательность</code> представлена в модуле <code>память.реакции</code> <a href="https://learn.javascript.ru/constructor-new">функцией-конструктором</a>. Например, реакции <code>проверить окончание</code> однозначно соответствует функция <code>ПроверитьОкончание</code>:</p>
<pre><code class="javascript language-javascript">function ПроверитьОкончание(мир) // 1.
{
мир.состояние["скрыто сфер"] = 0; // 2.
this.исполнить = function() // 3.
{
мир.состояние["скрыто сфер"] += 2; // 4.
var скрыто = мир.состояние["скрыто сфер"]; // 5.
var сфер = мир.состояние["сферы"].length; // 6.
if (сфер == скрыто) // 7.
{
мир.события["конец"].уведомить(); // 8.
}
};
}
</code></pre>
<p>Рассмотрим эту функцию подробнее:</p>
<ol>
<li>Функция принимает на вход <code>мир</code> (словарь), используемый для общения функций друг с другом. <code>мир</code> состоит из трёх областей (ключей словаря):<ul>
<li><code>состояние</code> содержит переменные значения для обмена данными;</li>
<li><code>настройки</code> содержат константные значения для настройки функций;</li>
<li><code>события</code> содержат издателей для организации возможности подписать функции на события.</li></ul></li>
<li>Экземпляр функции-конструктора создаётся оператором <code>new</code> при разборе модуля <code>последовательность</code>. Фактически всё, что не входит в метод <code>исполнить</code>, является телом конструктора. В частности, здесь мы создаём переменную <code>скрыто сфер</code> для учёта количества скрытых сфер.</li>
<li>Метод <code>исполнить</code> вызывается на каждое уведомление о событии.</li>
<li>Т.к. реакцию <code>проверить окончание</code> вызывают на событие сокрытия пары сфер, то счётчик <code>скрыто сфер</code> увеличиваем на <code>2</code>.</li>
<li>Просто задаём короткий псевдоним для счётчика <code>скрыто сфер</code>.</li>
<li>Получаем общее количество сфер на игровом поле.</li>
<li>Сравниваем количество скрытых сфер с общим их количеством.</li>
<li>Если они равны, т.е. все сферы скрыты, уведомляем о завершении игры с помощью события <code>конец</code>.</li>
</ol>
<p>Поиск функций в модуле <code>память.реакции</code> ученики осуществляли по очереди:</p>
<ul>
<li>ученик ищет функцию в модуле (для упрощения я разделил функции символами <code>// // // //</code>);</li>
<li>при нахождении озвучивает название функции и выходит к доске;</li>
<li>на доске пишет название функции в общий список найденных функций (допускается пользоваться любыми средствами для запоминания названия, кроме подсказки преподавателя).</li>
</ul>
<p>Это упражнение тоже позволяет проследить, кто внимательно следит за поиском и записью функции, а кто не может, когда подходит его очередь, найти свою функцию.</p>
<p>После выписывания названий всех функций на доску мы сопоставляли события с реакциями (функциями) схожим образом:</p>
<ul>
<li>преподаватель спрашивает, например, какие из функций подходят для события <code>начало</code></li>
<li>в случае верного ответа предлагает ученику<ul>
<li>выйти к доске</li>
<li>написать реакцию под событием</li>
<li>вычёркнуть соответствующую функцию из списка найденных функций</li></ul></li>
</ul>
<p>После получения более-менее рабочего набора реакций для одного события можно предложить ученикам перенести реакции с доски в компьютеры. Таким образом мы заполняем реакции как на доске:</p>
<p><img src="../../images/2020-02-11_teaching-to-program-2019_board-sequence.jpg" alt="Последовательность на доске" />
<img src="../../images/2020-02-11_teaching-to-program-2019_board-functions.jpg" alt="Функции на доске" /></p>
<p>так и в инструменте:</p>
<p><img src="../../images/2020-02-11_teaching-to-program-2019_sequence.png" alt="Последовательность" /></p>
<p><strong>Следующие занятия</strong></p>
<p>На следующих занятиях мы пытались создать новую реакцию и соответствующую ей функцию-конструктор. Сначала я пытался опять наскоками (целыми строками кода) вбить решение в головы, однако, существенных результатов это не дало. Поэтому пришлось разбирать в течение нескольких занятий примерно такой код:</p>
<pre><code class="js language-js">var кот = "9";
console.log(кот);
</code></pre>
<p>К сожалению, донести смысл этих двух строк кода так и не удалось: ребята путались в том, что такое переменная, а что такое значение. На этом проблемы не закончились: в новой функции нужно было работать с массивом, что оказалось просто невозможно объяснить. Мне ещё предстоит научиться объяснять переменные и массивы в ходе следующих курсов.</p>
<p>К концу занятий мы, конечно, функцию написали, но понимания и последующей веры в себя, выраженной в горящем энтузиазме, как это было на седьмом занятии, уже не было.</p>
<p><strong>Последнее занятие</strong></p>
<p>На последнем занятии вместо стандартного круга приветствия я попросил каждого (включая себя) высказаться, что понравилось в курсе (+), а что стоит изменить (-). Получилась следующая таблица:</p>
<p><img src="../../images/2020-02-11_teaching-to-program-2019_retro.jpg" alt="Ретро" /></p>
<p>Как ни странно, ребятам не нравилось писать на доске, несмотря на то, что она увеличивала эффективность изложения материала. С одной стороны, была "объёмная программа", а с другой - "одно и то же каждый урок", т.е. повторение пройденного ранее материала.</p>
<p>Раз в несколько занятий мы сохраняли результат на GitHub. Давалось это тоже нелегко: мы тратили до получаса на то, чтобы каждый вошёл в свою учётную запись. Как всегда, никто не помнил свой пароль (причём каждый раз) либо для подтверждения захода с нового устройства требовался доступ к почте, пароль от которой либо тоже никто не помнил, либо почта была родительская (ребята звонили родителям).</p>
<p>Так или иначе, у каждого ученика к концу курса осталась собственная версия игры с персональными заставкой и концовкой:</p>
<p><img src="../../images/2020-02-11_teaching-to-program-2019_addr.jpg" alt="Адрес" /></p>
<p><strong>Выводы</strong></p>
<p>С одной стороны, были явные успехи:</p>
<ul>
<li>инструмент оказался неприхотливым и полностью работоспособным;</li>
<li>концепция последовательностей была хорошо принята.</li>
</ul>
<p>С другой стороны, были явные неудачи:</p>
<ul>
<li>инструмент предполагает навык работы с JavaScript, чем ученики не обладали;</li>
<li>программа обучения буксовала практически все занятия.</li>
</ul>
<p>Поэтому в ходе курса обучения программированию 2020-го года я попробую ответить на следующие вопросы:</p>
<ol>
<li>Будет ли другой язык (Python, Lua) проще для объяснения и работы?</li>
<li>Можно ли скрыть работу с Git внутри инструмента, чтобы сохранять результат на <a href="https://isomorphic-git.org/">Git, не покидая инструмента</a>?</li>
<li>Можно ли сделать декларативный API по аналогии со <a href="https://medium.com/someswift/swiftui-dsl-%D0%BD%D0%B0-%D0%BC%D0%B0%D0%BA%D1%81%D0%B8%D0%BC%D0%B0%D0%BB%D0%BA%D0%B0%D1%85-891741685efe">SwiftUI</a>?</li>
<li>Как всё-таки объяснить переменные и массивы?</li>
</ol>
<p>Ответы на эти и другие вопросы будут через год ;)</p>
<p><img src="../../images/2020-02-11_teaching-to-program-2019_group.jpg" alt="Группа" /></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>