Web前端開發的項目化課程教學實踐

霍文英 王振輝 白鴿

[ 作者簡介 ]

霍文英，女，河南洛陽人，洛陽科技職業學院，助教，碩士，研究方向：計算機應用技術。

王振輝，男，河南洛陽人，洛陽科技職業學院，助教，本科，研究方向：計算機應用技術。

白鴿，男，河南洛陽人，洛陽科技職業學院，助教，本科，研究方向：計算機網絡技術、數據庫應用。

[ 摘要 ]

互聯網技術的發展推動了各行各業的發展，特別是隨著移動智能終端的普及和使用，讓各類購物網站、小程序等得到了廣泛應用。在這些應用中前端技術起著重要作用。因此，我國Web前端人才需求激增，這也為職業院校專業開設和人才培養提出了新要求。根據教育部要求，要針對職業技術院校，將學歷證書和職業技能等級證書有效結合，探索實施“1+X”證書制度。本文以Web前端開發專業課程教學實踐為例，闡述Web前端開發職業資格證書標準，項目化課程設計、教學方法與手段、課證融合、有效的評價機制等，對Web前端課程教學情況進行探索，旨在為社會培養更多的實用性人才。

[ 關鍵詞 ]

Web前端開發;課證融合;項目化課程

近年來，社會對職業教育發展廣泛關注，特別是中國在從制造大國向制造強國邁進的過程中，需要更多技能型的高素質勞動工人。“職教一人，就業一人，脫貧一家”，高職院校就是為社會發展培養各類技能人才，培養“先會后懂”人才，提倡“校—企—校”模式，堅持產教融合、協同育人。因此，在國家新一輪改革發展過程中，高職院校大有可為。Web前端開發是當前計算機應用專業的熱門就業方向。Web前端開發技術具有更新速度快、市場人才需求量大等特點。對于高職學生來說，Web前端開發接受度高，具有高薪吸引力，能夠很好地服務本地產業。因此，高職院校的Web前端開發職業教育，從專業設定到課程建設再到課堂實施，都應緊密圍繞當前社會企業實際需求和IT行業技術發展水平，緊密結合一線企業技術規范，以達到為企業輸送“畢業就能上崗”的Web前端開發人才。

從國家當前的制造業發展趨勢來看，對于技能型人才需求量大，高職院校也結合社會實際不斷更新專業內容和方向，以期適應經濟社會的發展。但在實際工作中發現，一些高職院校雖然有較為前沿的專業，但是缺少對應的熟練的教師。比如高職院校開設了Web前端開發專業，但是熟悉專業核心課程的教師很少，基本都是從計算機其他專業轉任過來的，基本的理論教學還能應付，但是一些實踐教學很難指導。再如，由于專業新，發展時間短，也缺少相應的高質量教材。此外，從學生就業情況看，學生的技能水平還達不到一畢業就能上崗的標準。因此，從社會和企業需求來看，需要掌握相關專業知識，并具備一定前沿實踐技能的大學生才是企業需要的畢業生。因此，加強高職院校在校生的技能培養是關鍵。教育部提出了“1+X”證書制度的要求，各地開展了“1+X”證書制度試點工作，在人才培養過程中對學校教師和學生都提出了明確要求。比如，對于高職院校要求雙師型教師不低于50 %;并要求加強校企合作，發揮企業專業技術人才的優勢，在學生實習實訓、技能培訓、教材編寫等方面要吸納企業技能人才參與。同時對學生提出了“1+X”證書的要求，這在政策上為高職學生技能的提高提出了明確方向。與此相關的職業技能等級證書也在持續發布，其中就包含Web前端開發證書。Web前端開發證書是對計算機專業學生Web前端開發能力的判斷依據，對于學生來說是證明自己學有所成的有力方式，對于教師來說，統一了教學評價的標準，也能夠有效提升教學的效果。

1 Web前端開發課程教學現狀分析

1.1 在教學目標設計上，課程教學目標多以“掌握、理解、了解”等進行描述，注重對知識掌握程度的要求，弱化了對學生能力培養的要求。

1.2 在教學模式上，不少教師仍然按照傳統“填鴨式”開展教學，課堂還是以教師為中心，注重教師教了多少而忽視學生學了多少，重知識的傳授和獲取，輕知識的加工和問題的思考，學生只需按部就班地“依葫蘆畫瓢”，就可以完成相應的學習。

1.3 在教學內容方面，該課程主要包含了HTML語言、CSS樣式和Javascript等前端開發基礎知識，而目前主流的前端框架技術卻很少涉及。此外，Web類課程前后銜接不夠，前后端交互開發的教學案例較少，導致前端頁面設計和后端功能開發成了“兩張皮”，不少學生不能將Web前后端開發技術進行有機整合，Web實際項目開發能力較弱，阻礙了知識向能力的轉化。

1.4 在考核方式方面，不少教師仍然采用“課堂授課—考前復習—試卷筆試”為主的傳統考核模式，考核標準還是以知識考核為主，缺乏對學生能力達成的考核。

1.5 在課程教學總結中，每次課程結束后雖然也撰寫相關教學總結，但缺乏將總結材料中的教學建議落實在后續教學中的保障機制，沒有形成有效的持續改進閉環。

2 Web前端開發職業資格證書標準

Web前端開發專業技術技能人才培養目標分為初級、中級、高級三個等級。其中獲得三個等級的證書，必須滿足相應課程的學時要求，并達到課程要求的能力，高級證書持有者需具備復雜網頁開發和網站架構設計規劃的能力;中級證書持有者需具備動態網頁設計開發的能力;初級證書持有者需具備靜態網頁開發的能力。

3 計算機應用技術中的Web前端開發課程體系

Web前端開發課程是計算機應用技術專業的一門專業必修課。通過本課程的學習，學生在項目案例開發過程中掌握并靈活應用HTML5前端技術、PHP的基本語法知識、MySQL數據庫基本原理知識，最終以綜合項目進行教學效果展示。為進一步學習Web前端開發相關課程打下基礎，為學生就業做好知識儲備和項目積累。課程的開設依據是計算機專業人才培養目標和相關職業崗位的能力要求，對本專業所面向的PHP開發程序員等崗位所需要的知識、技能、素質目標的達成起支撐作用。在課程的設置上，先修課程有“網頁設計基礎”與“數據庫原理”，本課程為后續課程“HTML5應用高級”“專業技能實訓3”打下網頁站點管理、基本布局及后臺交互方面的基礎，并為以后能順利完成畢業設計做好充分準備，為就業增加成功的因素。

4 教學案例分析

本課程實踐性強，教學過程中以學生為主體，教師為主導，講練結合，在做中教，在做中學。每章每節均有精選案例引入，結合案例介紹相應知識點，提高學生的學習興趣。以提高課堂教學效果為目的，創建“教學做評”的課堂教學模式，圍繞一個個精心設計的案例展開教學，遵從“從實例到理論，從具體到抽象，從個別到一般”的認知規律，在問題的解決中提升學生的成就感和自信心，師生互動，創造快樂課堂氛圍。

不同專業的課程教學模式不同，對于Web前端開發課程來說，可以采取任務驅動法教學。通過設定一定的任務，將學生所需要訓練的技能融入任務，讓學生在完成任務的過程中提高技能。也可以采用問題導入的方式，引導學生回憶舊知識，導入新課程。在分析案例解決問題的過程中可以采用不同的方式。方法一：先由教師分析問題，并做示范演示，然后由學生進行實操，完成案例及知識學習，最后由教師做出評價并對共性問題進行集中講解，學生反思并對自己在制作過程中遇到的問題進行改進。方法二：教師先對案例稍作分析，由學生直接嘗試解決問題，完成案例，學生嘗試之后教師再集中進行評價講解，然后再由學生改進自己制作過程中的問題，進行完善。

“教學做評”屬于比較傳統的教學方式，但是也能夠激發學生的學習熱情。從案例的導入、教師的分析、學生的嘗試、教師的點評，層層遞進，步步深入，逐步完善，不斷優化，從而在學習過程中掌握新知識，解決新問題。在提出問題、解決問題的反復過程中，激發學生不斷探求知識的興趣，而問題的逐步解決能夠提高學生的學習信心。這樣的教學過程能夠不知不覺地加深學生對專業知識的掌握，不斷提高各項技能的訓練，最終達到培養學生熟練技能的目標。

4.1 教學內容設計

融合“1+X”認證標準中Web前端開發證書（中級）考點需求，設定不同難度等級的項目，情境化模擬企業項目，真實體驗軟件開發的全過程，與實際生產接軌。從PHP開發程序員崗位出發，分析崗位中的典型工作過程，將整個工作過程進行重復訓練，設定了三個層級的項目。

（1）基于HTML的淘寶商品信息展示頁面。

（2）基于HTML5+PHP+MySQL的淘寶商品信息展示平臺客戶端制作。

（3）基于HTML5+PHP+MySQL的淘寶商品信息展示平臺管理端制作。

項目內容上緊密銜接，難度遞增，能充分涵蓋本課程的全部知識點。在教學中，項目化貫穿，任務性驅動，提高學生的實戰能力及學習成就感，最終提升對學生學習的興趣。本課程貫徹“做—演—用—學”一體化教學理念，學生課前做，課中演，課后用，學習貫穿始終。以學生為主體，教師為主導，充分利用在線優質資源，最終實現教學目的。

4.2 教學方法與手段

本課程主要采取任務驅動教學法、課堂討論法、合作學習法、教師講演法、情景教學法。本課程以淘寶商品信息展示平臺作為貫穿項目，以子任務方式實現每堂課的教學目標。每個子項目開發背景中，課程采用情景引入法，客戶提出軟件需求，學生作為客戶經理進行軟件產品需求分析，并模擬企業PHP開發程序員全程跟蹤軟件開發的全過程。主題討論、合作學習，促進生生之間友好競爭，共同進步。課中，針對重難點，采用教師講演法，學生認真做好筆記。

4.3 教學載體設計

以淘寶商品信息展示平臺為貫穿項目，分三個子項目，子項目一：基于HTML5的淘寶商品信息展示頁面制作;子項目二：基于HTML5+PHP+MySQL的淘寶商品信息展示平臺（用戶端）制作;子項目三：基于HTML5+PHP+MySQL的淘寶商品信息展示平臺（管理端）制作。子項目之間關聯緊密，能力螺旋遞進，涵蓋Web應用系統開發的綜合知識和技能點。

5 結束語

對標“1+X”Web前端開發（中級）認證考試其中對PHP技術的掌握與應用要求，融入項目教學中，涵蓋完整的考試知識要點，有利于幫助學生順利通過Web前端開發中級證書考試。教學項目從實際項目中來，情景化模式導入，學生有代入感，作為一名企業程序員的角色來完成學習任務，有利于學生提前進入工作角色，對自己提高要求。在教學中，邀請企業工程師為學生講解企業軟件開發的典型過程、技術發展趨勢，拓寬學生的技術視野。項目安排難度由簡單到復雜，幫助學生獲得學習的樂趣與成就感。

參考文獻

[1]鄭根讓，史志強，何成，等. 1+X證書制度下以書證融通重構專業核心課程體系：以WEB前端開發證書與軟件技術專業為例[J]. 職業教育研究，2020（1）：12-17.

[2]肖靜. “1+X”證書背景下中職信息專業教學內容的優化：以Web前端開發證書和網頁設計與開發課程為例[J]. 西部素質教育，2020，6（11）：124-125.

[3]李斌. “1+X證書”育人機制下高職教師職業能力提升策略研究：以Web前端開發為例[J]. 當代教育實踐與教學研究，2020（13）：134-135.

[4]趙革委，閆軍. “1+X”證書制度下繼續教育人才培養模式探析：以陜西工業職業技術學院軟件技術專業Web前端開發證書為例[J]. 陜西教育（高教），2020（9）：54-56.

[5]李月峰. “1+X”證書制度下專業課程體系融合與重構探索：以軟件技術“Web前端開發”專業為例[J]. 電腦知識與技術，2020，16（28）：134-135，150.

[6]劉德陽，劉奎，王廣軍. Web前端開發課程項目化教學改革與實踐[J]. 智庫時代，2019（36）：181-182.

[7]任遠. “1+X證書”背景下的Web前端開發教學實踐[J]. 網絡安全技術與應用，2021（2）：85-86.

[8]魏歡. 前端開發，數字媒體應用技術：淺析互聯網下教學一體化Web前端開發課程的教學模式[J]. 科學咨詢，2020（7）：38.

[9]王婷. 《前端開發框架》課程項目式教學的改革與實踐[J]. 數碼世界，2020（8）：135-136.

[10]宋麗萍. 互聯網+視域下C-PBL混合式教學方式的實踐應用分析[J]. 北京印刷學院學報，2020，28（3）：128-131.