混合式教學模式下Web 前端技術教學資源建設研究

羅 劍，邢 翠，聶 鑫

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

0 引言

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

1 文獻綜述

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

混合式教學方法讓學生從被動接受者轉變為主動參與者。李莉［4］針對Web 技術課程需求，研究基于網絡的教學設計模型，提出一種混合式教學設計方案，有效整合線上與線下教學，但課程內容集中在基礎的前端知識，對于復雜的前端框架和前后端架構建設談及較少。

混合式教學模式需要為學生創造情景，提供教學資源。教學資源是混合式教學模式開展的關鍵和前提。在ADDIE 教學設計模型構建中，教學資源建設是一個重要環節，好的教學資源能夠幫助學生取得事半功倍的學習效果［5］。在Web 前端技術課程中使用混合式教學，需要線上和線下結合，要將最新的項目管理方法與前端技術融入課程。

2 教學資源建設要求與目標

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

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

Web 前端技術教學授課模式采用混合式教學，目標分5 個階段完成（見表1）。

Table 1 Web front-end technology course goal analysis表1 Web 前端技術課程目標分解

學完Web 前端技術課程后，學生可從事網頁制作、網頁設計、Web 前端開發、頁面重構、網頁標準化制作等工作。

3 教學資源建設思路

Web 前端技術課程資源建設要以學生為中心，結合學生情況與企業需求制定教學資源建設思路。

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

（2）逆向工程式的教學資源建設思路。先深入企業對Web 前端工程師崗位進行調研，分析企業用人技能與素質需求，然后結合教學經驗與學情分析數據，將企業開發技能進行理論分解，歸納關鍵點、技能點以及工作流程，形成標準化教材開發流程。整個流程從企業到教學，而不是從教學到企業。

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

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

4 Web 前端技術知識結構

結合企業對人才的技能需求和計算機相關專業人才培養方案進行分析，根據Web 前端技術的知識體系與學生的學習特點分為6 個模塊［8］，如圖1 所示。

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

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

（2）Web 前端核心技術，其重點技能包括BOM&DOM編程、jQuery 函數庫、HTTP 協議、AJAX 應用、調試技術。

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

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

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

（6）Web 全棧進階技術，其重點技能包括Node.js、模塊化構建關系型數據庫與非關系型數據庫、前端工程化、項目管理技術。

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

5 教學資源建設過程

教學資源建設首先要設置規范標準，然后根據教學目標確定不同層次與性質的教學資源。教學資源一般包括教學大綱、教材、教學視頻、課程案例、實驗手冊、教學手冊、項目庫、教學評價題庫等。

5.1 教學大綱編寫

教學大綱是一種指導性教學資源，是Web 前端技術課程所有教學活動的綱領性文件，其內容由教學目標和課程特點確定。在Web 前端技術課程的教學大綱中要圍繞課程性質、教學目標（知識目標、技能目標、素質目標）、教學重難點、課程單元與內容、實驗內容、學時、考核方式等展開。

5.2 教材編寫

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

5.3 教學課件與視頻錄制

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

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

5.4 課程案例與項目編制

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

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

6 結語

在混合式教學模式下，線上教學重點是要建設線上的課程資源，利用線上課程資源更新的便利性構建出與時俱進的優質教學資源，學生所學即所用，與企業技術接軌，注重教學資源的實戰化；線下教學資源建設注重學生主體，提高參與度，注重案例分析、設計思辨與設計創新；線下項目資源注重前端工程化、系統性思維和項目管理能力培養。混合式教學模式下的教學更加靈活，優質的教學資源對教學有較大幫助［10］。

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