Mislim da sam u svojoj IT karijeri održao desetke prezentacija kolegama, klijentima i javno govorio. Dugi niz godina Powerpoint je za mene bio prirodan i pouzdan izbor kao alat za izradu slajdova. Ali ove godine situacija se kvalitativno promijenila. Od veljače do svibnja imao sam priliku govoriti na pet konferencija, a slajdove za referate trebalo je pripremiti u kratkom roku, ali kvalitetno. Postavilo se pitanje delegiranja tog dijela posla oko vizualnog oblikovanja slajdova na druge osobe. Jednom sam pokušao raditi s dizajnerom, slao .pptx datoteke poštom, ali posao se pretvorio u kaos: nitko nije znao koja je verzija slajdova "najnovija", a izgled se "pomicao" zbog razlike u Powerpointu. verzije i fontove na našim strojevima. I odlučio sam probati nešto novo. Probao sam i od tada nisam razmišljao o povratku na Powerpoint.
Što želimo
Naša tvrtka je prije otprilike godinu i pol prestala koristiti Word za izradu projektne dokumentacije, naišavši na iste probleme: iako je Word dobar za tipkanje malog dokumenta, kako obim raste, javljaju se poteškoće u suradnji i dobivanju kvalitetnih i unificirani dizajn. Naš izbor je pao na , i ne prestajemo se radovati ovom izboru, ali to je tema za poseban članak. Otprilike u isto vrijeme naučili smo učinkovitost jednog od DevOps principa "sve kao kod", tako da je izbor zahtjeva za novu tehnologiju za izradu prezentacijskih slajdova bio prilično očit:
- Prezentacija mora biti obična tekstualna datoteka u označnom jeziku.
- Naši se slajdovi odnose na razvojne projekte, tako da bi oznake trebale olakšati umetanje, bez pribjegavanja vanjskim sustavima
- fragmenti koda s isticanjem sintakse,
- jednostavni dijagrami u obliku geometrijskih oblika povezanih strelicama,
- UML dijagrami, dijagrami toka i više.
- Nacrt prezentacije mora biti pohranjen u sustavu kontrole verzija.
- Validacija i sastavljanje gotovih slajdova treba se obaviti u CI sustavu.
Danas postoje dvije osnovne opcije za izradu slajdova u označnim jezicima: paket za LaTeX ili jedan od okvira za izradu slajdova pomoću HTML/CSS (, , i mnogi drugi).
Iako mi duša leži u LaTeX-u, razum mi je nalagao da izbor rješenja koje neću biti jedini koji koristim bude na strani rješenja poznatog širem krugu ljudi. Ne znaju svi LaTeX, a ako vaša svakodnevna praksa nije povezana s pisanjem znanstvenih članaka, tada vjerojatno nećete imati vremena uroniti u ogroman, zamršen svijet ovog sustava.
Međutim, vladanje HTML/CSS-om nije baš raširena vještina: ja, na primjer, nisam u potpunosti vješt u tome. Srećom, u pomoć priskače već poznati AsciiDoctor: pretvarač omogućuje vam stvaranje RevealJS slajdova pomoću oznake AsciiDoctor. I lako ga je naučiti i dostupno svima!
Kako kodirati slajdove
Da biste razumjeli bit kodiranja slajdova na AsciiDoctoru, najlakši način je dati konkretne primjere. Ovo su sve iz stvarnih slajdova koje sam napravio za svoje ovogodišnje konferencijske prezentacije.
Slajd s naslovom i popisom u stavkama koje se otvaraju jedna za drugom:
== Зачем нам Streams API?
[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабированиеRezultirati
Zaglavlje i isječak izvornog koda s isticanjem sintakse:
== Kafka Streams API: общая структура KStreams-приложения
[source,java]
----
StreamsConfig config = ...;
//Здесь устанавливаем всякие опции
Topology topology = new StreamsBuilder()
//Здесь строим топологию
....build();
----Rezultirati
U pripremi za govor, demonstracije koda podvrgavaju se ponovljenim revizijama i poboljšanjima, tako da je mogućnost brzog kopiranja i lijepljenja "sirovog koda" izravno u slajd neprocjenjiva, osiguravajući da je demonstracija ažurna bez brige o isticanju sintakse.
Naslov, ilustracija i tekst (izgled na slajdu je u ćelijama ):
== Kafka Streams in Action
[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
“Kafka Streams in Action”, November 2018
* Примеры кода для Kafka 1.0
|===Rezultirati
Ponekad naslov nije potreban, a za ilustraciju vaše tvrdnje potrebna vam je samo slika preko cijelog zaslona:
[%notitle]
== Жить в легаси нелегко
image::swampman.jpg[canvas, size=cover]Rezultirati
Često ideju treba potkrijepiti jednostavnim dijagramom, u obliku "kvadrata povezanih strelicama". Srećom, AsciiDoctor je integriran sa sustavom — jezik koji vam omogućuje opisivanje dijagrama grafova na temelju opisa vrhova i veza između njih. Graphviz zahtijeva krivulju učenja, ali na temelju navedenih primjera, to je prilično lako učiniti! Ovako to izgleda:
== Пишем “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;}
}
-----Rezultirati
U slučaju kada je potrebno urediti natpis na slici, promijeniti smjer strelice i sl., to se može učiniti izravno u prezentacijskom kodu, umjesto da se slika negdje ponovno crta i ponovno ubacuje u slajd. To značajno povećava brzinu rada na slajdovima.
Složeniji primjer:
== Невоспроизводимая сборка
[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;}
}
-----Rezultirati
Usput, zgodno je eksperimentirati s Graphvizom i ispravljati pogreške na slikama na stranici .
Konačno, ako trebate umetnuti dijagram toka, dijagram klasa ili drugi standardizirani dijagram u slajd, tada vam drugi sustav integriran s AsciiDoctorom može pomoći, . Moj kolega Nikolaj Potašnjikov pisao je o širokim mogućnostima PlantUML-a .
Pretvaranje prezentacijskog projekta u kod pohranjen na sustavu za kontrolu verzija omogućuje organiziranje zajedničkog rada na prezentaciji, prije svega, razdvajanje zadataka izrade sadržaja i dizajna. Dizajn slajdova (fontovi, pozadine, uvlake) u RevealJS-u opisan je pomoću CSS-a. Moje osobno umijeće s CSS-om najbolje prenosi - ali nije strašno kad postoje ljudi koji s CSS-om rade mnogo spretnije i brže od mene. Kao rezultat toga, pokazalo se da s krajnjim rokom za prezentaciju koji se brzo približava, možemo raditi na različitim datotekama istovremeno putem Gita i razviti brzinu suradnje koja je nemoguća pri slanju .pptx datoteka poštom.
Izrada HTML stranice sa slajdovima
Izvori običnog teksta su izvrsni, ali kako ih sastaviti u samu prezentaciju?
AsciiDoctor je projekt napisan u Rubyju, a postoji nekoliko načina za njegovo pokretanje. Prvo, možete instalirati Ruby jezik i izravno pokrenuti asciidoctor, što je vjerojatno najbliže Ruby programerima.
Ako se ne želite petljati s instaliranjem Rubyja, možete koristiti docker sliku , u koji, kada se pokrene, možete povezati mapu s izvorima projekta preko VOLUME-a i dobiti rezultat na zadanoj lokaciji.
Opcija koju sam odabrao može se činiti pomalo neočekivanom, ali je najprikladnija za mene kao Java programera. Ne zahtijeva instalaciju Rubyja ili dockera, ali vam omogućuje generiranje slajdova pomoću Maven skripte.
Poanta je da projekt - Java implementacija jezika Ruby toliko je dobra da vam omogućuje pokretanje gotovo svega što je stvoreno za Ruby na Java stroju, a pokretanje AsciiDoctora jedna je od najčešćih upotreba JRubyja.
Dostupnost omogućuje prikupljanje AsciiDoctor dokumentacije koja je dio Java projekta (kojeg aktivno koristimo). U isto vrijeme, Maven automatski preuzima AsciiDoctor i JRuby, a AsciiDoctor radi u JRuby okruženju: nema potrebe ništa instalirati na stroj! (Isključujući paket graphviz, koji je potreban ako želite koristiti GraphViz ili PlantUML grafiku.) Jednostavno smjestite svoje .adoc datoteke u mapu src/main/asciidoc/, ovdje prikupljanje slajdova s dijagramima.
Pretvorite slajdove u PDF
Iako je HTML verzija slajdova prilično samodostatna, ipak je potrebno imati PDF verziju slajdova. Prvo, događa se da na nekim konferencijama koje govorniku ne daju mogućnost povezivanja vlastitog prijenosnog računala traže slajdove “isključivo u pptx ili pdf formatu”, ne očekujući da su i u HTML-u. Drugo, dobar je oblik poslati organizatorima nelektoriranu verziju vaših slajdova onako kako su prikazani na izvješću, u PDF formatu za objavu datoteke u materijalima konferencije.
Srećom, uslužni program Node.js rješava ovaj zadatak. , izgrađen na temelju — automatizirani sustavi za upravljanje preglednikom Chrome. RevealJS prezentaciju možete pretvoriti u PDF pomoću naredbe
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Dva trika pri pokretanju vrpce, do kojih smo morali doći metodom pokušaja i pogreške:
-
rezolucija preko parametra
-smora biti naveden s dvostrukom marginom, inače može doći do problema s rezultatima pretvorbe -
u URL-u HTML verzije prezentacije morate proslijediti parametar
?fragments=true, koji će stvoriti zasebnu PDF stranicu za svako međustanje vašeg slajda (na primjer, pet stranica za pet točaka ako se prikazuju jedna za drugom). To će vam omogućiti da koristite takav PDF samostalno kao prezentaciju tijekom izvješća.
Automatska montaža i objavljivanje na webu
Zgodno je kada se slajdovi automatski kompajliraju kada se naprave promjene u sustavu kontrole verzija, a još je zgodnije kada se automatski kompilirani slajdovi objavljuju na Internetu za javnu upotrebu. Slajdovi s interneta mogu se lako "reprodukovati" pred publikom s bilo kojeg računala spojenog na internet i projektor.
Budući da u svom radu koristimo GitHub, prirodan izbor CI sustava je , i za hosting gotovih prezentacija - . Ideja iza github.io je da se svaki statični sadržaj objavi u grani gh-pages vašeg projekta na GitHubu, postaje dostupan na <ваше имя>.gihub.io/<ваш проект>.
Kompletna TravisCI konfiguracijska datoteka, uključujući kompajliranje HTML verzije stranice pomoću Mavena, pretvaranje u PDF pomoću decktape-a i učitavanje rezultata u nit gh-pages za objavljivanje na github.io, izgleda .
Da biste izgradili takav projekt na strani TravisCI, trebate konfigurirati varijable okoline
GH_REF— vrijednost poput github.com/inponomarev/csa-hbGH_TOKEN— GitHub pristupni token. Možete ga nabaviti s GitHuba u postavkama vašeg profila, Postavke za razvojne programere -> Osobni tokeni za pristup. Ako učitate prezentaciju u javno spremište, tada je za ovaj token dovoljno navesti jedinu razinu pristupa “Pristup javnim spremištima”.GH_USER_EMAIL/GH_USER_NAME— par ime/e-mail u čije ime će se izvršiti push na nitgh-pages.
Dakle, svako uvrštavanje prezentacijskog koda na GitHub rezultira automatskim obnavljanjem slajdova u HTML i PDF formatima i ponovnim učitavanjem na github.io. (Naravno, trebali biste prenijeti na github.io samo one prezentacije koje konačno želite učiniti javnima.)
Primjeri projekata
Konačno, ovdje su poveznice na nekoliko primjera prezentacijskih projekata s prilagođenim Maven skriptama i CI konfiguracijom za Travis-CI, koji se mogu klonirati i koristiti pri izradi vlastitih prezentacijskih projekata:
-
(moj govor za JPoint 2019.)
-
(moje izvješće za Heisenbug 2019.)
Zbogom Powerpoint! Mislim da mi nikada nećete trebati za tehničke prezentacije :)
Izvor: www.habr.com