这些年,用来创建幻灯片的演示框架数目激增,这些框架充分发挥了HTML5、CSS3和JavaScript的优势,只需要一个普通的浏览器就可以创建属于你的幻灯片。
不论是在商业圈还是在学术界,演示都是生活中不可或缺的一部分。一般来说,做一个演示就意味着做几张幻灯片,微软的PPT,Apple的 Keynote,LibreOffice的Impress都是常见的选择。撇开前两个应用的闭源性质不谈,这些应用的问题在于如果你要查看你准备的内容, 你就必须在演示的电脑上安装对应的软件。如果想在线展示的话,你也可以尝试用谷歌的Drive或者类似的其他服务碰碰运气,不过能否成功就看人品了。
这些年,用来创建幻灯片的演示框架数目激增,这些框架充分发挥了HTML5、CSS3和JavaScript的优势,只需要一个普通的浏览器就可以 创建属于你的幻灯片。再也不需要担心文件的兼容性,不需要担心某一天文档会被某个特殊的网络服务加锁。因为这些幻灯片框架都是开源的,所以我们可以随心所 欲地对这些框架进行一些自定义修改。不过说句实在话,和用PowerPoint、Keynote、Impress相比,写HTML5、CSS3和 JavaScript的代码要略微复杂一点。
接下来介绍一下三款开源工具,可以让你的演示脱颖而出。
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里没有什么默认主题,需要 自己设计展示效果、演示流程、幻灯片之间的切换方式以及每张幻灯片的相对布局。从零开始制作一个演示文档需要做很多工作,但是事实上有很多 样例可以提供灵感和指导,网上也有很多 教程,深入讲解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通用协议。
Strut
如果你想要一个工具,让你的工作像传统的幻灯片制作一样简单,那么 Strut是一个不错的选择。Strut是一个基于网络的应用,提供了幻灯片的分类和编辑工具。图形化的界面让你轻轻松松的添加文字、图片、视屏和网页。你也可以一次性改变所有幻灯片的前景色和背景色,也可以一张一张的修改。
Strut支持 Markdown的语法,而且对于有一定基础的用户,可以自定义CSS样式。当你设计好了你的幻灯片,你可以设置旋转角度和缩放比例等参数,切换不同的预览方式和页面布局。除了impress.js,Strut也可以创建基于 bespoke.js框架的演示文档。
Strut很不错,但是依旧有一些缺点。有时候会遇到一些bug,并且这个项目的待办事项有点多,虽然都不是什么大问题。
该项目遵循“早发布,常发布”的准则,愿意把这个项目做得更好的人可以去 Github做贡献。你可以在官网的 在线编辑器试一试,或者直接去 Github下载它的源码包在本地运行。如果想在本地运行Strut,需要有 NodeJS的npm工具和 Grunt来安装依赖项目。
Strut的创始人是Matthew Crinklaw-Vogt,并且遵循 Affero通用协议。
我们一直都在努力坚持原创.......请不要一声不吭,就悄悄拿走。
我原创,你原创,我们的内容世界才会更加精彩!
【所有原创内容版权均属TechTarget,欢迎大家转发分享。但未经授权,严禁任何媒体(平面媒体、网络媒体、自媒体等)以及微信公众号复制、转载、摘编或以其他方式进行使用。】
微信公众号
TechTarget
官方微博
TechTarget中国
相关推荐
-
2019年值得考虑的5款开源云监控工具
在过去十年,开源软件生态系统日趋完善,云监控工具也不例外。在2019年,企业将面对广泛的开源工具选项,用以监控 […]
-
AWS MEAN堆栈+JavaScript=快速搭建应用
开发人员在构建Web应用时有许多选择。市面上有无数的框架和语言可选,而像AWS这样的云平台可以方便地部署和扩展应用程序。
-
对话陈本峰:HTML5究竟给企业带来了什么?
智能手机的普及,移动计算的应用,带火了HTML5技术。尤其,当我们看到微软朋友圈被“故宫与腾讯合作”的广告刷屏,我们不得不承认,HTML5技术确实很重要,但是HTML5究竟带来了什么,与以往移动技术有什么不同?
-
HTML5促进企业移动化服务走向极致
在企业困扰于传统移动化方式过于复杂时, HTML5凭借其天然的跨平台特性,乘势而起并逐渐得到企业的关注。可是,由于HMTL5标准建立时间不长,展示性能及稳定性更是需要和浏览器有一个良好的兼容,除此之外企业更是缺乏实际应用经验,所以基于HTML5技术的企业级服务市场还处于一片初创状态。