Презентации с Reveal.js и HTML5 – Лучше, чем Powerpoint

Вы говорите, нормальные презентации можно делать только в PowerPoint? Стоит подумать еще раз. Большинство наших знакомых ворочают нос, как только слышат Powerpoint. Вы ведь не хотите, чтобы ваши клиенты тоже ворочали носом? Если вы хотите провести презентацию, используя Android или iPad, вам даже понадобятся дополнительные инструменты, чтобы ваша презентация запустилась и нормально прошла. Так как мы веб-разработчики, почему бы не использовать отличную JS-платформу Reveal.js? Reveal.js позволяет вам создавать презентации точно так же, как веб-сайт, и всё, что вам останется сделать, так это провести презентацию при помощи браузера.


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

Разметка слайдов на HTML5

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

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

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

<div>
  div>
    <section>
      <p>Folie 1</p>
    </section>
    <section>
      <section>
        <p>Folie 2 a</p>
      </section>
      <section>
        <p>Folie 2 b</p>
      </section>
    </section>
  </div>
</div>

Клавиша ESC переносит вас в индекс всех слайдов, где вы можете выбрать каждый слайд по-отдельности.


Reveal.js: возможности расширенной навигации

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

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

Reveal.js: возможность использовать Markdown

Это как раз для меня. Вместо использования HTML для стилизации контента слайдов, вы также можете использовать синтаксис Markdown. Данное руководство было написано на Markdown. Reveal.js просто превращает Markdown в HTML. Преимущество: контент на Markdown писать гораздо проще, так как вам не нужно будет искать контент среди открытых и закрытых тэгов.

<section>
  ##Heading H2
 
  Paragraph with [link](http://www.noupe.com)
</section>

Завершение

Reveal.js – это сильная платформа для создания браузерных презентаций высокого уровня. Совместив её с javascript-API Fullscreen, вы сможете получить нечто большее, чем Powerpoint.