基于HTML5的在線學(xué)習(xí)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

摘 要：在線課程學(xué)習(xí)網(wǎng)站的發(fā)展迅速，吸引了廣大用戶?；贖TML5的在線學(xué)習(xí)系統(tǒng)經(jīng)過(guò)需求分析、設(shè)計(jì)、編程等過(guò)程實(shí)現(xiàn)，它將文字、圖片、音頻、視頻、課件、動(dòng)畫(huà)等教學(xué)資源融合在一起，配合在線留言、論壇等互動(dòng)學(xué)習(xí)活動(dòng)讓在線學(xué)習(xí)功能更加豐富。豐富的知識(shí)內(nèi)容的呈現(xiàn)形式和互動(dòng)學(xué)習(xí)活動(dòng)更加吸引學(xué)習(xí)者參與到在線學(xué)習(xí)中，享受學(xué)習(xí)的樂(lè)趣，提高學(xué)習(xí)效率。

關(guān)鍵詞：HTML5；在線學(xué)習(xí)；需求分析；在線測(cè)試

目前在線課程學(xué)習(xí)網(wǎng)站的發(fā)展也是非常的迅速，它的出現(xiàn)吸引大量用戶，滿足了用戶的移動(dòng)學(xué)習(xí)要求。隨著流媒體技術(shù)的發(fā)展，通過(guò)多媒體技術(shù)將文字、圖片、音頻、視頻、課件、動(dòng)畫(huà)等教學(xué)資源融合在一起讓學(xué)習(xí)內(nèi)容表現(xiàn)更加生動(dòng)，同時(shí)配合在線留言、論壇等互動(dòng)學(xué)習(xí)活動(dòng)讓在線學(xué)習(xí)功能更加豐富。[1]用戶不僅可以瀏覽文檔，觀看教學(xué)視頻、教學(xué)課件，還可以進(jìn)行在線練習(xí)、在線考試。在線課程學(xué)習(xí)網(wǎng)站為廣大用戶們提供了十分便利的條件。

1 HTML5優(yōu)勢(shì)

網(wǎng)站的建設(shè)大部分采用B/S 架構(gòu)，壓力聚集在服務(wù)器端，這就需要平衡客戶端和服務(wù)器端的壓力。通過(guò)HTML5與JavaScript相結(jié)合使用將底層的大多數(shù)邏輯處理轉(zhuǎn)移到客戶端，服務(wù)器端只提供少量邏輯處理和數(shù)據(jù)接口，解決 B/S 架構(gòu)服務(wù)器壓力問(wèn)題。[2]

HTML5具有動(dòng)畫(huà)特性、多媒體特性，可實(shí)現(xiàn)文字、圖片、表格、音頻、視頻、色彩的有機(jī)結(jié)合。HTML5新增的標(biāo)簽?zāi)苤苯又С忠曨l、音頻等多媒體元素的在線呈現(xiàn)，可以替代部分Flash和Silverlight能夠?qū)崿F(xiàn)的功能，并且具有更好的處理效率。[3]同時(shí)配合CSS3支持字體嵌入、版面排版以及動(dòng)畫(huà)功能，讓HTML5在線課程的學(xué)習(xí)內(nèi)容的表現(xiàn)形式變得更加豐富，能極大吸引學(xué)習(xí)者的注意，增強(qiáng)學(xué)習(xí)效果。同時(shí)HTML5還具有較好的學(xué)習(xí)交互、支持跨平臺(tái)學(xué)習(xí)、離線學(xué)習(xí)等特性。

2 系統(tǒng)需求分析

通過(guò)對(duì)教師、學(xué)生進(jìn)行走訪，結(jié)合傳統(tǒng)課堂教學(xué)和網(wǎng)絡(luò)教學(xué)，形成系統(tǒng)需求分析。系統(tǒng)用戶有學(xué)生、教師、管理員和游客。一個(gè)學(xué)習(xí)網(wǎng)站，主要圍繞的就是這幾類用戶展開(kāi)的，學(xué)生主要是進(jìn)入網(wǎng)站進(jìn)行學(xué)習(xí)，教師就負(fù)責(zé)上傳課件、文檔視頻資源，供學(xué)生查看，管理員就負(fù)責(zé)管理課程的信息以及教師的信息。

在線課程學(xué)習(xí)網(wǎng)站中，學(xué)生用戶可以進(jìn)行登錄網(wǎng)站，進(jìn)入網(wǎng)站后，學(xué)生可以根據(jù)自己的喜好去選擇文檔或者視頻方式進(jìn)行學(xué)習(xí)，也可以將自己需要的文檔進(jìn)行下載，這樣下次即便不進(jìn)入網(wǎng)站也是不影響查看資料的。視頻資源是可以在線觀看的，只要連接了網(wǎng)絡(luò)，能夠上網(wǎng)就可以看視頻，邊看邊學(xué)。網(wǎng)站還為學(xué)生提供了一個(gè)在線測(cè)試的模塊，學(xué)生學(xué)習(xí)過(guò)后還能進(jìn)行在線測(cè)試。教師在網(wǎng)站后臺(tái)上傳考試題目之后，學(xué)生在網(wǎng)站前臺(tái)頁(yè)面可以進(jìn)行測(cè)試，點(diǎn)擊首頁(yè)的在線測(cè)試就可以。如果學(xué)習(xí)過(guò)程中出現(xiàn)自己不明白的問(wèn)題或者自己覺(jué)得拿不定主意的問(wèn)題，還可以通過(guò)留言板給老師留言。

教師用戶需要點(diǎn)擊網(wǎng)站首頁(yè)，輸入用戶名和密碼，點(diǎn)擊登錄，進(jìn)入網(wǎng)站的后臺(tái)，可以上傳文檔課件以及視頻等教學(xué)資源，并可對(duì)其進(jìn)行添加、刪除、修改等操作。教師的試題管理可以修改刪除已發(fā)布的試題。教師也可以根據(jù)留言板學(xué)生反映的情況，以及提出的改進(jìn)建議更加完善一下資源信息。

管理員的登錄也是進(jìn)入網(wǎng)站首頁(yè)之后，點(diǎn)擊一下網(wǎng)站底部的登錄后臺(tái)，輸入用戶名和密碼，就可以登錄后臺(tái)。登錄后臺(tái)之后，可以對(duì)課程信息進(jìn)行操作，還有對(duì)教師隊(duì)伍的管理，簡(jiǎn)單便捷。

游客打開(kāi)網(wǎng)站后可以查看網(wǎng)站公告、論壇以及公共課程資源。

3 系統(tǒng)設(shè)計(jì)

在線學(xué)習(xí)系統(tǒng)的總體設(shè)計(jì)分為學(xué)生、教師、管理員和游客。

學(xué)生用戶主要實(shí)現(xiàn)的功能有：注冊(cè)、登錄、觀看視頻、查閱課件、文檔資源下載、在線測(cè)試、在線留言。自己遇到難解的問(wèn)題，就在留言板給教師留言，或者自己覺(jué)得哪些地方需要完善，需要更加改進(jìn)一下，都可以給教師留言，提一下自己的建議。

教師用戶主要實(shí)現(xiàn)的功能有：注冊(cè)、登錄后臺(tái)，教師用戶登錄后臺(tái)后就可以上傳發(fā)布課件，進(jìn)行在線答疑，回答學(xué)生在留言板中提出的問(wèn)題，還可以上傳發(fā)布教學(xué)視頻。

管理員主要需要實(shí)現(xiàn)的功能有：登錄后臺(tái)，管理員用賬號(hào)密碼登錄后臺(tái)后就可以管理課程信息、管理教師信息、管理用戶信息。

游客：面向互聯(lián)網(wǎng)上的所有用戶，擁有觀看公共課程、公告、論壇的權(quán)限。

4 系統(tǒng)實(shí)現(xiàn)

系統(tǒng)設(shè)計(jì)分為前臺(tái)和后臺(tái)，前臺(tái)是系統(tǒng)與用戶的交互界面，為用戶提供課程視頻、學(xué)習(xí)課件、資源下載、在線測(cè)試、在線留言等功能。用戶注冊(cè)后獲得相應(yīng)的用戶權(quán)限，沒(méi)有注冊(cè)的用戶只能以游客的身份進(jìn)行訪問(wèn)，只能觀看公共課程部分。在登錄的過(guò)程中用戶選擇學(xué)生、教師和管理員這三個(gè)角色登錄，系統(tǒng)會(huì)在數(shù)據(jù)表中進(jìn)行查詢驗(yàn)證。

本系統(tǒng)主要利用HTML5配合CSS3來(lái)定制統(tǒng)一的頁(yè)面色彩風(fēng)格，建立頁(yè)面字體，明確主體維度，定做頁(yè)面主體。通過(guò)HTML5提供的

5 總結(jié)

目前在線課程學(xué)習(xí)網(wǎng)站的發(fā)展迅速，吸引了廣大用戶?；贖TML5的在線學(xué)習(xí)系統(tǒng)經(jīng)過(guò)需求分析、設(shè)計(jì)將其實(shí)現(xiàn)，它將文字、圖片、音頻、視頻、課件、動(dòng)畫(huà)等教學(xué)資源融合在一起，讓學(xué)習(xí)內(nèi)容表現(xiàn)更加生動(dòng)，同時(shí)配合在線留言、論壇等互動(dòng)學(xué)習(xí)活動(dòng)讓在線學(xué)習(xí)功能更加豐富。豐富的知識(shí)內(nèi)容的呈現(xiàn)形式和互動(dòng)學(xué)習(xí)活動(dòng)更加吸引學(xué)習(xí)者參與到在線學(xué)習(xí)中，享受學(xué)習(xí)的樂(lè)趣，提高學(xué)習(xí)效率。

參考文獻(xiàn)：

[1]郜繼紅.基于HTML5的移動(dòng)學(xué)習(xí)平臺(tái)應(yīng)用實(shí)現(xiàn)[J].現(xiàn)代鹽化工，2017，12（6）：103-104.

[2]彭巍.基于HTML5的網(wǎng)絡(luò)課程教學(xué)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].吉林大學(xué)，2015.

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

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

作者簡(jiǎn)介：李兆翠（1980-），女，山東莒南人，碩士，副教授，主要研究方向?yàn)橛?jì)算機(jī)軟件工程。