基于移動設(shè)備的實(shí)訓(xùn)互動管理平臺前端設(shè)計(jì)與實(shí)現(xiàn)

趙 衛(wèi) 東

(滁州職業(yè)技術(shù)學(xué)院信息工程系， 安徽 滁州 239000)

實(shí)訓(xùn)教學(xué)是培養(yǎng)學(xué)生實(shí)踐創(chuàng)新能力的關(guān)鍵環(huán)節(jié)。優(yōu)化實(shí)訓(xùn)教學(xué)資源，改進(jìn)實(shí)訓(xùn)教學(xué)模式，需要有良好的平臺等技術(shù)手段的支撐。我國高職院校的實(shí)訓(xùn)教學(xué)管理系統(tǒng)的研發(fā)相對滯后，實(shí)訓(xùn)教學(xué)存在主觀隨意性較大、內(nèi)容不夠豐富、缺乏企業(yè)元素、缺乏互動性、過程管理不夠到位等問題。近年來，一些專家學(xué)者研究開發(fā)出了相應(yīng)的實(shí)習(xí)實(shí)訓(xùn)管理系統(tǒng)，作了一些有益的嘗試。如孫貴賢等人以實(shí)體課堂中的互動功能為參照目標(biāo)，開發(fā)了基于多媒體技術(shù)的遠(yuǎn)程實(shí)訓(xùn)平臺，學(xué)生可以通過此平臺進(jìn)行遠(yuǎn)程實(shí)驗(yàn)，獲得實(shí)訓(xùn)指導(dǎo)[1]。苗森等人研究開發(fā)了基于校企互動的網(wǎng)絡(luò)貿(mào)易實(shí)訓(xùn)平臺，改進(jìn)了學(xué)生實(shí)踐的途徑和師資培養(yǎng)模式[2]。

手機(jī)、平板電腦等移動通信設(shè)備現(xiàn)在應(yīng)用廣泛，獲取信息方便快捷，大學(xué)生群體中幾乎每個人都有一部手機(jī)或平板電腦。構(gòu)建移動設(shè)備參與的實(shí)訓(xùn)教學(xué)環(huán)境，可以推動教師積極改進(jìn)教學(xué)方式，不斷豐富教學(xué)資源，同時可以引導(dǎo)學(xué)生使用移動設(shè)備進(jìn)行自主學(xué)習(xí)和參與教學(xué)互動，從而改善實(shí)訓(xùn)教學(xué)效果，提高實(shí)訓(xùn)教學(xué)效率。為此，我們研究設(shè)計(jì)了基于移動設(shè)備的實(shí)訓(xùn)互動管理平臺。

1 平臺功能及系統(tǒng)架構(gòu)

1.1 功能模塊

實(shí)訓(xùn)互動管理平臺的設(shè)計(jì)目標(biāo)是：適應(yīng)實(shí)訓(xùn)實(shí)踐教學(xué)課程設(shè)置和管理需要，實(shí)現(xiàn)現(xiàn)場或遠(yuǎn)程實(shí)訓(xùn)教學(xué)的互動，收集和分析學(xué)習(xí)者反饋信息。平臺主要包括四大功能模塊，分別為頂崗實(shí)習(xí)管理、畢業(yè)設(shè)計(jì)管理、校內(nèi)實(shí)踐教學(xué)管理和校外實(shí)訓(xùn)基地管理。其中，頂崗實(shí)習(xí)管理、畢業(yè)設(shè)計(jì)管理和校外實(shí)訓(xùn)基地管理三大功能模塊，主要實(shí)現(xiàn)對學(xué)生實(shí)訓(xùn)過程、實(shí)訓(xùn)成績、實(shí)訓(xùn)基地?cái)?shù)據(jù)的登記和增刪改查操作；校內(nèi)實(shí)踐教學(xué)管理模塊，具有支持教師在現(xiàn)場或遠(yuǎn)程進(jìn)行實(shí)訓(xùn)教學(xué)的功能，教師和學(xué)生可以通過該模塊在課下進(jìn)行交流討論。校內(nèi)實(shí)踐教學(xué)管理模塊包括以下5個子功能模塊：

(1) 學(xué)習(xí)中心。教師可以上傳實(shí)訓(xùn)指導(dǎo)書、教學(xué)視頻文件等資料到學(xué)習(xí)中心，學(xué)生可以在線多次查看其中的所有資料。

(2) 在線課堂。在線課堂是教師進(jìn)行在線實(shí)訓(xùn)教學(xué)的場所。教師可以在此發(fā)布測驗(yàn)題、分發(fā)問卷、分組建立任務(wù)等。學(xué)生可以遠(yuǎn)程參與在線課堂，可以多次觀看教師實(shí)訓(xùn)操作過程，并進(jìn)行實(shí)時反饋。

(3) 在線作業(yè)。學(xué)生可以線上提交實(shí)訓(xùn)作業(yè)，查看教師對作業(yè)的批改和點(diǎn)評。

(4) 討論中心。這是教師和學(xué)生在線進(jìn)行交流的平臺，師生可以討論實(shí)訓(xùn)過程中遇到的問題。

(5) 成績統(tǒng)計(jì)。記錄每個學(xué)生訪問平臺的次數(shù)，在學(xué)習(xí)中心閱讀文檔、觀看視頻的時間，對教師發(fā)布作業(yè)的完成量，對教師發(fā)布任務(wù)的參與度。依據(jù)教師在此模塊事先設(shè)置的權(quán)重，計(jì)算學(xué)生的綜合成績。

1.2 系統(tǒng)架構(gòu)

圖1 實(shí)訓(xùn)互動管理平臺網(wǎng)絡(luò)架構(gòu)

為了設(shè)計(jì)出松散耦合且便于修改的系統(tǒng)，平臺的軟件架構(gòu)采用分層結(jié)構(gòu)，每層完成獨(dú)立的功能，并提供相應(yīng)的接口與實(shí)現(xiàn)分離。平臺的軟件架構(gòu)設(shè)計(jì)如圖2所示。

圖2 實(shí)訓(xùn)互動管理平臺軟件架構(gòu)

2 平臺前端設(shè)計(jì)與實(shí)現(xiàn)

2.1 前端響應(yīng)式設(shè)計(jì)流程

移動設(shè)備種類繁多，應(yīng)用環(huán)境也特別復(fù)雜。為了解決移動設(shè)備屏幕尺寸不一、分辨率大小不一、瀏覽器分化等問題，實(shí)訓(xùn)互動管理平臺采用響應(yīng)式設(shè)計(jì)模式進(jìn)行頁面布局設(shè)計(jì)。響應(yīng)式設(shè)計(jì)可以根據(jù)移動設(shè)備屏幕的尺寸大小，自動判斷、調(diào)整頁面布局及頁面元素的大小[3]，避免出現(xiàn)網(wǎng)頁布局錯亂、內(nèi)容顯示不全、字符亂碼等問題，改善用戶體驗(yàn)，降低平臺開發(fā)成本。

實(shí)訓(xùn)互動管理平臺的前端響應(yīng)式設(shè)計(jì)流程如圖3所示?？蛻舳讼蚍?wù)器端發(fā)送請求，服務(wù)器端通過Media Query先判斷用戶設(shè)備寬度，然后根據(jù)寬度大小將相應(yīng)的CSS樣式傳送到客戶端設(shè)備上渲染與顯示頁面。

圖3 前端響應(yīng)式設(shè)計(jì)流程

2.2.1 媒體查詢

實(shí)訓(xùn)互動管理平臺的使用者主要是學(xué)生和教師。根據(jù)學(xué)生、教師使用移動設(shè)備種類的多樣性及分辨率的差異，把平臺訪問終端設(shè)備分為3種基本類型：(1) 小型移動設(shè)備(手機(jī))，屏幕寬度小于768像素；(2) 中型移動設(shè)備(平板電腦)，屏幕寬度介于768像素到1024像素之間；(3) 大型設(shè)備(PC)，屏幕寬度大于1024像素。針對屏幕分辨率大小不同的訪問設(shè)備，服務(wù)器自動根據(jù)媒體查詢(Media Queries)切換相應(yīng)的CSS樣式，進(jìn)行頁面渲染和顯示。代碼如下：

@media (max-width: 768px) { ... }

@media (min-width: 768px) and (max-width:1024px) { ... }

@media (min-width: 1024px) { ... }

2.2.2 彈性圖片

圖片是網(wǎng)頁的主要元素之一，通常根據(jù)width和height屬性值的大小進(jìn)行顯示。如果設(shè)置的width和height值超過容器的width和height值，就會破壞網(wǎng)頁布局。為了使圖片在不同尺寸屏幕的訪問設(shè)備中能夠自動縮放顯示，需要對圖片進(jìn)行響應(yīng)式處理。在CSS樣式表中，將圖片的max-width設(shè)置為100%，height設(shè)置為auto，就能讓圖片按照訪問設(shè)備屏幕寬度的大小自動按比例縮放進(jìn)行匹配，達(dá)到彈性顯示的目的。此樣式設(shè)置也可以應(yīng)用于頁面的其他多媒體元素，讓包括圖片在內(nèi)的多媒體元素都能夠彈性顯示。代碼如下：

img，video，embed{

max-width: 100%;

Height:auto;

}

2.2.3 響應(yīng)式導(dǎo)航

由于移動設(shè)備寬度的限制，在PC端能完美顯示的導(dǎo)航欄，在移動端則可能無法正常顯示。因此，使用CSS和JavaScript技術(shù)為實(shí)訓(xùn)互動管理平臺制作了響應(yīng)式導(dǎo)航條。在PC端，當(dāng)瀏覽器窗口足夠大時，導(dǎo)航條顯示為水平展開模式；在移動端，導(dǎo)航條將自動隨著屏幕寬度的縮小而折疊顯示。PC端和移動端導(dǎo)航條顯示效果如圖4所示。

圖4 實(shí)訓(xùn)互動管理平臺的客戶端頁面顯示效果

與PC端的前端頁面設(shè)計(jì)不同，移動端的頁面通常窄而長。為了提高用戶體驗(yàn)度，減少用戶對頁面的拖拽操作，實(shí)訓(xùn)互動管理平臺在移動端的布局設(shè)計(jì)全部以豎直排列的方式進(jìn)行展示。

3 結(jié) 語

設(shè)計(jì)的實(shí)訓(xùn)互動管理平臺，包含頂崗實(shí)習(xí)管理、畢業(yè)設(shè)計(jì)管理、校內(nèi)實(shí)踐教學(xué)管理和校外實(shí)訓(xùn)基地管理等四大功能模塊。在這里只是簡單介紹了校內(nèi)實(shí)踐教學(xué)管理模塊的功能和平臺前端頁面的響應(yīng)式設(shè)計(jì)及實(shí)現(xiàn)過程。該平臺的建立為豐富實(shí)訓(xùn)教學(xué)手段的多樣性、增強(qiáng)教學(xué)形式的生動性、互動性創(chuàng)造了條件，有助于提高學(xué)生的學(xué)習(xí)興趣和學(xué)習(xí)效率，同時也便于學(xué)校和企業(yè)及時了解學(xué)生實(shí)訓(xùn)情況、調(diào)整實(shí)習(xí)實(shí)訓(xùn)方案，動態(tài)把控整個實(shí)訓(xùn)過程。