基于獨立學(xué)院SPOC的實踐教學(xué)改革研究
——以《Web UI設(shè)計（HTML5）》課程為例

白麗瑞 天津大學(xué)仁愛學(xué)院 宋琛 思問科技（天津）有限公司

引言

對于Web的開發(fā)主要分為前端和后端兩部分，后端的開發(fā)包括邏輯處理、數(shù)據(jù)庫連接以及服務(wù)器層面的處理等，而前端則主要包括與用戶直接接觸的網(wǎng)頁（包括頁面的樣式、交互、特效等）。前端開發(fā)的主要職責(zé)是用HTML來制作頁面，用CSS進(jìn)行樣式和布局的設(shè)計，用JavaScript腳本語言來實現(xiàn)頁面上的互動邏輯。

HTML5作為眾多前端技術(shù)中的新一代Web開發(fā)技術(shù)，已經(jīng)有越來越多的開發(fā)者關(guān)注和使用。HTML5使Web開發(fā)標(biāo)準(zhǔn)產(chǎn)生了質(zhì)的飛躍，使原來比較死板并且保守的Web應(yīng)用變得功能更加強(qiáng)大，形式更加絢麗多彩。HTML5提供了功能非常豐富的標(biāo)簽，可以更好地實現(xiàn)Web應(yīng)用多元化的目標(biāo)，開發(fā)人員也可以更加輕松地在實現(xiàn)在網(wǎng)頁中嵌入視頻、音頻，輸入信息自動驗證、圖形漸變以及動畫效果等。它的可用性和移植性也表現(xiàn)更好，并且可以實現(xiàn)跨平臺，所以程序開發(fā)更方便，用戶體驗也更好，除此之外，HTML5更適用于移動應(yīng)用和手機(jī)游戲研發(fā)，這也是移動互聯(lián)網(wǎng)的發(fā)展趨勢。

我校開設(shè)Web UI設(shè)計（HTML5）課程，作為計算機(jī)系專業(yè)選修課。主要用于講授如何使用HTML5技術(shù)對Web用戶界面進(jìn)行設(shè)計與開發(fā)。課程通過對HTML5新語法結(jié)構(gòu)、頁面架構(gòu)和新的表單、多媒體、元素拖拽、圖像、動畫、數(shù)據(jù)存儲、離線應(yīng)用以及常用API的簡要介紹，又增加一部分CSS3和JavaScript基礎(chǔ)知識的內(nèi)容，希望使學(xué)生能夠?qū)eb前端開發(fā)技術(shù)能更好的理解、掌握和運用。

1 SPOC方式引入

SPOC是將MOOC的一些教學(xué)資源比如學(xué)習(xí)資料、微視頻、測驗、自動評分、站內(nèi)論壇等功能應(yīng)用到比較小規(guī)模的實體校園的一種新型教育教學(xué)模式，它將優(yōu)質(zhì)的MOOC課程資源與課堂教學(xué)有機(jī)地融合起來，這樣既優(yōu)化課程教學(xué)的流程和教學(xué)的結(jié)構(gòu)，從而提升教學(xué)質(zhì)量和教學(xué)的效果，又能實現(xiàn)對教學(xué)重構(gòu)和創(chuàng)新。

國內(nèi)外有一些學(xué)校也在做課程SPOC實驗，比如已有一些研究將SPOC應(yīng)用于虛擬現(xiàn)實技術(shù)試驗，VB程序設(shè)計，C語言程序設(shè)計等課程的教學(xué)改革中。但是對于作為我校特色的Web UI設(shè)計（HTML5）課程，因為相對開設(shè)的學(xué)校比較少，因此使用SPOC進(jìn)行教學(xué)改革的就更少。

從事Web前端開發(fā)是計算機(jī)專業(yè)學(xué)生畢業(yè)后一個很重要的就業(yè)方向，如果在學(xué)校教授的內(nèi)容能夠緊跟企業(yè)的需求和行業(yè)的發(fā)展標(biāo)準(zhǔn)，那么一方面可以提高學(xué)生的積極性和學(xué)習(xí)興趣，另一方面也可以為企業(yè)、為社會輸出更合適、更有用的人才。Web UI設(shè)計（HTML5）課程本身就是針對當(dāng)前的形勢開設(shè)的，并且目的就是為了應(yīng)用，因此教學(xué)方式應(yīng)當(dāng)更偏重實踐。該課程使用SPOC的方式，教師將教學(xué)內(nèi)容分成多個知識點，每個知識點錄制成一段視頻，或者某些小案例開發(fā)過程也錄成視頻，課前讓學(xué)生學(xué)習(xí)，課上的時間布置課堂練習(xí)及作業(yè)，學(xué)生們上機(jī)實際操作，遇到問題及時引導(dǎo)和幫助。

2 實踐教學(xué)模式

實踐教學(xué)除了可以鞏固理論，加深對理論知識的理解和認(rèn)識之外，還是培養(yǎng)具有理論聯(lián)系實際、動手能力強(qiáng)、創(chuàng)新意識高的工程技術(shù)人才的一個重要環(huán)節(jié)。對于Web UI設(shè)計（HTML5）課程，還可以將一些優(yōu)秀項目案例補充到教學(xué)中，使實踐教學(xué)與項目案例相融合。

因為Web UI設(shè)計（HTML5）課程開設(shè)初衷更側(cè)重學(xué)生的實際動手操作能力，而非理論本身，因此使用傳統(tǒng)的教學(xué)方式已難以很好的滿足教學(xué)預(yù)期，希望有一些新的教學(xué)方式和方法的補充，從而最終提高教學(xué)質(zhì)量和效果。Web UI設(shè)計（HTML5）課程面向的主要工作崗位是Web 前端開發(fā)，因此在學(xué)習(xí)中實踐部分要加大，案例引用要增加是必然要考慮的問題。但是如果純實踐操作的話，又容易漏掉很多知識點，畢竟課程有時間限制，不能面面俱到，因此還考慮引入SPOC模式，來對實際操作之外的知識進(jìn)行補充。

教學(xué)采用案例驅(qū)動的方法，案例可以通過書籍資源、網(wǎng)絡(luò)甚至與一些相關(guān)企業(yè)合作來獲取。課堂教學(xué)以學(xué)生實踐為主。教師更多的是充當(dāng)技術(shù)支持的角色，課上或課下幫助學(xué)生解決bug。

根據(jù)Web UI設(shè)計（HTML5）課程內(nèi)容，將案例教學(xué)法運用到以下幾個專題中得到如圖1所示知識講授圖。

3 基于獨立學(xué)院SPOC的實踐教學(xué)改革探索

3.1 SPOC+實踐教學(xué)模式的使用

SPOC課程開設(shè)主要有兩種方式：一種是直接復(fù)制已有資源，通過高校之間的相互協(xié)作，實現(xiàn)教學(xué)視頻等資源的共享；另一種就是根據(jù)教學(xué)內(nèi)容和學(xué)生的具體情況整合各高校的相關(guān)MOOC資源、選用的教材，以及結(jié)合教師自身的項目經(jīng)驗等，來建立自己的課程資源庫。針對實際情況，我們選用第二種方式，因為授課學(xué)時、面向群體和授課條件的不同，自建課程資源庫將更有針對性，更具實用性。但是此種方式對教師也提出了更高的要求，并且勢必花費更大的精力，來需要參考和學(xué)習(xí)大量的MOOC視頻，網(wǎng)絡(luò)資源，企業(yè)項目案例等。多位教師可以打破課程限制結(jié)成課程組，相互協(xié)作，相互學(xué)習(xí)，多討論交流，最終形成適用性更高的整套學(xué)習(xí)視頻等教學(xué)資料。

3.2 輔助教學(xué)工具的使用（雨課堂、FSCapture、XMind 8等）

課程教學(xué)中充分利用一些輔助教學(xué)工具，更能提高學(xué)生學(xué)習(xí)的興趣、積極性、自主學(xué)習(xí)和創(chuàng)新能力。

雨課堂是一款主要通過在PowerPoint上加載插件的方法并且實現(xiàn)與微信關(guān)聯(lián)，，可以將帶有MOOC視頻、語音課件、習(xí)題等直接推送到學(xué)生手機(jī)端，并且可以實現(xiàn)課堂上實時答題、彈幕互動等等功能的軟件。課堂派功能與雨課堂相似，這兩種軟件是當(dāng)前創(chuàng)新教學(xué)方式中使用最多的。本課程選擇使用“雨課堂”與“課堂派”結(jié)合的方式，課件中加入視頻、語音，甚至隨堂測試選用“雨課堂（”因為本人感覺“雨課堂”線下使用更方便）、其他常用的功能比如簡便快捷的考勤簽到，測試、彈幕，互動、話題、公告、資料和作業(yè)的推送及批改等功能選用“課堂派”來完成（因為這類功能很多要求學(xué)生課上使用手機(jī)端來操作，因此使用“課堂派”更為方便，并且我校其他課程選用也較多）。

FSCapture是一款抓屏工具，體積小巧、功能強(qiáng)大。本課程用的最多的是它錄制視頻的功能，該軟件錄制視頻分辨率、音量等都可以自主設(shè)置，還能對視頻進(jìn)行剪輯（補充視頻對應(yīng)的文字說明，裁剪不必要內(nèi)容等），而且錄制后無水印。

XMind是一款非常實用的商業(yè)思維導(dǎo)圖軟件，它易用、高效的特點非常明顯。本課程主要將該軟件用于對課程知識體系脈絡(luò)的梳理和整合，使知識以更有序并且結(jié)構(gòu)的方式組織和呈現(xiàn)，也可以使學(xué)生更清晰形象的了解各知識點之間的關(guān)系和層次。教師還將該軟件推薦給學(xué)生，希望學(xué)生在分析問題時用于對思路、靈感的記錄以及對知識的學(xué)習(xí)和記憶。

UMU是一款相對雨課堂用途更廣泛的軟件，功能也近似，但是在做微課、短視頻、教學(xué)直播等方面更方便。該課程主要用其來對課程作業(yè)進(jìn)行講解視頻的錄制，錄制完成后，生成二維碼發(fā)送給學(xué)生，學(xué)生掃描就可以查看作業(yè)講解視頻等資源。

3.3 實際應(yīng)用案例與先進(jìn)開發(fā)框架的補充

此部分在本文實踐教學(xué)模式部分給出了一部分說明。Web UI設(shè)計（HTML5）課程中的應(yīng)用案例除了從教材和網(wǎng)絡(luò)上搜索一部分外，教師還實地去一些企業(yè)學(xué)習(xí)交流，獲取了一些企業(yè)實際項目案例。通過對案例的加工處理，提取可以應(yīng)用到課堂實踐教學(xué)中的資源，它們一部分可以作為某些知識點的應(yīng)用，一部分可以作為課堂練習(xí)作業(yè)。此外，結(jié)合我系一些教師的工作經(jīng)歷，簡單介紹國外Web前端工作模式，以及一些框架技術(shù)的使用，比如React+ Redux，Gtm等。

4 總結(jié)

Web UI設(shè)計（HTML5）課程是一門偏向就業(yè)的很重要的專業(yè)課程，也是我校比較有特色的課程之一，希望使用SPOC方式，以及實踐教學(xué)等方法，進(jìn)行課程教學(xué)，改變傳統(tǒng)的課堂教學(xué)模式，從而使課程教學(xué)更高效率，更有效果，更貼近以后實際工作，并且潛移默化中提高學(xué)生的自主學(xué)習(xí)能力、團(tuán)隊協(xié)作能力和創(chuàng)新能力。