Web前端開發(fā)課程思政教學(xué)設(shè)計與實(shí)施

王黎，袁禮，呂殿基

(北京經(jīng)濟(jì)管理職業(yè)學(xué)院信息學(xué)院，北京100102)

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

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

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

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

1.1 從細(xì)節(jié)之處入手，滲透德育教育

本課程在機(jī)房上課，要求學(xué)生遵守機(jī)房的規(guī)章制度，維護(hù)環(huán)境衛(wèi)生，規(guī)范使用和操作電腦。下課時正確關(guān)機(jī)，將鍵盤、鼠標(biāo)、顯示器、座椅歸位。細(xì)節(jié)之處見人的品行，細(xì)節(jié)決定成敗，偉大源于平凡。通過每次課前、課后不厭其煩地提醒，讓學(xué)生養(yǎng)成習(xí)慣、注重細(xì)節(jié)，意識到細(xì)節(jié)是一種習(xí)慣，是一種積累，也是一種品德。

1.2 進(jìn)行崗位需求分析，讓學(xué)生了解從事該行業(yè)所應(yīng)具備的職業(yè)素養(yǎng)

目前，網(wǎng)站開發(fā)行業(yè)中崗位分工越來越明確，例如網(wǎng)站結(jié)構(gòu)規(guī)劃、網(wǎng)站美工設(shè)計、前端開發(fā)、后臺開發(fā)、系統(tǒng)測試等崗位。而前端開發(fā)工程師作為獨(dú)立存在的崗位，是公認(rèn)的入門簡單、就業(yè)前景廣闊的行業(yè)之一。據(jù)統(tǒng)計，Web前端開發(fā)崗位目前的人才缺口接近50萬。信息化時代下的Web前端開發(fā)對技能型人才的綜合素質(zhì)提出了較高要求。因此，通過分析企業(yè)對相關(guān)人才的工作領(lǐng)域、崗位任務(wù)、技能要求和知識要求，讓學(xué)生知道企業(yè)對人才的考察，不僅要有扎實(shí)的知識儲備，還需要較高的實(shí)踐能力，還要具備吃苦耐勞精神、團(tuán)隊(duì)合作的能力。同時，讓學(xué)生了解行業(yè)內(nèi)必須需要遵循的行為標(biāo)準(zhǔn)、價值觀念及職業(yè)道德規(guī)范的重要性。

1.3 了解前端開發(fā)技術(shù)的發(fā)展史，樹立民族自信心

介紹網(wǎng)站前端開發(fā)的發(fā)展歷程，以“人類命運(yùn)共同體”為落腳點(diǎn)，對比世界前端技術(shù)現(xiàn)狀，我國前端開發(fā)起步晚，但是發(fā)展勢頭迅猛，在各種新技術(shù)、新標(biāo)準(zhǔn)的推動下，國內(nèi)各大互聯(lián)網(wǎng)公司也都開始重視Web產(chǎn)品的前端重構(gòu)，如騰訊、新浪、淘寶等網(wǎng)站都對自己的前端進(jìn)行了重建并采用了新技術(shù)。引導(dǎo)學(xué)生確立競爭意識，激發(fā)學(xué)生的愛國情懷和民族自豪感，激勵他們奮發(fā)圖強(qiáng)，為我國前端技術(shù)的創(chuàng)新發(fā)展而努力。

2 精選和甄別優(yōu)良素材，堅定“四個自信”

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

3 渲染網(wǎng)頁實(shí)操中，提升審美能力

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

4 在能力訓(xùn)練項(xiàng)目中，培養(yǎng)工匠精神

李克強(qiáng)總理曾強(qiáng)調(diào)“鼓勵企業(yè)開展個性化定制、柔性化生產(chǎn)，培育精益求精的工匠精神”，從職業(yè)角度上理解，工匠精神是一種職業(yè)精神、職業(yè)能力、職業(yè)品質(zhì)的體現(xiàn)，是從業(yè)人員的在敬業(yè)、精益、專注、學(xué)習(xí)借鑒、創(chuàng)新等方面的表現(xiàn)。高職院校作為培養(yǎng)具有工匠精神技工的主要陣地，需在教學(xué)上通過優(yōu)化課程設(shè)計，加入能力訓(xùn)練項(xiàng)目，注重學(xué)生工匠精神培育。

4.1 學(xué)習(xí)借鑒優(yōu)秀網(wǎng)站的開發(fā)經(jīng)驗(yàn)

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

4.2 精益求精，編寫規(guī)范有效的代碼

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

4.3 勤學(xué)苦練，提升職業(yè)競爭能力

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

4.4 組建團(tuán)隊(duì)完成綜合實(shí)訓(xùn)項(xiàng)目，培養(yǎng)團(tuán)隊(duì)合作、交流表達(dá)能力

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

5 充分發(fā)揮線上教學(xué)資源的思政教育作用

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

6 考取“1+X”證書，強(qiáng)化學(xué)生的職業(yè)技能

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

7 結(jié)束語

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