Crec que he fet desenes de presentacions a col·legues, clients i parlant en públic durant la meva carrera informàtica. Durant molts anys, Powerpoint ha estat una opció natural i fiable per a mi com a eina de producció de diapositives. Però aquest any la situació ha canviat qualitativament. De febrer a maig vaig tenir l'oportunitat de parlar en cinc conferències, i les diapositives dels informes s'havien d'elaborar en poc temps, però amb gran qualitat. Va sorgir la qüestió de delegar en altres persones aquella part del treball pel que fa al disseny visual de les diapositives. Una vegada vaig provar de treballar amb un dissenyador, enviant fitxers .pptx per correu, però el treball es va convertir en un caos: ningú sabia quina versió de les diapositives era la "més nova" i el disseny es "moveu" a causa de la diferència de Powerpoint. versions i tipus de lletra a les nostres màquines. I vaig decidir provar alguna cosa nova. Ho vaig provar, i des de llavors no he pensat en tornar a Powerpoint.
Què volem
Fa aproximadament un any i mig, la nostra empresa va deixar d'utilitzar Word per crear documentació del projecte, havent trobat els mateixos problemes: tot i que Word és bo per escriure un document petit, a mesura que augmenta el volum, sorgeixen dificultats amb la col·laboració i l'obtenció d'alta qualitat i disseny unificat. La nostra elecció va caure , i no deixem d'alegrar-nos d'aquesta elecció, però aquest és un tema per a un article separat. Al mateix temps, vam aprendre l'efectivitat d'un dels principis de DevOps de "tot com a codi", de manera que l'elecció dels requisits per a la nova tecnologia per crear diapositives de presentació era força evident:
- La presentació ha de ser un fitxer de text senzill en un llenguatge de marques.
- Les nostres diapositives són sobre projectes de desenvolupament, de manera que el marcatge hauria de facilitar la inserció, sense recórrer a sistemes externs
- fragments de codi amb ressaltat de sintaxi,
- diagrames senzills en forma de formes geomètriques connectades per fletxes,
- Diagrames UML, diagrames de flux i molt més.
- L'esborrany de presentació s'ha d'emmagatzemar en un sistema de control de versions.
- La validació i el muntatge de les diapositives acabades s'han de fer en un sistema CI.
Avui dia, hi ha dues opcions bàsiques per crear diapositives en llenguatges de marques: paquet per a LaTeX o un dels marcs per crear diapositives amb HTML/CSS (, , i molts altres).
Tot i que la meva ànima es troba en LaTeX, la meva ment va dictaminar que l'elecció d'una solució que jo no seria l'únic que utilitzés hauria d'estar al costat d'una solució familiar per a un cercle més ampli de persones. No tothom coneix LaTeX, i si la vostra pràctica diària no està relacionada amb escriure articles científics, és poc probable que tingueu temps per submergir-vos en l'enorme i complex món d'aquest sistema.
No obstant això, el domini d'HTML/CSS no és precisament una habilitat generalitzada: jo, per exemple, estic lluny de ser-ne plenament competent. Afortunadament, el ja conegut AsciiDoctor ve al rescat: un convertidor us permet crear diapositives RevealJS mitjançant el marcatge AsciiDoctor. I és fàcil d'aprendre i accessible per a tothom!
Com codificar les diapositives
Per entendre l'essència de la codificació de diapositives a AsciiDoctor, la manera més senzilla és donar exemples específics. Aquestes són totes de diapositives reals que vaig fer per a les meves presentacions a la conferència d'aquest any.
Una diapositiva amb un títol i una llista d'elements que s'obren un darrere l'altre:
== Зачем нам Streams API?
[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабированиеResultat
Capçalera i fragment de codi font amb ressaltat de sintaxi:
== Kafka Streams API: общая структура KStreams-приложения
[source,java]
----
StreamsConfig config = ...;
//Здесь устанавливаем всякие опции
Topology topology = new StreamsBuilder()
//Здесь строим топологию
....build();
----Resultat
En preparació per a una xerrada, les demostracions de codi se sotmeten a revisions i millores repetides, de manera que la capacitat de copiar i enganxar ràpidament el "codi en brut" directament en una diapositiva és inestimable, assegurant que la demostració estigui actualitzada sense preocupar-se pel ressaltat de la sintaxi.
Títol, il·lustració i text (la disposició de la diapositiva es fa en cel·les ):
== Kafka Streams in Action
[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
“Kafka Streams in Action”, November 2018
* Примеры кода для Kafka 1.0
|===Resultat
De vegades no cal un títol, i per il·lustrar el vostre punt només necessiteu una imatge a pantalla completa:
[%notitle]
== Жить в легаси нелегко
image::swampman.jpg[canvas, size=cover]Resultat
Sovint, una idea s'ha de recolzar amb un diagrama senzill, en forma de "quadrats connectats per fletxes". Afortunadament, AsciiDoctor està integrat amb el sistema — un llenguatge que permet descriure diagrames gràfics a partir de la descripció de vèrtexs i connexions entre ells. Graphviz pren una corba d'aprenentatge, però segons els exemples proporcionats, és bastant fàcil de fer! Aquest és el que sembla:
== Пишем “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;}
}
-----Resultat
En el cas que calgui editar el títol de la figura, canviar la direcció de la fletxa, etc., això es pot fer directament al codi de presentació, en lloc de tornar a dibuixar la imatge en algun lloc i tornar-la a inserir a la diapositiva. Això augmenta significativament la velocitat de treball en diapositives.
Un exemple més complicat:
== Невоспроизводимая сборка
[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;}
}
-----Resultat
Per cert, és convenient experimentar amb Graphviz i depurar imatges a la pàgina .
Finalment, si necessiteu inserir un diagrama de flux, un diagrama de classes o un altre diagrama estandarditzat en una diapositiva, un altre sistema integrat amb AsciiDoctor pot venir al rescat, . El meu col·lega Nikolai Potashnikov va escriure sobre les àmplies capacitats de PlantUML .
Convertir el projecte de presentació en codi emmagatzemat en un sistema de control de versions permet organitzar un treball conjunt sobre la presentació, en primer lloc, separar les tasques de creació de continguts i de disseny. El disseny de diapositives (tipus de lletra, fons, sagnats) a RevealJS es descriu mitjançant CSS. La meva habilitat personal amb CSS es transmet millor per - però no fa por quan hi ha gent que treballa amb CSS amb molta més destresa i més rapidesa que jo. Com a resultat, resulta que amb una data límit per a una presentació que s'acosta ràpidament, podem treballar diferents fitxers simultàniament a través de Git i desenvolupar una velocitat de col·laboració impossible a l'hora d'enviar fitxers .pptx per correu.
Creació d'una pàgina HTML amb diapositives
Les fonts de text sense format són excel·lents, però com les compileu a la presentació?
AsciiDoctor és un projecte escrit en Ruby i hi ha diverses maneres d'executar-lo. En primer lloc, podeu instal·lar el llenguatge Ruby i executar asciidoctor directament, que és probablement el més semblant als desenvolupadors de Ruby.
Si no voleu embolicar-vos amb la instal·lació de Ruby, podeu utilitzar la imatge de Docker , en el qual, quan s'inicia, podeu connectar la carpeta amb les fonts del projecte mitjançant VOLUME i obtenir el resultat en una ubicació determinada.
L'opció que vaig triar pot semblar una mica inesperada, però és la més convenient per a mi com a desenvolupador de Java. No requereix instal·lació de Ruby o Docker, però us permet generar diapositives mitjançant un script Maven.
La qüestió és que el projecte - La implementació Java del llenguatge Ruby és tan bona que us permet executar gairebé qualsevol cosa creada per a Ruby en una màquina Java, i executar AsciiDoctor és un dels usos més habituals de JRuby.
disponibilitat permet recollir documentació d'AsciiDoctor que forma part d'un projecte Java (que fem servir activament). Al mateix temps, Maven baixa automàticament AsciiDoctor i JRuby, i AsciiDoctor s'executa a l'entorn JRuby: no cal instal·lar res a la màquina! (Sense incloure el paquet graphviz, que és necessari si voleu utilitzar gràfics GraphViz o PlantUML.) Simplement col·loqueu els vostres fitxers .adoc en una carpeta src/main/asciidoc/. Aquí recollida de diapositives amb diagrames.
Converteix diapositives a PDF
Tot i que la versió HTML de les diapositives és força autosuficient, encara és necessari tenir una versió PDF de les diapositives. En primer lloc, passa que en algunes conferències que no ofereixen al ponent la possibilitat de connectar el seu propi ordinador portàtil, requereixen diapositives “estrictament en format pptx o pdf”, sense esperar que també estiguin en HTML. En segon lloc, és una bona forma enviar als organitzadors una versió sense editar de les vostres diapositives tal com es van mostrar a l'informe, en format PDF per a la publicació de l'arxiu als materials de la conferència.
Afortunadament, la utilitat Node.js gestiona aquesta tasca. , construït sobre la base — sistemes d'automatització per a la gestió del navegador Chrome. Podeu convertir la presentació de RevealJS a PDF amb l'ordre
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Dos trucs a l'hora de llançar decktape, que hem hagut d'aconseguir per prova i error:
-
resolució mitjançant paràmetre
-ss'ha d'especificar amb un marge doble, en cas contrari pot haver-hi problemes amb els resultats de la conversió -
a l'URL de la versió HTML de la presentació cal passar un paràmetre
?fragments=true, que crearà una pàgina PDF independent per a cada estat intermedi de la diapositiva (per exemple, cinc pàgines per cinc vinyetes si es mostren una darrere l'altra). Això us permetrà utilitzar aquest PDF com a presentació durant un informe.
Muntatge i publicació automàtica a la web
És convenient quan les diapositives es compilen automàticament quan es fan canvis al sistema de control de versions, i encara més convenient quan les diapositives compilades automàticament es publiquen a Internet per a ús públic. Les diapositives d'Internet es poden "reproduir" fàcilment davant d'un públic des de qualsevol màquina connectada a Internet i un projector.
Com que utilitzem GitHub en el nostre treball, l'elecció natural d'un sistema CI és , i per acollir presentacions ja fetes - . La idea darrere de github.io és que qualsevol contingut estàtic es publica a una branca gh-pages del vostre projecte a GitHub, està disponible a <ваше имя>.gihub.io/<ваш проект>.
Fitxer de configuració complet de TravisCI, inclosa la compilació de la versió HTML de la pàgina amb Maven, la conversió a PDF amb decktape i la càrrega dels resultats a un fil gh-pages per a la seva publicació a github.io, sembla .
Per crear un projecte d'aquest tipus al costat de TravisCI, heu de configurar les variables d'entorn
GH_REF— valor com github.com/inponomarev/csa-hbGH_TOKEN— Token d'accés GitHub. Podeu obtenir-lo des de GitHub a la configuració del vostre perfil, Configuració del desenvolupador -> Fitxes d'accés personal. Si carregueu una presentació a un repositori públic, per a aquest testimoni n'hi ha prou amb especificar l'únic nivell d'accés "Accés als repositoris públics".GH_USER_EMAIL/GH_USER_NAME— parella nom/correu electrònic en nom del qual es durà a terme l'empenta al filgh-pages.
Així, cada confirmació del codi de presentació a GitHub fa que les diapositives es tornin a crear automàticament en formats HTML i PDF i es tornin a penjar a github.io. (Per descomptat, només hauríeu de penjar a github.io aquelles presentacions que finalment vulgueu fer públiques.)
Exemples de projectes
Finalment, aquí teniu enllaços a un parell d'exemples de projectes de presentació amb scripts Maven personalitzats i configuració de CI per a Travis-CI, que es poden clonar i utilitzar en crear els vostres propis projectes de presentació:
-
(la meva xerrada per a JPoint 2019)
-
(el meu informe per a Heisenbug 2019)
Adéu Powerpoint! Crec que no et necessitaré mai per a presentacions tècniques :)
Font: www.habr.com