紀(jì)懷猛 趙妍 張海歆

摘 要：針對(duì)傳統(tǒng)教學(xué)的弊端，以HTML5技術(shù)與應(yīng)用課程為例，從教學(xué)模式、教學(xué)方法和評(píng)價(jià)體系三個(gè)方面進(jìn)行“以學(xué)生為中心”的改革探索。數(shù)據(jù)表明，該教學(xué)模式能充分調(diào)動(dòng)學(xué)生學(xué)習(xí)的主動(dòng)性與積極性，取得較好的教學(xué)效果。

關(guān)鍵詞：新工科;教學(xué)模式;以學(xué)生為中心;HTML5技術(shù)與應(yīng)用;項(xiàng)目式

中圖分類號(hào)：G642 文獻(xiàn)標(biāo)識(shí)碼：A DOI：10.3969/j.issn.1003-6970.2021.03.007

本文著錄格式：紀(jì)懷猛，趙妍，張海歆.以學(xué)生為中心的教學(xué)模式與教學(xué)方法改革探索——以《HTML5技術(shù)與應(yīng)用》課程為例[J].軟件，2021，42（03）：026-028

The Reform of Student-centered Teaching Mode and Teaching Method： A Case Study of "HTML5 Technology and Application" Course

JI Huaimeng， ZHAO Yan， ZHANG Haixin

（ College of Artificial Intelligence， Yango University ， Fuzhou? Fujian? 350015）

【Abstract】：Aiming at the disadvantages of traditional teaching， this paper explores the "student-centered" reform from four aspects： teaching mode and teaching method， online and offline mixed teaching， dual teachers in the classroom and evaluation system.Data show that this teaching mode can fully mobilize students initiative and enthusiasm in learning， and achieve good teaching results.

【Key words】：new engineering;teaching mode;student-centered;HTML5 technology and applications;project type

0 引言

隨著科學(xué)技術(shù)的進(jìn)步和我國(guó)素質(zhì)教育的發(fā)展，我國(guó)高等教育已經(jīng)從發(fā)展的階段逐步進(jìn)入了提高質(zhì)量階段，“以學(xué)生為中心”的教育理念[1]也受到了中國(guó)教育界專家和學(xué)者的關(guān)注。國(guó)內(nèi)許多學(xué)者對(duì)此進(jìn)行了非常深入的探索，如鐘登華院士提出，要加快制定適應(yīng)工科學(xué)生終身發(fā)展和社會(huì)需要的核心素養(yǎng)體系和學(xué)業(yè)標(biāo)準(zhǔn)體系[2]，完善學(xué)生、老師、雇主、校友等共同參與的“以學(xué)生為中心”學(xué)生培養(yǎng)質(zhì)量持續(xù)改進(jìn)體系。曹艷春等人從學(xué)生在課堂的積極性、教師在課堂中的作用、學(xué)生在課堂中對(duì)于知識(shí)的吸收情況及學(xué)生對(duì)課堂教育模式的認(rèn)知等方面做了詳盡的調(diào)查[3]。左青卉等人從教學(xué)內(nèi)容、教學(xué)方法和評(píng)價(jià)體系三個(gè)方面進(jìn)行了探索和實(shí)踐[4]。黃蓉曾對(duì)研究和探索闖關(guān)式的翻轉(zhuǎn)課堂教學(xué)方法[5]等。

近年來(lái)，HTML5 Web前端開發(fā)在產(chǎn)品開發(fā)環(huán)節(jié)中的作用變得越來(lái)越重要，我校計(jì)算機(jī)類專業(yè)在大三上學(xué)期開設(shè)該課程，由于該課程既有知識(shí)面比較廣，又有實(shí)踐性強(qiáng)的特點(diǎn)，僅僅通過(guò)教師的課堂講授和練習(xí)就能完成創(chuàng)新型人才培養(yǎng)目標(biāo)是不切實(shí)際的。因此在HTML5技術(shù)與應(yīng)用課程教學(xué)中進(jìn)行教學(xué)模式和方法改革就顯得尤為迫切和重要。

1 《HTML5技術(shù)與應(yīng)用》課程教學(xué)現(xiàn)狀分析

傳統(tǒng)的教學(xué)模式是“以教材為中心、以教師為中心”的教學(xué)，本質(zhì)是以教師為中心、以傳遞書本知識(shí)為核心，重“教”輕“學(xué)”的教學(xué)模式。

（1）傳統(tǒng)《HTML5技術(shù)與應(yīng)用》課堂教學(xué)常以教材為中心。教師根據(jù)開課之前選定的教材，但有些老師僅僅為了備課和教學(xué)的方便，選用的教材多年不變，完全不顧技術(shù)的更新，這就會(huì)造成教學(xué)內(nèi)容與實(shí)際應(yīng)用技術(shù)的脫節(jié)，嚴(yán)重打擊了學(xué)生的學(xué)習(xí)積極性。

（2）傳統(tǒng)的《HTML5技術(shù)與應(yīng)用》課堂教學(xué)過(guò)程中常以教師為中心。將學(xué)生視為信息的被動(dòng)接受者，教師在講課時(shí)為顧及到大多數(shù)學(xué)生的接受能力，常常重視課程基本概念、知識(shí)和技術(shù)的講解，雖以課程案例的方式進(jìn)行課堂教學(xué)，但缺乏對(duì)課程整體的理解和完整系統(tǒng)開發(fā)過(guò)程的實(shí)戰(zhàn)演練。

但是，《HTML5技術(shù)與應(yīng)用》課程是一門實(shí)踐性和工程性很強(qiáng)的Web前端開發(fā)課程，采用以教師為中心的傳統(tǒng)灌輸式教學(xué)，因?yàn)闆](méi)有注重引導(dǎo)學(xué)生思考、理解相關(guān)的知識(shí)點(diǎn)，往往會(huì)造成學(xué)生僅從字面含義死記硬背的現(xiàn)象，不僅難以達(dá)到培養(yǎng)學(xué)生工程意識(shí)的教學(xué)目的，而且無(wú)法激發(fā)學(xué)生的學(xué)習(xí)興趣，使學(xué)生感覺理論知識(shí)枯燥無(wú)味、甚至厭煩上理論課，更會(huì)嚴(yán)重打擊優(yōu)秀學(xué)生的創(chuàng)新激情，因此，我們進(jìn)行了“以教師為中心”轉(zhuǎn)換成“以學(xué)生為中心”的教學(xué)模式和教學(xué)方法改革。

2“以學(xué)生為中心”的教學(xué)模式與教學(xué)方法改革探索

（1）教師角色由單純的“講師”轉(zhuǎn)變?yōu)椤皩?dǎo)師”。腦科學(xué)研究表明，大腦的發(fā)展遵循“用進(jìn)廢退”原則，挑戰(zhàn)可以激發(fā)學(xué)生的潛能和學(xué)習(xí)動(dòng)力。因此，“以學(xué)生為中心”教學(xué)模式的教學(xué)設(shè)計(jì)中，教師在授課時(shí)要給學(xué)生留出實(shí)踐的探索空間，留出需要進(jìn)一步探究的問(wèn)題，讓學(xué)生在聽課的基礎(chǔ)上，進(jìn)一步思考、討論和實(shí)踐，從而實(shí)現(xiàn)教師角色由單純的“講授者”演變?yōu)椤皩?dǎo)師”， 實(shí)現(xiàn)學(xué)生在聽講基礎(chǔ)上的思考和討論，并展開項(xiàng)目開發(fā)實(shí)踐。

（2）教學(xué)環(huán)節(jié)設(shè)計(jì)由“教師如何教”轉(zhuǎn)變?yōu)椤皩W(xué)生如何學(xué)”。在教學(xué)設(shè)計(jì)環(huán)節(jié)中，“教師如何教”與“學(xué)生如何學(xué)”是兩個(gè)緊密聯(lián)系又有重要區(qū)別的兩個(gè)問(wèn)題。因此，“以學(xué)生為中心”的教學(xué)模式要求教師充分了解學(xué)生，從關(guān)注如何教，轉(zhuǎn)變?yōu)閺膶W(xué)生理性發(fā)展的需要出發(fā)，引導(dǎo)學(xué)生有效學(xué)習(xí)。因此“以學(xué)生為中心”教學(xué)模式通過(guò)多重教學(xué)環(huán)節(jié)設(shè)計(jì)，組織學(xué)生分成多個(gè)團(tuán)隊(duì)，將每個(gè)模塊要完成中的設(shè)計(jì)任務(wù)分給每個(gè)團(tuán)隊(duì)獨(dú)立完成，學(xué)生們以團(tuán)隊(duì)為單位進(jìn)行知識(shí)學(xué)習(xí)，討論解決問(wèn)題的方法以及解決問(wèn)題的最終方案，課堂上讓學(xué)生到講臺(tái)進(jìn)行成果展示，然后根據(jù)學(xué)生設(shè)計(jì)過(guò)程中出現(xiàn)的問(wèn)題進(jìn)行有針對(duì)性的講解，從而培養(yǎng)學(xué)生“會(huì)學(xué)、會(huì)做、會(huì)講”，并通過(guò)“學(xué)、做、講”三個(gè)環(huán)節(jié)實(shí)現(xiàn)學(xué)生的和有效學(xué)習(xí)。

（3）學(xué)生角色由“教學(xué)對(duì)象”轉(zhuǎn)化為“教學(xué)主體”。大學(xué)教學(xué)是幫助學(xué)生在頭腦中構(gòu)建特定的專業(yè)認(rèn)知模型，“學(xué)”是指學(xué)生在自己頭腦中構(gòu)建認(rèn)知模型，“教”是指老師幫助學(xué)生構(gòu)建專業(yè)認(rèn)知模型，而且，只能由學(xué)生構(gòu)建自己的專業(yè)認(rèn)知模型，別人無(wú)法代替。因此，“以學(xué)生為中心”的教學(xué)模式，應(yīng)該讓學(xué)生成為教與學(xué)的主體，把學(xué)習(xí)的責(zé)任歸還給學(xué)生，并且設(shè)計(jì)一系列活動(dòng)讓學(xué)生動(dòng)起來(lái)，通過(guò)活動(dòng)促進(jìn)學(xué)生的有效學(xué)習(xí)。

3“以學(xué)生為中心”教學(xué)模式在《HTML5技術(shù)與應(yīng)用》課程中的實(shí)施

3.1“線上線下”混合教學(xué)模式改革

為了節(jié)約課堂教學(xué)時(shí)間和更好地激發(fā)學(xué)生的學(xué)習(xí)積極性和探索熱情，我們利用超星學(xué)習(xí)通平臺(tái)在線上擴(kuò)充課堂知識(shí)。每次課前2～3d，我們把需要學(xué)生學(xué)習(xí)的知識(shí)點(diǎn)內(nèi)容發(fā)布到平臺(tái)上，并根據(jù)課堂教學(xué)進(jìn)度發(fā)布一些練習(xí)素材、案例、課堂小測(cè)和作業(yè)。這樣既可以讓學(xué)生提前預(yù)習(xí)課堂內(nèi)容，又可以讓學(xué)生及時(shí)提交在線作業(yè)，提高作業(yè)批改的效率和及時(shí)性。如果學(xué)生對(duì)要學(xué)習(xí)的知識(shí)點(diǎn)有任何疑惑都可以在線咨詢老師，但我們建議將問(wèn)題發(fā)布在評(píng)論區(qū)里，同學(xué)們都可以解答，看到問(wèn)題后能解答的同學(xué)可以直接進(jìn)行解答，對(duì)于同學(xué)們解答不了或者沒(méi)有及時(shí)解答的，教師會(huì)及時(shí)解答，進(jìn)一步促進(jìn)了學(xué)生間和師生間的學(xué)習(xí)交流。這樣經(jīng)過(guò)線上的學(xué)習(xí)和交流，同學(xué)們對(duì)本次課要學(xué)習(xí)知識(shí)點(diǎn)基本都已掌握，在課堂的教學(xué)時(shí)，就可以將更多的時(shí)間分配給小組討論、代碼設(shè)計(jì)、成果展示和點(diǎn)評(píng)環(huán)節(jié)，更好地開展以成果導(dǎo)向的課堂教學(xué)了。

3.2基于OBE教學(xué)理念的教學(xué)模式探索

課程采用了從入門到實(shí)戰(zhàn)的項(xiàng)目案例開發(fā)式教材，由深入淺出地介紹Web前端設(shè)計(jì)技術(shù)的基礎(chǔ)知識(shí)，分為HTML5、CSS3和JavaScript三大模塊探討HTML5 Web前端設(shè)計(jì)的基本規(guī)律，教材注重基礎(chǔ)知識(shí)、結(jié)合整體項(xiàng)目模塊的設(shè)計(jì)分析，易于學(xué)生理解和接受。同時(shí)，任課教師還向?qū)W生推薦一些比較經(jīng)典的國(guó)外教材和比較好的案例資源，加深和拓寬學(xué)生的知識(shí)面。

在課程的第一次課上，我們首先展示上屆學(xué)生設(shè)計(jì)的一些優(yōu)秀案例，先不做任何評(píng)論，讓同學(xué)們投票評(píng)出認(rèn)為最好的作品，然后講述該作品的網(wǎng)站構(gòu)成、頁(yè)面的布局結(jié)構(gòu)和用到的模塊知識(shí)。以此引出課程教學(xué)的主要知識(shí)模塊、學(xué)時(shí)分布、要學(xué)習(xí)的特效，強(qiáng)調(diào)課程期末考核的要求等內(nèi)容，并特別強(qiáng)調(diào)不只是期末作品考核，而是對(duì)整個(gè)學(xué)習(xí)過(guò)程進(jìn)行考核。

對(duì)每次課的教學(xué)，我們采用了“成果展示+知識(shí)講授+案例實(shí)現(xiàn)+探索提高”的模式。先展示設(shè)計(jì)好的案例吸引學(xué)生的注意力和學(xué)習(xí)興趣;然后介紹本次課的教學(xué)知識(shí)點(diǎn)，對(duì)案例中用的重要知識(shí)點(diǎn)進(jìn)行重點(diǎn)介紹;接著帶領(lǐng)學(xué)生進(jìn)行案例實(shí)現(xiàn)，對(duì)設(shè)計(jì)過(guò)程中比較難理解的地方重點(diǎn)強(qiáng)調(diào);案例實(shí)現(xiàn)完以后給學(xué)生留2～3分鐘的時(shí)間按學(xué)習(xí)小組進(jìn)行討論，重點(diǎn)討論該案例還可用哪種方法實(shí)現(xiàn)，或者在哪些地方還存在設(shè)計(jì)上可改進(jìn)的地方，再用3～5分鐘的時(shí)間進(jìn)行小組發(fā)言搶答交流，最后老師做適當(dāng)?shù)狞c(diǎn)評(píng)。例如在進(jìn)行表單驗(yàn)證部分的教學(xué)時(shí)，先給學(xué)生展示完成的案例，讓學(xué)生看到確實(shí)可以對(duì)不正確的輸入進(jìn)行驗(yàn)證的效果，然后開始講解本次課的知識(shí)點(diǎn)，重點(diǎn)介紹正則表達(dá)式的構(gòu)成和規(guī)則。在案例實(shí)現(xiàn)時(shí)先帶領(lǐng)學(xué)生在HTML5的Input標(biāo)簽中直接構(gòu)造表達(dá)式的方式實(shí)現(xiàn)這個(gè)案例，然后以“你認(rèn)為這種方式完美嗎？如果不完美，還有其它方法可以實(shí)現(xiàn)表單驗(yàn)證嗎？”為題開展小組討論。討論完成后，讓各小組的代表進(jìn)行搶答式發(fā)言（代表可以每次課輪流，以鍛煉所有同學(xué)的表達(dá)能力）。最后，老師在學(xué)生發(fā)言的基礎(chǔ)上進(jìn)行簡(jiǎn)單總結(jié)，引導(dǎo)學(xué)生完成在JavaScript代碼中完成正則表達(dá)式的構(gòu)建和相應(yīng)的代碼修改，接著再拋出“HTML5已經(jīng)能在行內(nèi)實(shí)現(xiàn)Email驗(yàn)證了，但是我們不僅要知其然，而且要知其所以然，如果讓你在JavaScript代碼中實(shí)現(xiàn)，應(yīng)該注意哪些問(wèn)題呢？”再次展開小組討論，然后進(jìn)行小組代表發(fā)言，在代表發(fā)言的基礎(chǔ)上總結(jié)出Email表單驗(yàn)證需要解決只能有1個(gè)‘@、1個(gè)‘.，且這兩個(gè)字符的前后至少要有1個(gè)其它字符的問(wèn)題，讓學(xué)生們帶著這些建議去編寫代碼并驗(yàn)證代碼的正確性。在用HTML5及相關(guān)技術(shù)進(jìn)行前端開發(fā)中還有很多非常有趣和挑戰(zhàn)性的案例，我們?cè)谡n堂教學(xué)中根據(jù)案例的難以程度和花費(fèi)時(shí)間的多少進(jìn)行不同的區(qū)分，對(duì)能在課堂中完成的就直接實(shí)現(xiàn)，對(duì)一些難度較大需要花費(fèi)較多時(shí)間的案例，在課堂上會(huì)給出適當(dāng)?shù)乃悸?，推薦學(xué)生在課下查找相關(guān)資料，結(jié)合自己的實(shí)際能力進(jìn)行學(xué)習(xí)。

3.3“雙師同堂”教學(xué)模式的探索

除了常規(guī)的教學(xué)模式外，為了使教學(xué)更加貼近公司生產(chǎn)實(shí)際，我們還特別安排4～6學(xué)時(shí)的“雙師同堂”教學(xué)，將企業(yè)技術(shù)骨干引進(jìn)課堂，讓他從企業(yè)的角度結(jié)合本次課的教學(xué)內(nèi)容講解這部分內(nèi)容在企業(yè)生產(chǎn)中時(shí)怎樣設(shè)計(jì)實(shí)現(xiàn)、怎樣迭代、優(yōu)化修改的，然后指導(dǎo)學(xué)生進(jìn)行實(shí)現(xiàn)。借助“雙師同堂”的教學(xué)，讓學(xué)生有機(jī)會(huì)在課堂中與企業(yè)技術(shù)骨干進(jìn)行面對(duì)面的學(xué)習(xí)交流，了解企業(yè)生產(chǎn)的工作模式，極大提高了學(xué)生的學(xué)習(xí)興趣和積極性。

3.4 評(píng)價(jià)體系的改革探索

此項(xiàng)改革在我校計(jì)算機(jī)科學(xué)與技術(shù)專業(yè)2018級(jí)的學(xué)生中開展實(shí)踐，考核時(shí)由平臺(tái)上導(dǎo)出在線視頻學(xué)習(xí)、課堂小測(cè)、作業(yè)、評(píng)論、簽到等數(shù)據(jù)作為平時(shí)成績(jī)、對(duì)學(xué)生期末作品的考核，我們以小組為單位進(jìn)行考核，考核小組由二位任課教師和一位企業(yè)技術(shù)骨干組成，從整體規(guī)劃、代碼設(shè)計(jì)和新穎性等三個(gè)方面上進(jìn)行打分，再由小組間互評(píng)得出本設(shè)計(jì)的互評(píng)分?jǐn)?shù)，再按照總成績(jī)=平時(shí)成績(jī)×40%+答辯成績(jī)×50%+互評(píng)成績(jī)×10%的公式求出該小組的總體成績(jī)，進(jìn)一步結(jié)合各成員的貢獻(xiàn)度得出每位同學(xué)的期末成績(jī)。該年級(jí)的平均分比前一年級(jí)提升了11.9%，由74.94分增加到83.83分，答辯老師對(duì)本次考核的總體評(píng)價(jià)是學(xué)生的團(tuán)隊(duì)協(xié)作能力和項(xiàng)目開發(fā)能力比上一年級(jí)有了較大的提升。

4 結(jié)語(yǔ)

以“學(xué)生為中心”的教學(xué)模式和教學(xué)方法從根本上改變了傳統(tǒng)的“以教師為主導(dǎo)”知識(shí)灌輸式教學(xué)模式，本文以“HTML5技術(shù)與應(yīng)用”課程為例，開展“以學(xué)生為中心”教學(xué)模式設(shè)計(jì)與教學(xué)方法改革實(shí)踐，充分調(diào)動(dòng)了學(xué)生學(xué)習(xí)的積極性和主動(dòng)性，提高了學(xué)生對(duì)課程教學(xué)的滿意度。但是，我們也同時(shí)看到，該課程教學(xué)模式距離“讓學(xué)生真正地成為課堂教學(xué)主導(dǎo)者”的目標(biāo)還較遙遠(yuǎn)，在實(shí)現(xiàn)目標(biāo)的過(guò)程中還需要我們不斷地進(jìn)行探索和完善。

參考文獻(xiàn)

[1] 趙炬明.打開黑箱：學(xué)習(xí)與發(fā)展的科學(xué)基礎(chǔ)：美國(guó)“以學(xué)生為中心”的本科教學(xué)改革研究之二[J].高等工程教育研究，2017 （3）：31-52.

[2] 鐘登華. 新工科建設(shè)的內(nèi)涵與行動(dòng)[J].高等工程教育研究， 2017（3）：1-6.

[3] 曹艷春，鄭澤爽.基于學(xué)生為中心的教學(xué)模式改革研究[J].集寧師范學(xué)院學(xué)報(bào)，2019（5）：88-94.

[4] 左青卉，韓東來(lái)，司振君.以學(xué)生為中心教學(xué)模式在課堂教學(xué)中的探索：以“有機(jī)電致發(fā)光材料與技術(shù)”課程為例[J].教育教學(xué)論壇，2017（38）：196-198.

[5] 黃蓉.基于闖關(guān)式的翻轉(zhuǎn)課堂教學(xué)方法的研究與實(shí)踐：以《Web前端技術(shù)》課程為例[J].教育教學(xué)論壇，2017（12）：164-165.