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

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. Деплой
• Оптимизация изображений
• Оптимизация HTML/CSS/JavaScript
• Проверка орфографии через Яндекс.Спеллер
• Типограф Муравьёва

26. Проблема №2
несколько
авторов
ошибки
в заданиях
ошибки
в проверках

27. Проверка и преобразования
• HTMLHint и CSSLint

28. Проверка и преобразования
• HTMLHint и CSSLint
• CSSComb

29. Проверка и преобразования
• HTMLHint и CSSLint
• CSSComb
• ESLint

30. Проблема №3
• Лишний HTML-код

31. Проблема №3
• Лишний HTML-код
• Лишний CSS-код

35. Убираем лишний код
внешние
ресурсы
фолдинг
в редакторе

36. Проблема №4
Курс
«Разметка HTML5»

37. Проблема №4
Курс
«Формы HTML5»

38. Проблема №4
Курс
«Селекторы. Часть 3»

39. Библиотека компонентов
визуальное
оформление
библиотека
компонентов

40. Проблема №5
У меня бордер
не работает

41. Серверная проверка
• PhantomJS

42. Серверная проверка
• PhantomJS
• SlimerJS

43. Серверная проверка
• PhantomJS
• SlimerJS
• Автопрефиксер

44. Серверная проверка
• PhantomJS
• SlimerJS
• Автопрефиксер
• Ждём PhantomJS 2

45. HTML Academy JavaScript API

46. Трансформации
div {
transform: rotate(90deg);
}
window.getComputedStyle(element)
.getPropertyValue("transform");

47. Трансформации
Firefox
matrix(0, 1, -1, 0, 0, 0)

48. Трансформации
Firefox
matrix(0, 1, -1, 0, 0, 0)
Chrome <= 35
matrix(0.00000000000000006123233995736766, 1,
-1, 0.00000000000000006123233995736766, 0, 0)

49. Трансформации
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)

50. Трансформации
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)
PhantomJS
matrix(0.0000000000000002220446049250313, 1,
-1, 0.0000000000000002220446049250313, 0, 0)

51. Составные свойства
div {
padding: 8px;
border: 1px solid red;
}
window.getComputedStyle(element)
.getPropertyValue("border");

52. Составные свойства
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)";

53. Составные свойства
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)";

54. Составные свойства
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)";

55. Составные свойства
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)";

56. Составные свойства
div {
padding: 8px;
border: 1px solid red;
}
a2.checkProperty(
"div",
"padding: 8px; border: 1px solid #f00;"
);

57. Проблема №6

58. Проблема №6
<h1>1. Заголовки

59. Проблема №6
• Проверять текст внутри
элемента
• Добавить проверку
синтаксиса
<h1>1. Заголовки

60. Проблема №7
Тестирование

61. Работа с командной строкой
• Создание курса

62. Работа с командной строкой
• Создание курса
• Создание задания

63. Работа с командной строкой
• Создание курса
• Создание задания
• Перемещение, удаление заданий

64. Работа с командной строкой
• Создание курса
• Создание задания
• Перемещение, удаление заданий

66. Проходимость курса
Выполнено В процентах
Поехали! 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

67. Проходимость курса
Выполнено В процентах
Перемещение по горизонтали 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

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

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

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

72. Что мы хотим в будущем
• Лёгкая замена интерфейса
задания
• Автоматическое тестирование
в браузерах
• Подмена редактора

73. Подмена редактора
haml jade

74. Подмена редактора
less sass

75. Подмена редактора
less sass svg

77. Спасибо.
simonenko simonenko simonenko.su