«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 – это заме­ча­тель­ная плат­фор­ма для созда­ния бра­у­зер­ных пре­зен­та­ций доволь­но непло­хо­го каче­ства. Её воз­мож­но­сти усту­па­ют спе­ци­а­ли­зи­ро­ван­ным про­грамм­ным реше­ни­ям, одна­ко это с лих­вой ком­пен­си­ру­ет­ся про­сто­той, уни­вер­саль­но­стью, отлич­ной ско­ро­стью, бес­плат­но­стью и отсут­стви­ем необ­хо­ди­мо­сти уста­нав­ли­вать на свой ком­пью­тер допол­ни­тель­ное про­грамм­ное обес­пе­че­ние.