基于HTML5的PPT智能模板設計

劉滄生　管希東　李淑芝　蘭紅

摘 要：針對傳統PPT在制作和播放中依賴于Office軟件、不能很好的解決跨操作系統和終端設備、需要專門配置翻頁激光筆無線遙控播放等問題，提出了一個基于HTML5新特性和WIFI無線通信技術相結合的手機無線遙控PPT智能模板的解決方案。通過實現HTML5中的JS接口和CSS樣式設計，構建了基于瀏覽器模式的PPT通用智能模板；利用模板設計的PPT存放于云端，PPT播放采用Socket無線通信技術，通過WIFI訪問云端，基于C/S模式設置服務器和客戶端的通訊地址，其中手機扮演客戶端發送控制指令，存儲PPT或PPT智能模板的電腦終端作為服務器端執行指令，實現手機無線遙控幻燈片的播放。

關鍵詞：HTML5；PPT智能模板；socket；android手機；智能遙控

中圖分類號：TP311.52 文獻標識碼：A

Abstract：In the traditional PPT in the making and solving for office software，not very good dependence playing cross operating system and terminal device，need special configuration laser pointer with wireless remote control playback problems.This paper presents a solution to the new features of HTML5 and WIFI wireless communication technology based on the combination of mobile phone radio remote control PPT intelligent template.By implementing the JS interface and the CSS style design in HTML5，constructs the PPT general intelligent template based on browser mode.By using the template design of PPT stored in the cloud，PPT player based on Socket wireless communication technology，to access the cloud through WIFI，set the C/S mode server and client communication address based on the mobile phone，which play the client sends control command，computer terminal storage PPT or PPT intelligent template as server-side execution of instructions for playing mobile phone，wireless remote control slides.

Keywords：HTML5；PPT intelligent templates；socket；android phones；smart remot

1 引言（Introduction）

目前廣泛使用的PPT模板都是利用微軟公司的Office中包含的PowerPoint軟件制作的，但當前這種教學PPT的使用還存在以下問題：（1）老師只能在講臺前面手動或者專門配置投影儀無線遙控翻頁激光筆來實現翻頁，或影響教學效果，或增加學校開支。（2）老師需要攜帶存儲了制作好PPT的筆記本電腦，沒有很好的解決跨終端設備播放的問題。（3）可能由于PPT播放環境與制作環境不同從而無法很好的展現想要的播放效果[1]。

造成以上問題的原因主要有以下兩點：（1）沒有很好的解決“低成本”無線遙控PPT的播放；（2）局限于微軟的PPT，從而限制于操作系統和終端設備等。然而Web技術的發展，為幻燈片的制作方式提供了另外的可能，使用HTML5技術能夠滿足制作PPT模板的要求。HTML5因其跨平臺、支持多設備、及時更新等優點，可以很好地解決上述問題；同時由于目前智能手機的普及，也為很好的實現“低成本”無線遙控提供了可能。經研究發現可以設計一個基于HTML5的智能模板和采用智能手機來實現無線遙控的系統。

2 系統總體設計（The overall design of the system）

2.1 總體設計思想

HTML5具有豐富的API，支持2D或3D繪圖，能夠播放音頻和視頻，能夠產生超強的視覺效果，智能手機的無線上網功能不僅可以應用于通訊和娛樂，還可以應用于生活實踐中。因而系統設計的基本思想是將兩種新技術相結合，解決傳統依賴于微軟操作系統的PPT制作和應用問題。系統設計的總體運行架構如圖1所示。

圖1展示了基于HTML5的PPT智能模板設計的基本思想：首先利用HTML5新特性在電腦端設計PPT的通用智能模板；然后利用PPT智能模板設計制作符合個人需求的幻燈片，完成之后將其上傳到云端；當需要使用幻燈片時在電腦端使用瀏覽器打開；最后將智能手機與電腦進行互聯，這樣即可使用智能手機控制幻燈片的播放。

2.2 HTML5智能模板設計

2.2.1 幻燈片智能模板結構設計

使用HTML5新特性制作幻燈片模板的設計原則是：盡量使結構清晰、簡潔，并盡可能的參照傳統幻燈片的結構。HTML5智能模板的結構設計為：

（1）PPT到html的轉換：因為使用HTML5制作的PPT智能模板為html格式，意味著一個網頁對應于一個完整的幻燈片，則每一頁幻燈片的頁面對應一個

（2）頁面標簽設計：每一頁幻燈片區塊都要確定一個對應的id值，id的命名規律為：#slideX，其中X是指第幾個頁面。該id值對應于幻燈片頁面的標簽值，當切換頁面時，瀏覽器的地址欄會發生改變，即幻燈片頁面的標簽值發生改變。

（3）頁面內容設計：幻燈片的每頁內容必須和傳統的幻燈片中的元素進行對應，常見的固定元素有標題（h1）、次標題（h2）、正文段落、圖片等。另外可以考慮設計一些常用的頁面內容，如末頁、作者頁等[2]。

（4）集成動態模板：可以考慮提供統一的設計模板類型，和傳統幻燈片中的模板相對應。

2.2.2 上傳到云端

設計好智能模板后，可以利用智能模板設計自己的Web版幻燈片，然后將其上傳到云端。云端在本文中可以理解為云存儲，云存儲是在云計算的基礎上衍生與發展的概念。云存儲是指將數據存放在第三方托管的虛擬服務器上，而不是像通常的B/S模式一樣將數據存放在服務器上。

2.3 無線遙控設計

將Web版PPT上傳到云端之后就可以借助任何電腦通過該PPT的URI（Uniform Resource Identifier）由瀏覽器進行訪問，當然老師也可以通過手機無線遙控PPT的播放。手機無線遙控采用C/S模式[3]，分為手機控制端和受控服務端。其系統業務流程圖如圖2所示。

系統采用Socket通信[4]，雙方首先要獲取到IP地址。客戶端IP的獲取可以通過打開手機的WiFi，連接上一個無線網絡即可根據動態主機配置協議動態分配到IP地址；服務端則通過連上一個無線網絡也可動態分配到IP地址，從而進行通信連接。通信的過程為：首先是服務端獲取到自身IP并顯示給用戶，用戶將該IP地址作為服務端信息輸入到客戶端，建立Socket連接；然后客戶端發送控制信息給服務端，最后服務端將接收到的控制信息利用Java中的Robot類執行這個輸入事件[5]。

3 主要技術實現（The main technology）

3.1 智能模板實現

智能模板設計包括基本功能實現和特殊元素處理。

3.1.1 基本功能實現

（1）根據設計完成的結構將所要顯示的內容加入到網頁文件中。

（2）為文檔內容加上初始樣式，確定初始界面。

（3）頁面初始化，通過resize（）函數更改當前顯示頁面的大小，確定每個幻燈片區塊元素的id值，為當前頁面加上屬性——偽類：target，并確定幻燈片的頁面總數。

（4）通過更改每個幻燈片區塊元素的屬性——偽類：target來決定顯示哪一張幻燈片。

（5）使用JavaScript實現翻頁函數功能。

（6）對相應的鼠標事件和鍵盤事件進行事件監聽[6]。

3.1.2 特殊元素處理

幻燈片頁面內部的動畫可通過特殊的class進行生成，設置成未顯示和顯示后兩者樣式，這樣用戶可以通過切換動畫觀察到頁內的動畫效果。

3.1.3 兼容考慮和擴展設想

系統需要考慮HTML5的CSS Hack技術對瀏覽器的兼容。能夠在當前頁面編輯修改幻燈片，無需通過后臺代碼進行修改，能夠將網頁在正常網頁和幻燈片模式下切換。

3.2 智能手機遙控技術實現

3.2.1 服務器連接配置

服務端信息錄入為無線遙控PPT播放系統手機控制端的第一個Activity，在該Activity中設計了提供增加服務器信息的ImageViewButton和退出ImageViewButton。點擊增加服務器信息按鈕會彈出一個對話框，讓用戶填入連接名和服務器IP。填寫完信息用戶點擊確認之后，系統檢查IP地址是否合法，若正確則保存用戶填入的信息。

顯示的連接信息包括連接名、錄入時間、提供編輯按鈕和刪除按鈕。點擊編輯按鈕可以讀取并修改該連接信息，包括服務端IP地址和連接名。若信息格式正確則在SharedPreferences中更新，否則彈出對話框顯示錯誤信息。點擊刪除按鈕就從SharedPreferences刪除，并使用Handler進行更新UI。

最后點擊連接信息行就可以進行連接。若沒有打開WiFi則彈出對話框通知用戶并請求打開WiFi；設置成功點擊返回即可回到ConnectionActivity。

3.2.2 無線控制設計

由ConnectionActivity啟動了MainActivity后，根據Activity的生命周期，應該在該Activity成為交互Activity即獲取焦點之前建立連接，即在OnResume（）生命周期方法中采用AsyncTask來異步建立網絡連接。在繼承AsyncTask重寫doInBackground（）時建立連接，然后在onPostExecute（）方法中進行異步更新UI。因為有可能用戶忘了啟動服務器，那么連接就會超時，故要捕獲超時異常并彈出對話框提示用戶可能的錯誤和處理辦法。

在建立連接的方式中，選擇采用Socket.connect（）方法來建立連接。處理完連接問題之后，就可以發送控制指令了，由于動作比較多，故定義常量類來進行控制指令描述，也方便序列化。考慮到操作的便捷性，系統還提供了通過音量鍵來實現上下翻頁，用戶不用看手機屏幕即可方便的實現翻頁操作。

3.2.3 鼠標移動設計

對于鼠標的控制主要是利用手機的觸摸屏來實現的，對觸摸屏有DOWN、MOVE和UP三種事件。可以充分利用MOVE事件來獲取手指在手機屏幕的坐標，然后發送到服務端即可。控制電腦鼠標的移動過程有兩種方式，一種是進行手機屏幕和電腦屏幕的靜態映射，即由手機的位置乘上電腦屏幕相對手機屏幕的倍數就可進行映射，這種方式的缺點在于移動連續性不是很好，在完成一次移動之后重新移動則無法在原來的基礎上移動。另一種映射方式是根據手機屏幕的范圍和用戶移動的習慣，將手機屏幕映射到以當前位置為中心的一個矩形區域，這樣可以解決移動連續性的問題。具體實現是在第一種方式的基礎上再形成一種坐標映射，即首先使用第一種方式來獲知實際的電腦鼠標相對電腦屏幕的位置，然后計算矩形范圍進行第二次映射，最后轉換為實際的坐標發送到電腦進行執行。endprint

3.2.4 服務端設計

服務端最基本的工作是接收客戶端的連接請求和執行發送過來的控制指令。考慮到在服務器一次運行的過程中客戶端可能會多次連接服務器，故在接收客戶端的連接請求時必須采用多線程來實現。由于一臺電腦在同一個時刻肯定只能有一個手機來控制，故采用While（）循環來實現，這樣只有在Accept（）成功一次并執行完該次連接才會接收下一次的連接請求。由于一次Socket通信是采用一次長連接，故需要While（true）的形式來不斷的接收客戶端發送過來的控制指令然后執行，而不能一次性執行了一個動作就結束了，否則這樣反序列化的header信息不一致，會造成失敗異常。具體執行這個控制指令時采用Robot類提供的方法來進行，Robot類用于為測試自動化、自運行演示程序和其他需要控制鼠標和鍵盤的應用程序生成本機系統輸入事件。Robot的主要目的是便于Java平臺實現自動測試，如要實現播放使用keyPressed（int keyCode）就可以了；對于鼠標移動用MouseMove（intx，inty）這個方法來實現，最后需要將連接進行釋放。

由于用戶的IP獲取能力不同，系統采用Swing方式顯示本機的IP地址。為獲取IP地址直接得到NetworkInterface對象集合，然后將其進行遍歷得到對應的IP地址。本地環回測試IP地址：127.0.0.1也可以得到，得到時進行一次篩選即可，將這個地址過濾掉不顯示，否則一次顯示多個IP地址，用戶不知道該選擇哪個進行輸入了。

4 實驗結果與分析（Experimental results andanalysis）

4.1 實驗環境

任何支持HTML5的瀏覽器均可作為該實驗的環境，這里使用的是Chrome瀏覽器。而對于無線遙控環境，任何帶WiFi功能的Android手機都可以，這里使用的是Nexus5。

4.2 實驗結果

（1）傳統PPT顯示效果和Web版幻燈片的對比如圖3和圖4所示。通過實驗結果可知傳統方式制作的PPT與基于HTML5制作的Web版幻燈片相比，Web版的幻燈片能夠達到與傳統幻燈片類似的效果，甚至能達到視覺沖擊力更好的顯示效果。

方便更新和拓展。

5 結論（Conclusion）

本文提出的基于HTML5的幻燈片智能模板設計和基于Socket的Android手機遠程遙控系統是可行的。它具有以下特點：（1）無需PowerPoint軟件即可制作幻燈片。（2）幻燈片播放時無需時刻使用鼠標進行控制，能夠用智能手機進行播放，展示了無線網和智能手機的強大功能和魅力。（3）該幻燈片智能模板和智能遙控系統能夠采用新技術實現傳統幻燈片的功能，能夠展示HTML5的特殊性能，所制作的幻燈片比傳統PPT更加漂亮。（4）不受操作系統的限制，同時支持多終端包括平板、手提電腦、臺式電腦等通過網址進行訪問，軟硬件兼容性更好。

參考文獻（References）

[1] 李啟銳，等.藍牙手機多媒體教學控制軟件設計與實現[J].茂名學院學報，2010，20（3）：43-46.

[2] 張會凌，張成文，林沛.基于HTML5的在線答疑系統的白板設計與實現[J].軟件導刊，2012，11（10）：106-107.

[3] 姚霽耘.基于藍牙技術的手機遙控系統開發研究[J].電腦與電信，2011（8）：49-51.

[4] 孫曉東，馬旭東，戴先中.基于Java-互聯網環境的移動機器人遠程操作接口[J].計算機應用與軟件，2004，21（4）：8-9；90.

[5] 蔣麗卿.淺談手機遙控[J].信息通信，2013（8）：176-177.

[6] 劉俊杰，林生佑，陶玲君.手機遙控計算機（MPCP）系統的開發與研究[J].計算機時代，2012（2）：13-19.

作者簡介：

劉滄生（1991-），男，本科.研究領域：云計算.

管希東（1992-），男，本科.研究領域：大數據存儲.

李淑芝（1964-），女，碩士，教授.研究領域：軟件工程，信息隱藏.

蘭 紅（1969-），女，博士，副教授.研究領域：圖像處理與模式識別.endprint

3.2.4 服務端設計

服務端最基本的工作是接收客戶端的連接請求和執行發送過來的控制指令。考慮到在服務器一次運行的過程中客戶端可能會多次連接服務器，故在接收客戶端的連接請求時必須采用多線程來實現。由于一臺電腦在同一個時刻肯定只能有一個手機來控制，故采用While（）循環來實現，這樣只有在Accept（）成功一次并執行完該次連接才會接收下一次的連接請求。由于一次Socket通信是采用一次長連接，故需要While（true）的形式來不斷的接收客戶端發送過來的控制指令然后執行，而不能一次性執行了一個動作就結束了，否則這樣反序列化的header信息不一致，會造成失敗異常。具體執行這個控制指令時采用Robot類提供的方法來進行，Robot類用于為測試自動化、自運行演示程序和其他需要控制鼠標和鍵盤的應用程序生成本機系統輸入事件。Robot的主要目的是便于Java平臺實現自動測試，如要實現播放使用keyPressed（int keyCode）就可以了；對于鼠標移動用MouseMove（intx，inty）這個方法來實現，最后需要將連接進行釋放。

由于用戶的IP獲取能力不同，系統采用Swing方式顯示本機的IP地址。為獲取IP地址直接得到NetworkInterface對象集合，然后將其進行遍歷得到對應的IP地址。本地環回測試IP地址：127.0.0.1也可以得到，得到時進行一次篩選即可，將這個地址過濾掉不顯示，否則一次顯示多個IP地址，用戶不知道該選擇哪個進行輸入了。

4 實驗結果與分析（Experimental results andanalysis）

4.1 實驗環境

任何支持HTML5的瀏覽器均可作為該實驗的環境，這里使用的是Chrome瀏覽器。而對于無線遙控環境，任何帶WiFi功能的Android手機都可以，這里使用的是Nexus5。

4.2 實驗結果

（1）傳統PPT顯示效果和Web版幻燈片的對比如圖3和圖4所示。通過實驗結果可知傳統方式制作的PPT與基于HTML5制作的Web版幻燈片相比，Web版的幻燈片能夠達到與傳統幻燈片類似的效果，甚至能達到視覺沖擊力更好的顯示效果。

方便更新和拓展。

5 結論（Conclusion）

本文提出的基于HTML5的幻燈片智能模板設計和基于Socket的Android手機遠程遙控系統是可行的。它具有以下特點：（1）無需PowerPoint軟件即可制作幻燈片。（2）幻燈片播放時無需時刻使用鼠標進行控制，能夠用智能手機進行播放，展示了無線網和智能手機的強大功能和魅力。（3）該幻燈片智能模板和智能遙控系統能夠采用新技術實現傳統幻燈片的功能，能夠展示HTML5的特殊性能，所制作的幻燈片比傳統PPT更加漂亮。（4）不受操作系統的限制，同時支持多終端包括平板、手提電腦、臺式電腦等通過網址進行訪問，軟硬件兼容性更好。

參考文獻（References）

[1] 李啟銳，等.藍牙手機多媒體教學控制軟件設計與實現[J].茂名學院學報，2010，20（3）：43-46.

[2] 張會凌，張成文，林沛.基于HTML5的在線答疑系統的白板設計與實現[J].軟件導刊，2012，11（10）：106-107.

[3] 姚霽耘.基于藍牙技術的手機遙控系統開發研究[J].電腦與電信，2011（8）：49-51.

[4] 孫曉東，馬旭東，戴先中.基于Java-互聯網環境的移動機器人遠程操作接口[J].計算機應用與軟件，2004，21（4）：8-9；90.

[5] 蔣麗卿.淺談手機遙控[J].信息通信，2013（8）：176-177.

[6] 劉俊杰，林生佑，陶玲君.手機遙控計算機（MPCP）系統的開發與研究[J].計算機時代，2012（2）：13-19.

作者簡介：

劉滄生（1991-），男，本科.研究領域：云計算.

管希東（1992-），男，本科.研究領域：大數據存儲.

李淑芝（1964-），女，碩士，教授.研究領域：軟件工程，信息隱藏.

蘭 紅（1969-），女，博士，副教授.研究領域：圖像處理與模式識別.endprint

3.2.4 服務端設計

服務端最基本的工作是接收客戶端的連接請求和執行發送過來的控制指令。考慮到在服務器一次運行的過程中客戶端可能會多次連接服務器，故在接收客戶端的連接請求時必須采用多線程來實現。由于一臺電腦在同一個時刻肯定只能有一個手機來控制，故采用While（）循環來實現，這樣只有在Accept（）成功一次并執行完該次連接才會接收下一次的連接請求。由于一次Socket通信是采用一次長連接，故需要While（true）的形式來不斷的接收客戶端發送過來的控制指令然后執行，而不能一次性執行了一個動作就結束了，否則這樣反序列化的header信息不一致，會造成失敗異常。具體執行這個控制指令時采用Robot類提供的方法來進行，Robot類用于為測試自動化、自運行演示程序和其他需要控制鼠標和鍵盤的應用程序生成本機系統輸入事件。Robot的主要目的是便于Java平臺實現自動測試，如要實現播放使用keyPressed（int keyCode）就可以了；對于鼠標移動用MouseMove（intx，inty）這個方法來實現，最后需要將連接進行釋放。

由于用戶的IP獲取能力不同，系統采用Swing方式顯示本機的IP地址。為獲取IP地址直接得到NetworkInterface對象集合，然后將其進行遍歷得到對應的IP地址。本地環回測試IP地址：127.0.0.1也可以得到，得到時進行一次篩選即可，將這個地址過濾掉不顯示，否則一次顯示多個IP地址，用戶不知道該選擇哪個進行輸入了。

4 實驗結果與分析（Experimental results andanalysis）

4.1 實驗環境

任何支持HTML5的瀏覽器均可作為該實驗的環境，這里使用的是Chrome瀏覽器。而對于無線遙控環境，任何帶WiFi功能的Android手機都可以，這里使用的是Nexus5。

4.2 實驗結果

（1）傳統PPT顯示效果和Web版幻燈片的對比如圖3和圖4所示。通過實驗結果可知傳統方式制作的PPT與基于HTML5制作的Web版幻燈片相比，Web版的幻燈片能夠達到與傳統幻燈片類似的效果，甚至能達到視覺沖擊力更好的顯示效果。

方便更新和拓展。

5 結論（Conclusion）

本文提出的基于HTML5的幻燈片智能模板設計和基于Socket的Android手機遠程遙控系統是可行的。它具有以下特點：（1）無需PowerPoint軟件即可制作幻燈片。（2）幻燈片播放時無需時刻使用鼠標進行控制，能夠用智能手機進行播放，展示了無線網和智能手機的強大功能和魅力。（3）該幻燈片智能模板和智能遙控系統能夠采用新技術實現傳統幻燈片的功能，能夠展示HTML5的特殊性能，所制作的幻燈片比傳統PPT更加漂亮。（4）不受操作系統的限制，同時支持多終端包括平板、手提電腦、臺式電腦等通過網址進行訪問，軟硬件兼容性更好。

參考文獻（References）

[1] 李啟銳，等.藍牙手機多媒體教學控制軟件設計與實現[J].茂名學院學報，2010，20（3）：43-46.

[2] 張會凌，張成文，林沛.基于HTML5的在線答疑系統的白板設計與實現[J].軟件導刊，2012，11（10）：106-107.

[3] 姚霽耘.基于藍牙技術的手機遙控系統開發研究[J].電腦與電信，2011（8）：49-51.

[4] 孫曉東，馬旭東，戴先中.基于Java-互聯網環境的移動機器人遠程操作接口[J].計算機應用與軟件，2004，21（4）：8-9；90.

[5] 蔣麗卿.淺談手機遙控[J].信息通信，2013（8）：176-177.

[6] 劉俊杰，林生佑，陶玲君.手機遙控計算機（MPCP）系統的開發與研究[J].計算機時代，2012（2）：13-19.

作者簡介：

劉滄生（1991-），男，本科.研究領域：云計算.

管希東（1992-），男，本科.研究領域：大數據存儲.

李淑芝（1964-），女，碩士，教授.研究領域：軟件工程，信息隱藏.

蘭 紅（1969-），女，博士，副教授.研究領域：圖像處理與模式識別.endprint