◆任遠
“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ù)技能人才的重任。
信息時代對程序設(shè)計人才的需求帶來了新的機遇和挑戰(zhàn)。Web前端開發(fā)作為程序設(shè)計相關(guān)課程受到重視,但是在職業(yè)教育階段的Web前端開發(fā)教學(xué)現(xiàn)狀也存在著以下諸多問題:
根據(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é)。
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í)過程枯燥。
因為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ù)。
傳統(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é)的綜合評價。
根據(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)遞進式的課程處理模式。
成為一名合格的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()去對腳本語言有一個以點概面的了解,而無須深入。
在任務(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)功能。
采用線上“自評”、“互評”、“教師評”、“企業(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ù),形成完整有效的全過程評價。
在全球新一輪的競爭中,科技革命已經(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.