Duket se më ka rënë të bëj dhjetëra prezantime për kolegët, klientët dhe paraqitje publike gjatë karrierës time në IT. Shumë vite PowerPoint mbeti për mua zgjedhja e natyrshme dhe e besueshme për krijimin e slajdëve. Por këtë vit situata ndryshoi ndjeshëm. Nga shkurt deri në maj, pata rastin të flas në pesë konferenca, dhe slajdët për prezantimet duhej të ishin të gatshëm në kohë të shkurtër, por me cilësi të lartë. Pashë nevojën për të deleguar atë pjesë të punës që kishte të bënte me dizajnin vizual të slajdëve te njerëz të tjerë. Një herë provoja të punoja me një dizajner duke i dërguar skedarë .pptx me email, por puna u shndërrua në haos: askush nuk e dinte se cila version e slajdëve ishte 'më e re', dhe formatimi u prish për shkak të ndryshimeve të versioneve të PowerPointit dhe fonteve në makinat tona. Dhe vendosa të provoj diçka të re. Provova, dhe që atëherë nuk mendoj të kthehem te PowerPoint.
ĂfarĂ« duam
Rreth një vit e gjysmë më parë, kompania jonë hodhi poshtë përdorimin e Word për krijimin e dokumentacionit të projekteve, përballur me të njëjtat probleme: ndonëse Word është i mirë për të shkruar një dokument të vogël, ndërsa rritet vëllimi, hasim vështirësi me punën e përbashkët dhe arritjen e një paraqitje cilësore dhe të unifikuar. Zgjedhja jonë ra mbi , dhe për këtë zgjedhje nuk kemi ndaluar së gëzuari, por kjo është një temë për një artikull të veçantë. Pothuajse atëherë ne kuptuam efikasitetin e një nga principeve DevOps 'e gjitha si kod', prandaj zgjedhja e kërkesave për teknologjinë e re të krijimit të slajdëve prezantues ishte mjaft e qartë:
- Prezantimi duhet të përbëhet nga një skedar plain text në një gjuhë markimi.
- Slajdët tanë flasin për projekte zhvillimi, prandaj markimi duhet të lejojë që lehtësisht, pa nevojën për ndihmën e sistemeve të jashtme, të fusim
- fragments të kodit me ndriçim sintaksor,
- diagrame të thjeshta në formën e figurave gjeometrike, të lidhura me shkronja,
- diagrame UML, diagramet e bllokut dhe të tjera.
- Projekti i prezantimit duhet të ruhet në një sistem kontrolli versioni.
- Validimi dhe përgatitja e slajdëve të gatshëm duhet të realizohet në sistemin CI.
Aktualisht janë dy mundësi themelore për krijimin e slajdëve në gjuhët e markimit: paketa për LaTeX ose një nga framework-et për krijimin e slajdëve në HTML/CSS (, , dhe shumë të tjera).
Edhe pse shpirtin e kam për LaTeX, mendja më tha se zgjedhja e zgjidhjes, që nuk do ta përdor vetëm unë, duhet të jetë në anën e një zgjidhjeje që është e njohur për një publik më të gjerë. LaTeX nuk e dinë të gjithë, dhe nëse praktika juaj e përditshme nuk është e lidhur me shkrimin e artikujve shkencorë, atëherë e vështirë se do keni kohë për t'u thelluar në këtë botë të madhe dhe të komplikuar të kësaj sistemi.
Megjithatë, zotërimi i HTML/CSS nuk është thënë se është një aftësi e zakonshme: unë, për shembull, nuk e zotëroj atë plotësisht. Me fat, këtu ndihmon AsciiDoctor i njohur për ne: konvertori lejon krijimin e slajdeve RevealJS duke përdorur shënjimin AsciiDoctor. Dhe kjo është shumë e thjeshtë për t'u mësuar dhe e arritshme për çdo njeri!
Si të kodoni slajde
Për të kuptuar thelbin e kodimit të slajdeve në AsciiDoctor, më së lehti është të japësh shembuj konkretë. Të gjithë ato janë nga slajdet reale që kam bërë për përshëndetjet e mia në konferenca këtë vit.
Slajdi me titull dhe një listë me pika që hapen një pas një:
== Pse na nevojitet Streams API?
[%step]
* Procesimi në kohë reale i rrjedhave
* API i ngjashëm me rrjedhën (map / reduce)
* NĂ«n kapak:
** Angazhimi automatik i offset-it
** Ribalancimi
** Gjendja e brendshme e procesuesve
** Shkallëzim i lehtëRezultati
Titulli dhe një fragment kodi burimor me nënvizim sintaksor:
== Kafka Streams API: struktura e përgjithshme e aplikacionit KStreams
[source,java]
----
StreamsConfig config = ...;
// KĂ«tu vendosim disa opsione
Topology topology = new StreamsBuilder()
// Këtu ndërtojmë topologjinë
....build();
----Rezultati
Gjatë përgatitjes për ligjëratën, shembujt demonstrues të kodit kalojnë nëpër ripunime dhe përmirësime të shumta, kështu që është e çmuar mundësia për të kopjuar dhe ngjitur shpejt "kodin e papërpunuar" direkt në slajd, duke siguruar aktualitetin e shembullit demo dhe pa u shqetësuar për nënvizimin sintaksor.
Titulli, ilustacioni dhe teksti (ndërsa e përbëjmë shtrirjen mbi slajd në qelizat e ):
== Kafka Streams in Action
[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
âKafka Streams in Actionâ, NĂ«ntor 2018
* Shembujt e kodit për Kafka 1.0
|===Rezultati
Ndonjëherë titulli nuk nevojitet, dhe për t'iu përshtatur mendimit tuaj nevojitet thjesht një imazh në të gjithë ekranin:
[%notitle]
== Të jetosh në legjendë nuk është e lehtë
image::swampman.jpg[canvas, size=cover]Rezultati
Shpesh mendimi duhet tĂ« mbĂ«shtetet me njĂ« diagram tĂ« thjeshtĂ«, nĂ« formĂ«n e "katrorĂ«ve tĂ« lidhur me shigjetat". FatmirĂ«sisht, AsciiDoctor integrohet me sistemin â njĂ« gjuhĂ« qĂ« lejon pĂ«rshkrimin e diagramĂ«ve grafike mbi bazĂ«n e pĂ«rshkrimit tĂ« kulmave dhe lidhjeve midis tyre. ĂshtĂ« e nevojshme tĂ« mĂ«soni Graphviz, por duke u bazuar nĂ« shembujt e disponueshĂ«m, Ă«shtĂ« mjaft e lehtĂ« ta bĂ«ni kĂ«tĂ«! Ja si duket:
== Shkruajmë "Bet Totalling App"
Cila është shuma e pagesave për bastet e bëra, nëse rezultati del siç pritet?
[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="Dyqani Vendor"; 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 etiketa nĂ« figurĂ«, tĂ« ndryshohet drejtimi i shigjetĂ«s dhe tĂ« tjera â kjo mund tĂ« bĂ«het drejtpĂ«rdrejt nĂ« kodin e prezantimit, nĂ« vend qĂ« tĂ« ripikturohet ndonjĂ«herĂ« figura dhe tĂ« futet pĂ«rsĂ«ri nĂ« slajd. Kjo rrit ndjeshĂ«m shpejtĂ«sinĂ« e punĂ«s mbi slajdet.
Një shembull më i komplikuar:
== Ndërtimi i pa riprodhueshë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="dega kryesore" ];
r0-> r2 []; b1 -> b4; r1->b1
r1[label="150ndertimin"]
b1[label="± 0ndertimin"]
b4[label="± 0ndertimin"]
b4->r2
r2[label="163ndertimin", color="red", xlabel=<bllokimi i bashkimit>]
{rank = same; u; r0; b4;}
}
-----Rezultati
Nga ana tjetër, është e përshtatshme të eksperimentoni me Graphviz dhe të rregulloni figurat në faqen .
Më në fund, nëse është e nevojshme të futni një diagram fluksi, diagram klasash ose ndonjë diagram tjetër të standardizuar në slajd, atëherë në këtë rast mund të ndihmojë një sistem tjetër i integruar me AsciiDoctor, . Për mundësitë e gjera të PlantUML, kolegu im Nikolay Potashnikov ka shkruar .
Kthimi i projektit tĂ« prezantimit nĂ« kod, i ruajtur nĂ« sistemin e kontrollit tĂ« versioneve, jep mundĂ«sinĂ« tĂ« organizoni punĂ«n bashkĂ«punuese mbi prezantimin, sĂ« pari duke ndarĂ« detyrat e krijimit tĂ« pĂ«rmbajtjes dhe dizajnit. Dizajni i slajdeve (fontet, sfondet, hapĂ«sirat) nĂ« RevealJS pĂ«rshkruhet me CSS. AftĂ«sia ime personale pĂ«r tĂ« menaxhuar CSS-nĂ« mĂ« sĂ« miri e shpreh â por kjo nuk Ă«shtĂ« njĂ« problem, kur ka njerĂ«z qĂ« punojnĂ« me CSS shumĂ« mĂ« shpejt dhe mĂ« mirĂ« se unĂ«. NĂ« fund, rezulton se nĂ« kushtet e afatit tĂ« afĂ«rt pĂ«r prezantimin, ne mund tĂ« punojmĂ« njĂ«kohĂ«sisht mbi skedarĂ« tĂ« ndryshĂ«m pĂ«rmes Git dhe tĂ« zhvillojmĂ« shpejtĂ«sinĂ« e bashkĂ«punimit, qĂ« nuk Ă«shtĂ« e mundur me shkĂ«mbimin e skedarĂ«ve .pptx pĂ«rmes postĂ«s.
Ndërtimi i faqes HTML me slajde
Teksti i thjeshtë - burimet janë të shkëlqyera, por si t'i kompilosh ato në vetë prezantimin?
AsciiDoctor është një projekt i shkruar në Ruby dhe mund të ekzekutohet në disa mënyra. Së pari, mund të instalosh gjuhën Ruby dhe të ekzekutosh asciidoctor direkt, që ndoshta do të jetë më afër zhvilluesve të Ruby.
Nëse nuk dëshiron të merresh me instalimin e Ruby, mund të përdorësh imazhin docker , i cili në aktivizim lejon lidhjen e një dosjeje me burimet e projektit përmes VOLUME dhe të marrësh rezultatin në vendin e caktuar.
Mënyra, në të cilën ndava unë, mund të duket disi befasuese, por është më e përshtatshme për mua si zhvillues Java. Ajo nuk kërkon as instalimin e Ruby, as prani të docker, por lejon të gjenerosh slidet me një skenar Maven.
ĂĂ«shtja Ă«shtĂ« se projekti â zbatimi Java i gjuhĂ«s Ruby â Ă«shtĂ« aq i shkĂ«lqyer, saqĂ« lejon tĂ« ekzekutosh nĂ« makinerinĂ« Java pothuajse gjithçka qĂ« Ă«shtĂ« krijuar pĂ«r Ruby, dhe ekzekutimi i AsciiDoctor Ă«shtĂ« njĂ« nga aplikimet mĂ« tĂ« zakonshme tĂ« JRuby.
Prania lejon mbledhjen e dokumentacionit AsciiDoctor, që është pjesë e projektit Java (çka ne e përdorim aktivisht). Në të njëjtën kohë, AsciiDoctor dhe JRuby shkarkohen automatikisht nga Maven dhe AsciiDoctor ekzekutohet në mjedisin JRuby: nuk ka nevojë të instalohet asgjë në makinë! (Përveç paketës graphviz, e cila nevojitet nëse dëshiron të përdorësh grafikën GraphViz ose PlantUML.) Mjafton të vendosësh skedarët tuaj .adoc në dosjen src/main/asciidoc/. Ja , që mbledh slidet me diagrame.
Konvertimi i slideve në PDF
Megjithëse versioni HTML i slideve është mjaft i vetëqëndrueshëm, nganjëherë është e nevojshme të kemi një variant PDF të slideve gjithashtu. Së pari, ndodh që në disa konferenca, që nuk ofrojnë mundësinë për lidhjen e laptopit të tyre, kërkojnë slidet "striç në formatin pptx ose pdf", pa pritur që ata mund të jenë edhe në HTML. Së dyti, është një normë e mirë të dërgosh organizatorëve një variant të pandryshueshëm të slideve të tua në formën në të cilën janë treguar gjatë prezantimit, në format PDF për publikimin e skedarit në materialet e konferencës.
PĂ«r fat tĂ« mirĂ«, me kĂ«tĂ« detyrĂ« merret utilita e Node.js , e cila Ă«shtĂ« ndĂ«rtuar mbi â njĂ« sistem i automatizimit tĂ« kontrollit tĂ« shfletuesit Chrome. PĂ«r tĂ« konvertuar njĂ« prezantim RevealJS nĂ« PDF, mund tĂ« pĂ«rdorĂ«sh komandĂ«n
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Dy truk në ekzekutimin e decktape, për të cilat arrita me metodën e provave dhe gabimeve:
rezoluta përmes parametrave
-sduhet të caktohet me një rezervë dyfish, përndryshe mund të ketë probleme me rezultatet e konvertimitnë URL-në e versionit HTML të prezantimit duhen kaluar parametra
?fragments=true, që do të mundësojë krijimin e një faqe PDF të veçantë për çdo gjendje të mesme të slajdit tuaj (p.sh., pesë faqe për pesë pika liste, nëse ato shfaqen një nga një). Kjo do të lejojë përdorimin e këtij PDF-i si një prezantim gjatë një daljeje.
Ndërtime automatike dhe publikim në web
ĂshtĂ« e pĂ«rshtatshme kur slajdet ndĂ«rlidhen automatikisht kur ka ndryshime nĂ« sistemin e kontrollit tĂ« versioneve, dhe akoma mĂ« e kĂ«ndshme kur slajdet e pĂ«rgatitura automatikisht publikohen nĂ« internet pĂ«r pĂ«rdorim tĂ« pĂ«rgjithshĂ«m. Slajdet nga interneti mund tĂ« 'luhen' lehtĂ«sisht pĂ«rpara audiencĂ«s nga çdo makinĂ« e lidhur me internetin dhe projektorin.
Duke qenĂ« se ne pĂ«rdorim GitHub nĂ« punĂ«n tonĂ«, zgjedhja e natyrshme pĂ«r sistemin CI Ă«shtĂ« , ndĂ«rsa pĂ«r hostimin e prezantimeve 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, që përfshin ndërtimin e versionit HTML të faqes me 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 këtij projekti në anën e TravisCI duhet të konfigurohen ndryshimet mjedisore
GH_REFâ vlera nĂ« formĂ«n github.com/inponomarev/csa-hbGH_TOKENâ tokeni i aksesit nĂ« GitHub. Mund tĂ« merret nĂ« GitHub nĂ« cilĂ«simet e profilit tuaj, Developer Settings -> Personal Access Tokens. NĂ«se po publikoni njĂ« prezantim nĂ« njĂ« depo publike, pĂ«r kĂ«tĂ« token mjafton tĂ« specifikoni nivelin e vetĂ«m tĂ« aksesit 'Access public repositories'.GH_USER_EMAIL/GH_USER_NAMEâ çifti emĂ«r/email, me tĂ« cilin do tĂ« bĂ«het dĂ«rgimi nĂ« degĂ«ngh-pages.
Kështu, çdo komit i kodit të prezantimit në GitHub çon në rindërtimin automatik të slajdeve në formatet HTML dhe PDF dhe rifiksen e tyre në github.io. (Sigurisht, duhet të publikoni në github.io vetëm ato prezantime që dëshironi t'i bëni publike në fund.)
Shembuj projektesh
SĂ« fundi â lidhjet pĂ«r disa shembuj projektesh prezantimesh me skripte Maven tĂ« konfigurura dhe konfigurime CI pĂ«r Travis-CI, tĂ« cilat mund tĂ« kopjohen dhe pĂ«rdoren pĂ«r krijimin e projekteve tĂ« mia tĂ« prezantimit:
(referati im për JPoint 2019)
(referati im për Heisenbug 2019)
Mirupafshim, Powerpoint! Nuk mendoj se do tĂ« mĂ« nevojitesh ndonjĂ«herĂ« pĂ«r prezantime teknike đ
Burimi: habr.com
