“Web前端開發(fā)”混合教學模式探索與實踐

摘要：本文探索了線上線下混合教學模式，并以“Web前端開發(fā)”課程為例，從課程資源建設、教學方式、實驗與實訓及考核四個方面進行線上線下融合改革，以期能夠提升學生學習的參與感與成就感。

關鍵詞：Web前端開發(fā);混合式教學;教學內(nèi)容;教學方式;實踐

中圖分類號：G717? 文獻標識碼：A? 論文編號：1674-2117（2021）22-0104-05

隨著互聯(lián)網(wǎng)技術的發(fā)展，Web開發(fā)分工越來越細，出現(xiàn)了Web前端開發(fā)、移動開發(fā)、后端開發(fā)等崗位，它們分工明確且緊密配合。從當前互聯(lián)網(wǎng)公司的就職要求來看，除了必須掌握HTML5、CSS3和JavaScript等的基礎技能外，還需要熟悉vue、react等前端框架，熟悉后臺管理系統(tǒng)的開發(fā)全流程。針對Web前端開發(fā)人才的需求，筆者所在學院計算機科學與技術專業(yè)開設了“Web前端開發(fā)”課程，但課程內(nèi)容總體比較滯后，教學方法比較單一，因此，筆者結(jié)合自身的教學實踐，提出了線上線下混合式教學模式，從課程的教學內(nèi)容、教學方法、課程實踐、課程考核方式四個方面進行改革與實踐，以提升學生的學習興趣和動手能力。[1]

● 課程設計

1.教學中引入思政元素

立德樹人是永恒的主題，教師需在教學中加入思政元素，如前端技術涉及界面設計，可以美育先行;一種界面效果有多種實現(xiàn)方法，需要培養(yǎng)學生多角度思考和分析問題的能力;代碼的設計與調(diào)試過程需要培養(yǎng)學生的工匠精神，注入家國情懷，培養(yǎng)正確的世界觀、人生觀、價值觀以及勇于挑戰(zhàn)困難的精神。[2]

2.教學內(nèi)容改革

Web前端開發(fā)技術所包含的內(nèi)容較多，目前主要以HTML+CSS+JavaScript為基礎課程，其知識面相對較廣，因而教學設計需要注重整體性，讓學生掌握多方面的知識，從而取得較好的教學質(zhì)量。同時，基于混合式的教學模式，建設多層次可擴展的教學資源庫尤其重要。教學資源包括教學課件、上機指導手冊、實驗庫、案例庫、試題庫、項目庫、教學視頻等，這些資源又分為基礎知識和提高知識。根據(jù)學生的不同基礎，逐級提高學生的水平。需要注意的是，課程內(nèi)容要與時俱進、由淺入深，可以考慮將主流Web前端開發(fā)技術引入課堂，要求學生至少掌握一種前端框架的使用方法，重點培養(yǎng)學生的實踐應用、規(guī)范代碼編寫等能力。[3]

3.教學方式的改革

（1）課前充分預習

課前學生通過視頻教程、PPT了解學習目標，知道學習任務，記錄不懂的問題，寫下學習心得。教師端可以通過雨課堂記錄學生出勤情況，還可通過在線習題，了解學生自學后的知識掌握情況。

（2）課中交流討論

課中是對學生預習的檢驗，教師提前審閱學生的心得體會，收集問題，并把學生不理解的內(nèi)容在課堂上討論解決。教師可針對典型問題提出最基本的解決方案，然后由學生討論，找到最佳解決方案。尤其在項目實踐過程中，定期開展交流活動，將編碼中典型的錯誤或?qū)W生都困惑的知識點，通過界面效果、代碼展示開展編程思路討論，為學生創(chuàng)造相互學習和交流的機會。

（3）課中問題啟發(fā)

啟發(fā)式教學是教師經(jīng)常使用的教學方法之一，即由教師提出問題引導學生思考，問題要具備典型性和實際性。例如，在Web前端開發(fā)中，教師展示表單的應用場景，如去銀行柜臺填寫開卡申請單，填寫網(wǎng)站注冊信息等，再提出問題“如何在網(wǎng)頁中實現(xiàn)表單？”，并以各大網(wǎng)站的登錄頁面為例，引出頁面中的控件、表單的命名、數(shù)據(jù)傳送方式等知識點。由此可見，與實際相關聯(lián)的知識，可以讓學習服務于實際應用，從應用角度出發(fā)學習知識，學生也更有興趣。[4]

（4）課中案例講解

Web開發(fā)離不開對各種案例的講解，案例教學可引導學生將知識轉(zhuǎn)變?yōu)槟芰?。案例的設置要具有典型性和通用性，突出知識的重點和知識的應用。例如，在講解JavaScript語法時，教師可以給出帶有錯誤的完整代碼，要求學生找出錯誤，引導學生注意語法細節(jié)。又如，導航欄是現(xiàn)在的主流網(wǎng)站都具有的功能，學生拿到案例后，先要進行分析，再經(jīng)過小組討論，提出解決問題的方案。教師再根據(jù)學生不同的理解，通過案例分析、知識點的分解、動畫演示等一系列方法，消除學生的疑惑，讓學生掌握Web前端開發(fā)相關技術，這樣才能將知識內(nèi)化，提升學習效率。

（5）課中原理剖析

教學中，教師圍繞問題要點解析背后原理，并在講解JavaScript中的變量時引出問題：直接輸出一個a的值，為什么會出錯？如果后面再用var來聲明變量a，為什么沒有出錯？在學生討論之后再講解JavaScript引擎的工作機制。在進行原理講解前，教師可以使用程序編輯器現(xiàn)場展示具體操作過程及相關代碼運行后的具體效果。需要注意的是，在進行原理講解的過程中，需要與提出的問題高度關聯(lián)，結(jié)合所提出問題的具體情況進行教學，分步驟講解，最后還需要進行知識的歸納總結(jié)，給出參考代碼等輔助學生的后續(xù)實踐操作。

（6）課后在線作業(yè)答疑及成果展示

教師通過雨課堂可查看課后作業(yè)，客觀題可以要求學生在線回答提交，程序題可將源代碼或截圖發(fā)布到班級QQ群。另外，學生遇到的問題也可通過雨課堂提出評論反饋，或通過QQ群、微信群等即時通信工具進行交流和答疑。最后，把每次作業(yè)中的優(yōu)秀作品放到教學平臺上展示，方便學生瀏覽學習，提升學生的成就感。

4.實驗與實訓改革

“Web前端開發(fā)”課程的實踐性非常強，學生需要通過寫代碼，調(diào)試代碼，不斷地總結(jié)才能獲取技術的積累。但學院里規(guī)定這門課程的上機課僅16課時，學生要在短時間內(nèi)做到熟練開發(fā)項目是有難度，鑒于學生動手能力參差不齊、個人的就業(yè)方向不同等因素，筆者采取了因材施教的方式開展實踐教學。

（1）課內(nèi)實驗

從培養(yǎng)學生基本動手能力的角度出發(fā)，實驗設置由易到難，以下要求是每個學生都必須達到的：①能看懂課件、教材中的示例代碼;②分析以上示例代碼，明白代碼設計的邏輯性，參照所給示例代碼上機調(diào)試;③獨立思考完成單一效果的編碼工作，如導航欄;④用不同的方式實現(xiàn)這單一效果，如同一個布局效果，可以用表格展示，也可以用Div+CSS布局來展示商品信息，又如輪播圖可以用CSS實現(xiàn)，也可以用JavaScript實現(xiàn)，進而達到訓練學生不同角度思考問題和解決問題的能力;⑤完成一個復雜的效果，如用Javascript操作DOM在前端進行增刪改，在交互編程訓練中培養(yǎng)學生的編程思維;⑥模擬現(xiàn)實作品的實驗，將現(xiàn)實中網(wǎng)站的網(wǎng)頁截圖，先引導學生分析頁面結(jié)構——如何用盒子模型及定位進行頁面整體布局、每個盒子中用到哪些樣式整個頁面有響應事件、有哪些交互的效果，并按照分析的結(jié)果自己寫頁面代碼，完成后再參照其源碼，通過代碼對比，分析哪部分可以用不同的方法來實現(xiàn)，哪些地方原版的設計更好或自己的代碼比原版的更好，在前端開發(fā)學習前期鼓勵學生模仿優(yōu)秀的作品，實現(xiàn)創(chuàng)作、吸收、改進、創(chuàng)新;⑦模擬現(xiàn)實問題的實驗，如需要開發(fā)一個學生管理系統(tǒng)，給出功能列表，鼓勵學生先做出初型框架，然后循序漸進，逐步完善樣式和交互部分，在完善的過程中，依次加入任務的難度和復雜度，訓練學生調(diào)試和查錯的能力，使其在完善任務的過程中掌握所學的知識，提升學生Web前端開發(fā)技術動手能力。

模擬現(xiàn)實問題的實驗，學生除了要提交源碼，還需要提交書面形式的問題描述、解決方法及編碼時的心得體會。教師可要求對學生進行答辯，讓學生嘗試分解復雜問題，然后尋找方法解決。教師從界面設計的合理性和代碼編寫的邏輯性方面來進行作業(yè)點評。

（2）實驗室訓練營

學院實驗室利用平時或寒暑假時間開設訓練營，根據(jù)學生的基礎課程成績及訓練營的筆試、面試結(jié)果，選拔優(yōu)秀本科生入營。學院將課程分為不同的等級（如表1），對課內(nèi)所學的基礎知識進行拓展和延伸。實驗室有專業(yè)的教師開展培訓講座、重點競賽指導等，還會有一些前沿的項目或?qū)嶋H的工程實踐課題。在訓練營中，學生自由組合并推選組長，在項目實踐過程中，組長主要負責組內(nèi)各類學習事務安排、學習檢查、實驗考核等工作。在合作過程中，組長相當于項目經(jīng)理，負責項目分工及進度跟蹤匯報等工作，這樣能模擬企業(yè)的項目開發(fā)，加深學生對專業(yè)知識的理解和鞏固，激發(fā)學生利用學到的知識解決實際問題。

（3）以賽促學

學院重視為學生參加各類比賽的機會，促使學生通過參賽發(fā)現(xiàn)自己知識儲備的不足，進而不斷完善，這樣既鞏固了基礎知識又拓展了前沿技術。另外，依照比賽的等級及獲獎級別和名次，給予學生對應的獎金和創(chuàng)新學分，使學生更有成就感。

（4）校外實訓

學校的上機實驗任務設置相對比較簡單，學生所學與企業(yè)所需略微有些脫節(jié)。因此，學院里開設了為期2周的企業(yè)實訓課，讓學生走進企業(yè)，了解當前最新的技術，跟著實踐經(jīng)驗豐富的技術人員學習，這樣就培養(yǎng)了學生發(fā)現(xiàn)問題和分析問題的能力。校企合作有利于把企業(yè)先進技術和學校理論相結(jié)合，實現(xiàn)全方位協(xié)同育人的實踐平臺，使學生畢業(yè)后能盡快融入工作中，勝任行業(yè)發(fā)展需求。[5]

● 考核改革

課程傳統(tǒng)的考核方式是平時成績+期末成績，但在混合式教學模式中，這種評價體系顯然是片面的。因此，需要改革考核方式，保證合理且公平地反映學生各方面的學習情況。考核方式直接作用于教學效果，教師通過考核發(fā)現(xiàn)問題，在此基礎上改進、優(yōu)化教學方式，不斷提升學習效率和質(zhì)量，這是一個良性發(fā)展的過程。

筆者對原有考核內(nèi)容進行了修改（如表2），考核成績主要分為四大塊，即平時成績+企業(yè)實訓+期末大作業(yè)+競賽附加分，平時成績又分為課前、課中、課后及過程性考核四個方面。期末大作業(yè)會提前2周發(fā)布題目及詳細功能要求，學生可以自由結(jié)合成小組（不超過3人）。個人和小組均需在規(guī)定的時間內(nèi)完成項目要求的所有功能，個人完成項目以項目分數(shù)為個人最終成績，小組共同完成項目用小組平均分作為個人基礎分，根據(jù)貢獻程度的不同確定權重，基礎分和加權分之和為個人最終成績。實驗室訓練營是為感興趣的學生進行延伸拓展服務的，為他們參加競賽奠定了技術基礎，這里實驗室訓練營不作為考核項，而將競賽獲獎作為一個加分項。[6]

● 教學效果

“Web前端開發(fā)”課程混合式教學實施對象是筆者所在學院計算機科學與技術專業(yè)20190231的學生，與計算機科學與技術專業(yè)20180231采用傳統(tǒng)教學方法進行對比，平均成績總體提高5.9%，不及格率為0，教學效果明顯?；旌鲜浇虒W模式更能督促學生努力學習。

● 結(jié)語

混合式教學給學生提供了更多的線上交流機會，需要學生提前預習相關知識、思考頁面實現(xiàn)方法、準備交流的問題和資料，學生的學習主動性和積極性明顯提高。在解決問題和技術交流的過程中，學生對Web頁面開發(fā)知識掌握得更加準確、扎實、系統(tǒng)化?；旌鲜浇虒W給學生留出了更多的自我思考和實際操作時間，小組合作方式更好地模擬了企業(yè)中Web網(wǎng)站開發(fā)的工作流程和環(huán)境。企業(yè)實訓、實驗室訓練營及競賽提前做了職業(yè)分流，讓畢業(yè)后有志于從事Web開發(fā)的學生提前了解了公司的工作環(huán)境、Web開發(fā)流程、所需要的知識技能，鍛煉了他們的合作能力，提高了他們的自學能力和解決問題能力，為以后的正式工作打下了良好的基礎。

參考文獻：

[1]劉競遙，陳一笑，趙歡歡，等.基于泛雅平臺的Web前端開發(fā)技術課程混合教學模式的分析[J]，遼寧科技學院學報，2019，21（06）：47-48，40.

[2]張芳，鄒俊.后MOOC時代SPOC線上線下混合教學模式的實踐與探索[J].湖北經(jīng)濟學院學報：人文社會科學版，2018，15（11）：148-151.

[3]劉雅君，袁婷，謝國，等.新工科背景下《Web前端開發(fā)技術》的PBL教學改革與實踐[J].電腦知識與技術，2021，17（07）：127-128.

[4]王毅，張滬寅，黃建忠，等.基于“四類型六環(huán)節(jié)”實驗教學體系建設物聯(lián)網(wǎng)工程專業(yè)實驗案例庫[J].實驗技術與管理，2019，36（07）：174-178.

[5]劉渝妍，何俊，王亞寧，等.校企協(xié)同育人模式探索與實踐[J].福建電腦，2021，37（02）：37-41.

[6]劉雅君，李愛民，謝國，等.延期返校背景下編程實踐類課程考核工作改革和實踐——以Web 前端開發(fā)技術課程為例[J].計算機教育，2021（02）：9-12.

作者簡介：黃歡（1982.12—），女，助教，主要研究方向為模式識別與智能控制。