施力文 陳璇 楊凱

天津天獅學(xué)院 天津 301723

1 CDIO教育理念

CDIO教育模式是由麻省理工學(xué)院與瑞典皇家工學(xué)院等四所大學(xué)創(chuàng)立的一種國(guó)際工程教育改革理念。該理念通過(guò)以“構(gòu)思（conceive）—設(shè)計(jì)（design）—實(shí)現(xiàn)（implement）—運(yùn)作（operate）”的產(chǎn)品生命周期為載體，讓學(xué)生通過(guò)全過(guò)程的實(shí)踐操作來(lái)提升其應(yīng)用能力和創(chuàng)新能力[1]。

2 Web前端開發(fā)課程概述

電子商務(wù)專業(yè)依托互聯(lián)網(wǎng)、大數(shù)據(jù)、云計(jì)算等信息技術(shù)，具有較強(qiáng)知識(shí)交叉與實(shí)踐應(yīng)用的特點(diǎn)，需要學(xué)生掌握現(xiàn)代信息技術(shù)相關(guān)的基礎(chǔ)理論和專業(yè)知識(shí)。Web前端開發(fā)作為信息類基礎(chǔ)課程，通過(guò)對(duì)Web前端三大主流開發(fā)技術(shù)的講授，讓學(xué)生理解和掌握HTML5、CSS3、JavaScript等腳本語(yǔ)言的相關(guān)知識(shí)，最終掌握綜合網(wǎng)站設(shè)計(jì)和發(fā)布的基本流程和方法[2]。

按照《電子商務(wù)專業(yè)教學(xué)質(zhì)量國(guó)家標(biāo)準(zhǔn)》中關(guān)于學(xué)生知識(shí)能力的要求，天津天獅學(xué)院電子商務(wù)專業(yè)將Web前端開發(fā)作為專業(yè)核心課納入培養(yǎng)方案，配合Python程序設(shè)計(jì)、Python網(wǎng)絡(luò)信息提取、電子商務(wù)數(shù)據(jù)分析、大數(shù)據(jù)分析與挖掘等專業(yè)課程，使學(xué)生形成“網(wǎng)頁(yè)制作—信息提取—數(shù)據(jù)挖掘”的信息化全鏈路學(xué)習(xí)過(guò)程。同時(shí)，依據(jù)CDIO教育理念，結(jié)合電子商務(wù)經(jīng)管類專業(yè)特點(diǎn)，對(duì)Web前端開發(fā)課程進(jìn)行教學(xué)改革，提出“從構(gòu)思到運(yùn)行”的項(xiàng)目式全過(guò)程教學(xué)，培養(yǎng)學(xué)生的工程實(shí)踐能力。

3 Web前端開發(fā)傳統(tǒng)教學(xué)的問(wèn)題

3.1 基礎(chǔ)知識(shí)薄弱，學(xué)生學(xué)習(xí)目標(biāo)不明確

學(xué)生對(duì)于“編程”懷有畏難情緒，缺乏學(xué)習(xí)主動(dòng)性。經(jīng)管類學(xué)生由于專業(yè)與學(xué)分限制，信息類課程開設(shè)較少，缺少計(jì)算思維的系統(tǒng)性訓(xùn)練過(guò)程。因此，在學(xué)習(xí)過(guò)程中，存在學(xué)習(xí)前畏難，學(xué)習(xí)中機(jī)械模仿，學(xué)習(xí)后不愿鞏固等問(wèn)題，最終導(dǎo)致學(xué)完即忘的結(jié)果。

課程設(shè)置與就業(yè)前景聯(lián)系不緊密，難以引起學(xué)生重視。學(xué)生對(duì)大數(shù)據(jù)時(shí)代計(jì)算機(jī)技術(shù)的發(fā)展前景認(rèn)識(shí)不充分，僅停留在個(gè)人應(yīng)用層面，未能深入思考科技創(chuàng)新與就業(yè)方向的關(guān)系，忽視信息技術(shù)對(duì)于個(gè)人發(fā)展與就業(yè)前景的重要作用。

3.2 教學(xué)方式傳統(tǒng)，學(xué)生學(xué)習(xí)積極性不高

傳統(tǒng)的Web前端開發(fā)課堂教學(xué)方式單一，采取灌輸型教學(xué)模式，學(xué)生通過(guò)課堂講授、課上練習(xí)、完成作業(yè)等方式，實(shí)現(xiàn)對(duì)知識(shí)點(diǎn)的吸收與理解。在授課過(guò)程中，學(xué)生機(jī)械抄錄教師代碼，難以理解知識(shí)點(diǎn)間的聯(lián)系，教學(xué)效果不理想[3]。此外，學(xué)生課后鞏固階段與教師聯(lián)系較少，復(fù)習(xí)過(guò)程中遇到的問(wèn)題不能被及時(shí)解答，隨著問(wèn)題不斷積累，學(xué)生逐漸喪失學(xué)習(xí)興趣。

3.3 實(shí)踐課時(shí)設(shè)置少，學(xué)生高階學(xué)習(xí)不足

在有限課時(shí)內(nèi)，新課講授與學(xué)生實(shí)踐無(wú)法兼顧。學(xué)生在實(shí)踐過(guò)程中出現(xiàn)較多重復(fù)性問(wèn)題，需要教師逐一解決，然后才能進(jìn)入下一知識(shí)點(diǎn)的實(shí)踐環(huán)節(jié)，然而該過(guò)程占用大量課堂時(shí)間，導(dǎo)致高階實(shí)踐無(wú)法在課上推進(jìn)，即使布置為課后作業(yè)，也無(wú)法保障學(xué)生能夠自覺自主完成。

因此，Web前端開發(fā)課程團(tuán)隊(duì)從實(shí)際問(wèn)題出發(fā)，結(jié)合經(jīng)管類學(xué)生特點(diǎn)與學(xué)習(xí)興趣，經(jīng)過(guò)在教學(xué)過(guò)程中的反思與總結(jié)，對(duì)課程教學(xué)大綱、項(xiàng)目實(shí)踐、考核方式等方面實(shí)施教學(xué)改革。

4 基于CDIO的Web前端開發(fā)教學(xué)改革與實(shí)踐

秉持“從構(gòu)思到運(yùn)行”的項(xiàng)目式全過(guò)程教學(xué)理念，通過(guò)教學(xué)研討、企業(yè)走訪、學(xué)生座談、學(xué)校調(diào)研等手段，Web前端開發(fā)課程團(tuán)隊(duì)針對(duì)經(jīng)管類學(xué)生重新修訂Web前端開發(fā)課程大綱，制定出“項(xiàng)目式教學(xué)法”，旨在培養(yǎng)學(xué)生自主學(xué)習(xí)能力，鍛煉學(xué)生數(shù)據(jù)思維能力，強(qiáng)化學(xué)生項(xiàng)目實(shí)踐能力，最終通過(guò)CDIO教育模式進(jìn)行過(guò)程化評(píng)估與管理[4]。

4.1 基于經(jīng)管類學(xué)生特點(diǎn)修訂教學(xué)大綱，定位學(xué)習(xí)目標(biāo)

傳統(tǒng)的Web前端開發(fā)主要基于HTML+CSS+JS以及網(wǎng)頁(yè)開發(fā)框架進(jìn)行講授，根據(jù)電子商務(wù)經(jīng)管類學(xué)生編程基礎(chǔ)薄弱的特點(diǎn)，在重新修訂的大綱中，重點(diǎn)講授HTML+CSS+JS腳本式編程語(yǔ)言，使學(xué)生理解網(wǎng)頁(yè)的本質(zhì)、掌握各類網(wǎng)頁(yè)元素在瀏覽器頁(yè)面中的呈現(xiàn)形式，最終掌握標(biāo)簽中屬性、屬性值以及內(nèi)容的代碼結(jié)構(gòu)[5]。在具備基本W(wǎng)eb前端項(xiàng)目開發(fā)能力的基礎(chǔ)上，為后續(xù)高階專業(yè)課，如：Python網(wǎng)絡(luò)信息提取、電子商務(wù)數(shù)據(jù)分析等課程的學(xué)習(xí)進(jìn)行前期知識(shí)準(zhǔn)備。使學(xué)生在學(xué)習(xí)過(guò)程中能夠?qū)⒕W(wǎng)站建設(shè)與數(shù)據(jù)分析相結(jié)合，從技術(shù)角度出發(fā)，理解電子商務(wù)活動(dòng)過(guò)程中各環(huán)節(jié)之間的關(guān)聯(lián)，形成更加立體的技術(shù)圖譜，進(jìn)一步激發(fā)學(xué)生的興趣，培養(yǎng)學(xué)習(xí)主動(dòng)性，能夠根據(jù)個(gè)人興趣、特點(diǎn)選擇未來(lái)?yè)駱I(yè)方向。

4.2 以項(xiàng)目驅(qū)動(dòng)教學(xué)，提升學(xué)生學(xué)習(xí)積極性

通過(guò)項(xiàng)目驅(qū)動(dòng)的過(guò)程化教學(xué)模式，學(xué)生能夠逐步利用所學(xué)知識(shí)點(diǎn)，結(jié)合項(xiàng)目實(shí)踐完成學(xué)習(xí)任務(wù)，既能實(shí)現(xiàn)理論聯(lián)系實(shí)際，又可以提高學(xué)生的實(shí)踐能力，同時(shí)也提高了課堂學(xué)習(xí)的積極性與課后學(xué)習(xí)的主動(dòng)性[6]。Web前端開發(fā)課程CDIO項(xiàng)目式全過(guò)程教學(xué)模型如圖1所示。

圖1 Web前端開發(fā)課程CDIO項(xiàng)目式全過(guò)程教學(xué)模型

Web前端開發(fā)課程的主體部分包含兩條主線，即教師教學(xué)主線和學(xué)生任務(wù)主線，教師主線中的各項(xiàng)教學(xué)內(nèi)容與學(xué)生主線中的項(xiàng)目任務(wù)一一對(duì)應(yīng)；此外，每堂課將教學(xué)過(guò)程劃分為課前學(xué)習(xí)、課堂教學(xué)和課后實(shí)踐三個(gè)階段，每階段設(shè)計(jì)相應(yīng)的考核指標(biāo)，借助線上、線下教學(xué)工具以及教學(xué)平臺(tái)與學(xué)生進(jìn)行互動(dòng)交流、評(píng)議與討論，考核每階段學(xué)生的項(xiàng)目任務(wù)點(diǎn)完成情況，最終根據(jù)考核結(jié)果給出相應(yīng)評(píng)價(jià)。

4.2.1 課前學(xué)習(xí)階段

教師通過(guò)教學(xué)平臺(tái)發(fā)布課前預(yù)習(xí)材料。學(xué)生登錄學(xué)習(xí)平臺(tái)查看課件，進(jìn)行理論知識(shí)的預(yù)習(xí)，并總結(jié)預(yù)習(xí)過(guò)程中存在的問(wèn)題。預(yù)習(xí)材料主要由知識(shí)點(diǎn)以及項(xiàng)目的細(xì)分任務(wù)點(diǎn)組成，學(xué)生可以自主完成任務(wù)點(diǎn)的構(gòu)思與設(shè)計(jì)工作，也可以通過(guò)群與教師線上交流打開思路。在此階段中，以學(xué)生自主學(xué)習(xí)為主、教師指導(dǎo)為輔，不僅能夠提高學(xué)生學(xué)習(xí)的自主性，也能夠強(qiáng)化學(xué)生的實(shí)踐能力。

4.2.2 課堂教學(xué)階段

教師根據(jù)學(xué)生的課前預(yù)習(xí)情況授課。針對(duì)項(xiàng)目任務(wù)點(diǎn)完成情況進(jìn)行總結(jié)，必要時(shí)可以組織學(xué)生集體討論，及時(shí)掌握學(xué)生學(xué)習(xí)情況，對(duì)重點(diǎn)問(wèn)題深入講解；課堂實(shí)踐中適時(shí)推送擴(kuò)展任務(wù)點(diǎn)，進(jìn)一步提升學(xué)生對(duì)知識(shí)運(yùn)用的熟練程度；利用“隨機(jī)點(diǎn)名”功能提問(wèn)、以加分方法激勵(lì)學(xué)生參與到課堂中，同時(shí)增設(shè)學(xué)生演示環(huán)節(jié)，提高教師與學(xué)生之間的課堂活躍度和課堂參與度。在此階段中，學(xué)生能夠快速吸收知識(shí)點(diǎn)，轉(zhuǎn)化為項(xiàng)目任務(wù)點(diǎn)的實(shí)踐能力。

4.2.3 課后鞏固階段

學(xué)生根據(jù)教師在課后推送的拓展學(xué)習(xí)資源，深入學(xué)習(xí)，創(chuàng)新自己的項(xiàng)目實(shí)踐任務(wù)。在此階段中，學(xué)生能夠積極主動(dòng)地根據(jù)自己的想法深入探索，提高延伸學(xué)習(xí)的能力與積極性，凝練課堂知識(shí)，在拓展實(shí)踐中再次總結(jié)問(wèn)題，最后由教師做出反饋和評(píng)價(jià)，優(yōu)化學(xué)習(xí)成果。

4.3 完成高階教學(xué)目標(biāo)，提高學(xué)生實(shí)踐創(chuàng)新能力

教學(xué)目標(biāo)是教學(xué)活動(dòng)實(shí)施的方向和預(yù)期達(dá)成的結(jié)果，是一切教學(xué)活動(dòng)的出發(fā)點(diǎn)和最終歸宿。教學(xué)目標(biāo)可以分為三個(gè)層次：一是課程目標(biāo)；二是課堂教學(xué)目標(biāo)；三是教育成才目標(biāo)[7]。CDIO項(xiàng)目式全過(guò)程教學(xué)能夠?qū)⑷齻€(gè)層次的教學(xué)目標(biāo)落實(shí)在日常教學(xué)環(huán)節(jié)中，實(shí)現(xiàn)對(duì)傳統(tǒng)授課方式的優(yōu)化設(shè)計(jì)。

Web前端開發(fā)課程中包含的全部知識(shí)點(diǎn)以項(xiàng)目形式呈現(xiàn)，將完整項(xiàng)目按照傳統(tǒng)教學(xué)章節(jié)細(xì)分為任務(wù)點(diǎn)，對(duì)所有任務(wù)點(diǎn)均設(shè)立過(guò)程化教學(xué)目標(biāo)，將教學(xué)目標(biāo)由靜態(tài)轉(zhuǎn)化為動(dòng)態(tài)。CDIO項(xiàng)目式全過(guò)程教學(xué)能夠滿足不同學(xué)生主體、不同階段的學(xué)習(xí)需求，實(shí)現(xiàn)因材施教，達(dá)到學(xué)以致用的最優(yōu)目標(biāo)，將“從構(gòu)思到運(yùn)行”實(shí)踐過(guò)程轉(zhuǎn)化為學(xué)生的創(chuàng)新實(shí)踐能力。

4.3.1 學(xué)生成為自主學(xué)習(xí)者

通過(guò)CDIO項(xiàng)目式全過(guò)程教學(xué)，學(xué)生能夠根據(jù)教師提供的預(yù)習(xí)材料提前學(xué)習(xí)，在完成任務(wù)點(diǎn)的過(guò)程中發(fā)現(xiàn)問(wèn)題、解決問(wèn)題，從而提高學(xué)生的實(shí)踐能力；正式授課時(shí)，課堂教學(xué)圍繞學(xué)生在實(shí)踐中存在的問(wèn)題展開，通過(guò)擴(kuò)展任務(wù)點(diǎn)促使學(xué)生深入思考，提升學(xué)生的自學(xué)能力；以項(xiàng)目任務(wù)點(diǎn)的實(shí)施進(jìn)度安排教學(xué)計(jì)劃，鞏固學(xué)生逐漸形成的自學(xué)習(xí)慣，使學(xué)生最終成為自主學(xué)習(xí)者。

4.3.2 教師成為課堂引導(dǎo)者

通過(guò)CDIO項(xiàng)目式全過(guò)程教學(xué)，教師從傳統(tǒng)的知識(shí)傳授者轉(zhuǎn)變?yōu)閷W(xué)生學(xué)習(xí)過(guò)程中的引路人和指導(dǎo)者，將學(xué)習(xí)主導(dǎo)權(quán)還給學(xué)生[8]。教師通過(guò)創(chuàng)建教學(xué)項(xiàng)目、拆分項(xiàng)目任務(wù)點(diǎn)、設(shè)計(jì)過(guò)程化教學(xué)目標(biāo)等教學(xué)工作，在教學(xué)環(huán)節(jié)的實(shí)施過(guò)程中采用“以練促教”的教學(xué)方法，達(dá)到因材施教的教學(xué)效果，實(shí)現(xiàn)學(xué)生自主學(xué)習(xí)的能力目標(biāo)。

4.4 教學(xué)方法與手段

4.4.1 構(gòu)建過(guò)程化教學(xué)模式

課程開始前需建立QQ群或微信群作為線上溝通工具，使用群向?qū)W生介紹教學(xué)平臺(tái)的使用方法、授課考核規(guī)則等，并核查教學(xué)班級(jí)中的學(xué)生信息。將教學(xué)項(xiàng)目按照“從構(gòu)思到運(yùn)用”的全過(guò)程進(jìn)行分解，結(jié)合Web前端開發(fā)的全部教學(xué)知識(shí)點(diǎn)重組教學(xué)資源，設(shè)置課程項(xiàng)目任務(wù)點(diǎn)，將整合后的教學(xué)資源部署于教學(xué)平臺(tái)中。

課程教學(xué)過(guò)程中，教師按照教學(xué)計(jì)劃，根據(jù)學(xué)生項(xiàng)目完成情況推送各項(xiàng)任務(wù)點(diǎn)，學(xué)生根據(jù)本人構(gòu)思，將任務(wù)點(diǎn)中涉及的元素應(yīng)用到項(xiàng)目中，最終形成由學(xué)生自主設(shè)計(jì)、自主實(shí)現(xiàn)的獨(dú)特個(gè)人項(xiàng)目。通過(guò)對(duì)項(xiàng)目任務(wù)點(diǎn)的分階段教學(xué)，使學(xué)生能夠利用所學(xué)知識(shí)完成項(xiàng)目實(shí)踐，在實(shí)踐過(guò)程中提升技術(shù)應(yīng)用能力與工程實(shí)踐能力。

4.4.2 構(gòu)建過(guò)程化考核模式

授課前學(xué)生需完成課前任務(wù)。教師設(shè)定預(yù)習(xí)內(nèi)容，發(fā)送至教學(xué)平臺(tái)的學(xué)生端，學(xué)生完成預(yù)習(xí)后，由系統(tǒng)后臺(tái)記錄預(yù)習(xí)進(jìn)度，完成預(yù)習(xí)的學(xué)生可以獲得預(yù)習(xí)得分；通過(guò)教學(xué)平臺(tái)的“簽到”功能實(shí)現(xiàn)學(xué)生簽到記錄出勤分?jǐn)?shù)，對(duì)于因故未能上課，或遲到的學(xué)生，系統(tǒng)記錄缺勤或遲到類型標(biāo)簽，根據(jù)計(jì)分原則，最終計(jì)算學(xué)生出勤分?jǐn)?shù)。

授課中學(xué)生需完成課中考查。教師將知識(shí)點(diǎn)作為習(xí)題添加到課件中，根據(jù)授課進(jìn)度隨時(shí)發(fā)布習(xí)題，考查學(xué)生對(duì)知識(shí)點(diǎn)的理解程度；教師將任務(wù)點(diǎn)作為課堂編程練習(xí)在實(shí)踐環(huán)節(jié)中發(fā)布，考查學(xué)生代碼撰寫能力，習(xí)題與練習(xí)的完成情況作為課堂成績(jī)，記錄到系統(tǒng)后臺(tái)中。

授課后學(xué)生需完善自主項(xiàng)目。在課程項(xiàng)目進(jìn)行中，項(xiàng)目相關(guān)的拓展教學(xué)資源作為拓展任務(wù)點(diǎn)推送至學(xué)生端，由學(xué)生自主學(xué)習(xí)，學(xué)生學(xué)習(xí)后能夠獲得附加分?jǐn)?shù)，以此促進(jìn)學(xué)生深入學(xué)習(xí)、延伸學(xué)習(xí)，自主項(xiàng)目以項(xiàng)目分?jǐn)?shù)形式計(jì)入綜合成績(jī)。

通過(guò)上述過(guò)程，日常教學(xué)的考核點(diǎn)被逐一分配到各個(gè)教學(xué)資源的學(xué)習(xí)與練習(xí)中，學(xué)生的學(xué)習(xí)過(guò)程數(shù)據(jù)全部記錄在教學(xué)平臺(tái)后臺(tái)中，作為學(xué)生課程綜合評(píng)定的依據(jù)。依托教學(xué)平臺(tái)，教師能夠掌握所有學(xué)生的學(xué)習(xí)情況，包括得分統(tǒng)計(jì)數(shù)據(jù)與學(xué)習(xí)路徑數(shù)據(jù)；學(xué)生能夠控制自己的學(xué)習(xí)進(jìn)度，逐步完善、優(yōu)化自主項(xiàng)目實(shí)施效果，實(shí)現(xiàn)項(xiàng)目式全過(guò)程考核模式。

5 Web前端開發(fā)CDIO教學(xué)改革總結(jié)

2022年春季學(xué)期開始，天津天獅學(xué)院電子商務(wù)專業(yè)首先啟動(dòng)Web前端開發(fā)課程的教學(xué)改革項(xiàng)目，重構(gòu)教學(xué)資源，建立線上課程資源庫(kù)；同步推進(jìn)電子商務(wù)數(shù)據(jù)分析、大數(shù)據(jù)分析與挖掘等信息類課程資源的建設(shè)工作。經(jīng)過(guò)逐步完善與改進(jìn)，經(jīng)管類學(xué)生的學(xué)習(xí)興趣、自主學(xué)習(xí)能力、工程實(shí)踐能力均得到顯著提升，獲得較好的教學(xué)效果與學(xué)生評(píng)價(jià)。

電子商務(wù)經(jīng)管類學(xué)生能夠結(jié)合自身的興趣點(diǎn)，開發(fā)不同主題的網(wǎng)站，在項(xiàng)目答辯過(guò)程中發(fā)現(xiàn)，部分學(xué)生通過(guò)自主學(xué)習(xí)，采用課程拓展資源中的框架完成前端開發(fā)，并能夠準(zhǔn)確闡述設(shè)計(jì)理念與運(yùn)用技術(shù)；另有學(xué)生考慮將Web前端開發(fā)作為未來(lái)?yè)駱I(yè)方向，開展深入學(xué)習(xí)。

基于CDIO理念教學(xué)改革后的Web前端開發(fā)課程經(jīng)歷兩個(gè)學(xué)期的問(wèn)題總結(jié)、調(diào)查研討、創(chuàng)新實(shí)踐后，取得了一定的教學(xué)成果。該課程的改革創(chuàng)新方式與經(jīng)驗(yàn)對(duì)于經(jīng)管類信息技術(shù)課程的改革具有一定的推廣、借鑒價(jià)值。在未來(lái)的教學(xué)工作中，將進(jìn)一步嘗試“課證融合”“以賽促教”的改革方向。