iT邦幫忙

鐵人檔案

2017 iT 邦幫忙鐵人賽
回列表
Modern Web

30天實作線上簡報播放機制 系列

因為同事希望把做好的PowerPoint轉成線上教材,但是簡報動態很多,放到SlideShare、GoogleDoc都沒辦法正常播放,所以乾脆自己做XD

來源的檔案格式是pptx,符合Office Open XML規範,播放則使用HTML5 Canvas,但是不知道做不做得出來哪...

參賽天數 25 天 | 共 31 篇文章 | 18 人訂閱 訂閱系列文 RSS系列文
DAY 1

01 - 專案目標與相關技術資訊

緣起 我們原本有做一些SCORM的線上英語教材,製作方式是依據現有的版型與題型,用Excel製作課程的資料,然後套版產生html教材。 最近在規劃明年要做的教材...

2016-12-14 ‧ 由 fillano 分享
DAY 2

02 - pptx的檔案結構

使用PowerPoint建立簡報的過程 為了要了解pptx裡面會有哪些東西,首先還是要來操作一下PowerPoint。使用PowerPoint製作簡報的過程,不...

2016-12-15 ‧ 由 fillano 分享
DAY 3

03 - Canvas 2D Context繪圖的基礎:圖片、圖形與文字繪製

今天休息一下,簡單溫習一下Canvas 2D Context的基本繪圖功能。 取得Context 透過Canvas元素的getContext()方法,就可以取得...

2016-12-16 ‧ 由 fillano 分享
DAY 4

04 - 透過OpenXML SDK存取pptx

關於資料剖析的初步想法 因為最終要產出的教材,是靜態的html檔案,所以資料最好能轉成成方便Javascript處理的格式,也就是JSON或是.js檔。 既然微...

2016-12-17 ‧ 由 fillano 分享
DAY 5

05 - 單位的換算

Office OpenXML裡面使用的「單位」,目前看到的有幾個:長度、指定百分比、指定字型大小等,就用03的例子來實驗改進一下 長度 ECMA-376使用一種...

2016-12-18 ‧ 由 fillano 分享
DAY 6

06 - 使用node.js取得pptx資訊 - 初步剖析

用OpenXML SDK嘗試存取pptx檔取出一些資訊後,想再用node.js嘗試看看可以怎麼做。 使用xml2js模組把xml轉成Javascript物件 上...

2016-12-19 ‧ 由 fillano 分享
DAY 7

07 - 動畫的基礎

在Canvas做動畫不難,其實只是重複兩個動作: 清掉舊畫面 繪製出目前的畫面 很久以前,在HTML中做動畫,大概都是透過setTimeout()或setI...

2016-12-20 ‧ 由 fillano 分享
DAY 8

08 - 使用node.js取得pptx資訊(1) - 建立檔案關連性列表

之前用node.js試寫的程式,感覺還蠻順的,在Javascript直接處理物件結構感覺也比透過OpenXML SDK來的方便,所以先繼續發展下去吧。 調整之前...

2016-12-21 ‧ 由 fillano 分享
DAY 9

09 - 動畫改進

之前做的動畫效果很簡單,只有右移跟下移的直線動作。另一個基本的動畫是依照弧線來移動,就試著把它實作出來。 jQuery的動畫效果,預設會有加減速,而在Power...

2016-12-22 ‧ 由 fillano 分享
DAY 10

10 - 開始剖析簡報資料

之前寫了簡單的parser,用來取得pptx中各個檔的關聯性。 現在就開始進一步發展這個parser,讓它可以把我們需要的資料從main.json中抽出。不過首...

2016-12-23 ‧ 由 fillano 分享