Ik denk dat ik tijdens mijn IT-carrière tientallen presentaties heb gegeven aan collega's, klanten en spreken in het openbaar. Powerpoint is voor mij al jaren een natuurlijke en betrouwbare keuze als hulpmiddel voor de productie van dia's. Maar dit jaar is de situatie kwalitatief veranderd. Van februari tot mei had ik de kans om op vijf conferenties te spreken en de slides voor de rapporten moesten in korte tijd, maar met hoge kwaliteit, worden voorbereid. De vraag rees of je dat deel van het werk met betrekking tot het visuele ontwerp van de dia's aan andere mensen zou kunnen delegeren. Ik heb ooit geprobeerd met een ontwerper samen te werken en .pptx-bestanden per e-mail te verzenden, maar het werk veranderde in chaos: niemand wist welke versie van de dia's de "nieuwste" was, en de lay-out "bewoog" vanwege het verschil in Powerpoint versies en lettertypen op onze machines. En ik besloot iets nieuws te proberen. Ik heb het geprobeerd en sindsdien heb ik er niet meer aan gedacht om terug te gaan naar Powerpoint.
Wat willen we
Ongeveer anderhalf jaar geleden stopte ons bedrijf met het gebruik van Word om projectdocumentatie te maken, omdat we dezelfde problemen tegenkwamen: hoewel Word goed is voor het typen van een klein document, naarmate het volume groeit, ontstaan er problemen met de samenwerking en het verkrijgen van hoogwaardige en uniform ontwerp. Onze keuze viel op , en we blijven ons verheugen over deze keuze, maar dit is een onderwerp voor een apart artikel. Rond dezelfde tijd leerden we de effectiviteit van een van de DevOps-principes van “alles als code”, dus de keuze van de vereisten voor de nieuwe technologie voor het maken van presentatiedia’s was vrij duidelijk:
- De presentatie moet een gewoon tekstbestand zijn in een opmaaktaal.
- Onze dia's gaan over ontwikkelingsprojecten, dus de opmaak moet het invoegen gemakkelijk maken, zonder toevlucht te nemen tot externe systemen
- codefragmenten met syntaxisaccentuering,
- eenvoudige diagrammen in de vorm van geometrische vormen verbonden door pijlen,
- UML-diagrammen, stroomdiagrammen en meer.
- Het presentatieconcept moet worden opgeslagen in een versiebeheersysteem.
- Validatie en assemblage van voltooide objectglaasjes moeten worden uitgevoerd in een CI-systeem.
Tegenwoordig zijn er twee basisopties voor het maken van dia's in opmaaktalen: package voor LaTeX of een van de raamwerken voor het maken van dia's met HTML/CSS (, , en vele anderen).
Hoewel mijn ziel in LaTeX ligt, dicteerde mijn geest dat de keuze voor een oplossing die ik niet de enige zou zijn die deze zou gebruiken, aan de kant moest staan van een oplossing die bekend was bij een bredere kring van mensen. Niet iedereen kent LaTeX, en als je dagelijkse praktijk niets te maken heeft met het schrijven van wetenschappelijke artikelen, dan is het onwaarschijnlijk dat je tijd hebt om jezelf onder te dompelen in de enorme, ingewikkelde wereld van dit systeem.
Het beheersen van HTML/CSS is echter niet bepaald een wijdverbreide vaardigheid: ik ben er bijvoorbeeld verre van volledig in bedreven. Gelukkig komt de al bekende AsciiDoctor te hulp: een converter Hiermee kunt u RevealJS-dia's maken met behulp van AsciiDoctor-opmaak. En het is gemakkelijk te leren en voor iedereen toegankelijk!
Dia's coderen
Om de essentie van het coderen van dia's op AsciiDoctor te begrijpen, is de eenvoudigste manier om specifieke voorbeelden te geven. Deze zijn allemaal afkomstig van daadwerkelijke dia's die ik dit jaar heb gemaakt voor mijn conferentiepresentaties.
Een dia met een titel en een lijst met items die na elkaar worden geopend:
== Зачем нам Streams API?
[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабированиеResultaat
Koptekst en broncodefragment met syntaxisaccentuering:
== Kafka Streams API: общая структура KStreams-приложения
[source,java]
----
StreamsConfig config = ...;
//Здесь устанавливаем всякие опции
Topology topology = new StreamsBuilder()
//Здесь строим топологию
....build();
----Resultaat
Ter voorbereiding op een lezing ondergaan codedemo's herhaaldelijk revisies en verbeteringen, dus de mogelijkheid om de "onbewerkte code" snel rechtstreeks in een dia te kopiëren en te plakken is van onschatbare waarde, zodat de demo up-to-date is zonder dat u zich zorgen hoeft te maken over syntaxisaccentuering.
Titel, illustratie en tekst (opmaak op de dia gebeurt in cellen ):
== Kafka Streams in Action
[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
“Kafka Streams in Action”, November 2018
* Примеры кода для Kafka 1.0
|===Resultaat
Soms is een titel niet nodig, en om je punt te illustreren heb je alleen een afbeelding op volledig scherm nodig:
[%notitle]
== Жить в легаси нелегко
image::swampman.jpg[canvas, size=cover]Resultaat
Vaak moet een idee worden ondersteund door een eenvoudig diagram, in de vorm van ‘vierkanten verbonden door pijlen’. Gelukkig is AsciiDoctor geïntegreerd met het systeem — een taal waarmee u grafische diagrammen kunt beschrijven op basis van de beschrijving van hoekpunten en verbindingen daartussen. Graphviz heeft een leercurve nodig, maar op basis van de gegeven voorbeelden is het vrij eenvoudig om te doen! Dit is hoe het eruit ziet:
== Пишем “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;}
}
-----Resultaat
In het geval dat het nodig is om het bijschrift van de figuur te bewerken, de richting van de pijl te veranderen, enz., kan dit rechtstreeks in de presentatiecode worden gedaan, in plaats van de afbeelding ergens opnieuw te tekenen en opnieuw in de dia te plaatsen. Dit verhoogt de snelheid van het werken op dia's aanzienlijk.
Een ingewikkelder voorbeeld:
== Невоспроизводимая сборка
[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;}
}
-----Resultaat
Het is trouwens handig om met Graphviz te experimenteren en afbeeldingen op de pagina te debuggen .
Tenslotte, als u een stroomdiagram, klassendiagram of ander gestandaardiseerd diagram in een dia moet invoegen, kan een ander systeem dat is geïntegreerd met AsciiDoctor te hulp komen, . Mijn collega Nikolai Potashnikov schreef over de uitgebreide mogelijkheden van PlantUML .
Door het presentatieproject om te zetten in code die is opgeslagen op een versiebeheersysteem, wordt het mogelijk om gezamenlijk aan de presentatie te werken, in de eerste plaats om de taken van het maken van inhoud en ontwerp te scheiden. Het ontwerp van dia's (lettertypen, achtergronden, inspringingen) in RevealJS wordt beschreven met behulp van CSS. Mijn persoonlijke vaardigheden met CSS komen het beste tot uiting in - maar het is niet eng als er mensen zijn die veel handiger en sneller met CSS werken dan ik. Het resultaat is dat we met een snel naderende deadline voor een presentatie via Git tegelijkertijd aan verschillende bestanden kunnen werken en een samenwerkingssnelheid kunnen ontwikkelen die onmogelijk is bij het verzenden van .pptx-bestanden per post.
Een HTML-pagina bouwen met dia's
Bronnen met platte tekst zijn geweldig, maar hoe compileer je ze in de presentatie zelf?
AsciiDoctor is een project geschreven in Ruby en er zijn verschillende manieren om het uit te voeren. Ten eerste kun je de Ruby-taal installeren en asciidoctor rechtstreeks uitvoeren, wat waarschijnlijk het dichtst in de buurt komt van Ruby-ontwikkelaars.
Als je geen zin hebt in het installeren van Ruby, kun je de docker-image gebruiken , waarin u, wanneer u het start, de map via VOLUME kunt verbinden met de projectbronnen en het resultaat op een bepaalde locatie kunt krijgen.
De optie die ik heb gekozen lijkt misschien wat onverwacht, maar voor mij als Java-ontwikkelaar is deze het handigst. Het vereist geen installatie van Ruby of docker, maar u kunt wel dia's genereren met behulp van een Maven-script.
Het punt is dat het project - De Java-implementatie van de Ruby-taal is zo goed dat je bijna alles wat voor Ruby is gemaakt op een Java-machine kunt uitvoeren, en het uitvoeren van AsciiDoctor is een van de meest voorkomende toepassingen van JRuby.
beschikbaarheid stelt u in staat AsciiDoctor-documentatie te verzamelen die deel uitmaakt van een Java-project (waar wij actief gebruik van maken). Tegelijkertijd worden AsciiDoctor en JRuby automatisch gedownload door Maven, en draait AsciiDoctor in de JRuby-omgeving: u hoeft niets op de machine te installeren! (Exclusief pakket graphviz, wat nodig is als u GraphViz- of PlantUML-afbeeldingen wilt gebruiken.) Plaats eenvoudig uw .adoc-bestanden in een map src/main/asciidoc/. Hier dia's met diagrammen verzamelen.
Converteer dia's naar PDF
Hoewel de HTML-versie van de dia's redelijk zelfvoorzienend is, is het toch noodzakelijk om een PDF-versie van de dia's te hebben. Ten eerste komt het voor dat op sommige conferenties, die de spreker niet de mogelijkheid bieden om zijn eigen laptop aan te sluiten, dia's "uitsluitend in pptx- of pdf-formaat" nodig zijn, zonder te verwachten dat ze ook in HTML zijn. Ten tweede is het een goed formulier om de organisatoren een onbewerkte versie van uw dia's zoals deze in het rapport werden getoond, in PDF-formaat te sturen, zodat het bestand in het conferentiemateriaal kan worden gepubliceerd.
Gelukkig voert het hulpprogramma Node.js deze taak uit. , op basis gebouwd — automatiseringssystemen voor het beheer van de Chrome-browser. U kunt de RevealJS-presentatie naar PDF converteren met de opdracht
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Twee trucjes bij het lanceren van decktape, die we met vallen en opstaan moesten bedenken:
-
resolutie via parameter
-smoet met een dubbele marge worden opgegeven, anders kunnen er problemen optreden met de conversieresultaten -
in de URL van de HTML-versie van de presentatie moet u een parameter doorgeven
?fragments=true, waarmee voor elke tussenstatus van uw dia een afzonderlijke PDF-pagina wordt gemaakt (bijvoorbeeld vijf pagina's voor vijf opsommingstekens als deze na elkaar worden weergegeven). Hierdoor kunt u zo'n PDF op zichzelf gebruiken als presentatie tijdens een rapport.
Automatische montage en publicatie op internet
Het is handig als dia's automatisch worden samengesteld wanneer er wijzigingen worden aangebracht in het versiebeheersysteem, en nog handiger als automatisch samengestelde dia's voor openbaar gebruik op internet worden geplaatst. Dia's van internet kunnen eenvoudig worden “afgespeeld” voor een publiek vanaf elke machine die op internet is aangesloten en een projector.
Omdat wij GitHub in ons werk gebruiken, is de logische keuze voor een CI-systeem , en voor het hosten van kant-en-klare presentaties - . Het idee achter github.io is dat alle statische inhoud in een branch wordt geplaatst gh-pages van uw project op GitHub, wordt beschikbaar op <ваше имя>.gihub.io/<ваш проект>.
Compleet TravisCI-configuratiebestand, inclusief het compileren van de HTML-versie van de pagina met Maven, het converteren naar PDF met decktape en het uploaden van de resultaten naar een thread gh-pages voor publicatie op github.io, ziet eruit als .
Om een dergelijk project aan de TravisCI-kant te bouwen, moet u omgevingsvariabelen configureren
GH_REF— waarde zoals github.com/inponomarev/csa-hbGH_TOKEN— GitHub-toegangstoken. Je kunt het verkrijgen via GitHub in je profielinstellingen, Ontwikkelaarsinstellingen -> Persoonlijke toegangstokens. Als u een presentatie uploadt naar een openbare repository, volstaat het voor dit token om het enige toegangsniveau ‘Toegang tot openbare repository’s’ op te geven.GH_USER_EMAIL/GH_USER_NAME— naam/e-mailadrespaar namens wie de push naar de thread zal worden uitgevoerdgh-pages.
Elke commit van de presentatiecode op GitHub resulteert er dus in dat de dia's automatisch opnieuw worden opgebouwd in HTML- en PDF-formaten en opnieuw worden geüpload naar github.io. (Je moet natuurlijk alleen die presentaties uploaden naar github.io die je uiteindelijk openbaar wilt maken.)
Voorbeelden van projecten
Tenslotte zijn hier links naar een paar voorbeelden van presentatieprojecten met aangepaste Maven-scripts en CI-configuratie voor Travis-CI, die kunnen worden gekloond en gebruikt bij het maken van uw eigen presentatieprojecten:
-
(mijn lezing voor JPoint 2019)
-
(mijn rapport voor Heisenbug 2019)
Tot ziens Powerpoint! Ik denk niet dat ik je ooit nodig zal hebben voor technische presentaties :)
Bron: www.habr.com