Keď je reč o digitálnych prezentáciach, mnohým ľuďom sa zrejme automaticky vybaví Microsoft Powerpoint či Google Slides. V skutočnosti však existuje celá paleta možností ako vytvárať profesionálne slideshows, existuje niekoľko koncepcií, ako môžu prezentácie fungovať a vyzerať, pričom niektoré nástroje sú nie len priam ako stvorené pre čítače obrazoviek, ale aj ich výstupy sú pre nevidiacich a slabozrakých vysoko prívetivé.
Dnes sa pozrieme na jeden z nich, Reveal JS.
Reveal JS, koncept
Ako bolo už spomenuté v úvode, existuje viacero koncepcií vzhľadu a fungovania prezentácií, preto je pri hodnotení každého nástroja pre ich tvorbu najlepšie začať predstavou o tom, čo umožňujú vytvárať. Reveal JS sa popisuje ako „HTML presentation framework“, teda prezentačný softvér postavený na technológii HTML, alebo ak chcete webového obsahu. Myšlienka je veľmi podobná fungovaniu Powerpointu, v ktorom prezentácie pozostávajú z viacerých obrazoviek, ktoré sa prepínajú posúvaním vpred / vzad pomocou myši, šípok či špecializovaných ovládačov. Rozdiel je v tom, že zatiaľ čo program Microsoftu používa vlastný formát (.pptx), ktorý je od iných formátov relatívne izolovaný a je plne pod kontrolou Microsoftu, Reveal JS stavia svoje slajdy na systéme webu a prezentuje ich cez webový prehliadač.
Tento prístup má obrovské množstvo výhod. V prvom rade konektivita a dostupnosť, v prípade .pptx prezentácií je nutné, aby mal pre ich prezeranie používateľ nainštalovaný Powerpoint, pri Reveale stačí prezentáciu zavesiť na webový hosting, spustiť server na IP adrese či len zdieľať súbor a môže si ju pozrieť úplne ktokoľvek cez webový prehliadač, a to ako na počítači tak smartfóne, alebo ľubovoľnom inom zariadení schopnom zobrazovania webových stránok. Plus, prezentácie možno aj vkladať ako súčasť webových stránok, môžete tak mať svoj web, na ktorom prezentácia tvorí jednu z viacerých foriem obsahu, pričom do seba bude všetko pekne zapadať, používateľ nemusí nič sťahovať.
Ďalšou veľkou výhodou revealu je interoperabilita a interaktivita. Máte k dispozícii celý HTML štandard, rovnako ako JavaScript. To ponúka priam nekonečné možnosti. Chcete do svojej prezentácie vložiť Youtube video? Žiadny problém. Chcete v nej mať interaktívne grafy? Žiadny problém. Chcete do nej zaradiť celú webovú aplikáciu, ktorá bude napríklad vyhodnocovať používateľské odpovede na cvičenia? Dá sa aj to.
No a v neposlednom rade tu je veľký benefit v podobe prístupnosti. Normálne platí, že čím zložitejší a diverznejší softvér, tým väčšia šanca, že bude mať prístupnostné problémy. Web je však súbor technológií, ktoré sú už dlhú dobu pomerne jednotné a ich prístupnosť pre čítače obrazoviek sa veľmi intenzívne a aktívne rieši, preto sú HTML a JS pre nevidiacich použiteľné ako máloktorý iný systém. Reveal v tomto ohľade pracuje výhradne s čistými webovými prvkami, čo znamená, že je z hľadiska dostupnosti veľmi dobre použiteľný.
Ako vyzerá Reveal JS prezentácia
V princípe ide o panel na webovej stránke, v ktorom sa zobrazuje obsah. Zahŕňa niekoľko ovládacích tlačidiel pre posun na nasledujúci a predchádzajúci slajd, rovnako ako na obrazovku nad alebo pod tou aktuálnou. Koncept vertikálnych slajdov je pomerne jednoduchý, zatiaľ čo tematicky sa obrazovky umiestňujú jedna vedľa druhej horizontálne, jednu obrazovku možno rozdeliť na viac podobrazoviek, ktoré sa vizuálne umiestnia vertikálne pod seba.
Prezentácie môžu rovnako obsahovať tzv. Speaker notes – poznámky pre rečníka. Tie umožňujú napísať si súkromné prezentačné poznámky ku každému slajdu, no taktiež sledovať údaje ako celkový čas prezentácie, čas strávený na aktuálnom slajde, podľa nakonfigurovaného intervalu pre jednu obrazovku vie softvér indikovať, či ste na tom po časovej stránke dobre alebo treba zrýchliť.
Tvorba prezentácií v Reveal JS
Používateľský zážitok je dôležitý aspekt prezentačného nástroja, keďže určuje, čo je možné v ňom vytvoriť a ako to bude vnímané divákmi. Pre autorov prezentácií je však nemenej dôležitý prvok proces ich tvorby, keďže jeho intuícia a efektivita sú zodpovedné za to, koľko úsilia zaberie dobrú prezentáciu vytvoriť.
Reveal JS má aj v tomto jednu veľkú výhodu, či skôr špecifickú vlastnosť. Ak chcete vytvoriť prezentáciu, nepotrebujete inštalovať a obsluhovať zložitý softvér s nespočetným množstvom ovládacích prvkov či sa pasovať s rozsiahlou webovou aplikáciou. Celú prezentáciu môžete vytvoriť jednoducho v poznámkovom bloku pomocou markdown syntaxe.
Spôsoby sú v zásade 3.
Stránka slides.com
slides.com je projekt od autora Reveal JS. Ide o nástroj na vizuálnu tvorbu prezentácií, do ktorého však môžete rovnako importovať aj markdown súbor. Z tohto hľadiska preto ide o zrejme najjednoduchší spôsob, ako prezentácie vytvárať a používať.
Veľkou výhodou je tiež veľmi dobrá funkcionalita. Po vytvorení účtu na stránke a naimportovaní prezentácie môžete link na ňu rozposlať svojim divákom. Následne sa môžete prihlásiť do rozhrania cez smartfón v roli speakera a využiť ho ako diaľkový ovládač. Na displeji máte k dispozícii:
- Ovládacie tlačidlá pre posun vpred, vzad, hore a dole, posuny sa prejavia aj na zariadeniach vašich divákov.
- Možnosť presunu na ľubovoľný slajd cez overview panel.
- Sekciu speaker view, zobrazujúcu vám vaše súkromné poznámky k aktuálne zobrazenému slajdu spolu s údajmi o uplynutom čase (nič z toho sa nezobrazí vášmu publiku).
- Informáciu o počte pripojených divákov.
- Možnosť využiť pre pohyb po slajdoch okrem tlačidiel aj dotykové gestá.
Samozrejmosťou sú v prípade slides.com aj rôzne možnosti zverejnenia vašich prezentácií či spolupráce pri ich tvorbe. Okrem toho ich môžete tiež stiahnuť ako PDF, HTML alebo ich umiestniť na svoj web.
Prezentácia v HTML súbore
Táto možnosť je o niečo jednoduchšia, funguje plne offline, daňou za čo je chýbajúca funkcionalita diaľkového ovládania a zdieľania.
- Stiahnite si aktuálnu distribúciu Reveal JS.
- Rozbaľte stiahnutý .zip súbor a otvorte ukážkový index.html v poznámkovom bloku, upravte obsah podľa vlastných predstáv.
- Otvorte súbor vo webovom prehliadači.
Pri použití šablóny sa môžete inšpirovať ukážkami v priečinku examples. Pokiaľ však neovládate HTML a chcete skrátka funkčné riešenie, môžete použiť napríklad nasledovný vzor (markdown obsah si upravte podľa vlastných predstáv, 3 pomlčky oddelené prázdnymi riadkami označujú ďalší horizontálny slide, dve pomlčky vertikálny).
<!doctype html>
<html lang="sk">
<head>
<meta charset="utf-8">
<title>Ukážková prezentácia</title>
<link rel="stylesheet" href="../dist/reveal.css">
<link rel="stylesheet" href="../dist/theme/white.css" id="theme">
<link rel="stylesheet" href="../plugin/highlight/monokai.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-markdown data-separator-vertical="^\r?\n--\r?\n$">
<script type="text/template">
## Ukážková prezentácia
autor: Rastislav Kish
---
## Reveal JS
Je prezentačný framework s množstvom skvelých funkcií.
--
Sem by mohol ísť obrázok
---
## Ďakujem za pozornosť
</script>
</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/math/math.js"></script>
<script>
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, RevealMath.KaTeX ]
});
</script>
</body>
</html>
Vlastný server
Toto riešenie je určené pre pokročilejších používateľov. Pokiaľ máte vlastný webhosting, viete naň svoju prezentáciu umiestniť a sprístupniť ju tak komukoľvek, kto bude mať relevantné URL. GitHub repozitár obsahuje webserver, ktorý vám prezentáciu vie hostovať aj na vašom vlastnom zariadení, pokiaľ ste dostatočne technicky zdatný a nemáte problém obsluhovať npm či yarn.
Okomentujte ako prví