Myslím, že som počas svojej kariéry v oblasti IT urobil desiatky prezentácií kolegom, klientom a verejným prejavom. Už mnoho rokov je pre mňa Powerpoint prirodzenou a spoľahlivou voľbou ako nástroj na výrobu diapozitívov. Tento rok sa však situácia kvalitatívne zmenila. Od februára do mája som mal možnosť vystúpiť na piatich konferenciách a slajdy do správ bolo potrebné pripraviť v krátkom čase, no kvalitne. Vznikla otázka, či tú časť práce ohľadom vizuálneho dizajnu diapozitívov delegovať na iných ľudí. Raz som sa pokúsil spolupracovať s dizajnérom a posielať súbory .pptx poštou, ale práca sa zmenila na chaos: nikto nevedel, ktorá verzia snímok je „najnovšia“ a rozloženie sa „pohybovalo“ kvôli rozdielu v programe Powerpoint verzie a fonty na našich strojoch. A rozhodol som sa vyskúšať niečo nové. Skúsil som to a odvtedy som nepremýšľal o tom, že sa vrátim k Powerpointu.
Čo chceme
Asi pred rokom a pol naša spoločnosť prestala používať Word na vytváranie projektovej dokumentácie, pretože narazila na rovnaké problémy: hoci Word je dobrý na písanie malého dokumentu, s rastúcim objemom vznikajú problémy so spoluprácou a získavaním vysokokvalitných a jednotný dizajn. Naša voľba padla , a neprestávame sa z tohto výberu radovať, ale toto je téma na samostatný článok. Približne v rovnakom čase sme sa naučili efektívnosť jedného z princípov DevOps „všetko ako kód“, takže výber požiadaviek na novú technológiu na vytváranie prezentačných snímok bol celkom zrejmý:
- Prezentácia musí byť obyčajný textový súbor v značkovacom jazyku.
- Naše snímky sa týkajú vývojových projektov, takže označenie by malo uľahčiť vkladanie bez použitia externých systémov
- fragmenty kódu so zvýraznením syntaxe,
- jednoduché schémy vo forme geometrických tvarov spojených šípkami,
- UML diagramy, vývojové diagramy a ďalšie.
- Návrh prezentácie musí byť uložený v systéme na správu verzií.
- Validácia a montáž hotových sklíčok by sa mala vykonávať v systéme CI.
Dnes existujú dve základné možnosti vytvárania snímok v značkovacích jazykoch: balík pre LaTeX alebo jeden z rámcov na vytváranie snímok pomocou HTML/CSS (, , a veľa ďalších).
Hoci moja duša leží v LaTeXe, rozum mi diktoval, že výber riešenia, ktoré nebudem používať len ja, by mal byť na strane riešenia známeho širšiemu okruhu ľudí. Nie každý pozná LaTeX a ak vaša každodenná prax nesúvisí s písaním vedeckých článkov, potom je nepravdepodobné, že by ste mali čas ponoriť sa do obrovského a zložitého sveta tohto systému.
Ovládanie HTML/CSS však nie je práve rozšírená zručnosť: ja napríklad v tom zďaleka nie som úplne zbehlý. Našťastie prichádza na pomoc už známy AsciiDoctor: prevodník umožňuje vytvárať snímky RevealJS pomocou značiek AsciiDoctor. A je ľahké sa to naučiť a je prístupné pre každého!
Ako kódovať snímky
Ak chcete pochopiť podstatu kódovania snímok na AsciiDoctor, najjednoduchším spôsobom je uviesť konkrétne príklady. To všetko sú zo skutočných snímok, ktoré som vytvoril pre moje tohtoročné konferenčné prezentácie.
Snímka s názvom a zoznamom položiek, ktoré sa otvárajú jedna po druhej:
== Зачем нам Streams API?
[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабированиеVýsledok
Hlavička a zlomok zdrojového kódu so zvýraznením syntaxe:
== Kafka Streams API: общая структура KStreams-приложения
[source,java]
----
StreamsConfig config = ...;
//Здесь устанавливаем всякие опции
Topology topology = new StreamsBuilder()
//Здесь строим топологию
....build();
----Výsledok
V rámci prípravy na prednášku sa ukážky kódu podrobujú opakovaným revíziám a vylepšeniam, takže schopnosť rýchlo skopírovať a vložiť „surový kód“ priamo do snímky je neoceniteľná, čo zaisťuje aktuálnosť ukážky bez obáv zo zvýrazňovania syntaxe.
Nadpis, ilustrácia a text (rozloženie na snímke sa vykonáva v bunkách ):
== Kafka Streams in Action
[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
“Kafka Streams in Action”, November 2018
* Примеры кода для Kafka 1.0
|===Výsledok
Niekedy nie je potrebný názov a na ilustráciu vášho názoru vám stačí obrázok na celú obrazovku:
[%notitle]
== Жить в легаси нелегко
image::swampman.jpg[canvas, size=cover]Výsledok
Nápad musí byť často podporený jednoduchým diagramom vo forme „štvorcov spojených šípkami“. Našťastie je AsciiDoctor integrovaný so systémom — jazyk, ktorý umožňuje popisovať grafové diagramy na základe popisu vrcholov a spojení medzi nimi. Graphviz si vyžaduje krivku učenia, ale na základe poskytnutých príkladov je to celkom jednoduché! Takto to vyzerá:
== Пишем “Bet Totalling App”
Какова сумма выплат по сделанным ставкам, если сыграет исход?
[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="Local Store"; fixedsize="true"; width="1.5"]
Source -> MapVal -> Sum -> Sink
Sum -> Store [dir=both; label=" n "]
{rank = same; Store; Sum;}
}
-----Výsledok
V prípade, že je potrebné upraviť popis na obrázku, zmeniť smer šípky a pod., je to možné urobiť priamo v kóde prezentácie, namiesto toho, aby ste obrázok niekde prekreslili a znova vložili do snímky. To výrazne zvyšuje rýchlosť práce na diapozitívoch.
Zložitejší príklad:
== Невоспроизводимая сборка
[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=<<font color="red">merge blocked</font>>]
{rank = same; u; r0; b4;}
}
-----Výsledok
Mimochodom, je vhodné experimentovať s Graphvizom a ladiť obrázky na stránke .
Nakoniec, ak potrebujete vložiť vývojový diagram, diagram tried alebo iný štandardizovaný diagram do snímky, potom vám môže pomôcť iný systém integrovaný s AsciiDoctor, . Môj kolega Nikolaj Potashnikov písal o rozsiahlych možnostiach PlantUML .
Premena projektu prezentácie na kód uložený v systéme správy verzií umožňuje organizovať spoločnú prácu na prezentácii, predovšetkým oddeliť úlohy tvorby obsahu a dizajnu. Dizajn snímok (fonty, pozadia, zarážky) v RevealJS je popísaný pomocou CSS. Moje osobné zručnosti s CSS najlepšie vyjadruje - ale nie je to strašidelné, keď sú ľudia, ktorí pracujú s CSS oveľa obratnejšie a rýchlejšie ako ja. Výsledkom je, že s rýchlo sa blížiacim termínom prezentácie môžeme cez Git pracovať na rôznych súboroch súčasne a vyvinúť rýchlosť spolupráce, ktorá je nemožná pri odosielaní súborov .pptx poštou.
Vytvorenie stránky HTML so snímkami
Zdroje obyčajného textu sú skvelé, ale ako ich zostaviť do samotnej prezentácie?
AsciiDoctor je projekt napísaný v Ruby a existuje niekoľko spôsobov, ako ho spustiť. Najprv si môžete nainštalovať jazyk Ruby a spustiť priamo asciidoctor, čo je asi najbližšie k vývojárom Ruby.
Ak sa nechcete pohrávať s inštaláciou Ruby, môžete použiť obrázok docker , do ktorého po spustení môžete cez VOLUME prepojiť priečinok so zdrojmi projektu a získať výsledok na danom mieste.
Možnosť, ktorú som si vybral, sa môže zdať trochu neočakávaná, ale pre mňa ako vývojára Java je najpohodlnejšia. Nevyžaduje inštaláciu Ruby alebo docker, ale umožňuje vytvárať snímky pomocou skriptu Maven.
Ide o to, že projekt - Java implementácia jazyka Ruby je taká dobrá, že vám umožňuje spustiť takmer čokoľvek vytvorené pre Ruby na stroji Java a spustenie AsciiDoctor je jedným z najbežnejších použití JRuby.
dostupnosť vám umožňuje zhromažďovať dokumentáciu AsciiDoctor, ktorá je súčasťou projektu Java (ktorý aktívne používame). Maven zároveň sťahuje AsciiDoctor a JRuby automaticky a AsciiDoctor beží v prostredí JRuby: na stroj nie je potrebné nič inštalovať! (Vrátane balíka graphviz, ktorý je potrebný, ak chcete používať grafiku GraphViz alebo PlantUML.) Jednoducho umiestnite svoje súbory .adoc do priečinka src/main/asciidoc/. Tu zbieranie diapozitívov s diagramami.
Previesť snímky do formátu PDF
Aj keď je HTML verzia slajdov celkom sebestačná, stále je potrebné mať aj PDF verziu slajdov. Po prvé sa stáva, že na niektorých konferenciách, ktoré neposkytujú rečníkovi možnosť pripojiť si vlastný laptop, vyžadujú snímky „striktne vo formáte pptx alebo pdf“ bez toho, aby očakávali, že budú aj v HTML. Po druhé, je dobré zaslať organizátorom neupravenú verziu vašich slajdov tak, ako boli uvedené v správe, vo formáte PDF na zverejnenie súboru v materiáloch konferencie.
Našťastie túto úlohu zvláda utilita Node.js. , postavený na základe — automatizačné systémy na správu prehliadača Chrome. Prezentáciu RevealJS môžete previesť do formátu PDF pomocou príkazu
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Dva triky pri spúšťaní decktape, na ktoré sme museli prísť metódou pokus-omyl:
-
rozlíšenie cez parameter
-smusia byť špecifikované s dvojnásobnou maržou, inak môžu nastať problémy s výsledkami konverzie -
v URL verzii HTML prezentácie musíte zadať parameter
?fragments=true, ktorý vytvorí samostatnú stránku PDF pre každý medzistav vašej snímky (napríklad päť strán pre päť odrážok, ak sú zobrazené jedna po druhej). To vám umožní použiť takéto PDF samostatne ako prezentáciu počas zostavy.
Automatická montáž a publikovanie na webe
Je to pohodlné, keď sa snímky kompilujú automaticky, keď sa vykonajú zmeny v systéme správy verzií, a ešte pohodlnejšie, keď sa automaticky zostavené snímky zverejňujú na internete na verejné použitie. Snímky z internetu možno jednoducho „prehrať“ pred publikom z akéhokoľvek zariadenia pripojeného k internetu a projektora.
Keďže pri našej práci používame GitHub, prirodzená voľba systému CI je a na hosťovanie hotových prezentácií - . Myšlienkou github.io je, že akýkoľvek statický obsah sa uverejní na pobočke gh-pages vášho projektu na GitHub, bude k dispozícii na <ваше имя>.gihub.io/<ваш проект>.
Kompletný konfiguračný súbor TravisCI vrátane kompilácie HTML verzie stránky pomocou Maven, konverzie do PDF pomocou decktape a nahratia výsledkov do vlákna gh-pages na zverejnenie na github.io, vyzerá takto .
Ak chcete vytvoriť takýto projekt na strane TravisCI, musíte nakonfigurovať premenné prostredia
GH_REF— hodnota ako github.com/inponomarev/csa-hbGH_TOKEN— Prístupový token GitHub. Môžete ho získať z GitHubu v nastaveniach profilu, Nastavenia vývojára -> Osobné prístupové tokeny. Ak nahráte prezentáciu do verejného úložiska, potom pre tento token stačí zadať jedinú úroveň prístupu „Prístup k verejným úložiskám“.GH_USER_EMAIL/GH_USER_NAME— pár meno/e-mail, v mene ktorého sa uskutoční presun do vláknagh-pages.
Výsledkom každého odovzdania prezentačného kódu na GitHub teda je automatické prebudovanie snímok vo formátoch HTML a PDF a ich opätovné nahranie na github.io. (Samozrejme, na github.io by ste mali nahrať iba tie prezentácie, ktoré chcete nakoniec zverejniť.)
Príklady projektov
Nakoniec tu sú odkazy na niekoľko príkladov prezentačných projektov s prispôsobenými skriptami Maven a konfiguráciou CI pre Travis-CI, ktoré možno naklonovať a použiť pri vytváraní vlastných prezentačných projektov:
-
(moja prednáška pre JPoint 2019)
-
(moja správa pre Heisenbug 2019)
Zbohom Powerpoint! Myslím, že ťa nikdy nebudem potrebovať na technické prezentácie :)
Zdroj: hab.com