讓簡報更為突出的三個開源工具

本文翻譯自 opensource.com,原作者為 Joshua Holm:https://opensource.com/life/14/7/3-open-source-tools-make-your-presentations-pop

不管你喜不喜歡,簡報的確在學術與商業生涯中占有相當大的比重。一般來說,簡報大多是以 Microsoft 的 PowerPoint 製作的,不過 Apple 的 Keynote 還有 LibreOffice/OpenOffice.org 的 Impress 也是強大的替代方案。這些應用軟體的問題 (撇開前兩者封閉源碼的特性不談) 就是,你必須安裝這些軟體後,才能瀏覽你製作好的簡報。你當然可以在 Google Drive 等選擇中打開檔案碰碰運氣,不過你不一定會成功。

最近這幾年,為了製作簡報而設計的網路框架開始流行,這些框架利用 HTML5、CSS3、JavaScript 製作的簡報,可在各種當今的網路瀏覽器中顯示。而且額外的好處是,簡報設計者握有對簡報的全權控制。他們不用擔心檔案相容性,或者被侷限在特定的網路服務中。因為這些簡報框架是開源的,能夠依你所需延伸並加強,不過呢,老實說寫 HTML、CSS 和 JavaScript 是比只用 PowerPoint、Keynote 或 Impress 要難上一點點。

impress.js 是最有趣的簡報框架之一,它讓簡報不僅僅是一大堆投影片而已。底下我會介紹 impress.js 還有兩個讓製作 impress.js 簡報更簡單的工具。

Impress.js

impress.js 是 Bartek Szopka 開發出來的 JavaScript 簡報框架。受到 Prezi 的啟發,impress.js 使用了CSS3 變形效果 (CSS3 transformations),達到傳統投影片無法呈現的簡報體驗。使用 impress.js 製作簡報可以讓講者用三度空間的滑動、旋轉、縮放,驚豔簡報聽眾。

以標準網路技術 (HTML、CSS、JavaScript) 為基礎,表示用戶不會因為 impress.js,而侷限在特定應用軟體或網路服務上製作簡報。由於採取 MIT 和 GPLv2+ 授權釋出,假如 impress.js 的功能不如你所想,你可以自行修改。然而,不像某些開源的 JavaScript 簡報框架,impress.js 需要非常先進的網路瀏覽器才能檢視簡報,它完全運用了最新的網路技術。對舊版瀏覽器的支援並非開發的優先事項。不過 Chrome、Firefox、Safari、Internet Explorer 最近的版本,應該都能和 impress.js 相處融洽。

甚至對 HTML、CSS 技巧不錯的人來說,製作一份 impress.js 簡報也非易事。基本的標記很好懂,不過 impress.js 簡報可以做得相當複雜,且需要許多思考和規劃。而且沒有預設主題,所以你必須為你的簡報,設計外觀和感覺。簡報的流程完全操之在你,所以你必須規劃好每一張投影片如何轉換到下一張,還有投影片在工作區中的相對位置佈局。從無到有製作 impress.js 簡報需要下足功夫,但是能夠獲得令人印象深刻的成果。精選的展示與範例 可以提供靈感與指導,對想要深入了解學習的人還有教學

假如從頭製作一份 impress.js 簡報,對你而言太過複雜的話,有許多工具可以幫助你。這裡列出的兩個工具各有優缺點。親自試試,然後看看哪個比較適合你。

Hovercraft

Hovercraft 簡化了 impress.js 簡報的製作,允許你使用 reStructedText 標記來製作簡報。製作簡報時,你可以專注在文字上,而不用撰寫 HTML 標記。不用複雜的標記,你就可以移動、更改元件。例如,底下的文字可以製作一張比前一張大 5 倍的投影片,並旋轉 90 度。

----

:data-scale: 5
:data-rotate: 90

Heading
=======
* Bullet Point 1
* Bullet Point 2

----

使用 Hovercraft 製作 impress.js 簡報大大簡化了流程並改進了 impress.js。Hovercraft 支援四種在簡報中放置投影片的不同方法。如果沒有特別指定的話,你產生的是一份傳統向左滑動的投影片放映。假如你想要更華麗一點,你可以用相對位置,而投影片就會根據你所制定相對於前面投影片的位移來出現。這個方式讓你在簡報中間輕鬆地添加新的投影片,然後讓後續投影片重新調整它們的位置。如果你想要完全控制它,你可以用絕對定位,允許你指定投影片的精確坐標。最後,你可以為投影片制定要遵循的 SVG 路徑。根據 Hovercraft 的文件,SVG 佈局雖然使用上有些繁瑣,但精確地控制佈局可以創造出令人印象深刻的投影片。此外,Hovercraft 支援針對簡報中各種原始程式碼的語法醒目標示,還有附帶計時器和注意事項的簡報者畫面。當你完成簡報製作時,有個非常簡單的指令,可以把 reStructuredText 檔案轉成 HTML 簡報:

hovercraft [markupfile] [output directory]

儘管 Hovercraft 的功能強大,使用者仍然需要懂得 CSS。預設的 Hovercraft 主題相當的陽春,如果你想要的不只是白色背景和純文字內容,你還是得自行妝點你的簡報。為簡報加上 CSS 並不複雜,但也不像在 PowerPoint 中點選新簡報主題那樣簡單。

你可以閱讀 Hovercraft 的文件 進行了解。

由 Lennart Regebro 所發展出來的 Hovercraft,採用創用 CC (Creative Commons) CC0 1.0 Universal 授權釋出。

Strut

如果你要的是更像傳統簡報軟體般的工具,Strut 正是如此。Strut 是以網路為基礎的應用軟體,提供傳統的投影片瀏覽與編輯工具。圖形化工具讓你可以在投影片裡加入文字、圖片、影片、網站、預先設計的圖形。你還可以輕易針對整個簡報或個別投影片,更改投影片背景顏色和表面 (surface,指的是投影片後的帷幕)。Strut 還支援使用 Markdown 為投影片加入文字。對於進階用戶,你可以為物件套用客制化 CSS 類別,並撰寫 Strut 內部的客制化 CSS 規則。當你設計好投影片後,你可以切換到概覽 (Overview) 模式並圖形化設計投影片佈局。你只需拖放投影片,並輸入深度、旋轉、縮放的數值。除了建立 impress.js 簡報,Strut 也可以使用 bespoke.js 框架來產生簡報。

Strut 非常棒,不過還是有些美中不足。用戶偶爾會遇到一些臭蟲,專案的待辦事項列表也有點冗長 (儘管這不是太大的問題)。這個專案採取儘早釋出、經常釋出的原則,希望協助該專案的人,可以貢獻到 GitHub 上。

要嘗試 Strut 可以使用該專案網站上的編輯器,或自行下載執行。你需要 Node.js 的 npm 和 Grunt 來安裝相依套件並建構 Strut。

Strut 的開發者 Matthew Crinklaw-Vogt,採用第三版 GNU Affero General Public 授權釋出該軟體。




自由軟體鑄造場電子報 : 第 245 期 Xserver 的介紹與應用

分類: 源碼專案