Автоматизация разработки курсов: путь от рутины к игре

Автоматизация разработки курсов

Алексей Симоненко веб-евангелист в HTML Academy

2014

путь от рутины к игре

Гхм. . . гхм… привет!

Структура курса

• 10–30 заданий

Структура курса

• 10–30 заданий

• 1–3 испытания

Структура курса

• 10–30 заданий

• 1–3 испытания

• Постепенное усложнение

Структура курса

• 10–30 заданий

• 1–3 испытания

• Постепенное усложнение

• Скрытые цели

Технические особенности

• Блок с HTML-кодом

Технические особенности

• Блок с HTML-кодом

• Блок с CSS-кодом

Технические особенности

• Блок с HTML-кодом

• Блок с CSS-кодом

• Редактор — Ace

Технические особенности

• Блок с HTML-кодом

• Блок с CSS-кодом

• Редактор — Ace

• JavaScript тесты для проверки выполнения целей

Проблема №1

28 курсов

500 заданий

55 испытаний

1850 целей

Что это за галиматья?

Это же бордер

Ра-а-мка!

Структура курса

• На каждый курс своя папка

Структура курса

• На каждый курс своя папка

• На каждое задание своя папка

Структура курса

• На каждый курс своя папка

• На каждое задание своя папка

• Настройки курса и задания

Структура курса

• На каждый курс своя папка

• На каждое задание своя папка

• Настройки курса и задания

• Описание курса и задания

Структура курса

• На каждый курс своя папка

• На каждое задание своя папка

• Настройки курса и задания

• Описание курса и задания

• HTML- и CSS-код, JavaScript тесты

Режим разработки

• Express сервер

• Изменение кода в браузере

• Создание новых заданий в браузере

• Полезная информация в логе

Деплой

• Оптимизация изображений

• Оптимизация HTML/CSS/JavaScript

• Проверка орфографии через Яндекс.Спеллер

• Типограф Муравьёва

Проблема №2

несколько авторов

ошибки в заданиях

ошибки в проверках

Проверка и преобразования

• HTMLHint и CSSLint

Проверка и преобразования

• HTMLHint и CSSLint

• CSSComb

Проверка и преобразования

• HTMLHint и CSSLint

• CSSComb

• ESLint

Проблема №3

• Лишний HTML-код

Проблема №3

• Лишний HTML-код

• Лишний CSS-код

Убираем лишний код

внешние ресурсы

фолдинг в редакторе

Проблема №4

«Разметка HTML5»Курс

Проблема №4

Курс«Формы HTML5»

Проблема №4

Курс«Селекторы. Часть 3»

Библиотека компонентов

визуальное оформление

библиотека компонентов

Проблема №5

У меня бордер не работает

• PhantomJS

Серверная проверка

• PhantomJS

• SlimerJS

Серверная проверка

• PhantomJS

• SlimerJS

• Автопрефиксер

Серверная проверка

• PhantomJS

• SlimerJS

• Автопрефиксер

• Ждём PhantomJS 2

Серверная проверка

HTML Academy JavaScript API

Трансформации

div { transform: rotate(90deg); }

window.getComputedStyle(element) .getPropertyValue("transform");

Трансформации

Firefox matrix(0, 1, -1, 0, 0, 0)

Трансформации

Firefox matrix(0, 1, -1, 0, 0, 0)

Chrome <= 35 matrix(0.00000000000000006123233995736766, 1, -1, 0.00000000000000006123233995736766, 0, 0)

Chrome >= 36 matrix(6.12323399573677e-17, 1, -1, 6.12323399573677e-17, 0, 0)

Трансформации

Firefox matrix(0, 1, -1, 0, 0, 0)

Chrome <= 35 matrix(0.00000000000000006123233995736766, 1, -1, 0.00000000000000006123233995736766, 0, 0)

Chrome >= 36 matrix(6.12323399573677e-17, 1, -1, 6.12323399573677e-17, 0, 0)

Трансформации

Firefox matrix(0, 1, -1, 0, 0, 0)

Chrome <= 35 matrix(0.00000000000000006123233995736766, 1, -1, 0.00000000000000006123233995736766, 0, 0)

PhantomJS matrix(0.0000000000000002220446049250313, 1, -1, 0.0000000000000002220446049250313, 0, 0)

Составные свойства

div { padding: 8px; border: 1px solid red; }

window.getComputedStyle(element) .getPropertyValue("border");

Составные свойства

div { padding: 8px; border: 1px solid red; }

window.getComputedStyle(element) .getPropertyValue("border");

"border-top-width" === "1px"; "border-top-style" === "solid"; "border-top-color" === "rgb(255, 0, 0)";

Составные свойства

div { padding: 8px; border: 1px solid red; }

window.getComputedStyle(element) .getPropertyValue("border");

"border-right-width" === "1px"; "border-right-style" === "solid"; "border-right-color" === "rgb(255, 0, 0)";

Составные свойства

div { padding: 8px; border: 1px solid red; }

window.getComputedStyle(element) .getPropertyValue("border");

"border-bottom-width" === "1px"; "border-bottom-style" === "solid"; "border-bottom-color" === "rgb(255, 0, 0)";

Составные свойства

div { padding: 8px; border: 1px solid red; }

window.getComputedStyle(element) .getPropertyValue("border");

"border-left-width" === "1px"; "border-left-style" === "solid"; "border-left-color" === "rgb(255, 0, 0)";

Составные свойства

div { padding: 8px; border: 1px solid red; }

a2.checkProperty( "div", "padding: 8px; border: 1px solid #f00;" );

Проблема №6

Проблема №6

<h1>1. Заголовки

Проблема №6

• Проверять текст внутри элемента

• Добавить проверку синтаксиса

<h1>1. Заголовки

Проблема №7

Тестирование

Работа с командной строкой

• Создание курса

Работа с командной строкой

• Создание курса

• Создание задания

Работа с командной строкой

• Создание курса

• Создание задания

• Перемещение, удаление заданий

Работа с командной строкой

• Создание курса

• Создание задания

• Перемещение, удаление заданий

Проходимость курса

Выполнено В процентах

Поехали! 2 754 100CSS в действии 2 638 95.8Закрепление 2 525 91.7Азы HTML 2 388 86.7Одиночные HTML-теги 2 321 84.3Атрибуты HTML-тегов 2 227 80.9Ищем ошибки 2 187 79.4Азы CSS 2 170 78.8Другие способы подключения CSS 2 159 78.4Селекторы в CSS 2 128 77.3Классы в CSS 2 081 75.6Свойства и значения CSS 2 053 74.5Работа над ошибками 2 062 74.9Первое испытание 1 909 69.3

Проходимость курса

Выполнено В процентах

Перемещение по горизонтали 654 100Перемещение по вертикали 556 85Тренировка фаерболов 559 85.5Увеличение, уменьшение 559 85.5Защита города 458 70Начало путешествия 445 68Лабиринт 442 67.6Битва — часть 1 440 67.3Битва — часть 2 417 63.8Испытание: таинственная карта 382 58.4Битва — часть 3 391 59.8Испытание: расколотый кристалл 358 54.7Финальная битва 372 56.9Особенности transform-origin 376 57.5

Время прохождения заданий

Медиана в секундах

Поехали! 80CSS в действии 44Закрепление 180Азы HTML 216Одиночные HTML-теги 158Атрибуты HTML-тегов 186Ищем ошибки 182Азы CSS 175Другие способы подключения CSS 90Селекторы в CSS 180Классы в CSS 284Свойства и значения CSS 417Работа над ошибками 139

Время прохождения заданий

Медиана в секундах

Поехали! 80CSS в действии 44Закрепление 180Азы HTML 216Одиночные HTML-теги 158Атрибуты HTML-тегов 186Ищем ошибки 182Азы CSS 175Другие способы подключения CSS 90Селекторы в CSS 180Классы в CSS 284Свойства и значения CSS 417Работа над ошибками 139

Время прохождения заданий

Медиана в секундах

Поехали! 80CSS в действии 44Закрепление 180Азы HTML 216Одиночные HTML-теги 158Атрибуты HTML-тегов 186Ищем ошибки 182Азы CSS 175Другие способы подключения CSS 90Селекторы в CSS 180Классы в CSS 284Свойства и значения CSS 229Работа над ошибками 139

Что мы хотим в будущем

• Лёгкая замена интерфейса задания

• Автоматическое тестированиев браузерах

• Подмена редактора

Подмена редактора

haml jade

Подмена редактора

less sass

Подмена редактора

less sass svg

simonenko simonenko simonenko.su

Спасибо.