可視頻錄制和動(dòng)態(tài)演示網(wǎng)絡(luò)教學(xué)系統(tǒng)的設(shè)計(jì)研究

羅云芳+唐運(yùn)樂

【摘 要】針對(duì)“PHP網(wǎng)站建設(shè)與開發(fā)”課程課件和現(xiàn)有網(wǎng)絡(luò)教學(xué)系統(tǒng)的不足，研究設(shè)計(jì)開發(fā)新的適合“PHP網(wǎng)站建設(shè)與開發(fā)”等程序設(shè)計(jì)課程的網(wǎng)絡(luò)教學(xué)系統(tǒng)。

【關(guān)鍵詞】網(wǎng)絡(luò)教學(xué)系統(tǒng) 課件管理 視頻錄制 循環(huán)動(dòng)態(tài)演示

【中圖分類號(hào)】G 【文獻(xiàn)標(biāo)識(shí)碼】A

【文章編號(hào)】0450-9889（2016）04C-0186-04

“PHP網(wǎng)站建設(shè)與開發(fā)”是計(jì)算機(jī)類專業(yè)的核心專業(yè)課程，課程教學(xué)成效將直接影響學(xué)生利用PHP語言進(jìn)行Web應(yīng)用程序開發(fā)的技能水平，影響學(xué)生畢業(yè)后是否符合PHP Web開發(fā)程序員工作崗位要求。但作為程序設(shè)計(jì)類課程，“PHP網(wǎng)站建設(shè)與開發(fā)”課程具有涉及知識(shí)面廣、內(nèi)容抽象、實(shí)踐操作性很強(qiáng)等特點(diǎn)。

要想提高課程教學(xué)質(zhì)量，建設(shè)一套功能豐富、適合本課程教學(xué)的網(wǎng)絡(luò)教學(xué)系統(tǒng)是非常有必要的?！癙HP網(wǎng)站建設(shè)與開發(fā)”相關(guān)課程的教學(xué)存在許多網(wǎng)絡(luò)教學(xué)系統(tǒng)，但這些網(wǎng)絡(luò)教學(xué)系統(tǒng)主要存在以下問題：系統(tǒng)展示教學(xué)課件時(shí)以PDF文檔顯示，比較死板沒有原有PPT動(dòng)畫動(dòng)態(tài)效果；系統(tǒng)缺少自動(dòng)錄屏功能，無法錄制教師上課視頻供學(xué)生課后學(xué)習(xí)；系統(tǒng)無法實(shí)現(xiàn)程序設(shè)計(jì)循環(huán)結(jié)構(gòu)執(zhí)行過程的動(dòng)態(tài)演示，無法將抽象的知識(shí)形象化，不易于學(xué)生對(duì)知識(shí)的掌握。

針對(duì)當(dāng)前“PHP網(wǎng)站建設(shè)與開發(fā)”相關(guān)課程網(wǎng)絡(luò)教學(xué)系統(tǒng)的不足，我們?cè)O(shè)計(jì)開發(fā)一套全新的網(wǎng)絡(luò)教學(xué)系統(tǒng)，以更好地輔助教學(xué)。新系統(tǒng)為更好地輔助課程教學(xué)，主要具有三大新功能：PPT教學(xué)課件的管理和內(nèi)嵌于Web頁面中打開顯示；教師授課視頻錄制、去噪聲和存儲(chǔ)管理；程序循環(huán)結(jié)構(gòu)執(zhí)行過程動(dòng)態(tài)演示。

一、系統(tǒng)整體設(shè)計(jì)

為方便教學(xué)使用，“PHP網(wǎng)站建設(shè)與開發(fā)”課程教學(xué)系統(tǒng)是采用B/S架構(gòu)模式實(shí)現(xiàn)的Web網(wǎng)絡(luò)版。系統(tǒng)開發(fā)平臺(tái)基于Windows操作系統(tǒng)，以Apache為后臺(tái)服務(wù)器、Mysql為后臺(tái)數(shù)據(jù)庫、PHP為開發(fā)語言、ThinkPHP為開發(fā)框架，按MVC設(shè)計(jì)模式進(jìn)行設(shè)計(jì)開發(fā)。一是實(shí)現(xiàn)了PHP代碼與HTML代碼的分離，業(yè)務(wù)邏輯處理層、視圖層和數(shù)據(jù)處理層的分離，在修改頁面視圖時(shí)不需要重新編譯數(shù)據(jù)模型層和控制器，使系統(tǒng)具有良好的重用性、擴(kuò)展性和可維護(hù)性。

“PHP網(wǎng)站建設(shè)與開發(fā)”課程教學(xué)系統(tǒng)為更好地輔助課程教學(xué)，除一般教學(xué)系統(tǒng)具有的常規(guī)功能外，主要包括PPT教學(xué)課件管理展示、授課過程視頻錄制與處理、循環(huán)結(jié)構(gòu)程序執(zhí)行過程動(dòng)態(tài)演示、程序流程圖自動(dòng)繪制與存儲(chǔ)等新功能，系統(tǒng)總體框圖如圖1所示。

系統(tǒng)中，課程PPT教學(xué)課件管理包括前端PPT教學(xué)課件目錄樹型展示和課件的Web頁面內(nèi)嵌打開顯示，后臺(tái)的課程PPT教學(xué)課件動(dòng)態(tài)分類管理，包括課程的添加、刪除、修改和查詢管理，根據(jù)選擇的課程添加、刪除、修改和查詢相應(yīng)的PPT教學(xué)課件；授課視頻錄制和視頻聲音去噪聲處理實(shí)現(xiàn)教師授課過程中整個(gè)授課過程的視頻錄制和分類存儲(chǔ)管理，在錄制前按視頻存儲(chǔ)信息表要求設(shè)置相應(yīng)的視頻信息，錄制時(shí)按設(shè)置的信息自動(dòng)將視頻分類存儲(chǔ)，對(duì)已錄制的教學(xué)視頻聲音進(jìn)行去噪聲處理，提高視頻聲音的質(zhì)量；循環(huán)結(jié)構(gòu)程序執(zhí)行過程動(dòng)態(tài)演示，將數(shù)據(jù)排序算法抽象的執(zhí)行過程形象化，實(shí)現(xiàn)按授課時(shí)隨意給定排序數(shù)據(jù)個(gè)數(shù)和隨機(jī)生成的排序數(shù)據(jù)，按冒泡排序算法的執(zhí)行過程，動(dòng)態(tài)演示程序算法循環(huán)執(zhí)行的整個(gè)過程，使課程重要的算法部分抽象的知識(shí)點(diǎn)形象化，讓學(xué)生更易于理解和掌握，為更好地深入程序設(shè)計(jì)相關(guān)課程的學(xué)習(xí)打下良好基礎(chǔ)。

二、網(wǎng)絡(luò)教學(xué)系統(tǒng)實(shí)現(xiàn)

（一）PPT教學(xué)課件管理

由于PPT文件不能直接內(nèi)嵌于Web頁面中打開顯示，因此很多網(wǎng)絡(luò)教學(xué)系統(tǒng)都將PPT教學(xué)課件轉(zhuǎn)換為PDF文件格式以方便在Web頁面中打開，但這種方式無法保留PPT文件的原始特性。為方便PPT教學(xué)文件的管理和保證PPT教學(xué)課件的原始特性，本網(wǎng)絡(luò)教學(xué)系統(tǒng)建立PPT教學(xué)課件管理信息表，將PPT教學(xué)課件信息歸類入庫管理，在展示時(shí)按課件名稱以樹型目錄列表菜單的方式列出，點(diǎn)擊菜單列表中的課件名稱，課件將內(nèi)嵌在Web頁面中打開顯示。

實(shí)現(xiàn)將PPT教學(xué)課件內(nèi)嵌在Web頁面打開的方法可以使用微軟的OCX控件和第三方的控件。為方便系統(tǒng)使用在此使用微軟的OCX控件實(shí)現(xiàn)PPT教學(xué)課件的打開顯示。具體實(shí)現(xiàn)步驟如圖2所示。

下載OfficeCtrol.ocx控件后，在系統(tǒng)的命令提示符窗口執(zhí)行regsvr32 OfficeCtrol.ocx命令實(shí)現(xiàn)注冊(cè)，注冊(cè)成功后打開php.ini配置文件，修改配置啟用com.allow_dcom=true，使PHP支持OfficeCtrol.ocx控件的應(yīng)用開發(fā)，在網(wǎng)絡(luò)教學(xué)系統(tǒng)PPT課件文件管理模塊頁面中使用語句include（"PPTCtrol＼OfficeCtrol.ocx"）把控件包含進(jìn)來，利用$ppt = new COM（"PPTCtrol＼OfficeCtrol.ocx "） or die（"Unable to instanciate PPT"）語句創(chuàng)建PPT對(duì)象模型，創(chuàng)建成功利用$ppt->Documents->Open（）語句打開PPT教學(xué)課件文件，利用Object對(duì)象顯示PPT教學(xué)課件文件，實(shí)現(xiàn)PPT教學(xué)課件文件在Web頁面的內(nèi)嵌顯示。

（二）授課語音視頻錄制

把授課過程的語音視頻錄制下來，供學(xué)生課后學(xué)習(xí)和復(fù)習(xí)觀看，能有效幫助學(xué)生消化課堂上老師所講授的課程內(nèi)容和技能。授課語音視頻錄制包括教學(xué)語音視頻錄制和語音視頻存儲(chǔ)兩部分功能，授課語音視頻錄制實(shí)現(xiàn)先在系統(tǒng)頁面添加錄制啟動(dòng)按鈕，然后進(jìn)入錄制設(shè)置頁面，設(shè)置完成后則開始授課語音視頻的錄制，錄制完成后按停止按鈕將視頻存儲(chǔ)到相應(yīng)目錄并將視頻按錄制前設(shè)置的信息入庫存儲(chǔ)，實(shí)現(xiàn)視頻的管理。授課語音視頻錄制功能的實(shí)現(xiàn)采用原生態(tài)開發(fā)比較麻煩，這里采用Mcapture+MFile構(gòu)件實(shí)現(xiàn)，具體步驟如圖3所示。

使用Oraycn.MFile.dll和Oraycn.MCapture.dll引用Mcapture+FMFile構(gòu)件，使用CapturerFactory.CreateDesktopCapturer創(chuàng)建視頻文件；使用Threading類創(chuàng)建啟動(dòng)多線程，同步實(shí)現(xiàn)麥克風(fēng)數(shù)據(jù)和授課計(jì)算機(jī)屏幕圖像的采集，其中使用CapturerFactory.CreateMicrophoneCapturer實(shí)現(xiàn)麥克風(fēng)數(shù)據(jù)的采集，使用CapturerFactory.CreateDesktopCapturer實(shí)現(xiàn)屏幕圖像的采集，對(duì)采集的音頻數(shù)據(jù)使用videoFileMaker進(jìn)行編碼并采用改進(jìn)的譜相減語音增強(qiáng)處理算法對(duì)音頻信號(hào)去噪聲處理，對(duì)采集的屏幕圖像進(jìn)行裁剪，因?yàn)镸File要求錄制的視頻幀的長和寬必須是4的整數(shù)倍，通過MultimediaManager的DesktopEncodeQuality屬性，調(diào)整采集屏幕圖像的清晰度；使用videoFileMaker.AddVideoFrame將采集的音頻和圖像同步寫入到視頻文件，錄制完成后使用StopRecordAsyn停止錄制即可完成視頻的錄制和保存。

在教學(xué)視頻的錄制中，由于授課環(huán)境人較多，通過麥克風(fēng)采集的音頻數(shù)據(jù)除了教師的聲音外還會(huì)有較多的背景噪聲，因此對(duì)錄制的音頻要特別進(jìn)行去噪聲處理，為增強(qiáng)錄噪聲處理效果，采用改進(jìn)譜相減算法對(duì)錄制的音頻進(jìn)行去噪聲處理，譜相減語音增強(qiáng)處理算法其數(shù)學(xué)表達(dá)式為：

在去噪聲處理中，由于噪聲能量分布廣，而語音能量則集中于某于頻段，通過靈活調(diào)整（1-3）式中的α和β的值，可以有效提高去噪聲能力。采用改進(jìn)后的語音增強(qiáng)處理算法實(shí)現(xiàn)授課語音處理流程如圖4所示。

授課視頻音頻語音去噪處理使用wvaerda（）函數(shù)讀取錄制的語音，確定漢明窗長度和平滑速度后使用hamming（）函數(shù)實(shí)現(xiàn)語音信號(hào)處理，確定傅里葉變換長度即循環(huán)次數(shù)M，使用fft（）函數(shù)實(shí)現(xiàn)傅里葉變換，使用mean（）函數(shù)實(shí)現(xiàn)功率譜計(jì)算，獲取改進(jìn)后譜相減閥值α、β后確定功率因素補(bǔ)償閥值，用乘積的方法實(shí)現(xiàn)去噪聲處理，使用ifft（）函數(shù)進(jìn)行IFFT變換，按以上方式循環(huán)處理完成所讀取的音頻信號(hào)即可完成授課視頻中音頻的去噪聲處理。

（三）循環(huán)結(jié)構(gòu)執(zhí)行過程動(dòng)態(tài)演示

循環(huán)結(jié)構(gòu)是程序設(shè)計(jì)的核心基礎(chǔ)，PHP程序設(shè)計(jì)也不例外，但循環(huán)結(jié)構(gòu)程序執(zhí)行的過程比較抽象，如果不能將其執(zhí)行的抽象過程形象的表示出來，學(xué)生很難理解和掌握，傳統(tǒng)的教學(xué)課件或系統(tǒng)只能展示循環(huán)結(jié)構(gòu)的簡單執(zhí)行過程，無法實(shí)現(xiàn)循環(huán)結(jié)構(gòu)程序執(zhí)行抽象過程的形象化，不能滿足教學(xué)隨機(jī)案例的動(dòng)態(tài)演示需要。循環(huán)結(jié)構(gòu)執(zhí)行過程動(dòng)態(tài)演示功能模塊從數(shù)據(jù)排序的經(jīng)典算法冒泡排序的實(shí)現(xiàn)動(dòng)態(tài)演示其數(shù)據(jù)的排序過程，把抽象的循環(huán)結(jié)構(gòu)程序執(zhí)行過程形象化。以冒泡排序動(dòng)態(tài)演示循環(huán)結(jié)構(gòu)執(zhí)行過程具體的實(shí)現(xiàn)流程如圖5所示。

按輸入的預(yù)排序數(shù)據(jù)個(gè)數(shù)N，使用隨機(jī)函數(shù)random.Next（）生成[0-100]區(qū)間范圍的預(yù)排序數(shù)據(jù)，根據(jù)預(yù)排序數(shù)據(jù)個(gè)數(shù)生成預(yù)排序數(shù)據(jù)顯示標(biāo)簽，為使動(dòng)態(tài)生成的標(biāo)簽?zāi)軌蛘R排列顯示，標(biāo)簽位置x坐標(biāo)值表達(dá)式為：x=k*50+50，y坐標(biāo)值表達(dá)式為：y=j*50+60，其中k表示標(biāo)簽的下標(biāo)，j表示標(biāo)簽顯示的行標(biāo)值。在生成的標(biāo)簽中顯示隨機(jī)生成的預(yù)排序原始數(shù)據(jù)，按冒泡排序算法的思想，對(duì)數(shù)據(jù)進(jìn)行非降序排列過程是第一趟將第一個(gè)數(shù)與后面每一個(gè)數(shù)一一進(jìn)行比較，如果后面的數(shù)比第一個(gè)數(shù)小則交換，第二趟將第二個(gè)數(shù)與后面每一個(gè)數(shù)一一進(jìn)行比較如果后面的數(shù)比第一個(gè)數(shù)小則交換，依此方式，進(jìn)行N-1趟則排序完成，整個(gè)執(zhí)行過程共完成N*（N-1）次比較。為突出顯示正排序的數(shù)據(jù)，以實(shí)現(xiàn)動(dòng)態(tài)演示的效果在排序的過程中用定時(shí)器間隔時(shí)間執(zhí)行和在排序過程中通過設(shè)置標(biāo)簽的背景色實(shí)現(xiàn)，同時(shí)生成交換數(shù)據(jù)顯示標(biāo)簽，修改已排序數(shù)據(jù)標(biāo)簽背景色標(biāo)識(shí)數(shù)據(jù)排序完成，最后顯示已排序的結(jié)果數(shù)據(jù)。

三、系統(tǒng)測(cè)試

為驗(yàn)證本網(wǎng)絡(luò)教學(xué)系統(tǒng)所實(shí)現(xiàn)的PPT教學(xué)課件管理、授課語音視頻錄制和循環(huán)結(jié)構(gòu)執(zhí)行過程動(dòng)態(tài)演示功能，對(duì)三個(gè)功能模塊進(jìn)行測(cè)試。點(diǎn)擊進(jìn)入PPT教學(xué)課件管理模塊，進(jìn)入功能模塊主界面，界面左側(cè)是課件管理菜單，具體的菜單項(xiàng)是從PPT教學(xué)課件管理信息表中讀取教學(xué)課件信息動(dòng)態(tài)生成的，從系統(tǒng)后臺(tái)能方便地實(shí)現(xiàn)教學(xué)課件的添加、刪除和修改等管理。點(diǎn)擊左側(cè)菜單課件標(biāo)題，打開PPT教學(xué)課件在右側(cè)內(nèi)嵌顯示，同時(shí)PPT教學(xué)課件可以放映和展示原來設(shè)計(jì)的動(dòng)畫效果，與直接打開效果一樣，實(shí)現(xiàn)了PPT教學(xué)課件的動(dòng)態(tài)管理。

進(jìn)入授課語音視頻錄制模塊，點(diǎn)擊錄制授課視頻設(shè)置功能按鈕，進(jìn)入設(shè)置界面，設(shè)置相應(yīng)的參數(shù)后，點(diǎn)擊開始錄制按鈕開始錄制一段時(shí)間后，停止錄制并保存錄制的文件，用視頻播放器打開錄制的視頻能正常打開并播放。

進(jìn)入循環(huán)結(jié)構(gòu)執(zhí)行過程動(dòng)態(tài)演示功能模塊，打開功能界面，在界面的排序數(shù)據(jù)個(gè)數(shù)編輯區(qū)輸入排序數(shù)據(jù)的個(gè)數(shù)，點(diǎn)擊成生數(shù)據(jù)功能按鈕，生成排序數(shù)據(jù)并生成顯示數(shù)據(jù)的標(biāo)簽，并在標(biāo)簽正常顯示數(shù)據(jù)。點(diǎn)擊開始排序功能按鈕，實(shí)現(xiàn)數(shù)據(jù)排序，并生成輔助標(biāo)簽，修改正排序數(shù)據(jù)的顯示標(biāo)簽背景色，同時(shí)生成顯示已排序數(shù)據(jù)的標(biāo)簽顯示已排序數(shù)據(jù)，實(shí)現(xiàn)了數(shù)據(jù)排序過程的動(dòng)態(tài)演示效果。數(shù)據(jù)排序過程動(dòng)態(tài)演示效果具體如圖6所示。

四、小結(jié)

在教學(xué)中，采用適合的網(wǎng)絡(luò)教學(xué)系統(tǒng)輔助教學(xué)，能有效地幫助教師提高教學(xué)質(zhì)量，但針對(duì)于“PHP網(wǎng)站建設(shè)與開發(fā)”等程序設(shè)計(jì)類課程，目前的網(wǎng)絡(luò)教學(xué)輔助系統(tǒng)存在不足，為解決目前網(wǎng)絡(luò)教學(xué)輔助系統(tǒng)的不足。本文在透徹了解網(wǎng)絡(luò)教學(xué)輔助系統(tǒng)急需的功能后，全新設(shè)計(jì)開發(fā)適合“PHP網(wǎng)站建設(shè)與開發(fā)”課程的網(wǎng)絡(luò)教學(xué)輔助系統(tǒng)，新系統(tǒng)主要具有PPT教學(xué)課件管理和內(nèi)嵌于Web頁面中打開顯示、授課語音視頻錄制存儲(chǔ)管理和循環(huán)結(jié)構(gòu)執(zhí)行過程動(dòng)態(tài)演示三大特色模塊。測(cè)試表明系統(tǒng)能實(shí)現(xiàn)PPT教學(xué)課件的動(dòng)態(tài)管理和內(nèi)嵌于Web頁面中打開顯示，并支持PPT教學(xué)課件的放映和動(dòng)畫效果；授課過程視頻的錄制和存儲(chǔ)管理，方便學(xué)生課后學(xué)習(xí)使用；循環(huán)過程動(dòng)態(tài)演示，將抽象和算法執(zhí)行過程形象化，使學(xué)生易于理解和掌握。新設(shè)計(jì)開發(fā)的網(wǎng)絡(luò)教學(xué)系統(tǒng)，經(jīng)過4所學(xué)校20多個(gè)班級(jí)師生的推廣試用，獲得師生的良好評(píng)價(jià)，輔助教師教學(xué)取得良好的效果。

【參考文獻(xiàn)】

[1]楊晉.大型B/S架構(gòu)實(shí)驗(yàn)綜合管理平臺(tái)研究與實(shí)現(xiàn)[J].實(shí)驗(yàn)室研究與探索，2011（10）

[2]馬東宇.基于Windows Server 2012 R2、WampServer環(huán)境的Moodle平臺(tái)搭建及優(yōu)化擴(kuò)展[J].內(nèi)蒙古師范大學(xué)學(xué)報(bào)，2014（11）

[3]申斌，李利民.基于MVC模式S2SH框架的庫存管理系統(tǒng)[J].實(shí)驗(yàn)室研究與探索，2014（11）

[4]伍旭，戴光明，彭雷，等.基于MVC架構(gòu)的深空探測(cè)任務(wù)設(shè)計(jì)與仿真平臺(tái)[J].計(jì)算機(jī)仿真，2014（8）

[5]楊光，李龍清，常心坦，等.基于Web實(shí)現(xiàn)樹型目錄兩種方式及比較[J].西安科技大學(xué)學(xué)報(bào)，2004（3）

[6]房國棟，李曉靜，王聰，等.網(wǎng)絡(luò)教學(xué)資源的管理潛力與網(wǎng)絡(luò)學(xué)習(xí)過程管理設(shè)[J].現(xiàn)代教育技術(shù)，2012（6）

[7]沈曉東，李弼程.一種基于功率因數(shù)補(bǔ)償?shù)淖V相減算法改進(jìn)[J].河南科技大學(xué)學(xué)報(bào)，2011（2）

[8]隋璐瑛，張雄偉，黃建軍，等.基于碼本學(xué)習(xí)的改進(jìn)譜減語音增強(qiáng)算法[J].計(jì)算機(jī)工程與應(yīng)用，2013（16）

[9]張賀，沈天飛，滕秋霞.基于級(jí)聯(lián)式改進(jìn)型譜減算法的語音去噪技術(shù)研究[J].工業(yè)控制計(jì)算機(jī)，2014（7）

[10]謝志英，袁紅麗，韓月霞，等.關(guān)于計(jì)算機(jī)編程語言之間融合教學(xué)的研究[J].計(jì)算機(jī)工程與科學(xué)，2014（4）

[11]邊倩，焦康，王忠，等.“C語言程序設(shè)計(jì)”課程數(shù)組教學(xué)方法的探索[J].計(jì)算機(jī)工程與科學(xué)，2014（12）

[12]楊波，梁少林. C語言中冒泡排序算法的教學(xué)設(shè)計(jì)與分析[J].信息與電腦，2015（16）

[13]王勇，蔡國永.基于隨機(jī)函數(shù)的哈希函數(shù)[J].計(jì)算機(jī)工程與設(shè)計(jì)，2015（10）

[14]李海燕，張立忠.《生命科學(xué)導(dǎo)論》網(wǎng)絡(luò)教學(xué)資源平臺(tái)的研究與實(shí)現(xiàn)[J].計(jì)算機(jī)與應(yīng)用化學(xué)，2011（5）

[15]梁永春，王凱成，趙方舟，等.開放式實(shí)訓(xùn)教學(xué)管理系統(tǒng)的開發(fā)[J].實(shí)驗(yàn)技術(shù)與管理，2014（6）

【作者簡介】羅云芳（1981— ），男，廣西賀州人，廣西職業(yè)技術(shù)學(xué)院計(jì)電系講師，碩士，研究方向：軟件工程，計(jì)算機(jī)應(yīng)用技術(shù)及計(jì)算機(jī)教學(xué)。

（責(zé)編 盧 雯）