Azt hiszem, informatikai pályafutásom során több tucat előadást tartottam kollégáimnak, ügyfeleknek és nyilvános beszédet. A Powerpoint hosszú évek óta természetes és megbízható választás számomra diakészítő eszközként. Idén azonban minőségileg megváltozott a helyzet. Februártól májusig öt konferencián volt lehetőségem felszólalni, rövid időn belül, de minőségileg kellett elkészíteni a beszámolókhoz a diákat. Felmerült a kérdés, hogy a munka azon részét, amely a diák látványtervezésére vonatkozott, másokra ruházzuk át. Egyszer próbáltam tervezővel dolgozni, .pptx fájlokat küldtem levélben, de a munka káoszba torkollott: senki sem tudta, hogy a diák melyik verziója a „legújabb”, az elrendezés pedig a Powerpoint különbsége miatt „mozgott”. verziók és betűtípusok a gépeinken . És úgy döntöttem, hogy kipróbálok valami újat. Kipróbáltam, és azóta nem gondoltam arra, hogy visszatérjek a Powerpointhoz.
Mit akarunk
Körülbelül másfél éve cégünk abbahagyta a Word használatát projektdokumentáció készítésére, mivel ugyanezekkel a problémákkal szembesült: bár a Word alkalmas kis dokumentumok gépelésére, a kötet növekedésével nehézségekbe ütközik az együttműködés, a minőségi, ill. egységes kialakítás. A mi választásunk esett , és soha nem szűnünk meg örülni ennek a választásnak, de ez egy külön cikk témája. Körülbelül ugyanekkor tanultuk meg a DevOps egyik alapelvének, a „mindent mint kódot” a hatékonyságát, így a prezentációs diák létrehozásához szükséges új technológia követelményeinek megválasztása nyilvánvaló volt:
- A prezentációnak egyszerű szöveges fájlnak kell lennie jelölőnyelven.
- Diáink fejlesztési projektekről szólnak, így a jelölésnek lehetővé kell tennie a beilleszthetőséget külső rendszerek igénybevétele nélkül
- kódrészletek szintaxis kiemeléssel,
- egyszerű diagramok geometriai alakzatok formájában, amelyeket nyilak kötnek össze,
- UML diagramok, folyamatábrák és még sok más.
- A prezentáció vázlatát verziókezelő rendszerben kell tárolni.
- A kész tárgylemezek validálását és összeszerelését CI rendszerben kell elvégezni.
Manapság két alapvető lehetőség van a diák létrehozására jelölőnyelveken: csomag LaTeX-hez vagy valamelyik keretrendszerhez diák létrehozásához HTML/CSS használatával (, , és sokan mások).
Bár a lelkem a LaTeX-ben rejlik, az agyam azt diktálta, hogy olyan megoldást válasszak, amelyet nem egyedül használok, egy szélesebb körben ismert megoldás mellett. Nem mindenki ismeri a LaTeX-et, és ha a napi gyakorlatod nem kapcsolódik tudományos cikkek írásához, akkor valószínűleg nem lesz időd elmerülni ennek a rendszernek a hatalmas, bonyolult világában.
A HTML/CSS elsajátítása azonban nem éppen elterjedt készség: én például messze nem vagyok benne teljesen jártas. Szerencsére a már ismerős AsciiDoctor segít: egy konverter lehetővé teszi a RevealJS diák létrehozását az AsciiDoctor jelölés használatával. És könnyen megtanulható és mindenki számára elérhető!
Diák kódolása
Ahhoz, hogy megértsük a diák kódolásának lényegét az AsciiDoctor programban, a legegyszerűbb, ha konkrét példákat adunk. Ezek mind az idei konferencia-előadásaimhoz készített tényleges diákból származnak.
Dia címmel és listával egymás után nyíló tételekben:
== Зачем нам Streams API?
[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабированиеEredmény
Fejléc és forráskódrészlet szintaktikai kiemeléssel:
== Kafka Streams API: общая структура KStreams-приложения
[source,java]
----
StreamsConfig config = ...;
//Здесь устанавливаем всякие опции
Topology topology = new StreamsBuilder()
//Здесь строим топологию
....build();
----Eredmény
Az előadásra való felkészülés során a kódbemutatókat ismételten felülvizsgálják és javítják, így a „nyers kód” gyors másolása és beillesztése közvetlenül a diára felbecsülhetetlen értékű, így biztosítva, hogy a demó naprakész legyen, anélkül, hogy a szintaxis kiemelése miatt kellene aggódnia.
Cím, illusztráció és szöveg (az elrendezés a dián cellákban történik ):
== Kafka Streams in Action
[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
“Kafka Streams in Action”, November 2018
* Примеры кода для Kafka 1.0
|===Eredmény
Néha nincs szükség címre, és az álláspont szemléltetéséhez elegendő egy teljes képernyős kép:
[%notitle]
== Жить в легаси нелегко
image::swampman.jpg[canvas, size=cover]Eredmény
Egy ötletet gyakran egy egyszerű diagrammal kell alátámasztani, „nyilakkal összekapcsolt négyzetek” formájában. Szerencsére az AsciiDoctor integrálva van a rendszerrel — egy nyelv, amely lehetővé teszi gráfdiagramok leírását a csúcsok és a köztük lévő kapcsolatok leírása alapján. A Graphviz tanulási görbét vesz fel, de a bemutatott példák alapján nagyon könnyű megtenni! Így néz ki:
== Пишем “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;}
}
-----Eredmény
Abban az esetben, ha módosítani kell az ábrán a feliratot, módosítani kell a nyíl irányát, stb., ezt közvetlenül a prezentációs kódban megtehetjük, ahelyett, hogy a képet átrajzolnánk valahova és visszahelyeznénk a diára. Ez jelentősen megnöveli a diákon végzett munka sebességét.
Egy bonyolultabb példa:
== Невоспроизводимая сборка
[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;}
}
-----Eredmény
Mellesleg kényelmes kísérletezni a Graphviz-zel, és hibakeresni a képeket az oldalon .
Végül, ha folyamatábrát, osztálydiagramot vagy más szabványosított diagramot kell beillesztenie egy diába, akkor egy másik, az AsciiDoctorral integrált rendszer jöhet a segítségre, . Nikolai Potashnikov kollégám írt a PlantUML kiterjedt képességeiről .
A prezentációs projekt verziókövető rendszerben tárolt kóddá alakítása lehetővé teszi a prezentáció közös munka megszervezését, mindenekelőtt a tartalomkészítés és a tervezési feladatok szétválasztását. A diák (betűtípusok, hátterek, behúzások) tervezését a RevealJS-ben CSS segítségével írjuk le. Személyes CSS-készségemet a legjobban az adja át - de nem ijesztő, ha vannak, akik nálam sokkal ügyesebben és gyorsabban dolgoznak a CSS-sel. Ennek eredményeként kiderül, hogy a prezentáció rohamosan közeledő határideje miatt a Git-en keresztül egyszerre több fájlon is dolgozhatunk, és olyan gyorsaságot fejleszthetünk ki az együttműködésben, amely .pptx fájlok levélben történő küldésekor lehetetlen.
HTML oldal készítése diákkal
Az egyszerű szöveges források nagyszerűek, de hogyan lehet ezeket összeállítani magába a prezentációba?
Az AsciiDoctor egy Ruby nyelven írt projekt, és többféleképpen is futtatható. Először is telepítheti a Ruby nyelvet, és közvetlenül futtathatja az asciidoctort, ami valószínűleg a legközelebb áll a Ruby fejlesztőihez.
Ha nem akar bajlódni a Ruby telepítésével, használhatja a docker-képet , amelybe indításkor a VOLUME-on keresztül csatlakoztathatja a mappát a projekt forrásaival és az eredményt egy adott helyen kaphatja meg.
A választott lehetőség kissé váratlannak tűnik, de Java fejlesztőként ez a legkényelmesebb számomra. Nem igényel Ruby vagy docker telepítését, de lehetővé teszi diák létrehozását Maven szkript segítségével.
A lényeg az, hogy a projekt - A Ruby nyelv Java implementációja annyira jó, hogy szinte bármit, ami Ruby számára készült, futtatható Java gépen, és az AsciiDoctor futtatása a JRuby egyik legáltalánosabb felhasználási módja.
elérhetőség lehetővé teszi az AsciiDoctor dokumentáció összegyűjtését, amely egy Java projekt része (amelyet aktívan használunk). Ugyanakkor az AsciiDoctort és a JRuby-t a Maven automatikusan letölti, az AsciiDoctor pedig a JRuby környezetben fut: nem kell semmit telepíteni a gépre! (Csomag nélkül graphviz, amelyre akkor van szükség, ha GraphViz vagy PlantUML grafikát szeretne használni.) Egyszerűen helyezze el az .adoc fájlokat egy mappába src/main/asciidoc/. itt diagyűjtés diagramokkal.
Diák konvertálása PDF-be
Bár a diák HTML-változata meglehetősen önellátó, mégis szükséges a diák PDF-változata. Először is előfordul, hogy egyes konferenciákon, amelyek nem biztosítják az előadónak saját laptop csatlakoztatását, „szigorúan pptx vagy pdf formátumban” igényelnek diákat, anélkül, hogy elvárnák, hogy azok HTML-ben is legyenek. Másodszor, célszerű elküldeni a szervezőknek a diák szerkesztetlen változatát, ahogyan azok a beszámolóban szerepeltek, PDF formátumban, hogy a fájlt a konferencia anyagaiban közzétegyék.
Szerencsére a Node.js segédprogram kezeli ezt a feladatot. alapján épült — automatizálási rendszerek a Chrome böngésző kezelésére. A RevealJS prezentációt PDF formátumba konvertálhatja a paranccsal
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Két trükk a decktape indításakor, amelyeket próbálgatással kellett kitalálnunk:
-
felbontás paraméteren keresztül
-skétszeres margóval kell megadni, különben problémák adódhatnak az átalakítási eredményekkel -
a bemutató HTML verziójának URL-jében meg kell adni egy paramétert
?fragments=true, amely külön PDF-oldalt hoz létre a dia minden közbenső állapotához (például öt oldalt öt felsorolásponthoz, ha azok egymás után jelennek meg). Ez lehetővé teszi, hogy egy ilyen PDF-fájlt önmagában használjon prezentációként a jelentés során.
Automatikus összeszerelés és közzététel az interneten
Kényelmes, ha a diák automatikusan összeállításra kerülnek, amikor a verziókövető rendszert módosítják, és még kényelmesebb, ha az automatikusan összeállított diák nyilvános használatra felkerül az internetre. Az internetről származó diák könnyedén „lejátszható” a közönség előtt bármely internetre csatlakozó gépről és kivetítőről.
Mivel munkánk során GitHubot használunk, a CI rendszer természetes választása az , valamint kész prezentációk tartására - . A github.io mögött meghúzódó ötlet az, hogy bármely statikus tartalom egy fiókba kerüljön gh-pages projektje GitHubon elérhetővé válik a következő címen: <ваше имя>.gihub.io/<ваш проект>.
Töltse ki a TravisCI konfigurációs fájlt, beleértve az oldal HTML-verziójának összeállítását a Maven segítségével, PDF-be konvertálását decktape segítségével, és az eredmények feltöltését egy szálba gh-pages a github.io-n való közzétételhez úgy néz ki .
Egy ilyen projekt TravisCI oldalán való felépítéséhez környezeti változókat kell konfigurálnia
GH_REF— olyan érték, mint a github.com/inponomarev/csa-hbGH_TOKEN— GitHub hozzáférési token. A GitHubból szerezheti be a profilbeállításokban, a Fejlesztői beállítások -> Személyes hozzáférési tokenek menüpontban. Ha feltölt egy prezentációt egy nyilvános tárolóba, akkor ehhez a tokenhez elegendő az egyetlen hozzáférési szint megadása „Hozzáférés nyilvános tárolókhoz”.GH_USER_EMAIL/GH_USER_NAME— név/e-mail pár, amelynek nevében a szálra küldés történikgh-pages.
Így a prezentációs kód minden egyes véglegesítése a GitHubon azt eredményezi, hogy a diák automatikusan újraépül HTML és PDF formátumban, és újra feltöltődik a github.io webhelyre. (Természetesen csak azokat a prezentációkat töltse fel a github.io-ra, amelyeket végül nyilvánosságra szeretne hozni.)
Példák projektekre
Végezetül, itt található néhány példa olyan prezentációs projektekre, amelyek testreszabott Maven-szkriptekkel és Travis-CI-hez készült CI-konfigurációval rendelkeznek, amelyek klónozhatók és felhasználhatók saját prezentációs projektek létrehozásakor:
-
(beszédem a JPoint 2019-hez)
-
(a Heisenbug 2019-es jelentésem)
Viszlát Powerpoint! Nem hiszem, hogy valaha is szükségem lesz rád a technikai bemutatókhoz :)
Forrás: will.com