Vypadá to, že jsem během své kariéry v IT připravil desítky prezentací pro kolegy, zákazníky a veřejná vystoupení. Po mnoho let byl PowerPoint pro mě přirozenou a spolehlivou volbou pro vytváření slidů. Ale letos se situace zásadně změnila. Od února do května jsem se zúčastnil pěti konferencí, a slidy k prezentacím jsem musel připravit v krátkých časových termínech, ale kvalitně. Řešil jsem otázku delegování části práce, co se týče vizuálního designu slidů, na jiné lidi. Jednou jsem se pokusil spolupracovat s designérem, když jsem zasílal soubory .pptx e-mailem, ale práce se proměnila v chaos: nikdo nevěděl, která verze slidů je „nejnovější“, a rozvržení se „narušovalo“ kvůli rozdílům v verzích PowerPointu a písmenech na našich počítačích. A tak jsem se rozhodl vyzkoušet něco nového. Vyzkoušel jsem, a od té doby už nepřemýšlím o návratu k PowerPointu.
Co chceme
Před půldruhým rokem jsme ve firmě přestali používat Word pro vytváření projektové dokumentace, potýkaje se se stejnými problémy: ačkoliv je Word dobrý pro napsání menšího dokumentu, s rostoucím objemem dochází k potížím se spoluprací a dosažením kvalitního a sjednoceného formátu. Naší volbou bylo , a této volby nelitujeme, ale to je téma na jiný článek. Zhruba v té době jsme také pochopili efektivitu jednoho z DevOps principů „všechno jako kód“, takže výběr požadavků pro novou technologii vytváření prezentací byl docela zřejmý:
- Prezentace by měla být plain textový soubor ve značkovacím jazyce.
- Slidy máme o projektech vývoje, proto značení by mělo umožnit snadno, bez pomoci externích systémů, vložit
- úryvky kódu s zvýrazněním syntaktických prvků,
- jednoduché diagramy ve formě geometrických tvarů spojených šipkami,
- UML diagramy, blokové schémata a další.
- Projekt prezentace by měl být uložen v systému pro správu verzí.
- Validace a sestavení hotových slidů by mělo probíhat v CI systému.
Dnes jsou možné dva základní způsoby vytváření slidů v značkovacích jazycích: balíček pro LaTeX, nebo jeden z rámců pro vytváření slidů na HTML/CSS (, , a mnoho dalších).
Ačkoli moje srdce tíhne k LaTeXu, rozum mi radil, že volba řešení, kterým nebudu používat jen já, by měla být na straně řešení, které je známější širšímu okruhu lidí. LaTeX nezná každý, a pokud není vaše každodenní praxe spojená se psaním vědeckých článků, pravděpodobně nebudete mít čas na ponoření do obrovského a složitého světa tohoto systému.
Nicméně, znalost HTML/CSS není zrovna běžnou dovedností: já osobně ji ovládám daleko neúplně. Naštěstí, na pomoc přichází již známý AsciiDoctor: konvertor, který umožňuje vytvářet RevealJS snímky pomocí AsciiDoctor markupu. A ten je skutečně jednoduchý k naučení a dostupný každému!
Jak kódovat snímky
Abychom pochopili podstatu kódování snímků v AsciiDoctoru, je nejjednodušší uvést konkrétní příklady. Všechny jsou z reálných snímků, které jsem vytvořil pro své konferenční prezentace v tomto roce.
Snímek s nadpisem a seznamem, který se rozvíjí bod po bodu:
== Proč potřebujeme Streams API?
[%step]
* Zpracování streamu v reálném čase
* API podobné streamům (map / reduce)
* Pod kapotou:
** Automatická správa offsetu
** Znovu vyvažování
** Vnitřní stav zpracovatelů
** Snadné škálováníVýsledek
Nadpis a úryvek zdrojového kódu se zvýrazněním syntaxe:
== Kafka Streams API: obecná struktura KStreams aplikace
[source,java]
----
StreamsConfig config = ...;
// Zde nastavujeme různé možnosti
Topology topology = new StreamsBuilder()
// Zde budujeme topologii
....build();
----Výsledek
Během přípravy na prezentaci procházejí demonstrační příklady kódu opakovanými úpravami a vylepšeními, proto je neocenitelné mít možnost rychle zkopírovat a vložit "syrový kód" přímo do snímku, čímž zajistíme aktuálnost demo příkladu a nemusíme se starat o zvýrazňování syntaxe.
Nadpis, ilustrace a text (rozložení na snímku provádíme v buňkách ):
== Kafka Streams in Action
[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
“Kafka Streams in Action”, listopad 2018
* Příklady kódu pro Kafka 1.0
|===Výsledek
Někdy není potřeba nadpis, a pro ilustraci vaší myšlenky stačí prostě obrázek na celou obrazovku:
[%notitle]
== Žít v legacích není snadné
image::swampman.jpg[canvas, size=cover]Výsledek
Často je třeba myšlenku podpořit jednoduchou diagramem, ve formě „čtverců spojených šipkami“. Naštěstí je AsciiDoctor integrován se systémem — jazyk, který umožňuje popis grafových diagramů na základě popisu vrcholů a vazeb mezi nimi. Graphviz se musíte naučit, ale na základě dostupných příkladů to jde docela snadno! Takhle to vypadá:
== Píšeme „Bet Totalling App“
Jaká je suma výplat podle učiněných sázek, pokud nastane výsledek?
[graphviz, "counting-topology.png"]
-----
digraph G {
graph [ dpi = 150 ];
rankdir="LR";
node [fontsize=18; shape="circle"; fixedsize="true"; width="1.1"];
Store [shape="cylinder"; label="Místní obchod"; fixedsize="true"; width="1.5"]
Source -> MapVal -> Sum -> Sink
Sum -> Store [dir=both; label=" n "]
{rank = same; Store; Sum;}
}
-----Výsledek
V případě, že potřebujete upravit popis na obrázku, změnit směr šipky atd., to lze udělat přímo v kódu prezentace, místo abyste museli znovu kreslit obrázek a znovu ho vkládat na snímek. To výrazně zvyšuje rychlost práce na snímcích.
Příklad složitější:
== Neopakovatelné sestavení
[graphviz, "unstable-update.png"]
-----
digraph G {
rankdir="LR";
graph [ dpi = 150 ];
u -> r0;
u[shape=plaintext; label="linter updaten+ 13 warnings"]
r0[shape=point, width = 0]
r1 -> r0[ arrowhead = none, label="master branch" ];
r0-> r2 []; b1 -> b4; r1->b1
r1[label="150nwarnings"]
b1[label="± 0nwarnings"]
b4[label="± 0nwarnings"]
b4->r2
r2[label="163nwarnings", color="red", xlabel=<merge blocked>]
{rank = same; u; r0; b4;}
}
-----Výsledek
Mimochodem, experimentovat s Graphvizem a ladit obrázky je pohodlné na stránce .
Nakonec, pokud potřebujete vložit do snímku blokovou schéma, diagram tříd nebo jiný standardizovaný diagram, může vám pomoci další integrovaný systém s AsciiDoctor, . O rozsáhlých možnostech PlantUML napsal můj kolega Nikolaj Potashnikov .
Převod projektu prezentace na kód, který se uchovává v systému správy verzí, umožňuje organizovat společnou práci na prezentaci, především rozdělení úkolů tvorby obsahu a designu. Design snímků (písma, pozadí, odstavce) v RevealJS se popisuje pomocí CSS. Můj osobní umění pracovat s CSS nejlépe přenáší — ale to není nic hrozného, když jsou lidé, kteří umějí pracovat s CSS mnohem dovedněji a rychleji než já. Nakonec tedy získáváme, že v podmínkách rychle se blížícího termínu prezentace můžeme společně pracovat na různých souborech prostřednictvím Git a zvyšovat rychlost spolupráce, která by byla nemožná při posílání souborů .pptx e-mailem.
Sestavení HTML stránky se snímky
Kódové zdroje jsou skvělé, ale jak je zkompilovat do samotné prezentace?
AsciiDoctor je projekt napsaný v Ruby, který lze spustit několika způsoby. Nejprve můžete nainstalovat jazyk Ruby a spustit asciidoctor přímo, což bude pravděpodobně nejblíže Ruby vývojářům.
Pokud se nechcete zabývat instalací Ruby, můžete využít docker obraz , který při spuštění umožňuje připojit pomocí VOLUME složku se zdrojovými kódy projektu a na určeném místě získat výsledek.
Varianta, na které jsem se zastavil, se může zdát poněkud neobvyklá, ale je pro mě jako Java vývojáře nejpohodlnější. Nevyžaduje instalaci Ruby ani přítomnost dockeru, ale umožňuje generovat snímky pomocí Maven skriptu.
Je to tím, že projekt — Java implementace jazyka Ruby — je natolik dobrý, že umožňuje spouštět v Java virtuální mašině prakticky vše, co bylo vytvořeno pro Ruby, a spuštění AsciiDoctoru je jednou z nejčastějších aplikací JRuby.
Přítomnost umožňuje sestavit dokumentaci AsciiDoctor, která je součástí Java projektu (což aktivně využíváme). AsciiDoctor a JRuby jsou stahovány Mavenem automaticky a AsciiDoctor se vykonává v prostředí JRuby: nic není třeba instalovat na stroj! (Kromě balíčku graphviz, který je potřeba, pokud chcete používat grafiku GraphViz nebo PlantUML.) Stačí umístit vaše .adoc soubory do složky src/main/asciidoc/. Tady , které vytváří snímky s diagramy.
Konverze snímků do PDF
Ačkoli je HTML verze snímků zcela samostatná, mít PDF variantu snímků je také někdy nezbytné. V první řadě se stává, že na některých konferencích, které neposkytují řečníkovi možnost připojení vlastního laptopu, požadují snímky 'přísně ve formátu pptx nebo pdf', nečekajíce, že mohou být také v HTML. Za druhé je dobrým tónem poslat organizátorům neměnnou variantu vašich snímků, jak byly ukázány během přednášky, ve formátu PDF pro publikaci souboru v materiálech konference.
Naštěstí si s tímto úkolem hravě poradí Node.js utilita , postavená na bázi — systému automatizace ovládání prohlížeče Chrome. Konvertovat prezentaci RevealJS do PDF lze příkazem
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Dva triky při spuštění decktape, ke kterým jsem dospěl metodou pokusů a omylů:
rozlišení přes parametr
-sJe třeba stanovit s dvojnásobnou rezervou, jinak mohou nastat problémy s výsledky převodu.V URL HTML verze prezentace je nutné předat parametr.
?fragments=true, což umožní vytvořit samostatnou PDF stránku pro každý mezistav vašeho snímku (například pět stránek pro pět položek seznamu, pokud se zobrazují jedna po druhé). To umožní použít takový PDF samostatně jako prezentaci během přednášky.
Automatická sestava a publikace na webu.
Je užitečné, když se snímky automaticky shromažďují při provádění změn v systému správy verzí, a ještě užitečnější je, když automaticky vytvořené snímky jsou publikovány na internetu pro veřejné použití. Snímky z internetu lze snadno "přehrát" před publikem z jakéhokoli zařízení připojeného k internetu a projektoru.
Jelikož v práci používáme GitHub, je přirozenou volbou CI systém , a pro hosting hotových prezentací — . Myšlenka github.io spočívá v tom, že jakýkoli statický obsah umístěný do větve gh-pages vašeho projektu na GitHubu se stává dostupným na adrese .gihub.io/.
Úplný konfigurační soubor TravisCI, který zahrnuje kompilaci HTML verze stránky pomocí Maven, převod do PDF pomocí decktape a nahrání výsledků do větve gh-pages pro publikaci na github.io, vypadá .
Pro sestavení takového projektu na straně TravisCI je nutné nastavit proměnné prostředí
GH_REF— hodnota ve formátu github.com/inponomarev/csa-hbGH_TOKEN— přístupový token pro GitHub. Lze získat v GitHubu v nastavení svého profilu, Developer Settings -> Personal Access Tokens. Pokud publikujete prezentaci v veřejném repozitáři, stačí pro tento token uvést jedinou úroveň přístupu „Access public repositories“.GH_USER_EMAIL/GH_USER_NAME— pár jméno/emailem, pod nímž bude proveden push do větve.gh-pages.
Takže každá změna kódu prezentace na GitHubu vede k automatickému přepracování snímků ve formátech HTML a PDF a jejich opětovnému nahrání na github.io. (Samozřejmě, že na github.io by měly být publikovány pouze ty prezentace, které chcete nakonec zpřístupnit veřejnosti.)
Příklady projektů
Nakonec – odkazy na několik příkladů projektů prezentací s nastavenými Maven skripty a CI konfigurací pro Travis-CI, které lze klonovat a použít při vytváření vlastních projektů prezentací:
(můj příspěvek na JPoint 2019)
(můj příspěvek na Heisenbug 2019)
Sbohem, Powerpoint! Nemyslím, že tě někdy budu potřebovat pro technické prezentace 🙂
Zdroj: habr.com
