Jeg tror, jeg har holdt snesevis af præsentationer for kolleger, kunder og offentlige taler i min IT-karriere. Powerpoint har i mange år været et naturligt og pålideligt valg for mig som slideproduktionsværktøj. Men i år har situationen ændret sig kvalitativt. Fra februar til maj havde jeg mulighed for at tale ved fem konferencer, og slides til rapporterne skulle udarbejdes på kort tid, men med høj kvalitet. Spørgsmålet rejste sig om at uddelegere den del af arbejdet vedrørende det visuelle design af lysbillederne til andre. Jeg prøvede engang at arbejde med en designer ved at sende .pptx-filer med posten, men arbejdet blev til kaos: ingen vidste, hvilken version af slides der var den "nyeste", og layoutet "bevægede sig" på grund af forskellen i Powerpoint versioner og skrifttyper på vores maskiner. Og jeg besluttede at prøve noget nyt. Jeg prøvede det, og siden da har jeg ikke tænkt på at gå tilbage til Powerpoint.
Hvad vil vi
For omkring halvandet år siden stoppede vores virksomhed med at bruge Word til at lave projektdokumentation, efter at have stødt på de samme problemer: Selvom Word er godt til at skrive et lille dokument op, opstår der vanskeligheder med samarbejde og opnåelse af høj kvalitet og efterhånden som mængden vokser. samlet design. Vores valg faldt på , og vi holder aldrig op med at glæde os over dette valg, men dette er et emne for en separat artikel. Omtrent på samme tid lærte vi effektiviteten af et af DevOps-principperne for "alt som kode", så valget af krav til den nye teknologi til at skabe præsentationsdias var ret indlysende:
- Præsentationen skal være en almindelig tekstfil i et opmærkningssprog.
- Vores slides handler om udviklingsprojekter, så opmærkningen skal gøre det nemt at indsætte uden at ty til eksterne systemer
- kodefragmenter med syntaksfremhævning,
- simple diagrammer i form af geometriske former forbundet med pile,
- UML-diagrammer, flowcharts og mere.
- Præsentationsudkastet skal opbevares i et versionskontrolsystem.
- Validering og samling af færdige objektglas bør ske i et CI-system.
I dag er der to grundlæggende muligheder for at oprette dias i markup-sprog: pakke til LaTeX eller en af rammerne til at lave dias ved hjælp af HTML/CSS (, , og mange andre).
Selvom min sjæl ligger i LaTeX, dikterede mit sind, at valget af en løsning, som jeg ikke ville være den eneste, der brugte, skulle være på siden af en løsning, der er kendt for en bredere kreds af mennesker. Ikke alle kender LaTeX, og hvis din daglige praksis ikke er relateret til at skrive videnskabelige artikler, så har du næppe tid til at fordybe dig i dette systems enorme, indviklede verden.
Beherskelse af HTML/CSS er dog ikke ligefrem en udbredt færdighed: Jeg er for eksempel langt fra fuldt ud dygtig til det. Heldigvis kommer den allerede velkendte AsciiDoctor til undsætning: en konverter giver dig mulighed for at oprette RevealJS-slides ved hjælp af AsciiDoctor-markering. Og det er nemt at lære og tilgængeligt for alle!
Sådan kodes dias
For at forstå essensen af at kode dias på AsciiDoctor er den nemmeste måde at give specifikke eksempler. Disse er alle fra faktiske slides, jeg lavede til mine konferencepræsentationer i år.
Et dias med en titel og en liste over elementer, der åbner efter hinanden:
== Зачем нам Streams API?
[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабированиеOutcome
Header og kildekodestykke med syntaksfremhævning:
== Kafka Streams API: общая структура KStreams-приложения
[source,java]
----
StreamsConfig config = ...;
//Здесь устанавливаем всякие опции
Topology topology = new StreamsBuilder()
//Здесь строим топологию
....build();
----Outcome
Som forberedelse til en snak gennemgår kodedemoer gentagne revisioner og forbedringer, så muligheden for hurtigt at kopiere og indsætte "råkoden" direkte i et dias er uvurderlig, hvilket sikrer, at demoen er opdateret uden at bekymre dig om syntaksfremhævning.
Titel, illustration og tekst (layout på dias udføres i celler ):
== Kafka Streams in Action
[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
“Kafka Streams in Action”, November 2018
* Примеры кода для Kafka 1.0
|===Outcome
Nogle gange er der ikke behov for en titel, og for at illustrere din pointe skal du blot bruge et fuldskærmsbillede:
[%notitle]
== Жить в легаси нелегко
image::swampman.jpg[canvas, size=cover]Outcome
Ofte skal en idé understøttes af et simpelt diagram i form af "firkanter forbundet med pile." Heldigvis er AsciiDoctor integreret med systemet — et sprog, der giver dig mulighed for at beskrive grafdiagrammer baseret på beskrivelsen af toppunkter og forbindelser mellem dem. Graphviz tager en indlæringskurve, men baseret på eksemplerne er det ret nemt at gøre! Sådan ser det ud:
== Пишем “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;}
}
-----Outcome
I det tilfælde, hvor det er nødvendigt at redigere billedteksten på figuren, ændre pilens retning osv., kan dette gøres direkte i præsentationskoden i stedet for at tegne billedet igen et sted og genindsætte det i diaset. Dette øger hastigheden af arbejdet på dias markant.
Et mere kompliceret eksempel:
== Невоспроизводимая сборка
[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;}
}
-----Outcome
Forresten er det praktisk at eksperimentere med Graphviz og fejlfinde billeder på siden .
Endelig, hvis du har brug for at indsætte et flowchart, klassediagram eller andet standardiseret diagram i et dias, så kan et andet system integreret med AsciiDoctor komme til undsætning, . Min kollega Nikolai Potashnikov skrev om PlantUML's omfattende muligheder .
At omdanne præsentationsprojektet til kode gemt på et versionskontrolsystem gør det muligt at organisere fælles arbejde på præsentationen, først og fremmest for at adskille opgaverne med at skabe indhold og design. Designet af slides (skrifttyper, baggrunde, indrykninger) i RevealJS er beskrevet ved hjælp af CSS. Mine personlige færdigheder med CSS formidles bedst af - men det er ikke skræmmende, når der er folk, der arbejder med CSS meget mere behændigt og hurtigere end mig. Som et resultat viser det sig, at med en hastigt nærmer sig deadline for en præsentation, kan vi arbejde på forskellige filer samtidigt via Git og udvikle en samarbejdshastighed, der er umulig, når man sender .pptx-filer med posten.
Opbygning af en HTML-side med dias
Almindelige tekstkilder er gode, men hvordan kompilerer du dem i selve præsentationen?
AsciiDoctor er et projekt skrevet i Ruby, og der er flere måder at køre det på. For det første kan du installere Ruby-sproget og køre asciidoctor direkte, hvilket nok er det tætteste på Ruby-udviklere.
Hvis du ikke vil rode med at installere Ruby, kan du bruge docker-billedet , hvori du ved lancering kan forbinde mappen med projektkilderne via VOLUME og få resultatet på en given placering.
Den mulighed, jeg valgte, kan virke noget uventet, men den er den mest bekvemme for mig som Java-udvikler. Det kræver ikke installation af Ruby eller docker, men giver dig mulighed for at generere dias ved hjælp af et Maven-script.
Pointen er, at projektet - Java-implementeringen af Ruby-sproget er så god, at den giver dig mulighed for at køre næsten alt, der er skabt til Ruby i en Java-maskine, og at køre AsciiDoctor er en af de mest almindelige anvendelser af JRuby.
tilgængelighed giver dig mulighed for at indsamle AsciiDoctor-dokumentation, der er en del af et Java-projekt (som vi aktivt bruger). Samtidig downloades AsciiDoctor og JRuby automatisk af Maven, og AsciiDoctor kører i JRuby-miljøet: der er ingen grund til at installere noget på maskinen! (Eksklusive pakke graphviz, som er nødvendig, hvis du vil bruge GraphViz- eller PlantUML-grafik.) Placer blot dine .adoc-filer i en mappe src/main/asciidoc/. Her indsamling af dias med diagrammer.
Konverter dias til PDF
Selvom HTML-versionen af slides er ret selvforsynende, er det stadig nødvendigt at have en PDF-version af slides. For det første sker det, at på nogle konferencer, der ikke giver taleren mulighed for at tilslutte sin egen bærbare computer, kræver de slides "strengt i pptx- eller pdf-format", uden at forvente, at de også er i HTML. For det andet er det en god form at sende arrangørerne en uredigeret version af dine slides, som de blev vist i rapporten, i PDF-format til offentliggørelse af filen i konferencens materialer.
Heldigvis håndterer værktøjet Node.js denne opgave. , bygget på grundlag — automatiseringssystemer til administration af Chrome-browseren. Du kan konvertere RevealJS-præsentation til PDF med kommandoen
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf To tricks ved lancering af decktape, som vi skulle finde på gennem trial and error:
-
opløsning via parameter
-sskal angives med dobbelt margin, ellers kan der opstå problemer med konverteringsresultaterne -
i URL'en til HTML-versionen af præsentationen skal du sende en parameter
?fragments=true, som vil oprette en separat PDF-side for hver mellemtilstand på dit dias (f.eks. fem sider for fem punktopstillinger, hvis de vises efter hinanden). Dette vil give dig mulighed for at bruge sådan en PDF alene som en præsentation under en rapport.
Automatisk samling og publicering på nettet
Det er praktisk, når dias kompileres automatisk, når der foretages ændringer i versionskontrolsystemet, og endnu mere praktisk, når automatisk kompilerede dias bliver lagt ud på internettet til offentlig brug. Slides fra internettet kan nemt "afspilles" foran et publikum fra enhver maskine, der er tilsluttet internettet og en projektor.
Da vi bruger GitHub i vores arbejde, er det naturlige valg af et CI-system , og til afholdelse af færdige præsentationer - . Ideen bag github.io er, at ethvert statisk indhold sendes til en filial gh-pages af dit projekt på GitHub, bliver tilgængelig på <ваше имя>.gihub.io/<ваш проект>.
Komplet TravisCI-konfigurationsfil, inklusive kompilering af HTML-versionen af siden ved hjælp af Maven, konvertering til PDF ved hjælp af decktape og upload af resultaterne til en tråd gh-pages til offentliggørelse på github.io, ser ud .
For at bygge et sådant projekt på TravisCI-siden skal du konfigurere miljøvariabler
GH_REF— værdi som github.com/inponomarev/csa-hbGH_TOKEN— GitHub adgangstoken. Du kan få det fra GitHub i dine profilindstillinger, Udviklerindstillinger -> Personlige adgangstokens. Hvis du uploader en præsentation til et offentligt arkiv, er det nok for dette token at angive det eneste adgangsniveau "Adgang til offentlige arkiver".GH_USER_EMAIL/GH_USER_NAME— navn/e-mail-par, på vegne af hvilket push til tråden vil blive udførtgh-pages.
Hver commit af præsentationskoden på GitHub resulterer således i, at slides automatisk bliver genopbygget i HTML- og PDF-formater og gen-uploadet til github.io. (Selvfølgelig skal du kun uploade til github.io de præsentationer, som du i sidste ende ønsker at offentliggøre.)
Eksempler på projekter
Til sidst er her links til et par eksempler på præsentationsprojekter med tilpassede Maven-scripts og CI-konfiguration til Travis-CI, som kan klones og bruges, når du laver dine egne præsentationsprojekter:
-
(min tale til JPoint 2019)
-
(min rapport for Heisenbug 2019)
Farvel Powerpoint! Jeg tror aldrig, jeg får brug for dig til tekniske præsentationer :)
Kilde: www.habr.com