胡龍平 楊媛媛 譚雯

摘要：有效的教學(xué)方式往往決定了教學(xué)效果，隨著“互聯(lián)網(wǎng)+”理念的不斷成型與發(fā)展，教學(xué)方法的多元化已經(jīng)成為高校教學(xué)改革的重點方向之一。具有強互動和濃厚學(xué)習(xí)氛圍的線下學(xué)習(xí)結(jié)合靈活性強、資源豐富的線上教學(xué)已經(jīng)成為教學(xué)改革的趨勢之一，本文以《前端框架技術(shù)》課程為例，探索線上線下融合教學(xué)的教學(xué)實施方案。實踐證明，《前端框架技術(shù)》的線上線下合教學(xué)模式，不但提高了學(xué)生的學(xué)習(xí)興趣，并且對教學(xué)效果的提升具有顯著影響。

關(guān)鍵詞：融合教學(xué);前端框架技術(shù);線上線下;課程改革

中圖分類號：TP309;G712文獻標識碼：A

文章編號：1009-3044（2021）18-0121-02

開放科學(xué)（資源服務(wù)）標識碼（OSID）：

Research and Practice of Online and Offline Integrated Teaching of "Front-end Framework Technology"

HU Long-ping， YANG Yuan-yuan， TAN Wen

（Hunan College of Information， Changsha 410000， China）

Abstract： Effective teaching methods often determine the teaching effect. With the continuous shaping and development of the concept of ‘Internet+， the diversification of teaching methods has become one of the key directions of college teaching reform. Offline learning with strong interaction and a strong learning atmosphere combined with flexible and resource-rich online teaching has become one of the trends in teaching reform. This article uses the "Front-end Framework Technology" course as an example to explore the teaching of online and offline integrated teaching implementation plan. Practice has proved that the online and offline teaching mode of "Front-end Framework Technology" not only improves students' interest in learning， but also has a significant impact on the improvement of teaching effects.

Key words：integrated teaching; front-end framework technology; online and offline; curriculum reform

1 融合教學(xué)模式概述

信息化時代的不斷發(fā)展，使得資源共享成為必然，慕課、超星學(xué)習(xí)通、騰訊課堂[1]等在線教學(xué)平臺應(yīng)運而生。隨著教學(xué)改革的不斷深入發(fā)展，如何在保留傳統(tǒng)線下教學(xué)優(yōu)勢的同時結(jié)合線上教學(xué)平臺進行教學(xué)方式的改革已經(jīng)成為高校教師面臨的新一輪挑戰(zhàn)[2]。

《前端框架技術(shù)》課程是計算機應(yīng)用專業(yè)的一門專業(yè)核心課程，該課程的前置課程包括《Web前端技術(shù)》、《數(shù)據(jù)庫技術(shù)》等，后置課程包括《專業(yè)技能》、《項目開發(fā)實戰(zhàn)》等。課程處于前端開發(fā)架構(gòu)中的核心地位，是目前企業(yè)級Web前端開發(fā)常用技術(shù)[3]。課程以實踐操作為主，傳統(tǒng)的線下教學(xué)，教學(xué)時間及資源有限，課程教學(xué)效果不理想，學(xué)生掛科率高，課程評價反饋不理想。因此，尋求有效的線上線下融合教學(xué)方案，使用創(chuàng)新型教學(xué)方式注入新力量，以突破傳統(tǒng)教學(xué)瓶頸成為當(dāng)代高校教師亟待解決的問題之一。

2 融合教學(xué)模式的優(yōu)勢

線上線下融合教學(xué)模式是在保留傳統(tǒng)教學(xué)優(yōu)點的基礎(chǔ)上，充分利用豐富的線上資源及教學(xué)手段，對課堂進行豐富和完善。傳統(tǒng)教學(xué)發(fā)展多年，在教學(xué)上的優(yōu)點主要體現(xiàn)在，學(xué)生與教師面對面，可以對問題進行實時的反饋與討論，課堂氣氛濃烈，學(xué)習(xí)氛圍強[4]。線上教學(xué)主要體現(xiàn)在，學(xué)生可以沒有時間和地域的限制，無論什么時候什么地點，想學(xué)就學(xué)。線上線下融合教學(xué)的主要模式為，利用線上資源實現(xiàn)基礎(chǔ)知識和理論知識的視頻錄制講解及在線作業(yè)批改，學(xué)生可以進行在線練習(xí);再結(jié)合線下課堂進行答疑指導(dǎo)。通過這種線上線下融合教學(xué)方式，教師不用再同一個知識點反復(fù)在不同班級講解，學(xué)生也能對不理解的知識點反復(fù)觀看;教師可以在線上平臺布置相關(guān)學(xué)習(xí)任務(wù)，設(shè)置學(xué)生的學(xué)習(xí)時段，可以實時了解到學(xué)生的學(xué)習(xí)進度。線上的學(xué)習(xí)可以設(shè)置在學(xué)生的課余時間，學(xué)生在自學(xué)過程中出現(xiàn)的問題及不明白的知識點，在線下答疑課程提出，教師進行講解，與學(xué)生進行互動討論、學(xué)生之間也可以進行協(xié)作互動，最終實現(xiàn)知識的內(nèi)化。

3 構(gòu)建《前端框架技術(shù)》融合教學(xué)框架

《前端框架技術(shù)》是計算機應(yīng)用技術(shù)專業(yè)的專業(yè)核心課程，課程符合專業(yè)人才培養(yǎng)方案中的培養(yǎng)目標和培養(yǎng)規(guī)格的要求，旨在培養(yǎng)學(xué)生使用Vue前端框架技術(shù)進行前端系統(tǒng)開發(fā)的能力。本課程涉及如下知識點：Vue雙向數(shù)據(jù)綁定、使用Vue內(nèi)置指令操作DOM、父子組件的通信、自定義指令、實現(xiàn)過渡與動畫的3種方式、渲染函數(shù)、使用vue-router構(gòu)建單頁面應(yīng)用、webpack的基本配置。通過本課程的學(xué)習(xí)，學(xué)生能夠熟練使用Vue指令來操作DOM元素，給多個元素或組件制作動畫，進行表格動態(tài)篩選、實現(xiàn)購物車列表、使用渲染函數(shù)循環(huán)渲染數(shù)組。

以《前端框架技術(shù)》課程目標為基礎(chǔ)，結(jié)合學(xué)生的學(xué)習(xí)需求及實際情況，《前端框架技術(shù)》課程教學(xué)利用超星學(xué)習(xí)通及騰訊課堂作為線上平臺，對線下教學(xué)進行補充，構(gòu)建線上線下的融合教學(xué)框架[5]。課程基礎(chǔ)為前端框架的理論知識，課程實現(xiàn)以實際的前端項目開發(fā)為主線，以功能模塊的實現(xiàn)任務(wù)為載體，設(shè)計具有綜合性特征的學(xué)習(xí)任務(wù)。學(xué)生通過線上的學(xué)習(xí)平臺進行課前預(yù)習(xí)、線下進行課中討論實踐、線上進行課后作業(yè)，三者自然融合進行學(xué)習(xí)。

（1） 課前：課前教師通過線上平臺進行任務(wù)布置，學(xué)生獲取到學(xué)習(xí)任務(wù)后進行學(xué)習(xí)并參與教師發(fā)布的課堂討論，教師對討論情況及學(xué)生自學(xué)過程中提出的問題進行記錄并為線下講解做準備，這一過程主要鍛煉學(xué)生的自主學(xué)習(xí)能力。

（2） 課中：課中教師針對課前自學(xué)的問題進行講解，并設(shè)計擴展性知識延伸討論題，學(xué)生進行小組討論及知識點的歸納和總結(jié)，這一過程主要培養(yǎng)學(xué)生的發(fā)散思維及團隊協(xié)作能力。

（3） 課后：經(jīng)過課中的集中討論后，教師布置相應(yīng)的課后作業(yè)，學(xué)生進行知識點的鞏固，拓展知識，培養(yǎng)學(xué)生的知識遷移能力。

這種融合模式的推行，要求教師在課前準備好課件、視頻、討論題、練習(xí)題等相關(guān)資料，并在課后對學(xué)生提交的作業(yè)和疑問進行及時的反饋。

4 教學(xué)情況分析

通過對計算機應(yīng)用技術(shù)專業(yè)18級6個班進行《前端框架技術(shù)》課程的線上線下融合教學(xué)實踐，對教學(xué)情況進行分析。使用超星學(xué)習(xí)通平臺進行一學(xué)期的課程建設(shè)及授課，統(tǒng)計到該課程的平臺訪問量為46538次，發(fā)布主題討論及課堂簽到116次，發(fā)布課堂學(xué)習(xí)任務(wù)點103次，錄制視頻124個，教學(xué)PPT13個，發(fā)布課后作業(yè)及練習(xí)18次。

整個教學(xué)過程采取理論講授、實操訓(xùn)練的教學(xué)方式。經(jīng)過16周學(xué)習(xí)，最后以上機實操的形式完成對學(xué)生的考核，具體考核方案是2道大題，主要考查學(xué)生對vue指令v-model、vue組件、vue路由知識的掌握情況。通過6個班考核結(jié)果進行分析，得出以下結(jié)論：

大部分同學(xué)能夠根據(jù)實際應(yīng)用需求，運用所學(xué)的HTML5、CSS、Vue相關(guān)知識設(shè)計簡潔、美觀的界面并實現(xiàn)相應(yīng)的功能。但是少部分同學(xué)因為對CSS、Vue等知識掌握不足導(dǎo)致所設(shè)計的前端頁面效果不甚理想。隨機選擇計應(yīng)4，5，6班的學(xué)習(xí)成績進行統(tǒng)計，得到如下圖所示的學(xué)情分析圖。

《前端框架技術(shù)》課程的綜合成績由平時成績和考試成績兩個部分構(gòu)成，其中，平時成績主要由學(xué)生的線上任務(wù)點完成情況、討論熱度、簽到、平時作業(yè)完成情況等多方面綜合考核而來。通過上述3個班的成績分布情況可以了解到，4班的整體學(xué)習(xí)氛圍及學(xué)生的學(xué)習(xí)積極性較高，因此4班的成績在整體的分布上略優(yōu)于5班和6班，通過三個班的成績分析可以看出，通過線上線下融合教學(xué)方式，《前端框架技術(shù)》課程的及格率都在85%以上，優(yōu)秀率在60%以上。課程的最終考試結(jié)果可以發(fā)現(xiàn)，線上線下融合教學(xué)，通過對教學(xué)過程的合理設(shè)計，循序漸進的引導(dǎo)學(xué)生進行學(xué)習(xí)，能有效地提高學(xué)生的知識掌握能力和自學(xué)能力，通過實際的案例驅(qū)動提高了學(xué)生的動手能力以及對知識的遷移能力。相較于傳統(tǒng)線下教學(xué)，上述數(shù)據(jù)表明，該課程采用線上線下融合教學(xué)的教學(xué)效果明顯。

5總結(jié)

《前端框架技術(shù)》課程采用線上線下的混合式教學(xué)模式彌補了傳統(tǒng)的線下教學(xué)中存在的不足之處，經(jīng)過對比發(fā)現(xiàn)，該教學(xué)模式能有效提高教學(xué)質(zhì)量，從學(xué)生的角度來說，學(xué)生能將課堂知識應(yīng)用到實際web開發(fā)過程中，達到學(xué)以致用的效果;從教師的角度來說，通過課程實踐過程及教學(xué)設(shè)計的實現(xiàn)，能夠有

效地提升自身的信息化技術(shù)利用能力和教學(xué)本領(lǐng)，對個人教學(xué)風(fēng)格的形成具有重要作用。通過融合教學(xué)實踐，發(fā)現(xiàn)教學(xué)班級人數(shù)對教學(xué)效果也有一定的影響，建議采用小班化教學(xué)。采用線上線下融合教學(xué)科研有效突破線下課程紙上談兵式的教學(xué)瓶頸，通過結(jié)合課前的線上理論知識學(xué)習(xí)、課中的重點知識講解和答疑、課后實踐的教學(xué)模式，可有效調(diào)動學(xué)生的學(xué)習(xí)積極性及自學(xué)能力及學(xué)生知識遷移的能力，教師可通過該模式進行多樣化的課堂教學(xué)。

參考文獻：

[1] 田玉琬，文成，王貴.“互聯(lián)網(wǎng)+教育”背景下混合式教學(xué)模式的淺析與探討[J].輕工科技，2020，36（12）：180-181.

[2] 王淼，陳杰.基于翻轉(zhuǎn)課堂的混合式教學(xué)模式探析[J].現(xiàn)代交際，2020（20）：215-217.

[3] 孫仕云.Web系統(tǒng)前端開發(fā)技術(shù)分析[J].通訊世界，2017（12）：267-268.

[4] 李翠蓮.在線教學(xué)與線下教學(xué)質(zhì)量實質(zhì)等效措施研究[J].大學(xué)物理，2020，39（12）：55-60.

[5] 韓奇隆，趙洪華.常見各種網(wǎng)絡(luò)教學(xué)平臺特點分析[J].科技風(fēng)，2020（28）：92-93.

【通聯(lián)編輯：梁書】