开源项目演示_开源演示工具：我们还在那里吗？

开源项目演示

Photo: Conor Lawless

照片：Conor Lawless

In recent months I have been attempting to make as much of my work and creative output as open and collaborative as possible. Since most of my output being code and markdown, this has been relatively simple.

最近几个月，我一直在努力使我的工作和创意输出尽可能地公开和协作。 由于我的大部分输出是代码和减价，因此这相对简单。

However, I give a lot of presentations about open culture and it seemed a little hypocritical that I was delivering them through closed, non-collaborative software.

但是，我做了很多有关开放文化的演讲，我似乎是通过封闭的非协作软件来交付它们的，这有点虚伪。

Whilst MS Powerpoint has gained competition from applications such as Keynote and Prezi, they are all still closed and only semi-collaborative formats. Crucially, they are all 'dead-end' formats, i.e. a powerpoint file, is just a powerpoint file, it can't be easily re-used or interpretted as a part of anything else. What I mean by this will become clearer later.

虽然MS PowerPoint程序获得来自应用程序，如主题演讲和Prezi的竞争，他们都仍然关闭，只有半的合作形式。 至关重要的是，它们都是“死胡同”格式，即PowerPoint文件，只是PowerPoint文件，不能轻易地重复使用或将其解释为其他任何内容。 我的意思是稍后会更清楚。

I knew there were options available to create a more 'open' presentation, generally browser-based format that leverages JavaScript and CSS to recreate the look, feel and effects of those traditional presentation tools.

我知道可以使用一些选项来创建更“开放”的演示文稿，通​​常是基于浏览器的格式，该格式利用JavaScript和CSS来重新创建那些传统演示文稿工具的外观，感觉和效果。

In addition to simply recreating my existing presentations (from PowerPoint and Keynote) in one a more open format, I had some other requirements to make me satisfied.

除了以一种更加开放的格式简单地重新创建现有的演示文稿(通过PowerPoint和Keynote)之外，我还有其他一些要求可以令我满意。

我的动机是什么？ (What were my motivations?)

写一次，重新使用多次 (Write once, re-purpose multiple times)

I want to be able to write the same content for a blog post, a presentation and some other purposes and be able to render them in my different use cases.

我希望能够为博客文章，演示文稿和其他目的编写相同的内容，并能够在我的不同用例中呈现它们。

共享性 (Shareability)

Frequently when I present at a conference the organizers ask for a slide deck afterwards. For some a link may be enough, but for others they want a standalone file, such as a PDF. This allows presentations to be uploaded to services like Slideshare where I get a lot of exposure for my presentations.

通常，当我出席会议时，组织者之后会要求提供幻灯片。 对于某些链接来说，可能就足够了，但对于另一些链接，他们想要一个独立的文件，例如PDF。 这样可以将演示文稿上载到Slideshare等服务，在这些服务中，我的演示文稿会引起很多关注。

吸引力 (Attractiveness)

I like to create presentations with full screen images, clear, readable text and other engaging tropes to make people notice. A framework that only supports small format images and text is of no interest to my.

我喜欢创建具有全屏图像，清晰易读的文本以及其他引人入胜的主题的演示文稿，以引起人们的注意。 我只关心一个仅支持小格式图像和文本的框架。

我的选择框架 (My Framework of Choice)

I actually found fewer frameworks than I was expecting and settled on Reveal.JS as it met my prerequisites, as well as offering some other features that I hadn't even considered, such as presenter view and notes.

实际上，我发现的框架比我期望的要少，并在Reveal.JS上满足了我的先决条件，并提供了一些我什至没有考虑的功能，例如演示者的观点和注释。

It's worth noting at this point that most of these frameworks are aimed at those with technical knowledge. Some do offer commercial drag-and-drop creation tools, but to leverage their true potential you will need a solid working knowledge of CSS, HTML and (maybe) JavaScript.

值得注意的是，这些框架中的大多数都是针对具有技术知识的框架。 有些确实提供了商业拖放创建工具，但是要利用其真正的潜力，您将需要扎实CSS，HTML和(也许)JavaScript知识。

创建您的演示文稿 (Creating Your Presentation)

At a basic level, this is a simple process, and we have a good introduction already on SitePoint.

从根本上讲 ，这是一个简单的过程，并且我们已经在SitePoint上进行了很好的介绍 。

In the default reveal HTML file you will find a <div class="slides"> which can contain multiple section tags, these are your slides. With reveal you can create 'nested' slides, or vertical slides that allow for the creation of logical sections in your presentation. These are created by nesting further section tags inside a section tag.

在默认的显示HTML文件中，您会找到一个<div class="slides"> ，其中可以包含多个section标签，这些是您的幻灯片。 通过显示，您可以创建“嵌套”幻灯片或垂直幻灯片，以允许在演示文稿中创建逻辑部分。 这些被嵌套进一步创造section一内标签section标签。

After that, slides are just HTML, with some custom tags and parameters unique to Reveal. If you can code HTML, you can create a presentation and if you can't, Reveal offers a commercial product just for you, the slides.com service.

之后，幻灯片只是HTML，带有一些Reveal特有的自定义标签和参数。 如果可以编写HTML代码，则可以创建演示文稿；如果不能，则Reveal可以为您提供商业产品slides.com服务。

So, for the rest of this article I'm going to assume that you can manage coding some basic slides and show you tips and tricks that I have learned in the process of migrating presentations to Reveal.

因此，在本文的其余部分中，我将假定您可以管理一些基本幻灯片的编码，并向您展示在将演示文稿迁移到Reveal的过程中学到的技巧。

全屏图像 (Full Screen images)

Add the following class to your section / slide div:

将以下类添加到您的section / slide div ：

<section data-background="imagefile">

You can then layer other content over this image as normal. There are many options for how the image should display and bear in mind some of the loading options you might need to prevent a progressive image load when switching screens.

然后，您可以照常在此图像上分层其他内容。 关于图像的显示方式，有很多选项，请牢记一些切换屏幕时可能需要的一些加载选项，以防止逐渐加载图像。

左右面板 (Left and Right panels)

Often in Powerpoint and Keynote, templates have left and right panels with two different sets of content, an image and text for example. Whilst some would say that using this sort of layout goes against the more fluid design principles of reveal, I think there is still a need for it occasionally. It's easy to replicate with some basic CSS:

在Powerpoint和Keynote中，模板通常具有左右两个面板，分别包含两组不同的内容，例如图像和文本。 尽管有些人会说使用这种布局违背了揭示更多更流畅的设计原则，但我认为偶尔还是需要这种布局。 使用一些基本CSS可以很容易地进行复制：

.left-align {
  float:left;
  width:50%;
}

.right-align {
  float:right;
  width:50%;
}

.panel {
  text-align:left;
}

.panel img {
  width:100%;
}

We create a general panel class that aligns text left instead of reveal's typical centered alignment. We create two classes to set the float and width and make any images that are in a panel fill 100% width. All the above is to personal taste and suited my needs, but you get the idea.

我们创建了一个通用的panel类，该类将文本左对齐而不是显示通常的居中对齐。 我们创建两个类来设置浮点数和宽度，并使面板中的所有图像填充100％的宽度。 以上所有内容都是为了个人喜好和适合我的需求，但是您明白了。

拉伸图像 (Stretching Images)

Whether filling the whole slide or one of the panels we created above, we sometimes want an image to fill the space it occupies proportionally. This is achieved by adding the stretch class to any media, images and media included.

无论是填充整个幻灯片还是上面创建的面板之一，有时我们都希望图像按比例填充它所占据的空间。 这可以通过将stretch类添加到所包含的任何媒体，图像和媒体中来实现。

码 (Code)

Code highlighting is one of reveal's standout features, but I still find it limited and have tweaked it. This is due to it's use of the pre tag which will render exactly as it sees, which means if you're a code layout obsessive like me, then your code may not render how you want in a presentation.

代码突出显示是揭示功能的突出功能之一，但是我仍然发现它受到限制并进行了调整。 这是因为使用了pre标记，该标记将完全按照所看到的方式呈现，这意味着，如果您像我这样痴迷于代码布局，则您的代码可能无法呈现演示文稿中的所需样式。

I've found I can get more control by using this CSS snippet:

我发现可以通过使用以下CSS代码段来获得更多控制权：

.reveal code {
  white-space: pre-line;
  text-align: left;
}

And then make use of the   tab HTML entity to control tab indents how I want them, i.e.:

然后利用  选项卡HTML实体来控制选项卡缩进方式，例如：

docker run -d -p 4200:4200 -p 4300:4300
 --volume /data:/data
 --env CRATE_HEAP_SIZE=8g
 crate crate
  -Des.path.data="/data/data1,/data/data2"
  -Des.multicast.enabled=false
  -Des.network.publish_host=$PRIVATE_IP
  -Des.discovery.zen.ping.unicast.hosts=$HOSTS

I would suggest that you set the code class for that extra fine grained control of how it will display, i.e. for the above I would use <code data-trim class="bash">.

我建议您为该代码的显示方式设置代码类，以便对其进行细粒度的控制，即对于上面的<code data-trim class="bash"> ，我将使用<code data-trim class="bash"> 。

特效 (Effects)

Animations and effects are limited to slide transitions, animated backgrounds and 'fragments', slide elements that can show themselves incrementally. Some may find this a little creatively limiting, but we all know that presentation animations are more often overdone than the opposite.

动画和效果仅限于幻灯片过渡，动画背景和“片段”，可以逐渐显示自己的幻灯片元素。 有些人可能会发现这在创意上有一些限制，但是我们都知道演示动画比相反的动画更经常被过度使用。

使用降价 (Using Markdown)

I mentioned in my introduction that I wanted to be able to write a my text once and then reuse it for multiple purposes. With Reveal's Markdown loading and some planning this is (mostly) possible.

我在引言中提到过，我希望能够一次编写文本，然后将其重复用于多种目的。 通过Reveal的Markdown加载和一些计划，这(大部分)是可能的。

To use a Markdown file as the source of your slides you use the following code instead of creating a sequence of section divs:

要将Markdown文件用作幻灯片的来源，请使用以下代码，而不是创建一系列div片段：

<section data-markdown="index.md"
            data-separator="\n\n\n"
            data-separator-vertical="\n### "
            data-separator-notes="^Note:"
            data-charset="iso-8859-15">
        </section>

The important parameters above are the separator values. These let you define how the structure of a Markdown file influences the slide construction and this is where the planning comes into play.

上面的重要参数是分隔符值。 这些使您可以定义Markdown文件的结构如何影响幻灯片的构造，这就是计划的作用。

In the above example, I have defined three new lines to determine the beginning of a new slide and a level 3 heading to be a vertical slide. This allows me to have a reasonably well structured markdown file for multiple purposes.

在上面的示例中，我定义了三行新内容来确定新幻灯片的开始并将第3级标题确定为垂直幻灯片。 这使我可以为多个目的使用结构合理的降价文件。

呈现 (Presenting)

演讲者备注 (Speaker Notes)

I like to create image heavy presentations, leaving as much text as possible for me to say, instead of for people to read. This means I need notes and value the presenter view found in all presentation software.

我喜欢创建图像密集的演示文稿，让我尽可能多地讲文本，而不是让人们阅读。 这意味着我需要注释并重视在所有演示软件中找到的演示者视图。

Reveal provides much the same by opening up a separate browser window when you hit the 's' key. This window contains speaker notes for the current slide, the next slide, a timer and an extra set of controls.

当您按下' s '键时，Reveal通过打开一个单独的浏览器窗口提供了几乎相同的功能。 该窗口包含当前幻灯片，下一张幻灯片，计时器和一组额外控件的发言人注释。

In some respects, for presentations that involve demos, reveal is better than 'normal' applications as you don't have to keep switching from full screen applications or finding lost terminal or code windows on extended desktops. Everything can be positioned for where and when you need it.

在某些方面，对于涉及演示的演示，显示比“常规”应用程序更好，因为您不必一直从全屏应用程序切换或在扩展桌面上查找丢失的终端或代码窗口。 一切都可以放置在您需要的位置和时间。

概述和全屏模式 (Overview and Fullscreen Mode)

A quick press of the 'Esc' or 'o' key will zoom out into an overview of all the slides in your presentation, great for finding a particular slide, or maybe simulating prezi should you want to. Pressing 'F' will bring your presentation into fullscreen mode, meaning you don't need to rely on the browser for this, as that can be inconsistent.

快速按一下“ Esc ”或“ o ”键将放大演示文稿中所有幻灯片的概览，非常适合查找特定幻灯片，或者可以根据需要模拟Prezi。 按下“ F ”将使您的演示文稿进入全屏模式，这意味着您无需依赖浏览器，因为这可能会不一致。

进一步介绍 (Taking your Presentation further)

API (API)

Does any other presentation software come with an API?

API是否提供其他任何演示软件？

This API you to undertake all sorts of cool opportunities whilst running your presentation. One simple example might be live-tweeting a link to the current slide. Another might be committing code you're displaying on screen into a repository and then pushing it when the presentation is complete. Literally creating a demo for people on the spot.

使用此API，您可以在运行演示文稿时承担各种有趣的机会。 一个简单的示例可能是实时发布到当前幻灯片的链接。 另一个可能是将您在屏幕上显示的代码提交到存储库中，然后在演示文稿完成时将其推送。 从字面上为现场人员创建演示。

The possibilities are almost endless and if you want to get even more Meta, reveal itself can be controlled by the API.

可能性几乎是无穷无尽的，如果您想获得更多的Meta，则显示本身可以由API控制。

外挂程式 (Plugins)

Should you need some extra functionality, reveal has a limited amount of plugins available, but as they're just JavaScript, you could always create your own.

如果您需要一些其他功能，那么揭示可用的插件数量有限，但是由于它们只是JavaScript，因此您始终可以创建自己的插件 。

出口 (Export)

To fit into my "Write once, repurpose multiple times" strategy, export is an important factor. Reveal's inbuilt PDF export is a little disappointing, relying solely on a special style sheet and the browser print dialog, worse than that, it's Chrome / Chromium only.

为了适应我的“一次写入，多次更改用途”策略，导出是一个重要因素。 Reveal的内置PDF导出有点令人失望，仅依靠特殊的样式表和浏览器打印对话框，更糟糕的是，它仅使用Chrome / Chromium。

There are other options available such as using WKHTMLtoPDF or Markdown to PDF via Pandoc and Latex, but they are best saved for another article.

还有其他可用选项，例如通过Pandoc和Latex使用WKHTMLtoPDF或Markdown到PDF，但最好将它们保存在另一篇文章中。

Sticking to the default reveal option, it's simple to use. Add print-pdf into the query string of the presentation, i.e. ?print-pdf and the presentation will render using reveal's pdf style sheet (css/print/pdf.css) and you then rely on the print dialogue to export to a PDF. You will find that the default style sheet needs some customizing and I am unsure why this will only work in Chrome if it just uses the system print dialog.

坚持默认显示选项，使用简单。 将print-pdf添加到演示文稿的查询字符串中，即？print-pdf ，演示文稿将使用揭示的pdf样式表( css / print / pdf.css )进行呈现 ，然后您可以依靠打印对话框将其导出为PDF。 您会发现默认样式表需要进行一些自定义，而且我不确定为什么仅在使用系统打印对话框的情况下才能在Chrome中使用。

Another option is the DeckTape project that is a PDF exporter for HTML presentation frameworks. I haven't tried it yet, but it will need some more configuration.

另一个选择是DeckTape项目，它是HTML表示框架的PDF导出器。 我还没有尝试过，但是它需要更多的配置。

结论 (Conclusion)

Reveal and other frameworks like it wont be a complete replacement of PowerPoint/Keynote for everyone, but if you're willing to try something different to open yourself up to new possibilities then they're easy to get started with.

Reveal和其他类似的框架并不能完全代替所有人使用PowerPoint / Keynote，但是，如果您愿意尝试一些不同的方法来为自己打开新的可能性，那么它们就很容易上手。

I'm new to using such frameworks but am enthusiastic about exploring their full potential for integration and workflow optimization. I'd love to the tips, tricks and methods you've followed to accomplish the same.

我是使用这种框架的新手，但是热衷于探索它们在集成和工作流程优化方面的全部潜力。 我很乐意为达到相同目的而遵循的提示，技巧和方法。

翻译自: https://www.sitepoint.com/open-source-presentation/

开源项目演示