Web前端開發(fā)課程項目式教學(xué)改革與實踐

李娟，李宏博，蘇丹，李梓，譚琨，李欣

Web前端開發(fā)課程項目式教學(xué)改革與實踐

李娟，李宏博，蘇丹，李梓，譚琨，李欣

（大慶師范學(xué)院 計算機科學(xué)與信息技術(shù)學(xué)院，黑龍江 大慶 163712）

項目式教學(xué)是一種全方位、立體化應(yīng)用型人才培養(yǎng)模式的創(chuàng)新和實踐．以Web應(yīng)用開發(fā)應(yīng)用型人才為培養(yǎng)方向，依托網(wǎng)絡(luò)教學(xué)平臺，提出“教、學(xué)、練、賽”四位一體的項目式教學(xué)模式，實現(xiàn)由課堂“教-練”為主的傳統(tǒng)課堂教學(xué)模式，向課前“學(xué)-練”、課中“教-評”與課后“練-賽”結(jié)合的項目式教學(xué)模式轉(zhuǎn)變．通過項目式訓(xùn)練將理論與工程實踐相結(jié)合，激發(fā)學(xué)生的學(xué)習(xí)內(nèi)驅(qū)力，提升學(xué)生的應(yīng)用技能和創(chuàng)新力，培養(yǎng)高質(zhì)量專業(yè)人才.

項目式教學(xué)；OBE理念；融合式教學(xué)；自主學(xué)習(xí)

在疫情防控常態(tài)化背景下，高校教師踐行OBE教育理念，采用創(chuàng)新教學(xué)模式加強高校應(yīng)用型人才培養(yǎng)是亟待解決的關(guān)鍵問題．為了進一步提高高校工程教育質(zhì)量，結(jié)合企業(yè)技術(shù)領(lǐng)域和職業(yè)崗位需求，采用項目式教學(xué)是高校實現(xiàn)全方位、立體化應(yīng)用型人才培養(yǎng)的創(chuàng)新舉措，勢在必行．高校的一線教師需要從思想上轉(zhuǎn)變觀念，要轉(zhuǎn)變傳統(tǒng)課堂教學(xué)“重理論、輕實踐”和滿堂“灌輸式”的教學(xué)方式，從行動上積極應(yīng)對后疫情時代線上線下混合式教學(xué)．本文對計算機專業(yè)Web前端開發(fā)基礎(chǔ)課程線上線下混合式教學(xué)改革進行實踐探索，結(jié)合教學(xué)實踐提出“教、學(xué)、練、賽”四位一體的項目式教學(xué)模式，開展翻轉(zhuǎn)課堂混合式教學(xué)[1]，使學(xué)生在理解知識的基礎(chǔ)上，運用知識、內(nèi)化知識、掌握技能．一個良好的實踐教學(xué)體系的實施正是對學(xué)生在本科階段技能應(yīng)用的一個完整訓(xùn)練，通過對實踐類課程教學(xué)模式改革，激發(fā)學(xué)生的學(xué)習(xí)興趣，提升學(xué)生的編程能力和計算思維、創(chuàng)新能力等方面的綜合素質(zhì)，同時縮短了“學(xué)生”向“軟件開發(fā)工程師”過渡的過程，也能為企業(yè)減少培養(yǎng)資金，節(jié)約成本[2].

1　Web前端開發(fā)基礎(chǔ)課程特點

應(yīng)用型人才的培養(yǎng)需要明確專業(yè)目標、調(diào)整課程教學(xué)體系、轉(zhuǎn)變教學(xué)方式和改革評價方式，Web前端開發(fā)基礎(chǔ)課程具有較強的基礎(chǔ)性、綜合性、實踐性和前沿性特點．

1.1 基礎(chǔ)性強

Web應(yīng)用技術(shù)的應(yīng)用領(lǐng)域非常廣泛，信息技術(shù)隨著“互聯(lián)網(wǎng)+”時代的到來，與其他專業(yè)領(lǐng)域的廣泛滲透融合，已經(jīng)應(yīng)用在生產(chǎn)生活的方方面面．Web應(yīng)用技術(shù)課程已經(jīng)成為計算機科學(xué)與技術(shù)、軟件工程等計算機類專業(yè)學(xué)生必修的重要基礎(chǔ)性課程．

1.2 綜合性強

Web 前端開發(fā)課程涉及內(nèi)容較為廣泛，知識繁雜，有很強的綜合性，對學(xué)生的綜合能力培養(yǎng)具有較高要求．一般教材組織HTML，CSS，JavaScript等教學(xué)內(nèi)容時會出現(xiàn)前后教學(xué)內(nèi)容相互脫節(jié)，案例不成體系并缺乏聯(lián)系的問題，在學(xué)習(xí)過程中會影響學(xué)生的學(xué)習(xí)興趣、編程的熱情和信心.

1.3 實踐性強

本課程也是理論與實踐相結(jié)合的課程，必須通過大量的實驗和實踐環(huán)節(jié)，循序漸進地提升Web應(yīng)用開發(fā)的專業(yè)知識和程序設(shè)計實操能力．脫離了實踐的Web前端開發(fā)課程，學(xué)習(xí)過程就是紙上談兵[3]．

1.4 前沿性強

隨著Web應(yīng)用開發(fā)技術(shù)的持續(xù)發(fā)展，Web前端技術(shù)開發(fā)工具以及相關(guān)設(shè)計技術(shù)在飛速地更新迭代．現(xiàn)有教材中大都使用舊版本的Web開發(fā)工具進行案例教學(xué)設(shè)計，出現(xiàn)教材使用的Web開發(fā)工具滯后于企業(yè)流行的開發(fā)工具的現(xiàn)象，容易產(chǎn)生教學(xué)內(nèi)容過時，與實際市場需求的編程技術(shù)脫節(jié)等現(xiàn)象．因此，教學(xué)中不能完全依賴教材，需要根據(jù)企業(yè)技術(shù)的更新，不斷修正教學(xué)計劃，才能較好地滿足市場對于Web應(yīng)用人才的需求．

2 構(gòu)建“教、學(xué)、練、賽”四位一體的項目式教學(xué)模式

2.1　以項目驅(qū)動式為基本教學(xué)方法

項目式教學(xué)法實質(zhì)上是一種基于建構(gòu)主義學(xué)習(xí)理論的探究性學(xué)習(xí)模式[4]，學(xué)生不適合完全被動地接受知識，學(xué)習(xí)的實質(zhì)是不斷構(gòu)建新舊知識間聯(lián)系的過程．

項目式學(xué)習(xí)強調(diào)真實“情境”下的探索性學(xué)習(xí)，在完成一個完整的項目過程中通過自主學(xué)習(xí)直接參與教學(xué)全過程，在達成“意義建構(gòu)”學(xué)習(xí)過程的終極目標過程中，增強對知識的理解[5]．離散性的知識點融會貫通于項目中，學(xué)生的綜合能力得到有效鍛煉，同時也能夠檢驗學(xué)生對知識的理解和掌握程度．學(xué)生渴求所學(xué)知識在真實項目場景中應(yīng)用，項目驅(qū)動式教學(xué)法為學(xué)生賦能，學(xué)生具有了學(xué)習(xí)的源動力，潛能得到激發(fā)，自主學(xué)習(xí)能力得到提升，真正意義上激發(fā)了學(xué)生的學(xué)習(xí)熱情，對課程教學(xué)活動起到積極的驅(qū)動作用[6]．

2.2 “教、學(xué)、練、賽”項目式教學(xué)模式

在深度分析學(xué)生學(xué)習(xí)特點和企業(yè)真實需求的基礎(chǔ)上，結(jié)合本課程特點，采用項目式的教學(xué)設(shè)計，利用現(xiàn)代化教學(xué)手段改進實踐類課程的教學(xué)．在教學(xué)過程中采用教與練結(jié)合的基本教學(xué)方式，并創(chuàng)設(shè)實際應(yīng)用場景，讓學(xué)生先觀看項目功能演示，再回溯知識點并完善知識體系[7]．然后在教師引導(dǎo)下，加強項目式訓(xùn)練，使學(xué)生掌握實操的步驟和要領(lǐng)，達到知識要求和能力要求，同時完善過程性考核標準．“教、學(xué)、練、賽”四位一體的項目式教學(xué)模式解決了教師如何“教”、學(xué)生如何“學(xué)”和如何“練”，并通過“以賽促教”形成良性循環(huán)的教學(xué)閉環(huán)，學(xué)生在企業(yè)應(yīng)用性的項目中學(xué)習(xí)，漸進性并且有針對性地在工程訓(xùn)練中獲得實踐能力的提升[8]．

2.2.1 改進如何“教” 在Web前端開發(fā)基礎(chǔ)課程的教學(xué)過程中，通過課前自主學(xué)習(xí)、課中互動討論和課后拓展鞏固３個基本教學(xué)環(huán)節(jié)，“教、學(xué)、練、賽”融入到這3個教學(xué)環(huán)節(jié)過程中，從而學(xué)生能夠理解和運用、內(nèi)化知識，掌握技能．

以項目“說旅游”專題頁制作為例，通過項目實踐考察學(xué)生對制作圖文混排頁面的相關(guān)知識點的熟練程度．課前教師錄制項目教學(xué)短視頻，從項目運行演示、任務(wù)模塊的知識講解和項目實操過程3個方面精心進行教學(xué)設(shè)計．項目實操過程中，根據(jù)實際Web前端開發(fā)產(chǎn)品的項目開發(fā)流程的4個基本步驟組織教學(xué)：（1）完成Web頁面布局設(shè)計；（2）進行頁面樣式的設(shè)計；（3）頁面動態(tài)效果的設(shè)計；（4）相應(yīng)模塊的編寫、調(diào)試和優(yōu)化．課堂教學(xué)中采用翻轉(zhuǎn)課堂的形式進行項目式教學(xué)設(shè)計，該項目式教學(xué)模式的教學(xué)流程中3個基本教學(xué)環(huán)節(jié)和相應(yīng)教學(xué)目標的對應(yīng)關(guān)系見圖1．

圖1 項目式教學(xué)模式的流程

課中對學(xué)生的項目實踐做評價，積極開展互動討論，對知識拓展延伸和總結(jié)，進行知識內(nèi)化并引導(dǎo)學(xué)生深度學(xué)習(xí)[9]．這種方式實現(xiàn)了由課中“教”與課后“練”相結(jié)合的傳統(tǒng)課堂教學(xué)模式，向課前“學(xué)-練”與課中“教-評”相結(jié)合的項目式深層教學(xué)模式轉(zhuǎn)變，做到“教有所指”．

2.2.2指導(dǎo)如何“學(xué)” 將班級學(xué)生分6組，每組6～8人，線上組建QQ討論組，小組內(nèi)協(xié)作討論，開展小組交流學(xué)習(xí)活動，由各組長匯報完成情況．為了幫助學(xué)生真正理解掌握每一部分教學(xué)內(nèi)容的若干知識點，不再以提交紙質(zhì)版實驗報告作業(yè)這種單一的方式檢驗學(xué)習(xí)效果，而是發(fā)布項目預(yù)習(xí)視頻，要求學(xué)生課前自主學(xué)習(xí)，通過完成同步實操練習(xí)，進行知識和技能的基礎(chǔ)訓(xùn)練，并要求學(xué)生將獨立完成的實操過程錄制視頻并講解所應(yīng)用的知識點．教師通過驗收學(xué)生的實操講解視頻作業(yè)，考核學(xué)生實驗完成度和學(xué)生對知識的理解程度，學(xué)生參與度達到100%，學(xué)習(xí)效果得到教師的有效監(jiān)督．在這個過程中，學(xué)生的知識和技能得到循序漸進的提升，通過學(xué)練結(jié)合，真正地做到“學(xué)有所得”．

2.2.3 改進如何“練” 課前學(xué)生預(yù)習(xí)網(wǎng)絡(luò)學(xué)習(xí)平臺（學(xué)習(xí)通）的教學(xué)視頻，并完成項目實踐訓(xùn)練，學(xué)生能夠模仿完成一個完整的Web前端產(chǎn)品開發(fā)的范例，在學(xué)習(xí)過程中實現(xiàn)其自我滿足感．在每一部分教學(xué)內(nèi)容結(jié)束后，教師布置拓展訓(xùn)練內(nèi)容，學(xué)生完成知識點測試題，使學(xué)生能夠準確掌握并鞏固知識點．到綜合項目設(shè)計階段學(xué)生以團隊合作方式完成項目“制作一個Web網(wǎng)站”的實戰(zhàn)訓(xùn)練，實戰(zhàn)訓(xùn)練按照項目開發(fā)流程的４個基本步驟進行．“練”融入到教學(xué)全過程，并逐步加深強化．在沒有應(yīng)用項目式教學(xué)模式時，學(xué)生練習(xí)的是基礎(chǔ)性案例，與實際項目脫節(jié)．而項目式教學(xué)，項目開發(fā)思想內(nèi)化到項目實操中，使學(xué)生逐步建立起項目開發(fā)的整體概念．在項目中學(xué)以致用，應(yīng)用技能才能得到強化訓(xùn)練，做到“練有所成”．

2.2.4 指導(dǎo)如何“賽” 通過指導(dǎo)Web編程能力突出的學(xué)生參賽，為他們指引專業(yè)學(xué)習(xí)方向和就業(yè)方向，在競賽中拓寬視野，鼓勵學(xué)生參加課外學(xué)科競賽，如“互聯(lián)網(wǎng)+大學(xué)生創(chuàng)新創(chuàng)業(yè)大賽”“藍橋杯Web應(yīng)用開發(fā)賽”等．作為入選高校教育教學(xué)改革和創(chuàng)新人才培養(yǎng)重要競賽項目，這些賽事為培養(yǎng)信息技術(shù)人才做出了突出的貢獻．通過以賽促學(xué)，學(xué)生在教師指導(dǎo)下自主學(xué)習(xí)，提前做好學(xué)習(xí)計劃并在教師監(jiān)督下執(zhí)行，學(xué)生不但提高了解決實際問題的能力，而且創(chuàng)新能力和編程能力得到加強．在指導(dǎo)競賽的過程中，教師的業(yè)務(wù)能力也不斷攀升，回歸到以賽促教，做到“賽有所獲”．

這種項目式教學(xué)模式將知識點巧妙地鏈接在一起，進而再講解剖析知識點并系統(tǒng)講解，最后將知識點放在實際的項目環(huán)境中，讓學(xué)生能夠舉一反三，加深理解和熟練運用．教師通過對學(xué)生的課內(nèi)外跟蹤指導(dǎo)，逐步鍛煉和培養(yǎng)學(xué)生自主學(xué)習(xí)和團結(jié)協(xié)作的能力，解決了學(xué)生綜合素質(zhì)的培養(yǎng)問題[10]．

3 課程的考核標準及網(wǎng)絡(luò)資源建設(shè)

3.1 完善項目式課程的考核標準

本課程考核評價方式摒棄了傳統(tǒng)試卷考試的考核方式，而采用階段性過程評價和終結(jié)性評價相結(jié)合的方式，將過程性考核貫穿于整個教學(xué)過程，更加注重考察學(xué)生的綜合能力和素質(zhì)．本課程的學(xué)習(xí)環(huán)節(jié)包含：觀看課程教學(xué)視頻，完成單元測試和作業(yè)，參與課程討論，完成項目設(shè)計實驗錄制并提交視頻，參加期末測評并完成綜合項目設(shè)計．其中，學(xué)生視頻作業(yè)重點對實操技能考核，期末測評重點對知識點掌握情況考核．期末總成績由3部分構(gòu)成：

（1）單元測試、討論、實驗作業(yè)，占課程成績的30%．

（2）課程期末測評，學(xué)生參加課程的終結(jié)性考試，占課程成績的20%．

（3）綜合項目設(shè)計，占課程成績的50%．

3.2 課程的網(wǎng)絡(luò)資源建設(shè)

在Web前端開發(fā)基礎(chǔ)課程的教學(xué)過程中，通過網(wǎng)絡(luò)教學(xué)平臺（學(xué)習(xí)通），發(fā)布課程的教學(xué)大綱、教學(xué)進度表、教學(xué)講稿、授課課件、演示案例和教學(xué)實錄視頻資源，以及階段案例教學(xué)視頻、不同階段的項目實踐訓(xùn)練教學(xué)視頻等，為學(xué)生的自學(xué)、復(fù)習(xí)提供了豐富的資源．為實現(xiàn)線上線下融合教學(xué)，采用釘釘群直播授課方式，實現(xiàn)線上線下混合式教學(xué)的課堂講授、問題討論、輔導(dǎo)、答疑等教學(xué)環(huán)節(jié)為師生之間的交流溝通建立了實時和非實時的通道．開設(shè)問題討論區(qū)和班級QQ答疑群，更好地實現(xiàn)了學(xué)生自主學(xué)習(xí)的新方式、新方法．多樣性的過程性考核方式激發(fā)了學(xué)生的學(xué)習(xí)興趣，增加了教師監(jiān)管的力度，從而學(xué)生參與度提高．今后將不斷完善和加強網(wǎng)絡(luò)平臺學(xué)習(xí)資源建設(shè)，優(yōu)化課程資源，充分利用網(wǎng)絡(luò)教學(xué)平臺對課程的教學(xué)提供強有力的支撐．

在師生共同努力下，線上實踐教學(xué)克服了很多現(xiàn)實問題，如學(xué)生實操中遇到問題時，教師通過遠程控制電腦的方式一對一地答疑；共性問題分享到討論區(qū)，及時做問題反饋；通過實操練習(xí)打卡，督促學(xué)生完成隨堂案例實操練習(xí)；教師批改作業(yè)量大，課后工作量繁重．通過不斷努力和持續(xù)改進，在教學(xué)實踐中，以期達到一個更理想的教學(xué)效果．

４ 結(jié)語

以Web應(yīng)用開發(fā)應(yīng)用型人才為培養(yǎng)方向，以計算機科學(xué)與技術(shù)專業(yè)Web前端開發(fā)基礎(chǔ)線上線下混合式課程體系建設(shè)為教學(xué)主線，構(gòu)建“教、學(xué)、練、賽”四位一體的教學(xué)模式，通過完整的實際項目過程化訓(xùn)練，培養(yǎng)了學(xué)生針對Web前端開發(fā)解決實際問題的能力和應(yīng)用能力．這種項目式教學(xué)是全方位、立體化培養(yǎng)模式的創(chuàng)新和實踐，符合高校應(yīng)用型人才的培養(yǎng)要求．

[1] 韓兵．基于項目教學(xué)的Web程序設(shè)計翻轉(zhuǎn)課堂教學(xué)模式設(shè)計[J]．?dāng)?shù)字通信世界，2022（3）：38-40．

[2] 劉陶，劉丹．產(chǎn)出導(dǎo)向的項目驅(qū)動式混合教學(xué)模式研究與實踐[J]．計算機教育，2021（10）：179-183．

[3] 高巖，林穎，吳德文，等．項目驅(qū)動的線上線下啟發(fā)式深度學(xué)習(xí)實踐教學(xué)探索[J]．計算機教育，2021（9）：51-53，57．

[4] 羅才華．基于構(gòu)建主義和知識共享的Web前端技術(shù)課程“三段式”教學(xué)改革[J]．職業(yè)教育研究，2020（4）：62-66．

[5] 隨婷婷，陳年生，黎明．項目式驅(qū)動的Web程序設(shè)計教學(xué)改革研究[J]．福建電腦，2019，35（12）：53-54．

[6] 李娟，孫濤，李宏博，等．“項目導(dǎo)入式”在線虛擬仿真實驗教學(xué)的研究與實踐[J]．電腦知識與技術(shù)，2021，17（9）：169-171．

[7] 劉國芳，鄧亞莉．“金課”背景下線上線下混合教學(xué)模式研究：以《Web前端設(shè)計與開發(fā)》課程為例[J]．電腦知識與技術(shù)，2021，17（1）：111-112．

[8] 文曉棠，許麗娟，陳艷．“金課”背景下線上線下混合教學(xué)模式研究：以Web應(yīng)用系統(tǒng)開發(fā)課程為例[J]．軟件，2020，41（7）：292-296．

[9] 李艷華，李偉鍵．項目式混合式教學(xué)法在動態(tài)網(wǎng)頁制作課程中的探索與實踐[J]．計算機教育，2019（9）：138-142．

[10] 周凌云，侯睿．以計算行動提高創(chuàng)新能力培養(yǎng)的Web設(shè)計與開發(fā)課程改革[J]．教育現(xiàn)代化，2019，6（91）：51-52．

Reform and practice of project-based teaching about Web front-end development

LI Juan，LI Hongbo，SU Dan，LI Zi，TAN Kun，LI Xin

（School of Computer Science and Information Technology，Daqing Normal University，Daqing 163712，China）

The project-based teaching is a kind of all-round，three-dimensional applied talents training mode innovation and practice．It is a training direction that Web application development applied talents. Supported by the network teaching platform，it is proposed that teaching，learning，practice，competition four aspects of hierarchical project-based teaching model．It is realized that the traditional classroom teaching model of teaching and practice transforms to a project-based teaching model of learning and practice before class，teaching and assessment in class and practice and competition after class with the combination．Through project training combining theory with engineering practice，the students are inspired to learn drive，and the students′ application skills and innovation and the high-quality training of professional talents is effectively trained．

project-based teaching； OBE concept； merge-integrated teaching； autonomous learning

1007-9831（2022）10-0078-04

TP319∶G642.0

A

10.3969/j.issn.1007-9831.2022.10.015

2022-04-25

全國高等院校計算機基礎(chǔ)教育研究會計算機基礎(chǔ)教育教學(xué)研究課題（2021-AFCEC-157，2021-AFCEC-160）；大慶師范學(xué)院“課程專項”教學(xué)改革研究項目；黑龍江省教育科學(xué)“十三五”規(guī)劃重點課題（GJB1319003）

李娟（1979-），女，黑龍江大慶人，副教授，碩士，從事云計算與大數(shù)據(jù)、傳感網(wǎng)信息融合與嵌入式協(xié)同研究．E-mail：lijuan_daqing@ yeah.net