白麗瑞 張翠英 李敬輝

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

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

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

文章編號(hào)：1009-3044（2020）01-0088-02

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

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

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

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

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

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

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

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

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

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

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

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

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

4.1授課內(nèi)容

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

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

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

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

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

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

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

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

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

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

4.2授課方式

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

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

4.3過(guò)程示例展示

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

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

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

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

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

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

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

4.4評(píng)價(jià)方式

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

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

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

5總結(jié)

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