Revealjs - Cover Image

做了超讚視覺化作品想要在簡報中與大家分享,卻總是受限於簡報軟體而無法自由發揮嗎?瀏覽器原生簡報工具 Reveal.js 讓你直接把整個作品搬到投影片中,從此不管是 D3.js 視覺化還是 WebGL 與 VR 體驗,一份簡報就搞定!

問題是這樣的:套裝簡報軟體給我們很方便的編輯介面 — 我們可以拖拉方塊、設定動畫、甚至自定樣版,然而我們從此就活在這些軟體的世界中,當我們需要展示我們的網頁成果或動態作品、當我們想表達的內容牽涉到互動概念、整個表現體驗瞬間就降至零分 — 我們這時不但得不斷的切換簡報與作品,甚至連軟體載入與網頁開啟的時間都讓讀者感到不耐 — 畢竟,很少有簡報軟體會幫我們預載所有將用到的網頁或程式的。

因此,若能使用開放的格式如 HTML + JavaScript 來製作投影片,我們可以任意在裡面實作我們想像的效果,隨意嵌入我們需要的內容,同時在開啟時都一併載入完成,那不是很棒嗎?

於是,Web 2.0 興起之時,相當多的網頁原生簡報套件誕生了 — Eric + Meyer 的 S5 、 來自台大的 TKSLIDE … 可惜的是,缺乏視覺編輯介面這點永遠在這些套件與使用者之間束起了一道高牆。

Reveal.js 由  Hakim El Hattab 主導開發,是一個完全基於 HTML 的開源簡報框架,他實作了許多簡報的核心要件、並使用 HTML / CSS 建立樣式與樣板,更重要的是為了讓 reveal.js 更易於使用, Hakim 同時創辦了一個線上圖形介面的簡報製作服務 — slides.com !

首先連至  https://slides.com 註冊帳號並登入,然後點擊下圖中的「Create a deck」建立新簡報:

Create a Slide

若你是剛開始使用 Slides.com, Slides.com 在編輯介面會提供一個簡單的教學,隨後便直接開始進行編輯。 Slides.com 的編輯介面設計得相當簡明,三層式的功能列分別提供簡報頁面物件的操作與設定。在下圖中,我們可以利用:

  • 箭頭 1 處的選單調整簡報樣式、編輯投影片順序與匯入 / 匯出檔案
  • 箭頭 2 處的選單調整 / 插入物件,包含各式的形狀、顏色或字型、透明度等等
  • 箭頭 3 處的選單控制單張投影片的設定,比如背景色、註解或簡單的動畫
  • 最後在畫面右方與下方 ( 例如箭頭 4 ) ,我們可以快速新增新的投影片。
slides.com Editor

投影片的基本編輯功能與大部份的簡報編輯軟體相似,我們可以群組選取、調整前後順序、縮放、刪除等等,使用起來相當直覺;除了支援常見的快速鍵 ( 如複製 / 貼上、按住 Shift 以等比例縮放 等 ) ,在調整物件位置時也有智慧型參考線,也提供了自動對齊的功能。

下圖為三分鐘內利用基本形狀簡單繪製的多拉 A 夢,全選起來便可在箭頭處看到對齊的功能出現:

Sample Doraemon

此外, Slides.com 還支援 iframe 置入、表格、程式碼與 LaText 格式的數學式編排,相當方便!而且插入這些元件的方式都相當簡單,我們只需點擊元件、設定列便會自動彈出,屬性的編輯也都相當直覺。

Slides.com 所提供的這些元件讓我們可以在同一個簡報中很輕易的談到視覺化的幾個基本要件:資料 ( 表格 )、分析 ( 公式 ) 與呈現 ( 圖表 ) ,例如在下例中,除了資料與公式外,我們並利用先前談過的 PlotDB 圖表工具 ( 可參考「為所有人打造的資料視覺化服務 — PlotDB」一文 ) 直接嵌入響應式圖表,可以即時在簡報中做出動態效果:

Embedded animation

光是寫到這裡我就已經準備掏錢升級了,感覺相當好用!

非線性的簡報體驗

我們看到 Slides.com 可以做很不錯的物件編輯了,但他其實還有一個相當強大的設計概念 — 非線性簡報。什麼意思呢?通常我們製作簡報前、進行資訊設計時,會將我們的資料編排並做出層次;同一個主題下分成很多個部份、再切分成不同的論點討論。這些主題可以模組化、有時也可以交換或省略;然而簡報軟體通常在簡報操做或設計的階端都只提供我們線性的編排方法,頂多就是提供一個「子投影片」的概念,在播放時還是線性的體驗。

然而 Slides.com 使用的「Reveal.js」套件從設計之初就將非線性的概念置入;當我們做簡報時,可以按「下」選擇進入一個章節、或是直接按右略過整個章節。在下圖中,箭頭 1 處的按鈕讓我們新增一般的投影片,箭頭 2 處的按鈕則讓我們新增子章節的投影片;在播放時,箭頭 3 處的控制鈕 ( 對應到鍵盤的方向鍵 ) 則提供我們從不同方向切換投影片的可能性。簡單的說,再也不需要狂按下一頁來跳過一整個章節了。

Add Slide

值得一提的是 Reveal.js 在轉場上也製作了相當具有質感的動畫效果,而且提供了眾多形式可以挑選;下圖為轉場的設定與其效果範例:

transition effect

Reveal.js 加持的開發者模式

光是到上個階段我們還是只能說這是一個不賴的簡報軟體,而真正讓它搖身一變成為視覺化專用簡報器的則是所謂的「開發者模式」!

開發者模式提供我們使用 HTML 編輯投影片的可能,也因此我們可以有相當多樣性的創意投入其中;不過,很遺憾的是 Slides.com 不支援包含 <script> 在內的一些 HTML 標籤 ( 因為一些安全性的理由 ) ,讓整個效果大打折扣;幸好,他仍然提供 HTML 匯出的功能,因此我們可以另外製作一份 JavaScript 檔來撰寫互動功能,並在簡報製作完成後將之下載,與  JavaScript 來串連使用,

如同先前我們所談到 Reveal.js 為基於 HTML 的簡報框架,基於 Reveal.js 的 Slides.com 自然也不能不提供「開發者模式」,讓我們使用 HTML 親手刻畫簡報的原始碼!

不過很遺憾的是,Slides.com 因為安全性的問題不能讓我們直接插入 <script> 標籤,但我們仍可以直接將做好的簡報下載為 HTML 格式,然後再進行編輯。首先,在簡報工具列點選「Export」,接著按下「Download HTML」:

download

在下載好的 HTML 檔末追加兩行 HTML 碼後存檔:

  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
  <script type="text/javascript" src="index.js"></script>

接著在同個目錄下,建立 index.js 檔並填入下列內容:

  svg = d3.select("section:nth-child(1)").append("svg").attr({
    viewBox: "0 0 800 600", width: 800, height: 600 /* 建立 SVG 元素 */
  });
  var nodes = d3.range(100).map(function(d,i) { return {}; }); /* 隨機產生資料 */
  svg.selectAll("circle").data(nodes).enter().append("circle"); /* 資料綁定至圓 */
  tick = function() {
    nodes.map(function(it) { /* 讓圓旋轉 */
      var dx = it.y - 300, dy = 400 - it.x;
      var len = Math.sqrt(dx * dx + dy * dy);
      it.x += (dx / len), it.y += (dy / len); /* 加上法向量 */
    });
    svg.selectAll("circle").attr({
      cx: function(it) { return it.x; },
      cy: function(it) { return it.y; },
      r: 10, fill: "#f00"
    });
  };
  var force = d3.layout.force() /* 彈力圖 */
    .size([400,300])
    .nodes(nodes)
    .on("tick", tick)
    .start()

結果便會即時在我們剛剛畫的笑臉上做出旋轉泡泡圖:

Rotate Bubbles in Slide

當然這樣會變成每次需要調整內容,我們就得回到 Slides.com 編輯、重新下載並重新插入 <script> 標籤,所以也許直接使用 iframe 引入本地的 HTML 檔或許會是更好的做法喔!

這個使用 Reveal.js 製作的投影片在簡報中實作了 D3.js 的互動圖表,你可以直接翻到第三頁後點點圖表看效果,像這樣的概念很適合用在簡報分享上,一方面演講時直接使用 D3.js 生成的圖表作圖、另一方面聽眾回去打開投影片即刻就有會動的程式範本,不需要另外再上傳程式碼,是不是很方便呢?

小結

其實 Reveal.js 與 Slides.com 還有很多有意思的功能,比方說 reveal.js 就提供了:

  • 投影片內連結
  • 局部縮放
  • Markdown 語法擴充
  • 列印模式
  • 逐步顯示
  • 背景動畫與轉場
  • 講者模式 ( 下張簡報預覽 + 計時 )
  • 事件驅動程式接口
  • 暫停模式
  • 視差捲動
  • 自訂操作熱鍵
  • 自動翻頁
  • 嵌入式程式介面
  • 搖控聽眾遠端開啟的簡報,同步閱讀

再說,光就開放格式這點,就已經讓我們有無盡的想像了。想讓台下所有聽眾一起出現在簡報上嗎?沒問題!想讓讀者即時提問直接彈出在螢幕中嗎?那有什麼難的!想在簡報中直播簡報中的自己的簡報畫面中的簡報直播嗎?好…好繞口,可是當然行!

不過, Slides.com 雖然設計精良,無法置入客製的 <script> 可說是一大弱點。當然我們仍然可以用 <iframe> 來取代內置程式,但若要讓投影片中的元件進行通訊,就會變得比較複雜。即便如此,他仍然為不會 HTML / JS 的使用者提供了一個相當棒的簡報製作體驗與環境。講到這邊,你是不是也想到了下次簡報的無限可能性呢?現在就開始嘗試製作 Reveal.js 風格簡報吧!


Written by infographics.tw

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *