OBE 與項目驅(qū)動在Web 前端課程改革中的應用

朱紅斌 麗水學院

1 引言

自2006 年，全面工程教育理念提出后，各個高校已逐漸在相當多專業(yè)中引入，培養(yǎng)實用技能型人才也逐漸寫入各專業(yè)的培養(yǎng)方案中，成為大家的共識。具備相當職業(yè)技能的畢業(yè)生普遍在用人單位受到好評。在高校專業(yè)教育中引入項目驅(qū)動式教學方法，符合工程教育理念，將恰當?shù)膶嵱庙椖控灤┯谡麄€教學過程之中，培養(yǎng)學生解決問題的能力及團隊合作精神，符合用人單位的需求。

Web 前端課程作為Web 應用開發(fā)學科群的基礎及先修課程，在計算機專業(yè)及數(shù)字媒體專業(yè)的課程教育中，具有非常重要的作用，是后續(xù)相關課程的理論及技能基礎。

2 課程現(xiàn)狀分析

Web 前端課程在目前的“大前端”背景下，所涵蓋的課程內(nèi)容是非常豐富的，現(xiàn)有的傳統(tǒng)教學方法、教學內(nèi)容及成績評定方式等方面都存在著較大的弊端。

(1) 傳統(tǒng)教學方法安裝授課教師選定的教材，按部就班，以講授課本的章節(jié)知識點為主，碎片化，填鴨式教學。學生學習的主觀能動性較差，學習效果欠佳；

(2) 缺乏系統(tǒng)項目訓練，就算學生學完了課程，也完成了實驗，貌似掌握了相關的前端技能，但是終歸是紙上談兵，缺少足夠系統(tǒng)的項目訓練，不能融會貫通，很少能解決實際問題。

(3) 前端課程知識體系更新很快，基本上沒有一本能完全滿足前端教學需求的好的教材，部分授課教師自身也存在知識更新滯后問題，教給學生“過期”的知識，實際應用開發(fā)上也捉襟見肘。

(4) 成績評定方法單一。現(xiàn)有的學生課程成績的給出，無外乎“平時+作業(yè)+實驗+期末”，參照一定的百分比，打出最后的總成績。這一成績評定方式缺乏激勵作用，學生得過且過，也無法對學生技能的掌握程度進行測定。

3 項目驅(qū)動式教學

項目驅(qū)動式教學法是在教學過程中以一個個項目作為主體，把相關的知識點融入到項目的各個環(huán)節(jié)中去的一種高效教學方法，它以項目為主線、實踐為導向、任務為載體，把開發(fā)技術(shù)的原理、方法和技能內(nèi)化在整個項目開發(fā)過程中，通過團隊協(xié)作的方式來解決實際問題，從而培養(yǎng)學生處理復雜項目問題的能力。在教學設計上，以實際項目的開發(fā)作為學習載體，將知識的拓展于項目研究開發(fā)過程的迭代相結(jié)合，用項目研發(fā)的漸進思想，與知識構(gòu)建的思路相對應地組織課程的教學內(nèi)容。

4 OBE 理念

基于學習產(chǎn)出的教育模式（Outcomes-based Education，OBE），美國學者斯派帝把OBE 定義為“清晰地聚焦和組織教育系統(tǒng)，使之圍繞確保學生獲得在未來生活中獲得實質(zhì)性成功的經(jīng)驗。在OBE 教育模式中，學生學到了什么和是否成功遠比怎樣學習和什么時候?qū)W習重要。在OBE 教育系統(tǒng)中，教育者必須對學生畢業(yè)時應達到的能力及其水平有清楚的構(gòu)想，然后尋求設計適宜的教育結(jié)構(gòu)來保證學生達到這些預期目標。

所以基于項目驅(qū)動式教學方法我們對Web 前端的課程內(nèi)容進行了重塑，基于OBE 理念，我們對成績評定的方法進行了重塑。

5 具體改革措施

5.1 Web 前端課程內(nèi)容的重塑

原有的Web 前端課程內(nèi)容基本上由HTML+CSS+JavaScript等幾個方面構(gòu)成，然后課程的實驗或者實訓項目內(nèi)容基本上以完成一個簡單網(wǎng)站的頁面為主，再加上一些簡單的js 腳本完成交互。這樣的內(nèi)容安排，已經(jīng)遠遠滿足不了現(xiàn)在的前端開發(fā)要求。

我們與企業(yè)對接，深挖企業(yè)需求，并對接后續(xù)課程安排，以課內(nèi)48 學時和課外64 學時的方式，其中課外學時部分，由授課教師完成視頻錄制后上傳教學平臺，由學生自學完成，將Web 前端課程內(nèi)容重塑如下：

(1) HTML+CSS，因為學生前期已經(jīng)開了網(wǎng)頁制作基礎課程，所以對于HTML4+CSS3 這一部分內(nèi)容我們列入課外學時，主要是針對這一部分內(nèi)容的回顧和增強，計16 個學時。

(2) javaScript 部分，主要講述js 的相關基礎語法，DOM 操作，BOM 操作，以及引入最新的ES6 規(guī)范。其中ES6 部分作為課外學時，計16 學時，其他部分為課內(nèi)學時，計16 學時。

(3) jQuery 部分，在js 內(nèi)容之后引入jQuery，引導學生對于前端框架的學習興趣，為課內(nèi)學時，計16 學時。

(4) HTML5 部分，主要講述HTML5 的新特性，因HTML5 的內(nèi)容較多，我們將多媒體、表單新元素、畫布、地理定位、本地存儲等內(nèi)容作為課內(nèi)學時，計16 學時，其他諸如地理定位等內(nèi)容作為課外學時，計16 學時。

(5) 移動端開發(fā)，主要涉及到彈性布局和微信小程序，全部為課外學時，計16 學時。

(6) 在各個階段，我們引入了相適應的具體實用案例，加強學生技能訓練。在HTML+CSS 部分我們引入了慕課手機頁面和京東首頁，javaScript 部分我們引入了2048 網(wǎng)頁版游戲，jQuery+HTML5部分我們引入了TodoList 代辦事項列表，移動端開發(fā)部分我們引入了仿攜程旅游App 項目。其他的串并知識點的小的案例項目就更多了。通過項目的引入加深了學生對前端知識的理解，鍛煉的團隊合作精神，提高了學生的實際開發(fā)技能。

5.2 Web 前端成績評定的重塑

引入OBE 理念后，我們對于學生成績的評定不在完全基于原有的作業(yè)、實驗等方面，我們將項目實訓過程中學生表現(xiàn)出的理論知識掌握程度、分析問題能力、團隊合作精神、開發(fā)技能掌握程度，項目管理及完成度進行了0-100 的評分，劃分不同的目標等級，設立了成績與能力評價對照表，綜合學生在項目中的表現(xiàn)進行綜合評分。

這一評分方式大大激活了學生的學習主動性，激發(fā)了學生在項目開發(fā)中的創(chuàng)新及協(xié)作精神，實行以來，效果良好。

6 結(jié)束語

我們在Web 前端課程中引入項目驅(qū)動式教學，對接企業(yè)，參照目前的主流前端技術(shù)對課程內(nèi)容進行了重塑，并引入了眾多的適宜項目，大大豐富了教學和實訓內(nèi)容，增加了學生的理論深度及技能水平。在成績評定中引入OBE 理念，重塑了成績評價體系，激發(fā)了學生的學習熱情。自課程改革以來，學生在Web 前端相關技能競賽中取得了良好的成績，學生在企業(yè)實習，反饋良好。