優點
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.說的真是太好了！
而筆者正好就是在這樣的情況下，嘗試了 html5slides, deck.js, impress.js 這三個不太一樣、卻都能做出 HTML 簡報的工具。
html5slides (官網) 是由 Google 做出來的一個小
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> 這個 tag，只是行為有點怪怪的...)
* 程式碼呈現
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
| 項目 | html5slides | deck.js | impress.js |
|---|---|---|---|
| 上手時間 | 10 分鐘看完 demo | 10 分鐘看完 demo | 30 分鐘看完 demo + 文件 |
| 排版 | 容易 | 可調但不容易 | 非調不可 |
| 變化程度 | 頁面內而已 | 範本有些選擇 | 完全可以自己變化 |
| 不同機器上 | 還算穩定 | 走位機會高 | 頁面設定過大會有問題 |
| CSS 需求 | 基礎 | 稍高 | 稍高 |
| 美感需求 | 沒有也沒關係 | 沒有也沒關係 | 要會把東西排好看 |
| 投影片數量 | 50 頁還可以 | 超過 30 頁就拆開吧 | 沒測過，但太多頁排版痛苦 |
| 跳頁面 | 手動改網址 | 快速鍵切換 | 點旁邊看得到的或改網址 |
| 動畫 | 飛入 | 飛入 | 旋轉、縮放 |
| 支援 iframe | 有 | 有，但會出包 | 無 |
| 插入程式碼 | 有顏色 | 無(可解決) | 無(可解決) |
| 觀眾驚喜度 | 還可以 | 不錯 | Wow~ *_* |
| 副作用 | 下一張會破梗 | 畫面爛掉 | 轉轉轉觀眾頭暈 |
| Ending | 「謝謝」那頁 | 「謝謝」那頁 | 所有畫面全貌 |
HTML 簡報正夯，你/妳心動了嗎？:p
沒有留言:
張貼留言