Набор инструментов для создания HTML презентаций лекций (Василий Меленчук, OSEDUCONF-2026)

Короткая ссылка: 20260206G

Докладчик: Василий Меленчук

Альтернативой классическому подходу с использованием презентаций в PowerPoint или Impress является использование презентаций в HTML, для которых достаточно лишь браузера. Это открывает массу новых возможностей, недоступных ранее.
Доклад про опыт создания презентаций в формате AsciiDoc для демонстрации их в браузере с использованием Visual Studio Code и расширения AsciiDoc Presentations.
А также про использование этих технологий в лекционных материалах.

Видео[править вики-текст]

Презентация[править вики-текст]

Thesis[править | править вики-текст]

Ключевые слова: asciidoc, reveal.js, vscode.

Презентации в браузере[править | править вики-текст]

Классический подход к презентациям для лекций --- это использовать Microsoft PowerPoint или же, чуть реже, LibreOffice Impress. Это вполне устоявшийся стандартный подход, который применяется повсеместно.

Относительно молодой альтернативой можно назвать использование веб-браузеров для демонстрации презентаций. Языки HTML, CSS и JavaScript добавляют массу новых возможностей для работы с презентациями. А именно:

CSS + JavaScript гораздо богаче по возможностям для создания оформления и анимаций;
больше интерактивных элементов, которые могут быть встроены прямо в презентацию;
удобное хранение презентаций в системах контроля версий, что ценят разработчики ПО: человекочитаемые документы проще анализировать, чем бинарные pptx или odp;
публикация презентаций в Интернете без потери интерактивности, как это случается при использовании экспорта в PDF;
браузеры есть «из коробки» в любой современной операционной системе, в то время как наличие офисного пакета не обязательно.

Такой подход имеет и недостатки. Очевидный минус --- технологическая сложность: автор должен понимать HTML, CSS и, возможно, JavaScript. Для качественного оформления требуется опыт HTML-вёрстки.

Тем не менее подобные системы популярны. Существует несколько JavaScript-фреймворков для таких презентаций: reveal.js^[1], impress.js^[2], deck.js и другие.

В дальнейшем за основу взят фреймворк reveal.js^[1].

AsciiDoc как основа[править | править вики-текст]

Поскольку вёрстка презентации прямо в HTML является относительно сложной задачей, существуют конвертеры в этот формат из AsciiDoc (Asciidoctor reveal.js), Markdown и других форматов.

Такие форматы удобны для создания несложных презентаций: markdown-подобные синтаксисы позволяют ограничиться заголовками (названиями слайдов) и списками (тезисами слайда).

Формат особенно удобен для презентаций на ИТ-тематику, где часто требуется демонстрация исходных текстов программ с подсветкой синтаксиса, UML-диаграмм (классов, последовательностей) и т. п.

Диаграммы могут быть созданы прямо в документе с использованием различных форматов: PlantUML, GraphViz, Mermaid и других. Для визуализации по умолчанию используется сервер kroki.io^[3]. Возможен запуск собственного сервера, поскольку docker-образы kroki доступны публично.

Сводим всё воедино[править | править вики-текст]

Для демонстрации презентации желателен локальный веб-сервер. Таким образом система становится достаточно сложной; её структура изображена на рисунке 1.

Схема системы для презентаций

Работу с исходной AsciiDoc-презентацией удобно вести в Visual Studio Code с установленным расширением AsciiDoc, обеспечивающим валидацию, автодополнение, подсветку синтаксиса и предварительный просмотр.

Для управления всеми компонентами используется расширение AsciiDoc Presentation, которое помогает в создании и воспроизведении презентаций.

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

Резюме[править | править вики-текст]

Описываемый подход является альтернативой стандартным средствам работы с презентациями и удобен для подготовки лекций по ИТ-дисциплинам в университете.

Дополнительно поддерживаются:

генерация математических формул в браузере (MathJax);
генерация QR-кодов;
другие возможности, представленные в демонстрационной презентации проекта.

Использование AsciiDoc и HTML-презентаций имеет ряд недостатков:

нестандартная вёрстка, оригинальные эффекты и анимации требуют навыков HTML/CSS/JavaScript;
подход менее понятен пользователям WYSIWYG-редакторов;
диаграммы, генерируемые на лету, имеют ограниченные возможности ручной настройки внешнего вида.

Проект пока далёк от завершения, ведётся разработка идей по повышению интерактивности презентаций и лекций.

Примечания и ссылки[править вики-текст]

↑ ^1,0 ^1,1 Hakim El Hattab and contributors. The HTML Presentation Framework. URL: https://revealjs.com/
↑ Bartek Szopka. impress.js presentation tool based on the power of CSS3 in modern browsers. URL: https://impress.js.org/
↑ Kroki. URL: https://kroki.io/

https://github.com/bzzzil/vscode-asciidoc-presentation/

[reveal-1] 1,0 ^1,1 Hakim El Hattab and contributors. The HTML Presentation Framework. URL: https://revealjs.com/

[impress-2] Bartek Szopka. impress.js presentation tool based on the power of CSS3 in modern browsers. URL: https://impress.js.org/

[kroki-3] Kroki. URL: https://kroki.io/

[1]

[2]

[3]