无论你喜欢与否,演示文稿都是学术界和商界生活的重要组成部分。传统上,创建演示文稿意味着使用微软的 PowerPoint,但苹果的 Keynote 和 LibreOffice/OpenOffice.org 的 Impress 也是可靠的替代方案。所有这些应用程序的问题(除了前两者的闭源性质之外)在于,你需要安装这些应用程序才能查看你创建的演示文稿。你可以尝试在 Google Drive 或类似工具中打开文件,但成功率各不相同。
近年来,为创建演示文稿而设计的 Web 框架激增。这些框架利用 HTML5、CSS3 和 JavaScript 来创建几乎可以在任何现代 Web 浏览器中显示的演示文稿。而且,额外的好处是,演示文稿设计者仍然完全控制他们的演示文稿。他们无需担心文件兼容性或被锁定在特定的基于 Web 的服务中。由于这些演示文稿框架是开源的,因此可以以任何你希望的方式进行扩展和增强——但公平地说,编写 HTML、CSS 和 JavaScript 比仅仅使用 PowerPoint、Keynote 或 Impress 要复杂一些。
最有趣的演示文稿框架之一是 impress.js,它的目标是将演示文稿提升到标准幻灯片之外。下面,我将向你介绍 impress.js 以及两个使创建 impress.js 演示文稿变得容易的工具。
Impress.js
Impress.js 是由 Bartek Szopka 开发的 JavaScript 演示文稿框架。受 Prezi 的启发,它利用 CCS3 转换来提供远远超出传统幻灯片的演示体验。使用 impress.js 进行演示可以让演讲者通过在三个维度上滑动、旋转和缩放的演示文稿来震撼他们的观众。
基于标准 Web 技术(HTML、CSS 和 JavaScript)意味着 impress.js 不会将用户锁定在使用特定的应用程序或基于 Web 的服务来创建演示文稿。由于它是在 MIT 和 GPLv2+ 许可下发布的,如果 impress.js 不能按照你想要的方式工作,你可以自由地自己更改它。但是,与其他一些开源 JavaScript 演示文稿框架不同,impress.js 需要非常现代的 Web 浏览器才能查看演示文稿。它旨在充分利用最新的 Web 技术。对旧版浏览器的支持不是开发的重点。但是最新版本的 Chrome、Firefox、Safari 和 Internet Explorer 应该可以很好地与 impress.js 一起工作。
即使对于具有良好 HTML 和 CSS 技能的人来说,创建 impress.js 演示文稿也不是一件容易的任务。基本的标记很容易理解,但是 impress.js 演示文稿可能非常复杂,需要大量的思考和计划。没有默认主题,因此你必须自己设计演示文稿的外观和感觉。演示文稿的流程完全由你决定,因此你必须计划每个幻灯片如何过渡到下一个幻灯片以及幻灯片在画布中的相对位置布局。从头开始创建 impress.js 演示文稿可能需要大量工作,但结果可能会令人印象深刻。一些 演示和示例 可用于提供灵感和指导,并且有 教程 供那些想要深入挖掘并了解更多信息的人使用。
如果从头开始创建 impress.js 演示文稿对你来说太复杂,那么有一些工具可以使创建 impress.js 演示文稿更容易。下面列出的两个工具各有优缺点。不妨都试一试,看看哪个适合你。
Hovercraft
Hovercraft 通过允许你使用 reStructuredText 标记创建演示文稿,从而简化了 impress.js 演示文稿的创建。你无需在制作演示文稿时编写 HTML 标记,而可以将精力集中在编写文本上。你可以移动事物并更改事物,而无需处理复杂的标记。例如,以下文本创建一个比前一个幻灯片大五倍并旋转 90 度的幻灯片。
---- :data-scale: 5 :data-rotate: 90 Heading ======= * Bullet Point 1 * Bullet Point 2 ----
使用 Hovercraft 创建 impress.js 演示文稿大大简化了流程并增强了 impress.js。Hovercraft 支持四种不同的方法来定位演示文稿中的幻灯片。如果你在标记中未指定任何定位,则最终会得到一个传统的从左到右的幻灯片放映。如果你想要更花哨的东西,可以使用相对定位,幻灯片的位置基于你相对于前一个幻灯片指定的偏移量。此方法允许你轻松地在演示文稿的中间插入新幻灯片,并使所有后续幻灯片重新调整其位置。如果你想要完全控制,可以使用绝对定位,这允许你指定幻灯片的精确坐标。最后,你可以为演示文稿指定一个 SVG 路径以供遵循。根据 Hovercraft 的文档,SVG 布局“有点难以使用”,但是对布局进行如此精确的控制可以产生一些非常令人印象深刻的幻灯片放映。此外,Hovercraft 支持对你要包含在演示文稿中的任何源代码进行语法突出显示,并且它添加了一个带有计时器和注释的演示者屏幕。当你完成演示文稿的编写(或想要测试你到目前为止编写的内容)后,一个非常简单的命令会将 reStructuredText 文件转换为 HTML 演示文稿。
hovercraft [markupfile] [output directory]
尽管 Hovercraft 有其优点,但它仍然要求用户具有相当的 CSS 技能。默认的 Hovercraft 主题非常朴素,因此如果你想要比白色背景上的纯黑色文本更花哨的东西,仍然需要对演示文稿进行样式化。向演示文稿添加 CSS 并不复杂,但它不像在 PowerPoint 中选择新的演示文稿主题那样容易。
你可以 阅读 Hovercraft 的文档 以了解更多信息。
Hovercraft 由 Lennart Regebro 创建,并根据 Creative Commons CC0 1.0 Universal 许可获得许可。
Strut
如果你想要一个更像传统演示文稿软件的工具,Strut 是适合你的工具。Strut 是一个基于 Web 的应用程序,它提供传统的幻灯片排序器和编辑工具。图形工具允许你向幻灯片添加文本、图像、视频、网站和预先设计的形状。你还可以轻松地一次性或逐张幻灯片地更改幻灯片背景和表面(幻灯片前方的背景幕布)的颜色。Strut 还支持使用 Markdown 向幻灯片添加文本。对于高级用户,你可以将自定义 CSS 类应用于对象,并从 Strut 内部编写自定义 CSS 规则。设计完幻灯片后,你可以切换到“概览”模式并以图形方式布局幻灯片。你只需拖动幻灯片并输入深度、旋转和缩放的值即可。除了创建 impress.js 演示文稿外,Strut 还可以使用 bespoke.js 框架创建演示文稿。
Strut 非常好,但它仍然有一些粗糙的边缘。用户会遇到偶尔的错误,并且该项目的待办事项列表有点长(但这并不是主要问题)。该项目遵循了“尽早发布,经常发布”的原则,任何希望改进该项目的人都可以通过 在 GitHub 上贡献 来帮助改进该项目。
尝试使用 项目网站上的编辑器 试用 Strut,或 从 GitHub 下载源代码 并在本地(或服务器上)运行它。你需要 Node.js 的 npm 和 Grunt 来安装依赖项并构建 Strut。
Strut 的创建者 Matthew Crinklaw-Vogt 已根据 GNU Affero 通用公共许可证第 3 版 发布了该应用程序。
6 条评论