Manau, kad per savo IT karjerą esu surengęs dešimtis pranešimų kolegoms, klientams ir viešas kalbėjimas. Jau daugelį metų Powerpoint man buvo natūralus ir patikimas skaidrės gamybos įrankis. Tačiau šiais metais situacija pasikeitė kokybiškai. Nuo vasario iki gegužės mėnesio turėjau galimybę kalbėti penkiose konferencijose, skaidrės pranešimams turėjo būti paruoštos per trumpą laiką, bet kokybiškai. Iškilo klausimas dėl tos darbo dalies, susijusios su skaidrių vizualiniu dizainu, delegavimo kitiems žmonėms. Kartą bandžiau dirbti su dizaineriu, siunčiau paštu .pptx failus, bet darbas virto chaosu: niekas nežinojo, kuri skaidrių versija yra „naujausia“, o maketas „judėjo“ dėl Powerpoint skirtumo. versijos ir šriftai mūsų įrenginiuose. Ir aš nusprendžiau išbandyti kažką naujo. Išbandžiau ir nuo to laiko negalvojau grįžti į „Powerpoint“.
Ko mes norime
Maždaug prieš pusantrų metų mūsų įmonė nustojo naudoti „Word“ projektų dokumentacijai kurti, susidūrusi su tomis pačiomis problemomis: nors „Word“ tinka spausdinti nedidelį dokumentą, didėjant apimtims, kyla sunkumų bendradarbiaujant ir gaunant aukštos kokybės bei vieningas dizainas. Mūsų pasirinkimas krito , ir mes nepaliaujame džiaugtis šiuo pasirinkimu, bet tai atskiro straipsnio tema. Maždaug tuo pačiu metu sužinojome apie vieno iš „DevOps“ principų „viskas kaip kodas“ efektyvumą, todėl reikalavimų pasirinkimas naujai pristatymo skaidrių kūrimo technologijai buvo gana akivaizdus:
- Pristatymas turi būti paprasto teksto failas žymėjimo kalba.
- Mūsų skaidrės yra apie kūrimo projektus, todėl žymėjimas turėtų palengvinti įterpimą, nenaudojant išorinių sistemų
- kodo fragmentai su sintaksės paryškinimu,
- paprastos diagramos geometrinių formų, sujungtų rodyklėmis, pavidalu,
- UML diagramos, schemos ir kt.
- Pristatymo juodraštis turi būti saugomas versijų valdymo sistemoje.
- Gatavų stiklelių patvirtinimas ir surinkimas turėtų būti atliekamas CI sistemoje.
Šiandien yra dvi pagrindinės skaidrės kūrimo žymėjimo kalbomis parinktys: paketas skirtas LaTeX arba vienai iš skaidrių kūrimo struktūrų naudojant HTML/CSS (, , ir daugelis kitų).
Nors mano siela slypi LaTeX, mano protas lėmė, kad sprendimą, kurį naudočiau ne aš vienas, reikėtų rinktis platesniam žmonių ratui pažįstamo sprendimo pusėje. Ne visi žino LaTeX, o jei jūsų kasdienė praktika nėra susijusi su mokslinių straipsnių rašymu, tuomet vargu ar turėsite laiko pasinerti į didžiulį, sudėtingą šios sistemos pasaulį.
Tačiau HTML/CSS įvaldymas nėra plačiai paplitęs įgūdis: aš, pavyzdžiui, toli gražu nesu visiškai jo įgudęs. Laimei, į pagalbą ateina jau pažįstamas AsciiDoctor: keitiklis leidžia kurti RevealJS skaidres naudojant AsciiDoctor žymėjimą. Ir tai lengva išmokti ir prieinama visiems!
Kaip koduoti skaidres
Norint suprasti skaidrių kodavimo esmę „AsciiDoctor“, paprasčiausias būdas yra pateikti konkrečius pavyzdžius. Visa tai yra iš tikrųjų skaidrių, kurias sukūriau šių metų konferencijos pristatymams.
Skaidrė su pavadinimu ir vienas po kito atidaromų elementų sąrašu:
== Зачем нам Streams API?
[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабированиеRezultatas
Antraštė ir šaltinio kodo fragmentas su sintaksės paryškinimu:
== Kafka Streams API: общая структура KStreams-приложения
[source,java]
----
StreamsConfig config = ...;
//Здесь устанавливаем всякие опции
Topology topology = new StreamsBuilder()
//Здесь строим топологию
....build();
----Rezultatas
Ruošiantis pokalbiui, kodo demonstracinės versijos pakartotinai peržiūrimos ir patobulinamos, todėl galimybė greitai nukopijuoti ir įklijuoti „neapdorotą kodą“ tiesiai į skaidrę yra neįkainojama, užtikrinant, kad demonstracinė versija būtų atnaujinta, nesijaudinant dėl sintaksės paryškinimo.
Pavadinimas, iliustracija ir tekstas (išdėstymas skaidrėje atliekamas langeliais ):
== Kafka Streams in Action
[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
“Kafka Streams in Action”, November 2018
* Примеры кода для Kafka 1.0
|===Rezultatas
Kartais pavadinimo nereikia, o norint iliustruoti savo mintį, tereikia viso ekrano vaizdo:
[%notitle]
== Жить в легаси нелегко
image::swampman.jpg[canvas, size=cover]Rezultatas
Dažnai idėją reikia paremti paprasta schema, kuri yra „kvadratai, sujungti rodyklėmis“. Laimei, AsciiDoctor yra integruota į sistemą — kalba, leidžianti apibūdinti grafines diagramas remiantis viršūnių ir jungčių tarp jų aprašymu. Graphviz mokymosi kreivė, tačiau remiantis pateiktais pavyzdžiais tai padaryti gana paprasta! Štai kaip atrodo:
== Пишем “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;}
}
-----Rezultatas
Tuo atveju, kai reikia redaguoti paveikslėlio antraštę, pakeisti rodyklės kryptį ir pan., tai galima padaryti tiesiogiai pristatymo kode, o ne kur nors perbraižyti paveikslėlį ir vėl įterpti į skaidrę. Tai žymiai padidina darbo su skaidrėmis greitį.
Sudėtingesnis pavyzdys:
== Невоспроизводимая сборка
[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;}
}
-----Rezultatas
Beje, patogu eksperimentuoti su Graphviz ir derinti vaizdus puslapyje .
Galiausiai, jei į skaidrę reikia įterpti struktūrinę schemą, klasių diagramą ar kitą standartizuotą diagramą, į pagalbą gali ateiti kita sistema, integruota su AsciiDoctor, . Mano kolega Nikolajus Potašnikovas rašė apie plačias „PlantUML“ galimybes .
Pristatymo projektą pavertus versijų valdymo sistemoje saugomu kodu, galima organizuoti bendrą pristatymo darbą, visų pirma atskirti turinio kūrimo ir dizaino užduotis. Skaidrių (šriftų, fonų, įtraukų) dizainas RevealJS aprašomas naudojant CSS. Mano asmeninius CSS įgūdžius geriausiai perteikia - bet tai nėra baisu, kai yra žmonių, kurie su CSS dirba daug gudriau ir greičiau nei aš. Dėl to paaiškėja, kad greitai artėjant pristatymo terminui, galime vienu metu dirbti su skirtingais failais per Git ir išvystyti tokį bendradarbiavimo greitį, kuris neįmanomas siunčiant .pptx failus paštu.
HTML puslapio su skaidrėmis kūrimas
Paprasto teksto šaltiniai yra puikūs, bet kaip juos sudėti į patį pristatymą?
„AsciiDoctor“ yra projektas, parašytas „Ruby“, ir yra keletas būdų, kaip jį paleisti. Pirma, galite įdiegti Ruby kalbą ir tiesiogiai paleisti asciidoctor, kuri tikriausiai yra artimiausia Ruby kūrėjams.
Jei nenorite trikdyti „Ruby“ diegimo, galite naudoti „Docker“ vaizdą , į kurį paleidus galite per VOLUME prijungti aplanką su projekto šaltiniais ir gauti rezultatą nurodytoje vietoje.
Pasirinktas variantas gali pasirodyti kiek netikėtas, bet man, kaip Java kūrėjui, jis yra patogiausias. Tam nereikia įdiegti „Ruby“ ar „docker“, bet leidžia generuoti skaidres naudojant „Maven“ scenarijų.
Esmė ta, kad projektas - Ruby kalbos Java diegimas yra toks geras, kad leidžia paleisti beveik viską, kas sukurta Ruby Java mašinoje, o AsciiDoctor paleidimas yra vienas iš labiausiai paplitusių JRuby naudojimo būdų.
Prieinamumas leidžia rinkti AsciiDoctor dokumentaciją, kuri yra Java projekto dalis (kurią mes aktyviai naudojame). Tuo pačiu metu „Maven“ automatiškai atsisiunčia „AsciiDoctor“ ir „JRuby“, o „AsciiDoctor“ veikia „JRuby“ aplinkoje: nieko nereikia įdiegti įrenginyje! (Išskyrus pakuotę graphviz, kurio reikia, jei norite naudoti GraphViz arba PlantUML grafiką.) Tiesiog įdėkite .adoc failus į aplanką src/main/asciidoc/. Čia rinkti skaidres su diagramomis.
Konvertuoti skaidres į PDF
Nors skaidrių HTML versija yra pakankamai savarankiška, vis tiek būtina turėti skaidrių PDF versiją. Pirma, atsitinka taip, kad kai kuriose konferencijose, kuriose kalbėtojui nesuteikiama galimybė prijungti savo nešiojamąjį kompiuterį, reikia skaidrių „griežtai pptx arba pdf formatu“, nesitikint, kad jos taip pat yra HTML. Antra, gera forma atsiųsti organizatoriams neredaguotą savo skaidrių versiją, kaip jos buvo parodytos pranešime, PDF formatu, kad failas būtų publikuojamas konferencijos medžiagoje.
Laimei, Node.js programa atlieka šią užduotį. , pastatytas pagrindu – „Chrome“ naršyklės valdymo automatizavimo sistemos. Galite konvertuoti RevealJS pristatymą į PDF naudodami komandą
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Dvi gudrybės paleidžiant decktape, kurias turėjome sugalvoti per bandymus ir klaidas:
-
skiriamoji geba per parametrą
-sturi būti nurodyta su dviguba parašte, kitaip gali kilti problemų su konvertavimo rezultatais -
pristatymo HTML versijos URL turite perduoti parametrą
?fragments=true, kuris sukurs atskirą PDF puslapį kiekvienai tarpinei skaidrės būsenai (pavyzdžiui, penki puslapiai penkiems taškams, jei jie rodomi vienas po kito). Tai leis tokį PDF failą naudoti kaip pristatymą ataskaitos metu.
Automatinis surinkimas ir publikavimas internete
Patogu, kai keičiant versijų valdymo sistemą skaidrės kompiliuojamos automatiškai, o dar patogiau, kai automatiškai sukompiliuotos skaidrės skelbiamos internete viešam naudojimui. Skaidres iš interneto galima lengvai „žaisti“ prieš auditoriją iš bet kurio prie interneto prijungto įrenginio ir projektoriaus.
Kadangi savo darbe naudojame GitHub, CI sistemos pasirinkimas yra natūralus , ir paruoštų pristatymų talpinimui - . Github.io idėja yra ta, kad bet koks statinis turinys paskelbtas filiale gh-pages jūsų projekto GitHub, bus pasiekiamas adresu <ваше имя>.gihub.io/<ваш проект>.
Užpildykite TravisCI konfigūracijos failą, įskaitant puslapio HTML versijos sudarymą naudojant Maven, konvertavimą į PDF naudojant decktape ir rezultatų įkėlimą į giją gh-pages publikavimui github.io, atrodo .
Norėdami sukurti tokį projektą TravisCI pusėje, turite sukonfigūruoti aplinkos kintamuosius
GH_REF- tokia vertė kaip github.com/inponomarev/csa-hbGH_TOKEN– „GitHub“ prieigos raktas. Jį galite gauti iš „GitHub“ savo profilio nustatymuose, Kūrėjo nustatymai -> Asmeniniai prieigos prieigos raktai. Jei įkeliate pristatymą į viešą saugyklą, tada šiam prieigos raktui pakanka nurodyti vienintelį prieigos lygį „Prieiga prie viešųjų saugyklų“.GH_USER_EMAIL/GH_USER_NAME— vardas/el. pašto pora, kurios vardu bus persiunčiama į gijągh-pages.
Taigi, kiekvieną kartą pristačius pristatymo kodą „GitHub“, skaidrės automatiškai perkuriamos HTML ir PDF formatais ir iš naujo įkeliamos į github.io. (Žinoma, į github.io turėtumėte įkelti tik tuos pristatymus, kuriuos galiausiai norite paviešinti.)
Projektų pavyzdžiai
Galiausiai čia pateikiamos nuorodos į keletą pristatymo projektų pavyzdžių su pritaikytais Maven scenarijais ir CI konfigūracija, skirta Travis-CI, kurias galima klonuoti ir naudoti kuriant savo pristatymo projektus:
-
(mano pokalbis apie JPoint 2019)
-
(mano ataskaita apie Heisenbug 2019)
Atsisveikink su Powerpoint! Nemanau, kad man kada nors tavęs prireiks techniniams pristatymams :)
Šaltinis: www.habr.com