高職“Web前端開發(fā)基礎(chǔ)”精品在線課程建設(shè)探索與實(shí)踐

韋波

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

0 引言

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

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

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

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

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

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

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

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

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

1.4 課程配套資源不完善，助學(xué)功能不強(qiáng)

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

1.5 課程考核機(jī)制不完善，無法保證學(xué)習(xí)效果

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

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

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

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

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

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

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

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

2.3 依托真實(shí)項(xiàng)目開展項(xiàng)目化教學(xué)

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

圖3 基于任務(wù)驅(qū)動(dòng)教學(xué)法的教學(xué)活動(dòng)設(shè)計(jì)思路

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

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

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

2.5 虛擬仿真學(xué)習(xí)平臺(tái)提升教學(xué)效率

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

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

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

2.7 健全綜合評(píng)價(jià)體系

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

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

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

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

3 結(jié)語

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