Minimalistické prezentace s Markdown

30. 4. 2013 | David Kolibáč | Tipy a triky | Návody | 14207×

Ohledně tvorby prezentací je de facto průmyslovým standardem MS PowerPoint, resp. tu a tam se objeví alternativa z jiného kancelářského balíku, tedy OpenOffice.org/LibreOffice Impress nebo Keynote (součást Apple iWork). Tyto aplikace jsou ovšem poměrně těžkopádné a příslušné datové formáty často trpí v oblasti přenositelnosti. Existuje alternativa? Určitě ano, v tomto článku se podíváme na některé šablony, které používají standardní webové technologie, a tak si při prezentování vystačíme s textovým editorem a moderním webovým prohlížečem.

Úvod

Kancelářské balíky zpravidla používají pro ukládání svůj nativní formát, ať už je to ODF, OpenXML nebo třeba starší skupina binárních formátů MS Office. Jejich zásadní nevýhodou, se kterou se pravděpodobně setkal skoro každý, je nekompatibilita nejen mezi aplikacemi různých dodavatelů, ale i mezi různými verzemi téže aplikace. Je to tím, že tyto formáty jsou velmi komplexní a aplikace se snaží poskytovat WYSIWYG tvorbu dokumentů, přičemž v souborech postupnými editacemi zůstává různý balast. Když se chceme vyhnout problémům s kompatibilitou, obvykle výsledek snažení exportujeme do PDF, které jde zobrazit na téměř libovolném osobním počítači. Jenže pak zase nastává problém s editací takového souboru.

Když člověk chce mít absolutní kontrolu nad tím, jak bude prezentace vypadat, použije latexový Beamer nebo si prezentaci rovnou “naprogramuje” v QML, JavaScriptu nebo třeba Pythonu (typicky s použitím SDL). To zase není pro každého…

Naštěstí existuje jednoduché řešení, a sice některá minimalistická šablona v HTML, která používá CSS a JavaScript k tomu, aby obyčejnou webovou stránku proměnila v klasické “slajdy”. Nebudeme ale editovat přímo HTML, ačkoliv i to je možné, nýbrž využijeme jednoduchý značkovací jazyk Markdown, resp. jeho implementaci (a rozšíření) pandoc, o němž jsem se zmiňoval v dřívějším článku.

Od prostého textu k prezentaci

Ukažme si tedy jednoduchý text (uvažujme, že je v souboru prezentace.txt), který následně proměníme v prezentaci:

% Lokalizace (svobodného) softwaru
% David Kolibáč
% 30. dubna 2013

# i18n, l10n

> * systémy psaní
> * překlady
> * kulturní zvyklosti
> * typografie

----

# GNU gettext

1. `printf(_("About application %s.\n"), app_name);`
2. `xgettext --keyword=_ derp.c -o derp.pot`
3. `derp.po`

~~~~~~~
#: src/derp.c:42
msgid "About application %s.\n"
msgstr "O aplikaci %s.\n"
~~~~~~~

4. `msgfmt derp.po -o derp.mo`

----

# otázky?

Syntaxi zde nebudu rozebírat, jednak jsem základy naznačil ve výše odkazovaném starším článku, jednak je rozebraná v dokumentaci. Za zmínku stojí několik drobností specifických pro prezentace:

• První tři řádky uvozené znakem procento (%) tvoří hlavičku, zobrazí se na úvodním slajdu a v metadatech dokumentu.
• Slajdy se oddělují pomocí horizontalní čáry nebo nadpisů určité úrovně (jde to nastavit, ale zde uvažujeme nejvyšší úroveň).
• Odrážky uvozené menšítkem (>) se při přechodu na danou stránku prezentace zobrazí postupně, nikoliv zároveň — nebo právě naopak (pokud se použije přepínač -i).

Nyní si uvedený zdrojový soubor přeložíme do prezentace, která už bude vypadat… jako prezentace:

pandoc -i -t dzslides -s prezentace.txt -o presentace.html

Na první pohled je vidět, že -s prezentace.txt označuje vstupní soubor a -o presentace.html soubor výstupní. Význam přepínače -i jsem zmínil výše, slouží k tomu, aby se položky seznamů zobrazovaly postupně. Přepínač -t, resp. slovo za ním následující určuje použitý výstupní formát, v tomto případě použitou šablonu — dostupné šablony jsou:

S5 (s5)

populární šablona původně od Erica Meyera, která existuje ve velkém množství různých variant a rozšíření

Slidy (slidy)

velmi prostě vypadající šablona z dílny W3C

Slideous (slideous)

další šablona, evolučně navazující na předchozí dvě

DZSlides (dzslides)

minimalistická novinka využívající možností HTML5, proto nemusí fungovat ve starších prohlížečích; dá se snadno např. vložit do webových stránek

Beamer (beamer)

prezentace v LaTeXu, vyžaduje následný export do PDF/PS, tento formát je mimo rámec tohoto článku

Další užitečný parametr je --self-contained, který zajistí, že všechno, co je pro spuštění prezentace v prohlížeči třeba, bude zahrnuto v jediném souboru — od samotné prezentace přes javascript a stylopis až po obrázky.

Pokud náhodou nemáte na počítači k dispozici pandoc, není všem dnům konec. Prezentaci můžete vytvořit jako stránku ve wiki gitit a exportovat ji do kýženého formátu. Tento CMS mimochodem mohu jen a jen doporučit — krom toho, že používá pandoc, má ještě jednu zajímavou vlastnost, data jsou totiž uchovávána v klasickém gitovém repozitáři a můžete s nimi podle toho nakládat.

Kterou šablonu zvolit?

Všechny čtyři šablony mají společné to, že se ovládají pomocí kurzorových kláves a vypadají podobně jednoduše. Pokud chcete vychytávky jako obsah prezentace nebo číslování stránek, sáhněte po některé z prvních tří. DZSlides se také vyhněte, pokud vám hrozí riziko nekompatibility prohlížeče s novinkami v HTML5.

Osobně jsem Slideous snad nikdy doopravdy nezprovoznil a nevyhovuje mi výchozí ovládání a vzhled S5, tudíž se omezuji na čisté Slidy — nebo v poslední době DZSlides. Na nich se mi zamlouvá to, že kaskádové styly jsou přímo v souboru s prezentací, proto je úprava vzhledu triviální, není třeba upravovat šablonu. Výchozí šablony mimochodem najdete v adresáři jako např. /usr/share/pandoc-1.9.1.1/ v mém případě.

       

Komentáře

[Boris Dušek]

součást Apple iWorks

iWork, nikoliv iWorks

[Luboš Doležel (Doli)]

Opraveno.

[rastakajakwanna]

Osobně jsem nakonec objevil jako nejjednodušší implementaci Opery (Opera Show Format) a tu následně používal pro prezentaci stránek s dokumenty.

[rastakajakwanna]

Pohrával jsem si ovšem i se Slidy2, který taky v (nejen?) Opeře funguje dobře.

[rastakajakwanna]

A uniklo mi, že byl zmíněný v článku :D Každopádně by to mohl být hezký seriál, je to v plánu?

[ʚĭɞ 🍉]

Ne. V plánu mám akorát něco o gitit a příp. stylování šablon. Ale nikdo ti o tom nebrání napsat. ~_^

[belisarivs]

Ma tohle nejaku vyhodu proti latex-beameru?

[ʚĭɞ 🍉]

Jo, nefiguruje tam LaTeX. ^.^

[xkucf03]

s/vyhodu/nevýhodu/g
s/nefiguruje/nefunguje/g

[ʚĭɞ 🍉]

wat?

[IGD]

wat sa nepíše s otáznikom.

[ʚĭɞ 🍉]

O'RLY

[UDG]

Jéééé, ty jsi frajer!! Taková znalost kultury!! Ten PŘEHLED!! /s

[little.owl]

Vy zase vemte na vedomi, ze "wat" se pouziva v nekolika kontextech a vyznamech a muze se psat s otaznikem.

[UDG]

Proč bych já měl brát něco na vědomí - bavil jsem se snad o něčem takovém? Žádné "wat" jsem nikde nezmiňoval, vyčisti si brejle, agresore.

[pavlix]

Troll alert.

[UDG]

Dík, myslel jsem si, že je,

[JS]

wy?

[twat]

twat?

[little.owl]

Ano. Neni to psane v latex.

[Milan Vančura]

Díky za zajímavý článek. Putuje do záložek.

[jurasn]

"Když člověk chce mít absolutní kontrolu nad tím, jak bude prezentace vypadat, použije latexový Beamer"

Nevím, jak ostatní uživatelé, ale já používám Beamer právě proto, že nemusím řešit, jak má daná prezentace vypadat, jelikož Beamer to na ty slidy naskládá víceméně automaticky tak, aby to nějako rozumě vypadalo.

[ʚĭɞ 🍉]

To udělá i to popsané v článku, rozdíl je v preciznosti sazby.

[petr_p]

Bohužel moje zkušenosti jsou špatné. Všechny exporty do HTML trpí tím, že různé prohlížeče s různou velikosti pixelů a různými fonty vykreslí text různě velký a s rastrovou grafiku se občas nevejdou do viewportu prohlížeče. Tohle se s výstupem do PDF, které má předem daný rozměr nestane.

[ʚĭɞ 🍉]

různé prohlížeče s různou velikosti pixelů a různými fonty vykreslí text různě velký a s rastrovou grafiku se občas nevejdou do viewportu prohlížeče

Což je vlastnost. Např. Slidy v tom případě zobrazí posuvník. Kéž by to platilo také u PDF, kde ale bohužel přetékající obsah prostě není vidět.

Skutečný problém je ovšem někde úplně jinde, a to v lidech, kteří tlačí příliš mnoho obsahu na jeden slajd. Tu a tam to může mít smysl, nicméně v drtivé většině případů, co jsem měl možnost vidět, se jedná o zásadní chybu.

[MaT]

Dají se v takových prezentacích nějak využít i obrázky? Jak moc složité je jejich vkládání? Jak pak takovou prezentaci někam přenést (když to nebude v jednom souboru)?

Něco tak zásadního mi v článku celkem chybí. Já vím, v titulku je "minimalistické", ale myslím, že asi nebudu jediný, kdo v prezentaci občas nějaký ten obrázek potřebuje...

[ʚĭɞ 🍉]

Dají, stačí použít ![popisek](adresa/někam.png), což se převede na obrázek (cesta může být jak absolutní, tak relativní, resp. v případě --self-contained se obrázek zahrne přímo do souboru — to je v článku mimochodem zmíněno) a případně i textový popisek pod ním, pokud je vyplněný. Ono je to ostatně zřejmé (nepozorné čtení v 1:14 však vyčítat nebudu ^.^), když jde použít prakticky cokoliv z Markdownu, potažmo jeho rozšíření.

[MaT]

Fajn, tohle jsem potřeboval vědět a v článku to nebylo. Já ho četl, i ten odstavec o parametru self-contained, ale právě zajímalo mě, jak složitě se s obrázky pracuje. Předchozí článek o Markdown jsem nečetl (zatím , tak právě abych věděl, jestli se o to mám zajímat dál...

[alblaho]

Já jsem si docela oblíbil, Reveal.js.

http://www.root.cz/clanky/reveal-js-efektni-prezentace-pomoci-html/

Dřív jsem docela spokojeně používal Impress, zkoušel jsem Beamer, ale nelíbily se mi šablony (sterilní) a s tvorbou vlastní se mi v TeXu nechtělo štvát.

Na Reveal.js se mi líbí, že graficky působí elegantně. Pro použití v češtině jsem musel trochu hacknout fonty.

[jiřík]

Zajímavý, díky. Jen tak do budoucna, co je myšlený hackem fontů?