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

王黎，袁禮，呂殿基

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

馬克·吐溫說(shuō)“只要專注某一項(xiàng)事業(yè)，就一定會(huì)做出使自己感到吃驚的成績(jī)來(lái)”。網(wǎng)站前端開(kāi)發(fā)沒(méi)有捷徑可走，勤學(xué)苦練是根本。全身心投入，要不浮不殆、不急不躁。學(xué)生階段要夯實(shí)基礎(chǔ)知識(shí)，不要盲目追求新技術(shù)，踏踏實(shí)實(shí)將前端的核心技術(shù)掌握扎實(shí)，閱讀和書(shū)寫(xiě)大量的代碼。鼓勵(lì)學(xué)生利用業(yè)余時(shí)間閱讀W3C 的標(biāo)準(zhǔn)文檔、ECMAScript 文檔，深入研究HTML 結(jié)構(gòu)的語(yǔ)義。為日后成為一名優(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)容和個(gè)人優(yōu)勢(shì)扮演不同角色，各盡其職，分工合作，共同完成項(xiàng)目選題、設(shè)計(jì)制作、撰寫(xiě)項(xiàng)目報(bào)告及答辯。讓每個(gè)成員都有參與感、價(jià)值感和成就感，提高他們探究式學(xué)習(xí)的興趣。在各個(gè)環(huán)節(jié)實(shí)施過(guò)程中，需要調(diào)整團(tuán)隊(duì)與個(gè)人的關(guān)系、成員之間的溝通、項(xiàng)目時(shí)間分配，以及項(xiàng)目遇到瓶頸時(shí)如何解決等一系列問(wèn)題，在攻克一個(gè)個(gè)問(wèn)題中，磨煉他們的意志，強(qiáng)化團(tuán)隊(duì)意識(shí)，提高溝通交流能力。項(xiàng)目完成后，各團(tuán)隊(duì)通過(guò)答辯的方式將自己的優(yōu)秀作品進(jìn)行展示。通過(guò)自評(píng)、同學(xué)互評(píng)、教師評(píng)價(jià)，對(duì)所展示出的精益求精的精神給予積極評(píng)價(jià)，讓職業(yè)能力得以深化。

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

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

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

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

7 結(jié)束語(yǔ)

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