Es scheint, dass ich die Gelegenheit hatte, Dutzende von Präsentationen für Kollegen, Kunden und öffentliche Auftritte für meine Karriere in der IT zu halten. Powerpoint ist für mich als Mittel zur Herstellung von Dias seit vielen Jahren eine natürliche und zuverlässige Wahl. Aber dieses Jahr hat sich die Situation qualitativ geä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 mit hoher Qualität erstellt werden. Es stellte sich die Frage, ob dieser Teil der Arbeit, wie die visuelle Gestaltung von Dias, an andere Personen delegiert werden soll. Einmal habe ich versucht, mit einem Designer zusammenzuarbeiten, indem ich PPTX-Dateien per E-Mail gesendet habe, aber die Arbeit wurde zu einem Chaos: Niemand wusste, welche Version der Folien „neu“ war, und das Layout „ging“ aufgrund der unterschiedlichen Powerpoint-Versionen und -Schriftarten auf unseren Computern . Und ich habe beschlossen, etwas Neues auszuprobieren. Ich habe es versucht und denke seitdem nicht mehr daran, zu Powerpoint zurückzukehren.
Was wollen wir?
Vor ungefähr anderthalb Jahren haben wir uns im Unternehmen geweigert, Word zum Erstellen von Projektdokumentationen zu verwenden, da wir mit denselben Problemen konfrontiert sind: Obwohl Word für die Eingabe eines kleinen Dokuments gut geeignet ist, gibt es bei wachsenden Volumina Schwierigkeiten, zusammenzuarbeiten und qualitativ hochwertiges und einheitliches Design zu erhalten. Unsere Wahl fiel auf AsciiDoctor , und wir freuen uns immer wieder über diese Wahl, aber dies ist ein Thema für einen separaten Artikel. Etwa zur gleichen Zeit lernten wir die Wirksamkeit eines der DevOps-Prinzipien von "Alles als Code", sodass die Auswahl der Anforderungen für die neue Technologie zum Erstellen von Präsentationsfolien ziemlich offensichtlich war:
- Die Präsentation sollte eine reine Textdatei in einer Auszeichnungssprache sein.
- Wir haben Folien zu Entwicklungsprojekten, daher sollten Markups das einfache Einfügen ermöglichen, ohne auf externe Systeme zurückgreifen zu müssen
- Syntax hervorgehobene Codefragmente,
- einfache Diagramme in Form von geometrischen Formen, die durch Pfeile verbunden sind,
- UML-Diagramme, Flussdiagramme und mehr.
- Das Präsentationsprojekt sollte in einem Versionskontrollsystem gespeichert werden.
- Die Validierung und Montage der fertigen Objektträger sollte im CI-System erfolgen.
Heute gibt es zwei grundlegende Optionen zum Erstellen von Folien in Auszeichnungssprachen: das Beamer- Paket für LaTeX oder eines der Frameworks zum Erstellen von Folien in HTML / CSS ( RevealJS , Bemerkung , deck.js und viele andere).
Obwohl meine Seele bei LaTeX liegt, schlug mein Verstand vor, dass die Wahl einer Lösung, die ich nicht alleine verwenden werde, auf der Seite der Lösung liegen sollte, die einem größeren Kreis von Menschen vertraut ist. Nicht jeder kennt LaTeX, und wenn Ihre tägliche Praxis nicht mit dem Schreiben wissenschaftlicher Artikel zusammenhängt, ist es unwahrscheinlich, dass Sie Zeit haben, in die weite, komplizierte Welt dieses Systems einzutauchen.
Die Beherrschung von HTML / CSS bedeutet jedoch nicht, dass dies eine allgegenwärtige Fähigkeit ist: Zum Beispiel besitze ich sie nicht vollständig. Glücklicherweise hilft Ihnen der bekannte AsciiDoctor: Mit dem Asciiidoctor-Reveljs-Konverter können Sie RevealJS-Folien mit AsciiDoctor-Markup erstellen. Und es ist so einfach zu lernen und für alle zugänglich!
So codieren Sie Folien
Um die Essenz der Codierung von Folien in AsciiDoctor zu verstehen, ist es am einfachsten, spezifische Beispiele zu nennen. Alle stammen von echten Folien, die ich für meine diesjährigen Konferenzgespräche erstellt habe.
Eine Folie mit einer Überschrift und einer Liste nacheinander in den ersten Absätzen:
== Streams API? [%step] * Real-time stream processing * Stream-like API (map / reduce) * : ** offset commit ** ** **
Header und Snippet des Quellcodes mit Syntaxhervorhebung:
== Kafka Streams API: KStreams- [source,java] ---- StreamsConfig config = ...; // Topology topology = new StreamsBuilder() // ....build(); ----
Während der Vorbereitung des Berichts werden die Demo-Codebeispiele wiederholt geändert und verbessert. Daher ist die Möglichkeit, den „Rohcode“ schnell zu kopieren und direkt in die Folie einzufügen, von unschätzbarem Wert, um die Relevanz des Demo-Beispiels sicherzustellen und sich nicht um die Hervorhebung der Syntax zu kümmern.
Titel, Abbildung und Text (das Layout auf der Folie wird in den Zellen der AsciiDoctor-Tabelle ausgeführt ):
== Kafka Streams in Action [.custom-style] [cols="30a,70a"] |=== |image::KSIA.jpg[] | * **William Bejeck**, + “Kafka Streams in Action”, November 2018 * Kafka 1.0 |===
Manchmal wird der Titel nicht benötigt, aber um Ihre Gedanken zu veranschaulichen, benötigen Sie nur ein Vollbild:
[%notitle] == image::swampman.jpg[canvas, size=cover]
Oft muss die Idee durch ein einfaches Diagramm in Form von "durch Pfeile verbundenen Quadraten" unterstützt werden. Glücklicherweise ist AsciiDoctor in das Graphviz- System integriert, eine Sprache, mit der Sie Diagrammdiagramme anhand von Beschreibungen von Scheitelpunkten und deren Beziehungen beschreiben können. Graphviz muss beherrscht werden, aber basierend auf vorhandenen Beispielen ist dies 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;} } -----
Wenn die Signatur in 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. Dies erhöht die Arbeitsgeschwindigkeit auf Folien erheblich.
Ein Beispiel ist komplizierter:
== [graphviz, "unstable-update.png"] ----- digraph G { rankdir="LR"; graph [ dpi = 150 ]; u -> r0; u[shape=plaintext; label="linter update\n+ 13 warnings"] r0[shape=point, width = 0] r1 -> r0[ arrowhead = none, label="master branch" ]; r0-> r2 []; b1 -> b4; r1->b1 r1[label="150\nwarnings"] b1[label="± 0\nwarnings"] b4[label="± 0\nwarnings"] b4->r2 r2[label="163\nwarnings", color="red", xlabel=<<font color="red">merge blocked</font>>] {rank = same; u; r0; b4;} } -----
Das Experimentieren mit Graphviz und das Debuggen von Bildern ist übrigens auf der Graphviz-Online- Seite praktisch.
Wenn Sie ein Blockdiagramm, ein Klassendiagramm oder ein anderes standardisiertes Diagramm in die Folie einfügen müssen , kann ein anderes in AsciiDoctor integriertes System, PlantUML , Abhilfe schaffen . Mein Kollege Nikolai Potashnikov hat einen separaten Beitrag über die enormen Möglichkeiten von PlantUML geschrieben.
Die Umwandlung des Präsentationsprojekts in Code, der auf dem Versionskontrollsystem gespeichert ist, ermöglicht es, gemeinsame Arbeiten an der Präsentation zu organisieren, um zunächst die Aufgaben der Erstellung von Inhalten und des Designs zu trennen. Das Design von Folien (Schriftarten, Hintergründe, Einrückungen) in RevealJS wird mithilfe von CSS beschrieben. Meine persönlichen CSS-Fähigkeiten werden am besten durch dieses GIF vermittelt - aber es ist nicht beängstigend, wenn es Leute gibt, die mit CSS viel agiler und schneller arbeiten als ich. Infolgedessen stellt sich heraus, dass wir im Kontext einer sich schnell nähernden Präsentationsfrist gleichzeitig über Git an verschiedenen Dateien arbeiten und die Geschwindigkeit der Zusammenarbeit entwickeln können, die beim Senden von PPTX-Dateien per E-Mail nicht möglich ist.
Erstellen Sie eine HTML-Seite mit Folien
Nur-Text-Quellen sind großartig, aber wie kompilieren Sie sie in der Präsentation selbst?
AsciiDoctor ist ein Ruby-Projekt und kann auf verschiedene Arten ausgeführt werden. Erstens können Sie die Ruby-Sprache installieren und asciidoctor direkt ausführen, was den Ruby-Entwicklern wahrscheinlich am nächsten kommt.
Wenn Sie sich nicht an der Installation von Ruby beteiligen möchten, können Sie das Docker-Image asciidoctor / docker-asciidoctor verwenden , mit dem Sie den Projektquellordner über VOLUME verbinden und das Ergebnis am angegebenen Speicherort abrufen können.
Die Option, für die ich mich entschieden habe, mag etwas unerwartet erscheinen, ist aber für mich als Java-Entwickler am bequemsten. Es erfordert keine Installation von Ruby oder Docker, ermöglicht jedoch das Generieren von Folien mithilfe eines Maven-Skripts.
Tatsache ist, dass das JRuby- Projekt - die Java-Implementierung der Ruby-Sprache - so gut ist, dass Sie fast alles ausführen können, was für Ruby auf dem Java-Computer erstellt wurde, und AsciiDoctor ist eine der häufigsten JRuby-Anwendungen.
Das Vorhandensein des Asciidoctor-Maven-Plugins ermöglicht es Ihnen, die AsciiDoctor-Dokumentation zu sammeln, die Teil des Java-Projekts ist (das wir aktiv verwenden). Gleichzeitig werden AsciiDoctor und JRuby automatisch von Maven heruntergeladen und AsciiDoctor wird in der JRuby-Umgebung ausgeführt: Es muss nichts auf dem Computer installiert sein! (Mit Ausnahme des graphviz Pakets, das benötigt wird, wenn Sie GraphViz- oder PlantUML-Grafiken verwenden möchten.) Legen Sie Ihre ADOC-Dateien einfach im src/main/asciidoc/ . Hier ist ein Beispiel für ein Pickhouse , das Diagrammfolien sammelt.
Folien in PDF konvertieren
Obwohl die HTML-Version der Folien völlig autark ist, ist dennoch eine PDF-Version der Folien erforderlich. Erstens kommt es vor, dass bei einigen Konferenzen, bei denen der Sprecher nicht die Möglichkeit hat, seinen eigenen Laptop anzuschließen, Folien „ausschließlich im pptx- oder pdf-Format“ erforderlich sind, ohne zu erwarten, dass sie auch in HTML vorliegen. Zweitens ist es eine gute Form, den Organisatoren eine unveränderte Version Ihrer Folien in der Form zu senden, wie sie im Bericht angezeigt wurden, im PDF-Format zur Veröffentlichung der Datei in den Konferenzmaterialien.
Glücklicherweise ist Node.js ein Decktape- Dienstprogramm, das auf Puppeteer basiert , dem Chrome-Browser-Automatisierungssystem, das diese Aufgabe übernimmt. 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, um das Decktape zu starten, das durch Ausprobieren kommen musste:
Die Auflösung über den Parameter -s muss mit einem doppelten Rand festgelegt werden, da sonst Probleme mit den Konvertierungsergebnissen auftreten können
In der URL der HTML-Version der Präsentation müssen Sie den Parameter ?fragments=true , mit dem Sie für jeden Zwischenzustand Ihrer Folie eine separate PDF-Seite erstellen können (z. B. fünf Seiten für fünf Listenelemente, sofern diese nacheinander angezeigt werden). Dies ermöglicht die Verwendung eines solchen PDF an sich als Präsentation in einem Bericht.
Automatische Erstellung und Veröffentlichung im Web
Es ist praktisch, wenn die Folien automatisch erfasst werden, wenn Änderungen in das Versionskontrollsystem fallen, und noch praktischer, wenn die automatisch kompilierten Folien zur allgemeinen Verwendung im Internet veröffentlicht werden. Folien aus dem Internet können von jedem mit dem Internet und dem Projektor verbundenen Computer aus problemlos vor einem Publikum „abgespielt“ werden.
Da wir GitHub in unserer Arbeit verwenden, ist TravisCI die natürliche Wahl für das CI-System und für das Hosten von vorgefertigten Präsentationen - imtqy.com . Die Idee von imtqy.com ist, dass statischer Inhalt, der im gh-pages Zweig Ihres Projekts auf GitHub platziert wird, unter < >.gihub.io/< > verfügbar wird.
Die vollständige TravisCI-Konfigurationsdatei, die das Kompilieren der HTML-Version der Seite mit Maven, das Konvertieren in PDF mithilfe von Decktape und das Hochladen der Ergebnisse in den Zweig gh-pages zur Veröffentlichung auf imtqy.com umfasst, sieht folgendermaßen aus.
Um ein solches Projekt auf der Seite von TravisCI zu erstellen, müssen Sie Umgebungsvariablen konfigurieren
GH_REF - Wert der Form github.com/inponomarev/csa-hbGH_TOKEN - GitHub-Zugriffstoken. Sie können es auf GitHub in Ihren Profileinstellungen unter Entwicklereinstellungen -> Persönliche Zugriffstoken herunterladen. Wenn Sie die Präsentation in ein öffentliches Repository hochladen, reicht es aus, für dieses Token die einzige Zugriffsebene "Zugriff auf öffentliche Repositorys" anzugeben.GH_USER_EMAIL / GH_USER_NAME - Name / Mail-Paar, in dessen Auftrag der Push an den gh-pages Zweig implementiert wird.
Daher werden bei jedem Festschreiben des Präsentationscodes auf GitHub die Folien automatisch in HTML- und PDF-Formaten neu erstellt und auf imtqy.com neu geladen. (Natürlich sollten nur die Präsentationen, die Sie am Ende veröffentlichen möchten, auf imtqy.com hochgeladen werden.)
Projektbeispiele
Schließlich gibt es Links zu einigen Beispielen für Präsentationsprojekte mit benutzerdefinierten Maven-Skripten und CI-Konfiguration für Travis-CI, die Sie klonen und beim Erstellen Ihrer eigenen Präsentationsprojekte verwenden können:
Auf Wiedersehen Powerpoint! Ich glaube nicht, dass ich dich jemals für technische Präsentationen brauchen werde :-)