Sa tingin ko, nagbigay ako ng dose-dosenang mga presentasyon sa mga kasamahan, kliyente, at pampublikong pagsasalita sa aking karera sa IT. Sa loob ng maraming taon, naging natural at maaasahang pagpipilian ang Powerpoint para sa akin bilang tool sa paggawa ng slide. Ngunit sa taong ito ang sitwasyon ay nagbago nang husay. Mula Pebrero hanggang Mayo, nagkaroon ako ng pagkakataong magsalita sa limang kumperensya, at ang mga slide para sa mga ulat ay kailangang ihanda sa maikling panahon, ngunit may mataas na kalidad. Ang tanong ay lumitaw tungkol sa pag-delegate sa bahaging iyon ng gawain tungkol sa visual na disenyo ng mga slide sa ibang tao. Minsan kong sinubukan na magtrabaho kasama ang isang taga-disenyo, na nagpapadala ng mga .pptx na file sa pamamagitan ng koreo, ngunit ang trabaho ay naging kaguluhan: walang nakakaalam kung aling bersyon ng mga slide ang "pinakabago", at ang layout ay "gumagalaw" dahil sa pagkakaiba sa Powerpoint mga bersyon at font sa aming mga makina. At nagpasya akong sumubok ng bago. Sinubukan ko, at mula noon hindi ko na naisip na bumalik sa Powerpoint.
Ano ang gusto natin
Mga isang taon at kalahati na ang nakalilipas, huminto ang aming kumpanya sa paggamit ng Word upang lumikha ng dokumentasyon ng proyekto, na nakatagpo ng parehong mga problema: kahit na ang Word ay mabuti para sa pag-type ng isang maliit na dokumento, habang lumalaki ang volume, ang mga paghihirap ay lumitaw sa pakikipagtulungan at pagkuha ng mataas na kalidad at pinag-isang disenyo. Ang aming pinili ay nahulog sa , at hindi kami tumitigil sa kagalakan sa pagpiling ito, ngunit ito ay isang paksa para sa isang hiwalay na artikulo. Sa parehong oras, natutunan namin ang pagiging epektibo ng isa sa mga prinsipyo ng DevOps ng "lahat bilang code", kaya ang pagpili ng mga kinakailangan para sa bagong teknolohiya para sa paglikha ng mga slide ng presentasyon ay medyo halata:
- Ang pagtatanghal ay dapat na isang plain text file sa isang markup language.
- Ang aming mga slide ay tungkol sa mga proyekto sa pag-unlad, kaya ang markup ay dapat gawing madali ang pagpasok, nang hindi gumagamit ng mga panlabas na sistema
- mga fragment ng code na may pag-highlight ng syntax,
- mga simpleng diagram sa anyo ng mga geometric na hugis na konektado ng mga arrow,
- UML diagram, flowchart at higit pa.
- Ang draft ng presentasyon ay dapat na nakaimbak sa isang version control system.
- Ang pagpapatunay at pagpupulong ng mga natapos na slide ay dapat gawin sa isang CI system.
Ngayon, mayroong dalawang pangunahing opsyon para sa paglikha ng mga slide sa mga markup na wika: package para sa LaTeX o isa sa mga balangkas para sa paglikha ng mga slide gamit ang HTML/CSS (, , at marami pang iba).
Bagama't nasa LaTeX ang aking kaluluwa, idinidikta ng aking isipan na ang pagpili ng solusyon na hindi lang ako ang gagamitin ay dapat nasa panig ng solusyong pamilyar sa mas malawak na lupon ng mga tao. Hindi alam ng lahat ang LaTeX, at kung ang iyong pang-araw-araw na pagsasanay ay hindi nauugnay sa pagsusulat ng mga artikulong pang-agham, malamang na hindi ka magkaroon ng oras upang isawsaw ang iyong sarili sa napakalaking, masalimuot na mundo ng sistemang ito.
Gayunpaman, ang karunungan sa HTML/CSS ay hindi eksaktong isang malawak na kasanayan: Ako, halimbawa, ay malayo sa ganap na bihasa dito. Sa kabutihang palad, ang pamilyar na AsciiDoctor ay dumating upang iligtas: isang converter nagbibigay-daan sa iyo na lumikha ng mga slide ng RevealJS gamit ang AsciiDoctor markup. At madali itong matutunan at maa-access ng lahat!
Paano mag-code ng mga slide
Upang maunawaan ang kakanyahan ng mga coding slide sa AsciiDoctor, ang pinakamadaling paraan ay ang magbigay ng mga partikular na halimbawa. Ang lahat ng ito ay mula sa aktwal na mga slide na ginawa ko para sa aking mga presentasyon sa kumperensya ngayong taon.
Isang slide na may pamagat at isang listahan sa mga item na nagbubukas nang sunud-sunod:
== ΠΠ°ΡΠ΅ΠΌ Π½Π°ΠΌ Streams API?
[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* ΠΠΎΠ΄ ΠΊΠ°ΠΏΠΎΡΠΎΠΌ:
** ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ offset commit
** Π Π΅Π±Π°Π»Π°Π½ΡΠΈΡΠΎΠ²ΠΊΠ°
** ΠΠ½ΡΡΡΠ΅Π½Π½Π΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ²
** ΠΠ΅Π³ΠΊΠΎΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅Resulta
Header at source code snippet na may pag-highlight ng syntax:
== Kafka Streams API: ΠΎΠ±ΡΠ°Ρ ΡΡΡΡΠΊΡΡΡΠ° KStreams-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ
[source,java]
----
StreamsConfig config = ...;
//ΠΠ΄Π΅ΡΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π²ΡΡΠΊΠΈΠ΅ ΠΎΠΏΡΠΈΠΈ
Topology topology = new StreamsBuilder()
//ΠΠ΄Π΅ΡΡ ΡΡΡΠΎΠΈΠΌ ΡΠΎΠΏΠΎΠ»ΠΎΠ³ΠΈΡ
....build();
----Resulta
Bilang paghahanda para sa isang pahayag, ang mga code demo ay sumasailalim sa mga paulit-ulit na pagbabago at pagpapahusay, kaya ang kakayahang mabilis na kopyahin at i-paste ang "raw code" nang direkta sa isang slide ay napakahalaga, na tinitiyak na ang demo ay napapanahon nang hindi nababahala tungkol sa pag-highlight ng syntax.
Pamagat, paglalarawan at teksto (ang layout sa slide ay ginagawa 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
Minsan hindi kailangan ng pamagat, at para ilarawan ang iyong punto kailangan mo lang ng full-screen na imahe:
[%notitle]
== ΠΠΈΡΡ Π² Π»Π΅Π³Π°ΡΠΈ Π½Π΅Π»Π΅Π³ΠΊΠΎ
image::swampman.jpg[canvas, size=cover]Resulta
Kadalasan ang isang ideya ay kailangang suportahan ng isang simpleng diagram, sa anyo ng "mga parisukat na konektado ng mga arrow." Sa kabutihang palad, ang AsciiDoctor ay isinama sa system β isang wika na nagbibigay-daan sa iyong ilarawan ang mga diagram ng graph batay sa paglalarawan ng mga vertex at mga koneksyon sa pagitan ng mga ito. Ang Graphviz ay tumatagal ng isang curve sa pag-aaral, ngunit batay sa mga halimbawang ibinigay, ito ay medyo madali! Ito ang hitsura nito:
== ΠΠΈΡΠ΅ΠΌ β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 kailan kinakailangan na i-edit ang caption sa figure, baguhin ang direksyon ng arrow, atbp., maaari itong gawin nang direkta sa code ng pagtatanghal, sa halip na muling iguhit ang larawan sa isang lugar at muling ipasok ito sa slide. Ito ay makabuluhang pinatataas ang bilis ng pagtatrabaho sa mga slide.
Isang mas kumplikadong halimbawa:
== ΠΠ΅Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΠΌΠ°Ρ ΡΠ±ΠΎΡΠΊΠ°
[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
Siyanga pala, maginhawang mag-eksperimento sa Graphviz at mag-debug ng mga larawan sa page .
Sa wakas, kung kailangan mong magpasok ng flowchart, class diagram o iba pang standardized na diagram sa isang slide, pagkatapos ay isa pang system na isinama sa AsciiDoctor ang maaaring sumagip, . Ang aking kasamahan na si Nikolai Potashnikov ay sumulat tungkol sa malawak na kakayahan ng PlantUML .
Ang paggawa ng proyekto sa pagtatanghal sa code na nakaimbak sa isang bersyon ng control system ay ginagawang posible na ayusin ang magkasanib na gawain sa pagtatanghal, una sa lahat, upang paghiwalayin ang mga gawain ng paglikha ng nilalaman at disenyo. Ang disenyo ng mga slide (mga font, background, indent) sa RevealJS ay inilarawan gamit ang CSS. Ang aking personal na kasanayan sa CSS ay pinakamahusay na naihatid ng - ngunit hindi nakakatakot kapag may mga taong nagtatrabaho sa CSS nang mas mahusay at mas mabilis kaysa sa akin. Bilang resulta, lumalabas na sa isang mabilis na papalapit na deadline para sa isang pagtatanghal, maaari kaming gumawa ng iba't ibang mga file nang sabay-sabay sa pamamagitan ng Git at bumuo ng bilis ng pakikipagtulungan na imposible kapag nagpapadala ng mga .pptx na file sa pamamagitan ng koreo.
Pagbuo ng isang HTML na pahina na may mga slide
Ang mga simpleng mapagkukunan ng teksto ay mahusay, ngunit paano mo isasama ang mga ito sa mismong presentasyon?
Ang AsciiDoctor ay isang proyektong nakasulat sa Ruby, at maraming paraan para patakbuhin ito. Una, maaari mong i-install ang wikang Ruby at direktang magpatakbo ng asciidoctor, na marahil ang pinakamalapit na bagay sa mga developer ng Ruby.
Kung ayaw mong magulo sa pag-install ng Ruby, maaari mong gamitin ang docker image , kung saan, kapag inilunsad, maaari mong ikonekta ang folder sa mga pinagmumulan ng proyekto sa pamamagitan ng VOLUME at makuha ang resulta sa isang naibigay na lokasyon.
Ang pagpipiliang pinili ko ay maaaring mukhang medyo hindi inaasahan, ngunit ito ang pinaka-maginhawa para sa akin bilang isang developer ng Java. Hindi ito nangangailangan ng pag-install ng Ruby o docker, ngunit pinapayagan kang bumuo ng mga slide gamit ang isang Maven script.
Ang punto ay ang proyekto - Napakahusay ng pagpapatupad ng Java ng wikang Ruby na nagbibigay-daan sa iyo na patakbuhin ang halos anumang bagay na nilikha para kay Ruby sa isang Java machine, at ang pagpapatakbo ng AsciiDoctor ay isa sa mga pinakakaraniwang gamit ng JRuby.
availability nagbibigay-daan sa iyo na mangolekta ng dokumentasyon ng AsciiDoctor na bahagi ng isang proyekto ng Java (na aktibong ginagamit namin). Kasabay nito, ang AsciiDoctor at JRuby ay awtomatikong dina-download ni Maven, at ang AsciiDoctor ay tumatakbo sa JRuby environment: hindi na kailangang mag-install ng anuman sa makina! (Hindi kasama ang package graphviz, na kailangan kung gusto mong gumamit ng GraphViz o PlantUML graphics.) Ilagay lamang ang iyong .adoc file sa isang folder src/main/asciidoc/. Dito pagkolekta ng mga slide na may mga diagram.
I-convert ang mga slide sa PDF
Bagama't ang HTML na bersyon ng mga slide ay sapat sa sarili, kinakailangan pa rin na magkaroon ng PDF na bersyon ng mga slide. Una, nangyayari na sa ilang mga kumperensya na hindi nagbibigay ng pagkakataon sa tagapagsalita na ikonekta ang kanyang sariling laptop, nangangailangan sila ng mga slide "mahigpit sa pptx o pdf na format," nang hindi inaasahan na nasa HTML din sila. Pangalawa, magandang paraan na magpadala sa mga organizer ng hindi na-edit na bersyon ng iyong mga slide tulad ng ipinakita sa ulat, sa format na PDF para sa paglalathala ng file sa mga materyales sa kumperensya.
Sa kabutihang palad, pinangangasiwaan ng utility ng Node.js ang gawaing ito. , binuo sa batayan β mga automation system para sa pamamahala sa Chrome browser. Maaari mong i-convert ang RevealJS presentation sa PDF gamit ang command
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Dalawang trick kapag naglulunsad ng decktape, na kailangan naming gawin sa pamamagitan ng pagsubok at error:
-
resolution sa pamamagitan ng parameter
-sdapat na tukuyin na may dalawang beses na margin, kung hindi, maaaring may mga problema sa mga resulta ng conversion -
sa URL ng HTML na bersyon ng presentasyon kailangan mong magpasa ng parameter
?fragments=true, na lilikha ng hiwalay na PDF page para sa bawat intermediate na estado ng iyong slide (halimbawa, limang pahina para sa limang bullet point kung sunod-sunod na ipinapakita ang mga ito). Ito ay magbibigay-daan sa iyong gamitin ang naturang PDF sa sarili nitong presentasyon sa panahon ng isang ulat.
Awtomatikong pagpupulong at pag-publish sa web
Maginhawa kapag ang mga slide ay awtomatikong pinagsama-sama kapag ang mga pagbabago ay ginawa sa bersyon ng control system, at mas maginhawa kapag ang awtomatikong pinagsama-samang mga slide ay nai-post sa Internet para sa pampublikong paggamit. Ang mga slide mula sa Internet ay madaling "i-play" sa harap ng isang madla mula sa anumang makina na konektado sa Internet at isang projector.
Dahil ginagamit namin ang GitHub sa aming trabaho, ang natural na pagpili ng isang CI system ay , at para sa pagho-host ng mga handa na presentasyon - . Ang ideya sa likod ng github.io ay ang anumang static na nilalaman na nai-post sa isang sangay gh-pages ng iyong proyekto sa GitHub, ay magiging available sa <Π²Π°ΡΠ΅ ΠΈΠΌΡ>.gihub.io/<Π²Π°Ρ ΠΏΡΠΎΠ΅ΠΊΡ>.
Kumpletuhin ang TravisCI configuration file, kabilang ang pag-compile ng HTML na bersyon ng page gamit ang Maven, pag-convert sa PDF gamit ang decktape, at pag-upload ng mga resulta sa isang thread gh-pages para sa publikasyon sa github.io, mukhang .
Upang makabuo ng naturang proyekto sa panig ng TravisCI, kailangan mong i-configure ang mga variable ng kapaligiran
GH_REFβ halaga tulad ng github.com/inponomarev/csa-hbGH_TOKENβ Token ng access sa GitHub. Makukuha mo ito mula sa GitHub sa iyong mga setting ng profile, Mga Setting ng Developer -> Mga Token ng Personal na Access. Kung nag-upload ka ng isang presentasyon sa isang pampublikong imbakan, kung gayon para sa token na ito ay sapat na upang tukuyin ang nag-iisang antas ng pag-access na "I-access ang mga pampublikong repositoryo".GH_USER_EMAIL/GH_USER_NAMEβ pares ng pangalan/email sa ngalan kung saan isasagawa ang push sa threadgh-pages.
Kaya, ang bawat commit ng presentation code sa GitHub ay nagreresulta sa mga slide na awtomatikong itinayong muli sa HTML at PDF na mga format at muling na-upload sa github.io. (Siyempre, dapat mo lang i-upload sa github.io ang mga presentasyong iyon na sa huli ay gusto mong isapubliko.)
Mga halimbawa ng mga proyekto
Panghuli, narito ang mga link sa ilang mga halimbawa ng mga proyekto sa pagtatanghal na may naka-customize na mga script ng Maven at pagsasaayos ng CI para sa Travis-CI, na maaaring i-clone at magamit kapag gumagawa ng sarili mong mga proyekto sa pagtatanghal:
-
(ang aking pahayag para sa JPoint 2019)
-
(aking ulat para sa Heisenbug 2019)
Paalam Powerpoint! Sa palagay ko hindi kita kakailanganin para sa mga teknikal na presentasyon :)
Pinagmulan: www.habr.com