Web前端技術(shù)在開放大學(xué)在線學(xué)習(xí)平臺中的應(yīng)用研究

王運

摘要：該文通過對目前國內(nèi)外在線學(xué)習(xí)平臺的研究，對在線學(xué)習(xí)平臺的需求進(jìn)行了分析，針對桌面端和移動端兩種學(xué)習(xí)方式，探討了Web前端技術(shù)在學(xué)習(xí)平臺中不同的實現(xiàn)方式。提出現(xiàn)階段學(xué)習(xí)平臺的實現(xiàn)應(yīng)針對桌面端和移動端開發(fā)不同的程序，即在桌面端使用HTML5制作可適應(yīng)性網(wǎng)頁，在移動端使用Hybrid App方式制作APP。最后簡要的介紹了針對移動端使用Hybrid App方式開發(fā)應(yīng)用程序的過程。

關(guān)鍵詞：在線學(xué)習(xí)平臺，HTML5， Hybrid App

中圖分類號：TP311 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2015）13-0150-03

Abstract：In this paper，through the research of online learning platform in China and abroad， analyzed the demand for online learning platform， aimed at the two types of learning by desktop and mobile， discussed theImplementation of web front-end technology in learning platform.Put forward the realization of the learning platform should develop different programs for desktop and mobile at the present stage，used HTML 5 web pages to develop desktop pages， and used Hybrid App to make mobile app. Finally briefly introduced the way of Hybrid App for mobile terminal application development process.

Key words： Online Learning Platform； HTML5； Hybrid App

隨著國家開放大學(xué)及多個省級開放大學(xué)的掛牌成立，原廣播電視大學(xué)的辦學(xué)形式發(fā)生了根本性的轉(zhuǎn)變。開放大學(xué)的使命是為學(xué)習(xí)型社會搭建終身學(xué)習(xí)“立交橋”，其發(fā)展策略是充分利用信息技術(shù)創(chuàng)新教育教學(xué)模式。在當(dāng)今社會，隨著人們的生活節(jié)奏的加快以及網(wǎng)絡(luò)的普及，在線學(xué)習(xí)已成為終身學(xué)習(xí)的重要手段之一，近幾年，國內(nèi)外涌現(xiàn)出一批優(yōu)秀的在線學(xué)習(xí)平臺，本文將對這些現(xiàn)有的在線學(xué)習(xí)平臺的實現(xiàn)方式進(jìn)行分析和研究，并探討Web前端技術(shù)在開放大學(xué)在線學(xué)習(xí)平臺中實現(xiàn)的思路。

1 國內(nèi)外在線平臺現(xiàn)狀

目前，MOOC（大規(guī)模開放在線課堂Massive Open Online Course）已成為國內(nèi)外最常見的在線學(xué)習(xí)模式。MOOC是一種針對于大眾人群的在線課堂，其主要特點是開放共享及可擴(kuò)張性，是遠(yuǎn)程教育的最新發(fā)展。國內(nèi)外較著名的MOOC平臺有Coursera，edX，Udacity，學(xué)堂在線等。

以Coursera為例，其Web網(wǎng)頁前端提供了課程瀏覽，課程搜索，課程報名，個人課程管理，視頻瀏覽及下載，課程論壇討論，課后作業(yè)及考試等功能；同時，Coursera還提供了適用于不同平臺的集成了網(wǎng)頁端大部分功能的APP供學(xué)習(xí)者在移動設(shè)備上使用。

2 在線學(xué)習(xí)平臺的功能需求

在線學(xué)習(xí)平臺的核心功能是教學(xué)資源的展現(xiàn)和教學(xué)互動，其首要任務(wù)是將各類教學(xué)資源提供給學(xué)習(xí)者，其通常提供的資源類型包括文本，圖片，視頻，音頻，互動多媒體課件等類型，其中，視頻是最主要的教學(xué)內(nèi)容承載方式，如Coursera、網(wǎng)易公開課等在線學(xué)習(xí)平臺提供的資源都是以視頻課程為主，文本等其他資源為輔。學(xué)習(xí)者使用視頻的方式包括在線觀看和下載到本地。因此，如何將視頻為主的教學(xué)資源提供給學(xué)習(xí)者是在線學(xué)習(xí)平臺的關(guān)鍵。

在學(xué)習(xí)過程中，學(xué)習(xí)者通常無法獨立完成所有的學(xué)習(xí)任務(wù)，因此，學(xué)習(xí)者與教師之間、學(xué)習(xí)者與學(xué)習(xí)者之間的互動是在線學(xué)習(xí)平臺必不可少的功能，大多數(shù)學(xué)習(xí)平臺都包含在線答疑、論壇討論以及社交化等互動功能。

在線學(xué)習(xí)平臺的功能一般還包括作業(yè)、在線考試、個人信息管理等等。一個合格的學(xué)習(xí)平臺，必須完整的包含這些功能。

3 在線學(xué)習(xí)的方式

目前，在線學(xué)習(xí)主要通過桌面端和移動端兩種方式來進(jìn)行。

桌面端學(xué)習(xí)是傳統(tǒng)的在線學(xué)習(xí)方式，學(xué)習(xí)者使用桌面端電腦訪問學(xué)習(xí)平臺網(wǎng)站，在網(wǎng)站上完成瀏覽教學(xué)資源，與教師互動等相關(guān)操作。對于學(xué)習(xí)者來說，只需要能上網(wǎng)的電腦和瀏覽器即可進(jìn)行學(xué)習(xí)，學(xué)習(xí)成本較低；但這種學(xué)習(xí)方式存在著學(xué)習(xí)時間和地點的限制，無法適應(yīng)現(xiàn)代社會越來越快的生活節(jié)奏。

隨著智能手機(jī)，平板電腦的普及，以及WIFI、3G、4G等網(wǎng)絡(luò)接入方式的普及，越來越多的學(xué)習(xí)者開始使用移動終端進(jìn)行學(xué)習(xí)。學(xué)習(xí)者使用移動終端上的瀏覽器或APP訪問學(xué)習(xí)平臺，完成和桌面端一樣的學(xué)習(xí)行為。這樣的學(xué)習(xí)方式可以充分利用碎片化時間，隨時隨地進(jìn)行學(xué)習(xí)。同時，增加了觸摸功能的移動設(shè)備的交互模式比使用鼠標(biāo)的桌面電腦更加豐富，可以實現(xiàn)較桌面端復(fù)雜的功能。

所以，學(xué)習(xí)平臺的建設(shè)必須同時考慮桌面端和移動端的需要，以適應(yīng)學(xué)習(xí)者的不同需求。

4 在線學(xué)習(xí)平臺web前端技術(shù)

在實現(xiàn)方式上，在線學(xué)習(xí)平臺web前端技術(shù)使用了網(wǎng)頁和app兩種方式。

4.1 網(wǎng)頁方式

網(wǎng)頁方式是指學(xué)習(xí)者通過瀏覽器訪問在線學(xué)習(xí)平臺網(wǎng)站，在網(wǎng)頁上進(jìn)行相關(guān)學(xué)習(xí)操作，此方式是桌面端最常使用的學(xué)習(xí)方式。

這種方式的優(yōu)點主要有：（1）學(xué)習(xí)者的學(xué)習(xí)成本較低：學(xué)習(xí)者只要能上網(wǎng)就可進(jìn)行學(xué)習(xí)，無需添加其他設(shè)備。（2）平臺無關(guān)：瀏覽器方式不受學(xué)習(xí)設(shè)備的系統(tǒng)限制，無論學(xué)習(xí)者的操作系統(tǒng)是Windows，Linux或MAC OS X，或移動設(shè)備是iOS，Android或Windows Phone，只需瀏覽器就能進(jìn)行學(xué)習(xí)。（3）開發(fā)成本低，維護(hù)方便：開發(fā)者只需要開發(fā)一兩套網(wǎng)頁即可適應(yīng)不同學(xué)習(xí)者需求，同時維護(hù)和升級工作主要集中在服務(wù)器上，學(xué)習(xí)者能及時收到響應(yīng)。

但是，這種方式也存在一些缺點：（1）學(xué)習(xí)過程中必須始終保持在線：但對于移動端的學(xué)習(xí)者來說，雖然目前移動網(wǎng)絡(luò)和WIFI的普及度較高，但仍無法確保學(xué)習(xí)者可以隨時隨地接入網(wǎng)絡(luò)，使得學(xué)習(xí)者的學(xué)習(xí)場景受到一定限制。（2）瀏覽器兼容性：目前常用瀏覽器種類復(fù)雜，以桌面端為例，常見的瀏覽器有IE系列、Chrome，F(xiàn)irefox以及國內(nèi)軟件商重新打包的360瀏覽器，獵豹瀏覽器等等，由于這些瀏覽器使用的內(nèi)核各不相同，而不同內(nèi)核對于網(wǎng)頁元素的標(biāo)準(zhǔn)不一，為了確保大多數(shù)瀏覽器都能正常使用學(xué)習(xí)平臺的功能，要求開發(fā)者必須進(jìn)行大量的針對性測試和修改。（3）影響學(xué)習(xí)者的專注度：在使用瀏覽器訪問學(xué)習(xí)平臺進(jìn)行學(xué)習(xí)的同時，學(xué)習(xí)者可以在其他網(wǎng)頁進(jìn)行其他活動，如進(jìn)行訪問社交網(wǎng)站、閱讀新聞、網(wǎng)購等等操作；同時，學(xué)習(xí)平臺網(wǎng)頁中所包含的非學(xué)習(xí)內(nèi)容也可能分散學(xué)習(xí)者的注意力。

目前，學(xué)習(xí)平臺的網(wǎng)頁的制作方式主要有以下兩種：

1）傳統(tǒng)HTML+Flash方式

這種方式是以傳統(tǒng)的HTML為基礎(chǔ)構(gòu)成網(wǎng)頁，而使用Flash表現(xiàn)多媒體和交互內(nèi)容，在早期的在線學(xué)習(xí)平臺得到廣泛使用。其優(yōu)點有：（1）HTML和Flash技術(shù)的發(fā)展已有多年歷史，技術(shù)比較成熟，擁有眾多的設(shè)計和開發(fā)人員；（2）網(wǎng)絡(luò)上存在大量Flash素材和資源，只要得到授權(quán)即可使用，降低了開發(fā)成本。

但隨著技術(shù)的發(fā)展，F(xiàn)lash的問題逐漸凸顯，具體有：（1）Flash是使用控件方式實現(xiàn)，在Windows系統(tǒng)上的瀏覽器一般自帶或可以安裝Flash Player控件，但并不是所有的瀏覽器都可以使用控件，特別是在移動設(shè)備上，絕大多數(shù)瀏覽器都無法加載控件，這限制了Flash的使用場景；（2）Flash的互動模式最初是為鼠標(biāo)設(shè)計，針對移動設(shè)備的觸摸操作支持不是很完善；這些問題導(dǎo)致了越來越多的開發(fā)者選擇放棄Flash而使用新的技術(shù)。

2）HTML5技術(shù)

HTML5是HTML最新的修訂版本，2014年10月由萬維網(wǎng)聯(lián)盟（W3C）完成標(biāo)準(zhǔn)制定，是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。HTML5具有以下優(yōu)點：（1）可用性的提高和學(xué)習(xí)者體驗的改進(jìn)；（2）增加了一些新的功能標(biāo)簽；（3）更多的視音頻多媒體元素；（4）可以以非控件的方式替代Flash等技術(shù)；（5）網(wǎng)站的抓取和索引變的更加容易；（6）對移動應(yīng)用和游戲的支持良好；（7）可移植性好。

這些優(yōu)點使得使用HTML5技術(shù)開發(fā)的網(wǎng)站能夠良好的被桌面端和移動設(shè)備所兼容，特別是與響應(yīng)式網(wǎng)絡(luò)設(shè)計方式相結(jié)合，制作出的網(wǎng)站可以被兩者同時適配。所以，在線學(xué)習(xí)平臺應(yīng)使用HTML5方式開發(fā)適應(yīng)于桌面端學(xué)習(xí)的網(wǎng)頁。

4.2 移動APP方式

移動APP方式指的是學(xué)習(xí)者使用學(xué)習(xí)平臺開發(fā)的應(yīng)用程序進(jìn)行學(xué)習(xí)，這些應(yīng)用程序一般集成了學(xué)習(xí)平臺網(wǎng)站全部或大部分的功能，使學(xué)習(xí)者可以在應(yīng)用程序內(nèi)完成整個學(xué)習(xí)過程。

這種方式的優(yōu)點有：（1）學(xué)習(xí)者專注于學(xué)習(xí)：APP中只提供關(guān)于學(xué)習(xí)的內(nèi)容，在不關(guān)閉APP的情況下，學(xué)習(xí)者只能將全部注意力集中在學(xué)習(xí)上，從而獲得較高的專注度和學(xué)習(xí)效率。（2）離線學(xué)習(xí)：APP可以學(xué)習(xí)內(nèi)容保存到本地，即使離線亦可使用，這對于移動設(shè)備來說非常重要。（3）針對平臺定制：開發(fā)者針對各平臺的特性進(jìn)行不同的開發(fā)，如充分利用iOS和Android的特點設(shè)計不同的操作方式，以提升不同系統(tǒng)的學(xué)習(xí)者的學(xué)習(xí)者體驗，同時減少兼容性問題。（4）應(yīng)用響應(yīng)速度快：由于APP在使用時大部分?jǐn)?shù)據(jù)保存在本地，學(xué)習(xí)者無需等待數(shù)據(jù)下載即可使用，同時APP在與服務(wù)器進(jìn)行交互時只需傳輸必須的學(xué)習(xí)數(shù)據(jù)，相對于網(wǎng)頁方式無需下載如頁面元素等其他數(shù)據(jù)，在相同網(wǎng)絡(luò)情況下傳輸速度較快。（5）學(xué)習(xí)狀態(tài)保存方便：學(xué)習(xí)者的狀態(tài)數(shù)據(jù)同時保存在本地和服務(wù)器端，再次使用時APP可以直接讀取本地的數(shù)據(jù)，而網(wǎng)頁方式往往需要重新登錄認(rèn)證。

但是，APP的開發(fā)維護(hù)成本較高，開發(fā)者需要針對多個平臺進(jìn)行開發(fā)不同的版本，不同平臺之間的差異會提升開發(fā)的復(fù)雜度，發(fā)布更新后也必須由學(xué)習(xí)者自動或手動的進(jìn)行更新操作，增加了使用成本。這一問題可通過使用Hybrid App方式解決，Hybrid制作的APP使用一套UI WebView將網(wǎng)頁包含起來組成一個APP程序，程序的主要功能由網(wǎng)頁完成。這樣，開發(fā)者可以先開發(fā)一套通用的網(wǎng)頁，然后根據(jù)不用平臺將其封裝起來制作成為APP程序。這種方式具有開發(fā)成本低、輕松跨平臺、迭代更新快等優(yōu)點。

5 在線學(xué)習(xí)平臺的實現(xiàn)

學(xué)習(xí)平臺為了支持多種學(xué)習(xí)方式，應(yīng)針對桌面端和移動端開發(fā)不同的程序。桌面端使用HTML5開發(fā)網(wǎng)頁，同時使用響應(yīng)式設(shè)計方式，使制作的網(wǎng)頁同時也能夠兼容移動端。針對移動端，先使用HTML5開發(fā)網(wǎng)頁，然后使用Hybrid App方式針對不同平臺打包發(fā)布。如下圖：

目前，國內(nèi)外有眾多的開發(fā)框架，如PhoneGap、Titanium、Salama等，下面以PhoneGap框架為例演示一個Hybrid App方式的學(xué)習(xí)平臺的開發(fā)流程。

1）構(gòu)建前端應(yīng)用網(wǎng)頁

前端應(yīng)用網(wǎng)頁基于HTML5開發(fā)，以實現(xiàn)與學(xué)習(xí)者的各類交互行為，同時可利用jQuery Mobile等前端框架，框架中包含了各種移動應(yīng)用常用的頁面主題與元素，將其直接使用或修改后使用將有效的提高開發(fā)效率。

2）構(gòu)建后端功能，并實現(xiàn)離線功能

編寫代碼以實現(xiàn)和后臺數(shù)據(jù)庫的通信功能，實現(xiàn)內(nèi)容的動態(tài)更新，同時，為保證離線時的使用，使用HTML的應(yīng)用緩存（Application Cache）機(jī)制將一些Web資源保存在本地調(diào)用，并使用HTML5的Web Storage功能在本地保存學(xué)習(xí)者的數(shù)據(jù)。

3）使用PhoneGap將制作好的網(wǎng)站封裝成應(yīng)用程序

以Android平臺為例：（1）打開Eclipse，新建一個Android Project，在根目錄下建立兩個文件夾：/libs，/assets/www；（2）將PhoneGap壓縮包里的phonegap.js，phonegap.jar等必要文件拷貝到對應(yīng)位置；（3）將工程里自動生成的java文件進(jìn)行對應(yīng)修改，并修改 AndroidManifest.xml中的內(nèi)容；（4）打包生成apk文件。

6 總結(jié)

本文通過對目前國內(nèi)外在線學(xué)習(xí)平臺的研究，對在線學(xué)習(xí)平臺的需求進(jìn)行了分析，針對桌面端和移動端兩種學(xué)習(xí)方式，探討了學(xué)習(xí)平臺不同的實現(xiàn)方式。提出現(xiàn)階段學(xué)習(xí)平臺的實現(xiàn)應(yīng)針對桌面端和移動端開發(fā)不同的程序，即在桌面端使用HTML5制作可適應(yīng)性網(wǎng)頁，在移動端使用Hybrid App方式制作APP。最后簡要的介紹了針對移動端使用Hybrid App方式開發(fā)應(yīng)用程序的過程。

參考文獻(xiàn)：

[1] 張璇. MOOC在線教學(xué)模式的啟示與再思考[J]. 江蘇廣播電視大學(xué)學(xué)報，2013（5）：5-10.

[2] 趙國海，張巖. 基于HTML5開發(fā)跨平臺在線教育系統(tǒng)[J]. 科技創(chuàng)業(yè)家，2013（8）：46.

[3] 張幸芝，徐東東，賈菲. 基于響應(yīng)式Web設(shè)計的教務(wù)系統(tǒng)移動平臺研究與建設(shè)[J]. 軟件，2013（6）：5-7.

[4] 劉春華. 基于HTML5的移動互聯(lián)網(wǎng)應(yīng)用發(fā)展趨勢[J]. 移動通信，2013（09）：64-68.

[5] 趙愛美. 基于HTML5和_NET的移動學(xué)習(xí)平臺研究與實現(xiàn)[J]. 河南科技學(xué)院學(xué)報，2013（8）：62-66.

[6] 潘志宏，羅偉斌，柳青. 基于HTML5跨平臺移動應(yīng)用的研究與實踐[J]. 電腦知識與技術(shù)，2013（6）：3992-3995.