基于雨課堂的在線教學(xué)模式實(shí)踐與探索
——以響應(yīng)式布局網(wǎng)站開發(fā)為例

郭欣桐 于 洪

（黑龍江工商學(xué)院，黑龍江 哈爾濱 150001）

0 引言

2021年8月部分地區(qū)疫情突發(fā)，在此突發(fā)情況之下，黑龍江工商學(xué)院積極響應(yīng)國(guó)家號(hào)召，2021—2022年第一學(xué)期學(xué)生延期返校，并開啟了“停課不停學(xué)”的教學(xué)模式，避免了人群聚集，為師生人身安全提供了保障。在此背景下，如何有效組織課堂教學(xué)，發(fā)揮線上教學(xué)的優(yōu)勢(shì)，成為任課教師首要思考的問(wèn)題。基于上述問(wèn)題，利用互聯(lián)網(wǎng)以及現(xiàn)代信息技術(shù)的優(yōu)勢(shì)，適當(dāng)融入課程思政元素，積極探索“響應(yīng)式布局網(wǎng)站開發(fā)”課程線上教學(xué)的新模式。

1 “響應(yīng)式布局網(wǎng)站開發(fā)”課程特點(diǎn)以及教學(xué)內(nèi)容

“響應(yīng)式布局網(wǎng)站開發(fā)”是我校軟件工程專業(yè)Java EE方向課之一，其前導(dǎo)課程為Web前端開發(fā)技術(shù)，是一門理論知識(shí)與實(shí)踐應(yīng)用相結(jié)合的綜合性課程，在軟件工程專業(yè)培養(yǎng)中起到至關(guān)重要的作用[1]。

課程教學(xué)目標(biāo)主要分為三個(gè)方面：

1.1 知識(shí)目標(biāo)

（1）熟悉Bootstrap安裝過(guò)程以及使用。

（2）熟悉響應(yīng)式布局網(wǎng)站開發(fā)的基本流程。

1.2 能力目標(biāo)

（1）能運(yùn)用響應(yīng)式布局的基本原理，根據(jù)需求分析，對(duì)所提出的解決方案進(jìn)行評(píng)價(jià)，進(jìn)而驗(yàn)證解決方案的合理性，得出有效結(jié)論。

（2）能夠開發(fā)、選擇與使用恰當(dāng)?shù)那岸碎_發(fā)技術(shù)、資源、開發(fā)工具完成響應(yīng)式布局網(wǎng)站的需求分析、設(shè)計(jì)、實(shí)現(xiàn)。

1.3 素質(zhì)目標(biāo)

具有良好的職業(yè)素養(yǎng)，熟悉前端開發(fā)領(lǐng)域的國(guó)家政策、法律法規(guī)和行業(yè)規(guī)范。

課程教學(xué)目標(biāo)是教學(xué)的依據(jù)，對(duì)整個(gè)課程教學(xué)的實(shí)施過(guò)程具有導(dǎo)向作用。教學(xué)過(guò)程的實(shí)施又離不開教學(xué)內(nèi)容的組織。該課程主要講述Web前端開發(fā)主流框架Bootstrap的基本使用以及響應(yīng)式布局網(wǎng)站開發(fā)的基本流程。

根據(jù)“響應(yīng)式布局網(wǎng)站開發(fā)”課程的地位和特點(diǎn)，將課程教學(xué)內(nèi)容分成四個(gè)模塊。第一個(gè)模塊為響應(yīng)式布局原理模塊，主要涉及媒體查詢、布局容器、前端主流響應(yīng)式布局框架Bootstrap的安裝和引入。第二個(gè)模塊為柵格系統(tǒng)模塊，主要講解如何使用Bootstrap柵格系統(tǒng)對(duì)網(wǎng)頁(yè)進(jìn)行響應(yīng)式布局。第三個(gè)模塊為公共樣式模塊，主要包括Bootstrap框架內(nèi)外邊距、邊框、寬高、對(duì)齊方式、顏色、顯示方式、浮動(dòng)等設(shè)置方式。第四個(gè)模塊為組件模塊，主要包括下拉菜單、導(dǎo)航、面包屑、分頁(yè)、按鈕組、卡片等框架和樣式的基本使用方式。第五個(gè)模塊為插件模塊，主要包括過(guò)渡、輪播、折疊、下拉項(xiàng)、彈出提示等交互行為和動(dòng)態(tài)效果的基礎(chǔ)使用方式。

2 教學(xué)平臺(tái)以及教學(xué)工具

課程以雨課堂為主要教學(xué)平臺(tái)，QQ群、多媒體課件、網(wǎng)頁(yè)案例作為輔助的教學(xué)工具。雨課堂是由清華大學(xué)和學(xué)堂在線共同合作開發(fā)的智慧教學(xué)平臺(tái)，該平臺(tái)基于微信公眾號(hào)和PPT插件運(yùn)行，用戶界面簡(jiǎn)潔、友好，操作簡(jiǎn)單，避免了過(guò)多復(fù)雜的操作，易上手。教師只需下載安裝雨課堂軟件并關(guān)注長(zhǎng)江雨課堂公眾號(hào)，在公眾號(hào)中進(jìn)行身份激活。激活成功后，在“我教的課”選項(xiàng)中即可查閱本學(xué)期課程以及班級(jí)學(xué)生信息。

3 基于“雨課堂”的教學(xué)實(shí)施

“響應(yīng)式布局網(wǎng)站開發(fā)”課程的教學(xué)實(shí)施過(guò)程主要從課前、課中、課后這三個(gè)環(huán)節(jié)開展。教學(xué)實(shí)施的流程圖如圖1所示。

圖1 教學(xué)實(shí)施流程圖

3.1 課前準(zhǔn)備

在課前準(zhǔn)備階段，對(duì)授課的不同班級(jí)進(jìn)行學(xué)情分析，制作供學(xué)生自主預(yù)習(xí)的課程材料，課程材料題型以思考題為主，涵蓋本節(jié)課教學(xué)內(nèi)容的重難點(diǎn)。思考題主要引導(dǎo)學(xué)生進(jìn)行自主探究式學(xué)習(xí)[2]，整合所學(xué)新知識(shí)點(diǎn)和舊知識(shí)點(diǎn)之間的內(nèi)在聯(lián)系，通過(guò)已掌握的知識(shí)點(diǎn)學(xué)習(xí)新的知識(shí)點(diǎn)，從而完成新舊知識(shí)點(diǎn)的轉(zhuǎn)化。通過(guò)輔助教學(xué)工具QQ群可與學(xué)生保持聯(lián)系，對(duì)學(xué)生提出的問(wèn)題及時(shí)進(jìn)行在線答疑解惑，幫助學(xué)生進(jìn)行新知識(shí)點(diǎn)的理解。同時(shí)，在解答的過(guò)程中，針對(duì)共性問(wèn)題，可組織學(xué)生進(jìn)行討論，從而了解其他同學(xué)的預(yù)習(xí)情況。

通過(guò)學(xué)生的預(yù)習(xí)情況，在授課過(guò)程中根據(jù)不同班級(jí)的情況適當(dāng)調(diào)整教學(xué)方法，做到因材施教。

網(wǎng)絡(luò)是線上教學(xué)的基本保障，因此在課前準(zhǔn)備階段，教師需要與學(xué)生進(jìn)行線上教學(xué)環(huán)境的測(cè)試，重點(diǎn)檢測(cè)是否有學(xué)生因網(wǎng)絡(luò)問(wèn)題無(wú)法進(jìn)入課堂、教師麥克聲音是否正常、教師PPT、案例網(wǎng)頁(yè)是否正常顯示等問(wèn)題。

確保線上教學(xué)硬件設(shè)施與軟件無(wú)誤后，教師可正式進(jìn)行線上教學(xué)環(huán)節(jié)。

3.2 課中開展多個(gè)教學(xué)環(huán)節(jié)

3.2.1 知識(shí)點(diǎn)回顧

由于響應(yīng)式布局網(wǎng)站開發(fā)的課程特點(diǎn)，知識(shí)點(diǎn)回顧以實(shí)踐操作為主，培養(yǎng)學(xué)生的實(shí)際操作能力。以小組互助學(xué)習(xí)為依托，小組討論找出網(wǎng)站代碼中的錯(cuò)誤點(diǎn)，錯(cuò)誤點(diǎn)為上一節(jié)的重難點(diǎn)以及學(xué)生代碼練習(xí)時(shí)的錯(cuò)誤點(diǎn)。各小組存在競(jìng)爭(zhēng)關(guān)系，根據(jù)提交答案的先后順序以及準(zhǔn)確率進(jìn)行加分，分?jǐn)?shù)秉承公開公正的原則，從而讓更多的學(xué)生參與教學(xué)中，提高學(xué)生的自主學(xué)習(xí)能力以及團(tuán)隊(duì)協(xié)作能力，增強(qiáng)學(xué)生的集體榮譽(yù)感。經(jīng)實(shí)踐表明，教學(xué)效果良好，各小組提交的匯總答案均能保證85%的準(zhǔn)確率，各小組成員均能積極參與至小組討論中，給出自己的意見。

3.2.2 知識(shí)點(diǎn)講解

由于響應(yīng)式布局開發(fā)的課程特點(diǎn)，課程應(yīng)整合學(xué)生興趣、技術(shù)學(xué)習(xí)等多種內(nèi)容，發(fā)揮前端開發(fā)技術(shù)的應(yīng)用優(yōu)勢(shì)，堅(jiān)持以實(shí)踐操作為主，教學(xué)難度適中的教學(xué)原則。保持教學(xué)內(nèi)容的及時(shí)更新，在信息化時(shí)代下，及時(shí)查找新的教學(xué)熱點(diǎn)[3]。與此同時(shí)，應(yīng)注重從學(xué)生感興趣的學(xué)習(xí)關(guān)注點(diǎn)出發(fā)，提高教學(xué)的趣味性，以興趣為導(dǎo)向，激勵(lì)學(xué)生對(duì)響應(yīng)式布局網(wǎng)站開發(fā)的學(xué)習(xí)熱情。例如，講解Bootstrap柵格系統(tǒng)時(shí)以實(shí)際網(wǎng)頁(yè)為例進(jìn)行網(wǎng)頁(yè)整體布局。將學(xué)生感興趣的熱點(diǎn)話題電視劇《你是我的榮耀》中的航天背景與時(shí)政熱點(diǎn)神舟十二號(hào)緊密關(guān)聯(lián)，講解中國(guó)載人航天官方網(wǎng)站的布局方式。在提高學(xué)生學(xué)習(xí)興趣的同時(shí)，引入課程思政，宣揚(yáng)中國(guó)航天自強(qiáng)不息的精神，讓學(xué)生樹立民族自豪感。

在講解實(shí)際案例網(wǎng)站時(shí)，采用啟發(fā)式教學(xué)方式，以學(xué)生為主體，引導(dǎo)學(xué)生自主思考，利用雨課堂的彈幕功能調(diào)動(dòng)學(xué)生參與課堂互動(dòng)的積極性，避免了傳統(tǒng)教學(xué)中易出現(xiàn)的師生互動(dòng)較少、學(xué)生積極性不高的問(wèn)題。教師根據(jù)彈幕內(nèi)容及時(shí)給予學(xué)生反饋，對(duì)學(xué)生的思路進(jìn)行引導(dǎo)。若在彈幕中出現(xiàn)與教學(xué)內(nèi)容無(wú)關(guān)的內(nèi)容，應(yīng)及時(shí)給予學(xué)生警告、制止發(fā)送與課堂教學(xué)無(wú)關(guān)的內(nèi)容。經(jīng)實(shí)踐表明，班級(jí)大部分同學(xué)均可積極參與課堂互動(dòng)，將自己思考后的答案以彈幕形式發(fā)送。而課程結(jié)束后，教師可查閱課程報(bào)告中的彈幕消息統(tǒng)計(jì)，如圖2所示，方便課后進(jìn)行分?jǐn)?shù)統(tǒng)計(jì)。在授課過(guò)程中，還可利用雨課堂提供的隨機(jī)點(diǎn)名功能調(diào)動(dòng)學(xué)生參與課堂的積極性，并且隨機(jī)點(diǎn)名功能因?yàn)槠洳淮_定性可以提高學(xué)生的緊張感[4]，有助于提高學(xué)習(xí)效率。但在教學(xué)過(guò)程中要注意使用次數(shù)，防止學(xué)生太緊張導(dǎo)致無(wú)法集中注意力。

圖2 教師端查看彈幕

3.2.3 實(shí)驗(yàn)練習(xí)

由于課程特點(diǎn)，基本理論知識(shí)點(diǎn)講解環(huán)節(jié)結(jié)束后，開展實(shí)驗(yàn)練習(xí)環(huán)節(jié)。由于線上教學(xué)地點(diǎn)的局限性，無(wú)法面對(duì)面檢查學(xué)生實(shí)驗(yàn)練習(xí)的情況。為解決這一問(wèn)題，采用QQ群作為輔助教學(xué)工具，要求學(xué)生將實(shí)驗(yàn)練習(xí)的代碼以截圖的形式發(fā)送至QQ群。教師依次查看每位學(xué)生代碼，指出問(wèn)題，如圖3所示，從而完成遠(yuǎn)程實(shí)驗(yàn)指導(dǎo)。

圖3 實(shí)驗(yàn)遠(yuǎn)程指導(dǎo)

3.3 課后鞏固

課后鞏固主要通過(guò)課后作業(yè)以及雨課堂討論區(qū)兩部分展開。課后作業(yè)是對(duì)課上教學(xué)的有效延伸，是學(xué)生課堂學(xué)習(xí)的鞏固和深化。根據(jù)課程特點(diǎn)，課后作業(yè)以實(shí)際操作為主。通過(guò)課后作業(yè)，學(xué)生可以了解自身的學(xué)習(xí)情況。當(dāng)學(xué)生在完成作業(yè)的過(guò)程中遇到問(wèn)題時(shí)，可通過(guò)QQ群對(duì)教師提出問(wèn)題，教師進(jìn)行解答。當(dāng)遇到共性問(wèn)題時(shí)，發(fā)送至雨課堂討論區(qū)，全班同學(xué)進(jìn)行交流溝通。

4 結(jié)語(yǔ)

本文基于“雨課堂”，從課前準(zhǔn)備、課堂教學(xué)以及課后鞏固三個(gè)環(huán)節(jié)進(jìn)行“響應(yīng)式網(wǎng)站開發(fā)”課程的線上教學(xué)實(shí)踐嘗試。課程以小組互助學(xué)習(xí)為依托，積極開展探究式、討論式、參與式教學(xué)?；谟暾n堂的在線教學(xué)對(duì)“響應(yīng)式網(wǎng)站開發(fā)”課程是一次新的嘗試，后續(xù)會(huì)逐步完善以達(dá)到更好的教學(xué)效果。