Ich glaube, ich habe in meiner IT-Karriere Dutzende Präsentationen vor Kollegen und Kunden gehalten und öffentliche Reden gehalten. Seit vielen Jahren ist PowerPoint für mich eine selbstverständliche und zuverlässige Wahl als Werkzeug zur Folienproduktion. Doch in diesem Jahr hat sich die Situation qualitativ verändert. Von Februar bis Mai hatte ich die Gelegenheit, auf fünf Konferenzen zu sprechen, und die Folien für die Berichte mussten in kurzer Zeit, aber in hoher Qualität erstellt werden. Es stellte sich die Frage, diesen Teil der Arbeit bezüglich der visuellen Gestaltung der Folien an andere Personen zu delegieren. Ich habe einmal versucht, mit einem Designer zusammenzuarbeiten und .pptx-Dateien per E-Mail zu versenden, aber die Arbeit geriet ins Chaos: Niemand wusste, welche Version der Folien die „neueste“ war, und das Layout war aufgrund des Unterschieds in Powerpoint „verrückt“. Versionen und Schriftarten auf unseren Maschinen. Und ich beschloss, etwas Neues auszuprobieren. Ich habe es versucht und seitdem nicht mehr daran gedacht, zu Powerpoint zurückzukehren.
Was wollen wir
Vor etwa anderthalb Jahren hat unser Unternehmen aufgehört, Word zur Erstellung von Projektdokumentationen zu verwenden, da es auf die gleichen Probleme gestoßen ist: Obwohl sich Word gut zum Schreiben kleiner Dokumente eignet, treten mit zunehmendem Umfang Schwierigkeiten bei der Zusammenarbeit und beim Erhalt qualitativ hochwertiger Dokumente auf einheitliches Design. Unsere Wahl fiel auf , und wir freuen uns immer wieder über diese Wahl, aber das ist ein Thema für einen separaten Artikel. Etwa zur gleichen Zeit lernten wir die Wirksamkeit eines der DevOps-Prinzipien „Alles als Code“ kennen, sodass die Wahl der Anforderungen an die neue Technologie zur Erstellung von Präsentationsfolien ziemlich offensichtlich war:
- Die Präsentation muss eine reine Textdatei in einer Auszeichnungssprache sein.
- In unseren Folien geht es um Entwicklungsprojekte, daher sollte das Markup das Einfügen einfach machen, ohne auf externe Systeme zurückgreifen zu müssen
- Codefragmente mit Syntaxhervorhebung,
- einfache Diagramme in Form von geometrischen Formen, die durch Pfeile verbunden sind,
- UML-Diagramme, Flussdiagramme und mehr.
- Der Präsentationsentwurf muss in einem Versionskontrollsystem gespeichert werden.
- Die Validierung und Zusammenstellung fertiger Folien sollte in einem CI-System erfolgen.
Heutzutage gibt es zwei grundlegende Optionen zum Erstellen von Folien in Auszeichnungssprachen: Paket für LaTeX oder eines der Frameworks zum Erstellen von Folien mit HTML/CSS (, , und viele andere).
Obwohl meine Seele in LaTeX steckt, war mir klar, dass die Wahl einer Lösung, die ich nicht als Einziger verwenden würde, auf der Seite einer Lösung liegen sollte, die einem größeren Kreis von Menschen bekannt ist. Nicht jeder kennt LaTeX, und wenn Ihre tägliche Praxis nicht mit dem Schreiben wissenschaftlicher Artikel zu tun hat, werden Sie wahrscheinlich keine Zeit haben, in die riesige, komplexe Welt dieses Systems einzutauchen.
Allerdings ist die Beherrschung von HTML/CSS nicht gerade eine weit verbreitete Fähigkeit: Ich beispielsweise beherrsche sie bei weitem nicht vollständig. Glücklicherweise kommt der bereits bekannte AsciiDoctor zur Rettung: ein Konverter ermöglicht Ihnen die Erstellung von RevealJS-Folien mit AsciiDoctor-Markup. Und es ist leicht zu erlernen und für jeden zugänglich!
So kodieren Sie Folien
Um das Wesentliche beim Codieren von Folien in AsciiDoctor zu verstehen, ist es am einfachsten, konkrete Beispiele zu nennen. Dies sind alles echte Folien, die ich dieses Jahr für meine Konferenzpräsentationen erstellt habe.
Eine Folie mit einem Titel und einer Liste mit nacheinander geöffneten Elementen:
== Зачем нам Streams API?
[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабированиеErlebe die Kraft effektiver Ergebnisse
Header- und Quellcode-Snippet mit Syntaxhervorhebung:
== Kafka Streams API: общая структура KStreams-приложения
[source,java]
----
StreamsConfig config = ...;
//Здесь устанавливаем всякие опции
Topology topology = new StreamsBuilder()
//Здесь строим топологию
....build();
----Erlebe die Kraft effektiver Ergebnisse
Zur Vorbereitung auf einen Vortrag werden Code-Demos wiederholt überarbeitet und verbessert. Daher ist die Möglichkeit, den „Rohcode“ schnell zu kopieren und direkt in eine Folie einzufügen, von unschätzbarem Wert. So wird sichergestellt, dass die Demo auf dem neuesten Stand ist, ohne sich Gedanken über die Syntaxhervorhebung machen zu müssen.
Titel, Illustration und Text (das Layout auf der Folie erfolgt in Zellen). ):
== Kafka Streams in Action
[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
“Kafka Streams in Action”, November 2018
* Примеры кода для Kafka 1.0
|===Erlebe die Kraft effektiver Ergebnisse
Manchmal ist kein Titel erforderlich, und um Ihren Standpunkt zu veranschaulichen, benötigen Sie lediglich ein Vollbild:
[%notitle]
== Жить в легаси нелегко
image::swampman.jpg[canvas, size=cover]Erlebe die Kraft effektiver Ergebnisse
Oft muss eine Idee durch ein einfaches Diagramm in Form von „durch Pfeile verbundenen Quadraten“ unterstützt werden. Glücklicherweise ist AsciiDoctor in das System integriert – eine Sprache, die es Ihnen ermöglicht, Diagramme basierend auf der Beschreibung von Eckpunkten und Verbindungen zwischen ihnen zu beschreiben. Graphviz erfordert eine gewisse Lernkurve, aber basierend auf den bereitgestellten Beispielen ist es ziemlich einfach! So sieht es aus:
== Пишем “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;}
}
-----Erlebe die Kraft effektiver Ergebnisse
Für den Fall, dass die Beschriftung der Abbildung bearbeitet, die Pfeilrichtung usw. geändert werden muss, kann dies direkt im Präsentationscode erfolgen, anstatt das Bild irgendwo neu zu zeichnen und erneut in die Folie einzufügen. Dadurch wird die Geschwindigkeit beim Bearbeiten von Folien deutlich erhöht.
Ein komplizierteres Beispiel:
== Невоспроизводимая сборка
[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;}
}
-----Erlebe die Kraft effektiver Ergebnisse
Übrigens ist es praktisch, mit Graphviz zu experimentieren und Bilder auf der Seite zu debuggen .
Wenn Sie schließlich ein Flussdiagramm, ein Klassendiagramm oder ein anderes standardisiertes Diagramm in eine Folie einfügen müssen, kann ein anderes in AsciiDoctor integriertes System Abhilfe schaffen. . Mein Kollege Nikolai Potashnikov hat über die umfangreichen Möglichkeiten von PlantUML geschrieben .
Durch die Umwandlung des Präsentationsprojekts in Code, der in einem Versionskontrollsystem gespeichert ist, ist es möglich, die gemeinsame Arbeit an der Präsentation zu organisieren und zunächst die Aufgaben der Inhaltserstellung und des Designs zu trennen. Die Gestaltung von Folien (Schriftarten, Hintergründe, Einzüge) in RevealJS wird mittels CSS beschrieben. Meine persönlichen CSS-Kenntnisse werden am besten vermittelt durch - aber es ist nicht beängstigend, wenn es Leute gibt, die viel geschickter und schneller mit CSS arbeiten als ich. Das Ergebnis ist, dass wir angesichts der immer näher rückenden Deadline für eine Präsentation über Git gleichzeitig an verschiedenen Dateien arbeiten und eine Geschwindigkeit der Zusammenarbeit erreichen können, die beim Versenden von .pptx-Dateien per E-Mail nicht möglich ist.
Erstellen einer HTML-Seite mit Folien
Klartextquellen sind großartig, aber wie fügt man sie in die Präsentation selbst ein?
AsciiDoctor ist ein in Ruby geschriebenes Projekt und es gibt mehrere Möglichkeiten, es auszuführen. Erstens können Sie die Ruby-Sprache installieren und asciidoctor direkt ausführen, was Ruby-Entwicklern wahrscheinlich am nächsten kommt.
Wenn Sie sich nicht mit der Installation von Ruby herumschlagen möchten, können Sie das Docker-Image verwenden , in das Sie beim Start den Ordner über VOLUME mit den Projektquellen verbinden und das Ergebnis an einem bestimmten Ort abrufen können.
Die von mir gewählte Option erscheint vielleicht etwas unerwartet, ist aber für mich als Java-Entwickler die bequemste. Es erfordert keine Installation von Ruby oder Docker, ermöglicht Ihnen aber die Generierung von Folien mithilfe eines Maven-Skripts.
Der Punkt ist, dass das Projekt - Die Java-Implementierung der Ruby-Sprache ist so gut, dass Sie fast alles, was für Ruby erstellt wurde, auf einer Java-Maschine ausführen können, und die Ausführung von AsciiDoctor ist eine der häufigsten Anwendungen von JRuby.
Verfügbarkeit ermöglicht Ihnen das Sammeln von AsciiDoctor-Dokumentation, die Teil eines Java-Projekts ist (das wir aktiv nutzen). Gleichzeitig werden AsciiDoctor und JRuby automatisch von Maven heruntergeladen und AsciiDoctor läuft in der JRuby-Umgebung: Es ist nicht erforderlich, etwas auf dem Computer zu installieren! (Ohne Paket graphviz, was benötigt wird, wenn Sie GraphViz- oder PlantUML-Grafiken verwenden möchten.) Legen Sie Ihre .adoc-Dateien einfach in einem Ordner ab src/main/asciidoc/. Hierher Sammeln von Folien mit Diagrammen.
Konvertieren Sie Folien in PDF
Obwohl die HTML-Version der Folien recht autark ist, ist es dennoch notwendig, eine PDF-Version der Folien zu haben. Erstens kommt es vor, dass bei einigen Konferenzen, bei denen der Redner nicht die Möglichkeit hat, seinen eigenen Laptop anzuschließen, Folien „ausschließlich im pptx- oder pdf-Format“ verlangt werden, ohne zu erwarten, dass sie auch im HTML-Format vorliegen. Zweitens gehört es zum guten Ton, den Organisatoren eine unbearbeitete Version Ihrer Folien, wie sie im Bericht gezeigt wurden, im PDF-Format zur Veröffentlichung der Datei in den Konferenzmaterialien zuzusenden.
Glücklicherweise übernimmt das Dienstprogramm Node.js diese Aufgabe. , auf der Basis gebaut — Automatisierungssysteme zur Verwaltung des Chrome-Browsers. Mit dem Befehl können Sie die RevealJS-Präsentation in PDF konvertieren
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Zwei Tricks bei der Einführung von Decktape, die wir uns durch Ausprobieren ausdenken mussten:
-
Auflösung über Parameter
-smuss mit doppeltem Rand angegeben werden, da es sonst zu Problemen mit den Konvertierungsergebnissen kommen kann -
In der URL der HTML-Version der Präsentation müssen Sie einen Parameter übergeben
?fragments=true, wodurch für jeden Zwischenzustand Ihrer Folie eine separate PDF-Seite erstellt wird (z. B. fünf Seiten für fünf Aufzählungspunkte, wenn diese nacheinander angezeigt werden). Auf diese Weise können Sie ein solches PDF allein als Präsentation während eines Berichts verwenden.
Automatische Zusammenstellung und Veröffentlichung im Web
Es ist praktisch, wenn Folien automatisch zusammengestellt werden, wenn Änderungen am Versionskontrollsystem vorgenommen werden, und noch praktischer, wenn automatisch zusammengestellte Folien zur öffentlichen Nutzung ins Internet gestellt werden. Folien aus dem Internet können von jedem mit dem Internet verbundenen Gerät und einem Projektor problemlos vor Publikum „abgespielt“ werden.
Da wir bei unserer Arbeit GitHub verwenden, ist die natürliche Wahl eines CI-Systems , und zum Hosten vorgefertigter Präsentationen - . Die Idee hinter github.io besteht darin, dass alle statischen Inhalte in einem Zweig gepostet werden gh-pages Ihres Projekts auf GitHub wird unter verfügbar <ваше имя>.gihub.io/<ваш проект>.
Vervollständigen Sie die TravisCI-Konfigurationsdatei, einschließlich der Kompilierung der HTML-Version der Seite mit Maven, der Konvertierung in PDF mit Decktape und dem Hochladen der Ergebnisse in einen Thread gh-pages zur Veröffentlichung auf github.io, sieht aus wie .
Um ein solches Projekt auf der TravisCI-Seite zu erstellen, müssen Sie Umgebungsvariablen konfigurieren
GH_REF– Wert wie github.com/inponomarev/csa-hbGH_TOKEN– GitHub-Zugriffstoken. Sie können es von GitHub in Ihren Profileinstellungen erhalten, Entwicklereinstellungen -> Persönliche Zugriffstoken. Wenn Sie eine Präsentation in ein öffentliches Repository hochladen, reicht es für dieses Token aus, die einzige Zugriffsebene „Zugriff auf öffentliche Repositorys“ anzugeben.GH_USER_EMAIL/GH_USER_NAME– Name/E-Mail-Paar, in dessen Namen der Push an den Thread ausgeführt wirdgh-pages.
Somit führt jedes Commit des Präsentationscodes auf GitHub dazu, dass die Folien automatisch im HTML- und PDF-Format neu erstellt und erneut auf github.io hochgeladen werden. (Natürlich sollten Sie nur die Präsentationen auf github.io hochladen, die Sie letztendlich öffentlich machen möchten.)
Beispiele für Projekte
Abschließend finden Sie hier Links zu einigen Beispielen für Präsentationsprojekte mit angepassten Maven-Skripten und CI-Konfiguration für Travis-CI, die geklont und beim Erstellen eigener Präsentationsprojekte verwendet werden können:
-
(mein Vortrag für JPoint 2019)
-
(mein Bericht zum Heisenbug 2019)
Auf Wiedersehen Powerpoint! Ich glaube nicht, dass ich dich jemals für technische Präsentationen brauchen werde :)
Source: habr.com