校企合作創新人才培養教學改革

白麗瑞 張翠英 李敬輝

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

關鍵詞：SPOC;Web uI設計;HTML5;教學改革

中圖分類號：TP391 文獻標識碼：A

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

1Web前端及課程現狀

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

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

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

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

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

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

3校企合作與案例實踐教學模式

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

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

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

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

4結合MooC與案例實踐的Web UI設計（HTML5）課程的知識結構

4.1授課內容

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

1）知識點：HTML5語法及頁面架構，案例：基礎頁面設計，作業練習：練習導航、頁面布局等基本頁面元素;

2）知識點：HTML5表單，案例：設計注冊頁面，作業練習：練習個人簡歷頁面;

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

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

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

6）知識點：HTML5數據存儲，案例：注冊與登錄數據庫設計，作業練習：學生信息管理頁面;

7）知識點：HTML5地理位置應用，案例：在地圖中定位，作業練習：與同學共享位置信息;

8）知識點：CSS基礎，案例：購物頁面樣式實現，作業練習：基本新聞頁面樣式設計。

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

4.2授課方式

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

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

4.3過程示例展示

以HTML5數據存儲知識授課為例，過程如下：

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

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

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

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

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

學生提交作業，互相評閱給出分數，并選擇一組進行答辯。

4.4評價方式

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

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

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

5總結

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