web 前端應(yīng)用開發(fā)技術(shù)課程混合式教學(xué)探索與實(shí)踐

楊 云，張 劍

（西南石油大學(xué) 計(jì)算機(jī)科學(xué)學(xué)院，成都 610500）

隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，web（全球廣域網(wǎng)或萬維網(wǎng)）應(yīng)用開發(fā)分工越來越細(xì)，出現(xiàn)了web 前端開發(fā)、后端應(yīng)用開發(fā)和移動應(yīng)用開發(fā)等工作崗位，其分工明確又緊密配合。伴隨著移動互聯(lián)網(wǎng)技術(shù)的普及應(yīng)用，前端開發(fā)工程師的需求越來也大。從當(dāng)前企業(yè)的崗位要求反觀，既要求具備web 前端技術(shù)的基本技能——HTML5、CSS3 和JavaScript 等，又要求能較熟練地應(yīng)用Vue、React 等主流前端框架，同時(shí)還提出了前端工程化、web 全棧開發(fā)等要求。

目前很多高校都開設(shè)了web 前端相關(guān)的課程，但大多都存在課程體系和教學(xué)內(nèi)容陳舊的問題，難以滿足企業(yè)對相關(guān)人才的需求。近10 年移動互聯(lián)網(wǎng)飛速發(fā)展，移動網(wǎng)絡(luò)用戶呈現(xiàn)出爆炸式增長，基于前后端分離的web開發(fā)模式得到大量應(yīng)用，前端框架層出不窮，對前端開發(fā)人員也提出了更高的要求。

一、課程教學(xué)現(xiàn)狀

西南石油大學(xué)計(jì)算機(jī)科學(xué)學(xué)院（以下稱“本?！保┯?jì)算機(jī)類專業(yè)開設(shè)web 前端課程有2018—2022 年時(shí)間，目前已達(dá)到每年選課人數(shù)規(guī)模超過500 人。另外根據(jù)對專業(yè)學(xué)生就業(yè)情況的統(tǒng)計(jì)發(fā)現(xiàn)，有超過30%的學(xué)生所從事的工作為web 前端方向，還有相當(dāng)比例的學(xué)生會涉及到web 前端方面的相關(guān)工作，可以看出學(xué)生對本課程的重視程度及就業(yè)的重要性。因此，在本校計(jì)算機(jī)類專業(yè)中開設(shè)本課程也從最初的軟件工程專業(yè)逐步增加到所有專業(yè)，反映出本課程在計(jì)算機(jī)類專業(yè)中占有越來越重要的地位。從近年來的教學(xué)情況來看，課程在教學(xué)過程中也相應(yīng)的面臨著一些問題，主要體現(xiàn)在以下幾方面。

（一）教學(xué)方式單一，知識難以內(nèi)化

課程采用傳統(tǒng)教學(xué)模式，主要以老師課堂講授為主，結(jié)合知識點(diǎn)講解，學(xué)生被動接受，課堂參與度不夠，積極性不高，在課程的學(xué)習(xí)過程中逐漸失去學(xué)習(xí)的興趣。

web 前端技術(shù)知識點(diǎn)多而零散，并且缺少邏輯關(guān)聯(lián)性。在HTML（超文本標(biāo)記語言）中包含有大量的標(biāo)記符號，CSS（層疊樣式表）中又存在著各式各樣的樣式屬性，這些內(nèi)容的熟練使用需要長時(shí)間地訓(xùn)練進(jìn)行內(nèi)化。在完成課程知識點(diǎn)的學(xué)習(xí)后不少學(xué)生難以完成一個(gè)美觀的web 頁面，主要原因在于缺少項(xiàng)目的訓(xùn)練將這些零散知識點(diǎn)梳理成體系，將所學(xué)知識內(nèi)化。

（二）教學(xué)內(nèi)容簡單

目前本校的web 前端開發(fā)技術(shù)課程設(shè)定為48 學(xué)時(shí)，含實(shí)驗(yàn)教學(xué)24 學(xué)時(shí)，在有限的課堂教學(xué)里重點(diǎn)講授HTML5、CSS3、JavaScript 及JQuery 等前端基礎(chǔ)知識，教學(xué)時(shí)間倉促而緊張，大部分是知識點(diǎn)的串講，缺少整體知識體系的融合，大部分學(xué)生難以對所學(xué)內(nèi)容加以實(shí)際應(yīng)用，造成“教”與“學(xué)”的脫節(jié)。同時(shí)前端技術(shù)更新快，目前課堂教學(xué)內(nèi)容主要對頁面標(biāo)記、樣式屬性及Java-Script 基礎(chǔ)應(yīng)用展開講解，并不足以滿足當(dāng)前企業(yè)對前端工程師的工作需求。除此以外，還需要掌握前端主流開發(fā)框架、版本控制管理工具及瀏覽器調(diào)試技能等。應(yīng)適應(yīng)實(shí)際工作崗位需求的課程設(shè)置，從企業(yè)實(shí)際需求角度出發(fā)，培養(yǎng)企業(yè)真正需要的人才。

（三）難以滿足不同層次人才的培養(yǎng)要求

web 前端應(yīng)用開發(fā)技術(shù)課程在本校目前集中在二年級和三年級開課。這個(gè)階段學(xué)生的一個(gè)顯著特點(diǎn)就是開始“分流”，一些自制力好，學(xué)習(xí)能力強(qiáng)的學(xué)生已逐步建立專業(yè)知識體系，提前學(xué)習(xí)了部分課程的相關(guān)內(nèi)容，課堂教學(xué)內(nèi)容大部分已經(jīng)掌握，希望通過學(xué)習(xí)具備更深層次的能力；部分學(xué)生缺乏明確目標(biāo)，完全跟著課堂走。在一個(gè)教學(xué)班級中針對這些水平迥異的個(gè)體難以做到差異化培養(yǎng)，往往采用一致的灌輸式教學(xué)，對學(xué)生來講不夠友好和人性化，也不符合高校培養(yǎng)不同層次人才的目標(biāo)。

二、混合式教學(xué)方案探索與實(shí)踐

針對上面所總結(jié)的本校web 前端應(yīng)用開發(fā)技術(shù)課程所存在的教學(xué)方面的不足，結(jié)合教育部高等教育司司長提出的“淘汰‘水課’，打造‘金課’”的要求，經(jīng)課程組討論后決定改變傳統(tǒng)模式教學(xué)，逐步轉(zhuǎn)變?yōu)榛诨ヂ?lián)網(wǎng)教學(xué)平臺的混合式教學(xué)模式，逐步改善和提升課堂教學(xué)質(zhì)量。目前依托超星課程中心建設(shè)線上課程資源，實(shí)施和開展線上線下教學(xué)活動。

（一）課程資源建設(shè)

混合式教學(xué)需要線上教學(xué)資源予以支撐，包括實(shí)驗(yàn)庫、案例庫、教學(xué)視頻及項(xiàng)目庫等。為了解決web 前端課程在教學(xué)過程中的問題，課程組決定分三步進(jìn)行實(shí)施。

第一步借助于校企合作產(chǎn)學(xué)研協(xié)同育人項(xiàng)目，引入企業(yè)課程教學(xué)資源。課程組教師加強(qiáng)與企業(yè)的溝通，學(xué)習(xí)其優(yōu)秀的教學(xué)內(nèi)容、教學(xué)方法及課程案例，加以消化吸收。

第二步結(jié)合本校具體情況基于超星課程中心平臺建設(shè)打造課程教學(xué)資源，制定新的教學(xué)體系。逐步完成教學(xué)課件、教學(xué)視頻、教學(xué)題庫、教學(xué)項(xiàng)目案例和教學(xué)實(shí)驗(yàn)指導(dǎo)書等資源的建設(shè)，形成自身的教學(xué)成果。

第三步豐富和完善web 前端知識體系，形成一個(gè)完整的大前端課程庫，可滿足不同層次的學(xué)習(xí)需要。并基于其形成一批教學(xué)成果，為一流課程、金課等課程申報(bào)做準(zhǔn)備。

（二）引入課程思政元素

課程思政是高校以習(xí)近平新時(shí)代中國特色社會主義思想為指導(dǎo)，以習(xí)近平總書記關(guān)于教育工作的重要論述為根本遵循，落實(shí)立德樹人根本任務(wù)的重要舉措。

在本課程中切入思政要點(diǎn)，將專業(yè)知識與思政元素有機(jī)結(jié)合，幫助學(xué)生樹立正確的人生觀和價(jià)值觀。web前端的界面設(shè)計(jì)，可以美育先行；界面效果可以有多種實(shí)現(xiàn)途徑，可引導(dǎo)學(xué)生多方位多角度思考和分析問題；前端系統(tǒng)的深度迭代可培養(yǎng)學(xué)生精益求精的工匠精神；實(shí)踐中的分工協(xié)作可培養(yǎng)相互信任、相互溝通和協(xié)同合作的精神和能力。

（三）教學(xué)內(nèi)容改革

web 前端所包含的內(nèi)容多而雜，教學(xué)內(nèi)容過于廣泛化，有限的課堂學(xué)時(shí)限制了教學(xué)內(nèi)容的多樣化。線上線下混合式教學(xué)模式以線上資源（課件、視頻、練習(xí)作業(yè)和測試）建立課程的相關(guān)內(nèi)容，可充分發(fā)揮互聯(lián)網(wǎng)的優(yōu)勢，不斷地建設(shè)優(yōu)化和完善相應(yīng)的教學(xué)資源。教學(xué)內(nèi)容不再局限于課堂，形式多樣、層次感強(qiáng)，較好地兼容不同層次的學(xué)生需求，因此在web 前端應(yīng)用開發(fā)技術(shù)課程中對教學(xué)內(nèi)容也做出了相應(yīng)的改變，見表1。

表1 web 前端混合式教學(xué)內(nèi)容

其中HTML5、CSS3、JavaScript 和JQuery 是基礎(chǔ)內(nèi)容，要求每位學(xué)生都需要學(xué)習(xí)掌握。同時(shí)為了進(jìn)一步貼近企業(yè)對web 前端人才的需求，目前課程建設(shè)了基于Vue、微信小程序和webpack 等知識模塊的資源。針對課程內(nèi)容知識面廣，學(xué)生水平參差不齊的問題，以混合式模式予以解決。對于學(xué)習(xí)能力強(qiáng)，水平較高的同學(xué)可借助開放的課程資源深入學(xué)習(xí)，通過線上的教學(xué)視頻學(xué)習(xí)并完成配套作業(yè)、實(shí)驗(yàn)。為了鼓勵(lì)學(xué)生自學(xué)，在對可選模塊進(jìn)行學(xué)習(xí)并完成相關(guān)作業(yè)和練習(xí)后給予一定程度的附加分。

建設(shè)項(xiàng)目案例，結(jié)合課程知識點(diǎn)逐步完成一個(gè)小型前端項(xiàng)目，充分整合HTML5、CSS、JS、JQuery 及Vue 等技術(shù)知識。案例貫穿課程始終，以知識點(diǎn)為基礎(chǔ)，內(nèi)化零散知識點(diǎn)。

（四）教學(xué)方式改革

混合式教學(xué)不再局限于課堂內(nèi)教學(xué)，因此教學(xué)方式相比于傳統(tǒng)模式也有了較大的改變，本課程將教學(xué)分為課前、課中和課后三個(gè)不同的階段。

1.課前

學(xué)生課前通過線上教學(xué)視頻、教學(xué)課件了解此次課程的學(xué)習(xí)目標(biāo)，需要完成相應(yīng)的學(xué)習(xí)任務(wù)和配套練習(xí)作業(yè)，記錄學(xué)習(xí)過程中存在的問題及收獲，學(xué)習(xí)平臺記錄學(xué)習(xí)的時(shí)間。老師通過平臺可查看學(xué)生的學(xué)習(xí)時(shí)間、學(xué)習(xí)情況和作業(yè)完成情況等，做到課前心里有數(shù)。

2.課中

課堂上不再由老師灌輸式講解知識點(diǎn)，將課堂講授轉(zhuǎn)變?yōu)檎n堂交流，由老師組織學(xué)生進(jìn)行討論。將課前學(xué)生們所記錄和反饋的問題收集，然后討論解決，針對普遍性的問題有針對性地提出解決方法，經(jīng)討論后形成最終解決方案。在實(shí)踐環(huán)節(jié)著重編程中典型錯(cuò)誤或問題通過代碼展示，界面實(shí)現(xiàn)效果等展開討論，形成討論交流的良好氛圍。

討論過程中以不同方法引導(dǎo)學(xué)生思考，并尋求問題的答案。啟發(fā)式教學(xué)是當(dāng)前課堂教學(xué)中常用的方法之一，老師通過某個(gè)典型場景提出問題，引導(dǎo)學(xué)生一步步解決問題。如在Cookie（儲存在用戶本地終端上的數(shù)據(jù)）知識學(xué)習(xí)時(shí)提出，常見的web 系統(tǒng)登錄中，常常看到“下次自動登錄”“7 天免登錄”等勾選框，在完成選擇后如何實(shí)現(xiàn)下次不再登錄的效果？引出在考試過程中不需要知道考試時(shí)間將結(jié)束，只需要知道最終結(jié)束時(shí)間即可，從而引入cookie 的過期時(shí)間等知識點(diǎn)。

貫穿始終的項(xiàng)目案例講解。案例可將所學(xué)知識內(nèi)化，典型通用的項(xiàng)目案例能突出知識的重點(diǎn)和應(yīng)用。在課程實(shí)施中較難做到貫穿始終的項(xiàng)目案例，往往僅針對單一的知識點(diǎn)進(jìn)行案例講解，缺乏系統(tǒng)性和完整性，學(xué)生們在完成課程知識的學(xué)習(xí)后并不能有效地整合內(nèi)化，形成自己的知識。因此在課堂教學(xué)中以一個(gè)整體項(xiàng)目結(jié)合課程的主要知識點(diǎn)，循序漸進(jìn)形成完整的小型項(xiàng)目，并模擬完成，實(shí)現(xiàn)知識點(diǎn)的系統(tǒng)化應(yīng)用，提升學(xué)生的學(xué)習(xí)興趣和自信心。

3.課后

課后老師通過課程中查看學(xué)生所完成的作業(yè)，跟蹤了解學(xué)生的學(xué)習(xí)情況。針對學(xué)習(xí)中的問題可在課程中心進(jìn)行答疑，也可在課程釘釘群進(jìn)行解答。同時(shí)對每次的優(yōu)秀作業(yè)選取部分進(jìn)行展示，提升學(xué)生的成就感。

（五）實(shí)驗(yàn)教學(xué)改革

web 前端應(yīng)用開發(fā)技術(shù)課程實(shí)踐性強(qiáng)，為強(qiáng)化學(xué)生動手能力，本校課程設(shè)置實(shí)驗(yàn)上機(jī)學(xué)時(shí)為24 學(xué)時(shí)，占總課時(shí)的50%。以前實(shí)驗(yàn)上機(jī)以學(xué)生個(gè)人為單位，獨(dú)立完成實(shí)驗(yàn)項(xiàng)目，實(shí)驗(yàn)內(nèi)容更多側(cè)重于驗(yàn)證型及少量綜合型，對于知識的綜合應(yīng)用能力稍顯欠缺。

企業(yè)對于人才除了有專業(yè)能力上的需求以外，往往對溝通、團(tuán)隊(duì)協(xié)作等方面也有著較高的要求。為了更全面地培養(yǎng)學(xué)生各方面的能力，針對課程的實(shí)驗(yàn)教學(xué)進(jìn)行了改革探索，主要包含兩個(gè)方面。一是實(shí)驗(yàn)內(nèi)容不再基于知識點(diǎn)的驗(yàn)證，通過設(shè)計(jì)綜合型實(shí)驗(yàn)項(xiàng)目，整合課程所有知識點(diǎn)，以項(xiàng)目形式驅(qū)動實(shí)驗(yàn)，通過完成實(shí)驗(yàn)理解和掌握相關(guān)課程內(nèi)容，最終完成項(xiàng)目開發(fā)。二是實(shí)驗(yàn)以小組為單位，每組不超過4 人，針對實(shí)驗(yàn)項(xiàng)目進(jìn)行分工，充分使用項(xiàng)目開發(fā)和管理工具，協(xié)作完成項(xiàng)目開發(fā)。

實(shí)驗(yàn)成績從兩個(gè)方面進(jìn)行衡量，一是個(gè)人所承擔(dān)的工作和完成的質(zhì)量，二是小組工作完成的質(zhì)量，各占50%。既考查了專業(yè)知識的掌握程度，又兼顧了團(tuán)隊(duì)協(xié)作能力的培養(yǎng)和考查。

（六）課程考核改革

傳統(tǒng)課程考核方式單一，主要由平時(shí)成績（30%）+期末考試（70%）構(gòu)成，在混合式教學(xué)中已不再適合。為了公平公正地進(jìn)行考核，合理地反映出學(xué)生的真實(shí)情況，課程考核轉(zhuǎn)變?yōu)閷W(xué)習(xí)過程的考核，考核的方式直接作用于教學(xué)效果，在考核過程中發(fā)現(xiàn)問題可持續(xù)進(jìn)行改進(jìn)和優(yōu)化教學(xué)方式，不斷完善和提升教學(xué)過程，形成良性循環(huán)。

目前本校web 前端應(yīng)用開發(fā)技術(shù)課程考核成績主要由四部分組成，分別為平時(shí)成績、實(shí)驗(yàn)成績、期末成績及附加成績，見表2。

表2 考核標(biāo)準(zhǔn)

平時(shí)成績主要是學(xué)習(xí)過程的反映，以課前、課中和課后三個(gè)不同階段，涉及到學(xué)生的課程資源學(xué)習(xí)、課堂出勤、作業(yè)完成情況、課堂互動、課堂小測試及問題反饋交流等多個(gè)方面，共占40%。實(shí)驗(yàn)成績主要針對課程的實(shí)驗(yàn)練習(xí)，分小組進(jìn)行完成，每個(gè)組3～5 人，共同完成一個(gè)前端項(xiàng)目，每人在小組中承擔(dān)不同的工作任務(wù)，最后根據(jù)成員或團(tuán)隊(duì)的工作量和完成質(zhì)量進(jìn)行評分，實(shí)驗(yàn)成績共占30%，個(gè)人與團(tuán)隊(duì)成績各占15%。期末成績占30%，考核方式不再拘泥于考試，也可采用大作業(yè)等方式。同時(shí)為了鼓勵(lì)學(xué)生學(xué)以致用，將所學(xué)知識用以解決實(shí)際問題，考慮了20%的附加分，課程總成績100，超過100 記為100 分。

（七）教學(xué)效果

web 前端應(yīng)用開發(fā)技術(shù)課程混合式教學(xué)的實(shí)施對象是計(jì)算機(jī)科學(xué)與技術(shù)2019 級專業(yè)的學(xué)生，兩個(gè)教學(xué)班級共124 人，與前期相比成績有不同程度提升，平均成績提升4.87%；及格率達(dá)到97.5%，提升約8%。除了課程成績和及格率的提升以外，另一個(gè)明顯的改變體現(xiàn)在隨著課堂互動的增加，學(xué)生較以前更活躍，跟老師、同學(xué)的感情也日益深厚，課堂也不再像以前過于沉悶，真正踐行了“在快樂學(xué)習(xí)，在快樂中成長”的教學(xué)目標(biāo)。實(shí)施結(jié)果反應(yīng)出混合式教學(xué)效果明顯，也更能提升學(xué)生學(xué)習(xí)的興趣，促進(jìn)其自主學(xué)習(xí)的積極性和主動性。

三、結(jié)束語

互聯(lián)網(wǎng)技術(shù)的深入應(yīng)用使得線上線下混合教學(xué)得以實(shí)現(xiàn)，線上教學(xué)可實(shí)現(xiàn)教學(xué)過程的記錄，實(shí)時(shí)跟蹤學(xué)習(xí)過程，全程掌握學(xué)習(xí)情況，并能及時(shí)匯總統(tǒng)計(jì)教學(xué)過程的數(shù)據(jù)，發(fā)現(xiàn)存在的教學(xué)問題，實(shí)現(xiàn)有效的教學(xué)質(zhì)量把控。在新型的教學(xué)模式下，老師和學(xué)生的角色發(fā)生了轉(zhuǎn)變，老師從傳統(tǒng)的知識講授、管理者轉(zhuǎn)換為學(xué)習(xí)指導(dǎo)、促進(jìn)者；學(xué)生則從被動接受者轉(zhuǎn)變?yōu)橹鲃訉W(xué)習(xí)者，充分發(fā)揮出學(xué)生學(xué)習(xí)的積極性和主動性，激發(fā)其學(xué)習(xí)的興趣。

混合式教學(xué)模式在本校web 前端應(yīng)用開發(fā)技術(shù)課程中得以應(yīng)用，展現(xiàn)出了其優(yōu)越性的一面，相較于傳統(tǒng)的課堂教學(xué)，學(xué)生的成績和綜合能力均有一定程度的提升。但也存在一些問題，主要表現(xiàn)在學(xué)生能力的差異對課程資源的建設(shè)和教學(xué)過程的要求不同，需要有針對性地因材施教，避免打擊自學(xué)能力強(qiáng)的學(xué)生的學(xué)習(xí)興趣，或造成學(xué)習(xí)能力弱的學(xué)生懈??；線上學(xué)習(xí)的實(shí)時(shí)跟蹤，做到隨時(shí)掌握學(xué)生的具體情況，需要投入較多的時(shí)間和精力；多門課程同時(shí)采用混合式教學(xué)可能造成教學(xué)安排的混亂。以上所遇到的問題，在今后的教學(xué)過程中值得進(jìn)一步改進(jìn)。