—»     —»   Презентации с Reveal.js и HTML5 – Лучше, чем Powerpoint
  Раздел: Java-Скрипты   Нет комментариев  

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



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

Презентации с Reveal.js и HTML5 – Лучше, чем Powerpoint
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 и HTML5 – Лучше, чем Powerpoint
Индекс слайдов демонстрационной презентации

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.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: javascript, HTML 5, презентации
Опубликовал Design FactoRy   Прочитано (раз): 10642   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930