主持人 > 博客 > 管理 > 以代码形式演示，或者为什么我不再使用 Powerpoint

以代码形式演示，或者为什么我不再使用 Powerpoint

以代码形式演示，或者为什么我不再使用 Powerpoint

我想在我的 IT 职业生涯中，我已经向同事、客户进行了数十次演示和公开演讲。 多年来，Powerpoint 作为幻灯片制作工具一直是我自然而可靠的选择。 但今年情况发生了质的变化。 从二月到五月，我有机会在五次会议上发言，报告的幻灯片必须在短时间内准备好，但质量要高。 出现了将幻灯片视觉设计部分工作委托给其他人的问题。 我曾经尝试与设计师合作，通过邮件发送 .pptx 文件，但工作变得混乱：没有人知道哪个版本的幻灯片是“最新”的，并且由于 Powerpoint 的差异，布局“移动”我们机器上的版本和字体。 我决定尝试一些新的东西。 我尝试过，从那以后我就没有想过再回到Powerpoint了。

我们想要什么

大约一年半前，我们公司停止使用Word创建项目文档，也遇到了同样的问题：虽然Word适合打印小文档，但随着文档量的增加，协作和获得高质量和高质量的文档变得困难。统一设计。 我们的选择落到了 AsciiDoctor，我们永远为这个选择感到高兴，但这是另一篇文章的主题。 大约在同一时间，我们了解到“一切皆代码”的 DevOps 原则之一的有效性，因此创建演示幻灯片的新技术的要求选择非常明显：

  1. 演示文稿必须是标记语言的纯文本文件。
  2. 我们的幻灯片是关于开发项目的，因此标记应该使其易于插入，而无需求助于外部系统
    • 带有语法高亮的代码片段，
    • 由箭头连接的几何形状形式的简单图表，
    • UML 图、流程图等。
  3. 演示文稿草稿必须存储在版本控制系统中。
  4. 成品幻灯片的验证和组装应在 CI 系统中完成。

如今，用标记语言创建幻灯片有两个基本选项： 投影仪 用于 LaTeX 或使用 HTML/CSS 创建幻灯片的框架之一（揭示JS, 备注, 甲板.js 和许多其他人）。

虽然我的灵魂在于 LaTeX，但我的想法决定，我不是唯一使用的解决方案的选择应该是更广泛的人熟悉的解决方案。 并不是每个人都了解 LaTeX，如果你的日常练习与撰写科学文章无关，那么你不太可能有时间沉浸在这个系统庞大、复杂的世界中。

然而，掌握 HTML/CSS 并不是一项普遍的技能：例如，我还远未完全精通它。 幸运的是，我们已经熟悉的 AsciiDoctor 来帮忙了：转换器 asciidoctor Revealjs 允许您使用 AsciiDoctor 标记创建 RevealJS 幻灯片。 而且它很容易学习，每个人都可以使用！

如何编写幻灯片代码

要理解 AsciiDoctor 上编码幻灯片的本质，最简单的方法是给出具体示例。 这些都是我今年为会议演讲制作的实际幻灯片。

一张带有标题和依次打开的项目列表的幻灯片：

== Зачем нам Streams API?

[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабирование

导致

以代码形式演示，或者为什么我不再使用 Powerpoint

具有语法突出显示的标头和源代码片段：

== Kafka Streams API: общая структура KStreams-приложения

[source,java]
----
StreamsConfig config = ...;
//Здесь устанавливаем всякие опции

Topology topology = new StreamsBuilder()
//Здесь строим топологию
....build();
----

导致

以代码形式演示，或者为什么我不再使用 Powerpoint

在准备演讲时，代码演示会经历反复的修改和改进，因此快速将“原始代码”直接复制并粘贴到幻灯片中的能力是非常宝贵的，可以确保演示是最新的，而不必担心语法突出显示。

标题、插图和文本（幻灯片上的布局在单元格中完成 AsciiDoctor 表):

== Kafka Streams in Action

[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
“Kafka Streams in Action”, November 2018
* Примеры кода для Kafka 1.0
|===

导致

以代码形式演示，或者为什么我不再使用 Powerpoint

有时不需要标题，为了说明你的观点，你只需要一张全屏图像：

[%notitle]
== Жить в легаси нелегко

image::swampman.jpg[canvas, size=cover]

导致

以代码形式演示，或者为什么我不再使用 Powerpoint

通常一个想法需要用一个简单的图表来支持，其形式是“用箭头连接的方块”。 幸运的是，AsciiDoctor 已与系统集成 的Graphviz — 一种允许您根据顶点及其之间的连接的描述来描述图表的语言。 Graphviz 需要一定的学习曲线，但根据提供的示例，它非常容易做到！ 它看起来是这样的：

== Пишем “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;}
}
-----

导致

以代码形式演示，或者为什么我不再使用 Powerpoint

如果需要编辑图形上的标题、更改箭头方向等，可以直接在演示代码中完成，而不用在某处重新绘制图片并将其重新插入幻灯片中。 这显着提高了幻灯片的工作速度。

一个更复杂的例子：

== Невоспроизводимая сборка
[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;}
}
-----

导致

以代码形式演示，或者为什么我不再使用 Powerpoint

顺便说一句，在页面上用 Graphviz 进行实验和调试图像很方便 图形可视化在线.

最后，如果您需要在幻灯片中插入流程图、类图或其他标准化图表，那么与 AsciiDoctor 集成的另一个系统可以帮助您， 植物UML。 我的同事 Nikolai Potashnikov 撰写了有关 PlantUML 广泛功能的文章 单独的帖子.

将演示文稿项目转换为存储在版本控制系统上的代码使得组织演示文稿的联合工作成为可能，首先，将创建内容和设计的任务分开。 RevealJS 中幻灯片的设计（字体、背景、缩进）是使用 CSS 描述的。 我个人的 CSS 技能最好的表达方式是 这个动图 - 但当有人比我更灵活、更快地使用 CSS 时，这并不可怕。 结果表明，随着演示文稿截止日期的临近，我们可以通过 Git 同时处理不同的文件，并提高通过邮件发送 .pptx 文件时不可能实现的协作速度。

使用幻灯片构建 HTML 页面

纯文本源很棒，但如何将它们编译到演示文稿本身中？

AsciiDoctor 是一个用 Ruby 编写的项目，有多种方法来运行它。 首先，你可以安装Ruby语言并直接运行asciidoctor，这可能是最接近Ruby开发者的了。

如果你不想安装 Ruby，你可以使用 docker 镜像 asciidoctor/docker-asciidoctor，启动后，您可以通过 VOLUME 将文件夹与项目源连接起来，并在给定位置获取结果。

我选择的选项可能看起来有些出乎意料，但对于我作为 Java 开发人员来说，这是最方便的。 它不需要安装 Ruby 或 docker，但允许您使用 Maven 脚本生成幻灯片。

重点是这个项目 红宝石 - Ruby 语言的 Java 实现非常好，它允许您在 Java 机器中运行为 Ruby 创建的几乎任何内容，而运行 AsciiDoctor 是 JRuby 最常见的用途之一。

可用性 asciidoctor-maven-插件 允许您收集属于 Java 项目（我们积极使用的项目）一部分的 AsciiDoctor 文档。 同时，AsciiDoctor和JRuby都是由Maven自动下载的，AsciiDoctor运行在JRuby环境中：不需要在机器上安装任何东西！ (不包括包装 graphviz，如果您想使用 GraphViz 或 PlantUML 图形，则需要该文件。）只需将 .adoc 文件放在文件夹中即可 src/main/asciidoc/。 这里 波姆尼克的例子收集带有图表的幻灯片。

将幻灯片转换为 PDF

虽然HTML版本的幻灯片已经相当自给自足，但仍然需要有PDF版本的幻灯片。 首先，在一些不为演讲者提供连接自己笔记本电脑的会议上，他们要求幻灯片“严格采用 pptx 或 pdf 格式”，而不是期望它们也是 HTML 格式。 其次，最好以 PDF 格式向组织者发送报告中显示的幻灯片的未经编辑版本，以便在会议材料中发布该文件。

幸运的是，Node.js 实用程序可以处理此任务。 甲板胶带，建立在 木偶戏 — 用于管理 Chrome 浏览器的自动化系统。 您可以使用以下命令将 RevealJS 演示文稿转换为 PDF

node decktape.js -s 3200x1800 --slides 1-500 
  reveal "file:///index.html?fragments=true" slides.pdf

推出 Decktape 时我们必须通过反复试验想出的两个技巧：

  • 通过参数解析 -s 必须指定两倍边距，否则转换结果可能会出现问题

  • 在演示文稿的 HTML 版本的 URL 中，您需要传递一个参数 ?fragments=true，这将为幻灯片的每个中间状态创建一个单独的 PDF 页面（例如，如果依次显示五个项目符号点，则五个页面）。 这将允许您在报告期间单独使用此类 PDF 作为演示文稿。

自动组装并发布到网络上

当版本控制系统发生更改时，自动编译幻灯片会很方便，而当自动编译的幻灯片发布到互联网上供公众使用时，会更方便。 来自互联网的幻灯片可以通过任何连接到互联网的机器和投影仪轻松地在观众面前“播放”。

由于我们在工作中使用 GitHub，因此 CI 系统的自然选择是 特拉维斯CI，以及举办现成的演示文稿 - github.io。 github.io 背后的想法是，发布到分支的任何静态内容 gh-pages 您的项目在 GitHub 上的位置，可在 <ваше имя>.gihub.io/<ваш проект>.

完整的TravisCI配置文件，包括使用Maven编译页面的HTML版本，使用decktape转换为PDF，以及将结果上传到线程 gh-pages 在 github.io 上发布，看起来像 所以.

在TravisCI端构建这样的项目，需要配置环境变量

  • GH_REF — 值如 github.com/inponomarev/csa-hb
  • GH_TOKEN — GitHub 访问令牌。 您可以从 GitHub 的个人资料设置中获取它，开发人员设置 -> 个人访问令牌。 如果您将演示文稿上传到公共存储库，则对于此令牌，指定唯一的访问级别“访问公共存储库”就足够了。
  • GH_USER_EMAIL / GH_USER_NAME — 名称/电子邮件对，代表将执行对线程的推送 gh-pages.

因此，每次在 GitHub 上提交演示文稿代码都会导致幻灯片自动以 HTML 和 PDF 格式重建并重新上传到 github.io。 （当然，您应该只将您最终想要公开的演示文稿上传到 github.io。）

项目示例

最后，这里是一些演示项目示例的链接，其中包含 Travis-CI 的定制 Maven 脚本和 CI 配置，您可以在创建自己的演示项目时克隆和使用这些示例：

再见幻灯片！ 我认为我永远不需要你进行技术演示:)

来源： habr.com

添加评论