impress.js 簡報軟體

之前有簡單提過自己學著用向量圖片編輯的開源軟體 inkscape 外掛sozi,來做出如prezi 一樣酷烗的簡報檔案。自己當年也曾經一度愛用prezi來做簡報檔,當然是比起微軟office suite 當中又呆又醜的PPT,可以扭來動去的prezi自然是給實質內容不怎麼樣的演講簡報大大地加分XD。不過prezi 還有一些小問題,例如對中文字型的支援不足,而且它貌似完成品為flash檔案格式,實不利於內容搜尋(如同一家公司ADOBE 開發的PDF格式文件,雖然成了網路上文件檔案的主流,但因其不利搜尋,也是遭提倡網路高度開放者之垢病)



這兩天看到有人推薦用javascript 網頁互動與前人開發之JS函數資料庫寫成的impress.js,它充分利用結合HTML與CSS,把網頁HTML變成了一份活潑的簡報。要使用impress.js 製作簡報,操作者或許不必了解太深的javascript 語言,還是得要對於HTML CSS有一點基本正確的知識能力。幸好有人已致力於開發一些所見即所得的編輯軟體工具,What You See Is What You Get,WYSIWYG),例如Strut,或許可讓impress.js之推廣應用能更為普及。

如果不是採上述視覺化的編輯器,利用impress.js 所作的簡報檔,當然是得回歸原始的HTML文字編輯下。在新建(或複制)一個html檔案下,除了建立好網頁與js檔案的連結外,文件中若要新增一個投影格,即是寫出以下html程式碼:


My first slide (PTT 一張一格的投影片樣式,其內容可自行更新,當然還是得注意html語法



My first slide (簡報則成了一張大畫布,每面要呈現的內容可在其上自行更新)



data-x = the x co-ordinate of the slide 投影片內容水平移動之設定
data-y = the y co-ordinate of the slide 投影片內容垂直移動之設定
data-z = the z co-ordinate of the slide 投影片內容前後移動之設定
data-scale = scales your slide by a factor of this value. 投影片內容大小之設定
data-rotate = rotates your slide by the specified number of degrees 投影片內容旋轉角度設定
data-rotate-x = For 3D slides. This is the number of degrees it should be rotated about the x-axis. (Tilt forward/lean back) 投影片內容立體水平移動之設定
data-rotate-y = For 3D slides. This is the number of degrees it should be rotated about the y-axis (swing in from the left/right) 投影片內容立體垂直移動之設定
data-rotate-z = For 3D slides. This is the number of degrees it should be rotated about the z-axis 投影片內容立體前後移動之設定

How To Use Impress.Js

我自己對於PTT(impress of Libre Office,), Prezi, Sozi, impress.js 這幾套簡報軟體使用下來,其實impress.js 的操作上,不比sozi這種已建構視覺化的編輯器優勢,但是如果作者有心想多加練習自己在hmtl, css ,js 語法功力,花點時間上手學會熟悉impress.js 指令,應對加強CSS, DOM, JS library之認識有所助益吧。

延伸閱讀: HTML 簡報,html5slides, deck.js, impress.js 使用心得

0 意見:

Security First: umbrella app 中文化滙整

之前提過會作一篇 Security First's umbrella app 滙整與中文化超連結整合,以讓未下載使用、觀看過原手機應用的讀者(其實指的就是錯亂的我自己本人)稍能有全盤的概念來想像這個手機應用程式(或更精準的說:一個手機上的隨身電子書)的內容。好了,本文...