曾昭江 湯懷
摘要:傳統(tǒng)式的針對(duì)PC系統(tǒng)的精品課程、在線學(xué)習(xí)平臺(tái)已無(wú)法適應(yīng)以手機(jī)用戶為代表的移動(dòng)化學(xué)習(xí)者。搭建移動(dòng)化學(xué)習(xí)平臺(tái),需對(duì)頁(yè)面重新部署,使用HTML5語(yǔ)言、jQuery Mobile移動(dòng)開發(fā)框架、Web存儲(chǔ)、工作線程、離線存儲(chǔ)等技術(shù),高效構(gòu)建校園移動(dòng)化學(xué)習(xí)平臺(tái)的WebAPP。
關(guān)鍵詞:HTML5;jQuery Mobile;移動(dòng)化學(xué)習(xí)平臺(tái);Web存儲(chǔ);離線存儲(chǔ)
中圖分類號(hào):G642 文獻(xiàn)標(biāo)識(shí)碼:A 文章編號(hào):1009-3044(2015)08-0162-02
1 前言
隨著校園信息化平臺(tái)的逐步推進(jìn),校園精品課程、公開課、示范課、在線學(xué)習(xí)平臺(tái)等教學(xué)資源已在校園網(wǎng)站中上線,豐富了學(xué)生的課外學(xué)習(xí)。學(xué)生可通過PC終端的瀏覽器直接打開平臺(tái)進(jìn)行學(xué)習(xí)。但隨著移動(dòng)設(shè)備的普及,學(xué)生使用手機(jī)上網(wǎng)進(jìn)行網(wǎng)上學(xué)習(xí)的頻繁越來(lái)越高,而手機(jī)瀏覽器因?yàn)槌叽绾头直媛实牟煌?,傳統(tǒng)網(wǎng)頁(yè)已無(wú)法適應(yīng)手機(jī)用戶的訪問。而隨著校園無(wú)線局域網(wǎng)的普及,以及移動(dòng)終端對(duì)圖像、音頻視頻的強(qiáng)大處理能力,基于智能手機(jī)的校園移動(dòng)化在線學(xué)習(xí)平臺(tái),恰能為學(xué)習(xí)者提供一個(gè)高效、隨時(shí)、快捷的學(xué)習(xí)途徑。
2 系統(tǒng)分析
校園移動(dòng)化學(xué)習(xí)平臺(tái)作為傳統(tǒng)網(wǎng)絡(luò)學(xué)習(xí)平臺(tái)的一種補(bǔ)充,為方便管理,移動(dòng)學(xué)習(xí)平臺(tái)充分利用傳統(tǒng)網(wǎng)絡(luò)學(xué)習(xí)平臺(tái)的數(shù)據(jù),實(shí)現(xiàn)資源統(tǒng)一管理,提高開發(fā)效率。移動(dòng)學(xué)習(xí)平臺(tái)的前端設(shè)計(jì),只需設(shè)計(jì)一個(gè)提供移動(dòng)設(shè)備訪問的訪問界面??紤]到手機(jī)的性能問題和學(xué)習(xí)者的時(shí)間分散問題,移動(dòng)學(xué)習(xí)平臺(tái)的資源建設(shè)需遵守如下原則:一、能適應(yīng)多種移動(dòng)化設(shè)備,能確保在各種內(nèi)核的瀏覽器中瀏覽出一致的效果;二、能根據(jù)學(xué)習(xí)者的需要提供,和所處的環(huán)境選擇合適的教學(xué)資源,確保資源的多樣化,并對(duì)資源、網(wǎng)站站點(diǎn)進(jìn)行實(shí)時(shí)管理;三、學(xué)習(xí)平臺(tái)操作簡(jiǎn)單明了,方便各種層次的學(xué)生和各類型的手機(jī)訪問;四、平臺(tái)的資源能在用戶離線的情況下,能繼續(xù)使用。系統(tǒng)的總體架構(gòu)如圖1所示:
3 開發(fā)技術(shù)
3.1 jQuery Mobile
jQuery Mobile 是一個(gè)免費(fèi)的、開源的、跨平臺(tái)的移動(dòng)Web應(yīng)用輕易級(jí)開發(fā)框架,是基于HTML5的快速開發(fā)工具,具有簡(jiǎn)單高效的特點(diǎn)。jQuery Mobile是jQuery在手機(jī)和平板上的版本,包含創(chuàng)建移動(dòng)應(yīng)用的Web UI整體開發(fā)框架。它能夠讓沒有美工基礎(chǔ)的開發(fā)者在短時(shí)間內(nèi)做好完美的界設(shè)計(jì),并且支持主流的移動(dòng)平臺(tái)。它既包含構(gòu)建完整WebApp所需要的布局、控件、插件、頁(yè)面元素,還擁有漸進(jìn)式增強(qiáng)的主題界面、簡(jiǎn)單但有條理的標(biāo)記語(yǔ)言規(guī)范和自適應(yīng)布局等。
3.2 HTML5
HTML5 作為新一代的通用標(biāo)準(zhǔn)標(biāo)記語(yǔ)言,添加了很多新元素及功能,比如: 圖形的繪制、音視頻自由嵌入多媒體內(nèi)容,更好的頁(yè)面結(jié)構(gòu)有助于小屏幕設(shè)備和視障人士使用,API拖放元素、地理位置隨時(shí)隨地定位、網(wǎng)頁(yè)應(yīng)用程序緩存,豐富的交互提升了用戶體驗(yàn)。
4 平臺(tái)主要模塊的實(shí)現(xiàn)
前臺(tái)頁(yè)面整體使用jQuery Mobile ,頁(yè)面必須聲明DOCTYPE為HTML5,然后將相關(guān)的CSS文件、jQuery類庫(kù)文件和jQuery Mobile文件引入頁(yè)面的head中。這三個(gè)文件可以下載至本地來(lái)引用,也可以使用cdn在線引用。因在不同的尺寸的設(shè)備訪問,需要設(shè)置meta標(biāo)記的viewport屬性來(lái)適應(yīng)不同的移動(dòng)設(shè)備,將width設(shè)置為device-width,使頁(yè)面的寬度與設(shè)備的寬度保持一致。各個(gè)頁(yè)面中編寫好head區(qū)域的代碼后,使用data-role即可設(shè)置各個(gè)元素,用較少的代碼即可在移動(dòng)設(shè)備上實(shí)現(xiàn)豐富的效果。
4.1 全屏導(dǎo)航欄的實(shí)現(xiàn)
在手機(jī)屏幕有限的情況下,實(shí)現(xiàn)更多的功能效果,使用jQuery Mobile中的navbar控件,即可實(shí)現(xiàn)與原生APP類似的頭部欄和尾部欄的導(dǎo)航效果。在navbar標(biāo)簽中使用標(biāo)記,加上一些可選的圖標(biāo),可以讓標(biāo)簽中的內(nèi)容自動(dòng)渲染為按鈕的效果。然后將屬性data-position設(shè)備為fixed即可將導(dǎo)航固定,而將data-fullscreen設(shè)置為true,可以使頁(yè)面內(nèi)其他內(nèi)容忽略工具欄的存在而實(shí)現(xiàn)全屏顯示。
4.2 使用Web Storage實(shí)現(xiàn)數(shù)據(jù)本地存儲(chǔ)
在HTML4中使用Cookies存儲(chǔ)數(shù)據(jù)存在一些不足,在HTML5中提供了一項(xiàng)新的Web 客戶端存儲(chǔ)數(shù)據(jù)的功能,即Web Storage。Web Storage能在客戶端保存大量的數(shù)據(jù),并且訪問速度快,因此在本學(xué)習(xí)平臺(tái)中用于在客戶端保存學(xué)生的個(gè)人信息、課程信息和學(xué)習(xí)狀態(tài)等。Web Storage有兩種形式存儲(chǔ)數(shù)據(jù):一種將數(shù)據(jù)臨時(shí)存儲(chǔ)在seesion中的sessionStorage(會(huì)話存儲(chǔ));一種為永久性存在客戶端硬件中的localStorage(本地存儲(chǔ))。Web Storage使用“鍵值對(duì)”將數(shù)據(jù)保存在用戶端,當(dāng)頁(yè)面重新被加載時(shí),數(shù)據(jù)即可直接在客戶端被讀取出來(lái),無(wú)需通過服務(wù)器的請(qǐng)求,使得操作數(shù)據(jù)變得更簡(jiǎn)單。在本系統(tǒng)開發(fā)中使用localStorage,將學(xué)生的基本信息以JSON的數(shù)據(jù)形式保存于客戶端,瀏覽器關(guān)閉后數(shù)據(jù)仍然存在,下次打開瀏覽器時(shí),通過localStorage.getItem即可獲得相應(yīng)數(shù)據(jù)。
4.3 使用工作多線程實(shí)現(xiàn)后臺(tái)運(yùn)行
在 HTML5 中提出了工作線程(Web Worker)的概念,并且規(guī)范出 Web Worker 的三大主要特征:能夠長(zhǎng)時(shí)間運(yùn)行(響應(yīng)),理想的啟動(dòng)性能以及理想的內(nèi)存消耗。它允許在 Web 程序中并發(fā)執(zhí)行多個(gè) JavaScript 腳本,每個(gè)腳本執(zhí)行流都稱為一個(gè)線程,彼此間互相獨(dú)立,并且有瀏覽器中的 JavaScript 引擎負(fù)責(zé)管理。在本移動(dòng)化學(xué)習(xí)平臺(tái)上,學(xué)生在完成作業(yè)或測(cè)試的實(shí)時(shí)分?jǐn)?shù),以及學(xué)生學(xué)習(xí)課程的進(jìn)度,需要即時(shí)顯示。而這些功能需要執(zhí)行的時(shí)間比較長(zhǎng),為不影響用戶的操作,這些功能使用Web Worker來(lái)完成,從而提高頁(yè)面的性能。例如,在作業(yè)測(cè)試功能中,定義兩個(gè)工作線程,一個(gè)負(fù)責(zé)計(jì)算實(shí)時(shí)分?jǐn)?shù)和正確率,一個(gè)線程完成數(shù)據(jù)的傳遞,將計(jì)算結(jié)果傳回頁(yè)面,兩個(gè)線程同時(shí)工作,使到在線測(cè)試頁(yè)面不會(huì)中斷。在處理多個(gè)用戶數(shù)據(jù)時(shí),還可以使用共享線程來(lái)實(shí)現(xiàn)。
4.4 使用離線存儲(chǔ)實(shí)現(xiàn)離線學(xué)習(xí)
HTML5離線存儲(chǔ),以用程序的網(wǎng)絡(luò)瀏覽器將從名單文件中讀取URL列表,下載這些資源,將他們?cè)诒镜鼐彺妫⒆詣?dòng)在這些本地副本改變時(shí)保持他們更新。當(dāng)嘗試在沒有網(wǎng)絡(luò)連接時(shí)訪問網(wǎng)絡(luò)應(yīng)用程序,網(wǎng)絡(luò)瀏覽器將自動(dòng)切換并使用本地資源代替,而不需要再次重復(fù)下載這些資源,也可為用戶節(jié)省數(shù)據(jù)流量。學(xué)生在學(xué)習(xí)系統(tǒng)中訪問某一教學(xué)資源時(shí),離線Web應(yīng)用程序會(huì)創(chuàng)建一個(gè)文件列表保存于cache-manifest文件。當(dāng)Web瀏覽器處于離線狀態(tài)時(shí),系統(tǒng)將訪問緩存于用戶本地的資源。需要通過兩個(gè)步驟將應(yīng)用程序改為離線應(yīng)用程序:首先創(chuàng)建一個(gè)包括應(yīng)用程序用到的所有文件的緩存清單(包括圖像、HTML、CSS、Javascript);然后通過