陳霞，吳東

（嶺南師范學院信息工程學院，湛江 524048）

基于就業(yè)導向的HTML5前端開發(fā)課程教學改革實踐

陳霞，吳東

（嶺南師范學院信息工程學院，湛江 524048）

目前就業(yè)市場對Web前端開發(fā)工程師需求旺盛，但地方高校計算機專業(yè)開設(shè)的與此崗位需求相關(guān)的課程教學內(nèi)容設(shè)置不合理，教學模式與企業(yè)需求不匹配，導致一方面是計算機專業(yè)畢業(yè)生就業(yè)不理想，而另一方面企業(yè)無法招聘到適合前端開發(fā)崗位需求的畢業(yè)生。為此，基于CDIO工程教育模式理念提出進行課程就業(yè)導向定位、精化教學內(nèi)容，實施項目驅(qū)動的教學，對學生的課程學習實行多元評價的教學改革，在教學實踐中構(gòu)建校企雙師共育模式，大幅提升學生的綜合工程實踐能力和就業(yè)競爭力。

前端開發(fā)；就業(yè)導向；CDIO；教學改革

0 引言

2005年以后，互聯(lián)網(wǎng)進入Web 2.0時代，網(wǎng)站的前端發(fā)生了翻天覆地的變化，前端開發(fā)成為一個熱門行業(yè)，市場需求旺盛。然而，在地方高校計算機專業(yè)教學中，系統(tǒng)針對前端開發(fā)崗位需求開設(shè)的課程不多。絕大部分的普通高校計算機專業(yè)仍以學術(shù)型人才培養(yǎng)為主，真正實現(xiàn)應(yīng)用型人才培養(yǎng)的高校很少，導致大量計算機專業(yè)畢業(yè)生就業(yè)難、就業(yè)崗位對口率低、平均工資水平不高，而大量的IT企業(yè)卻招不到符合崗位需求的計算機專業(yè)人才[1-2]。

前端開發(fā)作為一個新行業(yè)，涉及廣泛的知識體系結(jié)構(gòu)，相關(guān)技術(shù)理論知識不斷發(fā)展更新，市場應(yīng)用發(fā)展迅速，加之區(qū)域發(fā)展特色不同，各個高校中與前端開發(fā)相關(guān)的課程開設(shè)參差不齊，還存在以下的一些問題：

（1）課程教學內(nèi)容設(shè)置不合理，知識結(jié)構(gòu)零碎，缺乏系統(tǒng)性。

在當前計算機專業(yè)本科生教學體系中，系統(tǒng)針對前端開發(fā)的課程不多，優(yōu)秀的教材、教學資源相對較少，一些人簡單籠統(tǒng)地將網(wǎng)頁設(shè)計、網(wǎng)站開發(fā)、平面設(shè)計、動畫設(shè)計類課程等同于前端開發(fā)，實際上，前端開發(fā)涉及綜合技術(shù)的應(yīng)用，涵蓋了更多的內(nèi)容。在以往的教學中，與前端開發(fā)直接緊密相關(guān)的網(wǎng)頁設(shè)計、平面設(shè)計、網(wǎng)站開發(fā)等課程通?；谒娂此玫腎DE集成環(huán)境進行教學。IDE集成環(huán)境入門簡單、容易實現(xiàn)網(wǎng)頁制作及效果，但在教學中過分依賴IDE集成環(huán)境將導致學生不清楚頁面實現(xiàn)及運行的本質(zhì)。同時，這些課程在教學內(nèi)容，教學方法，教學實踐等方面相對滯后，學生通過這些課程掌握和學習到的前端開發(fā)技術(shù)知識相對零散，沒有形成完備的前端開發(fā)知識體系框架。隨著人們對用戶體驗的要求越來越高，前端開發(fā)的技術(shù)不斷更新，前端開發(fā)的難度越來越大，要把學生培養(yǎng)成為一名優(yōu)秀的前端開發(fā)工程技術(shù)人員，在課程教學的知識體系上不僅要有廣度，還要有深度，前端設(shè)計課程教學需要與時俱進，不斷革新。

（2）課程教學模式與崗位需求有較大差距。

在應(yīng)用型人才培養(yǎng)的浪潮下，一些高校計算機專業(yè)基于市場前端工程師崗位需求設(shè)置了相應(yīng)的課程，但在課程教學中，未將課程內(nèi)容與崗位需求緊密結(jié)合，課堂教學仍然采用以教師講授，學生學習為主的傳統(tǒng)教學模式，教學側(cè)重學生對知識的記憶和重復(fù)應(yīng)用，學生無法真實有效地參與問題的討論，缺乏自主學習能力的培養(yǎng)，學習質(zhì)量不高；在實踐教學環(huán)節(jié)，教學案例過于淺顯，驗證性的實驗項目缺乏與實際需求的有效結(jié)合，學生缺乏創(chuàng)新能力和的工程實踐能力的培養(yǎng)，導致大多數(shù)學生學習完相關(guān)課程后，對相應(yīng)的崗位要求仍無所適從。

針對上述問題，我們在HTML5前端開發(fā)課程教學中，根據(jù)IT行業(yè)前端開發(fā)的特點和市場崗位需求，以CDIO工程教育理念為指導進行課程教學改革實踐，基于就業(yè)導向進行課程定位，精選教學內(nèi)容，改革教學模式及評價機制，實施了以項目驅(qū)動的教學，從傳統(tǒng)的以教師為中心“教給學生知識”轉(zhuǎn)變?yōu)橐詫W生為中心“教會學生學習知識”，在教學中不僅注重讓學生掌握基礎(chǔ)理論知識技術(shù)，更注重對學生工程實踐能力、自學能力、創(chuàng)新能力的培養(yǎng)，使學生成為真正符合市場需求的前端工程技術(shù)人才。

1 以就業(yè)為導進行課程定位和教學內(nèi)容改革

計算機行業(yè)的快速發(fā)展提升了IT就業(yè)市場對求職人員的專業(yè)技術(shù)水平和綜合素質(zhì)的要求。在提升學生就業(yè)率及培養(yǎng)應(yīng)用型計算機人才的背景下，計算機專業(yè)的教學應(yīng)從就業(yè)需求出發(fā)，在要求學生掌握必要的理論知識的基礎(chǔ)上，需要加強實踐教學環(huán)節(jié)以提高學生實踐能力和就業(yè)競爭力[3]。在HTML5前端開發(fā)課程教學中，通過分析市場對前端開發(fā)崗位的職業(yè)技能需求，認清當前的課程教學與企業(yè)用人需求之間的差距，從前端開發(fā)就業(yè)需求出發(fā)，以就業(yè)為導向進行課程定位，基于CDIO理念合理組織、安排、優(yōu)化教學內(nèi)容，在教學中與東軟睿道教育信息技術(shù)有限公司合作，引入企業(yè)實際運行的項目案例進行教學，企業(yè)工程師直接參與課程的實踐教學環(huán)節(jié)，對學生進行校企聯(lián)合培養(yǎng)，針對前端開發(fā)項目在企業(yè)工作環(huán)境下面臨的現(xiàn)實問題，引導學生有效解決問題，有效調(diào)動了學生的學習積極性、主動性，激發(fā)了學生的學習興趣，通過培養(yǎng)學生自主學習、創(chuàng)新實踐的工程技術(shù)能力，使學生掌握的知識技能滿足企業(yè)前端開發(fā)崗位要求，有效提高學生的就業(yè)競爭力。同時，在教學中積極引導學生參與IT科技節(jié)、藍橋杯、ACM比賽等校內(nèi)外的比賽，在比賽中鍛煉學生的工程實踐能力。

在前端項目開發(fā)中涉及基礎(chǔ)理論知識（如：HTTP標準、W3C標準和ECMAScript標準HTML5、CSS3、JavaScript、設(shè)計結(jié)構(gòu)、設(shè)計模式等），類庫及框架（JavaScript、jQuery、jQuery Mobile、Bootstrap、Pure、Se-mantic UI等），編碼開發(fā)環(huán)境、構(gòu)建工具及包管理器（如：Hbuilder、WebStorm、Sublime、Atom、VS Code、Node JS、NPM、Bower、Git、Grunt等），運行環(huán)境（如：瀏覽器兼容性、響應(yīng)式布局、Web安全性、性能優(yōu)化）等廣泛的內(nèi)容，在有限的教學學時內(nèi)，要有效的教授學生學會靈活掌握運用這些知識技能，教學內(nèi)容必須進行精簡和取舍，有所側(cè)重，不能面面俱到。通過分析目前前端項目開發(fā)中采用到的重要核心技術(shù)，結(jié)合學生已有的專業(yè)技能基礎(chǔ)，確定本課程的教學內(nèi)容分為以下3個層次：

（1）前端開發(fā)基礎(chǔ)知識。此部分介紹前端開發(fā)環(huán)境、測試、運行環(huán)境的搭建和配置，重點講授HTML5、CSS3，通過這一部分內(nèi)容的學習，學生掌握前端頁面制作的基礎(chǔ)知識，可實現(xiàn)在前端開發(fā)、測試、運行環(huán)境中完成頁面的編碼、測試、運行，為下一層次內(nèi)容的學習打好基礎(chǔ)。

（2）腳本及類庫框架的學習。此部分重點講授JavaScript、jQuery、jQuery Mobile、Bootstrap框架4個主要內(nèi)容。在這一階段的學習中，學生掌握面向PC及移動端的不同平臺實現(xiàn)前端項目的設(shè)計開發(fā)、測試、運行，掌握響應(yīng)式布局、頁面的性能優(yōu)化實現(xiàn)、瀏覽器兼容性問題的解決機制。

（3）前端開發(fā)應(yīng)用。此部分基于已學的內(nèi)容實現(xiàn)構(gòu)造App和移動網(wǎng)站，這部分內(nèi)容將界面設(shè)計、框架布局、開發(fā)環(huán)境、運行環(huán)境、性能優(yōu)化等內(nèi)容結(jié)合在一起，引導學生開發(fā)出綜合性較強的應(yīng)用系統(tǒng)，培養(yǎng)學生的工程實踐能力和綜合運用知識的能力。

2 改革教學模式，提高學生的就業(yè)競爭力

CDIO分別代表構(gòu)思（Conceive）、設(shè)計（Design）、實現(xiàn)（Implement）和運作（Operate），它以產(chǎn)品研發(fā)到產(chǎn)品運行的生命周期為載體,讓學生以主動的、實踐的、課程之間有機聯(lián)系的方式學習工程。CDIO工程教育理念倡導以綜合的培養(yǎng)方式使學生具備工程基礎(chǔ)知識、個人能力、人際團隊能力和工程系統(tǒng)能力。近年來，基于CDIO理念的項目驅(qū)動教學模式已成為工程教育領(lǐng)域公認的發(fā)展方向，得到了廣泛的應(yīng)用[4-7]。HTML5前端開發(fā)課程在課堂理論教學和實踐教學中，基于CDIO工程教育理念實施項目驅(qū)動的教學。在課堂教學中，引入實際的企業(yè)項目作為教學案例實施教學，在實踐教學環(huán)節(jié)通過任課教師和企業(yè)工程師共同指導學生實施完成項目培養(yǎng)學生的協(xié)作創(chuàng)新、自主學習的能力和綜合的工程實踐能力。

在HTML5前端開發(fā)課程教學中以項目驅(qū)動來實施教學內(nèi)容，通過講解、演示、操作實現(xiàn)一個來自企業(yè)實際運營的項目案例，深入分析講授各個基礎(chǔ)知識點的理論及應(yīng)用，輔以多媒體幻燈片的手段與學生交流、互動，使學生掌握理解基礎(chǔ)知識，靈活運用各種技能。項目依據(jù)CDIO的思想，按照從構(gòu)思、設(shè)計到開發(fā)的工程化過程進行實施，涵蓋課程的各個相關(guān)知識點，通過項目的教學，重點培養(yǎng)學生對基本知識技能的掌握，避免目前一些開發(fā)設(shè)計類課程教學重實踐、輕講授的不足。

在HTML5前端開發(fā)課程實踐教學中實施項目驅(qū)動的教學，旨在利用學生已掌握的知識技能有效解決問題，提高學生的學習積極性、主動性和創(chuàng)新能力。實踐教學中采用“提出問題→分析問題→解決問題涉及到的知識技能→解決問題可采用的方法與工具→項目具體實施→項目的實踐總結(jié)→項目的拓展”的框架進行。實踐教學環(huán)節(jié)的項目也來自企業(yè)實際項目，由企業(yè)工程師和任課教師根據(jù)課程教學的需要和學生實際學習進度進行設(shè)定并指導學生完成。實踐環(huán)節(jié)注重項目過程的管理，學生按照“構(gòu)思－設(shè)計－實施－運行”的步驟完成項目。項目開發(fā)遵循企業(yè)實際的開發(fā)要求，按照企業(yè)工作環(huán)境運作，學生分成不同的項目小組，組內(nèi)設(shè)置組長，小組成員以團隊的方式運用所學知識進行項目開發(fā)；每個小組以實際企業(yè)的團隊管理方式進行管理和考核。實踐教學項目的具體流程實施如下：

（1）明確任務(wù)要求。實踐教學環(huán)節(jié)中首先由指導教師講解項目從提出、立項、需求分析、系統(tǒng)設(shè)計、編碼到測試、驗收、維護過程中所需的規(guī)范化文檔；代碼遵循的統(tǒng)一編碼規(guī)范；團隊需要完成的工作及需要注意的問題。

（2）制定項目任務(wù)書。項目小組針對需要完成的項目進行資料收集、內(nèi)部討論，制定項目任務(wù)書，每個小組分別論述自己的項目分析過程及結(jié)果，由指導教師和其他同學提出意見和建議；各項目小組完善修訂制定項目任務(wù)書后進行項目需求分析，撰寫完成需求說明書。

（3）項目設(shè)計。各個小組每位成員根據(jù)項目的任務(wù)書和需求說明書進行獨立思考設(shè)計，給出項目的實現(xiàn)方案，小組中評選出最優(yōu)的設(shè)計方案作為參考完善設(shè)計后進入下一階段工作。項目設(shè)計階段鍛煉每個學生的分析能力，強調(diào)獨立工作和團隊協(xié)作的有機結(jié)合，力求使學生達到前端工程師應(yīng)具備的設(shè)計能力和自主學習能力。

（4）項目實施。實施環(huán)節(jié)側(cè)重于項目功能的實現(xiàn)，項目小組團隊成員按照預(yù)設(shè)的目標進行工作量劃分，并按照團隊管理的基本原則進行人盡其才，公平、透明的原則進行管理。指導教師在實施階段的工作集中于項目共性問題的分析解決及項目進度的檢查督促，針對項目開發(fā)中遇到的具體問題，教師給予必要的幫助指導，啟發(fā)引導學生通過自主學習尋找到解決問題的方法，但不提供問題的具體解決方案。這一階段培養(yǎng)項目小組團隊成員之間有效配合、溝通的能力，學生的自主學習解決問題的能力和團隊合作意識將大大增強。

（5）項目測試、運行。此階段的目的是驗證、改進現(xiàn)有的項目，提高優(yōu)化系統(tǒng)性能。針對測試或運行階段出現(xiàn)的問題，通過小組討論或指導教師啟發(fā)，由學生自己分析錯誤并找到解決問題的方法。在項目基本功能實現(xiàn)后，教師引導學生進一步拓展系統(tǒng)功能，鼓勵學生進行個性化創(chuàng)新設(shè)計。

CDIO模式下要求將學生的基本個人能力、人際能力、產(chǎn)品、過程和系統(tǒng)構(gòu)建能力，以及學科知識納入專業(yè)考核之中，實現(xiàn)對學生全面的綜合評價。在HTML5前端開發(fā)課程教學中，對學生的課程學習成績評價機制進行改革和優(yōu)化，從“閉卷筆試＋平時成績”轉(zhuǎn)變?yōu)槎嘣目己?，課程的成績由平時成績和期末成績兩部分構(gòu)成。平時成績部分側(cè)重考核學生對基礎(chǔ)知識技能的熟練掌握程度，突出個人技術(shù)能力的考核，平時成績占30%，平時成績由任課教師評定。項目完成后的成績作為期末成績，實施項目過程考核+行為考核的綜合評價模式，期末成績占70%。過程考核參照企業(yè)的管理方式，進行項目工作總結(jié)和評比，采用項目作品評價+答辯評價的形式，使學生在工程基礎(chǔ)知識、個人能力、人際團隊能力和工程系統(tǒng)能力各方面達到課程教學目標的要求，縮短學校教學與企業(yè)實際就業(yè)崗位要求的差距。項目作品評價采用企業(yè)工程師+任課教師+小組互評相結(jié)合的方式實現(xiàn)。評價給出的指導性的意見將反饋給學生，以促進項目的完善改進。答辯評價是指導教師對小組成員掌握的基本理論知識技術(shù)及項目開發(fā)中采用的知識技術(shù)進行提問，根據(jù)學生的回答情況進行評價考核。行為考核針對學生在項目開發(fā)過程中的團隊合作交流、溝通能力、出勤及文檔、代碼規(guī)范性的評價考核。

3 結(jié)語

本院通過與東軟睿道合作，在2013級、2014級計算機專業(yè)及軟件外包專業(yè)本科生的教學中開展實施基于就業(yè)導向的HTML5前端開發(fā)課程教學改革實踐，現(xiàn)已取得初步成效，與2012級、2011級相比，學生參與與本課程直接相關(guān)的各類比賽的比例提升了49.7%，獲獎率提升了21.5%，學生在企業(yè)的實習平均成績高了10%，學生的自主學習能力、創(chuàng)新能力、前端開發(fā)的工程實踐能力大大提高，市場就業(yè)競爭力大幅提升。

實踐證明，基于就業(yè)導向進行課程定位，實施校企雙師共育，實踐CDIO工程教育理念的項目驅(qū)動教學和多元課程評價機制，學生能有效掌握前端開發(fā)的相關(guān)知識和技術(shù)，具備分析問題、解決問題的綜合實踐能力。

前端開發(fā)崗位要求將隨著技術(shù)進步和市場的需求不斷變化，因此，在今后的HTML5前端開發(fā)課程教學中必須緊跟技術(shù)發(fā)展前沿和市場需求，不斷完善、優(yōu)化課程教學，進行課程改革探索實踐。

[1]張仕學,王力,張明富等.基于就業(yè)質(zhì)量的計算機專業(yè)人才培養(yǎng)評價模式[J].計算機教育，2015(10):14-17.

[2]麥可思研究院.2015年中國本科生就業(yè)報告[M].北京:社會科學文獻出版社，2015:97-98.

[3]馬曉梅,張劍飛,喬付.CDIO模式下高等工程教育的改革與探索[J].計算機教育，2010(12):132-134.

[4]郭小勤，曹廣忠.基于項目的CDIO理念在課程教學中的應(yīng)用[J].實驗科學與技術(shù)，2010,8(3):83-85.

[5]邵欣欣,王曉煜,蔣晶晶.CDIO理念下的Java課程項目改革研究[J].計算機教育,2013(12):26-32.

[6]袁嵩,彭冰冰.基于CDIO的軟產(chǎn)人才培養(yǎng)模式研究[J].現(xiàn)代計算機(專業(yè)版)，2016(16):13-15.

[7]崔亞楠,胡艷華,韋靈.CDIO模式下計算機專業(yè)實踐教學改革策略研究[J].現(xiàn)代計算機(專業(yè)版)，2016(12):7-9.

Teaching Reformation Practice of the HTML5 Web Front-End Development Course Based on Em p loyment Orientation

CHEN Xia，WU Dong

（School of Information Science and Technology，Lingnan Normal University，Zhanjiang 524048）

TheWeb front-end development engineers are in great demand in today's jobmarket,however,the teaching contentof the HTML5Web front-end development courses in local universities computer professional is unreasonable,teachingmode and the enterprise requirements do notmatch,resulting in the graduate studentsmajoring in the computer is difficult to find suitable jobs after they have graduated from colleges,but the enterprises don’t recruit suitable for front-end developmentneeds of the postgraduates.Therefore,based on the concept of CDIO educationmodel,proposes the employmentorientation of the course,refine teaching content,implement project-driven teaching, carries out themulti-evaluationmechanism of curriculum,and constructs themodel of enterprise and college dual teacher education to enhance students'comprehensive engineering practice ability and employment competitiveness.

Front-End Development;Employment Orientation;CDIO;Teaching Reformation

1007-1423（2017）12-0029-05

10.3969/j.issn.1007-1423.2017.12.008

陳霞（1976-），女，貴州六盤水人，碩士研究生，講師，研究方向為移動應(yīng)用開發(fā)、數(shù)據(jù)挖掘

2017-02-28

2017-04-15

廣東省高等學校教學質(zhì)量與教學改革工程項目（No.ZSJG1205）

吳東（1981-），男，廣西北海人，碩士研究生，副教授，研究方向為計算機網(wǎng)絡(luò)、數(shù)據(jù)挖掘