$30 off During Our Annual Pro Sale. View Details »

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

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

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

http://htmlacademy.ru

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

Alexey Simonenko

October 04, 2014
Tweet

More Decks by Alexey Simonenko

Other Decks in Technology

Transcript

  1. Технические особенности • Блок с HTML-кодом • Блок с CSS-кодом

    • Редактор — Ace • JavaScript тесты для проверки выполнения целей
  2. Структура курса • На каждый курс своя папка • На

    каждое задание своя папка • Настройки курса и задания
  3. Структура курса • На каждый курс своя папка • На

    каждое задание своя папка • Настройки курса и задания • Описание курса и задания
  4. Структура курса • На каждый курс своя папка • На

    каждое задание своя папка • Настройки курса и задания • Описание курса и задания • HTML- и CSS-код, JavaScript тесты
  5. Режим разработки • Express сервер • Изменение кода в браузере

    • Создание новых заданий в браузере • Полезная информация в логе
  6. Трансформации Firefox matrix(0, 1, -1, 0, 0, 0) Chrome <=

    35 matrix(0.00000000000000006123233995736766, 1, -1, 0.00000000000000006123233995736766, 0, 0)
  7. 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)
  8. 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)
  9. Составные свойства div { padding: 8px; border: 1px solid red;

    } window.getComputedStyle(element) .getPropertyValue("border");
  10. Составные свойства 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)";
  11. Составные свойства 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)";
  12. Составные свойства 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)";
  13. Составные свойства 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)";
  14. Составные свойства div { padding: 8px; border: 1px solid red;

    } a2.checkProperty( "div", "padding: 8px; border: 1px solid #f00;" );
  15. Проходимость курса Выполнено В процентах Поехали! 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
  16. Проходимость курса Выполнено В процентах Перемещение по горизонтали 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
  17. Время прохождения заданий Медиана в секундах Поехали! 80 CSS в

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

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

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

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

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