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

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

引言

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

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

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

1 SPOC方式引入

SPOC是將MOOC的一些教學資源比如學習資料、微視頻、測驗、自動評分、站內論壇等功能應用到比較小規模的實體校園的一種新型教育教學模式，它將優質的MOOC課程資源與課堂教學有機地融合起來，這樣既優化課程教學的流程和教學的結構，從而提升教學質量和教學的效果，又能實現對教學重構和創新。

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

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

2 實踐教學模式

實踐教學除了可以鞏固理論，加深對理論知識的理解和認識之外，還是培養具有理論聯系實際、動手能力強、創新意識高的工程技術人才的一個重要環節。對于Web UI設計（HTML5）課程，還可以將一些優秀項目案例補充到教學中，使實踐教學與項目案例相融合。

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

教學采用案例驅動的方法，案例可以通過書籍資源、網絡甚至與一些相關企業合作來獲取。課堂教學以學生實踐為主。教師更多的是充當技術支持的角色，課上或課下幫助學生解決bug。

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

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

3.1 SPOC+實踐教學模式的使用

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

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

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

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

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

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

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

3.3 實際應用案例與先進開發框架的補充

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

4 總結

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