◆任遠(yuǎn)

“1+X證書”背景下的Web前端開發(fā)教學(xué)實(shí)踐

◆任遠(yuǎn)

（江蘇聯(lián)合職業(yè)技術(shù)學(xué)院徐州財(cái)經(jīng)分院 江蘇 221008）

本文論述了當(dāng)前Web前端開發(fā)教學(xué)現(xiàn)狀中存在的主要問題，在此基礎(chǔ)上提出了教學(xué)改進(jìn)與實(shí)踐方案。通過引入“1+X證書”以考引學(xué)，“模塊—項(xiàng)目—任務(wù)”化的教學(xué)模式，校企融合，四維立體多元評(píng)價(jià)標(biāo)準(zhǔn)，提升學(xué)生認(rèn)知、強(qiáng)化學(xué)生技能，實(shí)現(xiàn)“做中學(xué)、學(xué)中做”。

“1+X證書”；Web前端開發(fā)；項(xiàng)目驅(qū)動(dòng)式教學(xué)

在黨的十九屆五中全會(huì)審議通過的《中共中央關(guān)于制定國民經(jīng)濟(jì)和社會(huì)發(fā)展第十四個(gè)五年規(guī)劃和二〇三五年遠(yuǎn)景目標(biāo)的建議》中，對(duì)職業(yè)教育提出了新的更高要求。五中全會(huì)要求扎實(shí)推動(dòng)職業(yè)教育改革，深化職普融通、產(chǎn)教融合、校企合作，圍繞高質(zhì)量發(fā)展大力培養(yǎng)技術(shù)技能人才，探索職業(yè)教育發(fā)展規(guī)律，為做好職業(yè)教育頂層設(shè)計(jì)和制度安排提供實(shí)踐支撐。

在科技自強(qiáng)自立的戰(zhàn)略支撐背景下，為了輸送圍繞互聯(lián)網(wǎng)+、新興技術(shù)行業(yè)帶來的Web前端開發(fā)技術(shù)技能人才，職業(yè)院校肩負(fù)重任。為此，國務(wù)院在2019年1月24日公開發(fā)布的《國家職業(yè)教育改革實(shí)施方案》中明確提出“1+X”證書制度[1]，要求職業(yè)院校學(xué)生在取得相應(yīng)在校學(xué)習(xí)學(xué)歷證書的同時(shí)，還要具備相應(yīng)的職業(yè)崗位綜合素養(yǎng)和技能水平[2]。其中，Web 前端開發(fā)被確定為首批職業(yè)技能領(lǐng)域試點(diǎn)等級(jí)證書，可見Web前端開發(fā)受到的重視。

同時(shí)，在互聯(lián)網(wǎng)+、新興技術(shù)行業(yè)帶來的行業(yè)變革中，Web前端開發(fā)面臨著巨大的人才缺口[3]。為此，職業(yè)教育肩上背負(fù)著培養(yǎng)具有良好職業(yè)道德和人文素養(yǎng)，掌握Web前端開發(fā)基礎(chǔ)知識(shí)，具備網(wǎng)頁設(shè)計(jì)、開發(fā)、調(diào)試、維護(hù)等能力，能從事Web前端軟件編碼、軟件測(cè)試、軟件技術(shù)服務(wù)等工作的技術(shù)技能人才的重任。

1 教學(xué)現(xiàn)狀

信息時(shí)代對(duì)程序設(shè)計(jì)人才的需求帶來了新的機(jī)遇和挑戰(zhàn)。Web前端開發(fā)作為程序設(shè)計(jì)相關(guān)課程受到重視，但是在職業(yè)教育階段的Web前端開發(fā)教學(xué)現(xiàn)狀也存在著以下諸多問題：

1.1 學(xué)情特殊

根據(jù)軟件技術(shù)專業(yè)人才培養(yǎng)方案，Web前端開發(fā)的教學(xué)主體是五年制高職軟件技術(shù)專業(yè)的三年級(jí)學(xué)生。通過平臺(tái)的測(cè)試數(shù)據(jù)統(tǒng)計(jì)顯示，這一階段的學(xué)生在學(xué)習(xí)能力和學(xué)習(xí)態(tài)度上有著顯著的特點(diǎn)。在學(xué)習(xí)能力上，對(duì)于理論知識(shí)的理解能力較差，對(duì)于知識(shí)的內(nèi)化和遷移能力較弱，而動(dòng)手能力相對(duì)較強(qiáng)，有強(qiáng)烈的展示自我的意愿。在學(xué)習(xí)態(tài)度上，對(duì)于傳統(tǒng)的學(xué)習(xí)模式缺乏興趣，喜歡開放合作的學(xué)習(xí)方式，更愿意帶著問題的引導(dǎo)去探索、解開謎題。

舉例來說，學(xué)生在學(xué)習(xí)CSS模塊的box-sizing的時(shí)候，對(duì)于padding和margin的內(nèi)部實(shí)現(xiàn)缺乏興趣，理解不深入。在通過練手項(xiàng)目引導(dǎo)后，大部分學(xué)生可以實(shí)現(xiàn)盒模型布局。但是在實(shí)現(xiàn)進(jìn)階任務(wù)“網(wǎng)頁雙飛翼布局”的時(shí)候，又因?yàn)閷?duì)于盒模型理解不夠深入，無法完成高階的頁面布局細(xì)節(jié)。

1.2 教學(xué)結(jié)構(gòu)不合理

Web前端開發(fā)程序設(shè)計(jì)中的知識(shí)點(diǎn)抽象而且瑣碎，涵蓋HTML、CSS、JavaScript三種編程語言，彼此之間語法互不相通。而教材是按照知識(shí)點(diǎn)的邏輯順序編排的，為課堂教學(xué)提供了線索?，F(xiàn)有的教學(xué)活動(dòng)過于簡單粗暴地以教材線索作為知識(shí)順序，只有局部而沒有整體，忽視了模塊之間的融會(huì)貫通，而學(xué)生的思維認(rèn)識(shí)水平又有局限性，導(dǎo)致知識(shí)無法內(nèi)化。

現(xiàn)有教學(xué)結(jié)構(gòu)一般是安排第一模塊學(xué)習(xí)HTML，第二模塊學(xué)習(xí)CSS，第三模塊學(xué)習(xí)JavaScript。學(xué)生在完整的學(xué)習(xí)了HTML標(biāo)記對(duì)之后，甚至對(duì)于網(wǎng)頁的CSS樣式和JavaScript腳本缺乏最基本的了解，知識(shí)之間無法貫通，沒法對(duì)整個(gè)項(xiàng)目有深入的理解。在最初學(xué)習(xí)HTML的很長一段時(shí)間內(nèi)都無法做出有實(shí)際樣式效果的網(wǎng)頁，使學(xué)生缺乏成就感、感到學(xué)習(xí)過程枯燥。

1.3 教學(xué)內(nèi)容陳舊，和企業(yè)脫節(jié)

因?yàn)閃eb前端開發(fā)課程的特點(diǎn)是知識(shí)迭代速度極快、新框架學(xué)習(xí)周期短，因此企業(yè)技術(shù)棧更新的更新速度也非?？?，2010年時(shí)的主流JS框架jQuery僅僅在10年之后就被Vue、React全面取代，這期間還有曇花一現(xiàn)就在前端框架的快速迭代中被迅速湮沒的Angular、Ember、Svelte、Preact等等框架，更別說CSS之后又出現(xiàn)了SASS、LESS等等新的樣式語言。所以現(xiàn)有的教學(xué)內(nèi)容，往往不足以支撐日新月異的企業(yè)開發(fā)需求。更需要在教學(xué)過程中，在打好萬變不離其宗的基礎(chǔ)后，帶學(xué)生了解、實(shí)踐最新的企業(yè)開發(fā)技術(shù)。

1.4 缺乏評(píng)價(jià)維度

傳統(tǒng)的學(xué)習(xí)評(píng)價(jià)僅僅依賴于學(xué)生的作業(yè)、測(cè)試、考試成績，體現(xiàn)的維度較為單一。對(duì)于學(xué)生學(xué)習(xí)進(jìn)程中的評(píng)價(jià)標(biāo)準(zhǔn)、學(xué)生的技術(shù)能力能否適用于企業(yè)的評(píng)價(jià)標(biāo)準(zhǔn)較為缺乏。而程序設(shè)計(jì)，是一門富有創(chuàng)造性的學(xué)科，同樣一個(gè)網(wǎng)頁中的動(dòng)畫效果，可以通過CSS3實(shí)現(xiàn)、可以通過JavaScript實(shí)現(xiàn)、也可以通過jQuery和其他前端框架進(jìn)行實(shí)現(xiàn)，僅僅靠看學(xué)生作業(yè)的實(shí)現(xiàn)效果進(jìn)行評(píng)價(jià)是不夠科學(xué)的，需要學(xué)生對(duì)自己、學(xué)生對(duì)學(xué)生、企業(yè)對(duì)學(xué)生等各種維度上進(jìn)行評(píng)價(jià)，才能得到更為科學(xué)的綜合評(píng)價(jià)。

2 教學(xué)改進(jìn)與實(shí)踐

2.1 引入“1+X證書”教學(xué)模式，以考引學(xué)

根據(jù)學(xué)生學(xué)情可以看出，學(xué)生對(duì)崗位缺乏了解，對(duì)學(xué)習(xí)路線缺乏目標(biāo)。因此，可以通過優(yōu)秀的學(xué)長在企業(yè)實(shí)習(xí)、工作的案例，引起學(xué)生對(duì)就業(yè)崗位的興趣。進(jìn)一步引入“1+X”考證的目標(biāo)和課程體系，指引學(xué)生按照“1+X”中根據(jù)學(xué)歷教育教學(xué)與行業(yè)企業(yè)職業(yè)培訓(xùn)有機(jī)融合指定的學(xué)習(xí)路線進(jìn)行學(xué)習(xí)。

為此，可以將“1+X”Web 前端開發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)中的職業(yè)技能、工作任務(wù)與職業(yè)素養(yǎng)與課程中的模塊、項(xiàng)目、任務(wù)相融合，利用循環(huán)管理策略，將模塊-模塊之間、模塊中的項(xiàng)目-項(xiàng)目之間，項(xiàng)目中的任務(wù)-任務(wù)之間形成循環(huán)遞進(jìn)式的課程處理模式。

2.2 重組教材，形成“模塊—項(xiàng)目—任務(wù)”化的教學(xué)模式

成為一名合格的Web前端程序員的最快學(xué)習(xí)方法一定是不斷實(shí)踐，而原有的教材中按照知識(shí)邏輯形成的課程體系缺乏有效的實(shí)踐性，經(jīng)過一段時(shí)間的學(xué)習(xí)后往往是對(duì)前端三大語言中的某一門語言完成深挖，難以融會(huì)貫通完成符合初級(jí)標(biāo)準(zhǔn)的完整網(wǎng)頁。因此，我們依照軟件專業(yè)實(shí)施性人才培養(yǎng)方案、課程標(biāo)準(zhǔn)、“1+X”Web 前端開發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)，以規(guī)劃教材內(nèi)容為基礎(chǔ)，邀請(qǐng)了合作企業(yè)的 Web 前端工程師共同開發(fā)課程模塊，結(jié)合市場(chǎng)、企業(yè)對(duì)本專業(yè)職業(yè)技能人員的工作領(lǐng)域、工作任務(wù)、知識(shí)要求不斷完善項(xiàng)目和任務(wù)，讓知識(shí)點(diǎn)不脫離教材，實(shí)施過程不依賴教材。充分體現(xiàn)教材工具書的作用。將原有的“單元”-“任務(wù)”模式，修改為“模塊—項(xiàng)目—任務(wù)”模式，根據(jù)企業(yè)的真實(shí)需求，以實(shí)際的開發(fā)流程來修改、整合項(xiàng)目案例，將本書的知識(shí)點(diǎn)和技能點(diǎn)“打散”、“揉碎”，再“貫穿”到案例中去，以任務(wù)操作層層推進(jìn)的驅(qū)動(dòng)方式讓學(xué)生從識(shí)知到領(lǐng)悟、從模仿到創(chuàng)新。

例如，為了解決傳統(tǒng)教學(xué)中一開始只學(xué)HTML標(biāo)記對(duì)、學(xué)生學(xué)了很久還做不出帶樣式的網(wǎng)頁這一問題，教學(xué)過程中的第一個(gè)模塊設(shè)置為制作一個(gè)“紅色電影影評(píng)網(wǎng)頁”。為了實(shí)現(xiàn)該網(wǎng)頁，分為HTML、CSS、JavaScript的三個(gè)小項(xiàng)目。在第一個(gè)HTML的項(xiàng)目中只需要學(xué)會(huì)HTML中最簡單的html、div、img、p標(biāo)記對(duì)，就可以完成該網(wǎng)頁的基礎(chǔ)布局，而無須過于關(guān)注更為復(fù)雜的table、form、HTML5等標(biāo)記對(duì)。在第二個(gè)CSS的項(xiàng)目中，只需要去學(xué)會(huì)CSS中最基礎(chǔ)的font-size、height、width、background等基礎(chǔ)屬性，而無須去選擇CSS中較為艱深的盒模型、選擇器等。在第三個(gè)JavaScript的項(xiàng)目中，只需要學(xué)會(huì)簡單的alert（）去對(duì)腳本語言有一個(gè)以點(diǎn)概面的了解，而無須深入。

2.3 校企融合，引入行業(yè)最新知識(shí)

在任務(wù)引入階段，形成以“企業(yè)專家引入項(xiàng)目、教師引導(dǎo)思路、學(xué)生主動(dòng)學(xué)習(xí)”的方式，每節(jié)課都有結(jié)合市場(chǎng)、企業(yè)對(duì)本專業(yè)職業(yè)技能人員制定的符合行業(yè)最前沿技術(shù)的任務(wù)。

在實(shí)施階段，實(shí)施對(duì)學(xué)生的分層教學(xué)。對(duì)于所有學(xué)生制定一個(gè)通過課本上基礎(chǔ)知識(shí)能夠完成的目標(biāo)；對(duì)于學(xué)有余力的學(xué)生提供行業(yè)新知識(shí)的材料，通過前沿技術(shù)實(shí)現(xiàn)進(jìn)階目標(biāo)；對(duì)于一部分拔尖的學(xué)生，提供課后思考達(dá)到更高高度的思路，引導(dǎo)他們自主學(xué)習(xí)時(shí)效性最強(qiáng)的新技能，提高自我學(xué)習(xí)的能力。

舉例來說，在制作購物網(wǎng)站首頁時(shí)，由企業(yè)專家錄制任務(wù)視頻，介紹項(xiàng)目的需求，并分解任務(wù)、指出可以采用的技術(shù)棧。譬如在制作該網(wǎng)頁的輪播圖效果時(shí)，對(duì)于所有學(xué)生的基本需求是能夠使用CSS3的Animation和@keyframe屬性實(shí)現(xiàn)輪播圖定時(shí)播放的效果；對(duì)于動(dòng)手能力強(qiáng)的學(xué)生，可以閱讀超星泛雅課堂平臺(tái)上傳的貼近企業(yè)內(nèi)前沿技術(shù)的swiper.js相關(guān)材料，自行調(diào)用swiper.js并利用預(yù)設(shè)的接口實(shí)現(xiàn)相同功能；對(duì)于一部分能力突出的學(xué)生，提供超星泛雅平臺(tái)上的課后拓展閱讀，引導(dǎo)他們用原生JavaScript動(dòng)手“造輪子”，完整掌握背后的結(jié)構(gòu)原理、實(shí)現(xiàn)功能。

2.4 采用四維立體多元評(píng)價(jià)標(biāo)準(zhǔn)

采用線上“自評(píng)”、“互評(píng)”、“教師評(píng)”、“企業(yè)評(píng)”的四維立體的多元化評(píng)價(jià)系統(tǒng)，補(bǔ)充主題討論、平臺(tái)互動(dòng)等信息化手段，體現(xiàn)評(píng)價(jià)方式多元化。將項(xiàng)目整體布局、響應(yīng)式設(shè)計(jì)、細(xì)節(jié)處理、代碼規(guī)范、用戶體驗(yàn)納入小組評(píng)價(jià)指標(biāo)，小組成員在學(xué)習(xí)過程中合作、探究、交流、職業(yè)規(guī)范等納入個(gè)人評(píng)價(jià)指標(biāo)，依托平臺(tái)及時(shí)采集、處理和推送評(píng)價(jià)信息，引導(dǎo)師生改進(jìn)教與學(xué)。

課前學(xué)習(xí)平臺(tái)學(xué)習(xí)情況、課中項(xiàng)目推進(jìn)過程、課后實(shí)踐成果評(píng)估都可量化，全面記錄學(xué)生每一環(huán)節(jié)表現(xiàn)，實(shí)現(xiàn)了學(xué)習(xí)的客觀評(píng)價(jià)。以超星泛雅教學(xué)平臺(tái)為載體，匯總各環(huán)節(jié)分?jǐn)?shù)，形成完整有效的全過程評(píng)價(jià)。

3 結(jié)語

在全球新一輪的競(jìng)爭中，科技革命已經(jīng)成了體現(xiàn)國家競(jìng)爭力的制高點(diǎn)。而職業(yè)教育作為輸送國家科技人才的國民教育體系，是推進(jìn)人力資源強(qiáng)國建設(shè)的重要抓手[4]。Web前端開發(fā)作為首批“1+X”職業(yè)技能領(lǐng)域試點(diǎn)等級(jí)證書，對(duì)于培養(yǎng)Web前端開發(fā)程序設(shè)計(jì)人員儲(chǔ)備有著重要的作用。在實(shí)施教學(xué)的過程中體現(xiàn)了以學(xué)生為中心的教學(xué)理念，也豐富了教學(xué)對(duì)職業(yè)能力的培養(yǎng)手段。

[1]唐以志.1+X證書制度：新時(shí)代職業(yè)教育制度設(shè)計(jì)的創(chuàng)新[J].中國職業(yè)技術(shù)教育，2019（16）：5-11.

[2]覃川.1+X證書制度：促進(jìn)類型教育內(nèi)涵發(fā)展的重要保障[J].中國高教研究，2020（01）：104-108.

[3]楊劍釗.基于“互聯(lián)網(wǎng)+”背景下的WEB前端開發(fā)課程教學(xué)模式探究[J].電腦迷，2018（06）：88+125.

[4]陶文輝，馬桂香.基于工匠精神的職業(yè)教育人才培養(yǎng)實(shí)踐研究[J].職教論壇，2017（02）：60-64.