SPOC環(huán)境下WEB標(biāo)準(zhǔn)網(wǎng)站設(shè)計課程翻轉(zhuǎn)課堂教學(xué)模式研究

程淑玉

摘要：“WEB標(biāo)準(zhǔn)網(wǎng)站設(shè)計”課程內(nèi)容對接前端開發(fā)工程師崗位，主要掌握利用DIV+CSS+JavaScript進行網(wǎng)站前端開發(fā)技能，在教學(xué)過程中引入企業(yè)的實際項目，采用傳統(tǒng)的基于工作過程的項目式教學(xué)。但是存在知識點多且面廣、課堂教學(xué)時間不夠、學(xué)生學(xué)習(xí)主動性不高等問題。針對這些問題，我們提出了將翻轉(zhuǎn)課堂教學(xué)模式引入課程教學(xué)中，通過基于SPOC環(huán)境下的微課程設(shè)計，構(gòu)建SPOC環(huán)境下翻轉(zhuǎn)課堂教學(xué)模式，取得了良好的效果。

關(guān)鍵詞：WEB標(biāo)準(zhǔn)網(wǎng)站設(shè)計;SPOC環(huán)境;翻轉(zhuǎn)課堂

中圖分類號：TP311 ? ? ? ?文獻標(biāo)識碼：A

文章編號：1009-3044（2019）15-0070-03

Abstract： “WEB Standard Website Design” courses content docking front-end development engineer positions， mainly master the skills of using DIV+CSS+JavaScript to develop website front-end，

Introducing the actual project of the enterprise into the teaching process and adopting the traditional project-based teaching based on the working process. However， there are many problems， such as many and a wide range of knowledge points， insufficient classroom teaching time， and low learning initiative of students. To solve these problems， we proposed to introduce the flipped classroom teaching mode into the course teaching. Through the micro-course design based on SPOC environment， we constructed the flipped classroom teaching mode in SPOC environment and achieved good results.

Key words： WEB Standard Website Design; SPOC environment; flipped classroom

SPOC創(chuàng)新了教學(xué)模式，是依托于MOOC平臺，主要針對本校的學(xué)生開發(fā)的 “小規(guī)模限制性在線課程”。該課程是MOOC與傳統(tǒng)校園相結(jié)合的產(chǎn)物[1]，在傳統(tǒng)的MOOC課程基礎(chǔ)上增加了師生面對面的課堂交流學(xué)習(xí)，降低了學(xué)生管理復(fù)雜度、通過教師全程的督學(xué)提高了課程完成率和學(xué)習(xí)效果。課程采用基于新信息技術(shù)的群組教學(xué)模式，以學(xué)生互相熟識的實體班級為基礎(chǔ)的封閉式學(xué)習(xí)社區(qū)，設(shè)學(xué)習(xí)小組，利用團隊方式學(xué)習(xí)。SPOC采用混合學(xué)習(xí)模式（On Campus +Off Campus），能有效地利用平臺和信息技術(shù)促進線上學(xué)習(xí)、線下學(xué)習(xí)以及課前、課中和課后的有機融合。其中線上學(xué)習(xí)主要通過微視頻，輔助動畫、小案例以理論知識為主進行自主學(xué)習(xí)、探究學(xué)習(xí)，線下學(xué)習(xí)主要通過項目分析以實踐技能訓(xùn)練和社交為主進行協(xié)作學(xué)習(xí)。該學(xué)習(xí)模式從本質(zhì)上改變了傳統(tǒng)課堂教學(xué)模式，隨時、隨地、隨心情的個性化學(xué)習(xí)給學(xué)習(xí)者帶了完全不同的學(xué)習(xí)體驗。通過制定個性化的學(xué)習(xí)策略和師生多樣化的交互方式能夠有效地實現(xiàn)翻轉(zhuǎn)課堂。

翻轉(zhuǎn)課堂與傳統(tǒng)課堂的區(qū)別體現(xiàn)在學(xué)生和教師的地位與角色的不同，在翻轉(zhuǎn)課堂中，知識傳授主要通過信息技術(shù)手段在課下完成，學(xué)生通過互聯(lián)網(wǎng)、移動互聯(lián)網(wǎng)使用筆記本、智能手機等設(shè)備觀看微視頻進行自主學(xué)習(xí)、自定學(xué)習(xí)時間、地點、學(xué)習(xí)進度，并就遇到的問題在社區(qū)里進行探討學(xué)習(xí)，通過完成相關(guān)測試題檢測自主學(xué)習(xí)的效果。課堂上重新建構(gòu)學(xué)習(xí)流程，讓學(xué)生作為課堂中的主人，教師作為整個教學(xué)活動組織者，以實操演練、答疑、討論、經(jīng)驗分享等形式有效組織課堂，幫助學(xué)生完成學(xué)習(xí)任務(wù)，并進行總結(jié)評價。

1 課程定位

《WEB標(biāo)準(zhǔn)網(wǎng)站設(shè)計》課程是我院計算機應(yīng)用技術(shù)專業(yè)一門重要專業(yè)核心課程，是校企合作開發(fā)課程，其目標(biāo)是讓學(xué)生掌握利用DIV+CSS+JavaScript進行網(wǎng)站前端開發(fā)的能力，使學(xué)生熟悉網(wǎng)站開發(fā)的整個流程，了解網(wǎng)站前端開發(fā)工程師的崗位能力要求。通過本課程的學(xué)習(xí)，要求學(xué)生掌握HTML5、CSS3、JavaScript代碼編寫能力，會利用HTML5+CSS3設(shè)計網(wǎng)站頁面，利用JavaScript設(shè)計網(wǎng)頁特效。

目前，該課程教學(xué)模式還是采用傳統(tǒng)的基于工作過程的項目式教學(xué)，將一個完整網(wǎng)站項目的作為教學(xué)內(nèi)容，按照企業(yè)網(wǎng)站開發(fā)流程分成HTML基礎(chǔ)語言、CSS表現(xiàn)形式和JavaScript交互設(shè)計三個單元開展教學(xué)[2]，最后配以綜合實訓(xùn)強化學(xué)生的崗位能力、強化前端開發(fā)基礎(chǔ)技能。教學(xué)過程中學(xué)生分團隊分階段協(xié)同完成網(wǎng)站項目的開發(fā)任務(wù)，課程考核采用“課程設(shè)計+答辯”方式進行考核，按照企業(yè)崗位分團隊分崗位進行課程設(shè)計并進行答辯匯報。

WEB標(biāo)準(zhǔn)網(wǎng)站設(shè)計課程改革提升了學(xué)生對前端職業(yè)崗位的認知，實現(xiàn)了團隊成員根據(jù)各人知識特長進行不同崗位的職業(yè)能力提升，同時通過團隊合作也提升了小組成員的溝通交流能力、項目協(xié)同開發(fā)能力、創(chuàng)新能力，但是在改革過程中也發(fā)現(xiàn)了以下的問題。

1） 由于網(wǎng)站項目涉及的知識點多且面廣，如何選取合適的教學(xué)項目就顯得很重要，選取的教學(xué)項目必須精煉、應(yīng)用面廣、包含了重難點。在教學(xué)過程中教師面臨兩難問題，一是一個項目從任務(wù)分解、知識點講解到項目實踐需要較長的時間，課堂時間較短，教師若在課堂上把理論知識講解得非常透徹，必定無法在課堂上完成實際項目的開發(fā)，這樣就會把任務(wù)的完成延伸到課下，課下學(xué)生的完成情況是無法監(jiān)控的;二是課堂上教師主要講解分析項目的重難點并指導(dǎo)學(xué)生動手操作，對于學(xué)習(xí)能力不同的學(xué)生，其知識的吸收與轉(zhuǎn)化速度也不相同，很難做到有針對性地輔導(dǎo)，導(dǎo)致學(xué)生的學(xué)習(xí)效果相差很大。

2） 學(xué)生學(xué)習(xí)自主性不是很高，總是被動地去學(xué)習(xí)，課下很少去預(yù)習(xí)和復(fù)習(xí)鞏固課堂上的知識點，導(dǎo)致實操中無法下手，對專業(yè)課程的學(xué)習(xí)很迷茫。

3）課堂上教學(xué)組織側(cè)重在“教”與“學(xué)”，缺少互動，就算有互動環(huán)節(jié)也僅有幾個學(xué)生能參與進來，大部分都處于游離的狀態(tài)。

針對以上問題，我們采取了將翻轉(zhuǎn)課堂教學(xué)模式融入課程教學(xué)中，開展了SPOC環(huán)境下WEB標(biāo)準(zhǔn)網(wǎng)站設(shè)計課程翻轉(zhuǎn)課堂教學(xué)改革研究，獲得了較好的效果。

2 基于SPOC的微課程設(shè)計

為了將翻轉(zhuǎn)課堂教學(xué)模式與SPOC課程教學(xué)融為一體，我們設(shè)計了適用于SPOC平臺和翻轉(zhuǎn)課堂平臺的《WEB標(biāo)準(zhǔn)網(wǎng)站設(shè)計》微課程教學(xué)內(nèi)容體系，如圖1所示。該教學(xué)內(nèi)容體系設(shè)計包含課程基本信息設(shè)計、課程學(xué)習(xí)內(nèi)容設(shè)計和交互活動設(shè)計。課程基本信息包含了課程標(biāo)準(zhǔn)、教學(xué)團隊、學(xué)習(xí)者要求、考核評價方式等信息。課程內(nèi)容設(shè)計分為線上內(nèi)容和線下內(nèi)容兩部分，線上內(nèi)容以小案例為主，依據(jù)“微目標(biāo)”確定好短小精悍、直接切入核心教學(xué)點的學(xué)習(xí)內(nèi)容，通過小模塊呈現(xiàn)直接聚焦單一知識點，幫助學(xué)生突破重難點;線下內(nèi)容以完整的項目為主，以3個完整的網(wǎng)站項目分別貫穿于基本教學(xué)、拓展練習(xí)和綜合實訓(xùn)中，將項目按照知識點分解成不同的學(xué)習(xí)任務(wù)。交互活動設(shè)計應(yīng)遵循學(xué)生在學(xué)習(xí)過程中認知結(jié)構(gòu)設(shè)計合理的交互策略，包括教師在學(xué)生自學(xué)的過程中在SPOC平臺中提出一些問題，引發(fā)大家的思考交流，選取優(yōu)秀的學(xué)生作為助教，在平臺上與大家互動，就平臺中的大家提出的比較集中的問題進行答復(fù)，配以一些專題活動開展大討論及翻轉(zhuǎn)課堂中師生的交流互動，教師可以根據(jù)學(xué)習(xí)者在不同交互環(huán)境中的學(xué)習(xí)體驗提供個性化的指導(dǎo)。

3 SPOC環(huán)境下翻轉(zhuǎn)課堂教學(xué)模式的構(gòu)建

實施翻轉(zhuǎn)課堂教學(xué)設(shè)計前必須對整個課程教學(xué)活動進行重新設(shè)計，針對《WEB標(biāo)準(zhǔn)網(wǎng)站設(shè)計》課程實踐性強的特點，以構(gòu)建滿足學(xué)生個性化學(xué)習(xí)需求和教師反思提升型教學(xué)活動為主，將該微課程的教學(xué)活動分成課前、課中、課下三個階段[3]，如圖2所示。

3.1 課前SPOC平臺的教學(xué)活動設(shè)計

以學(xué)習(xí)者為中心，設(shè)計個性化學(xué)習(xí)策略，利用SPOC平臺的課程資源開展教學(xué)活動，通過QQ、微信、郵箱等方式發(fā)布學(xué)習(xí)任務(wù)，讓學(xué)生進入SPOC平臺觀看視頻，進行自學(xué)探究，學(xué)生通過觀看微課程視頻、操練視頻中的案例，完成對課程知識點的理解性記憶和練習(xí);通過在線測試及時自我檢查以了解知識點的掌握情況，對于學(xué)習(xí)過程中產(chǎn)生的問題通過在線交流平臺與其他學(xué)習(xí)者進行交流獲得解決問題的方法，教師在監(jiān)學(xué)的同時可以進行答復(fù)指導(dǎo)，對于不能解決的問題課中在翻轉(zhuǎn)課堂上由師生共同解決，從而使學(xué)習(xí)者完成知識傳遞的過程[3]。教師可以在課前通過平臺的數(shù)據(jù)統(tǒng)計查看學(xué)生的視頻觀看情況、點擊情況、測試完成結(jié)果，及時了解學(xué)生的學(xué)習(xí)狀態(tài)，指導(dǎo)學(xué)生及時修改個性化學(xué)習(xí)策略。

3.2課中翻轉(zhuǎn)課堂教學(xué)活動設(shè)計

課中翻轉(zhuǎn)課堂上學(xué)生的學(xué)習(xí)行為是一個知識內(nèi)化過程，以網(wǎng)站項目為載體，將學(xué)習(xí)者需要掌握的知識點重新課上課下進行整合。教師在教學(xué)活動開始之前通過查看SPOC平臺的數(shù)據(jù)和紀錄，了解學(xué)生自學(xué)探究過程中的學(xué)習(xí)情況及遇到的共性問題。在課堂上首先就共性問題開展討論式學(xué)習(xí)，教師在解決問題的過程中不斷刺激學(xué)生回憶課前自學(xué)的內(nèi)容，梳理相關(guān)知識點，從而獲得解決問題的方法。通過課堂提問的方式與學(xué)生互動交流，對重難點知識進行詳細講解。在這過程中教師要發(fā)揮主導(dǎo)作用，根據(jù)學(xué)生的特點進行個性化指導(dǎo)、引導(dǎo)并幫助學(xué)生改進學(xué)習(xí)策略。再完成了問題探究，理解了相關(guān)的基礎(chǔ)知識后，引入項目，開展基于工作過程的教學(xué)設(shè)計，小組探究對項目進行任務(wù)分解，實施任務(wù)，共同完成項目的開發(fā)，教師在此階段要注意學(xué)生實踐能力的培養(yǎng)，通過“做中學(xué)”將已掌握的知識內(nèi)化應(yīng)用到實際項目中，加深學(xué)生對相關(guān)知識點的理解和遷移，進一步調(diào)動起學(xué)生自我學(xué)習(xí)、自我探索的能力。最后，教師根據(jù)學(xué)習(xí)者在學(xué)習(xí)過程中的表現(xiàn)對其進行以激勵為主的個性化評價。

3.3 課后SPOC平臺的教學(xué)活動設(shè)計

課后SPOC平臺的教學(xué)活動包括學(xué)生課后完成課堂上教師布置的拓展練習(xí)任務(wù)，拓展練習(xí)任務(wù)是課堂任務(wù)的延伸，主要采用小組獨立完成，完成后將作品分享到SPOC平臺，由學(xué)生和老師一起點評，同時我們還配以技能大賽、綜合實訓(xùn)、課程設(shè)計、前端面試題等多種形式去提升學(xué)生實踐技能。

3.4 多元化評價

采用全過程考核評價方式，以學(xué)習(xí)者為中心開展多元化評價，包括課前SPOC平臺的在線視頻觀看得分、在線測試得分、作業(yè)得分、訪問得分、互動得分、任務(wù)點完成得分，這部分成績可以通過平臺后臺數(shù)據(jù)分析統(tǒng)計得到，教師通過對這些數(shù)據(jù)的挖掘能夠加深對學(xué)生學(xué)習(xí)狀態(tài)的了解，及時給學(xué)生出謀劃策，改善其學(xué)習(xí)策略，從而實現(xiàn)個性化學(xué)習(xí);課中的任務(wù)完成情況得分（通過教師評價和自我評價完成）、課堂的表現(xiàn)得分（包括出勤情況和解答問題情況）;課后的任務(wù)拓展練習(xí)得分。通過對課前、課堂、課后成績的對比分析確定每個模塊的考核權(quán)重，確定課程評價辦法為：課前成績（20%）+課堂成績（30%）+課后成績（10%）+期末課程設(shè)計成績（40%）。

4 效果分析

SPOC環(huán)境下WEB標(biāo)準(zhǔn)網(wǎng)站設(shè)計課程翻轉(zhuǎn)課堂教學(xué)模式從構(gòu)建、應(yīng)用到不斷完善，已經(jīng)開展了 3個學(xué)期。 總體效果尚可，學(xué)生能夠按照課程要求及時完成SPOC平臺的在線學(xué)習(xí)內(nèi)容和在線測試，參與線上討論，其自學(xué)能力、自覺性得到很大的提升，通過反復(fù)觀看視頻，加深對知識點的理解，課堂上能夠靈活地運用知識點去解決實際應(yīng)用中的問題 。

4.1 學(xué)習(xí)滿意度和總體評價

由于課下學(xué)生通過自學(xué)對每個任務(wù)的知識點有了一定的掌握，大大減少了教師課堂上對知識點的講解時間，縮短了課程的總學(xué)時，總學(xué)時由改革前的120課時減到90課時。在課程結(jié)束后我們通過問卷調(diào)查了解學(xué)習(xí)者對課程的總體評價及對該教學(xué)模式的滿意度，在滿意度調(diào)查中，95%的學(xué)習(xí)者認為課前視頻學(xué)習(xí)有效地提升了課堂項目實戰(zhàn)能力，94%的學(xué)習(xí)者認為在線測試加強了對理論知識的認知，61%的學(xué)習(xí)者表明會經(jīng)常反復(fù)觀看微視頻進行學(xué)習(xí)，70%的學(xué)習(xí)者認為課前的學(xué)習(xí)激發(fā)了他們對該課程的學(xué)習(xí)興趣，80%的學(xué)習(xí)者認為課前學(xué)習(xí)、課后練習(xí)提高了他們的自主學(xué)習(xí)能力，也有30%的學(xué)習(xí)者認為課前學(xué)習(xí)難度大，很難堅持。

在課程的總體評價中，90% 的學(xué)習(xí)者認可這種“SPOC+翻轉(zhuǎn)課堂的教學(xué)模式”，學(xué)習(xí)者平均每周在該課程的學(xué)習(xí)時間要比傳統(tǒng)教學(xué)模式課程多6～8小時，不僅完成了課程本身的項目訓(xùn)練，同時還參加了“互聯(lián)網(wǎng)+”創(chuàng)業(yè)創(chuàng)新比賽，提升了學(xué)生的創(chuàng)新能力[4]。這種強壓式的學(xué)習(xí)任務(wù)占據(jù)了學(xué)習(xí)者大量的課外娛樂時間，教師的督學(xué)、學(xué)習(xí)者之間相互督促、交流不經(jīng)意間促使其養(yǎng)成自主學(xué)習(xí)習(xí)慣，團隊合作意識。最后的前端開發(fā)崗位工程師面試題讓學(xué)生者對這個崗位有了更深刻的認識，為后面的知識積累打下鋪墊。

4.2 存在的問題及改進

通過調(diào)查反饋，學(xué)習(xí)者對微視頻的評價存在“視頻中微案例選擇合理，教學(xué)內(nèi)容豐富，容易掌握，但是部分關(guān)鍵知識點比較晦澀難懂，通過觀看視頻講解不是很容易理解，視頻設(shè)計的不夠美觀、生動、不能激發(fā)學(xué)習(xí)的積極性”等客觀評價。這主要是因為目前在線視頻是錄屏的，動畫特效少，且在線學(xué)習(xí)要靠自學(xué)，沒有師生面對面的交流過程，比較枯燥，在遇到問題時在線交流時如果沒有找到解決的方法，很容易學(xué)不下去，失去學(xué)習(xí)的興趣。在后續(xù)改革中，我們針對每個任務(wù)的關(guān)鍵知識重新設(shè)計了短小精湛的案例，采用案例驅(qū)動錄制5～10分鐘的教學(xué)視頻，對于晦澀難懂的知識點精心設(shè)計了優(yōu)美的教學(xué)動畫嵌入到視頻教學(xué)內(nèi)容中，同時將視頻中的圖標(biāo)、問題等都設(shè)計成交互性，同時從不同的方式和角度，設(shè)計貫穿教學(xué)全程的靈活、實用的交互活動，進一步激發(fā)學(xué)習(xí)者的學(xué)習(xí)動機。

5 結(jié)束語

新信息技術(shù)下“SPOC+翻轉(zhuǎn)課堂”的教學(xué)模式，顛覆式創(chuàng)新了傳統(tǒng)教學(xué)模式，重構(gòu)了學(xué)習(xí)過程，實現(xiàn)了以學(xué)生群組自學(xué)為主，教師提供個性化教學(xué)輔導(dǎo)[5]。群組學(xué)習(xí)能夠互相學(xué)習(xí)、教學(xué)相長，同時對教師的團隊也提出了更高要求。教師不僅需要在專業(yè)技能上達到“高標(biāo)準(zhǔn)”，能嫻熟駕馭各種課程主題、討論內(nèi)容，而且要具有信息化課程建設(shè)能力，能夠利用信息化技術(shù)為個性化學(xué)習(xí)的開展設(shè)計更加精細的課程內(nèi)容和學(xué)習(xí)活動[6]， 提供多樣化、分層化的教學(xué)指導(dǎo)，真是實現(xiàn)個性化學(xué)習(xí)。

參考文獻：

[1] 王歡.基于SPOC的“大學(xué)計算機”課程分級教學(xué)改革實踐[J].中國管理信息化，2016（3）： 253-256.

[2] 王海霞.基于翻轉(zhuǎn)課堂的項目式教學(xué)模式研究與實踐[J].電腦知識與技術(shù)，2017（8）：134-136.

[3] 王朋嬌，段婷婷，蔡宇南，等.基于SPOC的翻轉(zhuǎn)課堂教學(xué)設(shè)計模式在開放大學(xué)中的應(yīng)用研究[J].中國電化教育，2015（12）：79-86.

[4] 葉安勝，周曉清，鄢濤.基于SPOC的“C綜合項目實戰(zhàn)”教學(xué)模式探索與實踐[J].實驗室研究與探索，2016（6）：198-203.

[5]卜紅艷.翻轉(zhuǎn)課堂模式在大學(xué)語文教學(xué)中的應(yīng)用——以《俄狄浦斯王》為例[J].蘭州教育學(xué)院學(xué)報，2015（8）： 100-102.

[6] 特里·安德森，王志軍.希望/冒險：大規(guī)模開放網(wǎng)絡(luò)課程（MOOCs）與開放遠程教育[J].中國電化教育，2014（1）：46-51.

【通聯(lián)編輯：王力】