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

引言

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

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

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

1 SPOC方式引入

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

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

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

2 實(shí)踐教學(xué)模式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4 總結(jié)

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