基于思政教育的遷移性教學(xué)在《Web前端開發(fā)》課程中的實(shí)踐研究

陳蘋

關(guān)鍵詞：思政教育；遷移性教學(xué)；MSMA

中圖分類號(hào)：TP3 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2022）36-0166-03

“立德樹人”是教育的主要目標(biāo)，“課程思政”是實(shí)現(xiàn)立德樹人這一目標(biāo)的重要途徑，有效地將課程思政教育與專業(yè)課遷移性教學(xué)結(jié)合，培養(yǎng)學(xué)生有效學(xué)習(xí)、創(chuàng)新、探索的能力，推進(jìn)課程思政建設(shè)，幫助學(xué)生塑造正確的世界觀、人生觀、價(jià)值觀，在潤(rùn)物細(xì)無聲的知識(shí)學(xué)習(xí)中融入理想信念層面的精神指引[1]。

1 課程整體概述

《Web前端開發(fā)》課程是計(jì)算機(jī)專業(yè)核心課，在課程建設(shè)過程中，構(gòu)建以學(xué)生為主體、教師為主導(dǎo)、技能為主線、融入文化內(nèi)涵為暗線、創(chuàng)新、創(chuàng)意思維培養(yǎng)為中心，以貫通課前、課中、課下及線上線下的項(xiàng)目遷移式教學(xué)模式。

遷移性教學(xué)采用“項(xiàng)目遷移”課程為基礎(chǔ)，如圖1所示。以“韻味金陵，云上非遺”一個(gè)綜合PC前端設(shè)計(jì)項(xiàng)目貫穿運(yùn)用CSS3設(shè)置網(wǎng)頁(yè)樣式、運(yùn)用盒子模型劃分網(wǎng)頁(yè)模塊等9個(gè)章節(jié)核心知識(shí)，分別輸出主題項(xiàng)目的各功能模塊，在課程最后一個(gè)章節(jié)，綜合項(xiàng)目實(shí)戰(zhàn)中進(jìn)行項(xiàng)目整體策劃設(shè)計(jì)與整合，以任務(wù)為驅(qū)動(dòng)，結(jié)合實(shí)際案例和應(yīng)用環(huán)境對(duì)綜合項(xiàng)目實(shí)戰(zhàn)進(jìn)行遷移應(yīng)用，將項(xiàng)目再改編成“即用即走，不占內(nèi)存”微信小程序，培養(yǎng)學(xué)生大前端開發(fā)奠定基石。

將課程思政的理念融入具備教育意義的項(xiàng)目任務(wù)中，遵循學(xué)生的認(rèn)知規(guī)律，每個(gè)模塊在不斷鞏固基礎(chǔ)知識(shí)，強(qiáng)化基本技能的基礎(chǔ)上，難度也逐級(jí)遞增。通過課程的學(xué)習(xí)，學(xué)生能合理地進(jìn)行Web前端制作過程中各環(huán)節(jié)的設(shè)計(jì)，分組協(xié)作完成整個(gè)項(xiàng)目的制作，通過知識(shí)對(duì)比學(xué)習(xí)，實(shí)現(xiàn)項(xiàng)目遷移，完成本主題的微信小程序開發(fā)，真正培養(yǎng)學(xué)生自主學(xué)習(xí)的能力，并通過項(xiàng)目的制作，學(xué)習(xí)了解民族文化，增進(jìn)愛國(guó)情感。

2 教學(xué)對(duì)象分析

學(xué)生前期學(xué)習(xí)了《圖形圖像處理》《網(wǎng)頁(yè)制作基礎(chǔ)》《JavaScript》等專業(yè)基礎(chǔ)課程，具備了簡(jiǎn)單的前端設(shè)計(jì)基礎(chǔ)知識(shí)，掌握了Hbuild軟件的基礎(chǔ)操作方法。

以第十三章綜合項(xiàng)目實(shí)戰(zhàn)為研究實(shí)例，針對(duì)Web 前端開發(fā)和微信小程序開發(fā)的知識(shí)單元異同將作為重點(diǎn)分析，同時(shí)課程開展學(xué)習(xí)前，對(duì)學(xué)生Web前端開發(fā)基礎(chǔ)能力做了一個(gè)簡(jiǎn)單的測(cè)試，四組學(xué)生自擬主題，制作單個(gè)頁(yè)面，發(fā)現(xiàn)頁(yè)面布局較為混亂、結(jié)構(gòu)分割不清晰，HTML+CSS的應(yīng)用不熟練，頁(yè)面表現(xiàn)較弱，所以，圖片、文字布局、樣式是否能突出主題展開將作為重點(diǎn)考查。

3 基于思政教育的遷移性教學(xué)設(shè)計(jì)與實(shí)施

3.1 構(gòu)建真實(shí)問題情境，實(shí)現(xiàn)知識(shí)向?qū)嵺`能力遷移

教師為學(xué)生創(chuàng)設(shè)問題情境，以網(wǎng)站形式宣傳金陵非物質(zhì)文化遺產(chǎn)真實(shí)問題貫穿整個(gè)教學(xué)主線，學(xué)生先通過六個(gè)功能模塊開發(fā)的學(xué)習(xí)，參與、體會(huì)學(xué)習(xí)的過程，利用遷移規(guī)律學(xué)習(xí)知識(shí)，根據(jù)實(shí)踐操作過程發(fā)現(xiàn)問題、分析問題、解決突破問題。以綜合項(xiàng)目應(yīng)用開發(fā)為遷移中介，整合六個(gè)模塊知識(shí)內(nèi)容為一個(gè)完整的PC端Web前端開發(fā)項(xiàng)目，增加專業(yè)的深度學(xué)習(xí)，再通過綜合拓展項(xiàng)目——微信小程序開發(fā)為遷移中介，增加專業(yè)的廣度學(xué)習(xí)，綜合促進(jìn)學(xué)生專業(yè)技能以及關(guān)鍵能力的形成，具體的教學(xué)遷移過程如圖2所示。

3.2 工作過程系統(tǒng)化

課程采用基于項(xiàng)目、基于功能模塊化學(xué)習(xí)，學(xué)生在團(tuán)隊(duì)協(xié)作中完成項(xiàng)目實(shí)踐或者解決生活和生產(chǎn)實(shí)踐中所遇到的問題，融合了“做中學(xué)”、建構(gòu)主義、體驗(yàn)式教學(xué)等教學(xué)模式。課程實(shí)施由情境創(chuàng)設(shè)（“韻味金陵，云上非遺”）——方案設(shè)計(jì)（班級(jí)學(xué)生分成四組，每組選擇一個(gè)具體的南京非物質(zhì)文化遺產(chǎn)項(xiàng)目為主題進(jìn)行網(wǎng)站開發(fā)）——實(shí)踐優(yōu)化（工程制作）——展示交流四個(gè)階段組成。學(xué)生在獨(dú)立設(shè)計(jì)、實(shí)施、優(yōu)化方案，完成項(xiàng)目任務(wù)的過程中，發(fā)展自身的高階思維，養(yǎng)成批判性思考及積極學(xué)習(xí)和通過項(xiàng)目活動(dòng)解決問題的能力和溝通技巧。邀請(qǐng)下企業(yè)回來的教師結(jié)合企業(yè)工作經(jīng)驗(yàn)，參與到課堂教學(xué)中，最終入選項(xiàng)目需要根據(jù)客戶修改意見完善作品，如圖3所示。

3.3 項(xiàng)目遷移，實(shí)現(xiàn)增量學(xué)習(xí)

教師的“教”（PC端Web前端開發(fā)、Web前端開發(fā)與微信小程序知識(shí)結(jié)構(gòu)異同對(duì)比）是為學(xué)生的自主“學(xué)”（微信小程序前端開發(fā)）服務(wù)的，一切教法，都是服從于學(xué)生學(xué)習(xí)遷移的形成，學(xué)生具備“大前端”開發(fā)能力這一最終目的，教學(xué)不是知識(shí)的傳遞，課上的“教”，是為了適應(yīng)企業(yè)前端設(shè)計(jì)崗位需求而設(shè)立的，更是為了課下的“不教”，是使學(xué)生具備自主遷移，進(jìn)行增量學(xué)習(xí)、自主學(xué)習(xí)探究前端開發(fā)的能力和素養(yǎng)。通過本課程學(xué)習(xí)，使得學(xué)生能夠掌握知識(shí)遷移規(guī)律，從Web 前端開發(fā)入手，自主學(xué)習(xí)小程序、移動(dòng)端（IOS、Android）其他開發(fā)等。實(shí)現(xiàn)增量學(xué)習(xí)的同時(shí)，能真正掌握知識(shí)學(xué)習(xí)密碼，形成學(xué)生受益終身的學(xué)習(xí)能力，如圖4所示。

3.4 思政課程貫穿工作任務(wù)

課程項(xiàng)目以“韻味金陵，云上非遺”為大主題，“歸寧燈會(huì)”“雞鳴素食”“云想衣裳”“竹塢聽琴”四個(gè)小組學(xué)生完成功能模塊分析制作，通過合作形式以“秦淮燈會(huì)”“雞鳴寺素食”“南京云錦”“金陵琴派”四個(gè)主題，制作PC端Web前端開發(fā)項(xiàng)目，從網(wǎng)站的整體策劃方案撰寫、修改、調(diào)整、匯報(bào)交流、修改方案到完成Web前端開發(fā)的各環(huán)節(jié)。

結(jié)合每個(gè)環(huán)節(jié)的制作要點(diǎn)，設(shè)置有針對(duì)性的問題串，起到強(qiáng)調(diào)知識(shí)點(diǎn)、引導(dǎo)設(shè)計(jì)思路、規(guī)范制作細(xì)節(jié)的作用。學(xué)生以思維導(dǎo)圖形式進(jìn)行方案的呈現(xiàn)、人員分工等。

各組在項(xiàng)目完成后，形成詳細(xì)記錄團(tuán)隊(duì)成長(zhǎng)過程的思維導(dǎo)圖。將碎片化的記憶進(jìn)行整合，從接受式轉(zhuǎn)變?yōu)樽灾魈骄?、合作探究的學(xué)習(xí)方式，完成遷移項(xiàng)目。

3.5 在線課程助力學(xué)生成長(zhǎng)

根據(jù)項(xiàng)目需要，依托“超星”學(xué)習(xí)平臺(tái)，搭建網(wǎng)絡(luò)課程輔助教學(xué)，師生共建教學(xué)資源。在學(xué)習(xí)創(chuàng)建網(wǎng)站、制作網(wǎng)頁(yè)之前，通過網(wǎng)絡(luò)資源賞析國(guó)內(nèi)外優(yōu)秀網(wǎng)站，教師對(duì)網(wǎng)站的主頁(yè)進(jìn)行分析，解析一些優(yōu)秀網(wǎng)站的布局結(jié)構(gòu)、文字效果、色彩搭配、導(dǎo)航欄設(shè)計(jì)、動(dòng)畫效果等，留下直觀的印象，為制作網(wǎng)頁(yè)奠定基礎(chǔ)，引導(dǎo)學(xué)生體驗(yàn)網(wǎng)站前端開發(fā)的職業(yè)精神。

通過騰訊課堂微課等課程資源，輔助學(xué)生系統(tǒng)學(xué)習(xí)，尤其是JavaScript動(dòng)畫效果制作腳本等，彌補(bǔ)教師課堂教學(xué)的有限性和學(xué)生個(gè)體差異性。由于信息化教學(xué)常態(tài)化，師生、生生網(wǎng)絡(luò)交流已經(jīng)形成習(xí)慣，教師形成長(zhǎng)期在線答疑和布置作業(yè)的習(xí)慣，學(xué)生課后遇到問題可以及時(shí)得到解答，通過作業(yè)情況及時(shí)向教師反饋學(xué)習(xí)掌握情況，有效地提高了學(xué)習(xí)積極性。

3.6 教學(xué)評(píng)價(jià)真實(shí)多元

教學(xué)評(píng)價(jià)是一個(gè)目標(biāo)動(dòng)態(tài)調(diào)整的過程，教師不能只一味地關(guān)注學(xué)生單一的作品完成度，而更應(yīng)該關(guān)注學(xué)生在整個(gè)項(xiàng)目開發(fā)過程的參與程度、態(tài)度、團(tuán)隊(duì)協(xié)作能力、動(dòng)手實(shí)踐能力、創(chuàng)造能力等方面的綜合表現(xiàn)和提升，注重學(xué)生整個(gè)項(xiàng)目開發(fā)過程中的各種表現(xiàn)能力。

PC端Web 前端開發(fā)教學(xué)評(píng)價(jià)首先采用Light?house報(bào)告指標(biāo)分析評(píng)價(jià)，從性能（Performance），訪問無障礙（Accessibility），最佳實(shí)踐（Best Practice），搜索引擎優(yōu)化（SEO），PWA（Progressive Web App）五個(gè)部分，對(duì)PWA（Progressive Web App）和網(wǎng)頁(yè)多方面的效果指標(biāo)進(jìn)行評(píng)測(cè)，并給出最佳實(shí)踐的建議以幫助學(xué)生們改進(jìn)網(wǎng)站的質(zhì)量。其次，使用項(xiàng)目反饋評(píng)價(jià)表從項(xiàng)目分工、學(xué)科知識(shí)融合、解決問題能力、團(tuán)隊(duì)合作、創(chuàng)造意識(shí)與創(chuàng)造能力、作品藝術(shù)性審美六個(gè)維度展開學(xué)生自評(píng)、組評(píng)、師評(píng)和客戶多方面評(píng)價(jià)組成。

微信小程序前端開發(fā)教學(xué)評(píng)價(jià)首先采用微信小程序開發(fā)平臺(tái)自帶的Adubits測(cè)試工具，方便學(xué)生對(duì)小程序項(xiàng)目進(jìn)行性能，體驗(yàn)，實(shí)踐三個(gè)方面的評(píng)估修改，再采用項(xiàng)目評(píng)價(jià)反饋表進(jìn)行評(píng)價(jià)。

4 研究成效

4.1 構(gòu)建學(xué)習(xí)共同體

在信息技術(shù)與教育教學(xué)深度融合的時(shí)代大背景下，“課前學(xué)、課上做”“做中學(xué)，學(xué)中做”改變了傳統(tǒng)課堂學(xué)習(xí)方式[2]。在每個(gè)項(xiàng)目的制作過程中，師生在學(xué)習(xí)過程中溝通、交流，分享各種學(xué)習(xí)資源，構(gòu)建學(xué)習(xí)共同體，共同完成PC端和微信小程序的前端設(shè)計(jì)制作。

4.2“MSMA”模式，提升專業(yè)素養(yǎng)

“MSMA”是模塊化學(xué)習(xí)+系統(tǒng)性學(xué)習(xí)+遷移性學(xué)習(xí)到能力提煉的一種教學(xué)模式。如圖5所示，模塊化學(xué)習(xí)（Modular），在“線上線下”學(xué)習(xí)環(huán)境下，通過功能模塊化學(xué)習(xí)與練習(xí)，使學(xué)生具備HTML開發(fā)、CSS設(shè)置、JavaScript交互設(shè)計(jì)基礎(chǔ)應(yīng)用的實(shí)踐操作能力。系統(tǒng)化（Systematize），通過綜合項(xiàng)目的應(yīng)用開發(fā)，鞏固Web前端開發(fā)基礎(chǔ)知識(shí)的同時(shí)，具備網(wǎng)頁(yè)設(shè)計(jì)、開發(fā)、調(diào)試、維護(hù)等綜合能力。遷移（Migrate），通過微信小程序前端開發(fā)和Web前端開發(fā)的高度相似度以知識(shí)遷移的方法進(jìn)行轉(zhuǎn)化，培養(yǎng)學(xué)生自主探究能力。能力（Ability），構(gòu)建PC端和微信小程序前端開發(fā)知識(shí)對(duì)比思維導(dǎo)圖，引導(dǎo)學(xué)生自主學(xué)習(xí)微信小程序開發(fā)、制作、反思專業(yè)技能，掌握自主探究學(xué)習(xí)的方法，為大前端開發(fā)自主學(xué)習(xí)奠定基礎(chǔ)，快速提升專業(yè)素養(yǎng)。由重點(diǎn)關(guān)注制作過程中HTML標(biāo)記、CSS樣式、JavaScript運(yùn)用，轉(zhuǎn)變?yōu)槭冀K圍繞制作主題，高效完成網(wǎng)站前端開發(fā)制作。

4.3 學(xué)生作品進(jìn)階圖

課程開展實(shí)施前，通過自擬主題作品對(duì)學(xué)生網(wǎng)頁(yè)設(shè)計(jì)制作水平進(jìn)行摸底，在綜合項(xiàng)目應(yīng)用開發(fā)課程實(shí)施時(shí)，四組圍繞“韻味金陵，云上非遺”主題進(jìn)行PC端Web前端開發(fā)，通過教師指導(dǎo)分析、糾錯(cuò)、學(xué)生自主探究，學(xué)生對(duì)作品再次進(jìn)行迭代開發(fā)，最后，進(jìn)行項(xiàng)目遷移，引導(dǎo)學(xué)生通過知識(shí)對(duì)比學(xué)習(xí)，在教師指導(dǎo)下，探索微信小程序開發(fā)，最后完成“韻味金陵，云上非遺”的微信小程序開發(fā)，宣傳推廣南京非物質(zhì)文化遺產(chǎn)，弘揚(yáng)愛國(guó)主義精神，如圖6所示。

4.4 課程實(shí)施效果——?jiǎng)邮植僮髋c創(chuàng)意實(shí)踐

通過遷移性教學(xué)，給學(xué)生提供創(chuàng)造創(chuàng)意空間，對(duì)于學(xué)生問題解決過程中多種能力的發(fā)展起到推動(dòng)作用。通過對(duì)后測(cè)調(diào)查問卷中幾個(gè)問題的梳理，結(jié)合前測(cè)學(xué)生的反饋信息，對(duì)教學(xué)過程中問題解決方面積累的能力進(jìn)行效果呈現(xiàn)，如圖7所示。

5 創(chuàng)新與特色

5.1“MSMA”模式

“MSMA”模式，遷移教學(xué)方式，引導(dǎo)學(xué)生自主探究式學(xué)習(xí)，“授人以魚不如授人以漁”方式培養(yǎng)學(xué)生自主學(xué)習(xí)、創(chuàng)造性學(xué)習(xí)能力，延伸專業(yè)深度和廣度的學(xué)習(xí)奠定基礎(chǔ)。

構(gòu)建以學(xué)生為主體、教師為主導(dǎo)、技能為主線、創(chuàng)新創(chuàng)意思維培養(yǎng)為中心，以貫通課前、課中、課下及線上線下，充分發(fā)揮課堂效率的教、學(xué)、做、創(chuàng)合一的理實(shí)一體化為主要教學(xué)模式。

5.2 課程思政全面融入

將課程思政融入專業(yè)人才培養(yǎng)方案的課程設(shè)置中，采用網(wǎng)站和微信小程序數(shù)字技術(shù)，讓學(xué)生制作開發(fā)過程中，走進(jìn)非遺、研究非遺，通過網(wǎng)絡(luò)形式向人們宣傳非物質(zhì)文化遺產(chǎn)保護(hù)，利于展示中華民族悠久的歷史文化，激揚(yáng)民族精神，也幫助擺脫空間局限性和地理位置的限制導(dǎo)致非遺的保護(hù)和活態(tài)繼承的困難，推動(dòng)南京非遺的保護(hù)和傳承。匯報(bào)交流時(shí)學(xué)習(xí)共同體的創(chuàng)設(shè)，互助互學(xué)，立德樹人融入教學(xué)的各環(huán)節(jié)中。從學(xué)生參與的積極性以及匯報(bào)、討論過程中的情緒表達(dá)中能夠看出，切實(shí)地提高了學(xué)生的文化自信和愛國(guó)之情。

6 教學(xué)反思

本項(xiàng)目教學(xué)采取多元化過程性評(píng)價(jià)和軟件測(cè)試評(píng)價(jià)，彌補(bǔ)了傳統(tǒng)《Web前端開發(fā)》課程的單一主觀評(píng)價(jià)的局限性，提高了評(píng)價(jià)的效度及信度。評(píng)價(jià)方式設(shè)置的合理性，會(huì)直接影響學(xué)生的學(xué)習(xí)積極性。鼓勵(lì)學(xué)生將專業(yè)知識(shí)與思政元素結(jié)合，與現(xiàn)實(shí)生活結(jié)合，豐富基于思政教育[3]的課程教學(xué)內(nèi)容，探究專業(yè)課程內(nèi)容與思政教育的契合點(diǎn)，而不是生搬硬套地強(qiáng)行加入思政教育元素，使用遷移性教學(xué)方式，摒棄學(xué)生學(xué)習(xí)的依賴性，挖掘內(nèi)在自主學(xué)習(xí)的動(dòng)力，提高學(xué)生學(xué)習(xí)能力[4]，培養(yǎng)學(xué)生思政素養(yǎng)，培養(yǎng)學(xué)生傳承非遺繼承人的匠心精神，弘揚(yáng)愛國(guó)主義精神。