Web前端開發(fā)的項目化課程教學(xué)實踐

霍文英 王振輝 白鴿

[ 作者簡介 ]

霍文英，女，河南洛陽人，洛陽科技職業(yè)學(xué)院，助教，碩士，研究方向：計算機(jī)應(yīng)用技術(shù)。

王振輝，男，河南洛陽人，洛陽科技職業(yè)學(xué)院，助教，本科，研究方向：計算機(jī)應(yīng)用技術(shù)。

白鴿，男，河南洛陽人，洛陽科技職業(yè)學(xué)院，助教，本科，研究方向：計算機(jī)網(wǎng)絡(luò)技術(shù)、數(shù)據(jù)庫應(yīng)用。

[ 摘要 ]

互聯(lián)網(wǎng)技術(shù)的發(fā)展推動了各行各業(yè)的發(fā)展，特別是隨著移動智能終端的普及和使用，讓各類購物網(wǎng)站、小程序等得到了廣泛應(yīng)用。在這些應(yīng)用中前端技術(shù)起著重要作用。因此，我國Web前端人才需求激增，這也為職業(yè)院校專業(yè)開設(shè)和人才培養(yǎng)提出了新要求。根據(jù)教育部要求，要針對職業(yè)技術(shù)院校，將學(xué)歷證書和職業(yè)技能等級證書有效結(jié)合，探索實施“1+X”證書制度。本文以Web前端開發(fā)專業(yè)課程教學(xué)實踐為例，闡述Web前端開發(fā)職業(yè)資格證書標(biāo)準(zhǔn)，項目化課程設(shè)計、教學(xué)方法與手段、課證融合、有效的評價機(jī)制等，對Web前端課程教學(xué)情況進(jìn)行探索，旨在為社會培養(yǎng)更多的實用性人才。

[ 關(guān)鍵詞 ]

Web前端開發(fā);課證融合;項目化課程

近年來，社會對職業(yè)教育發(fā)展廣泛關(guān)注，特別是中國在從制造大國向制造強(qiáng)國邁進(jìn)的過程中，需要更多技能型的高素質(zhì)勞動工人?！奥毥桃蝗?，就業(yè)一人，脫貧一家”，高職院校就是為社會發(fā)展培養(yǎng)各類技能人才，培養(yǎng)“先會后懂”人才，提倡“?！蟆！蹦Ｊ?，堅持產(chǎn)教融合、協(xié)同育人。因此，在國家新一輪改革發(fā)展過程中，高職院校大有可為。Web前端開發(fā)是當(dāng)前計算機(jī)應(yīng)用專業(yè)的熱門就業(yè)方向。Web前端開發(fā)技術(shù)具有更新速度快、市場人才需求量大等特點。對于高職學(xué)生來說，Web前端開發(fā)接受度高，具有高薪吸引力，能夠很好地服務(wù)本地產(chǎn)業(yè)。因此，高職院校的Web前端開發(fā)職業(yè)教育，從專業(yè)設(shè)定到課程建設(shè)再到課堂實施，都應(yīng)緊密圍繞當(dāng)前社會企業(yè)實際需求和IT行業(yè)技術(shù)發(fā)展水平，緊密結(jié)合一線企業(yè)技術(shù)規(guī)范，以達(dá)到為企業(yè)輸送“畢業(yè)就能上崗”的Web前端開發(fā)人才。

從國家當(dāng)前的制造業(yè)發(fā)展趨勢來看，對于技能型人才需求量大，高職院校也結(jié)合社會實際不斷更新專業(yè)內(nèi)容和方向，以期適應(yīng)經(jīng)濟(jì)社會的發(fā)展。但在實際工作中發(fā)現(xiàn)，一些高職院校雖然有較為前沿的專業(yè)，但是缺少對應(yīng)的熟練的教師。比如高職院校開設(shè)了Web前端開發(fā)專業(yè)，但是熟悉專業(yè)核心課程的教師很少，基本都是從計算機(jī)其他專業(yè)轉(zhuǎn)任過來的，基本的理論教學(xué)還能應(yīng)付，但是一些實踐教學(xué)很難指導(dǎo)。再如，由于專業(yè)新，發(fā)展時間短，也缺少相應(yīng)的高質(zhì)量教材。此外，從學(xué)生就業(yè)情況看，學(xué)生的技能水平還達(dá)不到一畢業(yè)就能上崗的標(biāo)準(zhǔn)。因此，從社會和企業(yè)需求來看，需要掌握相關(guān)專業(yè)知識，并具備一定前沿實踐技能的大學(xué)生才是企業(yè)需要的畢業(yè)生。因此，加強(qiáng)高職院校在校生的技能培養(yǎng)是關(guān)鍵。教育部提出了“1+X”證書制度的要求，各地開展了“1+X”證書制度試點工作，在人才培養(yǎng)過程中對學(xué)校教師和學(xué)生都提出了明確要求。比如，對于高職院校要求雙師型教師不低于50 %;并要求加強(qiáng)校企合作，發(fā)揮企業(yè)專業(yè)技術(shù)人才的優(yōu)勢，在學(xué)生實習(xí)實訓(xùn)、技能培訓(xùn)、教材編寫等方面要吸納企業(yè)技能人才參與。同時對學(xué)生提出了“1+X”證書的要求，這在政策上為高職學(xué)生技能的提高提出了明確方向。與此相關(guān)的職業(yè)技能等級證書也在持續(xù)發(fā)布，其中就包含Web前端開發(fā)證書。Web前端開發(fā)證書是對計算機(jī)專業(yè)學(xué)生Web前端開發(fā)能力的判斷依據(jù)，對于學(xué)生來說是證明自己學(xué)有所成的有力方式，對于教師來說，統(tǒng)一了教學(xué)評價的標(biāo)準(zhǔn)，也能夠有效提升教學(xué)的效果。

1 Web前端開發(fā)課程教學(xué)現(xiàn)狀分析

1.1 在教學(xué)目標(biāo)設(shè)計上，課程教學(xué)目標(biāo)多以“掌握、理解、了解”等進(jìn)行描述，注重對知識掌握程度的要求，弱化了對學(xué)生能力培養(yǎng)的要求。

1.2 在教學(xué)模式上，不少教師仍然按照傳統(tǒng)“填鴨式”開展教學(xué)，課堂還是以教師為中心，注重教師教了多少而忽視學(xué)生學(xué)了多少，重知識的傳授和獲取，輕知識的加工和問題的思考，學(xué)生只需按部就班地“依葫蘆畫瓢”，就可以完成相應(yīng)的學(xué)習(xí)。

1.3 在教學(xué)內(nèi)容方面，該課程主要包含了HTML語言、CSS樣式和Javascript等前端開發(fā)基礎(chǔ)知識，而目前主流的前端框架技術(shù)卻很少涉及。此外，Web類課程前后銜接不夠，前后端交互開發(fā)的教學(xué)案例較少，導(dǎo)致前端頁面設(shè)計和后端功能開發(fā)成了“兩張皮”，不少學(xué)生不能將Web前后端開發(fā)技術(shù)進(jìn)行有機(jī)整合，Web實際項目開發(fā)能力較弱，阻礙了知識向能力的轉(zhuǎn)化。

1.4 在考核方式方面，不少教師仍然采用“課堂授課—考前復(fù)習(xí)—試卷筆試”為主的傳統(tǒng)考核模式，考核標(biāo)準(zhǔn)還是以知識考核為主，缺乏對學(xué)生能力達(dá)成的考核。

1.5 在課程教學(xué)總結(jié)中，每次課程結(jié)束后雖然也撰寫相關(guān)教學(xué)總結(jié)，但缺乏將總結(jié)材料中的教學(xué)建議落實在后續(xù)教學(xué)中的保障機(jī)制，沒有形成有效的持續(xù)改進(jìn)閉環(huán)。

2 Web前端開發(fā)職業(yè)資格證書標(biāo)準(zhǔn)

Web前端開發(fā)專業(yè)技術(shù)技能人才培養(yǎng)目標(biāo)分為初級、中級、高級三個等級。其中獲得三個等級的證書，必須滿足相應(yīng)課程的學(xué)時要求，并達(dá)到課程要求的能力，高級證書持有者需具備復(fù)雜網(wǎng)頁開發(fā)和網(wǎng)站架構(gòu)設(shè)計規(guī)劃的能力;中級證書持有者需具備動態(tài)網(wǎng)頁設(shè)計開發(fā)的能力;初級證書持有者需具備靜態(tài)網(wǎng)頁開發(fā)的能力。

3 計算機(jī)應(yīng)用技術(shù)中的Web前端開發(fā)課程體系

Web前端開發(fā)課程是計算機(jī)應(yīng)用技術(shù)專業(yè)的一門專業(yè)必修課。通過本課程的學(xué)習(xí)，學(xué)生在項目案例開發(fā)過程中掌握并靈活應(yīng)用HTML5前端技術(shù)、PHP的基本語法知識、MySQL數(shù)據(jù)庫基本原理知識，最終以綜合項目進(jìn)行教學(xué)效果展示。為進(jìn)一步學(xué)習(xí)Web前端開發(fā)相關(guān)課程打下基礎(chǔ)，為學(xué)生就業(yè)做好知識儲備和項目積累。課程的開設(shè)依據(jù)是計算機(jī)專業(yè)人才培養(yǎng)目標(biāo)和相關(guān)職業(yè)崗位的能力要求，對本專業(yè)所面向的PHP開發(fā)程序員等崗位所需要的知識、技能、素質(zhì)目標(biāo)的達(dá)成起支撐作用。在課程的設(shè)置上，先修課程有“網(wǎng)頁設(shè)計基礎(chǔ)”與“數(shù)據(jù)庫原理”，本課程為后續(xù)課程“HTML5應(yīng)用高級”“專業(yè)技能實訓(xùn)3”打下網(wǎng)頁站點管理、基本布局及后臺交互方面的基礎(chǔ)，并為以后能順利完成畢業(yè)設(shè)計做好充分準(zhǔn)備，為就業(yè)增加成功的因素。

4 教學(xué)案例分析

本課程實踐性強(qiáng)，教學(xué)過程中以學(xué)生為主體，教師為主導(dǎo)，講練結(jié)合，在做中教，在做中學(xué)。每章每節(jié)均有精選案例引入，結(jié)合案例介紹相應(yīng)知識點，提高學(xué)生的學(xué)習(xí)興趣。以提高課堂教學(xué)效果為目的，創(chuàng)建“教學(xué)做評”的課堂教學(xué)模式，圍繞一個個精心設(shè)計的案例展開教學(xué)，遵從“從實例到理論，從具體到抽象，從個別到一般”的認(rèn)知規(guī)律，在問題的解決中提升學(xué)生的成就感和自信心，師生互動，創(chuàng)造快樂課堂氛圍。

不同專業(yè)的課程教學(xué)模式不同，對于Web前端開發(fā)課程來說，可以采取任務(wù)驅(qū)動法教學(xué)。通過設(shè)定一定的任務(wù)，將學(xué)生所需要訓(xùn)練的技能融入任務(wù)，讓學(xué)生在完成任務(wù)的過程中提高技能。也可以采用問題導(dǎo)入的方式，引導(dǎo)學(xué)生回憶舊知識，導(dǎo)入新課程。在分析案例解決問題的過程中可以采用不同的方式。方法一：先由教師分析問題，并做示范演示，然后由學(xué)生進(jìn)行實操，完成案例及知識學(xué)習(xí)，最后由教師做出評價并對共性問題進(jìn)行集中講解，學(xué)生反思并對自己在制作過程中遇到的問題進(jìn)行改進(jìn)。方法二：教師先對案例稍作分析，由學(xué)生直接嘗試解決問題，完成案例，學(xué)生嘗試之后教師再集中進(jìn)行評價講解，然后再由學(xué)生改進(jìn)自己制作過程中的問題，進(jìn)行完善。

“教學(xué)做評”屬于比較傳統(tǒng)的教學(xué)方式，但是也能夠激發(fā)學(xué)生的學(xué)習(xí)熱情。從案例的導(dǎo)入、教師的分析、學(xué)生的嘗試、教師的點評，層層遞進(jìn)，步步深入，逐步完善，不斷優(yōu)化，從而在學(xué)習(xí)過程中掌握新知識，解決新問題。在提出問題、解決問題的反復(fù)過程中，激發(fā)學(xué)生不斷探求知識的興趣，而問題的逐步解決能夠提高學(xué)生的學(xué)習(xí)信心。這樣的教學(xué)過程能夠不知不覺地加深學(xué)生對專業(yè)知識的掌握，不斷提高各項技能的訓(xùn)練，最終達(dá)到培養(yǎng)學(xué)生熟練技能的目標(biāo)。

4.1 教學(xué)內(nèi)容設(shè)計

融合“1+X”認(rèn)證標(biāo)準(zhǔn)中Web前端開發(fā)證書（中級）考點需求，設(shè)定不同難度等級的項目，情境化模擬企業(yè)項目，真實體驗軟件開發(fā)的全過程，與實際生產(chǎn)接軌。從PHP開發(fā)程序員崗位出發(fā)，分析崗位中的典型工作過程，將整個工作過程進(jìn)行重復(fù)訓(xùn)練，設(shè)定了三個層級的項目。

（1）基于HTML的淘寶商品信息展示頁面。

（2）基于HTML5+PHP+MySQL的淘寶商品信息展示平臺客戶端制作。

（3）基于HTML5+PHP+MySQL的淘寶商品信息展示平臺管理端制作。

項目內(nèi)容上緊密銜接，難度遞增，能充分涵蓋本課程的全部知識點。在教學(xué)中，項目化貫穿，任務(wù)性驅(qū)動，提高學(xué)生的實戰(zhàn)能力及學(xué)習(xí)成就感，最終提升對學(xué)生學(xué)習(xí)的興趣。本課程貫徹“做—演—用—學(xué)”一體化教學(xué)理念，學(xué)生課前做，課中演，課后用，學(xué)習(xí)貫穿始終。以學(xué)生為主體，教師為主導(dǎo)，充分利用在線優(yōu)質(zhì)資源，最終實現(xiàn)教學(xué)目的。

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

本課程主要采取任務(wù)驅(qū)動教學(xué)法、課堂討論法、合作學(xué)習(xí)法、教師講演法、情景教學(xué)法。本課程以淘寶商品信息展示平臺作為貫穿項目，以子任務(wù)方式實現(xiàn)每堂課的教學(xué)目標(biāo)。每個子項目開發(fā)背景中，課程采用情景引入法，客戶提出軟件需求，學(xué)生作為客戶經(jīng)理進(jìn)行軟件產(chǎn)品需求分析，并模擬企業(yè)PHP開發(fā)程序員全程跟蹤軟件開發(fā)的全過程。主題討論、合作學(xué)習(xí)，促進(jìn)生生之間友好競爭，共同進(jìn)步。課中，針對重難點，采用教師講演法，學(xué)生認(rèn)真做好筆記。

4.3 教學(xué)載體設(shè)計

以淘寶商品信息展示平臺為貫穿項目，分三個子項目，子項目一：基于HTML5的淘寶商品信息展示頁面制作;子項目二：基于HTML5+PHP+MySQL的淘寶商品信息展示平臺（用戶端）制作;子項目三：基于HTML5+PHP+MySQL的淘寶商品信息展示平臺（管理端）制作。子項目之間關(guān)聯(lián)緊密，能力螺旋遞進(jìn)，涵蓋Web應(yīng)用系統(tǒng)開發(fā)的綜合知識和技能點。

5 結(jié)束語

對標(biāo)“1+X”Web前端開發(fā)（中級）認(rèn)證考試其中對PHP技術(shù)的掌握與應(yīng)用要求，融入項目教學(xué)中，涵蓋完整的考試知識要點，有利于幫助學(xué)生順利通過Web前端開發(fā)中級證書考試。教學(xué)項目從實際項目中來，情景化模式導(dǎo)入，學(xué)生有代入感，作為一名企業(yè)程序員的角色來完成學(xué)習(xí)任務(wù)，有利于學(xué)生提前進(jìn)入工作角色，對自己提高要求。在教學(xué)中，邀請企業(yè)工程師為學(xué)生講解企業(yè)軟件開發(fā)的典型過程、技術(shù)發(fā)展趨勢，拓寬學(xué)生的技術(shù)視野。項目安排難度由簡單到復(fù)雜，幫助學(xué)生獲得學(xué)習(xí)的樂趣與成就感。

參考文獻(xiàn)

[1]鄭根讓，史志強(qiáng)，何成，等. 1+X證書制度下以書證融通重構(gòu)專業(yè)核心課程體系：以WEB前端開發(fā)證書與軟件技術(shù)專業(yè)為例[J]. 職業(yè)教育研究，2020（1）：12-17.

[2]肖靜. “1+X”證書背景下中職信息專業(yè)教學(xué)內(nèi)容的優(yōu)化：以Web前端開發(fā)證書和網(wǎng)頁設(shè)計與開發(fā)課程為例[J]. 西部素質(zhì)教育，2020，6（11）：124-125.

[3]李斌. “1+X證書”育人機(jī)制下高職教師職業(yè)能力提升策略研究：以Web前端開發(fā)為例[J]. 當(dāng)代教育實踐與教學(xué)研究，2020（13）：134-135.

[4]趙革委，閆軍. “1+X”證書制度下繼續(xù)教育人才培養(yǎng)模式探析：以陜西工業(yè)職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)Web前端開發(fā)證書為例[J]. 陜西教育（高教），2020（9）：54-56.

[5]李月峰. “1+X”證書制度下專業(yè)課程體系融合與重構(gòu)探索：以軟件技術(shù)“Web前端開發(fā)”專業(yè)為例[J]. 電腦知識與技術(shù)，2020，16（28）：134-135，150.

[6]劉德陽，劉奎，王廣軍. Web前端開發(fā)課程項目化教學(xué)改革與實踐[J]. 智庫時代，2019（36）：181-182.

[7]任遠(yuǎn). “1+X證書”背景下的Web前端開發(fā)教學(xué)實踐[J]. 網(wǎng)絡(luò)安全技術(shù)與應(yīng)用，2021（2）：85-86.

[8]魏歡. 前端開發(fā)，數(shù)字媒體應(yīng)用技術(shù)：淺析互聯(lián)網(wǎng)下教學(xué)一體化Web前端開發(fā)課程的教學(xué)模式[J]. 科學(xué)咨詢，2020（7）：38.

[9]王婷. 《前端開發(fā)框架》課程項目式教學(xué)的改革與實踐[J]. 數(shù)碼世界，2020（8）：135-136.

[10]宋麗萍. 互聯(lián)網(wǎng)+視域下C-PBL混合式教學(xué)方式的實踐應(yīng)用分析[J]. 北京印刷學(xué)院學(xué)報，2020，28（3）：128-131.