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

◆任遠

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

◆任遠

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

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

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

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

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

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

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

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

1.1 學(xué)情特殊

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

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

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

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

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

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

因為Web前端開發(fā)課程的特點是知識迭代速度極快、新框架學(xué)習(xí)周期短，因此企業(yè)技術(shù)棧更新的更新速度也非常快，2010年時的主流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é)生了解、實踐最新的企業(yè)開發(fā)技術(shù)。

1.4 缺乏評價維度

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

2 教學(xué)改進與實踐

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

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

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

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

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

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

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

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

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

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

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

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

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

3 結(jié)語

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

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

[2]覃川.1+X證書制度：促進類型教育內(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)實踐研究[J].職教論壇，2017（02）：60-64.