Месяц назад начал новый курс по основам программирования на английском языке — Intro to Programming. Уроки выходят дважды в неделю, и включают в себя видео, дополнительные тексты, конспекты, тесты, упражнения и ссылки для самостоятельного просмотра и прочтения. Видео публикуются на YouTube. Подписывайтесь, кстати.
Сегодня расскажу, как происходит процесс создания одного урока, на примере урока номер 8 — про рекурсию. Итоговый результат можно увидеть в самом конце статьи.
При подготовке курса используются следующие источники для вдохновения:
- Курс «Основы программирования» Кирилла Мокевнина на Хекслете.
Кирилл проделал огромную работу по созданию полной учебной программы на Хекслете, и «Основы» - это первый курс цикла. Нам важно, чтобы английская версия Хекслета, не смотря на отличия в формате и подаче, приводила людей примерно на тот же уровень, что и русская версия. Кирилл и вся наша команда долго шла к этой методологии, и в итоге получилось сделать цикл курсов не про язык или инструмент, а про программирование и абстракцию. Нужно сделать так, чтобы английская версия Хекслета была совместима с русской на уровне концепций, изучаемых навыков и приоритетов. - Книга “Structure and Interpretation of Computer Programs”.
Если можно прочитать только одну книгу по программированию, то этой книгой должна быть SICP. Первые несколько курсов на Хекслете основаны именно на ней. - Интерактивные статьи и выступления Брета Виктора. Это просто фантастический человек. Советую посмотреть как минимум одно его выступление — Inventing on Principle.
- Книга Mindstorms: Children, Computers, And Powerful Ideas Сеймура Паперта. Про боязнь математики, неправильное обучение и интересный подход к обучению детей. Каждый учитель, а особенно учитель математики или информатики, должен прочитать ее.
- Кучка разных каналов на ютубе, особенно с хорошими визуализациями: Ted-ED, Vox, Minute Physics, Numberphile, Computerphile.
Процесс создания урока состоит из нескольких этапов: написание сценария, запись аудио, создание графики, запись видео, монтаж видео, проработка упражнения, проработка текстовой части урока, публикация на ютубе, публикация на Хекслете. На все уходит от 8 до 24 часов работы.
1. Сценарий
Первая задача — определить тему и написать текст сценария. У курса есть изначальный план, где расписаны темы для каждого урока, но в процессе иногда приходится немного менять порядок, перекидывать какие-то темы из одного места в другое, продумывать правильные варианты сквозного объяснения.
Вначале я выписал все главные темы на бумажки. Перед каждым уроком я выкладываю их на стол: вначале уже прошедшие темы, потом потенциальные темы для текущего урока, потом — оставшиеся.
Сразу видно, какие концепции уже можно использовать в новом уроке, о каких стоит напомнить, и про какие можно упомянуть, сделав таким образом заготовку для будущего урока.
Новый урок будет про рекурсию. Пора переходить к проработке последовательности объяснений и черновикам визуализации.
В этом курсе я стараюсь делать визуализацию не просто вторичным способом донесения информации, а «гражданином первого класса». Визуальная аналогия находится на одном уровне важности с формальным, словесным описанием концепции. Это требует консистентности — язык визуализации должен иметь смысл и не должен меняться на протяжении всего курса.
Например, в 4 уроке константы я показал, как бумажки: с одной стороны имя константы, с другой стороны — значение. Потом бумажку можно подставлять в другое место вместо числа:
А в 10 уроке появились переменные. Это такие же бумажки, но значение написано не ручкой, а карандашом. Поэтому значения переменных можно менять:
Функции — это коробки с двумя дырками. В одну можно положить что-нибудь, из другой она может что-нибудь выплюнуть.
В сегодняшнем уроке нужно показать, что определение функции и вызов функции — это разные вещи. Для этого аналогия с коробкой продолжается: определение функции это «схема коробки», а при вызове создается новая коробка. Таким образом рекурсивные вызовы становятся понятнее: нет никакого парадоксального вызова самого себя, есть просто создание новых идентичных коробок по одной схеме.
Я побаиваюсь, что в какой-то момент аналогия сломается и не будет больше работать. Но пока все более менее складывается. Вот, например, передача результата вызова одной функции в вызов другой функции:
anotherFunction(someFunction(3));
Проработка последовательности изложения и визуальных идей происходит на бумаге, в большом альбоме.
Потом я перехожу к тексту на компьютере. Использую любимый редактор Sublime Text 3 (нет, он не умер. нет, Атом не лучше). Один урок — это примерно 1000 слов или 4500 знаков. На это уходит в лучшем случае час-полтора, в худшем — несколько часов.
Готовый текст перечитываю еще несколько раз, потом проговариваю его вслух. В итоге приходится внести еще несколько правок. Далее — запись аудио.
Аудио
Записываю на любимый микрофон Rode Podcaster, который служит мне уже 10 лет.
В среднем уроки длятся 5-6 минут, и в идеале, конечно, запись должна длиться столько же. Сделать хорошую запись с первого дубля мне сложно, поэтому получается как минимум два дубля, и в каждом есть ошибки. Когда я ошибаюсь или запинаюсь, то просто выжидаю небольшую паузу и повторяю фразу или предложение. Потом все исправляю при монтаже.
В итоге запись 5-минутного аудио иногда растягивается на 40 минут. Восхитительно не получается никогда, но когда становится «не отвратительно», то я делаю копию файла и приступаю к монтажу: вырезаю ошибки, правлю продолжительность пауз, убираю клики, вздохи, пуки, лай собак. Потом применяю три фильтра: адаптивное подавление шумов, эквалайзер, примерно подстроенный под мой голос, и компрессор для уменьшения динамического диапазона (грубо говоря, чтобы сделать громкости более равномерными).
До — 10 минут:
После — 6.5 минут:
В процессе записи тоже бывают небольшие исправления текста. Аудио готово: это означает, что сценарий теперь точно финализирован. Пора браться за виртуальные кисти!
Графика и видео
Я умею рисовать дурацкие штуки, поэтому использую их в уроках.
Иду по сценарию и представляю, что должно быть на экране. Есть три типа медиа: рисованная графика, видео и текст. Текст — это код или какие-то короткие определения. Для каждого куска, где хочется видеть графику, рисую сцены — фигурки и объекты. Анимация будет при монтаже видео, поэтому нужно заранее нарисовать все так, чтобы было возможно нарезать позже.
На это уходит несколько часов. Дальше — съемка видео-частей. Снимаю манипуляции со всякими бумажками, наклейками, коробками, веревками, карандашами. Снимаю просто на телефон, иногда — с гетто-штативом:
Все, теперь на руках есть аудио, графика, видео и текст. Последний большой этап…
Монтаж
Самый муторный и долгий этап — монтаж видео. Все материалы сбрасываю в Final Cut Pro и начинаю накладывать нужные визуальные штуки на голос. Сначала — все самое очевидное. Эта графика и видео-ролики покрывают примерно 50%. Потом нужно заполнить оставшиеся 50%. Для этого обычно приходится дорисовывать или доснимать что-то в процессе.
Всякие простые звуки (чпоньк! пуннь! дзынь!) записываю сам, звуки посложнее нахожу в интернете. Иногда добавляю местами куски музыки или даже пару секунд видео из фильма или сериала. Обычно, просто для юмора.
Потом нужно добавить переходы, эффекты и анимацию. Обычно их не много, но в этом конкретном уроке пришлось попотеть: для визуализации рекурсивного подсчета факториала нужно было «создавать» из воздуха несколько коробок, передавать туда цифры, заглядывать внутрь каждой коробки чтобы показать, как работает функция, потом возвращать значения в предыдущие коробки. В одном 50-секундном отрезке вышло больше переходов и анимаций, чем в целом уроке средней сложности.
На этом этапе всегда можно поработать больше. Сколько есть времени — столько и будет длиться монтаж, поэтому я просто смотрю на время. Если позволяет — сижу еще. Если нет — то поправляю все самые важные моменты, и после пары финальных просмотров экспортирую видео.
Пока компьютер надрывается и шумит, как пылесос, я готовлю текстовую часть урока к публикации.
Текст урока
Каждый урок это комплект: видео + текст. Текст состоит из нескольких секций:
- Важные заметки. Что-то не критичное, но важное, не вошедшее в видео-часть.
- Конспект. Короткая выжимка всего урока. Чтобы учащиеся могли быстро освежить память.
- Рекомендуемые и опциональные материалы — ссылки на статьи, видео и сайты по теме урока.
- Полный текст урока. То, что я писал на первом шаге.
Все это находится в одном маркдаун-файле, который в итоге уходит в репозиторий курса, откуда Хекслет и получает всю информацию.
Упражнение
Практические упражнения — одна из главных фишек Хекслета. Кирилл сделал hexlet-exercise-kit, универсальный набор для создания и тестирования упражнений. Упражнение — это текст задания + решение + тесты. Учащийся получает упражнение с вырезанным решением, а после самостоятельного прохождения может посмотреть наше решение.
Иногда я беру упражнения из курса «Основы программирования» и модифицирую их с учетом изученного ранее материала, иногда делаю новые. Тут снова очень помогают бумажки из первого шага: сразу понятно, какие штуки можно включать в требуемое решение, о чем стоит напомнить, и т.д.
Упражнение — хорошее место не только для закрепления полученных в теоретической части знаний, но и для подачи новых концепций. Рекурсию и другие абстрактные идеи лучше объяснить визуально, видео для этого подходит хорошо. Но, скажем, служебные функции для преобразования текста и просто инструментарий языка лучше быстро объяснить текстом прямо в задании, и дать учащемуся использовать их в упражнении в ту же секунду.
Публикация на YouTube
Экспортированное видео нужно просмотреть еще раз, можно на ускоренной перемотке. Удостовериться, что нет артефактов и явных косяков. Потом видео уходит на YouTube.
Для видео нужна обложка. Я просто беру интересный кадр, передвигаю объекты так, чтобы поместить надпись и добавляю надпись от руки.
Теперь нужно добавить субтитры. Делаю копию файла с текстом урока, удаляю оттуда код и другие элементы, которые не попали в аудио-версию, очищаю от маркдаун-разметки, потом добавляю этот файл к видео на YouTube. Их умная система сама распознает голос и текст, и автоматически проставляет время для каждой фразы. Это очень круто, потому что изначально я думал, что придется делать это вручную.
Тесты и публикация на Хекслете
Добавляю новый урок на Хекслет, добавляю 4-6 вопросов в тесты (квизы). Эти тесты нужно пройти сразу после видео, перед упражнением. Задача — проверить концептуальное понимание, поэтому там не бывает вопросов на тренировку памяти.
Добавляю практическое упражнение на Хекслет. Оно собирается и проверяется автоматически несколько минут. У нас очень крутая система — если решение не проходит или тесты не работают или тесты вообще проходят без решения, то упражнение не опубликуется пока не исправишь ошибки.
Прикрепляю упражнение к уроку и жму «Опубликовать». Уф! Всё!
Теперь нужно проверить, все ли нормально вывелось на сайте, тексты, картинки, ссылки, проверить квизы и упражнение, потом написать в твиттер и фейсбук.
Результат
Вот итоговое видео:
Подпишитесь на канал чтобы не пропустить новые видео.
А сам урок, со всеми текстами, упражнением и тестами — на Хекслете.
Это полностью бесплатный курс, и я отвечаю на все вопросы. Подключайтесь и давайте изучать программирование вместе :)
