Web前端開發課程思政教學設計與實施

王黎，袁禮，呂殿基

(北京經濟管理職業學院信息學院，北京100102)

為落實為誰培養人、培養什么樣的人以及如何培養人的教育戰略目標，大學所有課程都應充分發揮傳授知識、培育能力及思想政治教育雙重功能。課程思政建設就是要用好課堂教學這個主渠道，確保各門課都要守好一段渠、種好責任田，使各類課程與思想政治理論課同向同行、形成協同效應，充分發揮好專業課教學“主戰場”、專業課課堂“主渠道”、專業課教師“主力軍”的作用。專業教師在培養學生專業知識和實踐技能的同時，必須以立德樹人為中心環節，把社會主義核心價值觀、家國情懷、工匠精神、法治意識、社會責任、職業素養等思政元素融入專業課堂中，引導學生將個人成長與祖國前途命運和人民幸福的偉大“中國夢”緊密相連，培育有理想、有信念的社會主義合格建設者和可靠接班人。

Web 前端開發課程是高職院校計算機專業人才培養課程體系中的一門專業核心課程，總學時為72學時，在大二學期開設，主要講解Web 前端開發領域的關鍵技術(HTML、CSS 和Ja‐vaScript 等)，重在培養學生實踐能力和綜合能力。目前，Web前端開發方面的人才市場需求量大幅提升，具有良好的就業前景。在尊重課程建設規律的基礎上，依據課程本身的特點，發揮專業學科優勢，通過對課程教學內容和教學設計的創新和改進，采用“潤物無聲”的方式將思政教育全過程全方位融入教學過程，深度拓展教學內容，實現專業課程的育人功能。

課程開始之前需要對每位學生進行學情分析，了解他們的學習能力、起點差異、知識獲取過程和方法的異同、自律情況、思想狀況等。為思政教育的融入選擇合適的教學設計途徑，使得思政教育有的放矢。

1 利用好“第一堂課”，融入思政教育

1.1 從細節之處入手，滲透德育教育

本課程在機房上課，要求學生遵守機房的規章制度，維護環境衛生，規范使用和操作電腦。下課時正確關機，將鍵盤、鼠標、顯示器、座椅歸位。細節之處見人的品行，細節決定成敗，偉大源于平凡。通過每次課前、課后不厭其煩地提醒，讓學生養成習慣、注重細節，意識到細節是一種習慣，是一種積累，也是一種品德。

1.2 進行崗位需求分析，讓學生了解從事該行業所應具備的職業素養

目前，網站開發行業中崗位分工越來越明確，例如網站結構規劃、網站美工設計、前端開發、后臺開發、系統測試等崗位。而前端開發工程師作為獨立存在的崗位，是公認的入門簡單、就業前景廣闊的行業之一。據統計，Web前端開發崗位目前的人才缺口接近50萬。信息化時代下的Web前端開發對技能型人才的綜合素質提出了較高要求。因此，通過分析企業對相關人才的工作領域、崗位任務、技能要求和知識要求，讓學生知道企業對人才的考察，不僅要有扎實的知識儲備，還需要較高的實踐能力，還要具備吃苦耐勞精神、團隊合作的能力。同時，讓學生了解行業內必須需要遵循的行為標準、價值觀念及職業道德規范的重要性。

1.3 了解前端開發技術的發展史，樹立民族自信心

介紹網站前端開發的發展歷程，以“人類命運共同體”為落腳點，對比世界前端技術現狀，我國前端開發起步晚，但是發展勢頭迅猛，在各種新技術、新標準的推動下，國內各大互聯網公司也都開始重視Web產品的前端重構，如騰訊、新浪、淘寶等網站都對自己的前端進行了重建并采用了新技術。引導學生確立競爭意識，激發學生的愛國情懷和民族自豪感，激勵他們奮發圖強，為我國前端技術的創新發展而努力。

2 精選和甄別優良素材，堅定“四個自信”

Web 前端開發課程需要大量的實例和素材，選擇、加工有價值的教學素材是課程思政教育很好的切入點，也是思想宣傳工作的重要組成部分。通過精選包含中國傳統文化和充滿正能量的案例素材，學生在學習和操作過程中，感受到了傳統文化的魅力，接受了傳統文化的熏陶，培養文化自信。選取新聞類網站做案例，帶領學生關注時事熱點，了解國家大事，提高他們的政治意識、堅定“四個自信”。精選素材時需要注意素材的時效性，進行動態調整，例如今年的案例素材中可以引入新冠肺炎防控方面的感人事跡，增強學生的民族自豪感和大局意識等。

3 渲染網頁實操中，提升審美能力

Web前端開發是以增強用戶體驗為中心的，用戶第一眼看到的就是頁面，頁面設計好壞直接影響到用戶對網站的興趣。美觀的頁面，可以吸引用戶關注、提升用戶的體驗感。一名合格的前端工程師，需具有較強的審美能力，才能高精度地還原UI給出的設計稿，甚至可將設計稿中無法呈現的部分有效地展現出來，省去了后期再進行調整所占用時間和精力，讓網頁體現出美學的力量。審美和設計能力不是天生就有的，要通過不斷積累才會慢慢提高。因此在教學過程中，通過讓學生欣賞各類主題中的優秀網站，分析其色彩搭配、排版設計的特色，思考這類主題網站為什么這樣搭配色彩？換一種色彩效果又如何？介紹其設計過程中使用的方法，來提高他們對美的認知。鼓勵學生多看、多思考，把握細節方面，優秀作品反復欣賞，審美能力就會慢慢得到提高。另外，還需要多加訓練，一個主題的網頁，可以嘗試使用不同風格進行設計，然后進行對比，找出每版的優劣，再進行整合和修改。通過對比、分析，從多個角度、多個層次提高學生審美的范圍和質量。

4 在能力訓練項目中，培養工匠精神

李克強總理曾強調“鼓勵企業開展個性化定制、柔性化生產，培育精益求精的工匠精神”，從職業角度上理解，工匠精神是一種職業精神、職業能力、職業品質的體現，是從業人員的在敬業、精益、專注、學習借鑒、創新等方面的表現。高職院校作為培養具有工匠精神技工的主要陣地，需在教學上通過優化課程設計，加入能力訓練項目，注重學生工匠精神培育。

4.1 學習借鑒優秀網站的開發經驗

由于學生缺乏開發正規網站的經驗，在訓練項目開始前，通往讓學生瀏覽大量成熟優秀的網站，這些網站都具有結構布局清晰、導航明確，用戶體驗好以及敏捷的交互效果等特點。借鑒和學習優秀網站的設計理念、流程并加入自己的思考，思考別人是通過什么形式去規劃網站內容，以及每一個階段的表達方式。重點關注網站的結構布局、主題與風格、渲染效果、交互功能，并寫出分析報告，歸納總結可為己所用的設計思路，使學生在項目訓練過程中就更有方向性和目的性，快速提高自己的技能，豐富自己的想象力，拓寬了思路，激發設計靈感。加強了學生的學習和借鑒能力。

4.2 精益求精，編寫規范有效的代碼

Web前端開發中使用不規范方式寫代碼，將會影響網頁瀏覽速度和適應性。例如，框架結構在早期建設網站經常使用，也有一定的優勢。如果一個網站過多使用框架結構，會增加服務器的http請求，影響網頁加載速度。而且網頁中使用框架結構最大的問題是，主流的搜索引擎無法準確識別出框架中的文本、圖片、超鏈接等內容，導致網站中很多內容無法抓取，這對網站來說無異于一場災難。但如果網站有一些內容不想被搜索引擎抓取，或者不重要，可以利用框架包住這些信息。通過上述分析，讓學生認清框架結構的優缺點，合理使用布局結構。在未來獨立開發網站時規范編寫代碼，使代碼結構合理、標記有效、注釋優良。引導學生把每個當下的事情都做到完美極致，培養他們執著專注，沉下心來對作品不斷完善，精益求精、一絲不茍，讓自己的作品經得起考驗和推敲。

4.3 勤學苦練，提升職業競爭能力

馬克·吐溫說“只要專注某一項事業，就一定會做出使自己感到吃驚的成績來”。網站前端開發沒有捷徑可走，勤學苦練是根本。全身心投入，要不浮不殆、不急不躁。學生階段要夯實基礎知識，不要盲目追求新技術，踏踏實實將前端的核心技術掌握扎實，閱讀和書寫大量的代碼。鼓勵學生利用業余時間閱讀W3C 的標準文檔、ECMAScript 文檔，深入研究HTML 結構的語義。為日后成為一名優秀的前端工程師做準備。

4.4 組建團隊完成綜合實訓項目，培養團隊合作、交流表達能力

在課程的綜合實訓教學環節中，根據學生學習能力的不同劃分項目團隊，組員根據實訓項目的內容和個人優勢扮演不同角色，各盡其職，分工合作，共同完成項目選題、設計制作、撰寫項目報告及答辯。讓每個成員都有參與感、價值感和成就感，提高他們探究式學習的興趣。在各個環節實施過程中，需要調整團隊與個人的關系、成員之間的溝通、項目時間分配，以及項目遇到瓶頸時如何解決等一系列問題，在攻克一個個問題中，磨煉他們的意志，強化團隊意識，提高溝通交流能力。項目完成后，各團隊通過答辯的方式將自己的優秀作品進行展示。通過自評、同學互評、教師評價，對所展示出的精益求精的精神給予積極評價，讓職業能力得以深化。

5 充分發揮線上教學資源的思政教育作用

利用網絡平臺，搭建線上“課程思政”體系，利用線上教學資源進行思政教育。一是借用“職教云”平臺，上傳高質量、富含思政元素的可視化學習資源，進行知識學習和政治思想的繼續教育。彌補課堂教學內容和形式的不足。實行線上線下混合式教學模式，突顯了全程育人的必要性。二是開設線上培訓講座，拓展了教學時間與空間，讓學生了解當前最前沿的、最實用的技術，關注本行業的發展動態和行業楷模的先進事跡。三是將理論學習時間從課堂教學中分離出來，將課上時間更多地用于學生的實操和實踐中。四是組建線上專業社團，突破時間和地點的限制，將志同道合的成員凝聚在一起，不定期開展技術沙龍、設計大賽等活動，讓成員之間充分交流，形成思想上的碰觸和融合。五是搭建論壇、社區、微信群、QQ群等溝通平臺，方便師生交流，為學生提供差異化指導，促進師生感情。

6 考取“1+X”證書，強化學生的職業技能

“1+X”證書制度是高職院校完成立德樹人任務的保障，是提高職業教育適應社會發展需要的能力，滿足培養德智體美勞全面發展技能人才的需求。考取Web前端開發職業技能等級證書，需要掌握相關技能的基礎知識，了解相關的職業技能鑒定標準。教師在授課過程中將這些鑒定標準融入教學中，實現課證融合，使學生在學習實踐過程中與崗位標準零距離接觸，有利于學生在校期間掌握本行業最新技術，來強化學生的職業能力和實踐能力，使學生在就業時能快速適應自己的工作崗位。

7 結束語

總之，結合Web前端開發課程自身的特點，在教學設計中深入挖掘思政元素，不斷創新和改進，以隱形的方式潛移默化地對學生開展思政教育，實現專業課程的育人功能。思政元素的融入不能流于形式，脫離課程內容，出現“兩張皮”的現象。課程思政教學設計，擴充了課程內容，使專業知識更具有靈魂，也為課堂教學方法的改進提供了新的思路。另外，也為專業課的教學指明了方向，提升了專業教師德育教育的水平，也使學生在課程學習和技能訓練中，學會做人做事的道理，提高自身的職業道德素養。