吳鴻韜，李 智，袁玉倩

（河北工業(yè)大學(xué) 人工智能與數(shù)據(jù)科學(xué)學(xué)院，天津 300401）

0 引言

隨著互聯(lián)網(wǎng)技術(shù)不斷發(fā)展，Web應(yīng)用不斷增加，Web編程在軟件產(chǎn)業(yè)中的比重越來越大?！扒岸斯こ處煛笔墙鼛啄瓴砰_始受到重視的新興職業(yè)，其主要職責(zé)是利用HTML/CSS/ JavaScript等各種技術(shù)開發(fā)產(chǎn)品界面，增加交互功能，同時(shí)結(jié)合后臺(tái)開發(fā)技術(shù)進(jìn)行各種Web 應(yīng)用開發(fā)[1]。軟件產(chǎn)業(yè)對(duì)Web前端開發(fā)人員的需求量迅猛上升，使得作為Web開發(fā)人員基本專業(yè)課程的Web前端開發(fā)技術(shù)課程日益重要。

為了提高Web前端開發(fā)技術(shù)課程的教學(xué)效果，教育工作者們開始對(duì)教學(xué)方法和教學(xué)手段等進(jìn)行改革，以提高學(xué)生的學(xué)習(xí)興趣和主動(dòng)性，培養(yǎng)學(xué)生的實(shí)踐能力。文獻(xiàn)[1]探討了基于崗位班構(gòu)建分段式人才培養(yǎng)模式和項(xiàng)目化崗位課程體系，闡述了“小班化、項(xiàng)目式、多形式融合、多渠道互動(dòng)”的教學(xué)改革實(shí)踐?；诜植际綄W(xué)習(xí)模式，文獻(xiàn)[2]提出有效整合線上線下教學(xué)環(huán)節(jié)。文獻(xiàn)[3]在國家“新工科”工程教育改革背景下，提出采用“能力導(dǎo)向、項(xiàng)目驅(qū)動(dòng)”的框架模型來對(duì)Web編程技術(shù)課程的實(shí)驗(yàn)教學(xué)進(jìn)行改革。

由于前端技術(shù)內(nèi)容豐富，綜合性、實(shí)踐性比較強(qiáng)，因此學(xué)習(xí)難度較大。隨著大數(shù)據(jù)、互聯(lián)網(wǎng)+、人工智能的蓬勃發(fā)展，傳統(tǒng)的知識(shí)性教育正在向以能力為導(dǎo)向的教育模式轉(zhuǎn)變，如何改革現(xiàn)有Web前端開發(fā)技術(shù)教學(xué)模式，以適應(yīng)新形勢下對(duì)高質(zhì)量計(jì)算機(jī)軟件工程人才的需求，是計(jì)算機(jī)專業(yè)教育工作者面臨的重要挑戰(zhàn)。

1 基于OBE理念的教學(xué)內(nèi)容改革

作為工程教育專業(yè)認(rèn)證遵循的核心理念之一，OBE（outcome based education）是一種以學(xué)生學(xué)習(xí)成果為導(dǎo)向的教育理念，強(qiáng)調(diào)學(xué)生在課程學(xué)習(xí)結(jié)束后獲得的知識(shí)、能力、素質(zhì)?，F(xiàn)有的Web前端開發(fā)技術(shù)課程的國家級(jí)規(guī)劃教材大多只介紹HTML、CSS、JavaScript等前端開發(fā)所需要的基礎(chǔ)知識(shí)，而對(duì)從事前端開發(fā)工作所需要的開發(fā)框架/庫很少涉及，阻礙了知識(shí)向職業(yè)能力的轉(zhuǎn)化。教育部在打造“金”課的相關(guān)文件中指出要通過“合理提升學(xué)業(yè)挑戰(zhàn)度、增加課程難度、拓展課程深度”的手段來切實(shí)提高課程教學(xué)質(zhì)量。文獻(xiàn)[4]指出“要給課堂教學(xué)擠‘水’添‘金’，必須將以教為中心的教學(xué)轉(zhuǎn)變?yōu)橐詫W(xué)為中心的教學(xué)”，而對(duì)于“以學(xué)為中心”的教學(xué)來說，教學(xué)內(nèi)容改革應(yīng)從教什么向?qū)W什么轉(zhuǎn)變。在成果導(dǎo)向教育理念下，知識(shí)結(jié)構(gòu)強(qiáng)調(diào)與職業(yè)需求相適應(yīng)，教什么主要取決于學(xué)生的學(xué)習(xí)產(chǎn)出[4]。因此，Web前端開發(fā)技術(shù)課程的教學(xué)內(nèi)容不應(yīng)再拘泥于教材固有內(nèi)容進(jìn)行教學(xué)，提出以“提供與職業(yè)需求相適應(yīng)的、多樣性的教學(xué)內(nèi)容”為目標(biāo)對(duì)教學(xué)內(nèi)容進(jìn)行改革。

1.1 以崗位職責(zé)需求為核心

基于OBE理念的教學(xué)模式不再是正向的知識(shí)灌輸，而是圍繞學(xué)生的最終“成果”來組織和開展教學(xué)，以明確的綜合能力的掌握為目標(biāo)反向設(shè)計(jì)教學(xué)過程，最終促成學(xué)習(xí)成果的達(dá)成。OBE的反向設(shè)計(jì)是從“需求”開始的，強(qiáng)調(diào)了“行業(yè)與用人單位的需求是構(gòu)建專業(yè)教育知識(shí)、能力和素質(zhì)結(jié)構(gòu)的重要依據(jù)”[5]。

在充分調(diào)研招聘網(wǎng)站上Web前端開發(fā)工程師崗位職責(zé)需求之后，結(jié)合從事Web前端開發(fā)工作的往屆畢業(yè)生的調(diào)研反饋，課程教學(xué)內(nèi)容可設(shè)計(jì)為兩大模塊。

（1）基礎(chǔ)知識(shí)模塊：介紹從事Web前端開發(fā)工作所需的基礎(chǔ)知識(shí)，包括HTML、CSS、JavaScript等內(nèi)容。

（2）高級(jí)開發(fā)技術(shù)模塊：介紹從事Web前端開發(fā)工作常用的Web前端開發(fā)框架/庫等。

1.2 以提供多樣性的學(xué)習(xí)內(nèi)容為目標(biāo)

OBE理念強(qiáng)調(diào)以學(xué)生為中心，提倡教師以學(xué)生為中心設(shè)計(jì)教學(xué)內(nèi)容，在教學(xué)內(nèi)容上更注重選擇性：教師根據(jù)學(xué)生的情況，提供不同的教學(xué)內(nèi)容供不同能力水平的學(xué)生選擇，學(xué)生則根據(jù)自己的不同情況和能力期望來選取相應(yīng)的、適合自己的教學(xué)內(nèi)容[6]。因此，Web前端開發(fā)技術(shù)課程的教學(xué)內(nèi)容應(yīng)該具有多樣性，最大程度上擴(kuò)展學(xué)生的視野，增加課程內(nèi)容的可選擇度，有助于學(xué)生通過自主學(xué)習(xí)獲得個(gè)性化的學(xué)習(xí)結(jié)果。Web前端開發(fā)技術(shù)教學(xué)內(nèi)容的多樣性主要體現(xiàn)在如下兩方面。

1）提供多樣性的前端框架/庫介紹。

Web前端是互聯(lián)網(wǎng)行業(yè)的重要組成部分，用于Web前端開發(fā)的一系列框架/庫層出不窮，且各有千秋。不同的互聯(lián)網(wǎng)公司在進(jìn)行Web前端時(shí)所選用的前端框架/庫也不盡相同。因此，我校Web前端開發(fā)技術(shù)課程的教學(xué)內(nèi)容對(duì)主流的前端框架/庫均應(yīng)有所涉及，幫助學(xué)生了解Web前端開發(fā)技術(shù)前沿、現(xiàn)狀，便于學(xué)生自主選擇Web前端開發(fā)技術(shù)的學(xué)習(xí)路徑。

2）增加數(shù)據(jù)可視化的Web前端開發(fā)。

數(shù)據(jù)可視化前端開發(fā)是Web前端開發(fā)的一種，主要是應(yīng)用Web前端開發(fā)技術(shù)和數(shù)據(jù)可視化技術(shù)來進(jìn)行Web前端開發(fā)，目前互聯(lián)網(wǎng)公司對(duì)其需求逐漸增多。數(shù)據(jù)可視化的Web前端開發(fā)也有助于學(xué)生了解大數(shù)據(jù)分析的相關(guān)知識(shí)。

1.3 以強(qiáng)化課程間的關(guān)聯(lián)性為補(bǔ)充

傳統(tǒng)的“過分強(qiáng)調(diào)知識(shí)目標(biāo)，忽略了對(duì)能力的達(dá)成和素養(yǎng)的提高”教學(xué)模式使得學(xué)生在課程學(xué)習(xí)過程中會(huì)形成“知識(shí)孤島”現(xiàn)象，難以建立完整而系統(tǒng)的專業(yè)知識(shí)體系，導(dǎo)致學(xué)生僅有知識(shí)而不具備知識(shí)遷移技能以及將知識(shí)應(yīng)用于實(shí)際的能力，阻礙了知識(shí)向職業(yè)能力的轉(zhuǎn)化。OBE理念打破了課程之間的壁壘，弱化了課程本身的系統(tǒng)性、完整性和連續(xù)性，強(qiáng)化了課程之間的聯(lián)系性[5]。因此，基于OBE理念的Web前端開發(fā)技術(shù)課堂教學(xué)設(shè)計(jì)必須放在大的專業(yè)背景體系中，將相關(guān)的教學(xué)內(nèi)容進(jìn)行合理、有效的拓展，讓學(xué)生將所學(xué)知識(shí)與未來的應(yīng)用進(jìn)行有效銜接。

結(jié)合我校實(shí)際情況，Web前端開發(fā)技術(shù)課堂教學(xué)增加了前端開發(fā)和后端開發(fā)交互的教學(xué)案例。通過該案例，學(xué)生不但可以了解前、后端開發(fā)通過JQuery、Ajax等技術(shù)進(jìn)行交互的基本原理，還把Web前端開發(fā)技術(shù)與數(shù)據(jù)庫原理及應(yīng)用、.Net程序設(shè)計(jì)等課程知識(shí)有機(jī)融合在一起，有助于學(xué)生了解相關(guān)課程知識(shí)在實(shí)際工作中的應(yīng)用。

1.4 持續(xù)改進(jìn)

持續(xù)改進(jìn)是OBE理念的重要組成部分。為了更好地實(shí)現(xiàn)“以學(xué)生為中心”的教學(xué)內(nèi)容設(shè)計(jì)模式，在學(xué)期末課程結(jié)束時(shí)，通過調(diào)研問卷的形式獲取學(xué)生對(duì)教學(xué)內(nèi)容的反饋和建議，結(jié)合從事前端開發(fā)的畢業(yè)生、實(shí)習(xí)生的調(diào)研反饋，對(duì)Web前端開發(fā)技術(shù)的課程教學(xué)內(nèi)容進(jìn)行動(dòng)態(tài)更新。

目前，受限于有限的理論教學(xué)學(xué)時(shí)，我校的Web前端開發(fā)技術(shù)課程主要以Bootstrap為例介紹前端開發(fā)框架/庫。根據(jù)調(diào)研結(jié)果，我校擬在適當(dāng)增加理論授課學(xué)時(shí)的基礎(chǔ)上，將Web前端開發(fā)框架/庫的介紹重點(diǎn)從Bootstrap轉(zhuǎn)為Vue.js。

2 基于OBE理念的案例教學(xué)方法

基于OBE理念的教學(xué)內(nèi)容設(shè)計(jì)模式在原有教學(xué)內(nèi)容的基礎(chǔ)上，針對(duì)學(xué)生能力的個(gè)性化提升，又拓展了大量的教學(xué)內(nèi)容。受制于有限的教學(xué)學(xué)時(shí)，傳統(tǒng)的“循序漸進(jìn)”“以知識(shí)體系為導(dǎo)向”的教學(xué)模式無法滿足實(shí)際教學(xué)需要。

基于OBE理念的課程教學(xué)要求以學(xué)生為中心，通常采用交互性強(qiáng)的教學(xué)方法，引導(dǎo)學(xué)生進(jìn)行課程學(xué)習(xí)，并注重對(duì)學(xué)生發(fā)散思維、創(chuàng)新思想以及工程觀點(diǎn)的培養(yǎng)[6]。為了適應(yīng)OBE理念的要求,教師應(yīng)根據(jù)不同的教學(xué)內(nèi)容，選擇多途徑、多樣化的教學(xué)策略，優(yōu)化學(xué)生學(xué)習(xí)體驗(yàn)，努力提高每個(gè)學(xué)生的課程參與度。

“施教之功，貴在引路，妙在開竅”[4]，因此，為了達(dá)成基于OBE理念的課程學(xué)習(xí)的成果目標(biāo)，使學(xué)生獲得預(yù)期課程學(xué)習(xí)成果，提出基于OBE理念的案例教學(xué)方法，該方法主要步驟包括以下幾方面。

1）以項(xiàng)目導(dǎo)向?yàn)樵瓌t設(shè)計(jì)教學(xué)案例。

在OBE理念中，大學(xué)課堂教學(xué)不應(yīng)該再是按照“循序漸進(jìn)”的原則進(jìn)行“填鴨式”教學(xué)，而應(yīng)該是“間斷性”和“階躍式”的，要讓學(xué)生自己學(xué)會(huì)修補(bǔ)一個(gè)個(gè)“間斷點(diǎn)”、跨上一個(gè)個(gè)“臺(tái)階”[5]，因此Web前端開發(fā)技術(shù)的教學(xué)實(shí)踐不再是按照傳統(tǒng)的章節(jié)/知識(shí)點(diǎn)來組織教學(xué)內(nèi)容，而是把相關(guān)章節(jié)的知識(shí)點(diǎn)以項(xiàng)目導(dǎo)向?yàn)樵瓌t，有機(jī)融合在教學(xué)案例中。對(duì)于教材中的陳述性的低階知識(shí)，一部分作為教學(xué)案例的組成元素，一部分通過實(shí)驗(yàn)、作業(yè)來引導(dǎo)學(xué)生自主學(xué)習(xí)。

2）以多元化為特征進(jìn)行教學(xué)案例分類。

教學(xué)策略方面，OBE理念強(qiáng)調(diào)以學(xué)生的能力狀況為起點(diǎn)，根據(jù)不同學(xué)生的能力現(xiàn)狀提供不同的學(xué)習(xí)內(nèi)容，制定差異化的教學(xué)策略[5]，因此，教學(xué)案例被分為以下3類。

（1）基礎(chǔ)類教學(xué)案例：主要以教材中的內(nèi)容為主，需要在課堂上詳細(xì)講授，并通過實(shí)驗(yàn)、作業(yè)等考核手段要求所有學(xué)生必須達(dá)到預(yù)期的教學(xué)目標(biāo)。

（2）核心類教學(xué)案例：以補(bǔ)充的教學(xué)內(nèi)容為主，采用“以學(xué)為中心”的教學(xué)模式[4]，引導(dǎo)和推動(dòng)學(xué)生在教學(xué)中的自主性、能動(dòng)性和創(chuàng)造性，激發(fā)學(xué)生自主學(xué)習(xí)的意識(shí)。通過改革實(shí)驗(yàn)考核手段，鼓勵(lì)學(xué)生通過自主學(xué)習(xí)來拓展、完善、重構(gòu)教學(xué)案例。

（3）拓展類教學(xué)案例：這部分主要沒有歸入核心類的前端開發(fā)框架/庫案例、可視化前端開發(fā)案例和少量高級(jí)前端開發(fā)技術(shù)案例，主要目的是為學(xué)生的個(gè)性化學(xué)習(xí)和深入學(xué)習(xí)提供教學(xué)資源。

3）以問題求解為導(dǎo)向?qū)嵤┌咐治鼋虒W(xué)。

當(dāng)前的教學(xué)過程中，忽視了工程環(huán)境中以問題求解為導(dǎo)向的主動(dòng)學(xué)習(xí)，缺少啟發(fā)式教學(xué)和基于實(shí)際工程項(xiàng)目的案例教學(xué)[7]，導(dǎo)致教學(xué)模式與培養(yǎng)途徑與工程實(shí)際能力培養(yǎng)不適應(yīng)。為了提高課程教學(xué)質(zhì)量的含“金”量，必須將課堂教學(xué)中的重學(xué)輕思轉(zhuǎn)變?yōu)閷W(xué)思結(jié)合[4]。在教學(xué)實(shí)施過程中，教師在課堂上可采用以問題求解為導(dǎo)向的案例分析教學(xué)，培養(yǎng)學(xué)生解決復(fù)雜工程問題的思維；課前設(shè)置問題，課后布置作業(yè)，引導(dǎo)學(xué)生通過查閱資料、討論等方式，解決疑問、加深理解、提高認(rèn)識(shí)水平。

4）以微課為補(bǔ)充實(shí)施課外教學(xué)。

當(dāng)今的學(xué)生，成長的背景是互聯(lián)網(wǎng)、移動(dòng)互聯(lián)網(wǎng)高速發(fā)展的時(shí)代，知識(shí)信息獲取渠道多元，已經(jīng)養(yǎng)成了從互聯(lián)網(wǎng)上獲取學(xué)習(xí)資源的習(xí)慣和能力，因此，可以把教學(xué)案例錄制成微課，利用微課這種新型教學(xué)模式來作為課堂教學(xué)模式的有效延伸，使學(xué)生能夠利用課外碎片時(shí)間有選擇地進(jìn)行自主學(xué)習(xí)，進(jìn)而提高學(xué)生的課程參與度，促進(jìn)師生間的交互。

3 教學(xué)改革效果

我校的Web前端開發(fā)技術(shù)課程是從已有的可視化編程技術(shù)課程更新教學(xué)內(nèi)容而來的，包含16學(xué)時(shí)的理論授課和16學(xué)時(shí)的課內(nèi)實(shí)驗(yàn)。為了提高教學(xué)效果，自2018年秋季學(xué)期開始實(shí)施基于OBE理念的教學(xué)改革。在學(xué)期末以作業(yè)的形式調(diào)研教學(xué)改革的效果，以實(shí)施持續(xù)改進(jìn)。

根據(jù)2018年秋季學(xué)期的調(diào)研數(shù)據(jù)，對(duì)于授課過程中補(bǔ)充的教學(xué)案例，31%的學(xué)生反饋的結(jié)果是“非常感興趣”，50.7%的學(xué)生反饋的結(jié)果是“感興趣”；34.3%的學(xué)生認(rèn)為補(bǔ)充的教學(xué)案例“非常有幫助”，44%的同學(xué)認(rèn)為補(bǔ)充的教學(xué)案例“有幫助”。

2018年秋季學(xué)期，Web前端開發(fā)技術(shù)課程的實(shí)驗(yàn)環(huán)節(jié)共設(shè)置了4個(gè)實(shí)驗(yàn)，基于教材內(nèi)容和拓展的教學(xué)案例各設(shè)置了2個(gè)實(shí)驗(yàn)。基于拓展的教學(xué)案例的實(shí)驗(yàn)主要考查前端開發(fā)技術(shù)框架/庫與數(shù)據(jù)可視化工具的應(yīng)用。調(diào)研數(shù)據(jù)表明，38%的學(xué)生主動(dòng)學(xué)習(xí)了課堂上沒有介紹過的前端開發(fā)技術(shù)，39%的學(xué)生主動(dòng)學(xué)習(xí)了課堂上介紹的前端開發(fā)技術(shù)。在按照實(shí)驗(yàn)要求完成實(shí)驗(yàn)的基礎(chǔ)上，有44%的學(xué)生主動(dòng)拓展了實(shí)驗(yàn)內(nèi)容。在2018年秋季學(xué)期結(jié)束后，根據(jù)調(diào)研反饋，對(duì)實(shí)驗(yàn)內(nèi)容進(jìn)行了持續(xù)改進(jìn)，把原來的2個(gè)基于教材內(nèi)容設(shè)計(jì)的實(shí)驗(yàn)整合為一個(gè)綜合性的實(shí)驗(yàn)，新增1個(gè)前端開發(fā)與后端開發(fā)結(jié)合的實(shí)驗(yàn)。

4 結(jié)語

OBE理念中以學(xué)生為中心的教學(xué)模式，強(qiáng)調(diào)學(xué)生在教學(xué)中的主體地位。為了加快知識(shí)向職業(yè)能力的轉(zhuǎn)化，我們基于OBE理念探討了Web前端開發(fā)技術(shù)課程的教學(xué)內(nèi)容改革和教學(xué)方法改革。通過“以崗位職責(zé)需求為核心、以提供多樣性的學(xué)習(xí)內(nèi)容為目標(biāo)、以強(qiáng)化課程間的關(guān)聯(lián)性為補(bǔ)充”的原則，在教材已有內(nèi)容的基礎(chǔ)上，拓展教學(xué)內(nèi)容，向?qū)W生提供與職業(yè)需求相適應(yīng)的、多樣性的教學(xué)內(nèi)容，有助于學(xué)生獲得個(gè)性化的學(xué)習(xí)結(jié)果；另外一方面，融合了以項(xiàng)目導(dǎo)向?yàn)樵瓌t、以多元化為特征、以問題求解為導(dǎo)向、以微課為補(bǔ)充的案例教學(xué)方法，則有助于教學(xué)從“以教為中心”向“以學(xué)為中心”轉(zhuǎn)變，有助于學(xué)生獲得的知識(shí)結(jié)構(gòu)與職業(yè)需求相適應(yīng)。