2012年6月1日

DokuWiki + Deck.js 打造超快速簡報發佈工具

DokuWiki + Deck.js
昨天我們發佈了針對閱讀舒適度改良的 Readable Template,這個佈景主題讓 DokuWiki 撰寫的筆記,可以方便在各種尺寸螢幕的裝置,包括手機及平板能夠更容易閱讀。接下來要改善的則是簡報功能,讓寫好的筆記可以快速變成簡報,目的是使開發者不必再花太多時間整理簡報,就能滿足一般小型聚會分享技術的需求。

我目前比較喜歡的 HTML Presentation Framework 是 Deck.js,它的版面簡潔美觀,以更現代的 HTML5/CSS3 為基礎,有換頁效果,並支援平板電腦的手勢操作(手指滑動換頁)。

過去曾經分享過如何將 DokuWiki 加上 s5reloaded 外掛,讓它可以快速產生 S5 簡報。但隨著技術不斷演進,S5 已經顯得不太有魅力了。

目前在 DokuWiki 的 Plugins 清單,仍未看到 Deck.js 的外掛;秉持著開放原始碼自由軟體的精神,沒有人寫的 CODE,當然就是由我們的開發團隊自己動手生一個出來。

很快地,催生 DokuWiki Deck.js Plugin 專案有了一點成果,完整的原始碼分享在:

https://github.com/lyhcode/dokuwiki-deckjs

範例可以參考我們用 DokuWiki 撰寫的筆記,右上方的簡報圖示,點擊後就可以播放。

http://lyhdev.com/slide:deckjs

如果要直接進入簡報模式,則使用這個連結:

http://lyhdev.com/_export/deckjs/slide:deckjs

只要在 DokuWiki 的編輯區,加上「~~DECKJS~~」標示,就能讓筆記支援簡報播放。當然也可以支援 Deck.js 提供的其他佈景,例如使用「~~DECKJS neon fade~~」,就可以切換成「霓虹燈」樣式及「淡出」換頁效果。

Deck.js Neon Styles Theme
目前這個專案仍在 beta 的階段,可以支援 PC 瀏覽器如 FireFox、Google Chrome 及 Safari 等;目前已經支援 iPad(僅限橫式瀏覽),把網址加入主螢幕(Home Screen)當做圖示,就可以支援 iPad 的全螢幕播放。

iPad Fullscreen Slide Show

歡迎有興趣使用 DokuWiki 的朋友參與開發或將意見回饋給我們:

https://github.com/lyhcode/dokuwiki-deckjs

11 則留言:

  1. 這個好用,不過有沒有更直接的界面可做編輯?

    回覆刪除
  2. 可以直接用 DokuWiki 編輯~

    回覆刪除
  3. 我要從https://github.com/lyhcode/dokuwiki-deckjs
    這裡把檔案load回我的本機?

    回覆刪除
  4. 這是 DokuWiki 的外掛,所以要先在 Server 安裝 DokuWiki,再把檔案放到 plugins 目錄。

    如果要測試的話,請到以下網址使用「編修本頁」:
    http://lyhdev.com/test:deckjs

    回覆刪除
  5. 很好用,我安裝起來用了,非常棒。有一個小問題,就是只有第一個H1標題可以被讀到嗎?因為我的第二個H1標題,在播放slid時不見了喔

    回覆刪除
  6. 此版本的H1只能有一個,作為簡報標題;第二個之後的H1會被略過。

    回覆刪除
  7. 謝謝回答啊,沒有考慮導入覆數的H1嗎??可以啊,我覺的不錯用耶

    回覆刪除
  8. 在我的Windows本機端電腦無法work
    我點選播放後 畫面是如此 就是純文字的奇怪模式(有google過是網址rewrite問題?但是我取消url rewirte 依舊無法work)
    https://dl.dropbox.com/u/23461380/Screenshot_2012-10-24_11-14.png
    這邊是我安裝的plugin
    acl
    config
    deckjs
    info
    mediasyntax
    note
    plugin
    popularity
    readable
    revert
    s5reloaded
    safefnrecode
    usermanager

    回覆刪除
  9. 請問Deck js 目前有辦法整合 程式碼 上色 highlight 功能嗎?
    我想這個功能應該是非常common的 如果有機會能整合的話 幫助會很大喔 ^^

    回覆刪除
  10. 要檢查一下 deck.js 的 .css / .js URL 路徑,看起來是沒正確載入 deck.js library。(如果你的 wiki 不是在網址根目錄 "/" ,就要找一下程式碼的路徑)

    回覆刪除
  11. 這只要加上 highlight.js 就可以囉,highlight.js 有自動偵測程式語言類型,剛好可以省略指定語言種類的標記。

    回覆刪除

lyhcode by lyhcode
歡迎轉載,請務必註明出處!