Sa akong hunahuna nakahatag ako daghang mga presentasyon sa mga kauban, kliyente, ug pagsulti sa publiko sa akong karera sa IT. Sulod sa daghang mga tuig, ang Powerpoint usa ka natural ug kasaligan nga kapilian alang kanako ingon usa ka himan sa paghimo sa slide. Apan karong tuiga ang sitwasyon nausab sa qualitatively. Gikan sa Pebrero hangtod Mayo, nakahigayon ko sa pagsulti sa lima ka komperensya, ug ang mga slide alang sa mga taho kinahanglang andamon sa mubo nga panahon, apan adunay taas nga kalidad. Mitungha ang pangutana bahin sa pagdelegar niana nga bahin sa trabaho bahin sa biswal nga disenyo sa mga slide ngadto sa ubang mga tawo. Kas-a ako misulay sa pagtrabaho uban sa usa ka tigdesinyo, nagpadala sa .pptx nga mga file pinaagi sa koreo, apan ang trabaho nahimong kagubot: walay usa nga nakahibalo kung unsang bersyon sa mga slide ang "labing bag-o", ug ang layout "naglihok" tungod sa kalainan sa Powerpoint mga bersyon ug mga font sa among mga makina. Ug nakahukom ko nga mosulay og bag-ong butang. Gisulayan nako kini, ug sukad niadto wala na ko maghunahuna nga mobalik sa Powerpoint.
Unsa ang atong gusto
Mga usa ka tuig ug tunga ang milabay, ang among kompanya mihunong sa paggamit sa Word sa paghimo sa dokumentasyon sa proyekto, nga nakasugat sa parehas nga mga problema: bisan kung ang Word maayo alang sa pag-type sa usa ka gamay nga dokumento, samtang ang gidaghanon motubo, ang mga kalisud moabut uban ang kolaborasyon ug pagkuha sa taas nga kalidad ug hiniusa nga disenyo. Ang among pagpili nahulog sa , ug dili kami mohunong sa pagmaya niini nga pagpili, apan kini usa ka hilisgutan alang sa usa ka bulag nga artikulo. Sa parehas nga oras, nahibal-an namon ang pagka-epektibo sa usa sa mga prinsipyo sa DevOps nga "tanan isip code", busa ang pagpili sa mga kinahanglanon alang sa bag-ong teknolohiya alang sa paghimo sa mga slide sa presentasyon klaro kaayo:
- Ang presentasyon kinahanglang usa ka plain text file sa usa ka markup language.
- Ang among mga slide bahin sa mga proyekto sa pag-uswag, mao nga ang markup kinahanglan nga dali nga isal-ot, nga dili mogamit sa mga eksternal nga sistema
- mga tipik sa code nga adunay pag-highlight sa syntax,
- yano nga mga diagram sa porma sa geometric nga mga porma nga konektado sa mga pana,
- UML diagrams, flowcharts ug uban pa.
- Ang draft sa presentasyon kinahanglang tipigan sa usa ka version control system.
- Ang pag-validate ug pag-assemble sa nahuman nga mga slide kinahanglan nga buhaton sa usa ka sistema sa CI.
Karon, adunay duha ka sukaranan nga mga kapilian sa paghimo og mga slide sa mga markup nga pinulongan: package para sa LaTeX o usa sa mga frameworks sa paghimo og mga slide gamit ang HTML/CSS (, , ug uban pa).
Bisan kung ang akong kalag anaa sa LaTeX, ang akong hunahuna nagdiktar nga ang pagpili sa usa ka solusyon nga dili lang ako ang gamiton kinahanglan nga sa kilid sa usa ka solusyon nga pamilyar sa usa ka mas lapad nga lingin sa mga tawo. Dili tanan nahibal-an ang LaTeX, ug kung ang imong adlaw-adlaw nga pagpraktis walaβy kalabotan sa pagsulat sa mga artikulo sa siyensya, nan dili ka tingali adunay oras sa pagsulud sa imong kaugalingon sa dako, makuti nga kalibutan sa kini nga sistema.
Bisan pa, ang pagkahanas sa HTML/CSS dili eksakto nga kaylap nga kahanas: Ako, pananglitan, layo sa hingpit nga kahanas niini. Maayo na lang, ang pamilyar na nga AsciiDoctor moabut sa pagluwas: usa ka converter nagtugot kanimo sa paghimo sa mga slide sa RevealJS gamit ang AsciiDoctor markup. Ug kini sayon ββnga makat-on ug accessible sa tanan!
Giunsa ang pag-code sa mga slide
Aron masabtan ang esensya sa coding slide sa AsciiDoctor, ang labing kadali nga paagi mao ang paghatag piho nga mga pananglitan. Kining tanan gikan sa aktuwal nga mga slide nga akong gihimo para sa akong mga presentasyon sa komperensya karong tuiga.
Usa ka slide nga adunay usa ka titulo ug usa ka lista sa mga aytem nga nagbukas sa sunodsunod:
== ΠΠ°ΡΠ΅ΠΌ Π½Π°ΠΌ Streams API?
[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* ΠΠΎΠ΄ ΠΊΠ°ΠΏΠΎΡΠΎΠΌ:
** ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ offset commit
** Π Π΅Π±Π°Π»Π°Π½ΡΠΈΡΠΎΠ²ΠΊΠ°
** ΠΠ½ΡΡΡΠ΅Π½Π½Π΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ²
** ΠΠ΅Π³ΠΊΠΎΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅resulta
Header ug source code snippet nga adunay syntax highlighting:
== Kafka Streams API: ΠΎΠ±ΡΠ°Ρ ΡΡΡΡΠΊΡΡΡΠ° KStreams-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ
[source,java]
----
StreamsConfig config = ...;
//ΠΠ΄Π΅ΡΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π²ΡΡΠΊΠΈΠ΅ ΠΎΠΏΡΠΈΠΈ
Topology topology = new StreamsBuilder()
//ΠΠ΄Π΅ΡΡ ΡΡΡΠΎΠΈΠΌ ΡΠΎΠΏΠΎΠ»ΠΎΠ³ΠΈΡ
....build();
----resulta
Sa pag-andam alang sa usa ka pakigpulong, ang mga demo sa code moagi sa balik-balik nga mga pagbag-o ug pagpaayo, mao nga ang abilidad sa dali nga pagkopya ug pag-paste sa "hilaw nga code" nga direkta sa usa ka slide hinungdanon, pagsiguro nga ang demo labing bag-o nga wala nabalaka bahin sa pag-highlight sa syntax.
Titulo, ilustrasyon ug teksto (layout sa slide gihimo sa mga cell ):
== Kafka Streams in Action
[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
βKafka Streams in Actionβ, November 2018
* ΠΡΠΈΠΌΠ΅ΡΡ ΠΊΠΎΠ΄Π° Π΄Π»Ρ Kafka 1.0
|===resulta
Usahay dili kinahanglan ang usa ka titulo, ug aron mailustrar ang imong punto kinahanglan nimo ang usa ka full-screen nga imahe:
[%notitle]
== ΠΠΈΡΡ Π² Π»Π΅Π³Π°ΡΠΈ Π½Π΅Π»Π΅Π³ΠΊΠΎ
image::swampman.jpg[canvas, size=cover]resulta
Kasagaran ang usa ka ideya kinahanglan nga suportahan sa usa ka yano nga diagram, sa porma sa "mga kwadro nga konektado sa mga pana." Maayo na lang, ang AsciiDoctor gisagol sa sistema β usa ka lengguwahe nga nagtugot kanimo sa paghulagway sa mga diagram sa graph base sa paghulagway sa mga vertices ug mga koneksyon tali kanila. Ang Graphviz nagkinahanglan og kurba sa pagkat-on, apan base sa mga pananglitan nga gihatag, sayon ββra kaayo! Mao kini ang hitsura niini:
== ΠΠΈΡΠ΅ΠΌ β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;}
}
-----resulta
Sa kaso kung gikinahanglan nga i-edit ang caption sa numero, usba ang direksyon sa pana, ug uban pa, mahimo kini direkta sa code sa presentasyon, imbis nga i-redraw ang litrato sa usa ka lugar ug i-reinsert kini sa slide. Kini kamahinungdanon nagdugang sa katulin sa pagtrabaho sa mga slide.
Usa ka mas komplikado nga pananglitan:
== ΠΠ΅Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΠΌΠ°Ρ ΡΠ±ΠΎΡΠΊΠ°
[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;}
}
-----resulta
Pinaagi sa dalan, sayon ββββang pag-eksperimento sa Graphviz ug pag-debug sa mga imahe sa panid .
Sa katapusan, kung kinahanglan nimo nga magsal-ot sa usa ka flowchart, diagram sa klase o uban pang standardized nga diagram sa usa ka slide, unya ang lain nga sistema nga gisagol sa AsciiDoctor mahimong makaluwas, . Ang akong kauban nga si Nikolai Potashnikov nagsulat bahin sa daghang mga kapabilidad sa PlantUML .
Ang paghimo sa proyekto sa presentasyon sa code nga gitipigan sa usa ka sistema sa pagkontrol sa bersyon nagpaposible sa pag-organisar sa hiniusang trabaho sa presentasyon, una sa tanan, aron mabulag ang mga buluhaton sa paghimo sa sulud ug disenyo. Ang disenyo sa mga slide (fonts, background, indents) sa RevealJS gihulagway gamit ang CSS. Ang akong personal nga kahanas sa CSS labing maayo nga gipahayag sa - apan dili makahadlok kung adunay mga tawo nga nagtrabaho uban ang CSS nga labi ka dexterously ug mas paspas kaysa kanako. Ingon usa ka sangputanan, kini nahimo nga sa usa ka paspas nga nagsingabot nga deadline alang sa usa ka presentasyon, mahimo namon nga magtrabaho sa lainlaing mga file nga dungan pinaagi sa Git ug makapalambo sa usa ka tulin nga kolaborasyon nga imposible kung ipadala ang mga file nga .pptx pinaagi sa koreo.
Paghimo og HTML nga panid nga adunay mga slide
Nindot ang mga tinubdan sa yano nga teksto, apan giunsa nimo kini pagtipon sa presentasyon mismo?
Ang AsciiDoctor usa ka proyekto nga gisulat sa Ruby, ug adunay daghang mga paagi sa pagpadagan niini. Una, mahimo nimong i-install ang pinulongang Ruby ug direkta nga modagan ang asciidoctor, nga tingali ang labing duol nga butang sa mga developer sa Ruby.
Kung dili nimo gusto nga magsamok sa pag-install sa Ruby, mahimo nimong gamiton ang imahe sa docker , diin, kung gilansad, mahimo nimong ikonektar ang folder sa mga gigikanan sa proyekto pinaagi sa VOLUME ug makuha ang resulta sa gihatag nga lokasyon.
Ang kapilian nga akong gipili ingon og medyo wala damha, apan kini ang labing kombenyente alang kanako isip usa ka developer sa Java. Wala kini magkinahanglan og pag-instalar sa Ruby o docker, apan nagtugot kanimo sa pagmugna og mga slide gamit ang Maven script.
Ang punto mao nga ang proyekto - Ang pagpatuman sa Java sa Ruby nga pinulongan maayo kaayo nga kini nagtugot kanimo sa pagpadagan sa halos bisan unsang butang nga gibuhat alang sa Ruby sa usa ka Java machine, ug ang pagpadagan sa AsciiDoctor usa sa labing komon nga paggamit sa JRuby.
anaa nagtugot kanimo sa pagkolekta sa dokumentasyon sa AsciiDoctor nga kabahin sa usa ka proyekto sa Java (nga aktibo namong gigamit). Sa parehas nga oras, ang AsciiDoctor ug JRuby awtomatikong gi-download ni Maven, ug ang AsciiDoctor nagdagan sa JRuby nga palibot: walaβy kinahanglan nga i-install ang bisan unsang butang sa makina! (Wala apil ang package graphviz, nga gikinahanglan kon gusto nimong gamiton ang GraphViz o PlantUML graphics.) Ibutang lang ang imong .adoc files sa usa ka folder src/main/asciidoc/. Dinhi pagkolekta sa mga slide nga adunay mga diagram.
I-convert ang mga slide ngadto sa PDF
Bisan tuod ang HTML nga bersyon sa mga slide igo na sa kaugalingon, gikinahanglan gihapon nga adunay PDF nga bersyon sa mga slide. Una, nahitabo nga sa pipila ka mga komperensya nga wala maghatag higayon sa mamumulong nga makonektar ang iyang kaugalingon nga laptop, nanginahanglan sila mga slide "estrikto sa pptx o pdf nga format," nga wala magdahom nga naa usab sila sa HTML. Ikaduha, maayo nga porma nga ipadala sa mga organizer ang usa ka wala ma-edit nga bersyon sa imong mga slide sama sa gipakita sa taho, sa format nga PDF alang sa pagmantala sa file sa mga materyales sa komperensya.
Maayo na lang, ang Node.js utility nagdumala niini nga buluhaton. , gitukod sa basehan β mga sistema sa automation para sa pagdumala sa Chrome browser. Mahimo nimong mabag-o ang presentasyon sa RevealJS sa PDF gamit ang mando
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Duha ka mga limbong sa paglansad sa decktape, nga kinahanglan namon nga buhaton pinaagi sa pagsulay ug sayup:
-
resolusyon pinaagi sa parameter
-skinahanglan nga espesipiko sa usa ka doble nga margin, kung dili adunay mga problema sa mga resulta sa pagkakabig -
sa URL sa HTML nga bersyon sa presentasyon kinahanglan nimo nga ipasa ang usa ka parameter
?fragments=true, nga maghimo ug lahi nga PDF nga panid para sa matag intermediate nga estado sa imong slide (pananglitan, lima ka panid para sa lima ka bullet point kung kini gipakita nga sunodsunod). Makatugot kini kanimo sa paggamit sa ingon nga usa ka PDF sa kaugalingon ingon usa ka presentasyon sa panahon sa usa ka taho.
Awtomatikong asembliya ug pagmantala sa web
Kombenyente kung ang mga slide awtomatik nga gihugpong kung ang mga pagbag-o gihimo sa sistema sa pagkontrol sa bersyon, ug labi pa nga kombenyente kung ang awtomatik nga gihugpong nga mga slide gi-post sa Internet alang sa publiko nga paggamit. Ang mga slide gikan sa Internet mahimong dali nga "madula" atubangan sa mamiminaw gikan sa bisan unsang makina nga konektado sa Internet ug usa ka projector.
Tungod kay gigamit namon ang GitHub sa among trabaho, ang natural nga pagpili sa usa ka sistema sa CI , ug alang sa pag-host sa andam na nga mga presentasyon - . Ang ideya luyo sa github.io mao nga ang bisan unsang static nga sulud nga gi-post sa usa ka sanga gh-pages sa imong proyekto sa GitHub, mahimong magamit sa <Π²Π°ΡΠ΅ ΠΈΠΌΡ>.gihub.io/<Π²Π°Ρ ΠΏΡΠΎΠ΅ΠΊΡ>.
Kompletoha ang TravisCI configuration file, lakip ang pag-compile sa HTML nga bersyon sa page gamit ang Maven, pag-convert sa PDF gamit ang decktape, ug pag-upload sa mga resulta sa thread gh-pages para sa publikasyon sa github.io, murag .
Aron matukod ang ingon nga proyekto sa kilid sa TravisCI, kinahanglan nimo nga i-configure ang mga variable sa palibot
GH_REFβ bili sama sa github.com/inponomarev/csa-hbGH_TOKEN- GitHub access token. Makuha nimo kini gikan sa GitHub sa imong mga setting sa profile, Developer Settings -> Personal Access Token. Kung nag-upload ka usa ka presentasyon sa usa ka publiko nga repository, nan alang sa kini nga timaan igo na nga ipiho ang bugtong lebel sa pag-access nga "Pag-access sa mga pampublikong repositoryo".GH_USER_EMAIL/GH_USER_NAMEβ ngalan/email nga pares sa ngalan diin ang pagduso sa hilo ipahigayongh-pages.
Busa, ang matag commit sa presentasyon code sa GitHub moresulta sa mga slide nga awtomatik nga gitukod pag-usab sa HTML ug PDF nga mga format ug gi-upload pag-usab sa github.io. (Siyempre, kinahanglan ra nimo nga i-upload sa github.io ang mga presentasyon nga gusto nimo ipahibalo sa publiko.)
Mga pananglitan sa mga proyekto
Sa katapusan, ania ang mga link sa usa ka pares nga mga pananglitan sa mga proyekto sa presentasyon nga adunay pinasadya nga mga script sa Maven ug pag-configure sa CI alang sa Travis-CI, nga mahimong ma-clone ug magamit sa paghimo sa imong kaugalingon nga mga proyekto sa presentasyon:
-
(akong pakigpulong para sa JPoint 2019)
-
(akong report para sa Heisenbug 2019)
Goodbye Powerpoint! Wala ko maghunahuna nga kinahanglan ko ikaw alang sa mga teknikal nga presentasyon :)
Source: www.habr.com