白麗瑞 張翠英 李敬輝

摘要：當(dāng)前Web前端工程師高級人才依然緊缺，但是高校Web前端相關(guān)課程對學(xué)生的開發(fā)技能提升效果一直不是很理想，針對這一狀況，我校特別開設(shè)了“WebuI設(shè)計（HTML5）”課程，并積極探索教學(xué)改革方式，將學(xué)校和企業(yè)所授知識相融合，進(jìn)一步增加實踐教學(xué)比例和難度，并且混合使用了多種教學(xué)方法，比如MOOC與項目案例實踐相結(jié)合，以期為獨立學(xué)院計算機(jī)專業(yè)教學(xué)提供新的思路和模式。

關(guān)鍵詞：SPOC;Web uI設(shè)計;HTML5;教學(xué)改革

中圖分類號：TP391 文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2020）01-0088-02

1Web前端及課程現(xiàn)狀

目前，HTML5+CSS3技術(shù)已經(jīng)成了計算機(jī)行業(yè)Web前端網(wǎng)頁設(shè)計的主流技術(shù)。據(jù)調(diào)查可知目前國內(nèi)的軟件開發(fā)人才存在數(shù)量和結(jié)構(gòu)上的雙重缺口，尤其是關(guān)于前端開發(fā)行業(yè)，近五年內(nèi)被各大企業(yè)推上計算機(jī)專業(yè)人才就業(yè)的熱潮尖端。但是，一方面，企業(yè)一般不愿意在培訓(xùn)技能人才上花費太多人力、物力;另一方面，當(dāng)前開設(shè)Web uI設(shè)計（HTML5）課程的高校還非常少，學(xué)校教授知識相對滯后，因此，當(dāng)前擁有熟練前端技能的創(chuàng)新人才非常短缺。

Web前端開發(fā)的主要工作是把uI（用戶界面）的設(shè)計圖按照W3C標(biāo)準(zhǔn)做成HTML頁面，用CSS進(jìn)行布局，并且用JavaScfipt腳本語言實現(xiàn)頁面上的前端互動。HTML5技術(shù)的簡易性、可拓展性、平臺無關(guān)性等特點使其備受移動應(yīng)用開發(fā)商與移動應(yīng)用開發(fā)程序員的熱愛和追捧。HTML5技術(shù)能夠使用主流瀏覽器原生支持視頻、音頻、動畫與圖片等元素的交互，并具有跨平臺特性，不需要安裝插件，也提高了安全性和穩(wěn)定性。

Web uI設(shè)計（HTML5）課程是計算機(jī)系專業(yè)選修課，主要講授使用HTML5技術(shù)進(jìn)行Web前端的用戶界面設(shè)計與開發(fā)。通過對HTML5全新語法和頁面架構(gòu)、表單、多媒體、圖像及動畫、元素拖拽、數(shù)據(jù)存儲及幾個常用API的介紹，再加上部分CSS3與JavaScript基礎(chǔ)知識的學(xué)習(xí)，希望能夠提高學(xué)生掌握和運用網(wǎng)頁前端設(shè)計和開發(fā)的能力。

2MooC思想及“課堂派”引入

慕課，（大規(guī)模開放在線課程，是以在線網(wǎng)絡(luò)課程為基礎(chǔ)，吸納不同領(lǐng)域的學(xué)習(xí)者參與一個共同的學(xué)習(xí)社區(qū)，通過網(wǎng)絡(luò)實現(xiàn)在不同時空的知識建構(gòu)傳統(tǒng)的方式是通過架設(shè)好的平臺，公眾可以觀看國內(nèi)外高水平的課程內(nèi)容，這樣學(xué)習(xí)者便可以通過網(wǎng)絡(luò)就能學(xué)習(xí)到最頂尖的課程和知識。但是大多數(shù)“慕課”內(nèi)容都是偏理論化的，對于教授更側(cè)重技術(shù)和實踐能力的Web前端課程而言，可能直接照搬，優(yōu)勢不能完全體現(xiàn)出來，因此考慮一部分基礎(chǔ)理論知識用MOOC上現(xiàn)有的資源，另一部分視頻教師與企業(yè)工程師來自行錄制。自己錄制部分，暫時只考慮校內(nèi)授課使用，一般針對選課的學(xué)生，因此只需要將視頻發(fā)布給選課學(xué)生即可，但是直接發(fā)送信息不方便隨時下載學(xué)習(xí)，自己搭建平臺，開發(fā)和維護(hù)代價又比較大，因此選用現(xiàn)有的輔助教學(xué)網(wǎng)站“課堂派”作為工具。

“課堂派”允許將選課學(xué)生建立班級群、課程群，之后課程相關(guān)的視頻、試題、作業(yè)等資源都通過班級推送給學(xué)生端。學(xué)生在手機(jī)端就可以方便地學(xué)習(xí)、測試、提交作業(yè)等。教師也可以更方便地通過“課堂派”記錄學(xué)生考勤、備課、發(fā)布公告、線上批改作業(yè)等。

3校企合作與案例實踐教學(xué)模式

Web uI設(shè)計（HTML5）課程本身就是針對當(dāng)前的形勢開設(shè)的，并且目的就是為了應(yīng)用，因此教學(xué)方式應(yīng)當(dāng)更偏重實踐。并且提高學(xué)生編寫程序的能力是開展程序設(shè)計實踐課程的目的，也是開設(shè)程序設(shè)計實踐課程最根本的宗旨嘲。但是教師自身一方面實踐經(jīng)驗偏少，另一方面對行業(yè)前沿技術(shù)掌握滯后，由于教師角色決定的局限性，因此如果要切實提高學(xué)生的開發(fā)能力，必然要借助企業(yè)的力量，因此校企合作是必然的選擇。具體合作方案如下：

與一些擅長Web前端開發(fā)的企業(yè)合作，教師深入企業(yè)，分析總結(jié)當(dāng)前市場普遍前端需求，觀摩，實地考察企業(yè)工作和實訓(xùn)方式，提取、借鑒一些教學(xué)可用方法，提升教師自身能力。

可從企業(yè)項目案例中總結(jié)、整理一些網(wǎng)站前端網(wǎng)頁以及小游戲、微信開發(fā)等更貼近實際、更接近當(dāng)前前端開發(fā)市場、甚至企業(yè)的實際項目作為課程教學(xué)資源，從而增加案例獲取渠道。

采用項目案例驅(qū)動的教學(xué)方法，課堂教學(xué)以完成項目實踐為主要目的，其間穿插一些基礎(chǔ)知識的講解，當(dāng)然這些知識需要將課本知識融合之后重新整合，重新編排，按照“開發(fā)過程中用到什么，再學(xué)什么”的思路進(jìn)行課程資源和進(jìn)度的安排。一部分教學(xué)視頻錄制邀請與學(xué)校合作的有經(jīng)驗的企業(yè)工程師來完成，更能提高學(xué)生的學(xué)習(xí)興趣。學(xué)生課上在開發(fā)過程中遇到解決不了的bug，可以請企業(yè)經(jīng)驗豐富的工程師來遠(yuǎn)程協(xié)助。

4結(jié)合MooC與案例實踐的Web UI設(shè)計（HTML5）課程的知識結(jié)構(gòu)

4.1授課內(nèi)容

案例教學(xué)法融入Web uI設(shè)計（HTML5）課程教學(xué)內(nèi)容中，將HTML5的每個特點或技術(shù)劃分為一個章節(jié)，并且用一兩個案例來重點闡述，之后布置作業(yè)練習(xí)，鞏固知識點，主要內(nèi)容如下安排：

1）知識點：HTML5語法及頁面架構(gòu)，案例：基礎(chǔ)頁面設(shè)計，作業(yè)練習(xí)：練習(xí)導(dǎo)航、頁面布局等基本頁面元素;

2）知識點：HTML5表單，案例：設(shè)計注冊頁面，作業(yè)練習(xí)：練習(xí)個人簡歷頁面;

3）知識點：HTML5多媒體，案例：視頻播放器制作，作業(yè)練習(xí)：制作音頻播放器;

4）知識點：HTML5圖像及動畫，案例：超級瑪麗動畫，繪制時鐘，作業(yè)練習(xí)：繪制組合圖形，小動畫游戲制作;

5）知識點：HTML5元素拖拽，案例：拖拽點餐頁面，作業(yè)練習(xí)：照片分組排序頁面;

6）知識點：HTML5數(shù)據(jù)存儲，案例：注冊與登錄數(shù)據(jù)庫設(shè)計，作業(yè)練習(xí)：學(xué)生信息管理頁面;

7）知識點：HTML5地理位置應(yīng)用，案例：在地圖中定位，作業(yè)練習(xí)：與同學(xué)共享位置信息;

8）知識點：CSS基礎(chǔ)，案例：購物頁面樣式實現(xiàn)，作業(yè)練習(xí)：基本新聞頁面樣式設(shè)計。

除此之外，JavaScript基本使用方法也應(yīng)該做簡略講解;一些當(dāng)前企業(yè)常用框架技術(shù)（比如React+Redux，Gtm）的使用也應(yīng)該做一些展示等。

4.2授課方式

視頻可以分兩類，一類主要講基礎(chǔ)知識點、語法等偏理論的知識;另一類是講知識點使用的實際操作過程（即用法）。視頻可以通過“課堂派”課前就發(fā)給學(xué)生學(xué)習(xí)，一上課先做關(guān)于視頻內(nèi)容的幾個簡單測試題目，測試學(xué)生的課前對本章節(jié)內(nèi)容的自學(xué)情況，之后教師針對錯誤較多的題目涉及的內(nèi)容進(jìn)行簡單講解。

教師先展示本堂課要完成的項目成品效果，然后一步步演示案例編寫過程，學(xué)生跟著一同操作，邊編寫代碼，邊講解，用到什么，再解釋講授什么，這樣，學(xué)生聽課的目的性更明確，針對性也更強(qiáng)，案例中用到哪些新的知識點只做主要原理及使用方法的說明，其他注意事項及使用細(xì)節(jié)等問題，通過提前錄制的視頻讓學(xué)生自己學(xué)習(xí)。做完一個案例，做簡要總結(jié)。然后布置與案例難度近似的練習(xí)作業(yè)，讓學(xué)生分組完成，可以討論，可以查閱相關(guān)資料，如果有必要，也可以尋求教師指導(dǎo)或企業(yè)工程師網(wǎng)絡(luò)遠(yuǎn)程協(xié)助。作業(yè)完成后提交到“課堂派”。其間要注重對學(xué)生自己分析問題、解決問題、自主學(xué)習(xí)、溝通交流和團(tuán)隊協(xié)作的能力。

4.3過程示例展示

以HTML5數(shù)據(jù)存儲知識授課為例，過程如下：

提前錄制視頻一用于講解Web storage與cookie的區(qū)別，Web storage的兩種存儲方式——sessionStorage和localStorage及它們不同的使用場景，包括分別如何保存數(shù)據(jù)、讀取數(shù)據(jù)、清除數(shù)據(jù)等方法，Web SQL數(shù)據(jù)庫如何創(chuàng)建、如何打開一個現(xiàn)有的Web SQL數(shù)據(jù)庫，怎樣建立數(shù)據(jù)表，怎樣插入數(shù)據(jù)、刪除數(shù)據(jù)、更新數(shù)據(jù)以及查詢數(shù)據(jù)的語法定義;

錄制視頻二具體演示以上提到的各個功能如何使用及運行效果。

課上先發(fā)布HTML5數(shù)據(jù)存儲的測試題（比如sessionStorage如何讀取數(shù)據(jù)的選擇題，Web SQL創(chuàng)建數(shù)據(jù)庫時指定數(shù)據(jù)庫名稱參數(shù)位置的填空題等），給幾分鐘時間完成，根據(jù)測試分?jǐn)?shù)，講解得分率偏低的題目。

先向?qū)W生展示即將要做的頁面注冊、登錄功能完成效果，然后從空文檔開始一步步設(shè)計和編寫代碼及從旁解釋說明，直到完成要達(dá)到的預(yù)期效果，其間，用到創(chuàng)建數(shù)據(jù)庫、添加數(shù)據(jù)、查詢數(shù)據(jù)的地方，做簡要提示。

之后布置學(xué)生信息管理頁面制作作業(yè)，讓學(xué)生完成指定效果，可略作改動或增加功能。兩人一組可適當(dāng)討論或分工合作，教師和企業(yè)工程師做指導(dǎo)。

學(xué)生提交作業(yè)，互相評閱給出分?jǐn)?shù)，并選擇一組進(jìn)行答辯。

4.4評價方式

學(xué)生提交作業(yè)后，將信息發(fā)送到各組，各組之間互相學(xué)習(xí)并評分，每次抽取一到兩組進(jìn)行答辯，答辯時簡要說明作業(yè)的設(shè)計實現(xiàn)思路和方法，其他同學(xué)可以直接提出問題或建議，互相督促、共同進(jìn)步。教師只充當(dāng)“催化劑”及“主持人”角色。每次課上練習(xí)作業(yè)完成情況計入總成績。

布置課程設(shè)計綜合大作業(yè)，學(xué)生分組完成，完成之后將運行效果及制作細(xì)節(jié)錄制成答辯視頻，供教師評閱給分。

成績計算方式=課上測試20%+歷次作業(yè)40%+綜合大作業(yè)40%。

5總結(jié)

本文提出了一種將校企合作思路運用到Web uI設(shè)計（HT-ML5）課程教學(xué)，授課過程中將“MOOC”思想與案例實踐教學(xué)模式相結(jié)合，使用了“課堂派”等工具的教學(xué)改革方法，通過在計算機(jī)系的實施，取得了較好的效果。