👩🏾‍🍳 🖖🏼 🥫 现代演示格式？ 🚦 🎹 🐳

如今，当虚拟现实头盔成为我们现实的一部分并且特斯拉汽车飞向太空时，您可以使用浏览器引擎的所有功能来创建真正的交互式，跨平台和时尚的演示文稿，而不必制作一组PPTX页面，甚至更糟糕的是，PDF格式的“说明和计算报告的说明性材料”。

自2015年以来，我一直在努力寻找适合自己的最佳演示文稿格式（毕业项目除外）。现在我想我几乎成功了。所有这些都始于PowerPoint，最后是基于JavaScript的Web框架。

有几种JavaScript引擎可用于创建很酷的演示文稿： Marp ， Reveal ， landslide ， hacker-slides ， slidify等。在某些引擎中，您可以使用Markdown，一些引擎嵌入在IDE中，而有些则拥有自己的编辑器。我已经尝试了前两个引擎。

作为演示，提供了幻灯片示例和视频。

上述两个引擎均支持Markdown纯文本格式。第一个Marp允许您在自己的IDE中创建演示文稿，这非常方便，但是输出仍然是静态PDF。第二个是Reveal ，它更有趣：它可用于创建整个演示文稿网站-除了Markdown之外，还可以使用JavaScript，HTML和CSS的全部功能。在本文中，我将主要谈论Reveal 。

您可以在资源库https://github.com/KvanTTT/Presentations中查看我的演示文稿的演变。

少量文字

您的听众将不会从幻灯片上阅读演示文稿的文本，因此请勿在幻灯片上放置整个段落。与观众交谈。如果您不确定是否在幻灯片上放置一段文字，请将其丢弃。如有必要，写一篇文章，其中将详细说明。最好使用更多的可视信息。

使用隐喻

使用隐喻是很好的。演讲开始时，观众应该参与进来并保持清醒。这可以借助有趣的图片来完成。但是要知道局限性：大量的笑话可能会令人讨厌和分散注意力。

极简主义和平面设计

我借鉴的原则之一。现在它是趋势，我也喜欢它。因此，在创建演示文稿时，建议使用少量的基本颜色（3到5种）。

在线访问

该演示文稿应该可以从浏览器中获得。因此，在演示过程中，您将不会担心丢失闪存驱动器，笔记本电脑崩溃以及其他困难。

离线工作

Internet连接突然丢失不是大问题。但是，您仍然需要浏览器。在这种情况下，所有图片都应该是本地的。要运行演示文稿，只需从GitHub存储库下载源代码。

跨平台版本

它可以在Windows ， Mac ， Linux ， Android和iOS上运行。是的，您可以在演示过程中甚至在手机上浏览幻灯片！

英文幻灯片

在一个好的演示文稿中，文本很少，而且很简单。对于大多数会讲基础英语的听众来说，用俄语（或其他非英语语言）和英语幻灯片进行的演讲将很清楚。翻译音频很容易，但是更改视频却很难。

通过链接访问

通话过程中，听众可以在其设备上打开演示文稿。在标题幻灯片上，您可以将短链接kvanttt.imtqy.com链接到主站点，在该站点上很容易找到演示文稿的完整链接。

可读链接

从演示文稿的链接https://kvanttt.imtqy.com/Presentations/2018-05-15-Source-code-analyzers-how-generalizable-are-they/English/index.html ，以下内容即刻清晰可见：

作者： kvanttt
发布日期： 2018-05-15
格式： 演示文稿 （也可以是例如Articles ， Samples ）
语言：英语
标题： 源代码分析仪如何通用化
您还可以使用数字符号#/5来引用演示文稿的任何页面。

黑暗与光明的主题

最佳适应照明或情绪。您也可以创建自己的。

您还可以更改幻灯片之间的过渡样式。

与版本控制系统（Git）集成

Git是最流行的版本控制系统之一。使用Git，您可以提交更改，创建和合并分支，比较文件的不同版本（diff），确定特定字符串的作者（责备）以及做很多其他事情。 Git不是很简单，但是基本功能可以很快掌握。

可以对GitHub进行配置，以便当您推送到gh-pages或master分支时，该站点立即发布在imtqy.com域中的静态主机上-这非常方便。

这是源文件夹： https : //github.com/KvanTTT/Presentations/tree/master/2018-05-15-Source-code-analyzers-how-generalizable-are-they

使用纯文本格式（降价）

它是一种简单的文本格式-标记和其他复杂语法是可选的。对于技术作者来说，它就像Python ：)另一方面，由于这是文本格式，因此比较不同的版本很容易，并且您可以使用标准的编程器工具，例如Pull Request | 合并请求或仅将编辑提交到适当的分支。

Markdown使描述变得容易：

不同的文字样式（斜体，粗体， ~~删除线~~ ，链接，引号， code snippet ），
标题
列表，有序和无序，
桌子
扰流板
可能会因实现方式而异的其他元素。如有必要，您也可以使用HTML标记。

幻灯片来源示例

 <!-- .slide: style="text-align: left;" --> # ️ Text fingerprinting with zero-length characters Be careful what you copy <span class="fragment">️ [https://diffchecker.com](https://www.diffchecker.com/M2PvqSXw)</span> <span class="fragment"> Be c•aref•ul wh•at yo•u copy• </span> <aside class="fragment" align="middle">Detail: [habr.com](https://habr.com/post/352950/) | [Medium](https://medium.com/@umpox/be-careful-what-you-copy-invisibly-inserting-usernames-into-text-with-zero-width-characters-18b4e6f17b66) </span> <br> <aside class="notes"> There is another similar funny story with zero-width characters. For example, I have inserted 5 such characters into this string, can you tell? You can check it using the service <https://www.diffchecker.com>. These characters can be used as unique text fingerprints to identify users. Using this method, for example, you can play detective: encode the name of the user in a copied message to understand who leaks some confidential information :) You can find more information about such characters on Habr and Medium. </aside> ---

幻灯片笔记

在演示过程中，您可以按S并查看准备好的笔记和下一张幻灯片。您也可以使用计时器控制通话时间。注释可以显示在第二台监视器上。

使用表情符号

表情符号可用于将幻灯片与视觉图像相关联。不幸的是，Habr仍不支持它们，因此您不会在本段上方的标题中看到表情符号。

适当格式的图片和方案（JPG，PNG，SVG）

日文版

有损压缩格式，适用于具有渐变和丰富调色板的照片和复杂图像。不利于带有文字和符号的工程图和图形。有益于背景。

PNG

无损压缩格式，适用于具有较大均匀区域和有限调色板的图像。无需将其用于照片，因为文件大小会更大。适合截图。

SVG

由于某些原因，许多人忘记了SVG，它具有以下优点：

将图像缩放到任意大小而不会损失质量；
与Git集成（文本格式）；
您可以直接更改文件中的颜色，字体和其他元素；
小文件。

所有现代浏览器都支持-甚至Habr！不幸的是，它只能间接上传到Habr。

请注意，本文中的大多数图片都是SVG格式。

这是此幻灯片的背景SVG图像的源代码片段

 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- Generated by graphviz version 2.38.0 (20140413.2041) --> <!-- Title: cfg Pages: 1 --> <svg width="478pt" height="601pt" viewBox="0.00 0.00 478.13 601.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 597)"> <title>cfg</title> <polygon fill="white" stroke="none" points="-4,4 -4,-597 474.131,-597 474.131,4 -4,4"/> <!-- 27 --> <g id="node1" class="node"> <title>27</title> <ellipse fill="none" stroke="black" cx="310.039" cy="-575" rx="75.2868" ry="18"/> <text text-anchor="middle" x="310.039" y="-571.3" font-family="Times New Roman,serif" font-size="14.00">name == &quot;admin&quot;</text> </g> <!-- 33 --> <g id="node2" class="node"> <title>33</title> <ellipse fill="none" stroke="black" cx="229.039" cy="-488" rx="81.4863" ry="18"/> <text text-anchor="middle" x="229.039" y="-484.3" font-family="Times New Roman,serif" font-size="14.00">key1 == &quot;validkey&quot;</text> </g>

使用便捷的IDE

例如，带有插件的Visual Studio Code 。左侧为预览，右侧或浏览器为最终版本（渲染）。有一个拼写检查器插件，用于生成内容（TOC），格式化表格的插件等。

易于打印演示文稿文本

幻灯片和注释的文本可以轻松打印（例如，用于培训）。它是纯文本，垃圾最少。

免费使用

所有工具，格式和静态托管.imtqy.com都是免费的。甚至这张照片

附加功能

在reveal.js引擎中，其他功能也可用

垂直幻灯片：您不仅可以横向滚动，还可以纵向滚动。
无需使用slides.com即可编写演示文稿的能力。
能够一次查看许多幻灯片，以便于导航。
使用视频作为背景使用不同类型的背景平铺。
自动幻灯片放映。
还有其他一些功能。

您也可以尝试使用交互式版本。

演示看起来简单而酷

是的，当然，由于引擎的不完善以及非前端开发人员的能力不足，导致存在一些小缺陷：)但是，在我看来，它看起来不错。如果您不同意，请发表评论。

缺点

当然，一切都有缺点，这种方法也不例外：

笨拙地导出为PDF ，您必须编辑输出。但是，也可以使用 ‌。
没有导出到PPTX 。
掌握起来并不容易，特别是对于非程序员和非前端开发人员（理想情况下，您需要了解HTML和CSS ）。
进行编辑不是很容易。但是您可以对其进行调整和自动化。
表情符号并非在各处都显示相同（例如，您不会在此句子中看到表情符号）。
发动机仍然很粗糙。

结论

在我看来，未来的演示将是这样的：交互式，以易于程序员和设计师编辑的网站格式。让我们尝试拉近这个未来！

顺便说一下，也可以使用Git和Markdown编写文章，并将其托管在GitHub或GitLab上。我稍后会写。

如果您有任何更正或补充，请在下面写下您的评论。我将考虑它们，并可能将其包含在文章中。

文章的来源可在GitHub上找到 -如果发现任何错误，请发送请求请求。 为了转换为habr.com格式，我使用了MarkConv库。

现代演示格式？