Видеоролик и дополнительные материалы созданы для студентов 3 курса биологических факультетов, изучающих биохимию и физиологию и растений.
Основная задача – пояснить взаимосвязь принципиально важного для жизни растения процесса, фотосинтеза, и минерального питания, в ходе которого растение добывает необходимые микроэлементы из неорганического мира.
Главная страница проекта: pozhvanov.com/mtph
Проект состоит из трёх компонентов:
❶ Учебный видеоролик о роли металлов в фотосинтезе (размещён в YouTube в 4K/HD/SD),
❷ Интерактивная визуализация молекулярных моделей фотосистем и других белков, участвующих в фотосинтезе – этот компонент является самодостаточным, но используется в видеоролике,
❸ Субсайт, связанный с видеороликом и содержащий тест для самоконтроля, визуализацию молекулярных моделей, список литературы и пр.
❶ Учебный видеоролик
Видео сочетает формат монолога-интервью и скринкаста с визуализацией молекулярных моделей (pozhvanov.com/mtphs).
Для некоторых кадров предварительно подготовлены слайды в Apple Keynote и экспортированы в виде статических изображений либо анимации, импортируемой в Apple Final Cut Pro X с использованием хромакея.
Монтаж проекта, цветокоррекция, работа с субтитрами выполнены в FCPX.
Проект, готовый к экспорту из FCPX
❷ Интерактивная визуализация молекулярных моделей
Для того, чтобы наглядно продемонстрировать с использованием реальных экспериментальных данных (рентгеноструктурный анализ и ядерно-магнитный резонанс) организацию белковых комплексов, обеспечивающих реакции световой фазы фотосинтеза, выбран инструмент визуализации NGL Viewer. Он работает в любом современном браузере с использованием HTML5/WebGL, благодаря чему студенты сами могут просматривать визуализации в интерактивном режиме даже на телефоне и планшете без необходимости использования Java-апплетов. Однако с точки зрения написания backend/frontend этот инструмент менее удобный.
Visual Studio Code со скриптами для визуализации молекулярных моделей
Визуализация молекулярной модели белка пластоцианина (PDI ID: 2PCF) на веб-странице в NGL Viewer.
❸ Сайт проекта
Поскольку инструменты для визуализации молекулярных моделей требуют интеграции с уже существующим сайтом, решено воспользоваться уже имеющейся инфраструктурой (сайт на Wordpress на VPS в облаке Oracle Cloud Infrastructure) вместо популярных инструментов для создания лендингов a la Tilda.
Такой подход удобнее с точки зрения использования IDE для работы со скриптами, бэкапов и в перспективе – расширения функционала на backend’е.
Сайт содержит три основных страницы: ❶ визуализатор моделей, загружающий скрипты в зависимости от запроса в URI, ❷ страница с тестом для самоконтроля, на которой в iframe встроена яндекс.форма, и ❸ страница с описанием проекта.
Здесь же на сайте после краткого описания проекта в секции Благодарности выражена признательность всем, без чьего участия этот проект не был бы реализован.
Инструменты и технологии
NGL Viewer 0.9.3 – визуализация молекулярных моделей из RCSB Protein Data Bank
Яндекс.Формы – тест по материалам учебного видео
Apple Final Cut Pro X v.10.4.8 – монтаж, цветокоррекция, разметка субтитров
Aegisub – работа с субтитрами на англ. языке
Apple Keynote 10.1 – инфографика, анимация, обложка видео, карточки с QR-кодами
Adobe Audition CC 2018 – обработка аудио
Adobe Illustrator CC 2018 – иконка веб-приложения для iOS
Readcube Papers – работа с научной литературой
svg2keynote – конвертация SVG в векторную графику на слайде Keynote
BareBones TextWrangler – редактирование PHP и скриптов визуализации молекулярных моделей
Microsoft Visual Studio Code – анализ документации по NGL, удалённая работа с файлами
Bit.ly – сокращение ссылок, подключение UTM-метрик
GoQR – рендеринг QR-кодов
Wordpress – интеграция проекта в существующий сайт, настройка меню
LEMP-stack на ARM в облаке Oracle – хостинг.