學習平臺前端設計與實現(xiàn)

蔣凌燕

摘要

學習平臺主要用來提供學習資源和安排任務，為用戶提供交互性的學習模式，學生學習時按需要使用不同的模塊完成自己的學習過程。學習平臺的前端采用HTML5、Javascript、CSS技術和BootStrap前端框架，設計出了登錄前主頁、學生主頁、教師主頁、任務頁面、提問區(qū)、交流區(qū)等等，布局為簡單明快的T型和F型，整體風格統(tǒng)一。根據(jù)平臺的用戶類別，設計實現(xiàn)了不同的主頁，將用戶最關注的內(nèi)容放在網(wǎng)頁的中心部分，兼顧到學生的使用習慣來安排學習任務的展示、完成過程和評價過程。

【關鍵詞】學習平臺 前端設計 BootStrap

在網(wǎng)絡和移動終端普及的環(huán)境中學習平臺可以提供對于學生學習過程和學習效率的關注，對學生的知識資源獲取、學習過程的進度、學生之間的互動互助、成果的展示等等提供了一個良好的在線學習環(huán)境，滿足學生、教師和管理員的使用需求。主要分課程和任務模塊、交流模塊、用戶信息模塊：課程與任務模塊提供學習任務的安排、瀏覽、提交、搜索功能;交流模塊分成提問區(qū)與主題式交流區(qū);用戶信息模塊提供教師、學生和管理員的相關數(shù)據(jù)信息功能。

1 前端技術

1.1 基礎技術

學習平臺的前端頁面使用了基礎的HTML5、Javascript、CSS技術，HTML5用于定義頁面標記，并通過添加文本節(jié)點顯示內(nèi)容，Javascfipt作為內(nèi)嵌的腳本語言實現(xiàn)用戶和網(wǎng)頁的動態(tài)交互，CSS用于完成頁面標記的布局和格式設置。

1.2 BootStrap框架技術

BootStrap框架技術是在已有的基本前端技術基礎上，將預先編寫好的具有功能的標記組件化，從而以響應式布局來適應多種終端設備的環(huán)境，學習平臺使用了nav導航條組件、carousel走馬燈組件、media媒體對象組件、modal模態(tài)框組件、tablist多級標簽頁組件、panel面板等組件。

2 課程和任務模塊

2.1 登錄前主頁

主頁index.html供用戶登錄前使用，分為幾個部分顯示課程列表、展示優(yōu)秀作品以及最新任務，整體呈現(xiàn)F型，為最常用的頁面布局方式，使用bootstrap的柵格組件，將頁面分隔成兩行多列

第一行中放置nav標記定義的導航條，其中包括課程、問答區(qū)、優(yōu)秀作品展示區(qū)、任務區(qū)等的鏈接和供用戶使用的搜索表單（包含輸入文本框及提交按鈕）。第二行分左中右三個部分，分別是課程、任務展示區(qū)和登錄與注冊。左邊區(qū)塊顯示熱門課程區(qū)使用list-group組件，用戶在課程按鈕上點擊時會顯示不同的顏色來表示選中，同時課程區(qū)對應的div標記使用了rol屬性并賦值為tablist，在其后通過一個隱藏的div來定義標簽頁內(nèi)容，list-group組件和tab-content組件一起完成了多級標簽頁的創(chuàng)建。中間部分分為上下兩個部分，上面是一個carousel組件，以走馬燈的方式顯示圖片，用于顯示最新的學生完成學習任務的成果，下面使用media媒體對象組件，顯示最新的任務信息，media組間中左邊為圖片而右邊為標題和內(nèi)容。登錄與注冊按鈕布置在最右邊的區(qū)域，使用btn-outline-primary類型，呈現(xiàn)淡藍色邊框，鼠標懸停于按鈕上時變化為藍色，用戶使用鼠標點擊登錄框后顯示modal模態(tài)框組件，提供帶遮罩的彈出層的來顯示登錄框體，如圖1所示。

2.2 教師的課程信息頁面

教師的課程信息頁面中顯示了課程相關信息包括課程名、班級名稱、班級人數(shù)和任務數(shù)目，呈現(xiàn)網(wǎng)格狀，使用了小型面板組件panel填充每一個單元，在面板的head部分使用柵格分成兩個左右兩格，content部分同樣如此課程單元格還提供鏈接，顯示當前的任務列表。

2.3 學生主頁

學生主頁主要顯示學生所學的課程和相關的任務信息，呈現(xiàn)F型布局，在頁面的上部放置與主頁類似導航條，左側(cè)顯示當前課程列表，中間部分顯示當前的任務信息，和左側(cè)課程列表組合在一起形成標簽頁組件，通過綁定用戶單擊課程的事件處理，從而在一個頁面中可以顯示多門課程的任務信息，減少界面切換的次數(shù)。當前任務信息的顯示使用panel面板組件創(chuàng)建整體外框，在panel content面板內(nèi)容部分添加類屬性為table-striped的表格用于顯示具體的任務信息，其中任務的完成的進度狀態(tài)使用progress進度條組件，通過設置寬度表示進度百分比，如圖2所示。

2.4 學生課程任務區(qū)

學生課程任務區(qū)集中顯示當前課程和最新的任務已經(jīng)有反饋需要修改的任務，采用反F布局，頁面頂端導航條中提供與學生有關的課程、任務、交流、提問、個人信息以及模糊搜索欄等。課程列表在右側(cè)，按時間順序排列，最新課程顯示在第一行。中間部分作為主體按課程分欄顯示任務信息，包括任務名、任務開始的時間/結束的時間，任務的當前進度，班級當前任務進度等內(nèi)容。

3 交流模塊

3.1 提問區(qū)

提問區(qū)采用T型布局，最頂端是和主頁相似的導航條，主體部分用于顯示提問標題、提問內(nèi)容和回答的標題及內(nèi)容，是采用bootstrap4提供的Collapse組件中的一種，Accordion手風琴組件。分為兩個部分，提問信息放在class屬性為card的div中，回答信息放在class屬性為collapse的div中。提問信息塊中左側(cè)包含圖片、標題、內(nèi)容，右側(cè)包含顯示提問被查看次數(shù)的熱度和可展開收起的云狀按鍵。整體頁面如圖3所示。

3.2 交流區(qū)

交流區(qū)采用反F布局，當前熱門話題顯示在右邊列表中，按話題的參與人數(shù)和發(fā)表時間排列，左邊顯示主題/板塊分類信息，板塊按課程分類，主題按任務分類。中間主體部分顯示話題標題、內(nèi)容和回復，話題信息在頁面中以樹狀結構分層次組織，每一分支均可以單獨回復，多個話題按時間排列，當有最新回復時會排列到前面。除了任務和課程相關的交流外還有單獨的灌水閑聊區(qū)和圖片區(qū)，供在學習閑暇時使用。

4 用戶信息模塊

用戶分為三種，有管理員、教師、學生，教師的用戶信息頁面主要功能有基本信息顯示與修改、總體的課程與任務的統(tǒng)計表、當前課程/班級的任務總體統(tǒng)計情況;學生的用戶信息頁面除了基本信息外還有其參與課程、任務、交流、提問等的統(tǒng)計信息和相關信息頁面鏈接，顯示了學生所有參與的學習活動的情況。管理員的信息管理頁面包含用戶管理、課程信息管理、任務信息管理、交流相關的提問和話題、板塊等的管理功能。

5 總結

學習平臺為教師和學生課程內(nèi)外提供教與學輔助功能，教師可以充分利用平臺功能為學生提供教學資源和學習輔助，并獲取學生學習和交流的具體情況，了解任務的進展情況和難點，學生使用學習中心的課程任務模塊，獲得各種各樣的資源，可以上傳教師所布置任務和活動的成果，得到教師的修改或意見反饋，除此之外，還可使用學習中心的交流互助模塊開展交流活動，增強參與感，在學習過程中學生之間的互助也得以加強。多終端協(xié)作學習平臺頁面主要采用符合用戶瀏覽習慣的F型和重點突出的T型，基于異構網(wǎng)絡的信息交互方式適應當前的互聯(lián)網(wǎng)環(huán)境來提供學習資料和互助交流。

參考文獻

[1]杜艷美.基于web前端的性能優(yōu)化框架模型研究（D].西南科技大學，2018.

[2]史志騰，楊保華.基于React框架的智慧校園的前端開發(fā)設計[J].電腦知識與技術，2018，14（22）：208-209.

[3]危華明，陳積常，汪小威.基于HTML5+CSS3.0的響應式網(wǎng)站前端設計與實現(xiàn)[J].福建電腦，2018，34（05）：15+31.

[4]于圣彬.基于HTML5技術下移動Web前端設計與開發(fā)的研究[J].中國新通信，2018，20（04）：47.

[5]李夏君.使用Bootstrap實現(xiàn)響應式布局[J].信息與電腦（理論版），2017（13）：24-25.

[6]謝印芬基于微信公眾平臺的碎片化學習模式研究[J].教育現(xiàn)代化，2018（22）.