Mislim da sam održao desetine prezentacija kolegama, klijentima i javnim nastupima u svojoj IT karijeri. Dugi niz godina Powerpoint je bio prirodan i pouzdan izbor za mene kao alat za proizvodnju slajdova. Ali ove godine situacija se kvalitativno promijenila. Od februara do maja imao sam priliku da govorim na pet konferencija, a slajdovi za izvještaje morali su biti pripremljeni u kratkom roku, ali kvalitetno. Postavilo se pitanje delegiranja tog dijela posla oko vizualnog dizajna slajdova na druge ljude. Jednom sam pokušao da radim sa dizajnerom, šaljući .pptx fajlove poštom, ali posao se pretvorio u haos: niko nije znao koja je verzija slajdova „najnovija“, a raspored se „kretao“ zbog razlike u Powerpointu verzije i fontove na našim mašinama. I odlučio sam da probam nešto novo. Probao sam i od tada nisam razmišljao da se vratim na Powerpoint.
Šta hoćemo
Pre otprilike godinu i po dana naša kompanija je prestala da koristi Word za izradu projektne dokumentacije, naišla je na iste probleme: iako je Word dobar za kucanje malog dokumenta, kako obim raste, javljaju se poteškoće sa saradnjom i dobijanjem kvalitetnih i kvalitetnih dokumenata. unificirani dizajn. Naš izbor je pao , i nikada ne prestajemo da se radujemo ovom izboru, ali ovo je tema za poseban članak. Otprilike u isto vrijeme naučili smo učinkovitost jednog od DevOps principa „sve kao kod“, pa je izbor zahtjeva za novu tehnologiju za kreiranje slajdova prezentacije bio sasvim očigledan:
- Prezentacija mora biti običan tekstualni fajl u markup jeziku.
- Naši slajdovi su o razvojnim projektima, tako da bi oznake trebale olakšati umetanje, bez pribjegavanja vanjskim sistemima
- fragmenti koda sa isticanjem sintakse,
- jednostavni dijagrami u obliku geometrijskih oblika povezanih strelicama,
- UML dijagrami, dijagrami toka i još mnogo toga.
- Nacrt prezentacije mora biti pohranjen u sistemu kontrole verzija.
- Validaciju i montažu gotovih slajdova treba obaviti u CI sistemu.
Danas postoje dvije osnovne opcije za kreiranje slajdova u jezicima za označavanje: paket za LaTeX ili jedan od okvira za kreiranje slajdova koristeći HTML/CSS (, , i mnogi drugi).
Iako mi je duša u LaTeX-u, moj um je diktirao da izbor rješenja koje ne bih jedini koristio bude na strani rješenja poznatog širem krugu ljudi. Ne znaju svi LaTeX, a ako vaša svakodnevna praksa nije vezana za pisanje naučnih članaka, onda je malo vjerovatno da ćete imati vremena da se uronite u ogroman, zamršeni svijet ovog sistema.
Međutim, vladanje HTML/CSS-om nije baš široko rasprostranjena vještina: ja, na primjer, daleko od toga da sam u potpunosti vješt u tome. Srećom, već poznati AsciiDoctor dolazi u pomoć: konverter omogućava vam da kreirate RevealJS slajdove koristeći AsciiDoctor markup. A lako se uči i svima je dostupno!
Kako kodirati slajdove
Da biste razumjeli suštinu kodiranja slajdova na AsciiDoctoru, najlakši način je da navedete konkretne primjere. Ovo su sve iz stvarnih slajdova koje sam napravio za svoje ovogodišnje prezentacije na konferenciji.
Slajd s naslovom i listom u stavkama koji se otvaraju jedan za drugim:
== Зачем нам Streams API?
[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабированиеrezultat
Isječak zaglavlja i izvornog koda sa isticanjem sintakse:
== Kafka Streams API: общая структура KStreams-приложения
[source,java]
----
StreamsConfig config = ...;
//Здесь устанавливаем всякие опции
Topology topology = new StreamsBuilder()
//Здесь строим топологию
....build();
----rezultat
U pripremi za govor, demonstracije koda prolaze kroz ponovljene revizije i poboljšanja, tako da je mogućnost brzog kopiranja i lijepljenja „sirovog koda“ direktno u slajd neprocjenjiva, osiguravajući da demo bude ažuran bez brige o naglašavanju sintakse.
Naslov, ilustracija i tekst (raspored na slajdu se radi 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
|===rezultat
Ponekad naslov nije potreban, a da biste ilustrirali svoju poentu, potrebna vam je samo slika preko cijelog ekrana:
[%notitle]
== Жить в легаси нелегко
image::swampman.jpg[canvas, size=cover]rezultat
Često ideja treba da bude podržana jednostavnim dijagramom, u obliku „kvadrata povezanih strelicama“. Na sreću, AsciiDoctor je integrisan sa sistemom — jezik koji vam omogućava da opišete dijagrame grafova na osnovu opisa vrhova i veza između njih. Graphviz uzima krivulju učenja, ali na osnovu datih 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;}
}
-----rezultat
U slučaju kada je potrebno urediti natpis na slici, promijeniti smjer strelice i sl., to se može učiniti direktno u kodu prezentacije, umjesto da se slika negdje precrtava i ponovo ubacuje u slajd. Ovo značajno povećava brzinu rada na slajdovima.
Komplikovaniji 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;}
}
-----rezultat
Usput, zgodno je eksperimentirati s Graphvizom i debugirati slike na stranici .
Konačno, ako trebate da ubacite dijagram toka, dijagram klase ili drugi standardizirani dijagram u slajd, onda drugi sistem integriran sa AsciiDoctor može priskočiti u pomoć, . Moj kolega Nikolaj Potašnjikov je pisao o širokim mogućnostima PlantUML-a .
Pretvaranje projekta prezentacije u kod pohranjen na sistemu za kontrolu verzija omogućava organiziranje zajedničkog rada na prezentaciji, prije svega, razdvajanje zadataka kreiranja sadržaja i dizajna. Dizajn slajdova (fontova, pozadina, uvlaka) u RevealJS-u je opisan pomoću CSS-a. Moje lične veštine sa CSS-om najbolje govore - ali nije strašno kada postoje ljudi koji rade sa CSS-om mnogo spretnije i brže od mene. Kao rezultat toga, ispostavilo se da sa rokom za prezentaciju koji se brzo približava, možemo istovremeno raditi na različitim datotekama putem Gita i razvijati brzinu suradnje koja je nemoguća pri slanju .pptx datoteka poštom.
Izrada HTML stranice sa slajdovima
Izvori običnog teksta su sjajni, ali kako ih sastaviti u samu prezentaciju?
AsciiDoctor je projekat napisan u Ruby-u i postoji nekoliko načina da ga pokrenete. Prvo, možete instalirati jezik Ruby i direktno pokrenuti asciidoctor, što je vjerovatno najbliže Ruby programerima.
Ako se ne želite petljati s instalacijom Rubyja, možete koristiti docker sliku , u koju, kada se pokrene, možete povezati fasciklu sa izvorima projekta preko VOLUME i dobiti rezultat na datoj lokaciji.
Opcija koju sam odabrao može izgledati pomalo neočekivano, ali meni kao Java programeru je najpogodnija. Ne zahtijeva instalaciju Ruby-a ili docker-a, ali vam omogućava da generišete slajdove koristeći Maven skriptu.
Poenta je da projekat - Java implementacija jezika Ruby je toliko dobra da vam omogućava da pokrenete skoro sve što je kreirano za Ruby na Java mašini, a pokretanje AsciiDoctor-a je jedna od najčešćih upotreba JRubyja.
dostupnost omogućava vam prikupljanje AsciiDoctor dokumentacije koja je dio Java projekta (koji aktivno koristimo). Istovremeno, Maven automatski preuzima AsciiDoctor i JRuby, a AsciiDoctor radi u JRuby okruženju: nema potrebe da se bilo šta instalira na mašinu! (Bez paketa graphviz, što je potrebno ako želite da koristite GraphViz ili PlantUML grafiku.) Jednostavno stavite svoje .adoc datoteke u fasciklu src/main/asciidoc/. Evo prikupljanje slajdova sa dijagramima.
Pretvorite slajdove u PDF
Iako je HTML verzija slajdova prilično samodovoljna, ipak je potrebno imati PDF verziju slajdova. Prvo, dešava se da na nekim konferencijama koje govorniku ne daju mogućnost da poveže svoj laptop, zahtevaju slajdove „strogo u pptx ili pdf formatu“, ne očekujući da su i u HTML-u. Drugo, dobra je forma da organizatorima pošaljete neuređenu verziju vaših slajdova kako su prikazani u izvještaju, u PDF formatu za objavljivanje datoteke u materijalima konferencije.
Srećom, uslužni program Node.js rješava ovaj zadatak. , izgrađen na bazi — sistemi automatizacije 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 prilikom pokretanja decktapea, do kojih smo morali doći putem pokušaja i grešaka:
-
rezolucija preko parametra
-smora biti navedeno sa dvostrukom marginom, inače može doći do problema s rezultatima konverzije -
u URL-u HTML verzije prezentacije trebate proći parametar
?fragments=true, koji će kreirati zasebnu PDF stranicu za svako srednje stanje vašeg slajda (na primjer, pet stranica za pet tačaka za nabrajanje ako su prikazane jedna za drugom). Ovo će vam omogućiti da takav PDF koristite samostalno kao prezentaciju tokom izvještaja.
Automatsko sklapanje i objavljivanje na webu
Zgodno je kada se slajdovi automatski kompajliraju kada se izvrše promjene u sistemu kontrole verzija, a još zgodnije kada se automatski kompajlirani slajdovi objavljuju na Internetu za javnu upotrebu. Slajdovi sa interneta mogu se lako „puštati“ pred publikom sa bilo koje mašine povezane na internet i projektora.
Pošto u svom radu koristimo GitHub, prirodan je izbor CI sistema , a za hostovanje gotovih prezentacija - . Ideja iza github.io je da bilo koji statički sadržaj objavljen na grani gh-pages vašeg projekta na GitHubu, postaje dostupan na <ваше имя>.gihub.io/<ваш проект>.
Završite TravisCI konfiguracijsku datoteku, uključujući kompajliranje HTML verzije stranice koristeći Maven, 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 projekat na TravisCI strani, morate konfigurirati varijable okruženja
GH_REF— vrijednost poput github.com/inponomarev/csa-hbGH_TOKEN— GitHub pristupni token. Možete ga preuzeti sa GitHub-a u postavkama vašeg profila, Postavke programera -> Lični tokeni za pristup. Ako prenesete prezentaciju u javno spremište, tada je za ovaj token dovoljno navesti jedini nivo pristupa „Pristup javnim spremištima“.GH_USER_EMAIL/GH_USER_NAME— par ime/e-pošta u ime kojeg će se izvršiti push na nitgh-pages.
Stoga, svako urezivanje koda prezentacije na GitHub-u rezultira automatskim rekonstruisanjem slajdova u HTML i PDF formatima i ponovnom učitavanjem na github.io. (Naravno, na github.io biste trebali otpremati samo one prezentacije koje na kraju želite objaviti.)
Primjeri projekata
Konačno, evo linkova na nekoliko primjera prezentacijskih projekata s prilagođenim Maven skriptama i CI konfiguracijom za Travis-CI, koji se mogu klonirati i koristiti prilikom kreiranja vlastitih prezentacijskih projekata:
-
(moj razgovor za JPoint 2019)
-
(moj izvještaj za Heisenbug 2019)
Zbogom Powerpoint! Mislim da mi nikada nećete trebati za tehničke prezentacije :)
izvor: www.habr.com