鄭麗萍

(江蘇電子信息職業(yè)學(xué)院, 江蘇 淮安 223003)

Web前端開發(fā)類混合式金課要承載線上線下全方位傳授知識(shí)和育人的雙重功能, 幫助學(xué)生樹立正確的人生觀和價(jià)值觀,領(lǐng)會(huì)中華優(yōu)秀傳統(tǒng)文化、社會(huì)主義核心價(jià)值觀要義。當(dāng)前的高職學(xué)生從小就接觸電腦和網(wǎng)絡(luò)，絕大部分的高校都具備了完善的校園網(wǎng)絡(luò)，個(gè)性化學(xué)習(xí)正好適應(yīng)高職實(shí)際情況，與現(xiàn)代職業(yè)院校辦學(xué)目標(biāo)及“互聯(lián)網(wǎng) +”背景下學(xué)習(xí)者的需求高度契合[1]。課程組以學(xué)習(xí)者的學(xué)習(xí)特點(diǎn)分析為出發(fā)點(diǎn)，開發(fā)精品在線開發(fā)課程，順應(yīng)時(shí)代要求。遵循“一體化設(shè)計(jì)、結(jié)構(gòu)化課程、顆?；Y源”[2]的建設(shè)理念，開發(fā)基于項(xiàng)目化的新形態(tài)教材。課程采用多元混合教學(xué)模式[3]，教學(xué)活動(dòng)上，精品在線課程與項(xiàng)目實(shí)戰(zhàn)相輔；教學(xué)資源上，新形態(tài)教材與線上資源相結(jié)合；教學(xué)環(huán)境上，職業(yè)體驗(yàn)與虛擬線上課堂的相互聯(lián)結(jié)；評(píng)價(jià)方式上，采用注重過程評(píng)價(jià)的多維綜合評(píng)價(jià)。

由于高職學(xué)生理論學(xué)習(xí)興致不高，部分學(xué)生直接理解理論概念有一定困難，課程采用項(xiàng)目教學(xué)法，以項(xiàng)目帶動(dòng)理論的學(xué)習(xí)，讓學(xué)生清晰地看到所學(xué)的知識(shí)點(diǎn)能用在哪些項(xiàng)目中，并通過基礎(chǔ)項(xiàng)目到拓展項(xiàng)目逐步帶動(dòng)學(xué)生進(jìn)行“學(xué)-仿-創(chuàng)”[4]，使得學(xué)生的前端開發(fā)技能螺旋上升，部分同學(xué)能在拓展項(xiàng)目的基礎(chǔ)上創(chuàng)新項(xiàng)目，通過學(xué)生優(yōu)秀作品的展示，使他們獲得成就感和自豪感，加強(qiáng)學(xué)生的實(shí)踐能力，并為后續(xù)的項(xiàng)目申報(bào)和技能比賽奠定基礎(chǔ)。

1 混合式金課構(gòu)建基礎(chǔ)

Web前端開發(fā)類課程是軟件技術(shù)專業(yè)的專業(yè)課程。課程組在深入企業(yè)一線調(diào)查和對(duì)高職生源的充分了解的基礎(chǔ)上，將知識(shí)理解與實(shí)際應(yīng)用有機(jī)地融為一體，設(shè)定項(xiàng)目教學(xué)案例以確保課程內(nèi)容與職業(yè)崗位需求相結(jié)合。遵循學(xué)生學(xué)習(xí)認(rèn)知規(guī)律，不斷的培養(yǎng)學(xué)生的學(xué)習(xí)自信心、自主性與自學(xué)能力，從而提高學(xué)生對(duì)知識(shí)的理解及提高分析問題、解決問題的能力。

課程開發(fā)了多個(gè)融入思政的綜合案例，如：通過紅色旅游等Web應(yīng)用的制作，傳承毛澤東、周恩來等偉人精神，進(jìn)行革命傳統(tǒng)教育、紅色教育，在傳承紅色基因的過程中培養(yǎng)有理想、有信仰、有擔(dān)當(dāng)?shù)臅r(shí)代新人。

課程內(nèi)容符合Web前端開發(fā)職業(yè)技能等級(jí)證書的要求，課程根據(jù)人才培養(yǎng)方案，按照職業(yè)崗位能力需求，采用模塊化結(jié)構(gòu)，通過難度螺旋上升的教學(xué)項(xiàng)目培養(yǎng)學(xué)生掌握Web前端開發(fā)知識(shí)和技能，具備交互型網(wǎng)站設(shè)計(jì)、開發(fā)、調(diào)試、維護(hù)等能力。

為了實(shí)現(xiàn)信息技術(shù)與教育全面“深度融合”，實(shí)現(xiàn)以“學(xué)生為中心”的教學(xué)方式，課程可以采用翻轉(zhuǎn)課堂教學(xué)模式，可以彌補(bǔ)傳統(tǒng)課堂教學(xué)的不足，特別是能夠幫助學(xué)生進(jìn)行個(gè)性化自主學(xué)習(xí)，調(diào)動(dòng)學(xué)生的學(xué)習(xí)積極性，遇到難點(diǎn)可以反復(fù)的觀看，利用簡(jiǎn)短的教學(xué)視頻在課下向?qū)W生傳遞新知識(shí)，在課堂上讓學(xué)生開展協(xié)作學(xué)習(xí)，進(jìn)行一定項(xiàng)目的實(shí)踐，課程中采用項(xiàng)目化教學(xué)從而完成知識(shí)的內(nèi)化。它從根本上改變了傳統(tǒng)課堂教學(xué)的流程，給學(xué)習(xí)者帶來完全不同的學(xué)習(xí)體驗(yàn)，培訓(xùn)學(xué)生的團(tuán)隊(duì)合作意識(shí)和創(chuàng)新能力。

2 混合式金課的構(gòu)建過程

混合式金課的構(gòu)建過程是由以“教”為主的教學(xué)模式向以“學(xué)”為主的教學(xué)模式轉(zhuǎn)變過程。實(shí)現(xiàn)信息技術(shù)與教育全面“深度融合”，結(jié)合線上線下的優(yōu)勢(shì)，彌補(bǔ)傳統(tǒng)課堂教學(xué)的不足。讓學(xué)生在線上自主進(jìn)行MOOC課程學(xué)習(xí)，教師結(jié)合實(shí)際案例重點(diǎn)講解關(guān)鍵技術(shù)的應(yīng)用，并通過一系列前端技術(shù)挑戰(zhàn)性訓(xùn)練和綜合項(xiàng)目實(shí)戰(zhàn)深化學(xué)生對(duì)技術(shù)知識(shí)的理解和運(yùn)用，實(shí)現(xiàn)學(xué)生從基礎(chǔ)能力向應(yīng)用能力、分析能力、綜合能力的逐步提升。整個(gè)構(gòu)建過程，教師需要做足相關(guān)的準(zhǔn)備，如圖1所示。

圖1 多元混合教學(xué)準(zhǔn)備示意圖

這里主要介紹線上資源準(zhǔn)備，配套的新形態(tài)一體化教材準(zhǔn)備和課中的任務(wù)準(zhǔn)備。

2.1 線上資源準(zhǔn)備

為了多元混合教學(xué)模式的有效實(shí)施，教師負(fù)責(zé)按照職業(yè)能力要求重新梳理課程結(jié)構(gòu)，進(jìn)行課程的整體設(shè)計(jì)和知識(shí)點(diǎn)拆分，重構(gòu)課程內(nèi)容，在線上上傳課程的學(xué)習(xí)資料，包括微課、相關(guān)電子文檔、實(shí)踐素材、源程序、教學(xué)PPT、教學(xué)大綱、考核方式、討論主題、單元測(cè)試、作業(yè)、期中與期末考試等豐富的數(shù)字化資源，順應(yīng)了現(xiàn)代信息技術(shù)發(fā)展的趨勢(shì)，適應(yīng)了學(xué)生的自主性、泛在式、碎片化的學(xué)習(xí)需求，既方便課內(nèi)教學(xué)，又方便學(xué)生課外預(yù)習(xí)與學(xué)習(xí)；讓學(xué)習(xí)變得更加方便有效。

線上資源經(jīng)過不斷的補(bǔ)充和完善，Web前端開發(fā)類課程《JavaScript及框架應(yīng)用》在線課程已于2019年立項(xiàng)為江蘇省精品在線開放課程，面向社會(huì)學(xué)習(xí)者、高職學(xué)生、專接本學(xué)生及應(yīng)用型本科學(xué)生開放，目前開課到第6輪，選課人次數(shù)萬，人員覆蓋全國(guó)31個(gè)省、自治區(qū)和直轄市。線上內(nèi)容由淺入深，每講內(nèi)容都與案例緊密結(jié)合，有助于學(xué)習(xí)者理解知識(shí)、應(yīng)用知識(shí)。所選案例具有極強(qiáng)的擴(kuò)展性，能夠給學(xué)習(xí)者以啟發(fā)，舉一反三，實(shí)現(xiàn)非常實(shí)用的效果。線上目前有微課資源150個(gè)，包含微課獲獎(jiǎng)資源，相關(guān)文檔等其他資源180個(gè)，發(fā)布討論主題近百個(gè)，15個(gè)單元測(cè)試，主觀大作業(yè)若干，期中期末考試等。課程資源應(yīng)用面廣，對(duì)各層次的學(xué)習(xí)者都有選擇空間，能夠很好地實(shí)現(xiàn)分層教學(xué)。為確保在線開放課程的有效實(shí)施，團(tuán)隊(duì)成員設(shè)置了近百個(gè)討論主題和問題引導(dǎo)，主講教師積極參與在線課程的運(yùn)行，在線答疑和討論等活動(dòng)。

課程中的專業(yè)知識(shí)與意識(shí)形態(tài)教育有機(jī)結(jié)合。把工匠精神培養(yǎng)、立德樹人教育“融入”到教學(xué)場(chǎng)景設(shè)計(jì)和教學(xué)資源開發(fā)過程中。在知識(shí)學(xué)習(xí)的同時(shí)培養(yǎng)學(xué)生樹立正確的人生觀、價(jià)值觀。幫助學(xué)生在收獲學(xué)術(shù)知識(shí)、理解研究方法、熟練掌握開發(fā)技巧的同時(shí)，引導(dǎo)他們?cè)趯I(yè)發(fā)展道路上立下鴻鵠之志，成為有理想、有本領(lǐng)、有擔(dān)當(dāng)?shù)男聲r(shí)代青年。

2.2 配套的新形態(tài)一體化教材準(zhǔn)備

在課程教學(xué)改革的過程中邊探索、邊研究、邊實(shí)踐、邊完善，逐步開發(fā)了在線課程配套的教材《JavaScript與jQuery案例教程》，既實(shí)現(xiàn)了學(xué)生碎片化的學(xué)習(xí)，又滿足了系統(tǒng)化、結(jié)構(gòu)化學(xué)習(xí)的需要。

考慮到JavaScript應(yīng)用領(lǐng)域的不同(PC端或移動(dòng)端)以及不同框架支撐(如jQuery、jQuery UI、MUI、Bootstrap等)，我們編寫了多部JavaScript及框架應(yīng)用相關(guān)的基于項(xiàng)目化的新形態(tài)一體化教材，以滿足各方面的需求。

2.3 課中任務(wù)準(zhǔn)備

真實(shí)課堂中在強(qiáng)調(diào)基礎(chǔ)理論學(xué)習(xí)的基礎(chǔ)上，結(jié)合前端技術(shù)的不斷發(fā)展，通過相關(guān)項(xiàng)目案例詳細(xì)介紹JavaScript及其框架的實(shí)踐運(yùn)用，既實(shí)現(xiàn)了理論學(xué)習(xí)的體系化，又與實(shí)踐應(yīng)用進(jìn)行了結(jié)合，強(qiáng)化了對(duì)相關(guān)知識(shí)的理解、應(yīng)用和鞏固。教師選取既通用又典型的項(xiàng)目案例，能夠給學(xué)生以啟發(fā)，具有極強(qiáng)的擴(kuò)展性，可以舉一反三，實(shí)現(xiàn)非常實(shí)用的效果。并且注重案例的趣味性，激發(fā)學(xué)生學(xué)習(xí)的積極性。

課程德樹人為根本宗旨，通過提升教師思政育人能力、修訂課程標(biāo)準(zhǔn)等手段加強(qiáng)課程思政教育，在教學(xué)中適時(shí)融入課程思政要素，有機(jī)涵蓋愛國(guó)、敬業(yè)、誠(chéng)信、友善等社會(huì)主義核心價(jià)值觀，精忠報(bào)國(guó)、孝悌忠信、禮義廉恥等中華傳統(tǒng)美德，習(xí)近平新時(shí)代中國(guó)特色社會(huì)主義理論，思政項(xiàng)目如：個(gè)人事務(wù)管理系統(tǒng)提高個(gè)人自律，社會(huì)主義核心價(jià)值觀基本內(nèi)容的動(dòng)態(tài)展示；奧運(yùn)項(xiàng)目圖片動(dòng)態(tài)切換來感受奧運(yùn)健兒的拼搏精神；紅色景區(qū)輪播圖，紅色景區(qū)列表頁及詳情頁面制作；思政新聞選項(xiàng)卡動(dòng)態(tài)實(shí)現(xiàn)等等，既學(xué)習(xí)了課程相關(guān)的知識(shí)點(diǎn)，又融入了思政內(nèi)容，并收集思政專題網(wǎng)站，作為和學(xué)生一起研究學(xué)習(xí)的素材。

在課中項(xiàng)目任務(wù)熟悉的基礎(chǔ)上，準(zhǔn)備多個(gè)拓展方案供課中引導(dǎo)學(xué)生對(duì)基礎(chǔ)項(xiàng)目進(jìn)行拓展，并準(zhǔn)備整個(gè)課程的大綱、教學(xué)計(jì)劃及教案等文檔材料。

3 混合式金課的實(shí)施

3.1 課前活動(dòng)：教師布置預(yù)習(xí)作業(yè)，學(xué)生自主學(xué)習(xí)探索

預(yù)習(xí)是學(xué)習(xí)中很重要的一種學(xué)習(xí)習(xí)慣，是進(jìn)行獨(dú)立學(xué)習(xí)和思考的過程[5]。在預(yù)習(xí)過程中學(xué)習(xí)新知識(shí)和彌補(bǔ)薄弱環(huán)節(jié)，做一些基礎(chǔ)的知識(shí)點(diǎn)應(yīng)用練習(xí)，預(yù)習(xí)后可以帶著問題線上向老師發(fā)出提問，為課中綜合項(xiàng)目實(shí)踐作何準(zhǔn)備。

教師QQ群中發(fā)布預(yù)習(xí)任務(wù)(也可以在上節(jié)課的末尾來布置)、線上發(fā)布公告，對(duì)學(xué)生的線上提問及時(shí)輔導(dǎo)答疑，批閱主觀作業(yè)及單元測(cè)試，同時(shí)收集學(xué)生的易錯(cuò)點(diǎn)和難點(diǎn)，記錄作業(yè)比例，標(biāo)注優(yōu)秀拓展性主觀作業(yè)，供線下課堂展示和引導(dǎo)；收集反饋信息，及時(shí)完善修改資源，完善課程。

3.2 課中活動(dòng)：教師創(chuàng)設(shè)工作情境，學(xué)生綜合項(xiàng)目實(shí)踐

根據(jù)線上單元測(cè)試的效果以及主觀作業(yè)效果進(jìn)行評(píng)價(jià)，對(duì)難點(diǎn)進(jìn)行講解，拓展代碼功能，引領(lǐng)學(xué)生根據(jù)自身情況和興趣點(diǎn)完善拓展或改版項(xiàng)目案例，激發(fā)學(xué)生的學(xué)習(xí)動(dòng)力,引導(dǎo)學(xué)生積極開發(fā)自我潛力, 注重培訓(xùn)學(xué)生的團(tuán)隊(duì)合作意識(shí)和創(chuàng)新能力。

所選案例通過創(chuàng)設(shè)情境、設(shè)計(jì)學(xué)習(xí)任務(wù)、學(xué)生自主探究幾個(gè)環(huán)節(jié)，實(shí)現(xiàn)“做中學(xué)、學(xué)中做”，真正做到學(xué)以致用。項(xiàng)目驅(qū)動(dòng)理論學(xué)習(xí)，解決課堂重點(diǎn)難點(diǎn)；提高學(xué)生的學(xué)習(xí)興趣和課堂參與度。案例貼切，易懂又有拓展性，學(xué)生很容易上手，動(dòng)手后會(huì)很有成就感，經(jīng)過逐步的項(xiàng)目完善，很多學(xué)生會(huì)感覺到在我們的課程中得到了升華。

真實(shí)課堂會(huì)先通過項(xiàng)目基礎(chǔ)案例啟發(fā)誘導(dǎo)，指導(dǎo)學(xué)生初步探究，實(shí)現(xiàn)項(xiàng)目基礎(chǔ)功能，再逐步拓展實(shí)現(xiàn)更復(fù)雜的功能和技能點(diǎn)。比如表格操作的實(shí)現(xiàn)刪除行的功能，這樣的功能可以運(yùn)用到很多領(lǐng)域，比如社團(tuán)成員信息管理，社團(tuán)活動(dòng)信息管理，學(xué)員成績(jī)信息管理等等，核心知識(shí)點(diǎn)都是deleteRow(index)用來刪除指定行，要實(shí)現(xiàn)刪除當(dāng)前行，有多種方案可行。

(1)線上虛擬課堂中微課上的方案：?jiǎn)卧窭锩娣拧皠h除”按鈕

單擊事件綁定在“刪除”按鈕上，通過“刪除”按鈕向上兩層訪問到行對(duì)象，也就是使用2次parentNode屬性。

(2)真實(shí)課堂中的基礎(chǔ)版方案：?jiǎn)卧窭锩娣拧皠h除”文字

這時(shí)要明白和微課上方案的區(qū)別：由于文字不是元素節(jié)點(diǎn)，單擊事件綁定在單元格上，在訪問行對(duì)象時(shí)，要向上少訪問1層，也就是使用1次parentNode屬性。兩種方案的對(duì)比使學(xué)生明晰文檔的DOM結(jié)構(gòu)及其元素的遍歷方法。

(3)真實(shí)課堂中的仿做方案：?jiǎn)卧窭锩娣拧皠h除”圖標(biāo)

使用立體感的圖標(biāo)會(huì)使整個(gè)頁面效果亮色不少，但功能上的實(shí)現(xiàn)方法類似，單擊事件既可以綁定在單元格上也可以綁定在“刪除”圖標(biāo)上。

(4)真實(shí)課堂中的拓展方案：前面幾種方案都是通過直接在HTML代碼里定義了一個(gè)onclick的屬性觸發(fā)自定義函數(shù)del()，這樣的事件處理程序最大的缺點(diǎn)就是HTML于JavaScript強(qiáng)耦合，一旦需要修改函數(shù)名就得修改兩個(gè)地方。其優(yōu)點(diǎn)是不需要操作DOM來完成事件的綁定，而且這種方式學(xué)生很容易理解和普遍接受。在掌握此種方式之后，可以考慮使用事件的動(dòng)態(tài)綁定，將一個(gè)函數(shù)賦值給一個(gè)事件處理屬性的方式綁定事件，實(shí)現(xiàn)JavaScript代碼和布局代碼的分離，為后續(xù)的功能拓展奠定基礎(chǔ)。

在上面的每一個(gè)環(huán)節(jié)對(duì)一些普遍的問題進(jìn)行集中講解，一起發(fā)現(xiàn)bug和修復(fù)bug，注重界面的審美，對(duì)個(gè)別學(xué)生進(jìn)行指導(dǎo)，鼓勵(lì)進(jìn)展快的學(xué)生自我創(chuàng)新，學(xué)生通過實(shí)踐，不斷反思、學(xué)習(xí)和總結(jié)的過程逐步提高了編程和調(diào)試能力。并且通過完成的項(xiàng)目成果及時(shí)去反饋學(xué)習(xí)的成效，是一種“做中學(xué)、學(xué)中做”的體驗(yàn)教學(xué)方式，為后續(xù)的項(xiàng)目創(chuàng)新打下良好基礎(chǔ)。

3.3 課后活動(dòng)：教師教學(xué)反思，學(xué)生鞏固拓展提高

學(xué)生根據(jù)教師布置的作業(yè)完成線上任務(wù)和項(xiàng)目拓展任務(wù)，教師查看和批改線上測(cè)試及作業(yè)，根據(jù)線上單元測(cè)試效果，加強(qiáng)相關(guān)知識(shí)點(diǎn)的講解，不斷豐富網(wǎng)絡(luò)教學(xué)資源或適當(dāng)調(diào)整教學(xué)計(jì)劃。

鼓勵(lì)每位學(xué)生自我創(chuàng)新，根據(jù)自己感興趣的主題改版項(xiàng)目，并根據(jù)改版的程度給學(xué)生打分。項(xiàng)目功能拓展或改版包括：界面創(chuàng)新，能根據(jù)自己的興趣創(chuàng)新改版教材中的頁面，設(shè)計(jì)友好美觀頁面；技術(shù)創(chuàng)新，能實(shí)現(xiàn)代碼的優(yōu)化和封裝，或擴(kuò)展新的功能。對(duì)于優(yōu)秀的同學(xué)引導(dǎo)他們申報(bào)項(xiàng)目和參加技能比賽，激發(fā)學(xué)生的潛能。

4 結(jié) 語

混合式金課的建設(shè)和實(shí)踐讓學(xué)生獲取知識(shí)的手段更豐富，方式更便捷，充分調(diào)動(dòng)與發(fā)揮學(xué)生的積極性與主動(dòng)性，課程緊跟崗位需求與“1+X”證書[6]，目標(biāo)定位準(zhǔn)確。課程思政采用顯性隱性相結(jié)合、線上線下相結(jié)合、課內(nèi)課外相契合、內(nèi)容與思政相融合等路徑；選擇模塊化設(shè)計(jì)理念，通過遞進(jìn)式的項(xiàng)目實(shí)戰(zhàn)強(qiáng)化知識(shí)應(yīng)用和技能培養(yǎng)，適應(yīng)不同層次學(xué)生需求；開發(fā)配套基于項(xiàng)目化的新形態(tài)教材，滿足師生混合式教學(xué)需要。經(jīng)過幾年的實(shí)踐表明該模式可以使學(xué)生真正成為學(xué)習(xí)的主人，提高學(xué)習(xí)效率，深化項(xiàng)目的學(xué)習(xí)和實(shí)踐，從而提高學(xué)生的前端綜合開發(fā)能力。