Синхронизация веб-презентаций с Impress.js и Impressr [Quicktip]

Я выступал с докладами о веб-разработке и WordPress в нескольких университетах и ​​школах, и одна общая проблема, с которой я сталкиваюсь во время презентации, заключается в том, что аудитория за толпой едва может увидеть мои слайды. Я задумался над этим: как я могу сделать слайды презентации более четкими, но при этом держать докладчика и участников на одной странице?

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

Рекомендуемое чтение: 10 инструментов для презентации, чтобы завоевать аудиторию

Создание слайдов

Однако, чтобы сделать это, вместо Keynote или PowerPoint нам нужно создать слайд с Impress.js вместо.

Impress.js позволяет создавать веб-слайды презентаций с анимационными эффектами, которые впечатляют больше, чем в Keynote или PowerPoint. На самом деле, если вы разбираетесь в CSS3, вы можете создать собственную анимацию (попробуйте демо здесь).

«Но что, если я не понимаю CSS, JavaScript и HTML?»

Затем вы можете использовать Strutвеб-приложение для создания слайдов Impress.js с графическим интерфейсом. Приложение все еще находится в бета-версии, но работает хорошо. Вы можете вставить текст, изображение или видео с помощью перетаскивания, подобно Keynote или PowerPoint. Вы также можете изменить фон, цвета, семейство шрифтов и его размер.

После того, как вы закончили создание слайдов презентации, вы можете нажать большую зеленую кнопку с правой стороны с надписью Impress. Затем нажмите Ctrl + S (Ctrl + S в Windows), чтобы сохранить слайды.

Синхронизация слайдов

Теперь мы сделаем синхронизацию слайдов. Идея использования Impress.js для создания слайдов заключается в том, чтобы слайды были доступны на ноутбуках или мобильных устройствах. Аудитория также может видеть крупным планом и даже взаимодействовать со слайдами. Когда вы просматриваете слайды, изменения, которые вы вносите в слайды (например, переходите к следующему слайду), будут отражаться на их устройствах в режиме реального времени.

Для этого вам нужна библиотека JavaScript с именем Impressr.js, Эта библиотека была опубликована два года назад. Несмотря на это, он все еще работает отлично и очень прост в использовании. Загрузите библиотеку, затем добавьте следующее в тег head.

Затем добавьте следующее для инициализации Impressr.

$ ( “# Слайд-контейнер”). ImpressR ({
proxyName: «презентация»
});

Убедитесь, что вы выбрали правильный элемент, который немедленно оборачивает слайды. Опция proxyName может быть установлена ​​на что угодно, если это строка (простой текст).

Теперь слайд должен синхронизироваться в режиме реального времени на каждом устройстве с открытой презентацией. Обратите внимание, что все устройства должны быть подключены к одной сети. Чтобы проверить это, вы можете открыть слайд в двух разных браузерах. Здесь, в качестве примера, я открыл слайд в Chrome и Firefox.

Вы также можете попробовать это на мобильных устройствах.