基于企業(yè)項目實(shí)踐的Web前端設(shè)計課程教學(xué)改革探索

章懿雯 陶碩

摘要：隨著互聯(lián)網(wǎng)的不斷發(fā)展，Web前端開發(fā)的人才需求比以前有了質(zhì)的飛躍。針對當(dāng)前高職Web前端開發(fā)課程普遍存在的教學(xué)內(nèi)容脫離崗位實(shí)際、教學(xué)方式不夠豐富立體、學(xué)生學(xué)習(xí)效果參差不齊等問題，論文以真實(shí)企業(yè)項目公益網(wǎng)站開發(fā)為例展開課程教學(xué)改革和探索，通過校企合作引入Web開發(fā)工作流程，緊貼實(shí)際開展情景化教學(xué)，動態(tài)實(shí)施差異化教學(xué)和多元化評價，取得了良好的教學(xué)實(shí)踐效果，為Web前端開發(fā)課程下一步改革和發(fā)展提供了有益的探索。

關(guān)鍵詞： Web前端設(shè)計；企業(yè)項目實(shí)踐；教學(xué)改革；校企合作

中圖分類號：G642 ? ? ? ?文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2022）29-0165-00

1 引言

2019年1月國務(wù)院在《國家職業(yè)教育改革實(shí)施方案》[1]中指出：按照專業(yè)設(shè)置與產(chǎn)業(yè)需求對接、課程內(nèi)容與職業(yè)標(biāo)準(zhǔn)對接、教學(xué)過程與生產(chǎn)過程對接的要求，完善中高等職業(yè)學(xué)校設(shè)置標(biāo)準(zhǔn)，規(guī)范職業(yè)院校設(shè)置。同年4月，教育部等四部門印發(fā)《關(guān)于在院校實(shí)施“學(xué)歷證書+若干職業(yè)技能等級證書”制度試點(diǎn)方案》[2]，在5個領(lǐng)域遴選確定參與首批試點(diǎn)的職業(yè)技能等級證書，其中包括Web前端開發(fā)職業(yè)技能等級證書。

2 教學(xué)概況

Web前端設(shè)計課程是計算機(jī)應(yīng)用技術(shù)專業(yè)核心課程，課程標(biāo)準(zhǔn)對接國家“1+X” Web前端開發(fā)職業(yè)技能標(biāo)準(zhǔn)（初級），包含Web開發(fā)崗位的兩大核心要素：HTML5和CSS3，學(xué)生學(xué)習(xí)后可利用HTML、CSS等專業(yè)知識將產(chǎn)品UI設(shè)計稿實(shí)現(xiàn)成網(wǎng)站。本課程為專業(yè)培養(yǎng)目標(biāo)中的“網(wǎng)絡(luò)應(yīng)用開發(fā)”奠定基礎(chǔ)，并與PHP動態(tài)網(wǎng)站開發(fā)、JavaScript技術(shù)等課程相結(jié)合，培養(yǎng)網(wǎng)站設(shè)計與管理方向高素質(zhì)技能人才。

隨著現(xiàn)代信息技術(shù)的發(fā)展和職業(yè)教育的新要求，馬鞍山職業(yè)技術(shù)學(xué)院開設(shè)的“Web前端設(shè)計”課程在教學(xué)中也暴露出一些問題：

一是課程內(nèi)容設(shè)置上，教師多半依據(jù)自身對Web前端開發(fā)就業(yè)方向的理解和對學(xué)生學(xué)情的把握，自行設(shè)計和編排課程，課程內(nèi)容多以課程的知識體系和章節(jié)順序進(jìn)行，導(dǎo)致教學(xué)內(nèi)容脫離Web前端類崗位的實(shí)際需求；二是教學(xué)課堂上，學(xué)生多以獨(dú)立實(shí)驗為主，缺乏實(shí)際Web前端開發(fā)項目經(jīng)驗和團(tuán)隊工作意識，與實(shí)際崗位素質(zhì)要求相差較遠(yuǎn)，不符合職業(yè)教育的培養(yǎng)要求，直接影響人才培養(yǎng)質(zhì)量；三是教學(xué)目標(biāo)設(shè)置上，教師過往采取統(tǒng)一目標(biāo)，但實(shí)際學(xué)生之間知識、技能、素質(zhì)不一，總有同學(xué)難以達(dá)成課堂目標(biāo)。

3 基于企業(yè)項目實(shí)踐的課程教學(xué)與改革

目前，Web前端開發(fā)技術(shù)已融入人們生活的方方面面。如何培養(yǎng)學(xué)生實(shí)踐能力，使學(xué)生能夠?qū)W以致用，是本課程教學(xué)改革的關(guān)鍵所在。針對上述問題，筆者對課程實(shí)施了有效的教學(xué)改革：

（1） 對接“Web前端開發(fā)職業(yè)技能等級標(biāo)準(zhǔn)”修訂Web前端設(shè)計課程標(biāo)準(zhǔn)，梳理課程教學(xué)內(nèi)容和知識體系，通過企業(yè)實(shí)際案例設(shè)置以行動導(dǎo)向的模塊化課程；

（2） 對接Web前端開發(fā)職業(yè)技能等級證書考試大綱，實(shí)施課證融通；

（3） 采用企業(yè)項目化教學(xué)模式[3]，通過項目分析、討論、實(shí)施及相關(guān)知識點(diǎn)學(xué)習(xí)，讓師生共同參與到項目任務(wù)中；

（4） 實(shí)施分層分組教學(xué)，彈性設(shè)置教學(xué)目標(biāo)。

3.1具體實(shí)踐方案

按照Web前端開發(fā)工程師職業(yè)能力[4]要求，依據(jù)課程標(biāo)準(zhǔn)制定工作任務(wù)，下面筆者以為企業(yè)制作公益網(wǎng)站“關(guān)愛老人”項目為例，組織學(xué)生學(xué)習(xí)Web前端開發(fā)職業(yè)技能標(biāo)準(zhǔn)中對應(yīng)的“網(wǎng)頁布局與美化”，以崗位標(biāo)準(zhǔn)化工作流程組織教學(xué)，如圖1。

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

本課程開始前，學(xué)生經(jīng)過前期學(xué)習(xí)，已具備 HTML5+CSS3 代碼編寫能力，大致熟悉網(wǎng)站項目開發(fā)流程，具有一定團(tuán)隊協(xié) 作能力，但缺乏實(shí)際應(yīng)用能力，設(shè)計制作的作品與用戶需求有一定距離。筆者在教學(xué)內(nèi)容設(shè)置上，根據(jù)學(xué)生的認(rèn)知特點(diǎn)和知識點(diǎn)的遞進(jìn)關(guān)系，將網(wǎng)頁布局與定位項目分解為四個典型工作任務(wù)[5]（見圖2），引導(dǎo)學(xué)生使用CSS設(shè)計網(wǎng)頁樣式、美化網(wǎng)頁樣式、使用盒子模型等，按照實(shí)際項目開發(fā)流程，遵循軟件需求分析到驗收完成生命周期的規(guī)范，培養(yǎng)學(xué)生項目開發(fā)的能力。

3.1.2教學(xué)流程

教學(xué)流程上，筆者采取線上線下相結(jié)合的方式，按照網(wǎng)站制作的標(biāo)準(zhǔn)工作流程展開教學(xué)實(shí)踐。教師在線發(fā)布任務(wù)書并答疑解惑，學(xué)生學(xué)習(xí)新知后結(jié)成小組，各小組自行討論項目實(shí)施方案并合理分配任務(wù)，共同協(xié)作完成任務(wù)。

下面是四個任務(wù)的具體展開流程：

任務(wù)一“新聞動態(tài)”頁面制作：課前教師發(fā)放項目任務(wù)書[6]，下發(fā)客戶需求說明書，學(xué)生利用MOOC預(yù)習(xí)float屬性。課中，師生利用思維導(dǎo)圖共同安排項目任務(wù)流程，同時學(xué)生在企業(yè)導(dǎo)師的幫助下完成頁面效果圖。教師確認(rèn)最終頁面效果圖，上傳項目驗收清單，下發(fā)本次課程任務(wù)清單，之后學(xué)生進(jìn)行項目實(shí)踐，教師根據(jù)制作過程中問題對相關(guān)知識點(diǎn)進(jìn)行講解，安排相關(guān)實(shí)驗，強(qiáng)化訓(xùn)練。

任務(wù)二“健康管理”頁面制作：學(xué)生課前MOOC復(fù)習(xí)float屬性，實(shí)現(xiàn)多列布局并進(jìn)行自測，教師根據(jù)學(xué)生學(xué)習(xí)情況，調(diào)整教學(xué)策略。課中，使用頭腦風(fēng)暴組織展開多列布局實(shí)現(xiàn)方法的討論，安排相關(guān)實(shí)驗，強(qiáng)化實(shí)訓(xùn)。之后各組接受項目任務(wù)，完成“健康管理”頁面制作，最后分享、互評。課后，教師發(fā)布拓展任務(wù)，制作一個兩列布局的頁面。

任務(wù)三“需求大廳”頁面制作：學(xué)生課前MOOC預(yù)習(xí)定位屬性。課中，小組討論確定結(jié)構(gòu)，教師讓學(xué)生利用自主設(shè)計的定位游戲來實(shí)現(xiàn)案例頁面布局效果，從而掌握課程難點(diǎn)——絕對定位的使用。之后各小組自行進(jìn)行項目實(shí)踐，分享并點(diǎn)評作品。課后，復(fù)習(xí)鞏固，完成自測，并完成下節(jié)課程的預(yù)習(xí)任務(wù)。

任務(wù)四“關(guān)愛老人”頁面制作：發(fā)布任務(wù)清單，小組分配任務(wù)，學(xué)生自行制作關(guān)愛老人首頁。任務(wù)完成后，由老師和企業(yè)導(dǎo)師引導(dǎo)對作品進(jìn)行“冒煙”測試與完善，并根據(jù)項目驗收表對項目進(jìn)行驗收并整理相關(guān)文檔。

課堂中以“關(guān)愛老人”公益網(wǎng)站項目來開展教學(xué)，教師扮演業(yè)務(wù)經(jīng)理[4]，指導(dǎo)學(xué)生項目實(shí)施；學(xué)生分成各項目小組，每組組長任項目經(jīng)理，成員自主選擇相匹配的任務(wù)。項目完成后，教師、企業(yè)導(dǎo)師、學(xué)生共同來完成項目作品評價。這種沉浸式角色扮演的項目教學(xué)讓學(xué)生真正成為課堂中的主人，在項目實(shí)施過程中掌握實(shí)際技能并熟悉Web前端開發(fā)實(shí)際工作流程。

3.2 ?教學(xué)反思

3.2.1 建設(shè)情境化教學(xué)案例庫，探索實(shí)施差異化教學(xué)、差異化輔導(dǎo)

學(xué)生在學(xué)習(xí)該門課程之前對于前端知識的了解程度不一，每個學(xué)生的學(xué)習(xí)能力也不同，因此筆者對于Web前端設(shè)計課程采取情景化教學(xué)模式，在教學(xué)內(nèi)容上分層次設(shè)計情境教學(xué)案例。學(xué)生在自主設(shè)計網(wǎng)站作品時，允許他們根據(jù)自身接受能力和學(xué)習(xí)進(jìn)度自主選擇相應(yīng)的案例進(jìn)行學(xué)習(xí)和再創(chuàng)作，使得不同基礎(chǔ)和能力的學(xué)生都能夠?qū)W到知識，提高能力。教學(xué)實(shí)施過程中采取教師和由學(xué)生自發(fā)組成的輔導(dǎo)小組相結(jié)合的方式來幫助解決課堂問題，以形成良好的教學(xué)氛圍，提高教學(xué)效率。

3.2.2探索多元化的校企合作模式，引入Web開發(fā)工作流程

作為計算機(jī)前端專業(yè)課教師要不間斷接受企業(yè)培訓(xùn)，個人具備的專業(yè)技能要符合社會企業(yè)需求，教師個人技能及時更新，才能保證教學(xué)內(nèi)容實(shí)時更新。同時企業(yè)要主動參與到教育中，校企深度融合。企業(yè)中對接專業(yè)教學(xué)的負(fù)責(zé)人將工作目標(biāo)與學(xué)生實(shí)踐相融合，以企業(yè)項目或者企業(yè)面向社會發(fā)展設(shè)立的新項目，將其分化出一部分作為學(xué)生需要完成的學(xué)業(yè)考察部分作為教學(xué)項目，對于學(xué)生自主學(xué)習(xí)前端知識有積極的作用。因此教師要積極探索實(shí)現(xiàn)校企合作模式的多元化[7]，企業(yè)提供實(shí)習(xí)基地、設(shè)備，參與教學(xué)計劃制定，并指派專業(yè)人員參與課程教學(xué)。通過校企合作，引入實(shí)際Web開發(fā)案例，以企業(yè)標(biāo)準(zhǔn)制定工作流程，從需求分析、項目管理、架構(gòu)設(shè)計、具體開發(fā)、后期測試等環(huán)節(jié)實(shí)施項目化教學(xué)，讓教學(xué)過程更能貼近實(shí)際工作情景，提升學(xué)生前端實(shí)際開發(fā)的能力。

3.2.3多元評價體現(xiàn)教學(xué)效果

對于學(xué)生采取更為靈活的學(xué)分管理，理論與實(shí)踐合理分配，同時在評價方式上可以讓多種方式，校企雙方共同檢驗學(xué)生的學(xué)習(xí)成效，例如課堂實(shí)踐，教師評價，企業(yè)教師評價，小組評價等多種方式，綜合評定教學(xué)效果，反映學(xué)生專業(yè)技能水平。同時鼓勵學(xué)生申報前端工程師技能等級證書考核，重點(diǎn)突出對學(xué)生職業(yè)能力，職業(yè)情感與綜合素質(zhì)的培養(yǎng)與提升，考試不局限于課堂，畢業(yè)以后獲得學(xué)歷和職業(yè)能力雙證的畢業(yè)生比普通高等職業(yè)教育畢業(yè)的學(xué)生更受青睞，更受企業(yè)和社會大眾歡迎。

4 結(jié)語

教師根據(jù)標(biāo)準(zhǔn)Web前端開發(fā)工程師工作流程組織教學(xué)過程，學(xué)生通過角色扮演沉浸式學(xué)習(xí)，分組協(xié)作共同探究，這種教學(xué)模式可有效提升學(xué)生的崗位操作能力、合作能力。以制作網(wǎng)站任務(wù)驅(qū)動和小組協(xié)作方式展開課堂教學(xué)，允許學(xué)生選擇學(xué)習(xí)方法和任務(wù)，使得課堂中人人有事可做，學(xué)生成為主角，教師只從旁指導(dǎo)，大大激發(fā)了學(xué)生學(xué)習(xí)積極性和實(shí)踐主動性。同時設(shè)置彈性學(xué)習(xí)目標(biāo)，引導(dǎo)學(xué)生對作品進(jìn)行不斷改進(jìn)和完善，可培養(yǎng)學(xué)生精益求精的工匠精神。目前學(xué)生制作的多個公益網(wǎng)站已部署試運(yùn)行。

以上實(shí)踐證明，整合校企資源、利用企業(yè)項目實(shí)踐教學(xué)改革這條道路，有力促進(jìn)了高職前端設(shè)計人才職業(yè)技能的培養(yǎng)，同時也豐富了職業(yè)教育的教學(xué)手段，提升了教學(xué)效果，將成為高職職業(yè)教育改革發(fā)展的主要方向。

參考文獻(xiàn)：

[1] 任怡平.新時期我國職業(yè)教育改革的應(yīng)然轉(zhuǎn)變與發(fā)展指向——基于《國家職業(yè)教育改革實(shí)施方案》的背景[J].成人教育，2020，40（10）：59-64.

[2] 李德平.1+X證書制度下Web前端開發(fā)職業(yè)技能等級考證試點(diǎn)的研究與實(shí)踐[J].北京工業(yè)職業(yè)技術(shù)學(xué)院學(xué)報，2021，20（1）：36-40.

[3] 王健慶.項目式計算機(jī)實(shí)踐教學(xué)研究[J].福建電腦，2021，37（1）：109-111.

[4] 戴勇，張錚，郭瓊.職業(yè)院校實(shí)施1+X證書制度的思路與舉措[J].中國職業(yè)技術(shù)教育，2019（10）：29-32.

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

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

[7] 張洪海.Web前端技術(shù)在教學(xué)應(yīng)用中改革創(chuàng)新[J].電腦知識與技術(shù)，2018，14（18）：112-113.

【通聯(lián)編輯：王力】