鄭麗萍

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

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

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

1 混合式金課構建基礎

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

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

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

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

2 混合式金課的構建過程

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

圖1 多元混合教學準備示意圖

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

2.1 線上資源準備

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

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

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

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

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

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

2.3 課中任務準備

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

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

在課中項目任務熟悉的基礎上，準備多個拓展方案供課中引導學生對基礎項目進行拓展，并準備整個課程的大綱、教學計劃及教案等文檔材料。

3 混合式金課的實施

3.1 課前活動：教師布置預習作業(yè)，學生自主學習探索

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

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

3.2 課中活動：教師創(chuàng)設工作情境，學生綜合項目實踐

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

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

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

(1)線上虛擬課堂中微課上的方案：單元格里面放“刪除”按鈕

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

(2)真實課堂中的基礎版方案：單元格里面放“刪除”文字

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

(3)真實課堂中的仿做方案：單元格里面放“刪除”圖標

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

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

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

3.3 課后活動：教師教學反思，學生鞏固拓展提高

學生根據(jù)教師布置的作業(yè)完成線上任務和項目拓展任務，教師查看和批改線上測試及作業(yè)，根據(jù)線上單元測試效果，加強相關知識點的講解，不斷豐富網(wǎng)絡教學資源或適當調整教學計劃。

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

4 結 語

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