“1+X證書”背景下的Web前端開發教學實踐

◆任遠

“1+X證書”背景下的Web前端開發教學實踐

◆任遠

（江蘇聯合職業技術學院徐州財經分院 江蘇 221008）

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

“1+X證書”；Web前端開發；項目驅動式教學

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

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

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

1 教學現狀

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

1.1 學情特殊

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

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

1.2 教學結構不合理

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

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

1.3 教學內容陳舊，和企業脫節

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

1.4 缺乏評價維度

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

2 教學改進與實踐

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

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

為此，可以將“1+X”Web 前端開發職業技能等級標準中的職業技能、工作任務與職業素養與課程中的模塊、項目、任務相融合，利用循環管理策略，將模塊-模塊之間、模塊中的項目-項目之間，項目中的任務-任務之間形成循環遞進式的課程處理模式。

2.2 重組教材，形成“模塊—項目—任務”化的教學模式

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

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

2.3 校企融合，引入行業最新知識

在任務引入階段，形成以“企業專家引入項目、教師引導思路、學生主動學習”的方式，每節課都有結合市場、企業對本專業職業技能人員制定的符合行業最前沿技術的任務。

在實施階段，實施對學生的分層教學。對于所有學生制定一個通過課本上基礎知識能夠完成的目標；對于學有余力的學生提供行業新知識的材料，通過前沿技術實現進階目標；對于一部分拔尖的學生，提供課后思考達到更高高度的思路，引導他們自主學習時效性最強的新技能，提高自我學習的能力。

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

2.4 采用四維立體多元評價標準

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

課前學習平臺學習情況、課中項目推進過程、課后實踐成果評估都可量化，全面記錄學生每一環節表現，實現了學習的客觀評價。以超星泛雅教學平臺為載體，匯總各環節分數，形成完整有效的全過程評價。

3 結語

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

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

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

[3]楊劍釗.基于“互聯網+”背景下的WEB前端開發課程教學模式探究[J].電腦迷，2018（06）：88+125.

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