基于HTML5的移動(dòng)學(xué)習(xí)平臺(tái)應(yīng)用實(shí)現(xiàn)

郜繼紅

摘 要：隨著網(wǎng)絡(luò)技術(shù)與無(wú)線通信技術(shù)的不斷發(fā)展，教育已經(jīng)不再局限于傳統(tǒng)的教學(xué)模式，更希望通過(guò)看或聽(tīng)的方式來(lái)完成學(xué)習(xí)并獲取知識(shí)。移動(dòng)終端的多樣性給移動(dòng)教學(xué)帶來(lái)許多麻煩，首先需要解決的便是如何使用同一種教學(xué)工具能夠適應(yīng)多種移動(dòng)終端?；贖TML標(biāo)準(zhǔn)的HTML5可以很好地解決這_難題，屬于一種新興的跨平臺(tái)技術(shù)。文章主要介紹HTML5的演變歷史以及學(xué)習(xí)平臺(tái)的整體設(shè)計(jì)，針對(duì)HTML5在移動(dòng)學(xué)習(xí)平臺(tái)中的運(yùn)用優(yōu)勢(shì)做出具體研究。

關(guān)鍵詞：HTML5；移動(dòng)學(xué)習(xí)；實(shí)現(xiàn)

隨著互聯(lián)網(wǎng)絡(luò)的應(yīng)用與普及，教育學(xué)與心理學(xué)的研究在不斷深入，在教育教學(xué)管理中，課堂學(xué)習(xí)和移動(dòng)學(xué)習(xí)相結(jié)合已經(jīng)成了主要趨勢(shì)。學(xué)習(xí)者逐漸傾向于通過(guò)網(wǎng)絡(luò)來(lái)獲取知識(shí)，教育資源也在向數(shù)字化、智能化轉(zhuǎn)變。各種新媒體的出現(xiàn)使當(dāng)今時(shí)代真正變?yōu)槲r(shí)代。在教育領(lǐng)域中，微課也正在興起，推動(dòng)教學(xué)模式的轉(zhuǎn)變。微課作為全新的教學(xué)資源，在課程開(kāi)發(fā)與應(yīng)用中具有非常廣闊的前景。隨著移動(dòng)終端的應(yīng)用范圍逐漸擴(kuò)大，移動(dòng)式學(xué)習(xí)也成了一種先進(jìn)、高校的學(xué)習(xí)手段?；贖TML5的移動(dòng)學(xué)習(xí)平臺(tái)就是為了滿足移動(dòng)化學(xué)習(xí)的需求所設(shè)計(jì)的。具有跨平臺(tái)性的特點(diǎn)，擺脫了原始操作系統(tǒng)對(duì)平臺(tái)的依賴，HTML5技術(shù)可以將信息進(jìn)行交互與共享，不但可以滿足學(xué)習(xí)者自主學(xué)習(xí)的需求，而且還可以輔助教師教學(xué)，提高教學(xué)質(zhì)量。

1 HTML5的歷史演變

HTML5超文本標(biāo)記語(yǔ)言誕生于1989年，經(jīng)歷了重重磨難，但是開(kāi)發(fā)者一直沒(méi)有放棄。1999年，HTML4突破了XML在電子商務(wù)界的壟斷，成為了網(wǎng)絡(luò)開(kāi)發(fā)者的引路標(biāo)。從發(fā)展的角度來(lái)分析，HTML5屬于HTML4的升級(jí)版本，是第一個(gè)將Web作為應(yīng)用開(kāi)發(fā)平臺(tái)的HTML標(biāo)準(zhǔn)。目前，多種電子設(shè)備的應(yīng)用，HTML5的優(yōu)勢(shì)表現(xiàn)得更加明顯，在移動(dòng)學(xué)習(xí)領(lǐng)域的終端應(yīng)用開(kāi)發(fā)中實(shí)現(xiàn)了一次性開(kāi)發(fā)，程序軟件的開(kāi)發(fā)已經(jīng)逐漸受到大家的信賴。HTML5不但運(yùn)用于HTML語(yǔ)言自身，而且還融入了css3以及Javascript等語(yǔ)言的新增功能。運(yùn)用HTML5的網(wǎng)頁(yè)并不需要下載Adobe Flash Player或者Silverlight等插件，就能夠?qū)崿F(xiàn)交互的效果，增強(qiáng)了網(wǎng)頁(yè)的富媒體性。針對(duì)這方面而言，HTML5已經(jīng)從簡(jiǎn)單的語(yǔ)言標(biāo)記化身為Web應(yīng)用開(kāi)發(fā)的先驅(qū)。HTML是近幾年來(lái)Web標(biāo)準(zhǔn)最大的飛躍。與以往版本不同的是，它可以將Web帶入成熟的平臺(tái)，在此平臺(tái)中，視頻、圖像、音頗等都會(huì)被完全標(biāo)準(zhǔn)化。

2 基于HTML5移動(dòng)學(xué)習(xí)平臺(tái)的整體模塊

為了達(dá)到人們對(duì)移動(dòng)學(xué)習(xí)的需求標(biāo)準(zhǔn)，平臺(tái)的整體模塊主要由用戶管理模塊、課程管理模塊、資源管理模塊以及交流學(xué)習(xí)模塊共同組成。通過(guò)用戶管理模塊可以完成用戶注冊(cè)與登錄。課程管理模塊可以對(duì)課程進(jìn)行創(chuàng)建、訂閱以及查詢。資源管理模塊可以對(duì)教學(xué)資源進(jìn)行檢索與上傳，其上傳內(nèi)容包含微課視頻、PPT，教學(xué)文檔等。通過(guò)交流學(xué)習(xí)模塊，學(xué)生與老師之間可以進(jìn)行互動(dòng)，共同探討學(xué)習(xí)中的難題。平臺(tái)框架如圖1所示。

3平臺(tái)主頁(yè)結(jié)構(gòu)

基于HTML5的移動(dòng)教學(xué)平臺(tái)采用MVC模式來(lái)對(duì)框架進(jìn)行設(shè)計(jì)，主要由模型、控制器以及視圖組成，把界面劃分成多個(gè)角色，每個(gè)角色都會(huì)發(fā)揮其自身的功能，MVC模式可以使代碼編寫更加程序化，前端頁(yè)面與服務(wù)端可以同時(shí)進(jìn)行?；贖TML5的移動(dòng)學(xué)習(xí)平臺(tái)主頁(yè)結(jié)構(gòu)如圖2所示。

在平臺(tái)主頁(yè)中，一般涉及的是課程信息，控制器通過(guò)CourseService的getCourseList方法來(lái)獲取課程信息，然后通過(guò)VideoService的getVideoList方法獲取每門課程的課程數(shù)，再通過(guò)TeacherService的getTeachter方法獲取教師信息。視頻播放頁(yè)主要工作任務(wù)是對(duì)所選視頻進(jìn)行播放，在播放的過(guò)程中，可以獲取大家的評(píng)論信息。個(gè)人主頁(yè)中會(huì)顯示用戶的基本信息，控制器通過(guò)UserService調(diào)用getUser方法獲取用戶的基本信息。

4 HTML5的優(yōu)勢(shì)以及在移動(dòng)學(xué)習(xí)中的作用

4.1引入canvas元素

HTML5系統(tǒng)在移動(dòng)學(xué)習(xí)平臺(tái)中的應(yīng)用存在較大優(yōu)勢(shì)，首先，該系統(tǒng)引入canvas元素，可以通過(guò)Javascript在屏幕上進(jìn)行描繪，這種技術(shù)支持圖片的常規(guī)編輯。一些比較難的問(wèn)題通過(guò)用圖表體現(xiàn)出來(lái)之后，會(huì)使問(wèn)題更加簡(jiǎn)單易懂。最后確定比較簡(jiǎn)單的教學(xué)方式，通過(guò)聲形并茂的教學(xué)方法，可以有效激發(fā)學(xué)生的學(xué)習(xí)興趣，提高學(xué)習(xí)效率。

4.2支持離線緩存

在移動(dòng)教育中，用戶的水平參差不齊，對(duì)網(wǎng)站資源的運(yùn)用方式也有所不同，許多用戶都希望把已經(jīng)訪問(wèn)過(guò)的音頻、視頻儲(chǔ)存起來(lái)，以便再次觀看，HTML5軟件系統(tǒng)的開(kāi)發(fā)給離線緩存帶來(lái)了保障。一般不會(huì)受到數(shù)據(jù)規(guī)模的限制，可以把數(shù)據(jù)直接錄入到本機(jī)的ROM中，關(guān)閉瀏覽器再次打開(kāi)也會(huì)保留原有的數(shù)據(jù)，避免文件與數(shù)據(jù)的丟失。這個(gè)功能的研發(fā)不會(huì)占用后臺(tái)資源，減輕硬件壓力，提高移動(dòng)學(xué)習(xí)的流暢性。通過(guò)離線緩存功能的應(yīng)用，學(xué)生們可以真正實(shí)現(xiàn)在線學(xué)習(xí)、離線溫習(xí)的學(xué)習(xí)方法，進(jìn)一步實(shí)現(xiàn)了沒(méi)有網(wǎng)絡(luò)束縛、不需要硬件要求的學(xué)習(xí)平臺(tái)。

4.3視頻、音頻的嵌入

在教育教學(xué)中，視頻、音頻的運(yùn)用可以使教學(xué)方式更加靈活，調(diào)動(dòng)學(xué)生的積極性，原始的系統(tǒng)開(kāi)發(fā)對(duì)多媒體中文字以及音頻的處理比較麻煩，需要采取不同的處理方式，如果需要在頁(yè)面中播放視頻或音頻，往往要通過(guò)Flash插件來(lái)實(shí)現(xiàn)。但是考慮到插件的安全性與性能因素，就需要一套具體的規(guī)范來(lái)使開(kāi)發(fā)者能夠比較方便地在網(wǎng)頁(yè)中嵌入媒體文件。而HTML5在這方面不會(huì)受到外部因素的影響，可以自由添加音頻元素，無(wú)需第三方插件。正是由于這一功能，學(xué)習(xí)者可以對(duì)學(xué)習(xí)方式任意選擇，真正實(shí)現(xiàn)文字與圖片、視頻與音頻的混搭，滿足學(xué)生的多種學(xué)習(xí)方式。只有學(xué)習(xí)形式的多樣化才能給學(xué)習(xí)增添樂(lè)趣，激發(fā)學(xué)習(xí)者的學(xué)習(xí)欲望。

除此之外，HTML5還可以為移動(dòng)平臺(tái)定制新版的表單元素，提供數(shù)值、時(shí)間、日期等的輸入類型。Web worker可以把耗時(shí)長(zhǎng)的任務(wù)交到后臺(tái)處理，使用戶的使用更加順暢。HTML5支持文件的拖拽，可以將外部文檔任意編輯，HTML的諸多優(yōu)勢(shì)將會(huì)為移動(dòng)學(xué)習(xí)工具帶來(lái)全新改革。

5結(jié)語(yǔ)

隨著無(wú)線通信技術(shù)的發(fā)展，全新的教育模式悄然而生，這就是移動(dòng)教育，移動(dòng)教育是在數(shù)字化的學(xué)習(xí)基礎(chǔ)上，結(jié)合移動(dòng)計(jì)算機(jī)技術(shù)，給學(xué)習(xí)者帶來(lái)全新感受。移動(dòng)教學(xué)已經(jīng)成為未來(lái)教學(xué)的主要模式。HTML5移動(dòng)學(xué)習(xí)平臺(tái)，可以實(shí)現(xiàn)音頻、視頻的全面體驗(yàn)，該程序采用統(tǒng)一的語(yǔ)言和數(shù)據(jù)，所以給開(kāi)發(fā)人員帶來(lái)一定便捷，為互聯(lián)網(wǎng)的發(fā)展指引了新方向。對(duì)于學(xué)習(xí)用戶來(lái)講，無(wú)需下載便可以獲取應(yīng)用信息。HTML5標(biāo)準(zhǔn)正在逐漸走向成熟，對(duì)移動(dòng)教學(xué)平臺(tái)的實(shí)施與實(shí)踐提供了現(xiàn)實(shí)意義與前瞻性。

[參考文獻(xiàn)]

[1]李麗平，薛玉倩.基于HTML5微課平臺(tái)的開(kāi)發(fā)與實(shí)現(xiàn)[J].河北軟件職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2017，19 （3）：1-3

[2]趙學(xué)銘，王 剛.基于HTML5的交互式移動(dòng)學(xué)習(xí)平臺(tái)研究[J].現(xiàn)代教育技術(shù)，2016，26 （9）：106-112

[3]譚敏敏.基于HTML5在線編輯平臺(tái)的移動(dòng)學(xué)習(xí)資源構(gòu)建與應(yīng)用研究[J].中國(guó)教育信息化，2016 （19）：40-43.