«Reveal.js» — создавайте универсальные презентации с помощью JavaScript

Reveral.js
Логотип презентационной JS-платформы Reveral.js
Reveal.js представляет собой JS-платформу, предназначенную для быстрого создания красивых онлайн-презентаций.

Мы уже много раз писали о необходимости уделять самое пристальное внимание созданию презентационных материалов, иллюстрирующих и объясняющих цели, направления и итоги деятельности вашей НКО или гражданского объединения. Обычно для создания презентаций используются довольно сложные программы или веб-приложения, входящие в состав популярных офисных пакетов, например Open Office или Google Docs.

Сегодня мы хотим вас познакомить с другим инструментом для создания онлайновых презентаций под названием Reveal.js. Такая презентация не потребует от вас никаких дополнительных программ или сервисов и может быть воспроизведена в любом браузере, поддерживающем современные технологии. Посмотрите пример презентации «Болотное дело в тринадцати цитатах следователей», которая, на первый взгляд, напоминает полноценный сайт.

Reveal.js представляет собой JS-платформу, состоящую из небольшого javascript-файла и двух таблиц стилей. В первом из них описывается основное оформление, а второй содержит в себе разметку стандартного шаблона, который вы можете изменять по своему усмотрению в самых широких пределах. От этого шаблона зависит внешний вид таких элементов как текст, изображения, ссылки, фон и так далее. Таким образом, вы можете задать содержание и вид любого слайда, входящего в состав вашей презентации. Переходы между слайдами могут быть выполнены с помощью специальных красивых эффектов и выполняются посредством CSS 3D transitions.

Разметка слайдов презентации реализована при помощи специальных HTML5-элементов типа SECTION. Выглядит это примерно следующим образом:

<div class="reveal">
  div>
    <section>
      <p>Folie 1</p>
    </section>
    <section>
      <p>Folie 2</p>
    </section>
  </div>
</div>

Для управления воспроизведением презентации используются навигационные клавиши на клавиатуре. С помощью стрелок вправо-влево вы можете перемещаться между слайдами одного уровня, а с помощью стрелок вверх-вниз переходить к вложенным слайдам второго уровня. Нажатие клавиши ESC позволяет просмотреть уменьшенные изображения всех слайдов, где вы можете одним щелчком мыши переместиться к нужному месту презентации.

Reveral.js
Пример работы презентации Reveral.js

Если вам не хватает знаний или просто не хочется писать руками код, то всегда можно воспользоваться онлайновым редактором Rvl.io, который поможет создать презентацию на Reveal.js пользователям любого уровня подготовки. Благодаря этому сервису вы получаете возможность создания довольно сложных и эффектных презентаций, размещения их в сети и просмотра в браузере, в том числе и на мобильных устройствах.

rvl.io
Пример использования сервиса создания презентаций rvl.io

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

rvl.io
Окно настроек презентации в rvl.io

Когда ваша презентация полностью готова, не забудьте сохранить ее нажатием на кнопку Save. После этого можно опубликовать свою работу в Сети или экспортировать в виде готового набора html-страниц для вставки в ваш сайт.

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