基于工作過程導(dǎo)向的《HTML5 UI設(shè)計實訓(xùn)》課程教學(xué)改革的探索與實踐

鄭 超 ，鄭 蕊 ，田美艷 ，林宗朝

（1廈門華天涉外職業(yè)技術(shù)學(xué)院 福建 廈門 361100）

（2廈門市同安職業(yè)技術(shù)學(xué)校 福建 廈門 361100）

1 引言

國務(wù)院出臺的《國務(wù)院關(guān)于加快發(fā)展現(xiàn)代職業(yè)教育的決定》一文中指出，建立以職業(yè)需求為導(dǎo)向、以實踐能力培養(yǎng)為重點(diǎn)、以工學(xué)結(jié)合培養(yǎng)專業(yè)技術(shù)人員的培養(yǎng)模式。推動課程內(nèi)容與職業(yè)需求對接，教學(xué)過程與工作過程對接。在這種工學(xué)結(jié)合的教改理念的指引下，計算機(jī)專業(yè)的課程改革已然成為各高職院校積極探索與研究的重要課題之一。

2 課程教學(xué)存在的問題

目前，各高職院校該課程教學(xué)存在的問題如下：（1）偏局部輕整體。課程內(nèi)容被分成幾大獨(dú)立的知識模塊，每個知識塊以獨(dú)立的案例進(jìn)行實訓(xùn)。學(xué)生完成其中的一個案例只能掌握獨(dú)立的知識點(diǎn)，并不能自主完成知識的擴(kuò)展和衍生，以及理解知識塊之間的銜接和遞進(jìn)。（2）忽略訓(xùn)練職業(yè)崗位的工作過程。學(xué)生只掌握了其中的工作技能，并不了解該對應(yīng)崗位的具體工作流程以及具體內(nèi)容，進(jìn)而培養(yǎng)出的學(xué)生無法滿足現(xiàn)階段計算機(jī)前端開發(fā)人才崗位的需求。

3 課程對應(yīng)目標(biāo)崗位分析

通過對國內(nèi)大中城市的人才招聘信息進(jìn)行分析，從數(shù)萬份招聘信息中篩選出了與高職院校《HTML5 UI設(shè)計實訓(xùn)》課程相關(guān)的工作崗位有：web前端開發(fā)人員、HTML5前端開發(fā)工程師、HTML5/JS前端開發(fā)工程師等，將技能要求相似的崗位合并分析后，我們得到課程對應(yīng)崗位所需要的2個技能目標(biāo)。

（1）知識目標(biāo)：學(xué)習(xí)和掌握作為一線前端UI設(shè)計師需要掌握的html5、CSS樣式、Javascript腳本等核心知識。

（2）能力目標(biāo)：具備從最開始的客戶溝通，網(wǎng)站頁面布局剖析，到在瀏覽器中呈現(xiàn)界面布局，到最終完成交互功能實現(xiàn)完整站點(diǎn)，做前端設(shè)計師的能力。

4 課程教學(xué)模式改革思路

4.1 課程設(shè)計思路

《HTML5 UI技術(shù)實訓(xùn)》該課程應(yīng)該以職業(yè)崗位工作過程為主線，通過以上對課程對應(yīng)目標(biāo)崗位分析，再根據(jù)學(xué)生的學(xué)習(xí)規(guī)律發(fā)布教學(xué)案例，形成與工作過程相對應(yīng)的課程及專題組合，包括內(nèi)容和順序[1]。

該課程的主要任務(wù)是以培養(yǎng)一線前端UI設(shè)計師崗位為目標(biāo)，根據(jù)高級HTML5編碼，中級CSS樣式設(shè)計，初級Javascript腳本、知識、能力要求為目標(biāo)。因此設(shè)計該課程為一門基于工作過程的項目化課程，以工作項目為導(dǎo)向的任務(wù)驅(qū)動的教學(xué)方式，用以激發(fā)學(xué)生的學(xué)習(xí)積極性。

4.2 課程內(nèi)容設(shè)計

《HTML5 UI技術(shù)實訓(xùn)》課程的教學(xué)內(nèi)容與其他傳統(tǒng)的學(xué)科課程相比具有鮮明的特點(diǎn)：課程的教學(xué)過程可以有較強(qiáng)的操作性和實踐性。在教學(xué)內(nèi)容方面，設(shè)置以就業(yè)為導(dǎo)向，將學(xué)生以后畢業(yè)到相應(yīng)行業(yè)就業(yè)可能遇到的問題，納入到教學(xué)內(nèi)容中來，突出“學(xué)以致用”[2]。

為了適應(yīng)網(wǎng)頁應(yīng)用的變化，改革后的課程引入兼容不同設(shè)備及屏幕的響應(yīng)式網(wǎng)頁開發(fā)內(nèi)容[3]。課程內(nèi)容的章節(jié)以模擬的實際項目的工作進(jìn)度來劃分“布局分析─界面局部設(shè)計─樣式設(shè)計─交互性設(shè)計─匯總站點(diǎn)”，讓學(xué)生更好地體驗工作過程。

4.3 教學(xué)模式與方法設(shè)計

以職業(yè)崗位工作過程為主線，根據(jù)確定的學(xué)生已有知識狀態(tài)和學(xué)習(xí)特點(diǎn)，分析學(xué)生已有知識到目標(biāo)之間應(yīng)掌握的知識與技能，讓學(xué)生以團(tuán)隊的形式合作完成相應(yīng)的工作任務(wù)。

小組合作實施模擬項目工作，應(yīng)用的基本過程是遵循著“以小組為單位接收教師發(fā)放的整套網(wǎng)站的psd原圖─以小組為單位進(jìn)行布局分析─學(xué)生進(jìn)行自主項目分工─模擬工作模式下制作網(wǎng)頁─以小組為單位驗收網(wǎng)站”的基本流程。

以教師為引導(dǎo)，學(xué)生為主體的模式，可以有效地調(diào)動學(xué)生的學(xué)習(xí)積極性和主動性，進(jìn)而引導(dǎo)、吸引、集中、維持學(xué)生的注意力，做到知識有效遷移，學(xué)生通過任務(wù)引領(lǐng)實現(xiàn)對所學(xué)知識的構(gòu)建。將教學(xué)內(nèi)容與教學(xué)方法、教學(xué)手段相結(jié)合，同時還實施發(fā)現(xiàn)探究教學(xué)、自我教學(xué)單元、理論實踐一體化教學(xué)、小組協(xié)作型教學(xué)發(fā)等方法。

在教學(xué)過程中，教師相當(dāng)于實際工作中的售前工程師，通過與客戶的溝通，確定了整個網(wǎng)站所需要的模塊數(shù)、模塊名稱以及各模塊所需要實現(xiàn)的功能。同時也是網(wǎng)頁設(shè)計師，提供設(shè)計圖稿并對最終瀏覽器呈現(xiàn)的效果進(jìn)行把控，這個“最終呈現(xiàn)的效果”包括站點(diǎn)的LOGO、背景、字體大小、版面布局、瀏覽方式、交互性等諸多要素?，F(xiàn)在很多設(shè)計類網(wǎng)站可供下載網(wǎng)站模板，教師可以利用網(wǎng)站資源，實戰(zhàn)教學(xué)。選取一組學(xué)生的知識儲備能夠駕馭的，頁面模塊完整的，網(wǎng)站的整體形象符合現(xiàn)代企業(yè)需求的網(wǎng)站設(shè)計圖稿作為案例樣稿及任務(wù)的目標(biāo)模板。

學(xué)生是工作過程的主體，相當(dāng)于H5前端設(shè)計師、web前端設(shè)計師等，將教師發(fā)布的案例樣稿組作為最終網(wǎng)站呈現(xiàn)的效果圖。學(xué)生被劃分為多個小組，以團(tuán)隊的形式接收設(shè)計任務(wù)。首先以組長為代表作為前端設(shè)計師與老師溝通，并通過查看樣稿，了解任務(wù)要求以及應(yīng)該做的哪些知識的準(zhǔn)備。隨后組長負(fù)責(zé)首頁模塊，其余組員各自選擇1個模塊頁面，由組長組織小組討論剖析各個模塊頁面的布局，并畫出相應(yīng)的結(jié)構(gòu)布局圖。隨后各組員將自己負(fù)責(zé)的頁面，使用圖片處理軟件把素材圖通過裁剪處理等方法保存到站點(diǎn)文件夾下的圖庫里。組長負(fù)責(zé)的首頁部分特殊處理，將頭部和底部的HTML、CSS、JavaScript獨(dú)立出來，作為整個網(wǎng)站的通用模塊。其余組員將自己負(fù)責(zé)的頁面主體部分，根據(jù)小組分析的網(wǎng)頁結(jié)構(gòu)布局圖，通過選擇對應(yīng)的HTML5標(biāo)簽，將頁面上的文字、圖片、表格等結(jié)構(gòu)搭建起來，選擇CSS樣式將頁面上的背景、鼠標(biāo)指上去的效果、定位等設(shè)計出來，最后使用JavaScript以及衍生出來的各種技術(shù)、框架，完成創(chuàng)建Web頁面的前端界面。最后由團(tuán)隊合作整合各個模塊的主體內(nèi)容，加上共用的頭部和底部，并呈現(xiàn)出來，實現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶界面交互。作品完成后，組長組織全體組員根據(jù)瀏覽器最終呈現(xiàn)的網(wǎng)站界面效果，回顧整個過程所運(yùn)用的知識，進(jìn)行集體消化吸收，并積累經(jīng)驗教訓(xùn)，進(jìn)而嘗試向更專業(yè)更簡潔的工作過程轉(zhuǎn)化。

4.4 考核方式設(shè)計

改革后的考核方式應(yīng)該明確了任務(wù)目的，各組成員根據(jù)教師提供的網(wǎng)頁設(shè)計稿，編寫自己制作的功能模塊，并畫出結(jié)構(gòu)布局圖，由組長匯總提交給教師，作為前期的網(wǎng)頁布局剖析工作總結(jié)。教師通過文檔結(jié)構(gòu)了解學(xué)生對網(wǎng)頁布局分析的是否到位，并結(jié)合最終完成的網(wǎng)頁效果給出相應(yīng)的分值，作為考核的成績。

由于這門課程是以培養(yǎng)學(xué)生實踐能力為主要目標(biāo)，改革后的考核方式，通過項目考核的方式真正考察學(xué)生對于知識的應(yīng)用能力，從而真正培養(yǎng)出學(xué)生符合職業(yè)需求、實踐能力強(qiáng)、工學(xué)結(jié)合的專業(yè)技術(shù)能力。

5 結(jié)語

通過“基于工作過程導(dǎo)向”教學(xué)模式的探索，建立以職業(yè)需求為導(dǎo)向, 以實踐能力培養(yǎng)為重點(diǎn),將“工學(xué)結(jié)合”很好地融入到教學(xué)訓(xùn)練的過程中。在實施任務(wù)的過程中，學(xué)生了解了工作的過程，實現(xiàn)了知識的構(gòu)建、技能的提升、職業(yè)素養(yǎng)的養(yǎng)成。做到課程教學(xué)內(nèi)容與職業(yè)標(biāo)準(zhǔn)對接，教學(xué)過程與實際工作過程對接，進(jìn)而提高學(xué)生的就業(yè)能力。