Luulen, että olen IT-urani aikana pitänyt kymmeniä esityksiä kollegoille, asiakkaille ja julkisia puheita. Powerpoint on ollut minulle monien vuosien ajan luonnollinen ja luotettava valinta diojen valmistustyökaluksi. Mutta tänä vuonna tilanne on muuttunut laadullisesti. Helmi-toukokuussa minulla oli mahdollisuus puhua viidessä konferenssissa, ja raporttien diat piti valmistaa lyhyessä ajassa, mutta laadukkaasti. Heräsi kysymys diojen visuaalista suunnittelua koskevan työn delegoimisesta muille. Yritin kerran työskennellä suunnittelijan kanssa lähettämällä .pptx-tiedostoja postitse, mutta työ muuttui kaaokseksi: kukaan ei tiennyt, mikä diojen versio oli "uusin", ja asettelu "liikkui" Powerpointin eron vuoksi. versiot ja fontit koneillamme . Ja päätin kokeilla jotain uutta. Kokeilin sitä, ja sen jälkeen en ole ajatellut palata Powerpointiin.
Mitä me haluamme
Noin puolitoista vuotta sitten yrityksemme lopetti Wordin käytön projektidokumentaation luomiseen törmännyt samoihin ongelmiin: vaikka Word on hyvä näppäilemään pientä dokumenttia, volyymin kasvaessa syntyy vaikeuksia yhteistyön ja laadukkaiden ja yhtenäinen muotoilu. Valintamme kaatui , emmekä lakkaa iloitsemasta tästä valinnasta, mutta tämä on erillisen artikkelin aihe. Samaan aikaan opimme yhden DevOpsin "kaikki koodina" -periaatteen tehokkuuden, joten uuden esitysdiojen luomistekniikan vaatimusten valinta oli varsin ilmeinen:
- Esityksen tulee olla pelkkä tekstitiedosto merkintäkielellä.
- Diamme käsittelevät kehitysprojekteja, joten merkintöjen tulisi helpottaa lisäämistä ilman ulkopuolisia järjestelmiä
- koodinpätkät syntaksin korostuksella,
- yksinkertaiset kaaviot geometristen muotojen muodossa, jotka on yhdistetty nuolilla,
- UML-kaavioita, vuokaavioita ja paljon muuta.
- Esitysluonnos on tallennettava versionhallintajärjestelmään.
- Valmiiden objektilasien validointi ja kokoaminen tulee tehdä CI-järjestelmässä.
Nykyään diojen luomiseen merkintäkielillä on kaksi perusvaihtoehtoa: paketti LaTeX:lle tai johonkin kehyksistä diojen luomiseen HTML/CSS:llä (, , ja monet muut).
Vaikka sieluni piilee LaTeXissä, mieleni saneli, että ratkaisun valinta, jota en olisi ainoa käyttäjä, tulee olla laajemmalle ihmispiirille tutun ratkaisun puolella. Kaikki eivät tunne LaTeXiä, ja jos päivittäinen käytäntösi ei liity tieteellisten artikkeleiden kirjoittamiseen, sinulla ei todennäköisesti ole aikaa uppoutua tämän järjestelmän valtavaan, monimutkaiseen maailmaan.
HTML/CSS:n hallinta ei kuitenkaan ole aivan yleinen taito: esimerkiksi minä en ole siinä täysin asiantunteva. Onneksi jo tuttu AsciiDoctor tulee apuun: muuntaja voit luoda RevealJS-dioja käyttämällä AsciiDoctor-merkintöjä. Ja se on helppo oppia ja kaikkien saatavilla!
Kuinka koodata dioja
Ymmärtääksesi diojen koodauksen olemuksen AsciiDoctorissa, helpoin tapa on antaa konkreettisia esimerkkejä. Nämä ovat kaikki todellisista dioista, jotka tein tämän vuoden konferenssiesityksiäni varten.
Dia, jossa on otsikko ja luettelo peräkkäin avautuvista kohteista:
== Зачем нам Streams API?
[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабированиеTulos
Otsikko ja lähdekoodinpätkä syntaksin korostuksella:
== Kafka Streams API: общая структура KStreams-приложения
[source,java]
----
StreamsConfig config = ...;
//Здесь устанавливаем всякие опции
Topology topology = new StreamsBuilder()
//Здесь строим топологию
....build();
----Tulos
Puheen valmisteltaessa koodidemoille tehdään toistuvia tarkistuksia ja parannuksia, joten kyky kopioida ja liittää "raakakoodi" suoraan diaan on korvaamaton, mikä varmistaa, että demo on ajan tasalla huolehtimatta syntaksin korostamisesta.
Otsikko, kuva ja teksti (asettelu diassa on tehty soluissa ):
== Kafka Streams in Action
[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
“Kafka Streams in Action”, November 2018
* Примеры кода для Kafka 1.0
|===Tulos
Joskus otsikkoa ei tarvita, ja väitteesi havainnollistamiseksi tarvitset vain koko näytön kuvan:
[%notitle]
== Жить в легаси нелегко
image::swampman.jpg[canvas, size=cover]Tulos
Usein ideaa on tuettava yksinkertaisella kaaviolla, joka on "nuolilla yhdistettyjen neliöiden" muodossa. Onneksi AsciiDoctor on integroitu järjestelmään — kieli, jonka avulla voit kuvata graafisia kaavioita kärkien ja niiden välisten yhteyksien kuvauksen perusteella. Graphviz kestää oppimiskäyrän, mutta annettujen esimerkkien perusteella se on melko helppo tehdä! Tältä se näyttää:
== Пишем “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;}
}
-----Tulos
Siinä tapauksessa, että kuvan kuvatekstiä on tarpeen muokata, nuolen suuntaa tms., tämä voidaan tehdä suoraan esityskoodissa sen sijaan, että piirtäisit kuvan uudelleen jonnekin ja laittaisit sen takaisin diaan. Tämä lisää merkittävästi diojen työskentelynopeutta.
Monimutkaisempi esimerkki:
== Невоспроизводимая сборка
[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;}
}
-----Tulos
Muuten, on kätevää kokeilla Graphvizia ja korjata sivulla olevia kuvia .
Lopuksi, jos sinun on lisättävä diaan vuokaavio, luokkakaavio tai muu standardoitu kaavio, toinen AsciiDoctoriin integroitu järjestelmä voi tulla apuun, . Kollegani Nikolai Potashnikov kirjoitti PlantUML:n laajoista ominaisuuksista .
Esitysprojektin muuttaminen versionhallintajärjestelmään tallennetuksi koodiksi mahdollistaa esityksen yhteisen työskentelyn, ennen kaikkea sisällön luomisen ja suunnittelun erottamisen. Diojen (fontit, taustat, sisennykset) suunnittelu RevealJS:ssä on kuvattu CSS:n avulla. Henkilökohtainen taitoni CSS:n kanssa välittyy parhaiten - mutta se ei ole pelottavaa, kun on ihmisiä, jotka työskentelevät CSS:n kanssa paljon taitavammin ja nopeammin kuin minä. Tuloksena käy ilmi, että nopeasti lähestyvän esityksen määräajan myötä voimme käsitellä eri tiedostoja samanaikaisesti Gitin kautta ja kehittää yhteistyön nopeutta, joka on mahdotonta lähetettäessä .pptx-tiedostoja postitse.
HTML-sivun rakentaminen dioilla
Pelkät tekstilähteet ovat mahtavia, mutta kuinka kootat ne itse esitykseen?
AsciiDoctor on Ruby-kielellä kirjoitettu projekti, ja sen suorittamiseen on useita tapoja. Ensinnäkin voit asentaa Ruby-kielen ja suorittaa asciidoctorin suoraan, mikä on luultavasti lähin asia Ruby-kehittäjille.
Jos et halua sotkea Rubyn asentamista, voit käyttää telakointikuvaa , johon käynnistettäessä voit yhdistää kansion projektilähteisiin VOLUME:n kautta ja saada tuloksen tietystä sijainnista.
Valitsemani vaihtoehto saattaa tuntua hieman odottamattomalta, mutta se on minulle Java-kehittäjänä kätevin. Se ei vaadi Rubyn tai Dockerin asennusta, mutta voit luoda dioja käyttämällä Maven-skriptiä.
Pointti on, että projekti - Ruby-kielen Java-toteutus on niin hyvä, että sen avulla voit ajaa melkein mitä tahansa Rubylle luotua Java-koneessa, ja AsciiDoctorin käyttäminen on yksi yleisimmistä JRubyn käyttötavoista.
saatavuus antaa sinun kerätä AsciiDoctor-dokumentaatiota, joka on osa Java-projektia (jota käytämme aktiivisesti). Samaan aikaan Maven lataa automaattisesti AsciiDoctorin ja JRubyn, ja AsciiDoctor toimii JRuby-ympäristössä: koneelle ei tarvitse asentaa mitään! (Pakettia lukuun ottamatta graphviz, jota tarvitaan, jos haluat käyttää GraphViz- tai PlantUML-grafiikkaa.) Sijoita .adoc-tiedostosi kansioon src/main/asciidoc/. Täällä diojen kerääminen kaavioiden kanssa.
Muunna diat PDF-muotoon
Vaikka diojen HTML-versio on melko omavarainen, dioista tarvitaan silti PDF-versio. Ensinnäkin tapahtuu, että joissakin konferensseissa, jotka eivät tarjoa puhujalle mahdollisuutta liittää omaa kannettavaa tietokonettaan, vaaditaan diat "tiukasti pptx- tai pdf-muodossa" odottamatta, että ne ovat myös HTML-muodossa. Toiseksi, on hyvä muoto lähettää järjestäjille muokkaamaton versio diasta sellaisina kuin ne esitettiin raportissa, PDF-muodossa tiedoston julkaisemista varten konferenssin materiaaleissa.
Onneksi Node.js-apuohjelma hoitaa tämän tehtävän. pohjalta rakennettu — automaatiojärjestelmät Chrome-selaimen hallintaan. Voit muuntaa RevealJS-esityksen PDF-muotoon komennolla
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Kaksi temppua decktapen lanseerauksessa, jotka meidän piti keksiä yrityksen ja erehdyksen kautta:
-
resoluutio parametrin kautta
-son määritettävä kaksinkertaisella marginaalilla, muuten muunnostuloksissa voi olla ongelmia -
esityksen HTML-version URL-osoitteessa sinun on välitettävä parametri
?fragments=true, joka luo erillisen PDF-sivun jokaiselle diasi välitilalle (esimerkiksi viisi sivua viidelle luettelopisteelle, jos ne näytetään peräkkäin). Näin voit käyttää tällaista PDF-tiedostoa sellaisenaan esityksenä raportin aikana.
Automaattinen kokoonpano ja julkaisu verkossa
On kätevää, kun diat käännetään automaattisesti, kun versionhallintajärjestelmään tehdään muutoksia, ja vielä kätevämpää, kun automaattisesti käännetyt diat julkaistaan Internetiin julkiseen käyttöön. Internetistä peräisin olevia dioja voi helposti "pelata" yleisön edessä millä tahansa Internetiin yhdistetyllä koneella ja projektorilla.
Koska käytämme työssämme GitHubia, CI-järjestelmän luonnollinen valinta on , ja valmiiden esitysten isännöintiin - . Github.io:n ideana on, että mikä tahansa staattinen sisältö lähetetään haaraan gh-pages projektistasi GitHubissa, tulee saataville osoitteessa <ваше имя>.gihub.io/<ваш проект>.
Täytä TravisCI-määritystiedosto, mukaan lukien sivun HTML-version kääntäminen Mavenilla, muuntaminen PDF-muotoon decktapella ja tulosten lataaminen säiettä gh-pages github.io-sivustolla julkaistavaksi, näyttää tältä .
Jos haluat rakentaa tällaisen projektin TravisCI-puolelle, sinun on määritettävä ympäristömuuttujat
GH_REF- arvo, kuten github.com/inponomarev/csa-hbGH_TOKEN- GitHub-käyttöoikeustunnus. Saat sen GitHubista profiiliasetuksistasi, Kehittäjäasetukset -> Personal Access Tokens. Jos lataat esityksen julkiseen arkistoon, tälle tunnukselle riittää, että määrität ainoan käyttöoikeustason "Pääsy julkisiin arkistoihin".GH_USER_EMAIL/GH_USER_NAME— nimi/sähköposti-pari, jonka puolesta säiettä työnnetäängh-pages.
Siten jokainen GitHubin esityskoodin vahvistus johtaa siihen, että diat rakennetaan automaattisesti uudelleen HTML- ja PDF-muodoissa ja ladataan uudelleen github.io-sivustolle. (Tietenkin sinun tulee ladata github.io-sivustoon vain ne esitykset, jotka haluat lopulta julkaista.)
Esimerkkejä projekteista
Lopuksi tässä on linkkejä muutamaan esimerkkiin esitysprojekteista, joissa on mukautettuja Maven-skriptejä ja Travis-CI:n CI-konfiguraatioita, joita voidaan kloonata ja käyttää luotaessa omia esitysprojekteja:
-
(puheeni JPoint 2019:lle)
-
(raporttini Heisenbugista 2019)
Hyvästi Powerpoint! En usko, että tarvitsen sinua koskaan teknisiin esityksiin :)
Lähde: will.com