Создание интерактивных курсов. Опыт HTML Academy

Презентация для мастер-класса на конференции НОТВ-2014
http://notv.urfu.ru/notv/794/

Transcript

1. Создание интерактивных курсов Опыт HTML Academy
2. HTML Academy Всё обучение в академии происходит в практическом режиме. По сути, оно сводится к прохождению огромного количества практических заданий.
3. Ролик про HTML Academy http://www.youtube.com/watch?v=tSAhwqWYKhc
4. Практическое задание
5. Теория
6. Задачи
7. Редакторы кода
8. Мини-браузер
9. Задание в исходном состоянии http://htmlacademy.ru/courses/42/run/5
10. Первая задача выполнена http://htmlacademy.ru/courses/42/run/5
11. Задание выполнено http://htmlacademy.ru/courses/42/run/5
12. Испытание в исходном состоянии http://htmlacademy.ru/courses/42/run/18
13. Процент выполнения испытания
14. Образец
15. Испытание пройдено http://htmlacademy.ru/courses/42/run/18
16. Смотрим различия http://htmlacademy.ru/courses/42/run/18
17. Идеальное прохождение испытания http://htmlacademy.ru/courses/42/run/18
18. Карта обучения
19. Сколько курсов? Готовы 1. Базовый HTML и CSS Начата разработка 2. Продвинутый HTML5 и CSS3 Планируются 3. Сверстай свой сайт 4. Адаптивность 5. Сверстай адаптивный сайт 6. Базовый JavaScript
20. Базовый HTML и CSS
21. Массовые интерактивные компетентностно-ориентированные онлайн-курсы
22. Компетентностно-ориентированные • Понятны работодателю и обучаемому • Ориентированы на потребности рынка • Результатоцентрированность • Испытательность
23. Результаты обучения и испытания • В процессе обучения студент “прокачивает” какую- либо компетенцию • Уровень “прокачки” отслеживается по результатам обучения • Результаты обучения измеряются c помощью испытаний
24. Испытания • проверяют способность решать задачи, встречающиеся в профессиональной деятельности, а не знание теории • близки к типовым рабочим задачам • тесты, контрольные, экзамены - не то • для каждой предметной области испытания будут отличаться
25. Перевёрнутое проектирование 1. Ставим “большую” задачу, которую должен уметь решать студент после обучения 2. Планируем итоговое испытание 3. Планируем промежуточные испытания, готовящие к итоговому 4. Подбираем содержание, необходимое для прохождения испытаний
26. HTML Academy и компетенции 1. Испытательность 2. Упор на практику 3. Задачи, приближенные к реальным 4. Планирование учебной программы “от результатов” 5. Конечная цель — готовить профессионалов, а не просто пропагандировать технологии
27. Интерактивные посвящается маркетологам Интерактивный тест — это всего лишь тест
28. Интерактивность: наше понимание
29. Интерактивность: пример
30. Интерактивное обучение • Образовательный процесс представляет управляемое экспериментирование с предметной областью • Задания подбираются так, чтобы ученик сам нащупал и разобрался в поведении интересующего нас аспекта • Такое экспериментирование очень похоже на игру
31. Интерактивный интерфейс • Наглядность • Отображение и проверка результата в режиме реального времени • Если предметная область допускает существование множества правильных решений задачи, то и в механизме проверки это должно быть учтено. Особенно в испытаниях
32. Массовые Массовость — это хорошо, но появляются проблемы: 1. Нагрузки (на серверы) 2. Гарантия качества обучения или “как проверять испытания?” 3. Проблемы мотивации
33. Технологии • Apache Nginx • PHP • MySql • JavaScript • VPS hosting (2 GB RAM, 8 CPU)
34. Хабраэффект
35. Массовость и HTML Academy Наше спасение: Возможность полной автоматизации проверки заданий и испытаний Но, если понадобится поднять качество, то можно выстроить многоуровневую систему: 1. автоматическая проверка 2. проверка человеком того, что прошло автоматическую
36. Массовость и HTML Academy Проблемы мотивации пытаемся решать с помощью игровых механик
37. Статистика
39. http://courses.ifmo.ru/courses/ITMO/x0002.00/2014_02/about
40. 1. Подходит не для всех предметных областей 2. Отлично подходит для обучения прикладным информационным технологиям 3. Достаточно трудоёмкий 4. Трудновоспроизводим на универсальных платформах 5. Хорошее качество обучения? http://habrahabr.ru/company/htmlacademy/blog/209318/ Вывод про формат
41. Игровые механики 1. Теория постепенной подачи информации 2. Принцип постепенного усложнения 3. Головоломки 4. Кратчайшая петля обратной связи 5. “Перфекционизм” 6. Достижения и очки 7. Рейтинги 8. Открытые профили 9. Мини-игры 10. Сторителлинг
42. Постепенная подача информации Дробим большие и сложные задания или куски теории на маленькие и простые и составляем серии заданий
43. Пример 1: знакомство с интерфейсом системы http://htmlacademy.ru/courses/4/run/1
44. Пример 2: знакомство со сложным свойством http://htmlacademy.ru/courses/53/run/1
45. Пример 3: построение элемента интерфейса http://htmlacademy.ru/courses/55/run/4
46. Постепенное усложнение • Сложность должна расти всегда, чтобы ученик чувствовал прогресс • Рост должен быть очень плавным • Не допускайте чрезмерной сложности — это стена и убийца мотиваци • Постоянно балансируйте сложность следя за статистикой и отзывами
47. Постепенное усложнение • Мы повышаем сложность в заданиях и в испытаниях • В идеальном случае испытание должо быть чуть сложнее, чем текущий уровень ученика, но преодолимым. Тогда уровень удовольствия от его преодоления будет максимальным. • Простые испытания скучны • Сложные испытания убивают желание учиться
48. Пример: сложность заданий Уровень 1 “Для блока .column3 задайте свойство clear со значением both” Уровень 2 “Задайте для .layout-positioner ширину 430px и автоматические горизонтальные отступы” Уровень 3 “Найдите и исправьте ошибки в HTML-коде”
49. Пример: усложнение испытаний внутри одного раздела
50. Пример: усложнение испытаний между разделами
51. Слишком сложное испытание http://htmlacademy.ru/courses/50/run/15
52. Как еще бороться со сложностью 1. Подсказки 2. Правильные ответы 3. Саппорт 4. Взаимопомощь учеников
53. Головоломки 1. С виду кажутся очень сложными 2. Но ученик понимает, что они принципиально решаемы на его уровне 3. Заставляют бросить вызов себе 4. Могут очень сильно затягивать 5. Много удовольствия после решения
54. http://htmlacademy.ru/courses/42/run/18
55. http://htmlacademy.ru/courses/65/run/13
57. Быстрая обратная связь • Результат работы кода и проверки задач работают в режиме реального времени • Не надо нажимать кнопку “Проверить” • Задание дробится на несколько подзадач • Ученик очень быстро видит результат и быстро понимает прав он или нет • Сближает обучение с игрой
59. Перфекционизм
60. Достижения и очки
61. Рейтинги
62. Эксплуатируют 3 механики: 1. Зависть 2. Тщеславие 3. “Раз они смогли, то и я смогу” Открытые профили
63. Мини-игры http://htmlacademy.ru/courses/66/run/9
64. 1. Общая тематика разделов. Например, весь курс про селекторы посвящен биатлону 2. Либо общее оформление. Вес курс фоны про котиков 3. И так далее. Вплоть до настоящих историй: “Пишем твиттер для зомби” 4. Хорошо сочетается с мини-играми Сторителлинг
65. 1. Игровая валюта Возможность увеличения конверсии завершающих курсы до 30% 2. Периодические задания Т.н. “виклики” и “дейлики” Помогают заниматься постоянно и не бросать обучение Другие механики
66. Головоломки + Перфекционизм + Достижения + Рейтинг + Открытые профили Сочетание игровых механик
67. Существенное повышение вовлечения в обучение: “Затягивает!” Решение испытаний занимает: • от 10 минут на простое прохождение • до 6 часов на идеальное прохождение Результаты применения игровых механик
69. Онлайн интенсив Теория: живые вебинары Наставничество: персональные наставники Море практики: интерактивная платформа
71. Метод “прогрессивного джипега”
72. 1 интенсив 36 участников 22 успешно завершили 2 интенсив 70 участников еще не завершен Интенсив: статистика
73. Александр Першин основатель HMTL Academy alexander@htmlacademy.ru Спасибо за внимание