Prezentácie expresne pomocou Slidy
Potrebujeme rýchlo spraviť prezentáciu, ale nechceme použiť klasické prezentačné nástroje alebo Beamer?
A čo takto použiť webový prehliadač?
Use case
Keď som potreboval spraviť tri prezentácie na konferenciu OSSConf 2024, vedel som, že použitie „klasických“ prezentačných nástrojov ako Libre(Open)Office Impress, Canva, či nebodaj PowerPoint ma bude iritovať. Jednak sa mi nechcelo klikať a poziciovať text a obrázky myšou, iné nástroje majú nepeknú licenciu alebo bežia niekde v zákutiach internetu.
Pritom som vedel, že nepotrebujem „fancy“ efekty, zložité umiestnenia obrázkov,…
Uvažoval som nad Beamer-om, ale nakoniec som si povedal, že skúsim niečo nové.
Nakoniec som zvolil Slidy.
Slidy
…je jednoduchý a ľahko použiteľný framework v (ako napovedá názov) javascripte na vytváranie prezentácií. Umožňuje prezentovať obsah vo forme slajdov priamo v internetovom prehliadači. Len ešte dodám, že nie je jediným nástrojom, existujú i Reveal.js, Impress.js, Slidev…
Hlavné výhody Slidy:
- Jednoduchosť vytvárania: stačí html (alebo ako si ukážeme neskôr Markdown) + stiahnutá šablóna v javascripte. Dá sa teda vytvoriť v ľubovoľnom textovom editore.
- Prezentácia funguje všade a prispôsobuje sa, vďaka prehliadaču, kdejakým zariadeniam.
- Umožňuje navigáciu pomocou klávesnice.
Priamo autori tento nástroj interaktívne prezentujú na svojom webe a táto prezentácia slúži aj ako manuál.
V princípe je to takto:
- prezentácia je jeden
htmlsúbor, v hlavičke ktorého sú prilinkované dva súbory:CSSstylesheet súbor s dizajnom ajssúbor - samotný skript (ale nie je potrebné ovládať jeho programovanie);
- tento
htmlsúbor len otvoríme v prehliadači, ktorý podporuje, alebo v ňom nie sú zakázané, javascripty.
Samotná šablóna sa dá stiahnuť na tomto linku, alebo aj pohľadať niekde na webe.
Pandoc
No, pravdupovediac, javascript neovládam, weby nerobím, hoci pár html príkazov poznám. CSS dokážem modifikovať a prispôsobiť si ho.
A tu prichádza na scénu (🎺🎺🎺) famózny mocný a známy nástroj: pandoc. Ten dokáže konvertovať značkovací jazyk Markdown (a iné) do html tak, že tam pridá i potrebné príkazy pre Slidy. Dokumentácia je pomerne strohá, ale použiteľná.
Zrejme každý vie, čo je Markdown - je to jednoduchý značkovací jazyk, ktorý umožňuje formátovať text pomocou jednoduchých symbolov. Napríklad tučný text zadáme takto **tučný text** atď., viac napovie napríklad známy LearnXinYminutes. Len dodám, že umožňuje vkladanie priamo html príkazov tam, kde formátovacie alebo iné možnosti markdown-u nestačia.
Ako na to?
Bez omáčok a príkras opíšem, ako som to robil ja, a je to asi nejaké funkčné minimum. Čarodejníci 🧙 v JS určite dokážu spraviť veci, ktoré by žiadny prezentačný program nedokázal.
Vytvoríme si niekoľko súborov:
prezentacia.md, t.j. súbor v Markdown-e,Makefile, na zautomatizovanie použitia pandoc-u a spustenie prehliadača a- adresár
obrazky, v ktorom budeme mať pár testovacích obrázkov. Teda jeden. Stačí.
No a samozrejme spomínaný Slidy. Ten je uložený v podadresári s identickým názvom.
U mňa konkrétne je to takto:
├── Makefile
├── prezentacia.md
├── obrazky/
└── slidy/
├── scripts/
└── styles/
Súbor Makefile
Je jednoduchý a „odbijeme“ ho pár riadkami:
dokument = prezentacia.md all: pandoc -t html --mathml -s -t slidy -V slidy-url=slidy -o out.html $(dokument) firefox --kiosk out.html
Makefile používam (namiesto bežného skriptu) preto, lebo sa dá volať (predvolene) príkazom make z akéhokoľvek IDE, a aj to zväčša len klávesovou skratkou.
Súbor prezentacia.md
Hlavička dokumentu
…musí obsahovať tieto položky - teda najmä output: slidy_presentation, čo je informácia pre spomínaný pandoc:
--- title: Testovacia SLIDY prezentácia author: Richard date: 08. 09. 2024 output: slidy_presentation ---
Slajdy, text, formátovanie…
Oplatí sa prečítať si niečo o Markdown-e, alebo si pozrieť nejaké krátke video. Je to skutočne (až neskutočne) jednoduché, priamočiare. Príklad napovie:
# Nadpis prvej úrovne = nadpis slajdu / nový slajd <link href="./slidy/styles/theme.css" rel="stylesheet"> ## Nadpis druhej úrovne A vložený text, napríklad *kurzívou*, **tučný**. ### Nadpis tretej úrovne A čo takto odrážky: - odr. 1 - odr. 2 - odr. 3
Je tu zaujímavý bug. Odkaz na vlastný CSS súbor musí byť v až za uvedením prvej snímky (#), inak sa do výslednej prezentácie vloží prázdna snímka.
Vloženie obrázku je jednoduché, pomocou syntaxe markdown, alebo html. Html má výhodu, že s obrázkom môžeme robiť ďalšie operácie, ako napr. zmena veľkosti:
# Vložíme si obrázok #1 Pomocou *Markdown-u*, centrovanie pomocou *html* <center>  </center> # Vložíme si obrázok #2 Ale ide to aj samozrejme pomocou čistého *html* <center> <img src="./obrazky/m-logo.png" alt="logo" width="300"/> </center>
Ako vidíme, dajú sa slobodne kombinovať oba prístupy. Nielen pri vkladaní obrázkov, ale tiež hyperlinkov, medzier (<br>), a i.
Tabuľky sa „kreslia“ pomocou ASCII znakov. Isteže v nejakom GNU Nano, alebo mcedit to bude náročné. Ale lepšie IDE s podporou Markdown-u to určite zvláda automatizovane.
# Jednoduchá tabuľka
| A | B | C |
|-----------------:|:------|:--------:|
| zarovnaná vpravo | vľavo | na stred |
### Vložená ako *verbatim* text
Napríklad pre výpis kódu a pod.
| A | B | C |
|-----------------:|:------|:--------:|
| zarovnaná vpravo | vľavo | na stred |
⇤ Tu sú vložené štyri medzery, alebo aj <TAB>, závisí od
obľúbeného editora.
Hádam by aj stačilo!
Z ukážok je zrejmé, že tvorba prezentácie je extrémne rýchla. Jej vzhľad závisí od CSS súboru, ale keď si ten raz vytvoríme (stiahneme/ukradneme/…), tak už len píšeme text, pomerne rýchlym spôsobom.
Žiadne posúvanie myšou, klikanie,…
Áno, aj prezentačné nástroje majú šablóny a štýly. Ale užívateľ preferujúci klávesnicu „prevráti oči 🙄“ už pri prvom nepodarenom pokuse posunúť text na požadované miesto 😉.
Pre koho je to teda určené?
Aj keď sa dajú klasické vruty do dreva umiestňovať aj kladivom, predsa je len aku-skrutkovač vhodnejší ☺. Vhodný nástroj je α - ω každej práce.
Slidy je vhodný ak:
- máme prezentáciu, v ktorej je prevažne text a jednoducho umiestnené obrázky;
- máme vhodný editor pre Markdown (čitateľom nemusím hovoriť, ktorý je najlepší), ktorý vizuálne formátuje rich-text a html značky, pomáha s tabuľkami,…
- kamarátime sa viac s klávesnicu ako s myšou;
- prezentácia nie je postavená na efektoch viac ako na obsahu 😃;
- chceme prezentáciu umiestniť na web,
- chceme sa naučiť alebo si skúsiť niečo nové, iné.
Naopak, nie je vhodný ak:
- potrebujeme presne umiestniť viacero obrázkov, prekrývať ich a pod.;
- a nebodaj k nim dať nejaké odkazové čiary, šípky,…
- nechce sa nám učiť nič nové a nechceme si upravovať CSS;
- máme radi situáciu, keď sa prezentácia „rozsype“ na prednáške na inom počítači, kvôli inej verzii programu alebo chýbajúcim fontom 😉;
- ak nás šéf/učiteľ/manžel(ka) núti používať konkrétny program.
Spomínané prezentácie je možné si pozrieť na https://famme.sk/ossconf-2024/.
A táto „demo“ prezentácia je priložená k blogu.
Samozrejme, ideálna situácia je, ak nemusíme robiť (pracovné) prezentácie vôbec ☺.
Prílohy
- prezentacia.zip (246.0 kB)
Pre pridávanie komentárov sa musíte prihlásiť.