iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 1
1

緣起

我們原本有做一些SCORM的線上英語教材,製作方式是依據現有的版型與題型,用Excel製作課程的資料,然後套版產生html教材。

最近在規劃明年要做的教材內容,結果請老師提供一些發想,他就提供了一份文法教學的PowerPoint。由於SCORM規範,必須要用html來製作,這樣就有點麻煩XD...因為他的PowerPoint有點複雜,每一個投影片中,都有逐次出現的內容以及動態效果,文字跟圖形會移來移去。原本想透過使用SlideShare或GoogleDoc內嵌到html文件中,但是SlideShare跟GoogleDoc都無法正確呈現這些動態。SlideShare根本不會有動態,GoogleDoc有出現動態,但是並不正確XD

更麻煩的是,這個PowerPoint最精采的部份其實就是這些動態效果,透過他相當清晰的表達出所要講述的文法的意義。如果拿掉的話,整個PowerPoint舊乏善可陳了...

既然是明年才要使用的東西,乾脆自己來做做看吧!所以開始一步一步的摸索。

目標

  1. 從PowerPoint文件中取出可用資訊,轉成適合Javascript使用的格式,目前考慮轉成Object Literal或JSON
  2. 透過這些資訊,把簡報繪製到Canvas中,最好還可以根據目前的螢幕解析度來縮放,甚至用全螢幕的方式播放

技術資訊

  1. PowerPoint檔案格式剖析
    1. pptx格式使用的是Office OpenXML的公開標準,標準文件可以從ECMA網站取得,他的標準編號是ECMA-376,文件的下載點是:Standard ECMA-376 - Office Open XML File Formats
    2. 微軟有提供一套Office OpenXML的SDK,可以透過他讀取pptx文件,取得內容資訊。參考文件在MSDN:Welcome to the Open XML SDK 2.5 for Office
    3. 除了一些多媒體內容,pptx裡面是許多xml檔案的集合,所以也可以考慮直接剖析這些xml文件來取得內容資訊
  2. Canvas
    1. 使用Canvas 2D Context API來把內容繪製到Canvas中。目前主要會參考標準文件:HTML Canvas 2D Context
    2. 我通常還會參考MDN上的資訊:CanvasRenderingContext2D

初步看到的困難點

  1. Office OpenXML使用的xml語法,主要的文件是ECMA-376 5th Edition Part 1,內容非常龐大,有五千多頁XD,到底怎樣可以用最快的速度把需要的資訊找出來呢...
  2. 雖然都是繪圖,HTML 2D Context API跟Office OpenXML需要的繪圖功能,不知道有多大的差距...

總之...

雖然不知道做不做得出來,反正就是做下去了。之後大致上會同時進行兩個主軸的嘗試,一方面看看怎樣剖析pptx文件比較好做,一方面看看需要的繪圖功能怎樣用HTML Canvas 2D Context做出來。可能成功,也可能失敗就是了。


下一篇
02 - pptx的檔案結構
系列文
30天實作線上簡報播放機制31

1 則留言

0
海綿寶寶
iT邦大神 1 級 ‧ 2016-12-14 08:58:50


終於看到比較新鮮的主題了
趕快推三下
/images/emoticon/emoticon12.gif/images/emoticon/emoticon12.gif/images/emoticon/emoticon12.gif
每天看到那些傷春悲秋強說愁的標題
我都快昏倒了
/images/emoticon/emoticon06.gif

我要留言

立即登入留言