基于HTML5的Web離線技術(shù)在技能訓(xùn)練導(dǎo)學(xué)平臺(tái)中的應(yīng)用

張永瑞 （連云港師范高等專科學(xué)校數(shù)學(xué)與信息工程學(xué)院，江蘇 連云港222006）

在線導(dǎo)學(xué)平臺(tái)中 “在線跟蹤學(xué)習(xí)”能夠在技能訓(xùn)練實(shí)施過(guò)程中，學(xué)生接受任務(wù)后按照教師提供的要求和素材完成技能學(xué)習(xí)和訓(xùn)練。在這一過(guò)程中，在線導(dǎo)學(xué)平臺(tái)可以對(duì)學(xué)生技能訓(xùn)練的記錄進(jìn)行保存，作為技能訓(xùn)練的過(guò)程材料［1］。但是，學(xué)生在使用導(dǎo)學(xué)平臺(tái)進(jìn)行技能訓(xùn)練實(shí)施的過(guò)程中出現(xiàn)了以下問(wèn)題：①網(wǎng)絡(luò)環(huán)境異常造成學(xué)習(xí)不能進(jìn)行?！霸诰€導(dǎo)學(xué)”的最大特征是學(xué)習(xí)者基于互聯(lián)網(wǎng)的學(xué)習(xí)環(huán)境開展學(xué)習(xí)。但是，在實(shí)際的網(wǎng)絡(luò)學(xué)習(xí)過(guò)程中，存在著諸多因素使得學(xué)習(xí)者可能無(wú)法始終保持在線狀態(tài)進(jìn)行在線學(xué)習(xí)。比如學(xué)習(xí)者出現(xiàn)突發(fā)的網(wǎng)絡(luò)異常，或者學(xué)習(xí)者學(xué)習(xí)的網(wǎng)絡(luò)條件比較差，無(wú)法正常打開學(xué)習(xí)課件或提交作業(yè)等。②學(xué)習(xí)地點(diǎn)變動(dòng)帶來(lái)學(xué)習(xí)資源丟失。技能訓(xùn)練實(shí)施過(guò)程中教師提供的學(xué)習(xí)要求和素材往往需要從平臺(tái)中下載到本地計(jì)算機(jī)中，然后學(xué)習(xí)者按照要求對(duì)素材進(jìn)行操作和訓(xùn)練。若操作和訓(xùn)練的時(shí)間有限、學(xué)習(xí)地點(diǎn)發(fā)生變動(dòng)，之前下載的學(xué)習(xí)資源就需要學(xué)習(xí)者聯(lián)網(wǎng)后重新下載。這使得學(xué)習(xí)者與服務(wù)器之間的網(wǎng)絡(luò)交互變得頻繁。鑒于在線導(dǎo)學(xué)平臺(tái)中存在的問(wèn)題，利用Web離線技術(shù)，筆者提出了離線學(xué)習(xí)形式，以此對(duì)在線學(xué)習(xí)形式進(jìn)行補(bǔ)充。

1 離線學(xué)習(xí)需要的基本功能

離線學(xué)習(xí)是指學(xué)習(xí)者無(wú)須時(shí)刻保持在線狀態(tài)進(jìn)行在線學(xué)習(xí)，而是將課程學(xué)習(xí)內(nèi)容、進(jìn)度等信息下載到本地計(jì)算機(jī)，以離線的形式完成課程的學(xué)習(xí)，并記錄學(xué)習(xí)進(jìn)度的一種學(xué)習(xí)方式［2］。通常，學(xué)習(xí)者進(jìn)行離線學(xué)習(xí)時(shí)需要平臺(tái)能夠提供以下功能：①登錄并選擇在線學(xué)習(xí)或者離線學(xué)習(xí)。在線狀態(tài)下，學(xué)習(xí)者可以將服務(wù)器上的學(xué)習(xí)內(nèi)容及在線學(xué)習(xí)記錄下載到本地計(jì)算機(jī)，以便學(xué)習(xí)者能夠在離線的狀態(tài)下訪問(wèn)這些數(shù)據(jù)。②學(xué)習(xí)者進(jìn)入離線學(xué)習(xí)模塊，能夠借助瀏覽器訪問(wèn)緩存中的學(xué)習(xí)內(nèi)容、查詢學(xué)習(xí)記錄等。③在聯(lián)網(wǎng)狀態(tài)下，平臺(tái)能夠提供是否同步本地緩存中的數(shù)據(jù) （學(xué)習(xí)內(nèi)容、學(xué)習(xí)記錄等）的功能。即保證聯(lián)網(wǎng)的狀態(tài)下，保存在本地的數(shù)據(jù)與服務(wù)器上的數(shù)據(jù)能進(jìn)行雙向更新，既可以用服務(wù)器上的數(shù)據(jù)更新保存在本地緩存中的信息，也可以把本地緩存中的數(shù)據(jù)更新到服務(wù)器上的數(shù)據(jù)庫(kù)中［3］。

2 離線學(xué)習(xí)的模型構(gòu)建

在線導(dǎo)學(xué)平臺(tái)中的 “在線跟蹤學(xué)習(xí)”要在離線狀態(tài)下進(jìn)行，必須解決數(shù)據(jù)的本地化存儲(chǔ)，同時(shí)要解決數(shù)據(jù)與服務(wù)器端數(shù)據(jù)的同步問(wèn)題應(yīng)用。Web離線技術(shù)開發(fā)的離線學(xué)習(xí)基本模型如圖1所示。

3 基于HTML5的Web離線技術(shù)的功能與實(shí)現(xiàn)

3.1 功能

基于HTML5的Web離線技術(shù)主要包括以下3個(gè)方面的功能：

1）在線狀態(tài)檢測(cè) HTML5提供了navigator.online屬性和online／offline事件兩種檢測(cè)是否在線的方式，以便在網(wǎng)絡(luò)狀態(tài)發(fā)生變化時(shí)立刻得到通知。

2）離線資源緩存 HTML5需要設(shè)計(jì)者提供一個(gè)Cache Manifest文件。這個(gè)文件列出了所有需要在離線狀態(tài)下使用的資源，瀏覽器會(huì)把這些資源緩存到本地，讓用戶在離線狀態(tài)下繼續(xù)訪問(wèn)Web應(yīng)用。

3）本地?cái)?shù)據(jù)存儲(chǔ) 離線狀態(tài)下，Web平臺(tái)需要對(duì)緩存中的數(shù)據(jù)進(jìn)行存取，以便用戶訪問(wèn)或者在聯(lián)網(wǎng)后同步到服務(wù)器。為了滿足不同的存取要求，HTML5提供了DOM Storage和Web SQL Data－base兩種存儲(chǔ)機(jī)制［4］。在不同的場(chǎng)合需要選擇不同的存儲(chǔ)機(jī)制來(lái)訪問(wèn)數(shù)據(jù)。

圖1 離線學(xué)習(xí)基本模型

3.2 實(shí)現(xiàn)

1）離線學(xué)習(xí)登錄 學(xué)習(xí)者在登錄平臺(tái)時(shí)，根據(jù)實(shí)際情況選擇在線學(xué)習(xí)或者離線學(xué)習(xí)。離線狀態(tài)下，瀏覽器相應(yīng)操作描述如下：瀏覽器請(qǐng)求訪問(wèn)頁(yè)面；若發(fā)現(xiàn)該頁(yè)面已經(jīng)進(jìn)行本地存儲(chǔ)，則使用本地html頁(yè)面；解析本地html頁(yè)面，在本地緩存中提取所需資源。

2）在線學(xué)習(xí)資源的緩存 為了讓整個(gè)Web應(yīng)用程序在沒(méi)有網(wǎng)絡(luò)的狀態(tài)下也能正常工作，必須把構(gòu)成該應(yīng)用的文件存放在本地緩存中。此時(shí)，即使計(jì)算機(jī)沒(méi)有聯(lián)網(wǎng)，也可以通過(guò)訪問(wèn)本地計(jì)算機(jī)上的資源文件來(lái)完成Web應(yīng)用程序提供的相關(guān)服務(wù)。Cache Manifest文件是一個(gè)位于服務(wù)器上的文件，這個(gè)文件列出了所有需要在離線狀態(tài)下使用的資源。在使用Cache Manifest文件時(shí)，首先要對(duì)服務(wù)器進(jìn)行配置，讓所運(yùn)行的服務(wù)器支持text／cache－manifest這個(gè)類型［5］。然后在需要進(jìn)行離線存儲(chǔ)的 Welcome.html文件的＜html＞標(biāo)簽里添加manifest屬性，并指定文件名。當(dāng)學(xué)習(xí)者在線學(xué)習(xí)時(shí)，瀏覽器可以將Cache Manifest文件列出的所有資源文件緩存到本地計(jì)算機(jī)中。Cache Manifest文件中的內(nèi)容如下：

3）離線學(xué)習(xí)資源的本地化存儲(chǔ) 學(xué)習(xí)者在離線狀態(tài)下，需要對(duì)保存在本地緩存中的數(shù)據(jù)進(jìn)行存儲(chǔ)，來(lái)保證將新的學(xué)習(xí)記錄存放在本地?cái)?shù)據(jù)庫(kù)中。HTML5提供的Web SQL Data－base存儲(chǔ)機(jī)制允許用戶在瀏覽器里面建立數(shù)據(jù)庫(kù)，然后將下載服務(wù)器數(shù)據(jù)保存到本地?cái)?shù)據(jù)庫(kù)中，以便需要的時(shí)候直接從本地查詢。學(xué)習(xí)者在完成學(xué)習(xí)任務(wù)，使用導(dǎo)學(xué)平臺(tái)中 “標(biāo)記已經(jīng)學(xué)習(xí)”功能后，瀏覽器就把學(xué)習(xí)進(jìn)度記錄到本地?cái)?shù)據(jù)庫(kù)中。

創(chuàng)建數(shù)據(jù)庫(kù)的方法中4個(gè)參數(shù)分別為數(shù)據(jù)庫(kù)名、版本號(hào)、數(shù)據(jù)庫(kù)的描述和數(shù)據(jù)庫(kù)的大小。在本地?cái)?shù)據(jù)庫(kù)中標(biāo)記學(xué)習(xí)記錄的章節(jié)和時(shí)間的代碼如下［6］：

圖2 同步數(shù)據(jù)更新活動(dòng)圖

4）離線學(xué)習(xí)過(guò)程的同步 服務(wù)器端與客戶端如何實(shí)現(xiàn)同步是離線Web應(yīng)用最關(guān)鍵的地方之一。離線Web應(yīng)用所訪問(wèn)的數(shù)據(jù)有最新數(shù)據(jù)和過(guò)期無(wú)效數(shù)據(jù)之分。同步過(guò)程中的數(shù)據(jù)更新采取的策略如圖2所示。同步模塊中更新本地緩存還是更新數(shù)據(jù)庫(kù)可以通過(guò)檢查數(shù)據(jù)庫(kù)版本是否最新來(lái)完成判斷。更新本地緩存的方法如下：

4 結(jié) 語(yǔ)

基于HTML5開發(fā)的Web應(yīng)用離線功能，在網(wǎng)絡(luò)出現(xiàn)異常的情況下，仍然可以實(shí)現(xiàn)數(shù)據(jù)的交互訪問(wèn)和同步，主要解決了在線學(xué)習(xí)中學(xué)習(xí)者必須有良好的網(wǎng)絡(luò)環(huán)境支持的問(wèn)題，適用于技能訓(xùn)練的需要重復(fù)訓(xùn)練的特征。同時(shí)，Web離線應(yīng)用能夠降低服務(wù)器壓力，在高峰瀏覽期間保證了學(xué)習(xí)者學(xué)習(xí)效率。此外，離線學(xué)習(xí)形式能夠提高學(xué)習(xí)者學(xué)習(xí)的可控性和自主性，為遠(yuǎn)程教育的發(fā)展提供了幫助。

［1］張永瑞，馬文杰 .在線導(dǎo)學(xué)平臺(tái)在多媒體技術(shù)專業(yè)學(xué)生技能訓(xùn)練中的實(shí)踐探索 ［J］.荊楚理工學(xué)院學(xué)報(bào)，2011（7）：23－26.

［2］宋京燕 .遠(yuǎn)程教育中離線學(xué)習(xí)的應(yīng)用研究 ［J］.教師，2013（2）：102－103.

［3］羅大暉，陳娟 .基于HTML5的 Web離線應(yīng)用研究與實(shí)現(xiàn) ［J］.計(jì)算機(jī)應(yīng)用與軟件 ［J］.2012（12）：262－264.

［4］蹇紅梅.WEB平臺(tái)下的基于HTML5標(biāo)準(zhǔn)離線應(yīng)用開發(fā) ［J］.四川理工學(xué)院學(xué)報(bào)，2012（5）：41－44.

［5］Pilgrim M.HTML5：Up and Running［M］.北京：電子工業(yè)出版社，2010.

［6］李娜 .基于RIA架構(gòu)下的多媒體教學(xué)平臺(tái)本地存儲(chǔ)技術(shù)研究 ［J］.產(chǎn)業(yè)與科技論壇，2012（20）：74－76.