Penso di aver tenuto dozzine di presentazioni a colleghi, clienti e discorsi in pubblico nella mia carriera IT. Per molti anni, Powerpoint è stata per me una scelta naturale e affidabile come strumento per la produzione di diapositive. Ma quest'anno la situazione è cambiata qualitativamente. Da febbraio a maggio ho avuto l'opportunità di parlare a cinque convegni e le slide per le relazioni dovevano essere preparate in breve tempo, ma con alta qualità. È nata la questione di delegare ad altre persone quella parte del lavoro riguardante la progettazione visiva delle slide. Una volta ho provato a lavorare con un designer, inviando file .pptx via mail, ma il lavoro si è trasformato in caos: nessuno sapeva quale versione delle diapositive fosse la “più recente” e il layout si “muoveva” a causa della differenza in Powerpoint versioni e caratteri sulle nostre macchine. E ho deciso di provare qualcosa di nuovo. L'ho provato e da allora non ho più pensato di tornare a Powerpoint.
Cosa vogliamo?
Circa un anno e mezzo fa, la nostra azienda ha smesso di utilizzare Word per creare documentazione di progetto, avendo riscontrato gli stessi problemi: sebbene Word sia utile per scrivere un piccolo documento, man mano che il volume aumenta, sorgono difficoltà nella collaborazione e nell'ottenimento di documenti di alta qualità e progettazione unificata. La nostra scelta è caduta , e non smettiamo mai di gioire per questa scelta, ma questo è argomento per un articolo a parte. Più o meno nello stesso periodo, abbiamo appreso l'efficacia di uno dei principi DevOps "tutto come codice", quindi la scelta dei requisiti per la nuova tecnologia per la creazione di diapositive di presentazione è stata abbastanza ovvia:
- La presentazione deve essere un file di testo semplice in un linguaggio di markup.
- Le nostre slide riguardano progetti di sviluppo, quindi il markup dovrebbe facilitarne l'inserimento, senza ricorrere a sistemi esterni
- frammenti di codice con evidenziazione della sintassi,
- semplici diagrammi sotto forma di forme geometriche collegate da frecce,
- Diagrammi UML, diagrammi di flusso e altro ancora.
- La bozza della presentazione deve essere archiviata in un sistema di controllo della versione.
- La validazione e l'assemblaggio dei vetrini finiti dovrebbero essere eseguiti in un sistema CI.
Oggi esistono due opzioni di base per creare diapositive nei linguaggi di markup: package per LaTeX o uno dei framework per la creazione di diapositive utilizzando HTML/CSS (, , e molti altri).
Sebbene la mia anima risieda in LaTeX, la mia mente ha dettato che la scelta di una soluzione che non avrei utilizzato da solo dovrebbe essere dalla parte di una soluzione familiare a una cerchia più ampia di persone. Non tutti conoscono LaTeX e se la tua pratica quotidiana non è legata alla scrittura di articoli scientifici, difficilmente avrai il tempo di immergerti nell'enorme e intricato mondo di questo sistema.
Tuttavia, la padronanza di HTML/CSS non è esattamente una competenza diffusa: io, ad esempio, sono ben lungi dall'essere pienamente abile in esso. Per fortuna arriva in soccorso il già familiare AsciiDoctor: un convertitore ti consente di creare diapositive RevealJS utilizzando il markup AsciiDoctor. Ed è facile da imparare e accessibile a tutti!
Come codificare le diapositive
Per comprendere l'essenza della codifica delle diapositive su AsciiDoctor, il modo più semplice è fornire esempi specifici. Questi provengono tutti da diapositive reali che ho realizzato per le mie presentazioni alla conferenza quest'anno.
Una diapositiva con un titolo e un elenco di elementi che si aprono uno dopo l'altro:
== Зачем нам Streams API?
[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабированиеrisultato
Intestazione e snippet di codice sorgente con evidenziazione della sintassi:
== Kafka Streams API: общая структура KStreams-приложения
[source,java]
----
StreamsConfig config = ...;
//Здесь устанавливаем всякие опции
Topology topology = new StreamsBuilder()
//Здесь строим топологию
....build();
----risultato
In preparazione a una conferenza, le demo del codice vengono sottoposte a ripetute revisioni e miglioramenti, quindi la possibilità di copiare e incollare rapidamente il "codice grezzo" direttamente in una diapositiva è preziosa, garantendo che la demo sia aggiornata senza preoccuparsi dell'evidenziazione della sintassi.
Titolo, illustrazione e testo (il layout sulla diapositiva viene eseguito in celle ):
== Kafka Streams in Action
[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
“Kafka Streams in Action”, November 2018
* Примеры кода для Kafka 1.0
|===risultato
A volte non è necessario un titolo e per illustrare il tuo punto di vista è sufficiente un'immagine a schermo intero:
[%notitle]
== Жить в легаси нелегко
image::swampman.jpg[canvas, size=cover]risultato
Spesso un’idea necessita di essere supportata da un semplice diagramma, sotto forma di “quadrati collegati da frecce”. Fortunatamente, AsciiDoctor è integrato con il sistema — un linguaggio che consente di descrivere diagrammi grafici in base alla descrizione dei vertici e delle connessioni tra loro. Graphviz richiede una curva di apprendimento, ma sulla base degli esempi forniti è abbastanza facile da fare! Ecco come appare:
== Пишем “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;}
}
-----risultato
Nel caso in cui sia necessario modificare la didascalia sulla figura, cambiare la direzione della freccia, ecc., è possibile farlo direttamente nel codice della presentazione, invece di ridisegnare l'immagine da qualche parte e reinserirla nella diapositiva. Ciò aumenta significativamente la velocità di lavoro sulle diapositive.
Un esempio più complicato:
== Невоспроизводимая сборка
[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;}
}
-----risultato
A proposito, è conveniente sperimentare Graphviz ed eseguire il debug delle immagini sulla pagina .
Infine, se hai bisogno di inserire in una slide un diagramma di flusso, un diagramma di classi o un altro diagramma standardizzato, allora può venire in soccorso un altro sistema integrato con AsciiDoctor, . Il mio collega Nikolai Potashnikov ha scritto delle ampie capacità di PlantUML .
Trasformare il progetto di presentazione in codice memorizzato su un sistema di controllo della versione consente di organizzare il lavoro congiunto sulla presentazione, innanzitutto, per separare i compiti di creazione di contenuto e progettazione. Il design delle diapositive (caratteri, sfondi, rientri) in RevealJS è descritto utilizzando CSS. La mia abilità personale con i CSS è meglio trasmessa da - ma non è spaventoso quando ci sono persone che lavorano con i CSS in modo molto più abile e veloce di me. Di conseguenza, si scopre che con la scadenza di una presentazione che si avvicina rapidamente, possiamo lavorare su diversi file contemporaneamente tramite Git e sviluppare una velocità di collaborazione impossibile quando si inviano file .pptx tramite posta.
Costruire una pagina HTML con diapositive
Le fonti di testo semplice sono fantastiche, ma come compilarle nella presentazione stessa?
AsciiDoctor è un progetto scritto in Ruby e ci sono diversi modi per eseguirlo. Innanzitutto, puoi installare il linguaggio Ruby ed eseguire direttamente asciidoctor, che è probabilmente la cosa più vicina agli sviluppatori Ruby.
Se non vuoi scherzare con l'installazione di Ruby, puoi utilizzare l'immagine docker , nel quale, una volta avviato, è possibile connettere la cartella con le sorgenti del progetto tramite VOLUME e ottenere il risultato in una determinata posizione.
L'opzione che ho scelto può sembrare un po' inaspettata, ma è la più conveniente per me come sviluppatore Java. Non richiede l'installazione di Ruby o docker, ma consente di generare diapositive utilizzando uno script Maven.
Il punto è che il progetto - L'implementazione Java del linguaggio Ruby è così buona che ti consente di eseguire quasi tutto ciò che è stato creato per Ruby in una macchina Java e l'esecuzione di AsciiDoctor è uno degli usi più comuni di JRuby.
disponibilità ti consente di raccogliere la documentazione AsciiDoctor che fa parte di un progetto Java (che utilizziamo attivamente). Allo stesso tempo, AsciiDoctor e JRuby vengono scaricati automaticamente da Maven, e AsciiDoctor funziona in ambiente JRuby: non è necessario installare nulla sulla macchina! (Pacchetto escluso graphviz, necessario se si desidera utilizzare la grafica GraphViz o PlantUML.) È sufficiente posizionare i file .adoc in una cartella src/main/asciidoc/. Ecco raccogliere diapositive con diagrammi.
Converti diapositive in PDF
Sebbene la versione HTML delle diapositive sia abbastanza autosufficiente, è comunque necessario disporre di una versione PDF delle diapositive. Innanzitutto capita che in alcuni convegni che non danno la possibilità al relatore di collegare il proprio portatile, si richiedono slide “rigorosamente in formato pptx o pdf”, senza pretendere che siano anche in HTML. In secondo luogo, è buona norma inviare agli organizzatori una versione non modificata delle diapositive così come sono state presentate nella relazione, in formato PDF per la pubblicazione del file nei materiali della conferenza.
Fortunatamente, l'utilità Node.js gestisce questa attività. , costruito sulla base — sistemi di automazione per la gestione del browser Chrome. Puoi convertire la presentazione RevealJS in PDF con il comando
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Due trucchi durante il lancio del decktape, che abbiamo dovuto escogitare attraverso tentativi ed errori:
-
risoluzione tramite parametro
-sdeve essere specificato con un margine doppio, altrimenti potrebbero verificarsi problemi con i risultati della conversione -
nell'URL della versione HTML della presentazione è necessario passare un parametro
?fragments=true, che creerà una pagina PDF separata per ogni stato intermedio della diapositiva (ad esempio, cinque pagine per cinque punti elenco se vengono visualizzati uno dopo l'altro). Ciò ti consentirà di utilizzare tale PDF da solo come presentazione durante un rapporto.
Assemblaggio automatico e pubblicazione sul web
È conveniente quando le diapositive vengono compilate automaticamente quando vengono apportate modifiche al sistema di controllo della versione, ed è ancora più conveniente quando le diapositive compilate automaticamente vengono pubblicate su Internet per uso pubblico. Le diapositive provenienti da Internet possono essere facilmente “riprodotte” davanti al pubblico da qualsiasi macchina connessa a Internet e da un proiettore.
Poiché utilizziamo GitHub nel nostro lavoro, la scelta naturale di un sistema CI è e per ospitare presentazioni già pronte - . L'idea alla base di github.io è che qualsiasi contenuto statico venga pubblicato su un ramo gh-pages del tuo progetto su GitHub, diventa disponibile su <ваше имя>.gihub.io/<ваш проект>.
File di configurazione TravisCI completo, inclusa la compilazione della versione HTML della pagina utilizzando Maven, la conversione in PDF utilizzando decktape e il caricamento dei risultati in un thread gh-pages per la pubblicazione su github.io, sembra .
Per creare un progetto di questo tipo sul lato TravisCI, è necessario configurare le variabili di ambiente
GH_REF- valore come github.com/inponomarev/csa-hbGH_TOKEN— Token di accesso GitHub. Puoi ottenerlo da GitHub nelle impostazioni del tuo profilo, Impostazioni sviluppatore -> Token di accesso personali. Se carichi una presentazione in un repository pubblico, per questo token è sufficiente specificare l'unico livello di accesso "Accedi ai repository pubblici".GH_USER_EMAIL/GH_USER_NAME— coppia nome/email per conto della quale verrà effettuato il push al threadgh-pages.
Pertanto, ogni commit del codice di presentazione su GitHub comporta la ricostruzione automatica delle diapositive nei formati HTML e PDF e il ricaricamento su github.io. (Naturalmente, dovresti caricare su github.io solo le presentazioni che alla fine desideri rendere pubbliche.)
Esempi di progetti
Infine, ecco i collegamenti ad un paio di esempi di progetti di presentazione con script Maven personalizzati e configurazione CI per Travis-CI, che possono essere clonati e utilizzati durante la creazione dei propri progetti di presentazione:
-
(il mio discorso per JPoint 2019)
-
(il mio resoconto per Heisenbug 2019)
Addio PowerPoint! Non credo che avrò mai bisogno di te per presentazioni tecniche :)
Fonte: habr.com