混合式金課探索與實踐
——以Web前端開發類課程為例

鄭麗萍

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

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

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

1 混合式金課構建基礎

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

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

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

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

2 混合式金課的構建過程

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

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

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

2.1 線上資源準備

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

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

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

2.2 配套的新形態一體化教材準備

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

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

2.3 課中任務準備

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

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

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

3 混合式金課的實施

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4 結 語

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