王運

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

關鍵詞：在線學習平臺，HTML5， Hybrid App

中圖分類號：TP311 文獻標識碼：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

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

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

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

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

2 在線學習平臺的功能需求

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

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

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

3 在線學習的方式

目前，在線學習主要通過桌面端和移動端兩種方式來進行。

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

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

所以，學習平臺的建設必須同時考慮桌面端和移動端的需要，以適應學習者的不同需求。

4 在線學習平臺web前端技術

在實現(xiàn)方式上，在線學習平臺web前端技術使用了網頁和app兩種方式。

4.1 網頁方式

網頁方式是指學習者通過瀏覽器訪問在線學習平臺網站，在網頁上進行相關學習操作，此方式是桌面端最常使用的學習方式。

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

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

目前，學習平臺的網頁的制作方式主要有以下兩種：

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

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

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

2）HTML5技術

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

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

4.2 移動APP方式

移動APP方式指的是學習者使用學習平臺開發(fā)的應用程序進行學習，這些應用程序一般集成了學習平臺網站全部或大部分的功能，使學習者可以在應用程序內完成整個學習過程。

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

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

5 在線學習平臺的實現(xiàn)

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

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

1）構建前端應用網頁

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

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

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

3）使用PhoneGap將制作好的網站封裝成應用程序

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

6 總結

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

參考文獻：

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

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

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

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

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

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