羅 劍，邢 翠，聶 鑫

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

0 引言

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

1 文獻(xiàn)綜述

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

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

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

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

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

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

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

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

學(xué)完Web 前端技術(shù)課程后，學(xué)生可從事網(wǎng)頁制作、網(wǎng)頁設(shè)計(jì)、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ā)點(diǎn)，重視教學(xué)的情感目標(biāo)與學(xué)生的職業(yè)素質(zhì)。在課程建設(shè)中引入課程思政，前端技術(shù)是設(shè)計(jì)技術(shù)的分支，美育教育要先行，設(shè)計(jì)與創(chuàng)作過程要注入工匠精神，注入家國情懷，傳播社會(huì)主義核心價(jià)值觀與正能量，潛移默化培養(yǎng)有理想、有信心、有廣度、有深度的社會(huì)主義建設(shè)者和接班人。

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

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

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

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

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

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

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

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

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

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

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

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

隨著技術(shù)的不斷發(fā)展及企業(yè)對(duì)前端工程師的知識(shí)需求變化，課程資源建設(shè)應(yīng)對(duì)知識(shí)進(jìn)行調(diào)整，以便學(xué)生能更快地融入企業(yè)項(xiàng)目開發(fā)中。調(diào)整的知識(shí)如下：新增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è)對(duì)前端工程師的要求接軌，學(xué)生即學(xué)即用。

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

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

5.1 教學(xué)大綱編寫

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

5.2 教材編寫

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

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

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

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

5.4 課程案例與項(xiàng)目編制

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

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

6 結(jié)語

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

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