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

Принципы автоматизации хорошо применимы не только для организации кода, но и для работы с контентом. В HTML Academy мы прошли путь от скидывания заданий в базу данных до организации автоматической сборки курсов на основе статических файлов. Я расскажу о том, как мы меняли процесс разработки курсов, как добавляли в него автоматизацию и к чему мы хотим прийти в итоге.

http://htmlacademy.ru

Ссылка на видео c 404 фестиваля: http://www.youtube.com/watch?v=ks_ooa13l8U

Transcript

1. Автоматизация разработки курсов Алексей Симоненко веб-евангелист в HTML Academy 2014 путь от рутины к игре
2. Гхм.. . гхм… привет!
5. Структура курса • 10–30 заданий
6. Структура курса • 10–30 заданий • 1–3 испытания
7. Структура курса • 10–30 заданий • 1–3 испытания • Постепенное усложнение
8. Структура курса • 10–30 заданий • 1–3 испытания • Постепенное усложнение • Скрытые цели
9. Технические особенности • Блок с HTML-кодом
10. Технические особенности • Блок с HTML-кодом • Блок с CSS-кодом
11. Технические особенности • Блок с HTML-кодом • Блок с CSS-кодом • Редактор — Ace
12. Технические особенности • Блок с HTML-кодом • Блок с CSS-кодом • Редактор — Ace • JavaScript тесты для проверки выполнения целей
15. Проблема №1 28 курсов 500 заданий 55 испытаний 1850 целей
16. Что это за галиматья? Это же бордер Ра-а-мка!
17. Структура курса • На каждый курс своя папка
18. Структура курса • На каждый курс своя папка • На каждое задание своя папка
19. Структура курса • На каждый курс своя папка • На каждое задание своя папка • Настройки курса и задания
20. Структура курса • На каждый курс своя папка • На каждое задание своя папка • Настройки курса и задания • Описание курса и задания
21. Структура курса • На каждый курс своя папка • На каждое задание своя папка • Настройки курса и задания • Описание курса и задания • HTML- и CSS-код, JavaScript тесты
24. Режим разработки • Express сервер
25. Режим разработки • Express сервер • Изменение кода в браузере
26. Режим разработки • Express сервер • Изменение кода в браузере • Создание новых заданий в браузере
27. Режим разработки • Express сервер • Изменение кода в браузере • Создание новых заданий в браузере • Полезная информация в логе
28. Деплой • Оптимизация изображений
29. Деплой • Оптимизация изображений • Оптимизация HTML/CSS/JavaScript
30. Деплой • Оптимизация изображений • Оптимизация HTML/CSS/JavaScript • Проверка орфографии через Яндекс.Спеллер
31. Деплой • Оптимизация изображений • Оптимизация HTML/CSS/JavaScript • Проверка орфографии через Яндекс.Спеллер • Типограф Муравьёва
32. Проблема №2 несколько авторов ошибки в заданиях ошибки в проверках
33. Проверка и преобразования • HTMLHint и CSSLint
34. Проверка и преобразования • HTMLHint и CSSLint • CSSComb
35. Проверка и преобразования • HTMLHint и CSSLint • CSSComb • ESLint
36. Проблема №3 • Лишний HTML-код
37. Проблема №3 • Лишний HTML-код • Лишний CSS-код
41. Убираем лишний код внешние ресурсы фолдинг в редакторе
42. Проблема №4 «Разметка HTML5» Курс
43. Проблема №4 Курс «Формы HTML5»
44. Проблема №4 Курс «Селекторы. Часть 3»
45. Библиотека компонентов визуальное оформление библиотека компонентов
46. Проблема №5 У меня бордер не работает
47. Проблема №5 У меня бордер не работает
48. • PhantomJS Серверная проверка
49. • PhantomJS • SlimerJS Серверная проверка
50. • PhantomJS • SlimerJS • Автопрефиксер Серверная проверка
51. • PhantomJS • SlimerJS • Автопрефиксер • Ждём PhantomJS 2 Серверная проверка
52. HTML Academy JavaScript API
53. Трансформации div { transform: rotate(90deg); } window.getComputedStyle(element) .getPropertyValue("transform");
54. Трансформации div { transform: rotate(90deg); } window.getComputedStyle(element) .getPropertyValue("transform"); Firefox matrix(0, 1, -1, 0, 0, 0)
55. Трансформации Firefox matrix(0, 1, -1, 0, 0, 0) Chrome <= 35 matrix(0.00000000000000006123233995736766, 1, -1, 0.00000000000000006123233995736766, 0, 0)
56. 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)
57. 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)
58. Составные свойства div { padding: 8px; border: 1px solid red; } window.getComputedStyle(element) .getPropertyValue("border");
59. Составные свойства 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)";
60. Составные свойства 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)";
61. Составные свойства 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)";
62. Составные свойства 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)";
63. window.getComputedStyle(element) .getPropertyValue("padding"); Составные свойства div { padding: 8px; border: 1px solid red; } "padding-top" === "8px";
64. window.getComputedStyle(element) .getPropertyValue("padding"); Составные свойства div { padding: 8px; border: 1px solid red; } "padding-right" === "8px";
65. window.getComputedStyle(element) .getPropertyValue("padding"); Составные свойства div { padding: 8px; border: 1px solid red; } "padding-bottom" === "8px";
66. window.getComputedStyle(element) .getPropertyValue("padding"); Составные свойства div { padding: 8px; border: 1px solid red; } "padding-left" === "8px";
67. Составные свойства div { padding: 8px; border: 1px solid red; } a2.checkProperty( "div", "padding: 8px; border: 1px solid #f00;" );
68. Проблема №6
69. Проблема №6 <h1>1. Заголовки
70. Проблема №6 • Проверять текст внутри элемента <h1>1. Заголовки
71. Проблема №6 • Проверять текст внутри элемента • Добавить проверку синтаксиса <h1>1. Заголовки
72. Проблема №7 Тестирование
73. Работа с командной строкой • Создание курса
74. Работа с командной строкой • Создание курса • Создание задания
75. Работа с командной строкой • Создание курса • Создание задания • Перемещение, удаление заданий
76. Работа с командной строкой • Создание курса • Создание задания • Перемещение, удаление заданий
78. Проходимость курса Выполнено В процентах Поехали! 2 754 100 CSS в действии 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
79. Проходимость курса Выполнено В процентах Перемещение по горизонтали 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
80. Время прохождения заданий Медиана в секундах Поехали! 80 CSS в действии 44 Закрепление 180 Азы HTML 216 Одиночные HTML-теги 158 Атрибуты HTML-тегов 186 Ищем ошибки 182 Азы CSS 175 Другие способы подключения CSS 90 Селекторы в CSS 180 Классы в CSS 284 Свойства и значения CSS 417 Работа над ошибками 139
81. Время прохождения заданий Медиана в секундах Поехали! 80 CSS в действии 44 Закрепление 180 Азы HTML 216 Одиночные HTML-теги 158 Атрибуты HTML-тегов 186 Ищем ошибки 182 Азы CSS 175 Другие способы подключения CSS 90 Селекторы в CSS 180 Классы в CSS 284 Свойства и значения CSS 417 Работа над ошибками 139
82. Время прохождения заданий Медиана в секундах Поехали! 80 CSS в действии 44 Закрепление 180 Азы HTML 216 Одиночные HTML-теги 158 Атрибуты HTML-тегов 186 Ищем ошибки 182 Азы CSS 175 Другие способы подключения CSS 90 Селекторы в CSS 180 Классы в CSS 284 Свойства и значения CSS 229 Работа над ошибками 139
84. Что мы хотим в будущем • Лёгкая замена интерфейса задания
85. Что мы хотим в будущем • Лёгкая замена интерфейса задания • Автоматическое тестирование
 в браузерах
86. Что мы хотим в будущем • Лёгкая замена интерфейса задания • Автоматическое тестирование
 в браузерах • Подмена редактора
87. Подмена редактора haml jade
88. Подмена редактора less sass
89. Подмена редактора less sass svg
91. simonenko simonenko simonenko.su Спасибо.