基于OBE 理念《Web 前端開發(fā)》課程教學(xué)改革

靳曉飛

河南工學(xué)院，河南 新鄉(xiāng) 453003

一、《Web 前端開發(fā)》課程的現(xiàn)狀

隨著國家對“新工科”和“雙萬計劃”建設(shè)持續(xù)推進(jìn)和互聯(lián)網(wǎng)新技術(shù)的不斷發(fā)展以及移動終端設(shè)備的普及，各種Web 應(yīng)用應(yīng)運(yùn)而生并呈爆發(fā)式增長，為前端開發(fā)者提供大量就業(yè)崗位，Web前端開發(fā)工程師已經(jīng)成為具有發(fā)展?jié)摿η疑鐣枨罅看蟮木o缺人才。Web 前端包含的知識點(diǎn)較多有各種標(biāo)簽和屬性以及屬性值，內(nèi)容龐雜而且零碎。這就要求在教學(xué)過程中，不能再像以往那樣照本宣科、灌輸式教學(xué)，應(yīng)該采用OBE 教學(xué)理念，以學(xué)生為中心，以學(xué)習(xí)成果為導(dǎo)向，采用任務(wù)項目驅(qū)動的教學(xué)方法，將知識點(diǎn)融入到教學(xué)項目案例中，幫助學(xué)生完成課程知識的建構(gòu)。

《Web 前端開發(fā)》課程是一門內(nèi)容豐富，綜合性、實踐性比較強(qiáng)，提升學(xué)生網(wǎng)站前端開發(fā)設(shè)計能力必修的專業(yè)課程，是與實際工作崗位聯(lián)系密切且實踐性較強(qiáng)的課程，也是學(xué)生掌握B/S（Browser 瀏覽器/Server 服務(wù)器模式）架構(gòu)模式項目開發(fā)能力的必修課程之一。在傳統(tǒng)教學(xué)模式中，通常以教師為中心，通過教學(xué)設(shè)計來進(jìn)行教學(xué)實施，學(xué)生被動接受課程知識。這就容易出現(xiàn)以下問題：

（一）大部分學(xué)生對知識理解的深度不夠，經(jīng)常不深入思考問題解決的方法，缺乏一個自主加工吸收知識的過程。

（二）課堂教學(xué)內(nèi)容大部由代碼構(gòu)成，代碼量普遍較大，為了讓學(xué)生掌握更多的技能，學(xué)生課程練習(xí)和作業(yè)程式化的填充代碼，編寫代碼流于形式，課程結(jié)束后無法對所學(xué)知識靈活運(yùn)用。

（三）學(xué)習(xí)監(jiān)督機(jī)制缺失。通常教師布置的學(xué)習(xí)任務(wù)，能否及時完成、是否獨(dú)立完成、完成的效果如何，沒有規(guī)范的評判標(biāo)準(zhǔn)。

（四）被動接受式學(xué)習(xí)，不利于學(xué)生的學(xué)習(xí)興趣的培養(yǎng)。

（五）學(xué)生課程達(dá)到的職業(yè)技能和素養(yǎng)，無法實現(xiàn)企業(yè)的需求和實現(xiàn)職業(yè)崗位零距離對接。

為了能夠提升教學(xué)質(zhì)量，基于OBE（Outcomes-based Education，縮寫為OBE）強(qiáng)調(diào)課程中的任何教育教學(xué)行為，都要依據(jù)學(xué)生需要最終達(dá)成的學(xué)習(xí)效果進(jìn)行課程設(shè)計和教學(xué)實施，采用OBE教學(xué)理念以成果導(dǎo)向，根據(jù)學(xué)生需達(dá)到的預(yù)期成果，進(jìn)行逆向課程設(shè)計，只有這樣才能充分保證課程的教學(xué)目標(biāo)與教育成果的一致，提升教學(xué)效果和質(zhì)量。

二、基于OBE 教學(xué)理念課程的教學(xué)改革

（一）基于OBE 的教育模式

OBE 教學(xué)理念是由美國學(xué)者斯派帝于20 世紀(jì)80 年代提出的。其內(nèi)涵可用“學(xué)生中心”“產(chǎn)出導(dǎo)向”“持續(xù)改進(jìn)”十二字來進(jìn)行概括，關(guān)注學(xué)習(xí)成果，整個課程的教學(xué)過程始終圍繞學(xué)習(xí)成果進(jìn)行開展實施［1］。

（二）教學(xué)目標(biāo)

依據(jù)學(xué)校本科數(shù)字媒體專業(yè)人才培養(yǎng)目標(biāo)要求和企業(yè)web 前段崗位對人才素質(zhì)的要求，確定合適教學(xué)總目標(biāo)。OBE 教學(xué)理念以教學(xué)結(jié)果為導(dǎo)向要求目標(biāo)的制定可以由公司企業(yè)、學(xué)校教師和學(xué)生共同討論研究提出，全方面結(jié)合學(xué)校的辦學(xué)定位、行業(yè)需求以及用人要求等因素，必須要有概括性、探究性，具有一定的引領(lǐng)性、創(chuàng)新性，體現(xiàn)Web 前端學(xué)科特色和教學(xué)的鮮明特征。

（三）教學(xué)對象

大學(xué)生Web 基礎(chǔ)較薄弱，學(xué)習(xí)興趣差異也非常明顯，接受知識與技能很被動，缺乏學(xué)習(xí)主動性，對于教師教學(xué)過程中提供的代碼一般機(jī)械地從上到下錄入一遍，調(diào)試網(wǎng)頁運(yùn)行時，出現(xiàn)問題時不能多角度、多層次理解問題，獨(dú)立思考去解決問題的能力比較弱，不主動去尋找解決問題的方法，對知識理解的深度不足。

OBE 理念要求“以學(xué)生為中心”要求由教師教轉(zhuǎn)向關(guān)注學(xué)生學(xué)，教學(xué)過程中注重師生的互動交流，設(shè)計交互性強(qiáng)的教學(xué)方法，以案例任務(wù)驅(qū)動法，引導(dǎo)學(xué)生自主發(fā)現(xiàn)問題，培養(yǎng)學(xué)生團(tuán)隊協(xié)助能力；通過學(xué)習(xí)通平臺對學(xué)生分組，分組采用隨機(jī)為主，使不同性格、不同技術(shù)特點(diǎn)的學(xué)生組隊合作完成項目任務(wù)，探究學(xué)習(xí)課程。注重學(xué)生創(chuàng)新能力、創(chuàng)新思想、發(fā)散思維的培養(yǎng)。

（四）教學(xué)方法

“施教之功，貴在引路，妙在開竅”，OBE 是以學(xué)習(xí)產(chǎn)出驅(qū)動整個課程活動，［2］結(jié)合《Web 前端開發(fā)》教學(xué)學(xué)情，對教學(xué)方法進(jìn)行優(yōu)化：

1.采用翻轉(zhuǎn)課堂教學(xué)方法

改變傳統(tǒng)的講授法課堂教學(xué)模式，采用“學(xué)習(xí)通”教學(xué)平臺進(jìn)行翻轉(zhuǎn)課堂教學(xué)。在學(xué)習(xí)通平臺上傳教學(xué)課件、視頻、題庫、學(xué)習(xí)資料等資源提供給學(xué)生，讓學(xué)生成為課堂學(xué)習(xí)的主人，學(xué)生上課前進(jìn)行課程知識預(yù)習(xí)，在線完成學(xué)習(xí)任務(wù)，課程實施過程中讓學(xué)生講解并分享知識技能，鍛煉學(xué)生的自主學(xué)習(xí)能力，溝通表達(dá)能力、獨(dú)立解決問題的能力。

2.案例項目驅(qū)動法

OBE 理念以學(xué)生預(yù)期達(dá)成的最終學(xué)習(xí)成果為導(dǎo)向，在教學(xué)過程中采用真實的案例項目驅(qū)動學(xué)生通過案例分析知識點(diǎn)，教師概括知識點(diǎn)對教學(xué)內(nèi)容進(jìn)行重構(gòu)與設(shè)計使知識結(jié)構(gòu)系統(tǒng)化。通過模擬完成案例項目，產(chǎn)生成就感以此激發(fā)學(xué)生對web 前端知識產(chǎn)生學(xué)習(xí)興趣，從而建立自信心，提高學(xué)生解決實際問題的能力。

3.線上線下混合式教學(xué)法

線下課堂+虛擬的線上課堂，線下課堂教師和學(xué)生在教室中面對面交流有助于線上學(xué)習(xí)任務(wù)完成情況進(jìn)行指導(dǎo)和評價，對學(xué)生學(xué)習(xí)效果提出建設(shè)性意見，又可以進(jìn)行啟發(fā)式教學(xué)、引導(dǎo)學(xué)生對Web 前端知識技能進(jìn)一步深入理解融會貫通。此外，成長于互聯(lián)網(wǎng)時代的大學(xué)生，非常熟悉網(wǎng)絡(luò)學(xué)習(xí)的環(huán)境，線上的學(xué)習(xí)可以讓線下課堂學(xué)習(xí)效果得到延伸。學(xué)習(xí)通平臺中的教案、視頻、課件、測試練習(xí)、作業(yè)等學(xué)習(xí)資源可以讓學(xué)生充分利用課下瑣碎時間片段進(jìn)行延伸學(xué)習(xí)［3］。

（五）教學(xué)內(nèi)容

Web 前端開發(fā)技術(shù)有三大技術(shù)支撐分別是HTML 知識技能、CSS 知識技能、Javascript 知識技能。被喻為前端的框架內(nèi)容、裝飾樣式和交互靈魂。

“框架內(nèi)容”是HTML，中文的意思是超文本標(biāo)記語言，HTML 內(nèi)容的學(xué)習(xí)最主要的是HTML文件的基本結(jié)構(gòu)和HTML5 基本標(biāo)記的學(xué)習(xí)，例如標(biāo)題h1 ～h6、段落p、列表ul ～li、區(qū)塊div、圖片img、字體font 等，以及每個標(biāo)簽的屬性和應(yīng)用。

“裝飾樣式”是CSS。CSS 在網(wǎng)頁設(shè)計中稱為層疊樣式表，主要的功能是用來美化頁面，使網(wǎng)站頁面變得美觀吸引瀏覽者去看。在網(wǎng)頁排版時還要掌握DIV 寬高設(shè)置、浮動樣式以及內(nèi)容顯示屬性等，是網(wǎng)頁樣式美化的重要技術(shù)。

“交互靈魂”是Javascript。它是Web 頁面開發(fā)設(shè)計中的高級腳本語言，在網(wǎng)頁設(shè)計中被廣泛用于Web 應(yīng)用開發(fā)中，例如在網(wǎng)頁頁面中添加不同樣式的動態(tài)效果和交互功能，為瀏覽者展示出更加美觀功能良好的網(wǎng)頁效果。同時讓網(wǎng)頁設(shè)計中的頁面變得活潑靈活。

課程教學(xué)內(nèi)容可設(shè)計為兩大模塊。

1.WEB 基礎(chǔ)知識模塊：Web 前端開發(fā)需要學(xué)習(xí)的基礎(chǔ)知識，包括HTML、CSS、JavaScript以及前端Bootstrap 框架等內(nèi)容。

2.高級應(yīng)用開發(fā)能力模塊：掌握常見的Web前端開發(fā)框架/庫，熟悉AngularJS、jQuery、React等常用類庫的使用，掌握Vue.js、Bootstrap 框架技術(shù)的運(yùn)用［4］。

基于“興趣→理解→實踐→應(yīng)用”的能力培養(yǎng)過程，“產(chǎn)出導(dǎo)向”教學(xué)過程圍繞學(xué)習(xí)成果進(jìn)行，根據(jù)崗位需要設(shè)計教學(xué)內(nèi)容：掌握HTML5、CSS3、JavaScript、Ajax、JQuery 核心知識，掌握響應(yīng)式布局框架、Vue、JS、Bootstrap、Angular等框架技術(shù)，熟悉服務(wù)器運(yùn)行環(huán)境的搭建等。

優(yōu)化和建設(shè)豐富課程資源，要充分利用好互聯(lián)網(wǎng)與新媒體平臺，依托學(xué)習(xí)通平臺完善課程資源建設(shè)，資源包括Web 前端課程內(nèi)容說明、PPT課件、教學(xué)大綱、課程標(biāo)準(zhǔn)、教學(xué)日志、實驗報告、任務(wù)單、學(xué)生作品、學(xué)習(xí)網(wǎng)站等。

（六）課程實施

為有效使學(xué)生獲得這些學(xué)習(xí)成果，結(jié)合學(xué)生特點(diǎn)和知識結(jié)構(gòu)建立新教學(xué)體系。

1 個任務(wù)項目，以開發(fā)一個網(wǎng)站為學(xué)習(xí)任務(wù)項目，項目流程：①確定開發(fā)網(wǎng)站主題②收集相關(guān)建站素材③網(wǎng)頁框架結(jié)構(gòu)設(shè)計④網(wǎng)頁內(nèi)容設(shè)計與制作⑤網(wǎng)頁美化與樣式設(shè)計⑥網(wǎng)頁交互內(nèi)容設(shè)計⑦網(wǎng)站測試發(fā)布。通過1 個任務(wù)項目構(gòu)建整個Web 知識學(xué)習(xí)的框架體系。課程知識融匯于任務(wù)項目中，通過完成對應(yīng)的任務(wù)點(diǎn)，系統(tǒng)掌握知識以及如何運(yùn)用。

2 個學(xué)習(xí)課堂，即線下與線上課堂相結(jié)合。

3 個教學(xué)內(nèi)容模塊，分別是：基礎(chǔ)知識模塊、實踐技能模塊、應(yīng)用提高模塊，以自主、合作、探究的學(xué)習(xí)方式分層次、分梯度完成知識的掌握。

在實驗上機(jī)過程中，教師通過極域教學(xué)客戶端屏幕廣播教學(xué)，讓學(xué)生演示在Dreamwear 軟件中編寫HTML 網(wǎng)頁文檔，教師輔助進(jìn)行講解常見的HTML 元素和應(yīng)用。在上機(jī)實驗課堂上，將項目任務(wù)分析的方法和項目制作過程分步驟講解給學(xué)生。在演示過程中滲透開發(fā)思想。例如，在講到網(wǎng)頁樣式時，使用DIV+CSS 盒子模型來設(shè)計并控制網(wǎng)頁中的元素布局，讓學(xué)生舉一反三靈活掌握代碼的應(yīng)用技巧，用不同的代碼編寫方式達(dá)到同樣的效果，進(jìn)行“制作河南工學(xué)院新聞列表”案例演示。

網(wǎng)站制作設(shè)計的過程中，要求整體把握所要制作網(wǎng)站的主題，內(nèi)容的選擇，網(wǎng)站風(fēng)格，用戶群體分析、布局結(jié)構(gòu)樣式、網(wǎng)站配色風(fēng)格、版面設(shè)計等因素。

依據(jù)OBE 理念：采用“真實項目+任務(wù)案例+知識點(diǎn)”相結(jié)合的教學(xué)方式，在教學(xué)過程中改進(jìn)教學(xué)方法案例化、實驗作業(yè)項目化、作業(yè)測試平臺化、討論答疑線上化、課程成果網(wǎng)站化。［5］

（七）課程考核與評價

河南工學(xué)院的《Web 前端開發(fā)技術(shù)》課程，依托學(xué)習(xí)通平臺建設(shè)了系統(tǒng)的線上線下相結(jié)合課程，Web 前端開發(fā)技術(shù)的教學(xué)上機(jī)實驗環(huán)節(jié)共設(shè)置了4 個實驗，學(xué)期末以大作業(yè)的形式進(jìn)行考核。

《Web 前端開發(fā)》課程的考核與評價強(qiáng)調(diào)學(xué)習(xí)過程、學(xué)習(xí)結(jié)果的評價，注重過程性評價。例如，在課堂教學(xué)中對于教學(xué)內(nèi)容的收獲和掌握可以采用小組項目答辯的形式?？己伺c評價主要由過程性評價50% 和終結(jié)性評價50% 組成：

1.過程性評價占比50%，包括任務(wù)點(diǎn)知識學(xué)習(xí)占20%，平時出勤和學(xué)習(xí)態(tài)度占10%，課堂實驗任務(wù)占20%，前端拓展技能占10%。

2.終結(jié)性評價占比50%，包括創(chuàng)新能力占10%，項目實踐大作業(yè)占40%。

該考核與評價體系已在河南工學(xué)院計算機(jī)學(xué)院8 個班級的課程的中實施，并且達(dá)到了預(yù)期效果。

三、結(jié)語

Web 前端開發(fā)工程師就業(yè)前景很廣，Web 前端開發(fā)的就業(yè)方向可以是網(wǎng)頁設(shè)計制作、網(wǎng)站建設(shè)開發(fā)、移動端APP 開發(fā)、軟件程序開發(fā)、微信小程序開發(fā)。同時也是綜合性人才，在工作中要有較強(qiáng)的溝通表達(dá)能力，要與視覺設(shè)計師溝通，又要與Web 后端設(shè)計師溝通，要求必備的知識技能很廣泛。因而，需要對《Web 前端開發(fā)》課程進(jìn)行改革來滿足人才培養(yǎng)的要求。

《Web 前端開發(fā)》課程在OBE 理念下創(chuàng)新性地開展教學(xué)改革，通過教學(xué)實踐證明，采用新的教學(xué)理念和教學(xué)方法后，真實有效地提升了學(xué)生的實踐能力、創(chuàng)新能力、團(tuán)隊合作能力以及自主學(xué)習(xí)能力，全面提高了學(xué)生培養(yǎng)質(zhì)量?！禬eb 前端開發(fā)》課程的教學(xué)改革，從課程的教學(xué)方法、教學(xué)內(nèi)容、實施過程、評價考核等多個方面做出探索與創(chuàng)新。此次教學(xué)改革只是拋磚引玉，不是教學(xué)改革的最終點(diǎn)，需要教師在教學(xué)改革中不斷進(jìn)行改進(jìn)和完善，有效提高學(xué)生的職業(yè)素養(yǎng)和就業(yè)信心，達(dá)到了預(yù)期的成果目標(biāo)。