高廣銀　儲(chǔ)久良　成艷　宦臣

摘? 要： 為了實(shí)現(xiàn)高質(zhì)量教育，在新的教育改革背景與爭(zhēng)創(chuàng)一流課程的形勢(shì)下，調(diào)研“Web前端開(kāi)發(fā)技術(shù)”課程的教學(xué)現(xiàn)狀及Web前端工程師的崗位要求，總結(jié)教學(xué)中存在的問(wèn)題并進(jìn)行分析，探討了以調(diào)動(dòng)學(xué)生自主學(xué)習(xí)為目標(biāo)，以建設(shè)一流課程為導(dǎo)向，以開(kāi)發(fā)立體化教學(xué)資源為載體，以線上線下混合式教學(xué)為途徑的教學(xué)改革。實(shí)踐表明，學(xué)生主動(dòng)學(xué)習(xí)行為增加，整體學(xué)習(xí)效果提升。

關(guān)鍵詞： 一流課程; 立體化教學(xué)資源; 線上線下混合式教學(xué); 課程思政

中圖分類號(hào)：G642;TP311? ? ? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A? ? ?文章編號(hào)：1006-8228（2022）04-77-03

Research and practice of online and offline blended first-class curriculum construction

——taking the course of web front end development technology as an example

Gao Guangyin Chu Jiuliang Cheng Yan Huan Chen

（1. School of Computer Science and Engineering， Taizhou Institute of Sci.&Tech， Taizhou， Jiangsu 225300， China;

2. Information Construction and Management Office， Taizhou Institute of Sci.&Tech）

Abstract： In order to achieve high-quality education， under the new situation of education reform and striving to build first-class courses， in this paper， the teaching status of the course "Web Front-end Development Technology" and the post requirements of Web front-end engineers are investigated， and the existing problems in teaching are summarized. The teaching reform methods for "mobilizing students' autonomous learning as the goal， building first-class courses as the guide， developing three-dimensional teaching resources as the carrier， and online and offline hybrid teaching as the approach" are discussed. Practice shows that students' active learning behavior is increased， and the overall learning effect is improved.

Key words： first-class courses; three-dimensional teaching resources; online and offline hybrid teaching; ideological and political theory integrated course

0 引言

前端開(kāi)發(fā)主要利用HTML、CSS、JavaScript以及衍生出來(lái)的各種技術(shù)、框架創(chuàng)建Web頁(yè)面，實(shí)現(xiàn)用戶界面交互。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，前端開(kāi)發(fā)核心技術(shù)不斷發(fā)展，各種UI框架、JS類庫(kù)層出不窮，前端開(kāi)發(fā)難度逐步提升[1]。近年來(lái)，在推進(jìn)高質(zhì)量教育的形勢(shì)下，中國(guó)高等教育面臨革命性調(diào)整，全國(guó)將有數(shù)百所高校向應(yīng)用型轉(zhuǎn)變[2]，以培養(yǎng)應(yīng)用型人才。在培養(yǎng)應(yīng)用型人才的過(guò)程中如何實(shí)現(xiàn)教學(xué)過(guò)程與生產(chǎn)過(guò)程的對(duì)接，使得課程教學(xué)更好地適應(yīng)人才培養(yǎng)要求，本文把理論聯(lián)系實(shí)際，以“Web前端開(kāi)發(fā)技術(shù)”課程為例，探討一流課程的建設(shè)思路和具體舉措。

1 教學(xué)現(xiàn)狀及問(wèn)題

1.1 理論知識(shí)掌握不夠系統(tǒng)

“Web前端開(kāi)發(fā)技術(shù)”課程的知識(shí)相對(duì)龐雜，學(xué)生掌握不夠系統(tǒng)性。首先，前端開(kāi)發(fā)技術(shù)包括HTML、CSS及JavaScript三個(gè)方面，其中HTML包括很多標(biāo)簽和屬性，CSS包含各種外觀設(shè)置屬性，JavaScript雖然是弱類型語(yǔ)言，但同樣具有程序設(shè)計(jì)語(yǔ)言相關(guān)基本要素。在多次學(xué)情調(diào)研中發(fā)現(xiàn)，學(xué)生普遍反映該課程并不難，但就是記不住那些語(yǔ)法、標(biāo)簽和屬性，導(dǎo)致一看案例就懂，一練實(shí)例就手忙腳亂的局面。究其原因是，沒(méi)有通過(guò)循序漸進(jìn)的練習(xí)將每個(gè)知識(shí)點(diǎn)消化吸收，再將多個(gè)知識(shí)點(diǎn)串聯(lián)起來(lái)運(yùn)用，系統(tǒng)地掌握相關(guān)知識(shí)。

1.2 實(shí)踐動(dòng)手能力偏弱

“Web前端開(kāi)發(fā)技術(shù)”是一門理論與實(shí)踐并重的課程，其教學(xué)要求之一是培養(yǎng)學(xué)生進(jìn)行Web頁(yè)面設(shè)計(jì)的能力和養(yǎng)成良好程序設(shè)計(jì)的習(xí)慣。對(duì)于一個(gè)開(kāi)發(fā)需求，要求學(xué)生能夠通過(guò)分析，選擇合適的標(biāo)簽、屬性等進(jìn)行布局設(shè)計(jì)、外觀樣式設(shè)計(jì)等，從而提高分析和解決問(wèn)題的能力，達(dá)到學(xué)以致用的目的，所以在整個(gè)教學(xué)過(guò)程中，上機(jī)實(shí)驗(yàn)是個(gè)至關(guān)重要的環(huán)節(jié)。但是在實(shí)際教學(xué)中，一方面課時(shí)有限，平均每周一次上機(jī)課，每次二學(xué)時(shí);另一方面學(xué)生缺乏良好的復(fù)習(xí)習(xí)慣，未能充分做好上機(jī)實(shí)驗(yàn)課的知識(shí)準(zhǔn)備，使得上機(jī)課不是在運(yùn)用知識(shí)，而是在消化知識(shí)，上機(jī)效率降低且達(dá)不到實(shí)踐效果;此外，在開(kāi)放性實(shí)驗(yàn)環(huán)節(jié)，學(xué)生選題過(guò)大，對(duì)界面美觀的期望過(guò)高，而與實(shí)際完成度之間形成一定落差，往往帶來(lái)一些挫折感，這些都反映了動(dòng)手實(shí)踐能力偏弱。

2 理論教學(xué)改革

針對(duì)上述問(wèn)題，整體教學(xué)改革思路是轉(zhuǎn)變思想，以學(xué)生為中心，結(jié)合社會(huì)及用人單位的需求，對(duì)標(biāo)一流課程建設(shè)標(biāo)準(zhǔn)[3]，完善教學(xué)資源建設(shè)，采用線上線下混合式教學(xué)方式[4]，加強(qiáng)課程思政教育，充分調(diào)動(dòng)學(xué)生積極性，發(fā)揮學(xué)生主動(dòng)性，從而強(qiáng)化動(dòng)手能力，提高知識(shí)綜合運(yùn)用能力。

2.1 建設(shè)立體教學(xué)資源，開(kāi)展線上線下混合式教學(xué)

契合社會(huì)及用人單位的需求，重新梳理教學(xué)內(nèi)容，建設(shè)立體式教學(xué)資源。為了更好地培養(yǎng)應(yīng)用型人才，首先根據(jù)崗位的要求，梳理出相應(yīng)的知識(shí)、能力、素質(zhì)的要求，進(jìn)而對(duì)教學(xué)內(nèi)容進(jìn)行重新組織，使得各教學(xué)單元主題明確、知識(shí)量適中、知識(shí)點(diǎn)相關(guān)聯(lián)，每個(gè)單元相對(duì)獨(dú)立，從而有利于打造立體式教學(xué)資源，即與超星公司、清華大學(xué)出版社等企業(yè)深度合作，建設(shè)線上課程管理平臺(tái)，提供微課視頻、單元測(cè)試題、課后作業(yè)、試卷等一整套能夠與教學(xué)計(jì)劃相適應(yīng)的教學(xué)資源，并可進(jìn)行教學(xué)過(guò)程管理及學(xué)習(xí)數(shù)據(jù)分析。

對(duì)標(biāo)一流課程建設(shè)標(biāo)準(zhǔn)，開(kāi)展線上線下混合式教學(xué)。課程教學(xué)改革的實(shí)施還需依靠課堂教學(xué)，國(guó)家“雙萬(wàn)計(jì)劃”中一流課程建設(shè)標(biāo)準(zhǔn)已經(jīng)指明了改革的方向，根據(jù)本課程特點(diǎn)，采用線上線下混合式教學(xué)模式，將一方面可以彌補(bǔ)教學(xué)課時(shí)的不足，另一方面也是更重要的方面，能夠真正地實(shí)現(xiàn)“以學(xué)生為中心”，通過(guò)合理地將教學(xué)單元設(shè)置為線上與線下兩種不同形式，促進(jìn)學(xué)生更自主地學(xué)習(xí)，課程比例設(shè)計(jì)如表1所示，其中陰影部分為線上教學(xué)單元，比例為32.14%。例如課程中一些簡(jiǎn)單標(biāo)記、屬性等基本語(yǔ)法內(nèi)容的學(xué)習(xí)，可以錄制優(yōu)質(zhì)視頻，在視頻中嵌入隨堂問(wèn)題，并配套相應(yīng)自測(cè)題，以任務(wù)驅(qū)動(dòng)的方式讓學(xué)生線上自主學(xué)習(xí)。而一些較難、相對(duì)綜合或者比較開(kāi)放的環(huán)節(jié)則采用線下翻轉(zhuǎn)[5-6]、分組討論等形式，促進(jìn)學(xué)生們加強(qiáng)學(xué)習(xí)交流。

2.2 遴選思政元素，融入專業(yè)教育

教學(xué)改革須堅(jiān)持“立德樹(shù)人是教育的根本任務(wù)”[7]，深度挖掘課程蘊(yùn)含的思想政治教育資源，實(shí)現(xiàn)思想和價(jià)值的引領(lǐng)，發(fā)揮專業(yè)課程育人功能。圍繞社會(huì)主義核心價(jià)值觀、科技強(qiáng)國(guó)精神、專業(yè)素養(yǎng)、科研精神、大局觀等思政元素，梳理契合的課程知識(shí)點(diǎn)，挖掘相關(guān)的思政案例，將其融入課堂教學(xué)，實(shí)現(xiàn)專業(yè)思政育人，如表2所示。

3 實(shí)驗(yàn)教學(xué)改進(jìn)

“Web前端開(kāi)發(fā)技術(shù)”是一門實(shí)踐性很強(qiáng)的課程，基本概念和語(yǔ)法、技巧與方法必須通過(guò)反復(fù)練習(xí)來(lái)掌握，針對(duì)學(xué)生動(dòng)手能力偏弱的問(wèn)題對(duì)實(shí)驗(yàn)教學(xué)進(jìn)行改進(jìn)。

3.1 保證上機(jī)課的數(shù)量

傳統(tǒng)的教學(xué)模式是理論為主上機(jī)為輔，這對(duì)于培養(yǎng)科學(xué)型人才是受用的，同時(shí)對(duì)于基礎(chǔ)扎實(shí)、主動(dòng)性強(qiáng)的學(xué)生也是適用的，但是對(duì)于培養(yǎng)應(yīng)用型人才不太合適，他們更需要加強(qiáng)實(shí)踐操作。前端開(kāi)發(fā)課程的特點(diǎn)是一些知識(shí)多練習(xí)、經(jīng)常運(yùn)用就能掌握，需要加大動(dòng)手練習(xí)環(huán)節(jié)。此外，通過(guò)線上教學(xué)環(huán)節(jié)設(shè)置自主學(xué)習(xí)任務(wù)，通過(guò)任務(wù)驅(qū)動(dòng)學(xué)生完成一定基礎(chǔ)訓(xùn)練量，使學(xué)生養(yǎng)成勤練習(xí)慣。

3.2 提高上機(jī)課的質(zhì)量

要提高上機(jī)課的質(zhì)量，必須精心設(shè)計(jì)上機(jī)實(shí)驗(yàn)題。根據(jù)應(yīng)用型人才培養(yǎng)要求，緊扣知識(shí)點(diǎn)及實(shí)際應(yīng)用場(chǎng)景，選擇有代表性的、難度適中的實(shí)例作為實(shí)驗(yàn)題。設(shè)置不同的難度，包括基礎(chǔ)型、驗(yàn)證型、綜合型及設(shè)計(jì)型，并且分為必做題和選做題?；A(chǔ)型、驗(yàn)證型的題目為必做題，以鞏固前端開(kāi)發(fā)技術(shù)的概念和語(yǔ)法;綜合型、設(shè)計(jì)型的題目為選做題，訓(xùn)練學(xué)生綜合運(yùn)用知識(shí)、分析并解決問(wèn)題的能力，在實(shí)施時(shí)可以根據(jù)情況提供輔助，如允許學(xué)生分組完成，或?yàn)閷W(xué)生提供部分框架性源代碼，引導(dǎo)學(xué)生完成復(fù)雜網(wǎng)頁(yè)設(shè)計(jì)。此外，可以允許學(xué)生自選綜合型、設(shè)計(jì)型實(shí)驗(yàn)題，由教師把關(guān)，學(xué)生對(duì)自選題往往更有責(zé)任心;允許學(xué)生就某些復(fù)雜網(wǎng)頁(yè)結(jié)構(gòu)或構(gòu)成元素進(jìn)行研究。這樣，學(xué)生通過(guò)自身努力，在一定時(shí)間內(nèi)能夠看到結(jié)果，就產(chǎn)生一種成就感[8]，逐步增強(qiáng)自信心，提高學(xué)習(xí)興趣。

4 結(jié)束語(yǔ)

為了推進(jìn)高質(zhì)量教育，培養(yǎng)好應(yīng)用型人才，以“Web前端開(kāi)發(fā)技術(shù)”課程為例，探討了線上線下混合式一流課程的建設(shè)思路與舉措，包括以學(xué)生為中心，重構(gòu)教學(xué)內(nèi)容，建設(shè)立體化教學(xué)資源，采用線上線下混合式教學(xué)模式，在教學(xué)過(guò)程中融入課程思政理念等，通過(guò)實(shí)踐明顯地調(diào)動(dòng)了學(xué)生學(xué)習(xí)主動(dòng)性，整體學(xué)習(xí)效果提升，取得一定成效。進(jìn)一步工作將根據(jù)平臺(tái)積累的教學(xué)數(shù)據(jù)，對(duì)教學(xué)情況進(jìn)行多維度量化分析，如學(xué)習(xí)行為分析、學(xué)習(xí)訴求分析、課程目標(biāo)達(dá)成度分析等，從而對(duì)課程建設(shè)進(jìn)行持續(xù)改進(jìn)。

參考文獻(xiàn)（References）：

[1] 儲(chǔ)久良.Web前端開(kāi)發(fā)技術(shù)——HTML、CSS3、JavaScript（第3版）[M].清華大學(xué)出版社，2018.

[2] 韓保清.以新工科建設(shè)推動(dòng)地方高校向應(yīng)用型轉(zhuǎn)變[J].中國(guó)高等教育，2021（2）：10-12

[3] 楊曉宏，鄭新，田春雨.線上線下混合式一流本科課程的內(nèi)涵、建設(shè)目標(biāo)與建設(shè)策略[J].現(xiàn)代教育技術(shù)，2021，31（9）：104-111

[4] 李慧，施珺等.線上線下混合式一流課程建設(shè)的探索與實(shí)踐[J].計(jì)算機(jī)教育，2021（7）：183-187

[5] 姜迎春，岳湘，等.工程材料課程混合式教學(xué)模式構(gòu)建及翻轉(zhuǎn)課堂實(shí)踐研究[J].高教學(xué)刊，2021，7（24）：89-92

[6] 王波.翻轉(zhuǎn)課堂教學(xué)模式淺析[J].計(jì)算機(jī)時(shí)代，2021（9）：99-102

[7] 孟瑤.“Web前端開(kāi)發(fā)技術(shù)”課程思政研究[J].電腦與信息技術(shù)，2020，28（3）：83-84

[8] 王肖燁，李春磊，等.新工科背景下人才學(xué)習(xí)質(zhì)量提升路徑探索與實(shí)踐[J].科技與創(chuàng)新，2021（17）：151-152，157