Duket se kam realizuar dhjetëra prezantime për kolegët, klientët dhe përpara publikut gjatë karrierës sime në IT. Më shumë vite, PowerPoint si mjet për përgatitjen e slajdeve ka qenë një zgjedhje natyrale dhe e besueshme për mua. Por këtë vit situata ka ndryshuar ndjeshëm. Nga shkurti deri në maj, pata mundësinë të flas në pesë konferenca, dhe slajdet e prezantimeve duhej të përgatiteshin në kohë të shpejtë, por me cilësi. U ngrit një pyetje për delegimin e asaj pjese të punës që kishte të bëjë me dizajnin vizual të slajdeve, te njerëz të tjerë. Një herë, përpiqem të punoj me një dizajner, duke dërguar skedarë .pptx përmes postës, por puna u shndërrua në kaos: askush s'e dinte se cila version e slajdeve ishte 'më e reja', dhe renditja 'në ikje' për shkak të ndryshimeve në versionet e PowerPoint dhe fontet në makinat tona. Dhe vendosa të provoj diçka të re. E provova, dhe që nga atëherë nuk mendoj të kthehem në PowerPoint.
ĂfarĂ« do tĂ« duam
Rreth një vit e gjysmë më parë, ne në kompani u dorëzuam nga përdorimi i Word për përgatitjen e dokumentacionit të projekteve, duke u përballur me të njëjtat probleme: ndërsa Word është i mirë për të shkruar një dokument të vogël, me rritjen e volumit, shfaqen vështirësi me punën e përbashkët dhe marrjen e një paraqitjeje cilësore dhe të unifikuar. Zgjedhja jonë ishte , dhe për këtë zgjedhje ne nuk kemi pushuar së kënaquri, por kjo është një temë për një artikull të veçantë. Rreth atij kohe, ne mësuam për efikasitetin e një nga parimet DevOps 'çdo gjë si kod', kështu që zgjedhja e kërkesave për teknologjinë e re të krijimit të slajdeve të prezantimit ishte shumë e qartë:
- Prezentimi duhet të jetë një skedë plain text në një gjuhë markup.
- Slajdet tanë janë për projektet e zhvillimit, prandaj markup duhet të lejojë lehtësisht, pa ndihmën e sistemeve të jashtme, të futen
- fragmente kodi me ndriçim sintaksor,
- diagrama të thjeshta si figura gjeometrike të lidhura me shigjeta,
- diagrama UML, skema dhe të tjera.
- Projekti i prezantimit duhet të ruhet në një sistem kontrolli versioni.
- Validimi dhe ndërtimi i slajdeve të gatshme duhet të kryhet në një sistem CI.
Sot ekzistojnë dy mundësi themelore për krijimin e slajdeve në gjuhët markup: paketa për LaTeX ose një nga frameworkët për krijimin e slajdeve në HTML/CSS (, , dhe shumë të tjera).
Megjithëse shpirtin tim e ka të lidhur me LaTeX, arsyetimi më sugjeronte se zgjidhja që do të përdorej jo vetëm nga unë, duhej të ishte në anën e një zgjidhjeje të njohur për një grup më të gjerë njerëzish. LaTeX-i nuk dihet nga të gjithë, dhe nëse praktika juaj e përditshme nuk është e lidhur me shkruajten e artikujve shkencorë, atëherë është e pamundur të gjeni kohë për të hyrë në botën e madhe dhe të ndërlikuar të këtij sistemi.
MegjithatĂ«, edhe njohja e HTML/CSS â nuk Ă«shtĂ« njĂ« aftĂ«si qĂ« Ă«shtĂ« e zakonshme pĂ«r tĂ« gjithĂ«: unĂ«, pĂ«r shembull, e njoh atĂ« larg nga masa. PĂ«r fatin tonĂ«, kĂ«tu ndihmon njĂ« mjet qĂ« na Ă«shtĂ« bĂ«rĂ« i njohur tashmĂ« AsciiDoctor: konvertuesi lejon krijimin e slajdeve RevealJS, duke pĂ«rdorur markup-asciidoctor. Dhe ajo Ă«shtĂ« e thjeshtĂ« pĂ«r t'u mĂ«suar dhe e aksesueshme pĂ«r tĂ« gjithĂ«!
Si të kodifikoni slajdet
Për të kuptuar thelbin e kodifikimit të slajdeve në AsciiDoctor, më e lehtë është të japësh shembuj konkretë. Të gjithë ata janë nga slajdet reale që kam përgatitur për prezantimet e mia në këtë vit.
Një slajd me titull dhe një listë me pika që hapen njëra pas tjetrës:
== Pse na nevojitet Streams API?
[%step]
* Procesim real-time të rrjedhave
* API të ngjashëm me rrjedhën (map / reduce)
* NĂ«n kapot:
** Komitet automatik i offsetit
** Ribalancimi
** Gjendja e brendshme e procesorëve
** Zhvillim i lehtëRezultati
Titulli dhe një fragment kodi me ndriçim sintaksor:
== Kafka Streams API: struktura e përgjithshme e aplikacionit KStreams
[source,java]
----
StreamsConfig config = ...;
//Këtu vendosim opsione të ndryshme
Topology topology = new StreamsBuilder()
//Këtu ndërtojmë topologjinë
....build();
----Rezultati
Në procesin e përgatitjes për prezantim, shembujt demonstrues të kodit ndryshojnë disa herë dhe përmirësohen, kështu që mundësia për të kopjuar dhe ngjitur shpejt 'kodin e papërfunduar' direkt në slajd, është e paçmuar për të siguruar aktualitetin e shembujve dhe pa u shqetësuar për ndriçimin sintaksor.
Titulli, ilustrimi dhe teksti (ndërsa e organizojmë slajdin në qeliza ):
== Kafka Streams in Action
[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
âKafka Streams in Actionâ, NĂ«ntor 2018
* Shembuj kodi për Kafka 1.0
|===Rezultati
Ndonjëherë titulli nuk është i nevojshëm, ndërsa për ilustruar idenë tuaj mjafton vetëm një imazh që mbulon të gjithë ekranin:
[%notitle]
== Të jetosh në legacë nuk është e lehtë
image::swampman.jpg[canvas, size=cover]Rezultati
Shpesh, ideja duhet tĂ« mbĂ«shtetet me njĂ« diagram tĂ« thjeshtĂ«, si 'kufizime tĂ« lidhura me shigjeta'. FatmirĂ«sisht, AsciiDoctor Ă«shtĂ« i integruar me sistemin â njĂ« gjuhĂ« qĂ« lejon pĂ«rshkrimin e diagrameve grafike bazuar nĂ« pĂ«rshkrimin e skajeve dhe lidhjeve midis tyre. Duhet mĂ«suar Graphviz, por duke u bazuar nĂ« shembujt ekzistues, Ă«shtĂ« mjaft e lehtĂ«! Ja si duket:
== ShkruajmĂ« âBet Totalling Appâ
Sa është shuma e pagesave për bastet e bëra, nëse rezultati është i tillë?
[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;}
}
-----Rezultati
NĂ« rastin kur Ă«shtĂ« e nevojshme tĂ« redaktohet etiketimi nĂ« figurĂ«, tĂ« ndryshohet drejtimi i shenjĂ«s etj. â kjo mund tĂ« bĂ«het direkt nĂ« kodin e prezantimit, nĂ« vend qĂ« tĂ« tĂ«rhiqni diku imazhin dhe ta ri-insertoni atĂ« nĂ« slajd. Kjo e rrit ndjeshĂ«m shpejtĂ«sinĂ« e punĂ«s mbi slajdet.
Shembulli më i komplikuar:
== Ndërtimi i papërsëritshëm
[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=<merge blocked>]
{rank = same; u; r0; b4;}
}
-----Rezultati
Për më tepër, është e lehtë të eksperimentoni me Graphviz dhe të rregulloni imazhet në faqen .
Në fund, nëse dëshiron të vendosësh një diagram fluksi, diagram klasash apo një diagram tjetër të standardizuar në slajd, mund të ndihmojë një tjetër sistem i integruar me AsciiDoctor, . Në lidhje me mundësitë e mëdha të PlantUML, kolegu im Nikolai Potashnikov shkroi .
Transformimi i projektit tĂ« prezantimit nĂ« kod, i cili ruhet nĂ« sistemin e kontrollit tĂ« versioneve, mundĂ«son organizimin e punĂ«s sĂ« pĂ«rbashkĂ«t mbi prezantimin, kryesisht ndarjen e detyrave pĂ«r krijimin e pĂ«rmbajtjes dhe dizajnin. Dizajni i slajdeve (fonts, sfondet, mospĂ«rputhjet) nĂ« RevealJS pĂ«rshkruhet pĂ«rmes CSS. AftĂ«sia ime personale pĂ«r tĂ« punuar me CSS ilustrohet mĂ« sĂ« miri prej â por kjo nuk Ă«shtĂ« problematik, kur ka njerĂ«z qĂ« punojnĂ« me CSS shumĂ« mĂ« shpejt dhe mĂ« aftĂ« se unĂ«. Si rezultat, nĂ« kushtet e njĂ« afati tĂ« ngushtĂ« pĂ«r prezantimin, ne mund tĂ« punojmĂ« njĂ«kohĂ«sisht mbi dosje tĂ« ndryshme pĂ«rmes Git dhe tĂ« rrisim shpejtĂ«sinĂ« e punĂ«s sĂ« pĂ«rbashkĂ«t, e cila nuk Ă«shtĂ« e mundur me dĂ«rgimin e skedave .pptx pĂ«rmes emailit.
Krijimi i një faqe HTML me slajde
Burimet plain text janë të shkëlqyera, por si t'i kompilohet ato në prezantimin vetë?
AsciiDoctor është një projekt i shkruar në Ruby, dhe mund të niset në disa mënyra. Së pari, ju mund të instaloni gjuhën Ruby dhe të niste asciidoctor direkt, që ndoshta do të jetë më e afërt për ata që janë zhvillues Ruby.
Nëse nuk doni të angazhoheni me instalimin e Ruby, mund të përdorni imazhin docker , i cili në momentin e aktivizimit mund të lidhet me një folder të burimeve të projektit dhe në një vend të caktuar të merrni rezultatin.
Opsioni që kam zgjedhur mund të duket paksa befasues, por është më e përshtatshme për mua si zhvillues Java. Ai nuk kërkon as instalimin e Ruby, as praninë e docker, por lejon që të gjenerohen slajde përmes skenarit Maven.
Kjo Ă«shtĂ« pĂ«r shkak se projekti â implementimi Java i gjuhĂ«s Ruby â Ă«shtĂ« aq i mirĂ« sa lejon qĂ« tĂ« niset nĂ« makinĂ«n Java pothuajse çdo gjĂ« qĂ« Ă«shtĂ« krijuar pĂ«r Ruby, dhe nisja e AsciiDoctor Ă«shtĂ« njĂ« nga aplikimet mĂ« tĂ« zakonshme tĂ« JRuby.
Prania lejon të mbledhim dokumentacionin AsciiDoctor, i cili është një pjesë e projektit Java (me të cilin ne jemi duke punuar aktivisht). Në të njëjtën kohë, AsciiDoctor dhe JRuby shkarkohen automatikisht nga Maven, dhe AsciiDoctor ekzekutohet në ambientin e JRuby: nuk ka nevojë të instaloni asgjë në makinë! (Përveç paketës graphviz, e cila kërkohet nëse dëshironi të përdorni grafikat GraphViz ose PlantUML.) Mjafton të vendosni skedat tuaja .adoc në dosjen src/main/asciidoc/. Ja , që ndalon slajde me diagrame.
Konvertoni slajdet në PDF
Megjithëse versioni HTML i slajdeve është plotësisht i vetëqëndrueshëm, ndonjëherë është e nevojshme të kesh gjithashtu një variant PDF të slajdeve. Së pari, ndodhin raste kur në disa konferenca, që nuk u ofrojnë mundësinë folësit për të lidhur laptopin e tij, kërkojnë slajde "rrallë në formatin pptx ose pdf", pa pritur që ato janë edhe në HTML. Së dyti, është një normë e mirë të dërgosh organizatorëve një version të pandryshuar të slajdeve të tua ashtu siç u janë paraqitur në prezantim, në formatin PDF për të publikuar skedarin në materialet e konferencës.
FatmirĂ«sisht, me kĂ«tĂ« detyrĂ« merret utilitarja Node.js , e cila Ă«shtĂ« e ndĂ«rtuar mbi â njĂ« sistem automatizimi i menaxhimit tĂ« shfletuesit Chrome. TĂ« konvertohet prezantimi RevealJS nĂ« PDF mund tĂ« bĂ«het me komandon
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Dy truk të shumtë gjatë ekzekutimit të decktape, me të cilat arrita pas metodave të provimit dhe gabimit:
rezolutën përmes parametrave
-sduhet caktuar me një rezerva dyfish, përndryshe mund të ketë probleme me rezultatet e konvertimitnë URL-në e versionit HTML të prezentimit duhet të kaloni parametrin
?fragments=true, i cili do të lejojë krijimin e një faqe PDF të veçantë për çdo gjendje ndërmjetëse të diapozitivit tuaj (për shembull, pesë faqe për pesë pika në listë, nëse ato tregohen një pas një). Kjo do të lejojë që ky PDF të përdoret vetë si një prezentim gjatë fjalimit.
Ndërtimi dhe publikimi automatik në web
ĂshtĂ« e pĂ«rshtatshme kur diapozitivĂ«t ndĂ«rtohen automatikisht kur ndodhin ndryshime nĂ« sistemin e kontrollit tĂ« versioneve, dhe akoma mĂ« e pĂ«rshtatshme kur diapozitivĂ«t e pĂ«rgatitur automatikisht publikohen nĂ« internet pĂ«r pĂ«rdorim nga tĂ« gjithĂ«. DiapozitivĂ«t nga interneti mund tĂ« 'luajnĂ«' lehtĂ«sisht pĂ«rpara audiencĂ«s nga çfarĂ«do makine qĂ« Ă«shtĂ« e lidhur me internetin dhe projektorin.
PĂ«r sa kohĂ« qĂ« ne pĂ«rdorim GitHub nĂ« punĂ«n tonĂ«, zgjedhja e natyrshme e sistemit CI Ă«shtĂ« , dhe pĂ«r hostimin e prezentimeve tĂ« gatshme â . Ideja e github.io Ă«shtĂ« se çdo pĂ«rmbajtje statike e vendosur nĂ« degĂ«n gh-pages tĂ« projektit tuaj nĂ« GitHub bĂ«het e disponueshme nĂ« adresĂ«n .gihub.io/.
Skedari i plotë i konfigurimit TravisCI, i cili përfshin ndërtimin e versionit HTML të faqes duke përdorur Maven, konvertimin në PDF me ndihmën e decktape dhe ngarkimin e rezultateve në degën gh-pages për publikim në github.io, duket .
Për ndërtimin e një projekti të tillë në anën e TravisCI, është e nevojshme të konfigurohen variablat e mjedisit
GH_REFâ njĂ« vlerĂ« si github.com/inponomarev/csa-hbGH_TOKENâ tokeni i qasjes nĂ« GitHub. Mund ta merrni nĂ« GitHub nĂ« parametrat e profilit tuaj, CilĂ«simet e Zhvilluesve -> Tokenet e Qasjes Personale. NĂ«se po publikoni prezentimin nĂ« njĂ« depo publike, pĂ«r kĂ«tĂ« token mjafton tĂ« jepni vetĂ«m nivelin 'Qasje nĂ« depo publike'.GH_USER_EMAIL/GH_USER_NAMEâ njĂ« çift emĂ«r/email, nga i cili do tĂ« realizohet push nĂ« degĂ«gh-pages.
Kështu, çdo commit i kodit të prezentimit në GitHub çon në ndërtimin automatik të diapozitivëve në formatet HTML dhe PDF dhe ngarkimin e tyre në github.io. (Sigurisht, duhet të publikoni vetëm ato prezentime në github.io që dëshironi të bëni publike.)
Shembuj projektesh
E fundit - lidhje për disa shembuj të projekteve të prezentimeve me skriptet Maven dhe konfigurimin CI për Travis-CI, të cilat mund të klononi dhe përdorni për krijimin e projekteve tuaja të prezentimeve:
(prezantimi im për JPoint 2019)
(prezantimi im për Heisenbug 2019)
LamtumirĂ«, Powerpoint! Nuk mendoj se do tĂ« kem nevojĂ« pĂ«r ty ndonjĂ«herĂ« pĂ«r prezentimet teknike đ
Burimi: habr.com
