HTML 簡報正夯：html5slides, deck.js, impress.js 使用心得

即使有精練的文字、美麗的圖片、華麗的動畫效果，仍舊覺得自己的投影片沒有新意嗎？那麼來試試看使用 HTML CSS 製作你的投影片吧！

優點

1. 可以加入 JavaScript 做出可以互動的效果。
2. 可以內嵌 iframe 直接把網頁內容匯入。

缺點

1. 動畫效果受限，無法做太複雜、飛來飛去的動畫。
2. 版面大小會受限，或者根據螢幕解析度而有版面移位的風險。
3. 投影片數量無法太多（超過 50 頁） -> 高橋流風格可能不太適合 XD

聽起來好像缺點比較多？但如果你的投影片需要優點 1 或 2，例如 jQuery UI 或 bootstrap 的教學投影片，那就非常適合。在學習 HTML 簡報時偶然看到這句話：

The best way to teach the web is with the web.

– CoderDeck

說的真是太好了！
而筆者正好就是在這樣的情況下，嘗試了 html5slides, deck.js, impress.js 這三個不太一樣、卻都能做出 HTML 簡報的工具。

html5slides (官網) 是由 Google 做出來的一個小玩具工具，它很單純，就一個 html 檔案，直接另存新檔或者原始碼複製貼上就可以開始修改了。(如果想要完全離線使用，必須把它的 css 和 js 一起抓下來。)

deck.js (GitHub) 是一個功能頗完整的 HTML 簡報工具，包含了快速鍵可以：總覽所有投影片(m)，跳到某張投影片(g)，並且提供幾個投影片範本、換頁效果可以選擇。如果這樣還不能滿足你，它也有些別人做好的外掛(extension)可以加上去(例如這裡)。此外它也支援平板電腦的手指滑動換頁。

impress.js (GitHub) 是利用 CSS3 來做呈現，有別於傳統投影片一張張放映的方式，它像是在一張大圖片上遊走，瀏覽各個小區塊。如果看過 prezi，那麼 impress.js 就是 prezi 風格的 HTML 版本。它可以讓畫面旋轉，更提供了一些 3D 的效果，讓觀眾就像在看電影一樣邊聽你講故事。小心！別讓他們暈了！ :p

下面筆者將簡單介紹一下如何開始 happy coding 一份 HTML 投影片，但不會詳細描述該如何加上標題、插入圖片及 iframe…等等，其實這些就跟製作網頁一樣簡單！看完他們的 demo 之後就會瞭解了。我們把重點放在比較差異、遇到的一些問題以及使用心得。

必備技能：必須要了解基本 HTML 和 CSS 語法才有辦法使用這些工具。
外掛：開發者工具(Firebug 之類)，或者直接「檢視原始碼」。

共同部份

無論是哪一套工具，它們描述一頁頁畫面(投影片)的方式都很固定，都是用一個特定的 HTML tag 來標記一頁的內容。html5slides 用的是

<article>；deck.js 用的是<section class=”slide”>；impress.js 用的是
<div class=”step”>。於是整個 html 檔案內，就是不斷地複製貼上同一個 HTML tag 來增加新的頁面。因此頁數過多的時候， html 檔案會很長很難維護，當然也會讓初始化時繪製畫面的時間增長。

deck.js 跟 impress.js 都可以額外指定 id 屬性來替這張投影片命名，這個名字會成為這頁在網址列上的識別與定位(#id)。如果沒有特別指定的話，三者預設以投影片頁碼命名。

此外，HTML 簡報設計都仰賴 CSS 來調整版面，如果不是一個接一個擺下來，而需要並排或者其他特殊排版，撰寫 CSS 是絕對免不了的。

差異比較

* 固定版面大小 v.s. 動態調整版面大小

這三個工具最明顯的差異在於對版面大小的設定，html5slides 固定是以寬 900 高 700 像素作為一頁的呈現，因此它都不太會有「在我的螢幕看起來好的，在你的螢幕走位」的問題。也就是無論螢幕解析度如何，它就是固定那個大小呈現。(當然還是可以使用瀏覽器的縮放功能等比例放大縮小。)
deck.js 可就不同了，它會自動依照螢幕解析度幫你調整畫面、以及字型大小。看起來好像很聰明，可事實上，這會讓指定字型大小或者調整文字間距變得困難。建議最好直接使用投影時的解析度來編寫投影片，以免發生最後畫面亂成一團的慘劇。(筆者深受其害啊！QQ)
impress.js 完全就是「你自己控制吧」的設計邏輯，特別是一個畫面的寬度如果不指定的話，它就完全算不準該把哪裡當作中心，因此視窗移動到下一個畫面後，就會有偏移的現象。也不要故意把寬度設的比投影螢幕的解析度大，否則內容超出邊界也是理所當然的。XD
除了畫面寬度，位置也要自己指定，就像在製作大型海報一般，好好地為每一段文字在無限延伸的畫面上安排一個區塊。

* 初始化的複雜度

或許是 deck.js 需要製作投影片選單的緣故，當投影片的張數較多時，很明顯地它會呈現出在處理投影片畫面的混亂狀況，直到它處理完才會正常顯示。萬一在這段時間裡有任何 JavaScript 的執行問題(比如 iframe 無法嵌入)，就會讓畫面爛在那裡…。這實在是很大的困擾，但也不是毫無解決方式，比如使用瀏覽器的 plugin 讓畫面完全載入處理完之後再呈現出來，也許是可行的。另外兩者在畫面繪製上比較單純，比較沒有遇到問題。

* 動畫方面

html5slides 與 deck.js 目前都只支援『飛入』這樣的動畫，特別是像 bullet 文字要點的飛入，實在是蠻陽春的。而且播放的時候，它只能「按一下出現」，無法指定時間或者接續前動畫。但幸好它是 HTML 投影片，懂 JavaScript 的朋友也可以自己做出其他動畫效果。相較之下 impress.js 提供的動畫效果比較豐富一點，除了可以 360 度旋轉之外，還有文字的放大縮小。但它沒有文字的飛入這種動畫效果，並且所有動畫效果都是自動在該畫面呈現時就一起執行，沒辦法「按一下出現」。(它是利用 CSS class 改變來控制的緣故，直接去修改 CSS 規則或許可以做些調整。)

* 嵌入 iframe

html5slides 與 deck.js 都支援插入 iframe，但 iframe 可能會有 SOP (Same Origin Policy) 的問題，有時候會造成 deck.js 初始化失敗(畫面就會爛掉，如前面所述)，有時候卻會安全過關，實在是蠻奇怪的問題。
而 html5slides 比較沒有遇到狀況。
至於 impress.js 則是不支援的。(但其實因為是 HTML，還是可以使用 <iframe width=”320″ height=”240″></iframe>

* 程式碼呈現

deck.js 跟 impress.js 不支援 syntax highlight，而 html5slides 則是已經整合了 google-code-prettify。有插入程式碼需求，又希望它漂亮地呈現，有以下方法：
1. 使用 GitHub:gist 或者 jsFiddle 這類服務，用內嵌 iframe 的方式呈現程式碼。這類網站都有幫你處理 SOP 的問題，應該不會出錯。
2. 自己客製化： 推薦 CodeMirror 或者 google-code-prettify、或者 SyntaxHighlighter，都是可以簡單做到這個功能。
3. deck.js 可以找 extension (如上)，或者使用它的延伸版 CoderDeck (它直接改寫原本 deck.js 架構，而非作為 extension 添加上去。)

個人心得

上面介紹了這麼多，大家應該都有感受到優缺點了。以下是筆者簡要的心得：
– 喜歡 html5slides 絕對不會讓調整好的位置跑掉；(不管螢幕多大～它就這麼大 XD)
– 喜歡 deck.js 可以很方便的跳頁/選擇頁面；
– 喜歡 impress.js 有「全局」的感覺；
– 不喜歡 html5slides 就只能固定一個樣子，旁邊的頁面還會露出來破梗；
– 不喜歡 deck.js 複雜的繪製流程不小心就會讓畫面亂掉；
– 不喜歡 impress.js 很多細節都要自己指定，特別是畫面寬度；

結論

其實優點必然會造成一些缺點，考慮自己的情況，選擇一個適合的來用吧！
最後來個不負責任比較表 XD

HTML 簡報正夯，你/妳心動了嗎？:p

evelyn