Jade Dungeon

Impress.js

Impress.js

Impress.js 是Bartek Szopka受到 Prezi的 启发开发的一个演示工具框架,利用CSS3提供 优于传统幻灯片的演示体验。 演示者可以用impress.js轻松实现各种旋转、滑动、放缩 特效,足以让观众惊叹。impress.js依赖于传统的Web技术 (HTML+CSS+JavaScript), 意味着不会将用户捆绑到某种特定的软件或者网络服务上。因为它是遵循 MIT和 GPLv2+ 协议的,所以你可以对impress.js的源码做任意修改。impress.js充分利用了最新的Web 技术,所以需要一个比较流行的网页浏览器,最近版 本的Chrome、Firefox、Safari、IE 基本就能满足要求。创建一个impress.js应用并不是很容易,即使对于有一定HTML和 CSS基础的人来说也是如此。

impress.js中,基本的标记很容易懂,但是想做出很复杂的演示,需要深入思考和仔细 规划。在impress.js里没有什么默认主题,需要 自己设计展示效果、演示流程、幻灯片 之间的切换方式以及每张幻灯片的相对布局。从零开始制作一个演示文档需要做很多工作, 但是ki_html/javascript.full.webapp.html事实上有很多样例可以提供灵感和指导网上也有很多 教程, 深入讲解impress.js的使用。

如果你觉得创建一个impress.js的展示对你来说很复杂,那可以使用一些更容易使用的 小工具。

Hovercraft

Hovercraft简化了创建impress.js文档的 过程,使用reStructedText创建 演示文档。和用HTML制作幻灯片不同,Hovercraft可以让你更加专注于写作。 你可以任意改动元素而不用担心标记语言的标签封闭问题。

举个例子,我想创建了一张幻灯片,比上一张幻灯片大了五倍并且旋转了90度。那么在 Hovercraft里,只需要两行代码就能完成这些工作:

:data-scale: 5
:data-rotate: 90

Heading
=======
* Bullet Point 1
* Bullet Point 2

使用Hovercraft极大的简化了impress.js的使用。Hovercraft支持四种放置幻灯片的方式 ,如果没有设置的话,会使用默认 的切换方式,也就是向左飞出切换到下一张。如果你 想让你的幻灯片更酷炫一点,你可以使用相对布局,幻灯片会基于你自定义的偏移量进行 切换。如果在中间插入 了一张幻灯片,接下来的其他幻灯片也会依次自动适应调整坐标。 如果你想要控制其中的细节,你可以使用绝对布局,提前定义好每个幻灯片的坐标并用 SVG制定好路线。

Hovercraft的文档评价SVG布局「用起来有点繁琐」,不过它可以让你更加精确的控制幻灯片 的每一个细节,让你的演示更加出彩。另外,如果 你想在你的演示中插入代码,那也没有 问题,Hovercraft支持代码语法高亮,并且它还提供一个专门给演讲者看的屏幕,可以 显示笔记,并且还有计时功 能。当你写好了一份文档,一条简单的命令就可以把rst文件 转换成HTML演示文稿:

hovercraft [markupfile] [output directory]

虽然Hovercraft有很多优点,但是它依然需要使用者有一定的CSS常识。默认的主题十分的 朴实,如果你想要你的演示出彩的话,还是要花一些功夫的。给幻灯片加上CSS并非难事, 但是和PPT中点击就能选主题相比,还是显得复杂了一些。

如果想深入学习, 你可以阅读 Hovercraft的文档。 Hovercraft的作者是Lennart Regebro,遵循 CC0 1.0通用协议。