Як все влаштовано: розробка інтерактивних онлайн-курсів



У нашому блозі ми вже писали про те, що не так онлайн-курсами як це можна виправити. Сьогодні ми продовжимо тему і розповімо про те, як інтерактивні онлайн-курси HTML CSS розробляються HTML Academy.

Хто придумує курси
Насамперед варто поговорити про те, якими професійними навичками повинен володіти автор курсів (або члени команди їх розробки). Нижче представлена наша версія списку таких якостей:

  • Потрібно добре знати верстку (HTML і CSS);
  • Розбиратися в JavaScript для того, щоб писати перевірки до завдань і «оживляти» їх (тут бажаний досвід використання різних «пісочниць» начебто Codepen);
  • Необхідні також навички дизайну і вміння викладати думки у письмово   завдання потрібно зуміти описати так, щоб учні зрозуміли, що від них вимагається.
Це цікава робота, яка дозволяє ІТ-спеціалістам використовувати свої навички і постійно вдосконалюватися   процесі розробки курсу по який-небудь темі автор вивчає її досконально і сам знайомиться з усіма підводними каменями і тонкощами.

Крім того, створення матеріалів, які допомагають людям розширити кругозір, освоїти нову галузь знань і навіть змінити свою кар'єру і життя (зараз верстку вивчають не-технічних фахівців — це просто добрий і корисну справу.

Етапи розробки курсу
Створення курсу починається з продумування ідеї   на цьому етапі команда розробки вирішує, який аспект технологій HTML і CSS вона хотіла б висвітлити в цей раз, а також описує то, як курс буде виглядати в фінальному варіанті. У нас в Академії є спеціальний документ, який кожен член команди записує з'являються ідеї тим і питань, які ще не були порушені в попередніх курсах і можуть нести в собі велику користь для учнів.

Потім йде розробка сценарію курсу. На цьому етапі автор шукає метафори, які допоможуть пояснити теоретичний матеріал, наприклад: біатлонні мішені і колода карт для пояснення роботи селекторів або битва котів за курочку для пояснення специфічності. Такі метафори гарні в «теоретичних» курсах, де вивчаються нові властивості, але для більш прикладних курсів краще підходять не метафори, а загальна ідея чи легенда. Її  називаємо «сеттінгом» аналогії з геймдевом.

У підсумку виходить сценарій курсу, в якому завдання об'єднані метафорою або легендою — це дозволяє зробити процес навчання цікавішим.

Приклад використання такої легенди   курс анимациям (про якому ми писали в минулому топіку), в час якого учень повинен допомогти людської цивілізації пройти шлях від первісного стану до польотів у космос.

Ще один курс з цікавою сюжетною лінією — це курс з трансформацій (зміна розмірів блоків, повороти, спотворення, переміщення). У ньому потрібні дії здійснює маг, який спочатку тренується в виконанні базових прийомів, а потім відправляється в пригода, де б'ється з ворогами і в підсумку зустрічається з «мегабоссом».



Не завжди використовуються легенди, які передбачають «екшн». Іноді домогтися потрібного результату можна і  «спокійними» методами. Наприклад, основною сюжетною лінією курсу плавним переходам властивостей є вікторина тему HTML і CSS. Відповідаючи на  питання учень дізнається про те, як застосовувати плавні переходи в інтерфейсі на прикладі матеріального дизайну.



далі
У надалі відбувається збирання наявного матеріалу, який буде потім використаний у курсі, і стартує «фізична» розробка завдань. Вона відбувається за принципом «від до складного простому»   спочатку робота йде над фінальними завданнями курсу, що об'єднують в собі весь матеріал, який учні повинні засвоїти за час навчання. І вже потім відбувається розподіл цієї ділянки на більш дрібні підрозділи, що містять завдання з конкретних питань курсу.

Нижче представлений чернетку одного з розробляються в даний момент курсів   ньому ще не прописані конкретні цілі і завдання. У час розробки весь оформлювальний код буде винесено у зовнішній файл сеттінгу, будуть створені цілі і написані перевірки.



Останнім етапом перед остаточною «доведенням» курсу є фінальне рев'ю у членів команди, які не займалися його розробкою   у безпосередніх авторів за кілька місяців роботи над завданнями «замилюється око», і не можуть бачити очевидних недоліків або помилок.

Коли всі правки, з'явилися на останньому етапі, внесені, курс проходить «передпродажну підготовку» і випускається. І також ж починається збір зворотного зв'язку від учнів, які швидко знаходять різні помилки і просто висловлюють свої побажання. Таким чином, робота над курсом практично ніколи і не закінчується.

 все так просто
Вище описаний ідеальний процес розробки курсу. Однак у життя всі рідко проходить гладко, і на кожному з перелічених етапів частенько виникають ті або інші складності.

Практично ніколи не буває так, щоб первісна ідея курсу була реалізована без змін у кінцевому продукті — як правило, сама ідея і сюжетна лінія неодноразово змінюються, іноді навіть кардинально.

У розробці курсів ми в HTML Academy дотримуємося підходу Blizzard   ця компанія може витратити купу часу і грошей на розробку гри, а потім не випустити її, оскільки вона не вийшла такою, як їм хотілося. У нашій практиці також був досвід розробки курсів, від випуску яких ми потім відмовлялися, тому що вони наш власний думку не давали учням можливості якісно засвоїти матеріал.

Крім того, курси часто складаються з кількох частин   спочатку розкриваються базові речі і поняття, а потім йде занурення в просунуті техніки. При початку роботи над курсом якоїсь теми у автора більше свободи, що полегшує створення сюжету і опрацювання самих завдань. А при роботі над сіквелом» він вже знаходиться в заданих раніше рамках   таких умовах придумати по-справжньому цікаву легенду і завдання складніше.

Технічні складності
Крім суто організаційних труднощів, існує великий пласт і чисто технічних проблем, з якими стикаються розробники курсів. Найочевидніша з них — при роботі з CSS необхідно враховувати той факт, що різні браузери по-різному підтримують ті чи інші стилі і властивості, а іноді і хитро їх інтерпретують. Навіть поведінку декількох версій браузера Chrome цьому плані може сильно відрізнятися.

У зокрема, подібна різниця проявилася при створенні курсу трансформацій. Справа в те, що браузери перетворять трансформації в матрицю. Наприклад, трансфомацию
transform: scaleX(1)
браузер перетворює в
matrix(1, 0, 0, 1, 0, 0)
.

А ось якщо у функції трансформації задіюються кути, то різні браузери округляють значення матриці по-різному. Наприклад, трансформація
transform: translate(198px, 210px) scale(0.6)
або ідентична їй
transform: translate(-198px, -210px) rotate(180deg) scale(0.6)
може бути перетворена в наступні значення матриці:

"matrix(0.6, 0.00000000000000007347880794884119, 0.00000000000000007347880794884119, 0.6, 198, 210)"

"matrix(0.6, 0.00000000000000007347880794884119, 0.00000000000000007347880794884119, 0.6, 198.00000000000003, 209.99999999999997)"

"matrix(0.6, 0, 0, 0.6, 198, 210)"

І це лише різниця в поведінці самих популярних браузерів.

Рішення було знайдено в зворотному перетворенні матриці, з метою обчислення кута і значення переміщення.

function(transform) {
var values = transform.split('(')[1];
values = values.split(')')[0];
values = values.split(',');

var a = values[0];
var b = values[1];

return Math.round(Math.atan2(b, a) * (180/Math.PI));
}

Не все просто було і при розробці курсу градієнтам. Справа в те, що історично змінилося кілька різних варіацій синтаксису, перш ніж він остаточно усталився. Плюс до всього навіть у самому актуальному синтаксисі є різні способи завдання одного і  ж ефекту, а перевіряти у курси потрібно всі можливі значення.

Нижче представлені деякі варіанти коду, що дають однаковий результат:

linear-gradient(rgb(255, 255, 255) 25%, rgb(17, 153, 255) 50%, rgb(0, 57, 166) 75%, rgb(213, 43, 30) 100%);
linear-gradient(rgb(255, 255, 255) 25%, rgb(17, 153, 255) 50%, rgb(0, 57, 166) 75%, rgb(213, 43, 30));

linear-gradient(to bottom, rgb(255, 255, 255) 25%, rgb(17, 153, 255) 50%, rgb(0, 57, 166) 75%, rgb(213, 43, 30) 100%);
linear-gradient(to bottom, rgb(255, 255, 255) 25%, rgb(17, 153, 255) 50%, rgb(0, 57, 166) 75%, rgb(213, 43, 30));

-webkit-linear-gradient(top, rgb(255, 255, 255) 25%, rgb(17, 153, 255) 50%, rgb(0, 57, 166) 75%, rgb(213, 43, 30) 100%);
-webkit-linear-gradient(top, rgb(255, 255, 255) 25%, rgb(17, 153, 255) 50%, rgb(0, 57, 166) 75%, rgb(213, 43, 30));

Вирішити цю проблему нам вдалося з допомогою застосування autoprefixer. Варіації самого актуального синтаксису перевіряються в браузері, якщо версія інтерфейсу браузера застаріла (або конкретний учень розв'язав завдання не передбаченим у перевірці способом), то йому потрібно буде вручну натиснути кнопку «Перевірити», після чого його код буде перевірений на сервері. Там код з допомогою autoprefixer перетворюється в потрібний для движка браузера формат. Ми знаємо яка версія вебкита використовується у фантоми і можемо точно визначити значення, які буде перетворений код.

Підвищення залученості
Для того, щоб зробити процес навчання ще більш захоплюючим і цікавим у курси HTML Academy активно використовується гейміфікація. Крім стандартних «ачивік» за досягнення, самі завдання розробляються з застосуванням конкретних ігрових механік, про яких ми докладно розповідали в цьому топіку.

Крім того, інтерес до навчання підігрівається і наявністю бонусних завдань   тексті конкретної задачі часто можна зустріти натяки на те, як можна відкрити додатковий «рівень» («фанати» певного курсу дуже цінують можливість позайматися їм ще). Все це, знову ж, геймифицировано   проходження прихованих рівнів дає учневі додаткові ачівкі.

Ось приклад одного з бонусних завдань: блоці з цілями з'являється додаткове завдання, яке написано в загальній формі, а не з конкретними значеннями. Тут учневі потрібно поекспериментувати, щоб його виконати і отримати окремо досягнення і окуляри в рейтингу.



До речі, у нас є деякі сюжетні елементи, які зв'язують між собою багато різноспрямованих курсів (як базових, так і просунутих). Наприклад, в різних завданнях часто використовується образ кота засновника Академії AlexPershin імені Кекс.

Ось, наприклад, одне з завдань, де учневі потрібно додати тег
<video>
. На вставляемом відео зображено як раз Кекс, в ту пору, коли він був ще кошеням:



Наявність такої загальної «кошачей» сюжетної лінії для всіх курсів додатково захоплює користувачів, а також робить проходження курсу забавним і незабутнім.

Хочу спробувати
Як видно, процес створення курсів   не так простий, як це може здатися на перший погляд, і для успішної роботи у цьому напрямку потрібна ціла команда професіоналів.

Для розробки завдань і перевірок знадобиться сильний JavaScript-програміст, також необхідно наявність сценариста, який буде придумувати сюжет, і дизайнера, який зможе його візуалізувати (можливо, десь є професіонали, які поєднують в собі ці якості), а створенням текстів завдань і описи сюжету повинен займатися фахівець з контенту.

Знайти таких фахівців непросто, до  ж вони коштують дорого, а адже курс ще потрібно окупити (і якщо зробити його дуже дорогим, то ніхто не на нім навчатися).

Тому, якщо у вас немає знайомих фахівців, готових зайнятися створенням навчальних курсів, але є ідеї щодо створення навчальних матеріалів (і сюжетних ліній), які ще не  представлені Академії, напишіть нам, і цілком можливо, ваша задумка буде реалізована.

На сьогодні все, спасибі за увага!

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.