混合式教學(xué)模式下Web 前端技術(shù)教學(xué)資源建設(shè)研究

羅 劍，邢 翠，聶 鑫

（1.武漢晴川學(xué)院 計算機學(xué)院，湖北武漢 430204；2.武漢信息傳播職業(yè)學(xué)院，湖北 武漢 430223；3.武漢工程大學(xué)計算機科學(xué)與工程學(xué)院，湖北武漢 430200）

0 引言

隨著前端技術(shù)的發(fā)展，越來越多的Web 系統(tǒng)注重前端界面的美觀易用、布局合理、交互友好等，前端工程師逐漸從軟件開發(fā)人才崗位中細(xì)分出來。企業(yè)對前端技術(shù)人才需求也日益增長，要求前端工程師掌握專業(yè)的前端技術(shù)，特別是高階的前端技術(shù)，如框架應(yīng)用、前端工程化、Web 全棧開發(fā)等。目前很多高校都開設(shè)了與HTML、JavaScript 等技術(shù)相關(guān)的課程，學(xué)生在學(xué)習(xí)編程的同時也學(xué)習(xí)前端網(wǎng)頁開發(fā)技術(shù)，但大部分課程體系與資源建設(shè)都比較陳舊，沒有跟上前端技術(shù)發(fā)展與企業(yè)用人需求的變化，特別是在移動互聯(lián)網(wǎng)與大前端趨勢下，高校的前端課程資源急需跟上技術(shù)的發(fā)展。隨著近年來技術(shù)的發(fā)展，特別是移動互聯(lián)網(wǎng)的出現(xiàn)，移動設(shè)備大量增加，手機上網(wǎng)用戶越來越多。為了更好地適應(yīng)前后端分離的軟件架構(gòu)，各種前端框架層出不窮，企業(yè)也開始大量招聘專業(yè)的前端工程師［1］。前端技術(shù)的培養(yǎng)不是簡單講授就可使學(xué)生掌握相關(guān)內(nèi)容，在前后端分離的軟件架構(gòu)中，前端工程師懂得更多的后端技術(shù)會更有優(yōu)勢。為滿足企業(yè)的用人需求，本文提出大前端的課程結(jié)構(gòu)與課程資源建設(shè)，采用混合式教學(xué)模式開展教學(xué)工作。在混合式課程教學(xué)模式下，學(xué)生線上能了解最新的流行前端框架，自我學(xué)習(xí)欲望更強；線下課程交流掃除學(xué)習(xí)難點，配合動態(tài)的課程資源，更有利于學(xué)生跟上前端技術(shù)步伐。本文研究了混合式教學(xué)模式下如何實施大前端課程教學(xué)，探索對應(yīng)的教學(xué)資源建設(shè)工作，為師生提供更多的優(yōu)質(zhì)教學(xué)資源，從而提升教學(xué)效率、保障教學(xué)效果。

1 文獻綜述

為改善Web 前端開發(fā)技術(shù)課程案例教學(xué)中知識點單一、綜合性不強和項目式教學(xué)中學(xué)生失去項目選擇自由、缺乏團隊協(xié)同開發(fā)實踐等問題，相關(guān)研究提出基于知識共享的小組項目式作業(yè)教學(xué)。以小組項目式作業(yè)形式布置給學(xué)生，學(xué)生自由組合成項目小組，每小組推舉組長一名，共同完成項目選題、分工和開發(fā)，要求在規(guī)定時間內(nèi)完成項目，進行項目展示與答辯［2］。該教學(xué)方法有利于提高學(xué)生項目協(xié)作能力，有助于學(xué)生在綜合實踐中創(chuàng)新，但是對于基礎(chǔ)薄弱的學(xué)生如果沒有教學(xué)資源保障，則在項目中難于動手，項目很難推進。為改變傳統(tǒng)教學(xué)單一教學(xué)方法的不足，在構(gòu)建主義和知識共享理論基礎(chǔ)上，羅才華［3］提出基于Web 前端技術(shù)課程的“三段式”教學(xué)改革方法，根據(jù)各階段教學(xué)內(nèi)容和學(xué)生知識體系不同，采用翻轉(zhuǎn)課堂、任務(wù)驅(qū)動、項目教學(xué)等不同的教學(xué)方法。該教學(xué)方法既有利于提高學(xué)生的自主學(xué)習(xí)能力和創(chuàng)新能力，又能促進學(xué)生養(yǎng)成知識共享行為與習(xí)慣，最大程度地優(yōu)化學(xué)生的學(xué)習(xí)路徑。該教學(xué)方法綜合了多種教學(xué)手段，取長補短，在教學(xué)中可以靈活使用，但對教學(xué)內(nèi)容和知識體系上如何和教學(xué)方法結(jié)合研究還不夠深入。

混合式教學(xué)方法讓學(xué)生從被動接受者轉(zhuǎn)變?yōu)橹鲃訁⑴c者。李莉［4］針對Web 技術(shù)課程需求，研究基于網(wǎng)絡(luò)的教學(xué)設(shè)計模型，提出一種混合式教學(xué)設(shè)計方案，有效整合線上與線下教學(xué)，但課程內(nèi)容集中在基礎(chǔ)的前端知識，對于復(fù)雜的前端框架和前后端架構(gòu)建設(shè)談及較少。

混合式教學(xué)模式需要為學(xué)生創(chuàng)造情景，提供教學(xué)資源。教學(xué)資源是混合式教學(xué)模式開展的關(guān)鍵和前提。在ADDIE 教學(xué)設(shè)計模型構(gòu)建中，教學(xué)資源建設(shè)是一個重要環(huán)節(jié)，好的教學(xué)資源能夠幫助學(xué)生取得事半功倍的學(xué)習(xí)效果［5］。在Web 前端技術(shù)課程中使用混合式教學(xué)，需要線上和線下結(jié)合，要將最新的項目管理方法與前端技術(shù)融入課程。

2 教學(xué)資源建設(shè)要求與目標(biāo)

Web 前端技術(shù)課程教學(xué)資源建設(shè)要從以教師的“教”為中心轉(zhuǎn)變?yōu)橐詫W(xué)生的“學(xué)”為中心，在前端設(shè)計中注重培養(yǎng)學(xué)生的動手能力，以企業(yè)優(yōu)秀的前端工程案例為引導(dǎo)，鼓勵學(xué)生模仿，反思前端的外觀設(shè)計與交互設(shè)計，然后進行重構(gòu)與創(chuàng)新，實現(xiàn)模仿、吸收、思辨、創(chuàng)新；在交互邏輯的編程訓(xùn)練中著重培養(yǎng)學(xué)生的編程思維和交互邏輯設(shè)計而非基本的編程語法。在內(nèi)容組織上將線上資源與教材融合，將知識模塊與二維碼結(jié)合，構(gòu)建無處不在的學(xué)習(xí)空間；重視學(xué)生的參與，打造Web2.0 平臺，學(xué)生既是知識的使用者也是教學(xué)資源的創(chuàng)建者，達到共享學(xué)習(xí)資源，最終實現(xiàn)微內(nèi)容群服務(wù)［6］。

資源建設(shè)要求提供帶二維碼的教材，方便學(xué)生快速找到對應(yīng)的線上教學(xué)資源。學(xué)生能在線上平臺創(chuàng)建學(xué)習(xí)空間并創(chuàng)建資源，教師或管理員對資源進行審核，對通過審核的資源進行共享。教學(xué)資源建設(shè)要理論結(jié)合實踐，提供豐富的教學(xué)案例情景，學(xué)生進入情景中完成項目，鍛煉解決實際問題的能力。

Web 前端技術(shù)教學(xué)授課模式采用混合式教學(xué)，目標(biāo)分5 個階段完成（見表1）。

Table 1 Web front-end technology course goal analysis表1 Web 前端技術(shù)課程目標(biāo)分解

學(xué)完Web 前端技術(shù)課程后，學(xué)生可從事網(wǎng)頁制作、網(wǎng)頁設(shè)計、Web 前端開發(fā)、頁面重構(gòu)、網(wǎng)頁標(biāo)準(zhǔn)化制作等工作。

3 教學(xué)資源建設(shè)思路

Web 前端技術(shù)課程資源建設(shè)要以學(xué)生為中心，結(jié)合學(xué)生情況與企業(yè)需求制定教學(xué)資源建設(shè)思路。

（1）教學(xué)過程中德技雙修，全方位育人。以課程思政為出發(fā)點，重視教學(xué)的情感目標(biāo)與學(xué)生的職業(yè)素質(zhì)。在課程建設(shè)中引入課程思政，前端技術(shù)是設(shè)計技術(shù)的分支，美育教育要先行，設(shè)計與創(chuàng)作過程要注入工匠精神，注入家國情懷，傳播社會主義核心價值觀與正能量，潛移默化培養(yǎng)有理想、有信心、有廣度、有深度的社會主義建設(shè)者和接班人。

（2）逆向工程式的教學(xué)資源建設(shè)思路。先深入企業(yè)對Web 前端工程師崗位進行調(diào)研，分析企業(yè)用人技能與素質(zhì)需求，然后結(jié)合教學(xué)經(jīng)驗與學(xué)情分析數(shù)據(jù)，將企業(yè)開發(fā)技能進行理論分解，歸納關(guān)鍵點、技能點以及工作流程，形成標(biāo)準(zhǔn)化教材開發(fā)流程。整個流程從企業(yè)到教學(xué)，而不是從教學(xué)到企業(yè)。

（3）以項目貫穿和案例分析模塊為主線進行內(nèi)容組織。分析學(xué)生學(xué)習(xí)特點與知識吸收度，結(jié)合學(xué)生已有的知識體系及學(xué)習(xí)能力，采取以項目貫穿和案例分析為主線的“雙核”內(nèi)容組織思路。對于理論性強的課程采取以案例分析為主，加深原理和思想的理解和升華；對于實踐性強的課程采取以項目貫穿為主的內(nèi)容組織思路，重點訓(xùn)練學(xué)員的實踐動手能力和綜合運用能力。

（4）建設(shè)立體化、多層次、可擴展的教學(xué)資源庫［7］。教學(xué)資源立體化包括教材、教學(xué)課件、案例庫、項目庫、試題庫、教學(xué)指導(dǎo)手冊、學(xué)習(xí)手冊、視頻等教學(xué)資源多層次，分層訓(xùn)練基礎(chǔ)知識、基本知識和提高知識，逐級提升學(xué)生能力。教學(xué)資源可擴展，師生共同建設(shè)，通過平臺不斷沉淀優(yōu)秀案例，資源不斷更新。

4 Web 前端技術(shù)知識結(jié)構(gòu)

結(jié)合企業(yè)對人才的技能需求和計算機相關(guān)專業(yè)人才培養(yǎng)方案進行分析，根據(jù)Web 前端技術(shù)的知識體系與學(xué)生的學(xué)習(xí)特點分為6 個模塊［8］，如圖1 所示。

Fig.1 Knowledge modules of Web front-end courses圖1 Web 前端課程知識模塊

（1）Web 前端基礎(chǔ)知識，包括頁面切圖、原型建模、HT?ML5CSS3、JavaScript、ECMAScript。

（2）Web 前端核心技術(shù)，其重點技能包括BOM&DOM編程、jQuery 函數(shù)庫、HTTP 協(xié)議、AJAX 應(yīng)用、調(diào)試技術(shù)。

（3）Web 前端高級知識，其重點技能包括響應(yīng)式布局、Bootstrap 框架、H5 高級特性、數(shù)據(jù)可視化。

（4）H5 移動端開發(fā)，其重點技能包括移動端適配、We?bApp、微信公眾號Node.js、模塊化構(gòu)建關(guān)系型數(shù)據(jù)庫&非關(guān)系型數(shù)據(jù)庫、前端工程化、項目管理技術(shù)、微信小程序、HybridApp、支付寶小程序等。

（5）Web 前端3 大主流框架，其重點技能包括Angular及其生態(tài)圈、Vue.js 及其生態(tài)圈、React 及其生態(tài)圈。

（6）Web 全棧進階技術(shù)，其重點技能包括Node.js、模塊化構(gòu)建關(guān)系型數(shù)據(jù)庫與非關(guān)系型數(shù)據(jù)庫、前端工程化、項目管理技術(shù)。

隨著技術(shù)的不斷發(fā)展及企業(yè)對前端工程師的知識需求變化，課程資源建設(shè)應(yīng)對知識進行調(diào)整，以便學(xué)生能更快地融入企業(yè)項目開發(fā)中。調(diào)整的知識如下：新增Redis數(shù)據(jù)庫、Node.js 集群、壓縮模塊等性能優(yōu)化內(nèi)容；新增Web安全講解；新增域名購買、云服務(wù)器使用、Git 和Github 使用等內(nèi)容；新增RESTful 規(guī)范、WEB 調(diào)試和性能分析、Reset 和Normalize.css、Animate.css，降低jQuery 比重；增加async/await、ES6 模塊規(guī)范、原生觸屏事件、TypeScript 語言；新增Worker 性能優(yōu)化、Socket.IO 框架、mpvue 框架、支付寶和百度小程序；增加Flux 和Redux、爬蟲技術(shù)、二維碼處理、Web?pack 深入、Dart&Flutter、PWA、WebGL 和3D 開發(fā)、VR&AR。這些新增技術(shù)與目前企業(yè)對前端工程師的要求接軌，學(xué)生即學(xué)即用。

5 教學(xué)資源建設(shè)過程

教學(xué)資源建設(shè)首先要設(shè)置規(guī)范標(biāo)準(zhǔn)，然后根據(jù)教學(xué)目標(biāo)確定不同層次與性質(zhì)的教學(xué)資源。教學(xué)資源一般包括教學(xué)大綱、教材、教學(xué)視頻、課程案例、實驗手冊、教學(xué)手冊、項目庫、教學(xué)評價題庫等。

5.1 教學(xué)大綱編寫

教學(xué)大綱是一種指導(dǎo)性教學(xué)資源，是Web 前端技術(shù)課程所有教學(xué)活動的綱領(lǐng)性文件，其內(nèi)容由教學(xué)目標(biāo)和課程特點確定。在Web 前端技術(shù)課程的教學(xué)大綱中要圍繞課程性質(zhì)、教學(xué)目標(biāo)（知識目標(biāo)、技能目標(biāo)、素質(zhì)目標(biāo)）、教學(xué)重難點、課程單元與內(nèi)容、實驗內(nèi)容、學(xué)時、考核方式等展開。

5.2 教材編寫

教材是一種重要的知識載體。教材中每一章分為理論部分和上機操作部分，理論部分以知識模塊和案例模塊組成雙核模式，邊學(xué)邊練。教材還包括指導(dǎo)部分，幫助學(xué)生梳理知識。通過小項目鞏固知識，強化動手能力。提出項目需求，指導(dǎo)學(xué)生分析項目，從而提升學(xué)生解決實際問題的能力。教材中的每個知識案例都配有二維碼，將線上資源很好地融入線下學(xué)習(xí)，為混合式教學(xué)、翻轉(zhuǎn)課堂提供視頻資源，擴展了學(xué)習(xí)空間。

5.3 教學(xué)課件與視頻錄制

教學(xué)課件制作以問題導(dǎo)向為主，采用3W1H（Why、What、Where、How）模式進行制作，注重知識的導(dǎo)入、講解、案例分析與操作實踐，過程流暢清晰，統(tǒng)一風(fēng)格，圖文并茂，通過動畫分析程序的流程和解決問題的思路。采用思維導(dǎo)圖進行課程總結(jié)，構(gòu)建知識體系。

教學(xué)視頻錄制以示范編碼為主，通過小視頻示范編碼規(guī)范、程序編寫與運行，將抽象的知識具體化，讓學(xué)生有直觀的感覺，幫助理解抽象理論［9］。

5.4 課程案例與項目編制

課程案例圍繞知識點和常見問題來編制，讓學(xué)生分析問題和解決問題，這樣才能將知識內(nèi)化，提升學(xué)習(xí)效果。案例一般包括問題需求、分析思路、參考代碼、分析和總結(jié)。

項目庫建設(shè)分為貫穿項目和課程綜合項目。貫穿項目是將項目分解到每個章節(jié)，每學(xué)習(xí)一個章節(jié)完成項目的一個部分，不斷增加和迭代最終完成項目。綜合項目為學(xué)生學(xué)完課程知識后運用所學(xué)知識完成課程設(shè)計的項目，考核知識的綜合運用能力。

6 結(jié)語

在混合式教學(xué)模式下，線上教學(xué)重點是要建設(shè)線上的課程資源，利用線上課程資源更新的便利性構(gòu)建出與時俱進的優(yōu)質(zhì)教學(xué)資源，學(xué)生所學(xué)即所用，與企業(yè)技術(shù)接軌，注重教學(xué)資源的實戰(zhàn)化；線下教學(xué)資源建設(shè)注重學(xué)生主體，提高參與度，注重案例分析、設(shè)計思辨與設(shè)計創(chuàng)新；線下項目資源注重前端工程化、系統(tǒng)性思維和項目管理能力培養(yǎng)?；旌鲜浇虒W(xué)模式下的教學(xué)更加靈活，優(yōu)質(zhì)的教學(xué)資源對教學(xué)有較大幫助［10］。

Web 前端技術(shù)課程資源建設(shè)是一個無止境的過程，知識、案例、項目等都需要不斷優(yōu)化和擴充，要將學(xué)生納入進來，提升學(xué)生的參與感。線上教學(xué)資源可以以學(xué)生為制作主體，教師來審核。優(yōu)化教學(xué)資源導(dǎo)航，提高資源獲取效率；在線課程與案例資源結(jié)合，提升學(xué)生的動手實踐能力；重視學(xué)習(xí)體驗，提升學(xué)習(xí)流暢感；課程資源建設(shè)體現(xiàn)課程思政、工學(xué)結(jié)合的思想；多方參與課程建設(shè)，注重系統(tǒng)思維，課程之間銜接合理；基于大數(shù)據(jù)的教學(xué)質(zhì)量分析與考核，打造智能學(xué)習(xí)平臺。Web 前端技術(shù)課程教學(xué)資源建設(shè)后期需要結(jié)合學(xué)情大數(shù)據(jù)，更精準(zhǔn)地補短板，為教學(xué)資源優(yōu)化提供數(shù)據(jù)支撐。