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

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

　　關(guān)鍵詞: HTML5; 在線學(xué)習(xí); 需求分析; 在線測試

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

　　1 HTML5 優(yōu)勢

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

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

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

　　通過對教師、學(xué)生進(jìn)行走訪，結(jié)合傳統(tǒng)課堂教學(xué)和網(wǎng)絡(luò)教學(xué)，形成系統(tǒng)需求分析。系統(tǒng)用戶有學(xué)生、教師、管理員和游客。一個學(xué)習(xí)網(wǎng)站，主要圍繞的就是這幾類用戶展開的，學(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é)生提供了一個在線測試的模塊，學(xué)生學(xué)習(xí)過后還能進(jìn)行在線測試。教師在網(wǎng)站后臺上傳考試題目之后，學(xué)生在網(wǎng)站前臺頁面可以進(jìn)行測試，點擊首頁的在線測試就可以。如果學(xué)習(xí)過程中出現(xiàn)自己不明白的問題或者自己覺得拿不定主意的問題，還可以通過留言板給老師留言。

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

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

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

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

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

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

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

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

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

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

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

　　本系統(tǒng)主要利用 HTML5 配合 CSS3 來定制統(tǒng)一的頁面色彩風(fēng)格，建立頁面字體，明確主體維度，定做頁面主體。通過 HTML5 提供的和標(biāo)簽實現(xiàn)影音頻播放功能。[4]可以根據(jù)視頻課程樣式建立自定義媒體播放模塊，增加自定義控件。

　　5 總結(jié)

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

　　參考文獻(xiàn):

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

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

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

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

　　項目基金: 山東協(xié)和學(xué)院實驗室項目“基于 HTML5 的在線學(xué)習(xí)系統(tǒng)的設(shè)計與實現(xiàn)”( 編號: 2018SYKF43)

　　作者簡介: 李兆翠( 1980-) ，女，山東莒南人，碩士，副教授，主要研究方向為計算機軟件工程。

　　《基于HTML5的在線學(xué)習(xí)系統(tǒng)的設(shè)計與實現(xiàn)》來源：《科技風(fēng)》2018年12期，作者：李兆翠。

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

上一篇：基于微信小程序的數(shù)據(jù)結(jié)構(gòu)學(xué)習(xí)平臺設(shè)計

下一篇：基于PLC的數(shù)控機床電氣控制