Rýchle slajdy s backslide a remark.js

2019/08/29

Patláme slajdy

Treba rýchlo slajdy? PowerPoint je neohrabaný? Beamer je zložitý? A prečo vlastne nepíšeme slajdy v jednoduchom Markdowne? A prečo ich nezobrazujeme v bežnom webovom prehliadači?

Budeme potrebovať:

Zdrojový kód

Ukážkové slajdy v Markdowne vyzerá napríklad nasledovne:

title: httpd a Tomcat – loadbalancing a ladenie výkonu
class: animation-fade
layout: true
---
# Forward Proxy

- browser si nastaví proxy v prehliadači.
- vysvetlí, že aký server chce navštíviť
- proxy načíta obsah a prepošle ju klientovi
- v Apachovi cez moduly:
	- proxy
	- proxy_http
	- proxy_connect
---
# reverse proxy (gateway)

- klient nakontaktuje server
- ten je v skutočnosti reverse proxy
- server/reverse-proxy nakontaktuje aplikačné servery
	- získa obsah
	- schrústa
	- pošle klientovi

Prevod Markdownu na HTML cez Remark

Knižnica remark dokáže priamo v prehliadači prevádzať markdownový zdroják na HTML. Teda, vytvorí sa jeden HTML súbor obsahujúci knižnicu remark a trochu boilerplatu. Do súboru sa zároveň vrazí markdownovský zdroják, a prehliadač v kombinácii s touto knižnicou automaticky prevedie markdownovské slajdy na nádherné HTML.

HTML súbor nie je ktoviečo. Veď pozrime si ukážku.

To je dôvod, prečo vznikol backslide.

Alebo lepší prevod cez backslide

Backslide je nástroj pre príkazový riadok implementovaný v JavaScripte/Node.js. Ponúka:

Inštalácia backslide

Node.js je nutnosťou, takže je nutné ho nainštalovať.

Okrem toho inštalujme samotný nástroj:

npm install -g backslide

V ceste sa objaví príkaz bs.

Inicializácia prezentácie

Novú prezentáciu založme cez

bs init

Zjaví sa:

Export do HTML

Export do HTML je jednoduchý:

bs export

Vznikne adresár dist, kde sa objaví krásna prezentácia, ktorú si môžeme otvoriť v prehliadači alebo uložiť na disketu.

image-20190829181510604

Klávesové skratky

V prezentácii fungujú šípky doľava a doprava, na mobile funguje swipeovanie prstom

Zabudovaný HTTP server

bs ponúka zabudovaný server s automatický reloadovaním prezentácie v prehliadači!

bs serve

Príkaz spraví:

Export do PDF

Slajdy možno exportovať do PDF:

bs pdf

Backslide použije interný prevod cez Chromium a HTML zapíše do PDF. Nie je to dokonalé, ale účel to splní.

Tipy, triky a štýly

Štýly

Štýly sa riadia súborom template/style.scss, ktorý je vo formáte https://sass-lang.com/. Prepisovaním súboru môžeme meniť:

Nastavenia slajdov

Úvodný slajd

Úvodný slajd prezentácie má zabudovaný štýl impact:

class: impact
# O myši a sove

Použitia premenných

Premenné zo slajdov sú k dispozícii v moustachovskej syntaxi:

# {{title}}

V tomto prípade nájde atribút title nastavený v slajdoch a použije ho v nadpise.

Vlastné spany

V prezentácii môžeme používať vlastné span-y so štýlmi. Na to je extra syntax:

.bottom-bar[Krásna prezentácia]

Vytvorí sa span s CSS triedou bottom-bar a keďže tento štýl je automaticky k dispozícii, máme rovno spodok slajdu s pekným textom!

Slajd-šablóna

Každý slajd môže slúžiť ako šablóna pre ostatné slajdy.

Stačí dodať atribút layout: true ako atribút.

class: animation-fade
layout: true

.bottom-bar[
  {{title}}
]

Všetky nasledovné slajdy:

Sumár vlastností slajdov

Dokumentácia k remarku uvádza zoznam vlastností slajdu.

>> Home