用 HTML 做 presentation

现在 HTML slides 库实在太多了，Web-based slideshow 列举了一部分。传统的如 W3C 的 Slidy ，现代的如 deck.js ，还有炫酷的如 impress.js 。

　　HTML 幻灯片相对于 MS ppt / Google Docs 的好处：

1. 纯文本，兼容性好，还可以使用版本控制
2. 不需要安装额外软件：播放只需要浏览器，编辑只需要文本编辑器。没安装浏览器的电脑很少见，但没安装 Office 2010 的电脑你还是很有可能遇到的。

　　相对于直接用文本（比如直接 Vim）做幻灯片的好处：

1. 可以展示图片
2. 可以加入动画
3. 可以用鼠标在上面涂画

　　HTML 幻灯片应该支持的其他功能：

1. 能转换成 pdf

　　我尝试的第一个 HTML slides 库是 deck.js ，效果还是很不错的，自己添加一些 CSS 的话也可以比较容易地打印成 pdf 。

　　但我后来发现 deck.js 的最大问题是需要手写 html 。人总是追求更便利的，特别是出现了 Markdown 这种可以转换成 HTML 的格式之后。

　　于是我转到使用 pandoc 将 Markdown 生成 html slides 。pandoc 支持的 slides 格式见 pandoc 手册 。在这些格式中，我选择了 Slidy ，主要是因为它可以显示幻灯片大纲（下面的“contents?”按钮），其次是因为我是 W3C 的粉丝 > <。

pandoc 命令参数

• -t slidy // 指定输出格式
• –slide-level=2 // 一遇到一个 2 级标题就开始一个新的幻灯片
• -s // 输出完整的 html
• –css=simple.css // 加入自定义的样式表

样例

　　最后的效果是：Markdown 中一个 2 级标题会开始一张新的幻灯片，1 级标题将出来一个新的标题幻灯片。

美化和自定义

　　上面我加入了自定义的 CSS ，因为 Slidy 默认是什么都没有的白的。下面给出我自己的 simple.css ，参考了 deck.js 的 web-2.0 主题修改。

body {
    font-family: "DejaVu Sans", "Bitstream Vera Sans", Verdana, "微软雅黑", "WenQuanYi Zen Hei", sans-serif;
}

pre, code {
    font-family: "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", "AR PL New Sung Mono", monospace;
    white-space: pre-wrap;
    *white-space: pre;
    *word-wrap: break-word;
}

img {
    max-width: 100%;
}

table {
    border-collapse: collapse;
}

th, td {
    border: 1px solid black;
}

@media print {
    @page {
        size: 10in 7.5in;
        margin: 0;
        @bottom-right {
            content: counter(page) " / " counter(pages);
            margin-top: -2em;
            margin-right: 0.5em;
            font-size: 10pt;
        }
    }
}

html {
    height: 100%;
}

body {
    background-color: #f4fafe;
    background-image: -webkit-linear-gradient(top, #f4fafe, #ccf0f0);
    background-image: -moz-linear-gradient(top, #f4fafe, #ccf0f0);
    background-image: -o-linear-gradient(top, #f4fafe, #ccf0f0);
    -ms-filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#f4fafe', EndColorStr='#ccf0f0');
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#f4fafe', EndColorStr='#ccf0f0');
    *zoom: 1;
    background-image: -ms-linear-gradient(top, #f4fafe, #ccf0f0);
    background-image: linear-gradient(top, #f4fafe, #ccf0f0);

    background-attachment: fixed;
    height: 100%;
}

body.single_slide div.slide {
    position: static;
}

div.slide {
    padding: 1em 2em;
}

@media screen {
    div.slide {
        max-width: 1080px;
        margin: 0 auto;
    }
}

h1 {
    font-family: "DejaVu Sans", "Bitstream Vera Sans", Verdana, "微软雅黑", "WenQuanYi Zen Hei", sans-serif;
    color: #0B7495;
}

/* title slide */

div.slide.titleslide {
    text-align: center;
}

div.slide.titleslide h1 {
    padding-top: 20%;
}

/* code block */

pre.sourceCode {
    color: black;
}

---------------

如何给HTML presentation做annotate

annotate 的意思是做 presentation 的时候可以用鼠标在上面画线，ppt 中对应的功能叫“笔指针”，用文字描述太麻烦了，还是看这篇文章吧：用powerpoint的笔指针绘画和书写。个人认为这是一个很重要的功能，可以说是结合了 ppt 和传统的黑板/白板。

　　我想用 HTML 做 presentation 的时候也可以这样，这就需要在网页上用鼠标画图。

1. 先转 pdf 再用 PDF Presenter

　　有时候不能完全转 pdf

2. firefox 或 chrome 插件

　　找到一个 Screen Draw 。

3. bookmarklets

• http://markup.io/ - 有时候加载之后会影响页面样式，特别是 file:// 的时候。加载速度太慢。
• http://drawhere.com/ - 打开后页面就不能动了。
• http://goggles.sneakygcr.net/ - 功能不错，还可以擦除。但如果在公开的页面（不是 file://）上打开的话会显示其他所有人画出来的笔迹，也就是说会记录你画的东西。
• http://eatponies.com/ - 它强调可以协作，但我不需要。
• http://scribblet.org/ - 不错，但是还是这个问题：一旦进入画图模式页面就不能动了。

　　这类中最好的选择：Goggles 、scribblet

4. 自己用 Raphael 写一个 js 库

　　如果没有其他更好的选择的话。最好能实现笔迹与幻灯片的绑定，即：每张幻灯片都有自己的笔迹，切换幻灯片的时候笔迹也跟着换。

　　最终选择：Screen Draw 。