Express Reveal PPT 开发

课程简介

本课程的理论部分旨在通过全实例，讲解了如何通过 Reveal 开发幻灯片应用程序。实例由浅入深，从最小可运行实例讲起，到实现高级 PPT 功能实现。

最后一篇是重磅内容，将会采用 Node.js Web 框架 Express 开发服务器端，前端用 Reveal 展示 PPT 效果，构建一个可发布 PPT 的比较完整的 Web 程序。

具体实践案例：

简单 PPT 程序开发
支持多格式内容 PPT 程序开发
Express & Reveal PPT Web 程序开发

作者简介

曾亮，晟暄科技 CEO，HTML5 & Node.js 技术讲师，JavaScript 前后端全栈开发人员， DDD／CQRS 设计师，对 Node.js 和 HTML 5 有多年开发经验。独立研发 Node.js 版的 CQRS Framework，国内为数不多的顶级领域驱动设计专家。

课程内容

导读：Reveal 库是什么

完美时代

浏览器已经成为通用客户端，人们越来越懒于下载、安装、使用，而是喜欢打开即用。网速越来越快，硬件越来越快，随之而来的，让打开即用的使用方式成为可能，最终让用户成为习惯。

之前的网页程序，主要以内容显示为主（说到这儿，好像暴露了年龄…），现在很多复杂的程序，都已经用 HTML 5 实现了，甚至 iPhone / Android 的 APP 也是如此！

之所以能通过 HTML 5 写复杂程序，得益于现代浏览器的发展，以及浏览器对 HTML 5 的支持，还有就是 JavaScript 语言本身的进步，在这个过程中，2009 年初，一个新秀 Node.js 映入眼帘，它的出现带动了 JavaScript 全栈式开发（之所以提到它，是因为前端程序开发要用到它）！

网速的提升，硬件的发展，浏览器对 HTML 5 的全面支持和 Node.js 全栈开发，让我们有信心打造各种程序！幻灯片程序性也不例外。

幻灯片是什么，相信不必解释太多，要想开发一个比较完整的 HTML 5 版的幻灯片程序，手工从头写显然吃力不讨好，最好有现成的工具！

Reveal 库的介绍

这里介绍一款幻灯片开发框架 Reveal 。

Reveal 可让我们快速开发出幻灯片程序，同时也提供了功能强大的 API 和插件机制。

其中 https://slides.com/ 网站是通过 Reveal 实现的，该网站提供了在线创建 PPT 的编辑器平台！

这里举个例子，来看看效果：

（还不错吧，反正我是自我感觉良好……）

它提供了一套 HTML 格式的约定，来构建内容。

<div class="reveal">    <div class="slides">        <section> 俺是第一页 </section>        <section> 俺是第二页 </section>    </div></div>

它也支持 Markdown 格式的解析，写这篇文章时，就用 Markdown 的语法写的，来看看代码例子。

<div class="reveal">    <div class="slides">        <section> 俺是第一页 </section>        <section> 俺是第二页 </section>        <section data-markdown>            <textarea data-template>                ## 俺是第三页                > 我是 markdown            </textarea>        </section>    </div></div>

当然，细节方面，还有很多配置和变化式，就好比健身，通过俯卧撑想练出强悍的肌肉，就需要练各种变化式的动作。所以，后续我们会深入探讨一些细节，再加上我的一些经验，让 Reveal 更强大。

Reveal 的启动很简单，

Reveal.initialize();

下面是一个完整的 Reveal 例子代码：

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <link rel="stylesheet" href="bower_components/reveal.js/css/reveal.css">  </head>  <body>    <div class="reveal">        <div class="slides">            <section> 俺是第一页 </section>            <section> 俺是第二页 </section>            <section data-markdown>                <textarea data-template>                    ## 俺是第三页                    > 我是 markdown                </textarea>            </section>        </div>    </div>    <script type="text/javascript" src="bower_components/reveal.js/js/reveal.js"></script>        <script>            Reveal.initialize();        </script>  </body></html>

我们看一下效果，是不是很简约～不过毕竟是 hello world 程序，之后的内容会逐步让程序越来越像样！

第 01 课：第 1 个 PPT 程序开发与分析

第 02 课：解析 Markdown 内容

第 03 课：美化代码内容

第 04 课：配置详解

第 05 课：API 详解

第 06 课：Express & Reveal 开发 PPT 应用程序

阅读全文: http://gitbook.cn/gitchat/column/5a03add3d940c91241600c91