Кабинет Школы бюро

Рассказывает Василий Половнёв, ведущий разработчик

Это проект, в котором мы (разработчики) облажались: делали задачу без дизайна и переоценили свои силы. Мы пообещали больше никогда‑никогда так не делать.

На каждой встрече с арт‑директором был миллион замечаний. Вот некоторые из моих заметок с комментариями:

Рассказывает Юрий Мазурский, разработчик

Для открытия Кабинета нужно перегнать лекции, литературу и другие материалы из гуглодоков. Две школы, сотни документов и тысячи изображений.

Структура всех лекций школы сгруппированных по дисциплинам содержится в JSON‑файле, который предварительно сформирован скриптом Коли Митина. Наш скрипт‑импортёр должен будет пройтись по файлу и скачать документы по ссылкам на лекции в гугль‑драйве.

В теории вытащить текст и изображения не проблема, гугль предоставляет подробное АПИ, которое позволяет делать со своими документами что угодно. Делаем первый подход — получаем текст лекции в ХТМЛ, но при попытке массового импорта гугль‑драйв блокирует доступ. Приходится вчитываться в документацию и переделывать авторизацию для доступа ко всем документам школы разом.

Документы приходят в формате ХТМЛ, но движок сайта бюро компилирует страницы из шаблонов Паг — все документы нужно не только скачать к себе, но и сконверировать в Паг. Оказалось, что существующие библиотеки для конвертации нам не подходят, потому что они не умеют заменять ХТМЛ на миксины, используемые в Паге.

Делать нечего, упарываемся и пишем свой ХТМЛ‑Паг парсер. Через неделю отладки получаем сносную вёрстку, которую уже можно вычитывать. Какой бы отлаженный алгоритм ни работал, гарантии что лекция выглядит хорошо, нет, поэтому смотрим и чистим все лекции вручную. К тому же, кое‑что уже можно переписать и освежить.

Запускаем импортёр — лекции скачиваются, раскладываются по папкам, картинки кладутся в подпапку files.

Лекции, литература и изображения отдельной лекции по дисциплине ФФФ

Для утверждения лекций, прикручиваем галочки, как в книгах. Вот так Кабинет видят бюрошники — отмеченные галочкой лекции утверждены у арт‑директора:

bureau.ru/school/classroom

Рассказывает Руст Кулматов, ведущий разработчик

Иногда мы всё‑таки ошибаемся, так случилось в этом проекте. Мы рассчитывали, что всё быстро запилим, но не учли сотню нюансов. В этом был главный провал. Пилили‑пилили, потом приходил арт‑директор и говорил это подвинуть туда, это подвинуть сюда. Правки были бесконечными, разработка продолжась почти месяц.

Я занимался виджетом загрузки файлов и оценок.

bureau.ru
Виджет оценок

Рассказывает Сергей Фролов, верстальщик и тестировщик

Просмотреть и почистить вёрстку лекций — это ко мне. В первом подходе прохожусь по всем перенесённым лекциям, литературам и заданиям и правлю очевидные ошибки: поехавшие абзацы, списки, таблицы, картинки и подписи. Привожу к стандартному виду.

Во втором подходе вместе с Лерой Паниной добавляем и редактируем лекции новых дисциплин: «Аналитика и маркетинг» и «Данные и визуализация». Каждую расшифровку новой лекции сверяем с видео, правим орфографические ошибки и опечатки, добавляем слайды и фрагменты кода.

То же самое с лекциями подготовительных курсов. После импорта из гуглодоков правлю вёрстку, меняю картинки на лучшие по качеству. Адаптирую для мобильной версии: колонки таблиц перестраиваются, сайдноуты справа от текста переезжают под абзац, к которому относятся.

Рассказывает Валерия Панина, завуч школы

Я отвечала за содержание и новые предметы.

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

Вместе с этим мы приводили материалы к одинаковому виду, иногда они отличались в разных предметах. Предстояло ёфицировать слова, проверить аббревиатуры, термины, имена собственные и привести к одному виду оформление. Например, раньше реплики слушателей выделяли квадратными скобками, а в этом году, наоборот, решили выделять реплики преподавателя инициалами в начале.

Но это — мелочи. Самая большая и напряжённая часть работы — новые предметы, второй тип лекций.

В этом году появились новые дисциплины: «Аналитика и маркетинг» и «Данные и визуализация». По ним были исходные «сырые» видео, недельный план — и всё. Я отвечала за внедрение.

docs.google.com
План готовности материалов. «Дешборд»!

Шаги такие: «прибить гусеницу» по выходу лекций, потому что работали порциями, убедиться, что оператор вовремя смонтирует правильные части, в это время передать «сырые» видео расшифровщикам и проследить, чтобы один и тот же кусок не расшифровали дважды, получить расшифровки, исправить опечатки и ошибки на слух (например, неправильное употребление спецтерминов, вроде CEO вместо SEO, проверить правописание фамилий. Автозамена — прекрасная вещь!), поправить стили в гугль‑доке, получить картинки и дополнительные материалы у преподавателей и передать Сергею для первого подхода: верстать, добавлять картинки и сверять текст с видеорядом. Дальше — повторить: свёрстанные лекции проверить на смысловые ошибки, но уже в разметке Кабинета, просмотреть их с преподавателями (на этом этапе уточняли идеологические детали: например, добавить кавычки термину «пилюли», заменить «е» на «а» в слове «дашборд»), убрать лишние части, добавить пояснения, примечания и источники. Иногда Сергей, иногда я — во втором подходе мы были друг у друга на подхвате. Когда всё готово, подсчитать потраченное на расшифровки время, определить гонорар расшифровщиков и передать его на оплату.

Такая работа шла по двум предметам параллельно. Идеологические решения перекрёстно внедряли в остальных предметах, чтобы оформление и термины выглядели одинаково (те же «дашборды» и «имейл‑рассылка», KPI и гугль‑доки).

В голове держала много вещей: что расшифровщики не получат одинаковые материалы, у оператора не появится вопросов по порезке видео (бывало, появлялись), разработчики поймут, какую версию теста импортировать, ведь каждый набор мы с преподавателями меняем некоторые вопросы (раз проскочило), а коллеги в курсе, когда и в каком объёме потребуется их участие.

Чтобы успеть к дедлайну и оставить запас на форс‑мажоры, над материалом параллельно трудились три расшифровщика. Однажды я перепутала недели и занялась следующей лекцией, пропустив ближайшую — спас запас на «не в притык», но было досадно.

docs.google.com
Тайминг лекций по дисциплине «Данные и визуализация»

По «Данным и визуализации» мы не поменяли изначальный вариант программы. А работая над «Аналитикой и маркетингом», осознали, что в конце курса материала становится непропорционально больше. Чтобы не перегрузить студентов, в процессе решили программу изменить — добавили в учебный план две недели, тест и задание. Ещё перенесли пару других тестов и заданий, которые выпали на насыщенные другими предметами недели. На ходу. Согласовывали чётко: не успеть согласовать варианта не было.

Больше всего я переживала о смысле, но огромной, отдельной болью оказались простые опечатки. Несмотря на то, что по тексту проходились минимум три человека, дурацкие описки всё равно оставались. Мы были уверены, что через тройное сито внимания опечатки не проскочат — но нет. Каждое письмо студента со скриншотом неправильной запятой или падежа крайне огорчало. Жалею, что сразу не обратились к профессиональному корректору — недооценили насыщенность.

Всего материала, с новыми предметами, было примерно 900 страниц в гугль‑доке шрифтом 10 кегля.

Сложности добавило то, что материал — интересный: приходилось не отвлекаться на содержание, а всё время напоминать себе об исходных задачах. После выхода Кабинета прочитала пару лекций как студент, для себя, не ища ошибки и не сверяясь с программой, — как будто заново с ними ознакомилась. Ещё видео впереди :‑)

Отправить
Поделиться
Запинить

Когда выйдет новый проект

Оставьте почту, чтобы узнавать о выходе новых проектов и обновлениях других продуктов бюро.

Расскажите о своём продукте команде бюро