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.
