“互聯(lián)網(wǎng)+環(huán)境下”混合式教學(xué)模式的探索與實(shí)踐

駱韻婷

摘要：互聯(lián)網(wǎng)+時(shí)代，移動(dòng)設(shè)備、指間知識(shí)、碎片化學(xué)習(xí)、視頻學(xué)習(xí)成為一種趨勢(shì)。該文旨在通過對(duì)HTML5+CSS3網(wǎng)站設(shè)計(jì)課程的現(xiàn)狀和存在的問題進(jìn)行分析， 利用“互聯(lián)網(wǎng)+”的特征，結(jié)合Web前端崗位需求，在混合式教學(xué)模式的理念下將移動(dòng)學(xué)習(xí)、網(wǎng)絡(luò)學(xué)習(xí)、在線學(xué)習(xí)與傳統(tǒng)現(xiàn)場(chǎng)教學(xué)相結(jié)合，形成了一套適合中職教育的線上線下混合式教學(xué)的思路和方法。

關(guān)鍵詞：互聯(lián)網(wǎng)+;混合式教學(xué);網(wǎng)站設(shè)計(jì)

中圖分類號(hào)：G642? ? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）04-0117-02

隨著網(wǎng)絡(luò)技術(shù)、通信技術(shù)的蓬勃發(fā)展，各行各業(yè)都因?yàn)榛ヂ?lián)網(wǎng)融合而發(fā)生著改變。在教育領(lǐng)域中，互聯(lián)網(wǎng)與教育的結(jié)合，正顛覆傳統(tǒng)教育的運(yùn)作模式。互聯(lián)網(wǎng)+時(shí)代，移動(dòng)設(shè)備、指間知識(shí)、碎片化學(xué)習(xí)、視頻學(xué)習(xí)成為一種趨勢(shì)。在疫情時(shí)期“停課不停學(xué)”的推動(dòng)下，線上線下融合育人環(huán)境日趨成熟，混合式學(xué)習(xí)將成為后疫情時(shí)代教育的“新常態(tài)”。如何有效地利用這種趨勢(shì)和常態(tài)讓學(xué)生更好地進(jìn)行學(xué)習(xí)，筆者在擔(dān)任HTML5+CSS3網(wǎng)站設(shè)計(jì)課程的教學(xué)過程中，探索出以微課為媒介，將移動(dòng)學(xué)習(xí)、網(wǎng)絡(luò)學(xué)習(xí)、在線學(xué)習(xí)與傳統(tǒng)現(xiàn)場(chǎng)教學(xué)相結(jié)合，該教學(xué)模式在HTML5+CSS3網(wǎng)站設(shè)計(jì)課程中提升學(xué)生的學(xué)習(xí)興趣，促使學(xué)生主動(dòng)學(xué)習(xí)，提升教學(xué)質(zhì)量。

1 HTML5+CSS3網(wǎng)站設(shè)計(jì)課程的現(xiàn)狀分析

《HTML5+CSS3網(wǎng)站設(shè)計(jì)》課程是我校計(jì)算機(jī)等相關(guān)專業(yè)的核心課程。隨著互聯(lián)網(wǎng)+時(shí)代的到來，網(wǎng)站設(shè)計(jì)的技術(shù)一直在更新，HTML5+CSS將是前端開發(fā)核心技術(shù)，為使教學(xué)內(nèi)容符合行業(yè)發(fā)展需求，保證教學(xué)內(nèi)容的先進(jìn)性，該課程的教學(xué)內(nèi)容及其教學(xué)資源急需更新。另外，由于網(wǎng)站的存儲(chǔ)和顯示形式有別于其他普通文檔，大眾化的教學(xué)平臺(tái)無法組織顯示學(xué)生的網(wǎng)站，這給教師組織教學(xué)帶來諸多不便，以往學(xué)生提交網(wǎng)站只能孤立存儲(chǔ)于教師的便攜移動(dòng)存儲(chǔ)設(shè)備或上傳至僅有教師有訪問權(quán)限的服務(wù)器，這不利于學(xué)生之間的互相學(xué)習(xí)、評(píng)價(jià)、再完善和課后學(xué)習(xí)。傳統(tǒng)的教學(xué)方式和現(xiàn)有的教學(xué)資源不能較好地滿足學(xué)生的需求。再者學(xué)生在進(jìn)行HTML5+CSS3網(wǎng)站設(shè)計(jì)開發(fā)自主能力不足，創(chuàng)新、融會(huì)貫通能力較弱。為了這種適應(yīng)現(xiàn)階段人才模式培養(yǎng)的需求，筆者采用以微課為主的混合式教學(xué)模式在HTML5+CSS3網(wǎng)站設(shè)計(jì)課程進(jìn)行了探索，結(jié)合崗位需求，讓學(xué)生能運(yùn)用HTML5+CSS3的知識(shí)，完成網(wǎng)站頁(yè)面設(shè)計(jì)和制作，能熟悉前端開發(fā)的工作規(guī)范。本次探究正是貼合實(shí)際需求的一次創(chuàng)新實(shí)踐。

2混合式教學(xué)模式研究可行性分析

以微課為主的混合式教學(xué)模式是當(dāng)前的主流。混合式教學(xué)模式是結(jié)合網(wǎng)絡(luò)學(xué)習(xí)與傳統(tǒng)課堂教學(xué)的混合式學(xué)習(xí)的學(xué)習(xí)方式提出的，是當(dāng)前信息化教學(xué)的主流教學(xué)方式，也較能被學(xué)生廣泛接受。微課憑借其“短小精悍”的特點(diǎn)迅速成為教學(xué)改革和資源建設(shè)的寵兒，制作精良的微課在輔助課堂教學(xué)和促進(jìn)學(xué)習(xí)者自主學(xué)習(xí)方面的出色表現(xiàn)得到了眾多學(xué)者和廣大教師的認(rèn)可。課程將知識(shí)碎片化，課堂切片化，區(qū)別于傳統(tǒng)課堂模式的系統(tǒng)化教學(xué)，是新時(shí)代下適應(yīng)中職學(xué)生新需求的“微學(xué)習(xí)”。

3混合式教學(xué)模式的探究與實(shí)踐

為保證微課程內(nèi)容呈現(xiàn)的科學(xué)性、形式展現(xiàn)的趣味性、技術(shù)實(shí)現(xiàn)的可行性，在本次探究的過程中我們與做互聯(lián)網(wǎng)網(wǎng)站設(shè)計(jì)和教育產(chǎn)品有充足經(jīng)驗(yàn)的企業(yè)合作，設(shè)計(jì)符合本校實(shí)際的開發(fā)模式設(shè)計(jì)，共同開發(fā)微課程。另外，本次不僅僅局限于微課程的開發(fā)，還充分發(fā)揮“互聯(lián)網(wǎng)+”的優(yōu)勢(shì)，在我們已經(jīng)使用比較成熟的基于移動(dòng)端的學(xué)生技能鑒定學(xué)習(xí)模擬教學(xué)平臺(tái)和超星教學(xué)平臺(tái)上采用混合式教學(xué)模式在實(shí)際教學(xué)中開展微課程的應(yīng)用研究。此外校企還共建適合《HTML5+CSS3網(wǎng)站設(shè)計(jì)》課程教學(xué)的網(wǎng)絡(luò)教學(xué)平臺(tái)。筆者采用微課為主的混合式教學(xué)模式在HTML5+CSS3網(wǎng)站設(shè)計(jì)課程中進(jìn)行了為期一個(gè)學(xué)期的探索實(shí)踐。

1）確認(rèn)微內(nèi)容，設(shè)計(jì)章節(jié)清單

作為一門技術(shù)的課程，最重要也是最難的就是要將一些非常復(fù)雜、難以理解的思想和問題簡(jiǎn)單化，讓學(xué)生輕松理解并掌握。HTML5+CSS3網(wǎng)站設(shè)計(jì)課程可分為HTML語(yǔ)法，HTML5頁(yè)面元素及屬性、CSS3入門、CSS3選擇器、CSS3盒子模型、浮動(dòng)與定位等。通過內(nèi)容的劃分，幫學(xué)生進(jìn)行知識(shí)的梳理，教學(xué)目標(biāo)明確，知識(shí)點(diǎn)集中，有一定的針對(duì)性。確認(rèn)好內(nèi)容再對(duì)每項(xiàng)微內(nèi)容的評(píng)價(jià)考核分解成相應(yīng)的章節(jié)，每個(gè)章節(jié)不僅有微課視頻，還包括了學(xué)習(xí)清單——教學(xué)課件，知識(shí)點(diǎn)小測(cè)，學(xué)生提問和教師評(píng)價(jià)等。

2）制作微視頻，提供在線學(xué)習(xí)資源

微課程開發(fā)最重要的依據(jù)是能根據(jù)本校的實(shí)際，以任務(wù)為導(dǎo)向，結(jié)合崗位需求。《HTML5+CSS3網(wǎng)站設(shè)計(jì)》課程目前以HTML5+CSS3應(yīng)用開發(fā)為核心，知識(shí)點(diǎn)多且關(guān)聯(lián)性較強(qiáng)，這很符合微課在選擇知識(shí)點(diǎn)時(shí)的獨(dú)立性要求。《HTML5+CSS3網(wǎng)站設(shè)計(jì)》實(shí)踐性強(qiáng)，很多知識(shí)點(diǎn)都需要教師進(jìn)行演示，為使教學(xué)內(nèi)容學(xué)生更容易接受，同時(shí)讓學(xué)生在線上先對(duì)課程進(jìn)行預(yù)習(xí)，做好課前準(zhǔn)備。因此將教學(xué)內(nèi)容制作成10分鐘左右的微視頻。學(xué)生在學(xué)習(xí)過程中可以重復(fù)播放、自行調(diào)整課程進(jìn)度，對(duì)較難理解的問題反復(fù)聽和看，直到學(xué)會(huì)為止，這也是線上微課的優(yōu)點(diǎn)。回到線下課堂中，教師通過問題導(dǎo)向的方式幫助學(xué)生梳理知識(shí)點(diǎn)。

3）網(wǎng)絡(luò)教學(xué)平臺(tái)，追蹤學(xué)習(xí)成長(zhǎng)軌跡

使用共建的網(wǎng)絡(luò)教學(xué)平臺(tái)搭建了《HTML5+CSS3網(wǎng)站設(shè)計(jì)》課程。該平臺(tái)包括了教學(xué)大綱，本課程ppt，相關(guān)圖文素材，微課資源，課后拓展練習(xí)，優(yōu)秀作品賞析等一系列豐富資源。系統(tǒng)能夠自動(dòng)追蹤學(xué)生成長(zhǎng)軌跡，通過學(xué)生的成績(jī)、行為記錄、知識(shí)結(jié)構(gòu)、學(xué)習(xí)偏好等數(shù)據(jù)，自動(dòng)生成學(xué)生未來職業(yè)潛質(zhì)多維模型。線上的學(xué)習(xí)，交流，作業(yè)提交反饋都在該平臺(tái)上實(shí)現(xiàn)。

4）教學(xué)過程實(shí)施

在本次探究的過程中，以該課程《CSS3過渡屬性》章節(jié)為例，本課的教學(xué)設(shè)計(jì)主要包含以下幾個(gè)階段：

（1）課前準(zhǔn)備，組織預(yù)習(xí)完成任務(wù)點(diǎn)

學(xué)生課前在線上教學(xué)資源的輔助下完成部分簡(jiǎn)單內(nèi)容的學(xué)習(xí)，可使學(xué)生對(duì)新知識(shí)處于有準(zhǔn)備的心理狀態(tài)，課堂上有目的地聽預(yù)習(xí)時(shí)所不能理解的地方，不僅降低學(xué)習(xí)難度，也是培養(yǎng)自身自學(xué)能力的有效途徑。因此筆者在本次課前除了發(fā)布CSS3過渡屬性微課視頻讓學(xué)生進(jìn)行觀看學(xué)習(xí)外，還發(fā)布了預(yù)習(xí)任務(wù)，設(shè)計(jì)小組研究問題。問題圍繞將要學(xué)習(xí)的重難點(diǎn)展開。教師通過查看學(xué)生預(yù)習(xí)作業(yè)，可發(fā)現(xiàn)學(xué)生較集中的問題，以便在接下來的課堂教學(xué)中有針對(duì)性的施教。

（2）課堂教學(xué)，多種教學(xué)方式相結(jié)合

采用以“學(xué)生為主體，以問題為中心”的問題導(dǎo)向式教學(xué)模式，以“問題”為教學(xué)活動(dòng)的起點(diǎn)，使學(xué)生在合作學(xué)習(xí)中學(xué)會(huì)探究問題、互助合作，形成學(xué)習(xí)共同體。因此在本次課的課堂教學(xué)中首先利用分析中軟國(guó)際UI設(shè)計(jì)培訓(xùn)宣傳界面中使用到過渡動(dòng)畫的元素案例導(dǎo)入本次課程主題： CSS3的過渡屬性。然后就拋出本課待研究的7個(gè)問題。利用網(wǎng)絡(luò)教學(xué)平臺(tái)與學(xué)生一起分析預(yù)習(xí)情況，采用提問法選擇正確的學(xué)生，讓其說出選擇理由。在分析中解決第1個(gè)問題。還利用了研究型教學(xué)和小組合作學(xué)習(xí)的方式布置小組研究任務(wù)，借助微課課程以及網(wǎng)絡(luò)教學(xué)平臺(tái)上關(guān)于CSS3過渡的內(nèi)容，讓學(xué)生以小組為單位研究解決剩余問題。在難點(diǎn)的突破上，由于網(wǎng)絡(luò)上較少有與之相關(guān)的詳細(xì)闡述，教材上僅僅展示公式及靜態(tài)圖片，學(xué)生在理解上存在困難，由教師利用講授法結(jié)合信息化手段---貝塞爾曲線網(wǎng)站上的模擬器。幫助學(xué)生更好地理解屬性的含義，并可創(chuàng)造出更有創(chuàng)意的過渡方案。該模擬器避開復(fù)雜的函數(shù)和公式，以圖形化的界面，動(dòng)畫的形式直觀展示函數(shù)應(yīng)用后的效果，輕松突破了難點(diǎn)。通過多種教學(xué)方式相結(jié)合，較好地激發(fā)學(xué)生的學(xué)習(xí)熱情，提高了他們的自信心。

（3）課后擴(kuò)展，小組合作提升技能

在實(shí)際教學(xué)中，要使學(xué)生能及時(shí)掌握本節(jié)課的知識(shí)點(diǎn)，需要通過案例幫助學(xué)生強(qiáng)化知識(shí)點(diǎn)。因此在課后拓展環(huán)節(jié)，教師通過在平臺(tái)上發(fā)布拓展任務(wù)：以完成最美逆行者感人瞬間圖片切換顯示照片背后的故事為目標(biāo)效果，讓學(xué)生小組討論分析效果并設(shè)計(jì)實(shí)現(xiàn)，每個(gè)組員按要求完成效果并上傳到學(xué)習(xí)平臺(tái)，并參與評(píng)價(jià)。小組每個(gè)成員都需要完成該任務(wù)并上傳作為學(xué)習(xí)成果評(píng)價(jià)之一，防止部分學(xué)生吃大鍋飯。小組合作完成任務(wù)的過程就是知識(shí)應(yīng)用過程，把實(shí)現(xiàn)方法講出來，進(jìn)一步將記憶轉(zhuǎn)化為深度理解，既消化了所學(xué)知識(shí)，提升了解決問題的能力，又鍛煉了語(yǔ)言表達(dá)能力。

（4）建立雙師協(xié)同點(diǎn)評(píng)并以能力考核為重點(diǎn)的課程評(píng)價(jià)

任務(wù)完成后，傳統(tǒng)的教學(xué)過程是教師對(duì)平臺(tái)提交的作品進(jìn)行批改點(diǎn)評(píng)，在這次探究實(shí)踐中特邀請(qǐng)企業(yè)導(dǎo)師通過騰訊會(huì)議在線點(diǎn)評(píng)大家的作品。采用基于信息化技術(shù)支撐的"雙師協(xié)同教學(xué)"方式，通過具有豐富前端開發(fā)工作經(jīng)驗(yàn)的前端工程師的專業(yè)點(diǎn)評(píng)，使學(xué)生得到啟迪、指導(dǎo)和借鑒。

5）多元評(píng)價(jià)，激發(fā)學(xué)習(xí)積極性

本課程對(duì)學(xué)生的評(píng)價(jià)采用自我評(píng)價(jià)、小組互評(píng)、雙師評(píng)價(jià)相結(jié)合的方式，對(duì)學(xué)生進(jìn)行全方位的多元評(píng)價(jià)。在本次探究實(shí)踐中，多元評(píng)價(jià)主要評(píng)價(jià)以下五個(gè)方面：線上學(xué)習(xí)完成情況、課堂表現(xiàn)、知識(shí)測(cè)試、課堂作業(yè)、小組合作活動(dòng)情況。通過多元評(píng)價(jià)加強(qiáng)對(duì)學(xué)生學(xué)習(xí)過程的管理，激發(fā)學(xué)生學(xué)習(xí)的積極性，提高了教學(xué)效率。

4 探索反思

基于互聯(lián)網(wǎng)+環(huán)境下的混合式教學(xué)模式增強(qiáng)了教學(xué)的靈活性，有效地節(jié)省教學(xué)時(shí)間，提高了教學(xué)效率。學(xué)期末通過查看網(wǎng)絡(luò)教學(xué)平臺(tái)的數(shù)據(jù)，驚喜地發(fā)現(xiàn)大部分同學(xué)每個(gè)學(xué)習(xí)的任務(wù)點(diǎn)的完成率都在92%以上。有些同學(xué)反饋這樣的混合式教學(xué)模式提升了他們的學(xué)習(xí)興趣，有些同學(xué)還能在網(wǎng)絡(luò)學(xué)習(xí)平臺(tái)上提出了自己的見解和建議。這樣教學(xué)改革是有效的，但仍存在一些問題：

（1）課前通過線上微課的方式引入課程，讓學(xué)生由被動(dòng)學(xué)習(xí)向主動(dòng)學(xué)習(xí)轉(zhuǎn)變，但對(duì)于一些學(xué)習(xí)自制力差的同學(xué)，任務(wù)完成率的真實(shí)性和有效性還有待研究。（2）小組活動(dòng)包括合作學(xué)習(xí)、成果匯報(bào)等形式。雖然盡可能地優(yōu)化小組學(xué)習(xí)中個(gè)人的監(jiān)管，但吃大鍋飯的現(xiàn)象還是會(huì)存在。因此今后在評(píng)價(jià)中應(yīng)考慮更多因素。

通過一學(xué)期的探索與實(shí)踐，基于互聯(lián)網(wǎng)+環(huán)境下的混合式教學(xué)模式能極大提高學(xué)生的學(xué)習(xí)興趣和自主學(xué)習(xí)能力。學(xué)生可以根據(jù)自己的實(shí)際學(xué)習(xí)情況，利用網(wǎng)絡(luò)平臺(tái)上豐富的學(xué)習(xí)資料，查缺補(bǔ)漏，和老師互動(dòng)交流，完成測(cè)試檢驗(yàn)自己的學(xué)習(xí)情況。教師通過不斷的研究學(xué)習(xí)信息化手段，教學(xué)能力得以提升。總之，基于互聯(lián)網(wǎng)+環(huán)境下的混合式教學(xué)模式利用微課程能有效調(diào)動(dòng)同學(xué)們的學(xué)習(xí)積極性，教學(xué)效果得到了顯著提高。

參考文獻(xiàn)：

[1] 斐華艷.微課程在遠(yuǎn)程開放教育中的應(yīng)用研究[D].甘肅廣播電視大學(xué)學(xué)報(bào)，2014.

[2] 張麗娜.基于微課環(huán)境的暖通類課程群混合式教學(xué)模式構(gòu)建與實(shí)施[J].寧波工程學(xué)院學(xué)報(bào)，2016，28（2）：91-95.

[3] 王麗英.“互聯(lián)網(wǎng)+”加出職業(yè)教育新模式——江蘇信息職業(yè)技術(shù)學(xué)院探索“互聯(lián)網(wǎng)+”背景下的教育改革[N].中國(guó)教育報(bào)，2015-11-30.

[4] 曹周天.微課程制作要樹立四種觀念[N].中國(guó)教育報(bào)，2013-11-06（9）.

[5] 阮高峰.微課與混合式教學(xué)設(shè)計(jì)[EB/OL].（2017-11-06～2018-01-21）.https：//www.icourse163.org/course/detail.htm？cid=1002110006.

【通聯(lián)編輯：代影】