與職業(yè)標(biāo)準(zhǔn)銜接的Web前端開(kāi)發(fā)課程教學(xué)探索與實(shí)踐

龔蘭蘭,凌興宏

（1．蘇州大學(xué)文正學(xué)院 計(jì)算機(jī)工程系，江蘇 蘇州 215104；2．蘇州大學(xué) 計(jì)算機(jī)科學(xué)與技術(shù)學(xué)院，江蘇 蘇州 215006）

0 引 言

互聯(lián)網(wǎng)行業(yè)發(fā)展迅猛,越來(lái)越多Web開(kāi)發(fā)技術(shù)的應(yīng)用出現(xiàn)在我們的生活中。Web應(yīng)用開(kāi)發(fā)技術(shù)成為計(jì)算機(jī)專業(yè)學(xué)生走上社會(huì)、專業(yè)對(duì)口就業(yè)不可或缺的一門(mén)知識(shí)和技術(shù)[1]。目前,國(guó)內(nèi)許多高校將Web 開(kāi)發(fā)技術(shù)等相關(guān)課程作為計(jì)算機(jī)專業(yè)學(xué)生的專業(yè)必修課。結(jié)合社會(huì)職業(yè)需求,將職業(yè)能力要求融入到課程體系中[2],進(jìn)行課程建設(shè)的探索和實(shí)踐,是當(dāng)前應(yīng)用型本科院校提升學(xué)生專業(yè)能力的方向之一。

1 Web前端開(kāi)發(fā)課程現(xiàn)存問(wèn)題

一個(gè)完整的Web應(yīng)用開(kāi)發(fā)所需技術(shù)一般涉及前端、服務(wù)器端和數(shù)據(jù)庫(kù)3部分,因此從應(yīng)用開(kāi)發(fā)的角度來(lái)說(shuō),計(jì)算機(jī)相關(guān)專業(yè)的課程設(shè)置,不可能單靠某一門(mén)課程實(shí)現(xiàn)Web應(yīng)用開(kāi)發(fā)所需要的所有知識(shí)和技能的學(xué)習(xí),而是一個(gè)課程體系的前后相輔相成。目前實(shí)現(xiàn)Web應(yīng)用開(kāi)發(fā)至少需要以下幾門(mén)課程:前端開(kāi)發(fā)技術(shù)(html,Css,JavaScript),服務(wù)器編程(語(yǔ)言類(lèi):C#,php,Java,Python),數(shù)據(jù)庫(kù)技術(shù)(Mysql,Sqlserver),Web應(yīng)用綜合開(kāi)發(fā)(框架編程)。前后課程的設(shè)置順序和內(nèi)容,要為最終完成一個(gè)Web應(yīng)用而服務(wù)。

目前,許多院校設(shè)置的Web開(kāi)發(fā)相關(guān)課程,重點(diǎn)放在服務(wù)器端編程的教學(xué),忽略了對(duì)于前端技術(shù)的重點(diǎn)應(yīng)用。蘇州大學(xué)文正學(xué)院之前在計(jì)算機(jī)專業(yè)的課程設(shè)置中,Web開(kāi)發(fā)類(lèi)只有一門(mén)課程Web應(yīng)用開(kāi)發(fā),在該門(mén)課程內(nèi)容中綜合了前端、asp.net和數(shù)據(jù)庫(kù)的技術(shù),學(xué)生對(duì)于前端技術(shù)毫無(wú)基礎(chǔ),教學(xué)過(guò)程中教師大部分的教學(xué)重點(diǎn)放在asp.net服務(wù)器端編程上,學(xué)生雖然能實(shí)現(xiàn)一定的功能,但是由于缺少前端課程的學(xué)習(xí),最后提交的Web 項(xiàng)目的用戶體驗(yàn)感不佳。作為Web應(yīng)用開(kāi)發(fā)的主要也是首要學(xué)習(xí)的課程,Web前端開(kāi)發(fā)已經(jīng)作為一門(mén)獨(dú)立的課程,該課程目前存在以下的問(wèn)題。

1.1 課程設(shè)置

在課程設(shè)置上,Web前端開(kāi)發(fā)課程與其他課程教學(xué)之間互相獨(dú)立,不具備前后的連貫性。如前文所說(shuō),Web應(yīng)用開(kāi)發(fā)需要一系列技術(shù),因此相應(yīng)的一系列課程的安排首先在時(shí)間上要具備合理性,前導(dǎo)和后續(xù)課程之間要具備連貫性。

1.2 課時(shí)安排

課時(shí)安排不合理,理論課和實(shí)踐課的比例最初是3:1,每周3節(jié)理論課1節(jié)實(shí)踐課。Web前端開(kāi)發(fā)是一門(mén)實(shí)踐性和應(yīng)用性極強(qiáng)的課程,學(xué)習(xí)的主要手段就是需要多做、多練,因此這樣的課時(shí)安排實(shí)踐課時(shí)明顯不足。

1.3 實(shí)踐環(huán)節(jié)

在實(shí)踐教學(xué)中,雖然使用了案例演示、任務(wù)驅(qū)動(dòng)等教學(xué)方式,但案例的選擇一方面大部分來(lái)源于教材,僅僅是圍繞某個(gè)知識(shí)點(diǎn)進(jìn)行的,各案例之間互不關(guān)聯(lián),缺乏連續(xù)性;另一方面案例也比較陳舊。此外,布置給所有學(xué)生的任務(wù)都是相同的,各任務(wù)之間也是相互獨(dú)立的,各任務(wù)之前缺乏連貫性和整體性。對(duì)學(xué)生來(lái)說(shuō),僅僅是完成了幾次分散的作業(yè)練習(xí),不能形成一個(gè)完整的項(xiàng)目,而且相同的任務(wù)很難避免抄襲現(xiàn)象。

1.4 教學(xué)內(nèi)容

課程內(nèi)容上,主要的還是傳統(tǒng)的html、Css和JavaScript技術(shù),缺乏對(duì)新功能、新版本以及目前主流框架、工具的引入。

1.5 考核方式

考核方式還停留在以期末筆試為主的方式上,Web前端開(kāi)發(fā)不同于其他語(yǔ)言編程類(lèi)課程,很多內(nèi)容需要靠實(shí)際運(yùn)行效果才能判定學(xué)生是否掌握了相應(yīng)的知識(shí)和技能,會(huì)做題不代表能開(kāi)發(fā)出好的用戶界面,不是在紙上寫(xiě)一寫(xiě)就可以下結(jié)論的,因此筆試作為主要的考核手段顯得不合理。

教學(xué)效果無(wú)法體現(xiàn)學(xué)生動(dòng)手實(shí)踐綜合能力和水平,只關(guān)注投入,缺乏對(duì)產(chǎn)出的重視。很多學(xué)生在學(xué)期結(jié)束后還不能做出一個(gè)完整、可用的網(wǎng)頁(yè);在畢業(yè)設(shè)計(jì)系統(tǒng)的界面設(shè)計(jì)部分也是無(wú)從下手,學(xué)生最后提交的Web 項(xiàng)目的用戶體驗(yàn)感不佳;進(jìn)入企業(yè)更是如此,基本上課內(nèi)知識(shí)早就忘得差不多,無(wú)法滿足職業(yè)能力需求,必須重新培訓(xùn)上崗。

2 教學(xué)探索和實(shí)踐

Web開(kāi)發(fā)技術(shù)的逐漸盛行,也隨之引起高校的教學(xué)改革,結(jié)合社會(huì)職業(yè)需求,將職業(yè)能力要求融入到課程體系中,進(jìn)行課程建設(shè)的探索和實(shí)踐,是當(dāng)前應(yīng)用型本科院校提升學(xué)生專業(yè)能力的方向之一。

基于產(chǎn)出的教育(OBE)要求根據(jù)培養(yǎng)目標(biāo)實(shí)現(xiàn)的條件設(shè)定畢業(yè)要求,按照畢業(yè)要求的達(dá)成設(shè)置課程體系,教學(xué)活動(dòng)要支持畢業(yè)要求的達(dá)成[3]。更重要的是,畢業(yè)要求主要是要求學(xué)生解決問(wèn)題,特別強(qiáng)調(diào)解決復(fù)雜工程問(wèn)題的能力為“主要追求”。

結(jié)合社會(huì)職業(yè)需求和基于產(chǎn)出教育的理念,對(duì)Web前端開(kāi)發(fā)課程教學(xué)從以下幾方面展開(kāi)探索和實(shí)踐。

2.1 社會(huì)需求的調(diào)研

為更好地了解社會(huì)職業(yè)需求,對(duì)蘇州22家IT相關(guān)企業(yè)從Web應(yīng)用開(kāi)發(fā)所需要的知識(shí)、技能和能力方面進(jìn)行了調(diào)研。

(1)從開(kāi)發(fā)類(lèi)型上,22家企業(yè)中有20家企業(yè)的進(jìn)行Web應(yīng)用的開(kāi)發(fā),可見(jiàn)Web應(yīng)用的開(kāi)發(fā)的需求量仍然很大,學(xué)習(xí)Web開(kāi)發(fā)技能仍舊是計(jì)算機(jī)專業(yè)學(xué)生走上社會(huì)、專業(yè)對(duì)口就業(yè)不可或缺的知識(shí)和技術(shù);

(2)企業(yè)的崗位需求量最大的是前端開(kāi)發(fā)工程師(如圖1所示),可見(jiàn)Web前端開(kāi)發(fā)課程開(kāi)設(shè)的必要性;

圖1 企業(yè)崗位需求數(shù)據(jù)

(3)前端開(kāi)發(fā)技術(shù)中需求最大的是 JavaScript、Html5、CSS如圖2所示,最流行的前端框架是BootStrap、Jquery、Node.js,這為Web前端開(kāi)發(fā)課程的教學(xué)內(nèi)容調(diào)整上提供了很好的參考依據(jù);

(4)開(kāi)發(fā)語(yǔ)言使用最多的是Java語(yǔ)言;

(5)服務(wù)器端框架使用較多的還是針對(duì)Java的 SpringMvc、SpringBoot和 Mybatis。

除此之外,還對(duì)目前企業(yè)較流行的開(kāi)發(fā)工具、管理工具以及其他的知識(shí)能力等職業(yè)素養(yǎng)要求進(jìn)行了相應(yīng)的調(diào)研和了解。

2.2 思維的改變

教學(xué)的改革首先要求從思維上進(jìn)行改革,對(duì)課程有新的認(rèn)識(shí),才能有新的計(jì)劃,以及與之配套的具體措施。

作為應(yīng)用型本科院校,計(jì)算機(jī)專業(yè)人才的培養(yǎng)應(yīng)借鑒OBE(基于產(chǎn)出的教育)導(dǎo)向的教學(xué)理念,以培養(yǎng)滿足社會(huì)需求的應(yīng)用型人才為目標(biāo),以學(xué)生解決問(wèn)題,特別是解決復(fù)雜工程問(wèn)題的能力為畢業(yè)要求,課程設(shè)置、教學(xué)實(shí)踐活動(dòng)都要支持畢業(yè)要求的達(dá)成。

作為當(dāng)前計(jì)算機(jī)專業(yè)學(xué)生走上社會(huì)、專業(yè)對(duì)口就業(yè)不可或缺的知識(shí)和技術(shù),Web前端開(kāi)發(fā)課程在被設(shè)為計(jì)算機(jī)專業(yè)必修課是非常有必要的。在課程學(xué)習(xí)伊始,甚至是整個(gè)過(guò)程中,教師要引導(dǎo)學(xué)生對(duì)Web應(yīng)用有清晰、具體的認(rèn)識(shí),從軟件項(xiàng)目開(kāi)發(fā)的角度,讓其了解到完成一個(gè)應(yīng)用的開(kāi)發(fā)需要哪些技術(shù)和方法,這些知識(shí)和技術(shù)由哪些課程或者課程的哪部分知識(shí)來(lái)完成,以及學(xué)習(xí)該課程后掌握的技能對(duì)未來(lái)的就業(yè)、升學(xué)等有哪些幫助,即所學(xué)習(xí)課程的作用和意義,幫助學(xué)生樹(shù)立起明確的學(xué)習(xí)目標(biāo)和動(dòng)力,摒棄原有的盲目學(xué)習(xí)和應(yīng)付交差的學(xué)習(xí)態(tài)度。

互聯(lián)網(wǎng)思維逐漸興起,深入各行各業(yè),對(duì)年輕人來(lái)說(shuō)具備互聯(lián)網(wǎng)思維也成為必備職業(yè)素質(zhì),尤其是IT行業(yè)。作為計(jì)算機(jī)專業(yè)的學(xué)生,具備互聯(lián)網(wǎng)思維,不僅能提升學(xué)習(xí)效率,提高問(wèn)題解決能力,更是信息技術(shù)行業(yè)不可或缺的就業(yè)必備技能[4]。

目前,互聯(lián)網(wǎng)思維主要可以包括9個(gè)部分[5],在Web前端開(kāi)發(fā)課程中主要引入其中5個(gè)思維:用戶思維、簡(jiǎn)約思維、極致思維、迭代思維和社會(huì)化思維。

在教學(xué)過(guò)程中,教師要把互聯(lián)網(wǎng)思維,潛移默化地灌輸給學(xué)生,培養(yǎng)他們自己用互聯(lián)網(wǎng)思維去思考和解決問(wèn)題的能力。對(duì)于計(jì)算機(jī)專業(yè)的學(xué)生,這點(diǎn)尤為重要。

2.3 教學(xué)內(nèi)容的重新設(shè)計(jì)

首先,根據(jù)企業(yè)調(diào)研內(nèi)容以及當(dāng)前Web前端開(kāi)發(fā)的主流技術(shù),可進(jìn)行如下教學(xué)內(nèi)容的調(diào)整:①引入Html5的頁(yè)面元素、多媒體技術(shù)、定位技術(shù)、本地存儲(chǔ)等新功能;②在JavaScript部分加入了BOM、DOM的知識(shí);③加入對(duì)Ajax技術(shù)、 Jquery的介紹和使用;④對(duì)于市場(chǎng)流行的一些前端框架技術(shù),選擇了最受歡迎的Bootstrap,引導(dǎo)學(xué)生學(xué)習(xí)和使用框架進(jìn)行Web開(kāi)發(fā)。

其次,注重課程內(nèi)部各部分內(nèi)容的銜接。在不同階段的教學(xué)案例的選擇上,選擇具有連貫性的案例,經(jīng)過(guò)幾個(gè)不同案例的完成,最終離一個(gè)完整的網(wǎng)站設(shè)計(jì)越來(lái)越近。

第三,加強(qiáng)與其他課程的前后銜接。按照Web前端開(kāi)發(fā)、數(shù)據(jù)庫(kù)和Java(或C#、Python)編程語(yǔ)言、Web應(yīng)用框架開(kāi)發(fā)的順序設(shè)置前導(dǎo)、后續(xù)課程,保證學(xué)生具備相應(yīng)的課程知識(shí)后能進(jìn)行Web綜合開(kāi)發(fā),最后能順利地完成畢業(yè)設(shè)計(jì)的項(xiàng)目。除了時(shí)間上的先后順序,在教學(xué)素材上的積累也可以進(jìn)行前后銜接,比如,Web應(yīng)用框架開(kāi)發(fā)的課程可以直接在前端開(kāi)發(fā)課程中做好的網(wǎng)站界面的基礎(chǔ)上迭代,進(jìn)行服務(wù)器端的開(kāi)發(fā),進(jìn)行前后端整合,省去了前端的時(shí)間,也實(shí)現(xiàn)了前期成果的再利用和優(yōu)化,最終形成一個(gè)完整的Web項(xiàng)目。這就使學(xué)生把不同課程的學(xué)習(xí)連貫起來(lái),學(xué)以致用,提升解決問(wèn)題的能力。

最后,理論實(shí)踐課時(shí)的調(diào)整。由于Web前端開(kāi)發(fā)是一門(mén)操作性和實(shí)踐性極強(qiáng)的課程,教師有再多的理論講解和演示都無(wú)法保證學(xué)生對(duì)知識(shí)點(diǎn)和技術(shù)的掌握、動(dòng)手能力的提高,因此可將理論實(shí)踐比由原來(lái)的3:1,先后調(diào)整為2:1和1:1,逐步提高實(shí)踐課時(shí)的比例。

2.4 教學(xué)方式、手段的改變

關(guān)聯(lián)性案例教學(xué)。案例不再局限于教材,而是根據(jù)當(dāng)前大多數(shù)網(wǎng)站通用的一些功能和效果(如下拉式菜單、圖片輪播等),從網(wǎng)絡(luò)、企業(yè)、個(gè)人項(xiàng)目等多方面收集案例資源;不同于以往的多個(gè)分散獨(dú)立的案例,教師選取一些具有關(guān)聯(lián)性的案例(可以來(lái)自于同一個(gè)項(xiàng)目的不同部分)進(jìn)行相應(yīng)知識(shí)點(diǎn)的演示教學(xué),當(dāng)所有的案例完成后,基本可以完成一個(gè)Web項(xiàng)目前端的主要部分。

迭代式項(xiàng)目教學(xué)以項(xiàng)目為主導(dǎo),任務(wù)為驅(qū)動(dòng)。根據(jù)迭代思維,不要求學(xué)生一次性做到完美。迭代思維就是一種循序漸進(jìn)的開(kāi)發(fā)方法,它允許產(chǎn)品有所不足,允許不斷試錯(cuò),在持續(xù)迭代中完善產(chǎn)品。在教學(xué)任務(wù)設(shè)計(jì)時(shí),可以從簡(jiǎn)單、基本的任務(wù)開(kāi)始,然后逐步迭代,循序漸進(jìn),增加任務(wù)難度和復(fù)雜度,允許小步、快跑、試錯(cuò),讓學(xué)生在循序漸進(jìn)完成任務(wù)的過(guò)程中逐步掌握知識(shí)和技能。

互聯(lián)網(wǎng)思維下的任務(wù)式驅(qū)動(dòng),是將一個(gè)完整的Web項(xiàng)目拆分成多個(gè)子任務(wù),每個(gè)任務(wù)對(duì)應(yīng)相應(yīng)的教學(xué)知識(shí)點(diǎn),鼓勵(lì)學(xué)生用用戶思維,從用戶角度去思考需求和功能,進(jìn)行設(shè)計(jì)、實(shí)現(xiàn);按照簡(jiǎn)約思維,用戶界面設(shè)計(jì)要盡量外觀簡(jiǎn)潔,操作流程簡(jiǎn)化,提高使用效率;用極致思維去完成每一個(gè)細(xì)節(jié),功能不求多復(fù)雜,但是要簡(jiǎn)約、好用,哪怕一個(gè)按鈕,也不能隨便敷衍了事。

2.5 工程實(shí)踐

首先,將實(shí)踐課的上課時(shí)間由原來(lái)每2周1次、每次2課時(shí)調(diào)整為集中1周全天實(shí)訓(xùn),便于學(xué)生集中精力專注于項(xiàng)目開(kāi)發(fā)。

其次,引入企業(yè)講師,與校內(nèi)教師聯(lián)合指導(dǎo)項(xiàng)目開(kāi)發(fā),同時(shí)引入企業(yè)真實(shí)項(xiàng)目案例作為實(shí)訓(xùn)任務(wù):一方面,讓學(xué)生了解、補(bǔ)充課外的行業(yè)一線技術(shù)知識(shí),體驗(yàn)企業(yè)項(xiàng)目開(kāi)發(fā)流程,加深職業(yè)認(rèn)知,為以后的就業(yè)做好準(zhǔn)備;另一方面,也能讓校內(nèi)教師及時(shí)有效地和企業(yè)工程師進(jìn)行學(xué)習(xí)交流、掌握當(dāng)前社會(huì)需求,努力做到不與行業(yè)脫節(jié)。

第三,基于OBE教學(xué)理念,目標(biāo)是培養(yǎng)具有分析問(wèn)題解決問(wèn)題能力的應(yīng)用型人才,實(shí)踐環(huán)節(jié)無(wú)疑是培養(yǎng)學(xué)生全面解決復(fù)雜工程問(wèn)題能力最好的環(huán)節(jié)。過(guò)去,項(xiàng)目實(shí)踐基本是由教師對(duì)整個(gè)Web項(xiàng)目進(jìn)行分析、設(shè)計(jì),然后進(jìn)行某一功能模塊的具體操作演示,接下來(lái)學(xué)生依葫蘆畫(huà)瓢完成剩下的部分,雖然最后能夠完成任務(wù),但是學(xué)生缺乏對(duì)項(xiàng)目整體的分析、設(shè)計(jì)的鍛煉,只能進(jìn)行執(zhí)行層面能力的鍛煉。

不同于過(guò)去的模仿式執(zhí)行任務(wù),現(xiàn)在在任務(wù)驅(qū)動(dòng)的項(xiàng)目化教學(xué)下,更多的是給學(xué)生布置任務(wù),讓學(xué)生自己去分析要完成任務(wù)必須解決哪些問(wèn)題,然后進(jìn)行模塊設(shè)計(jì),最后具體實(shí)施。在整個(gè)過(guò)程中遇到問(wèn)題、困難的時(shí)候求助于老師。學(xué)生最后提交的成果不僅僅有自己的Web項(xiàng)目,更要包含開(kāi)始的需求分析文檔和最后的實(shí)踐總結(jié)報(bào)告。這樣的實(shí)踐方式,不僅能夠提升學(xué)生動(dòng)手做的能力,更能夠鍛煉學(xué)生的整體設(shè)計(jì)、解決問(wèn)題的能力。

2.6 考核方式

鑒于Web前端開(kāi)發(fā)較強(qiáng)的實(shí)踐性,逐漸降低筆試成績(jī)的比例,以實(shí)踐考核成績(jī)?yōu)橹鳌?/p>

考核內(nèi)容主要是學(xué)生的Web項(xiàng)目成果演示和答辯,由實(shí)際展示效果和問(wèn)答情況檢測(cè)學(xué)生對(duì)Web前端開(kāi)發(fā)技能的掌握情況。如前文所述,基于OBE教學(xué)理念,能夠分析問(wèn)題、設(shè)計(jì)方案、解決問(wèn)題的綜合應(yīng)用解決能力的培養(yǎng)是目標(biāo)。因此,除了考核學(xué)生做的成果,需求分析、實(shí)踐報(bào)告也是考核的部分,以此檢測(cè)學(xué)生的整體解決問(wèn)題的能力。

考核方式不再是期末一錘定音,而是進(jìn)行迭代式、階段性考核,根據(jù)教學(xué)進(jìn)展,在一個(gè)學(xué)期不同階段設(shè)置4～5個(gè)考核點(diǎn),每次考核通過(guò)一個(gè)功能性任務(wù)檢測(cè)學(xué)生掌握情況。幾次考核任務(wù)的選擇上,具有關(guān)聯(lián)性和連貫性,經(jīng)過(guò)幾次階段性考核任務(wù)的完成,學(xué)生基本上也是完成了一個(gè)Web項(xiàng)目。這樣的考核方式,一方面更加合理,另一方面也能給督促學(xué)生注重平時(shí)的鍛煉和學(xué)習(xí),避免期末抱佛腳突擊復(fù)習(xí)過(guò)關(guān)的僥幸心態(tài)。

3 結(jié) 語(yǔ)

與職業(yè)標(biāo)準(zhǔn)銜接,培養(yǎng)獨(dú)立解決問(wèn)題的能力是Web前端開(kāi)發(fā)課程改革的目標(biāo),從思維認(rèn)知、教學(xué)內(nèi)容、教學(xué)方式、工程實(shí)踐和考核方式等多方面進(jìn)行了探索和實(shí)踐。

Web前端課程的教學(xué)不僅僅是某些語(yǔ)言、工具的使用,更重要的是思維,是解決問(wèn)題能力的鍛煉和提升。不僅要求教師注重自身知識(shí)儲(chǔ)備、技能的更新,還要求教師自身對(duì)課程體系有比較清晰的認(rèn)識(shí),加強(qiáng)學(xué)生對(duì)行業(yè)的認(rèn)識(shí)、職業(yè)認(rèn)知的引導(dǎo),同時(shí)在教學(xué)過(guò)程中,不拘泥于現(xiàn)有資源,積極引入其他有效教學(xué)資源,如網(wǎng)絡(luò)在線課程,企業(yè)技術(shù)人員等,只要有利于學(xué)生學(xué)習(xí)知識(shí),掌握技能,提高解決問(wèn)題的能力,都可以合理利用。

結(jié)合社會(huì)職業(yè)需求,解決復(fù)雜問(wèn)題能力的培養(yǎng),還處于探索和初步實(shí)踐階段,還需要更多的嘗試、努力和實(shí)踐,筆者接下來(lái)會(huì)繼續(xù)從教師和學(xué)生以及社會(huì)多方面進(jìn)行繼續(xù)探索和實(shí)踐,也期望看到更加有效和實(shí)際的改善。