韋波

（廣西機電職業(yè)技術(shù)學院，廣西 南寧 530007）

0 引言

教育部等九部門印發(fā)的《職業(yè)教育提質(zhì)培優(yōu)行動計劃（2020—2023年）》明確指出：要鼓勵職業(yè)學校利用現(xiàn)代信息技術(shù)推動人才培養(yǎng)模式改革，滿足學生的多樣化學習需求，大力推進“互聯(lián)網(wǎng)+”“智能+”教育新形態(tài)，推動教育教學變革創(chuàng)新；面向公共基礎(chǔ)課和量大面廣的專業(yè)（技能）課，分級遴選5000門左右職業(yè)教育在線精品課程；提升學生利用網(wǎng)絡(luò)信息技術(shù)和優(yōu)質(zhì)在線資源進行自主學習的能力。

在當今的互聯(lián)網(wǎng)時代，信息技術(shù)已經(jīng)融入社會生活的方方面面，加快信息化時代的教育變革已是大勢所趨。精品在線課程的建設(shè)，就是利用信息技術(shù)構(gòu)建以學生為中心的網(wǎng)絡(luò)學習空間，滿足學生規(guī)?；投鄻踊膶W習需求。Web前端開發(fā)能力是軟件技術(shù)等計算機類專業(yè)的核心職業(yè)能力，在教育部頒布的計算機類專業(yè)教學標準中，軟件技術(shù)、移動應(yīng)用開發(fā)、軟件與信息服務(wù)和電子商務(wù)技術(shù)等專業(yè)，均把Web前端開發(fā)有關(guān)的課程列為專業(yè)核心課程?！癢eb前端開發(fā)基礎(chǔ)”作為學生掌握Web前端開發(fā)技能的入門課程，面向的專業(yè)廣，在各高職院校的學生受眾較多。在分析Web前端開發(fā)精品在線課程建設(shè)現(xiàn)狀的基礎(chǔ)上，提出Web前端開發(fā)基礎(chǔ)精品在線課程的建設(shè)路徑，為提升計算機類專業(yè)在線課程建設(shè)質(zhì)量提供借鑒。

1 Web前端開發(fā)精品在線課程的建設(shè)現(xiàn)狀

1.1 教學內(nèi)容陳舊，與行業(yè)技術(shù)發(fā)展脫節(jié)

隨著近幾年Web前端技術(shù)的發(fā)展，IT行業(yè)對Web前端開發(fā)工程師的能力要求已經(jīng)有了很大改變，大部分企業(yè)在招聘Web前端開發(fā)工程師時，都要求應(yīng)聘者具備HTML5、CSS3、移動端頁面設(shè)計、前端框架等技術(shù)。縱觀當前的Web前端開發(fā)在線課程，大部分的課程內(nèi)容都比較陳舊，教授的技術(shù)和方法還停留在傳統(tǒng)的前端技術(shù)階段，很少涉及當前主流的響應(yīng)式布局、移動端頁面布局、彈性布局、響應(yīng)式框架等技術(shù)，也很少引入真實的Web項目案例。少數(shù)課程雖然加入了部分HTML5和CSS3新技術(shù)，但是都局限在代碼原理的講解，很少能將新技術(shù)融入到完整的項目案例中。

1.2 課程內(nèi)容結(jié)構(gòu)不合理，沒有形成項目化課程

現(xiàn)階段，大部分Web前端開發(fā)在線課程的內(nèi)容體系仍然沒有完全脫離教材知識體系，講授方式也是傳統(tǒng)的知識點講授，與企業(yè)Web前端開發(fā)崗位能力需求差距較大。在教學內(nèi)容設(shè)計上，大部分課程仍然采用傳統(tǒng)的按照知識點類型劃分章節(jié)的模式，沒有形成項目化的教學內(nèi)容。在教學視頻中，多采用知識點的講解方式，理論性強，沒有對接Web前端開發(fā)崗位能力，對學生的編碼能力和項目實施能力培養(yǎng)效果欠佳。學生學完課程后，最多只能了解各類技術(shù)的原理和簡單應(yīng)用，對于如何從頭到尾完成一個Web項目的前端開發(fā)過程、如何在真實項目中運用不同HTML+CSS技術(shù)，依然知之甚少。

1.3 課程面向?qū)I(yè)單一，無法實現(xiàn)不同專業(yè)的共享

在教育部頒布的高職專業(yè)教學標準中，軟件技術(shù)、移動應(yīng)用開發(fā)、軟件與信息服務(wù)和電子商務(wù)技術(shù)等專業(yè)，均把Web前端開發(fā)有關(guān)的課程列為專業(yè)核心課程。但是現(xiàn)階段的Web前端開發(fā)在線課程，普遍是面向某一個專業(yè)對課程內(nèi)容進行設(shè)計。由于這些專業(yè)面向的職業(yè)崗位和人才培養(yǎng)目標存在差異，在Web前端課程的設(shè)置與內(nèi)容選取方面，也需要進行針對性的設(shè)計。當前，已經(jīng)完成建設(shè)的Web前端開發(fā)在線課程，通常只能滿足一個專業(yè)學生的需求。很多課程在設(shè)計階段，沒有實現(xiàn)合理的模塊化建設(shè)，無法實現(xiàn)在相近專業(yè)的共享。

1.4 課程配套資源不完善，助學功能不強

現(xiàn)階段，大部分Web前端開發(fā)精品在線課程的核心內(nèi)容還是局限在教學視頻和在線題庫上，在技術(shù)文檔、動畫、案例視頻、虛擬仿真平臺等信息技術(shù)的建設(shè)比較匱乏。在教學視頻的呈現(xiàn)上，也普遍采用PPT講解為主，理論性較強，對學生的吸引力不夠，也無法輔助學生進行完整項目的實踐訓(xùn)練，教學效果不甚理想。

1.5 課程考核機制不完善，無法保證學習效果

精品在線課程的建設(shè)初衷是實現(xiàn)優(yōu)質(zhì)教育資源的開放共享，拓展學生自主學習的時間空間，以此促進職業(yè)院校的教學模式改革，提升人才培養(yǎng)質(zhì)量。然而，當前很多Web前端開發(fā)精品在線課程往往存在“重視頻輕資源”“重建設(shè)輕應(yīng)用”“重開放輕實施”“重展示輕評價”等問題，導(dǎo)致很多教師只能把精品在線課程的應(yīng)用作為課堂教學的小小補充，無法發(fā)揮在線課程應(yīng)用的作用，投入產(chǎn)出比較低。由于缺乏有效的過程性評價和深入的師生、生生互動，很多學生也把在線課程的學習當做任務(wù)去應(yīng)付，通過“掛機”刷課、找人代測試等方式去獲取課程積分，沒有真正利用在線課程平臺進行認真有效的學習。

2 “Web前端開發(fā)基礎(chǔ)”課程的建設(shè)途徑

2.1 融通崗課賽證重構(gòu)課程

“Web前端開發(fā)基礎(chǔ)”課程的教學目標是幫助學生構(gòu)建Web前端開發(fā)基礎(chǔ)知識體系，培養(yǎng)學生靜態(tài)網(wǎng)頁編碼能力，同時培養(yǎng)學生科學規(guī)劃、嚴謹規(guī)范、精益求精的職業(yè)素養(yǎng)。在課程開發(fā)的前期，課程團隊決定按照“做中學、做中教”、理實一體化、線上線下相混合的教學理念開展課程重構(gòu)，強調(diào)教學內(nèi)容的實用性、前沿性。根據(jù)“崗課賽證”融通的要求，課程團隊認真分析教育部“1+X”證書制度試點的“Web前端開發(fā)”職業(yè)技能等級標準，依據(jù)軟件技術(shù)等國家專業(yè)教學標準、各專業(yè)人才培養(yǎng)方案，對接Web前端開發(fā)工程師崗位職責，融入“Web應(yīng)用軟件開發(fā)”技能大賽標準，重構(gòu)課程內(nèi)容體系。依照前端工作流程、遵循技術(shù)進階和職業(yè)發(fā)展規(guī)律，以及從單一到整體、從簡單到復(fù)雜、從固定到靈活等邏輯安排教學內(nèi)容（圖1）。

圖1 課程重構(gòu)邏輯

2.2 模塊化設(shè)計滿足不同專業(yè)需求

課程團隊結(jié)合軟件技術(shù)等6個專業(yè)人才培養(yǎng)需求與課程標準，對各專業(yè)開設(shè)的“網(wǎng)頁布局”“網(wǎng)頁設(shè)計與布局”課程內(nèi)容進行重構(gòu)，形成包括4大模塊、9個項目共41個任務(wù)的“Web前端開發(fā)基礎(chǔ)”課程。課程覆蓋了“Web前端開發(fā)（初級）”職業(yè)技能等級標準中HTML、CSS相關(guān)的所有內(nèi)容。另外，還針對“Web前端開發(fā)（中級）”中的Bootstrap前端框架開發(fā)等內(nèi)容，加入了課程拓展內(nèi)容，滿足部分有能力參加Web前端開發(fā)（中級）認證的個性化需求（圖2）。

圖2 課程模塊與專業(yè)對接關(guān)系

2.3 依托真實項目開展項目化教學

在課程設(shè)計階段，課程團隊以真實項目“桂云商城”網(wǎng)站為任務(wù)主線，體現(xiàn)Web前端開發(fā)工作的核心基礎(chǔ)技能與職業(yè)素質(zhì)培養(yǎng)，基于任務(wù)驅(qū)動教學法，將教學內(nèi)容合理安排到若干個與Web前端開發(fā)崗位工作流程對接的教學環(huán)節(jié)中，環(huán)節(jié)間邏輯關(guān)系清楚，各環(huán)節(jié)的目標明確、任務(wù)具體（圖3）。為打破傳統(tǒng)Web前端開發(fā)在線課程以知識講解為主的教學模式，課程團隊邀請企業(yè)骨干Web前端開發(fā)工程師共同設(shè)計教學內(nèi)容，以典型的商業(yè)網(wǎng)站項目的前端開發(fā)任務(wù)為載體，將“1+X”證書標準融入項目案例，以“做中教”的模式開展教學，核心教學視頻累計時長達到599 min，保證學生既形成必備的Web前端開發(fā)基礎(chǔ)知識體系，又能夠通過項目實戰(zhàn)掌握崗位基礎(chǔ)核心技能。除此以外，針對學生自主完成實踐性任務(wù)比較困難和編碼出錯較多的問題，課程團隊還制作了21個實踐教學微課視頻和6個代碼糾錯微課視頻，進一步支撐實踐教學環(huán)節(jié)。

圖3 基于任務(wù)驅(qū)動教學法的教學活動設(shè)計思路

2.4 思政元素與教學內(nèi)容深度融合

要保證專業(yè)知識與思政元素的有機融合，一定不能先完成專業(yè)知識與技能的教學內(nèi)容設(shè)計后植入思政元素。要實現(xiàn)思政元素潤物無聲的教學效果，必須堅持專業(yè)知識與思政元素的同步教學設(shè)計。因此，課程專業(yè)教師與思政教師組建了課程“二次開發(fā)”的結(jié)構(gòu)化團隊，協(xié)作完成“Web前端開發(fā)基礎(chǔ)”課程的內(nèi)容重構(gòu)。在每一個教學項目的設(shè)計過程中，從教學目標確定，到教學內(nèi)容選擇、教學案例設(shè)計、教學資源制作、評價考核設(shè)計、教學過程安排等，均由專業(yè)教師和思政教師共同完成。整個過程就像織布一樣，專業(yè)知識為經(jīng)、思政元素為緯，通過兩類教師的細織密紡，讓專業(yè)知識與思政元素形成水乳交融、無法分隔的效果，杜絕“大而空”的口號，促進思政元素入腦、入心、入情，通過隱性教育提升學生的顯性情懷。課程部分思政教學目標的融入方式與教學設(shè)計思路見表1。

表1 課程思政設(shè)計概要

2.5 虛擬仿真學習平臺提升教學效率

針對課程中的教學重難點，課程團隊自主開發(fā)虛擬仿真學習平臺“彈性布局實驗場”，學生可以進行彈性布局自主練習、布局模擬測試、CSS編碼優(yōu)化模擬、作業(yè)上傳與掃碼瀏覽、作業(yè)點贊評價等自主學習活動，有效解決了彈性布局屬性多、易混淆、難記憶的問題，有效提升了教學效率。平臺還具備實時評價功能，根據(jù)每個學生的模擬練習給出個性化的反饋指導(dǎo)。教師通過平臺可以實時掌握全班學生的測試情況，并據(jù)此及時調(diào)整教學策略。

2.6 注重IT工匠職業(yè)素養(yǎng)的提升

依托二級學院與企業(yè)共建的人工智能產(chǎn)業(yè)學院平臺，校企合作開展課程重構(gòu)。引入企業(yè)典型項目并根據(jù)教學實際優(yōu)化形成主要教學內(nèi)容載體。結(jié)合IT行業(yè)技術(shù)標準與項目開發(fā)規(guī)范對教學內(nèi)容進行標準化、規(guī)范化處理，使教學內(nèi)容更突顯對學生IT職業(yè)素養(yǎng)的培養(yǎng)。企業(yè)工程師積極參與教學評價與實踐性教學活動，以評促學，確保教學活動緊扣企業(yè)需求。以“響應(yīng)式布局”項目為例，安排學生課前自學媒體查詢語句語法，引導(dǎo)學生利用在線課程配套資源和互聯(lián)網(wǎng)資源開展自主學習，課堂上教師分享全國最美公務(wù)員、“健康碼”幕后英雄、科技警察鐘毅的事跡，激勵學生養(yǎng)成吃苦耐勞的工作作風，努力提升技能回報社會、服務(wù)群眾。在學習“移動優(yōu)先策略”時，安排學生在仿真學習平臺中實驗對比兩種布局策略，并對比兩種編碼策略的代碼量的明顯差異，教師引導(dǎo)學生在編碼過程中注意提升效率、完善用戶體驗，強調(diào)IT從業(yè)者必須注重用戶體驗、提升編碼效率的要求。

2.7 健全綜合評價體系

為了使在線課程的教學評價更加科學合理，實現(xiàn)“以評促學”，課程團隊采用過程性評價與結(jié)果性評價結(jié)合、理論知識評價與實踐性作品評價結(jié)合的方式，利用課程平臺對學生的過程性學習數(shù)據(jù)進行采集，分析學生的學習規(guī)律與習慣，利用課程平臺和虛擬仿真學習平臺進行理論知識評價，通過學習過程的任務(wù)作品與期末實踐性考核對學生進行技能評價。

首先，在理論測試方面，學生的成績由平時成績、項目測試成績、期末考試成績?nèi)糠謽?gòu)成：（1）平時成績占比50%：平時成績=學習進度分（15.0分）+學習行為分（35.0分）。學習進度分是指學生觀看視頻的時長，累計觀看時長達到85%以上，才具備參加期末考試資格。學習行為是規(guī)律的學習天數(shù)及無灌水或者違規(guī)操作等行為，規(guī)律學習天數(shù)越多，分數(shù)越高。除此以外，為了防止學生“掛機”刷視頻，在每段視頻中均嵌入了測試題，評價5分鐘彈出一道題，學生必須答題正確，視頻才能繼續(xù)播放。（2）項目測試成績占比10%：本課程在每章（項目）結(jié)束后安排5-10題的測試，完成測試后才能參加期末考試。（3）期末考試成績占比40%：從題庫的256道題中，按題目所屬章節(jié)、題目類型、難易度等規(guī)則，抽取65道題組成一張試卷，其中：單選題30分（30道題）、多選題40分（20道題）、判斷題30分（15道題）。

其次，為了更好地提升學生的編碼技能，課程團隊在利用課程平臺完成對學生的理論知識考核以外，還增加了實踐性作品評價的環(huán)節(jié)。在課程的41個學習任務(wù)中，有12個任務(wù)安排了課后實踐性作業(yè)，要求學生完成相應(yīng)網(wǎng)頁的編碼，教師對學生的網(wǎng)頁作品效果與編碼質(zhì)量進行評價。

最后，在期末還通過機試的方式對學生的實踐能力進行考核，要求學生在2個小時內(nèi)完成一個完整頁面的HTML、CSS編碼，形成終結(jié)性實踐考核成績。

3 結(jié)語

“Web前端開發(fā)基礎(chǔ)”精品在線課程的建設(shè)與實踐為軟件技術(shù)等專業(yè)學生的在線自主學習提供了有效的支撐，對接Web前端開發(fā)工程師崗位能力要求和“1+X”證書標準，融入“Web應(yīng)用軟件開發(fā)”技能大賽標準，重構(gòu)了教學內(nèi)容，形成了從單一到整體、從簡單到復(fù)雜、從固定到靈活的教學內(nèi)容體系。通過模塊化課程結(jié)構(gòu)和充實豐富的教學內(nèi)容，滿足了多個相近專業(yè)的選課需求。依托真實項目開展項目化教學，通過項目實戰(zhàn)使學生快速掌握崗位核心技能。針對課程教學重難點，開發(fā)了虛擬仿真學習平臺，實現(xiàn)了學生的自主訓(xùn)練、智能指導(dǎo)和交互式模擬。建立健全了綜合評價體系，既通過過程性評價有效控制學生的學習深度，又通過實踐性評價促進學生職業(yè)技能的熟練。課程自2019年上線運行以來，已經(jīng)運行了5個學期。經(jīng)過近幾年的實踐表明，該在線課程有效提升了學生參與式學習的深度和差異化學習的自由度，學習效率顯著提高，學生對Web項目的前端開發(fā)體驗明顯增強，編碼能力與職業(yè)素養(yǎng)有效提升。