Автоматизация разработки курсов: путь от рутины к игре
DESCRIPTION
Принципы автоматизации хорошо применимы не только для организации кода, но и для работы с контентом. В HTML Academy мы прошли путь от скидывания заданий в базу данных до организации автоматической сборки курсов на основе статических файлов. Я расскажу о том, как мы меняли процесс разработки курсов, как добавляли в него автоматизацию и к чему мы хотим прийти в итоге. http://htmlacademy.ruTRANSCRIPT
Автоматизация разработки курсов
Алексей Симоненко веб-евангелист в 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
Спасибо.