工作過程導向的“HTML5 UI設計實訓”混合教學設計與實踐*

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

(1.廈門華天涉外職業技術學院，福建 廈門 361000；2.廈門市同安職業技術學校，福建 廈門 361000)

職業教育越來越被人們重視，人類的生產生活離不開現代信息技術的應用，特別是“互聯網+”環境的出現，各種信息化工具層出不窮，《國家職業教育改革方案》的出臺，指明了職業教育的改革方向，工作過程導向的課程開發理論已經很成熟了，但在”HTML5 UI設計實訓”課程中的應用實踐少之又少，因此，結合線上和線下的混合教學在該課程中的應用，促進學生泛在、自主、碎片化、個性化學習[1]。

融合了線上和線下相結合的混合教學在職業院校的課堂教學中應用廣泛，廣大教師也做了一些嘗試和應用型的研究，但還存在一些不足，特別是混合教學設計、規范性、混合性方面的應用較少。因此，本研究以”HTML5 UI設計實訓”課程為載體，依托ADDIE教學設計模型和4C/ID教學設計模型，參考國內外的研究現狀，設計出以工作過程為導向的課程混合教學設計架構。

一、工作過程導向的”HTML5 UI設計實訓”混合教學設計與實踐的思路

ADDIE模型共有五個環節，將”HTML5 UI設計實訓”課程的混合教學設計分為五個階段。

(一)分析階段

按照工作過程導向進行優化設計，從學習情境和學習者分析兩個維度出發，融入4C/ID模型進行復雜性技能分解，通過支持性信息分析、非復用性技能分析、復用性技能分析、程序性信息分析四個維度的任務分析形成技能簇和任務組，課堂教學中采用工作過程導向的職業崗位能力點為教學目標，可以促進學生的學習興趣和積極性，這有別于常規教學中的理實一體化模式。信息化時代，各種教學平臺的出現，讓教學的時間和空間有了更多的選擇，學習可以自由靈活，并且碎片化，課前課中課后，線上線下混合教學，此時的教學內容該如何進行設計，以什么形式呈現，成為了混合教學設計的關鍵。

(二)設計階段

教學設計的重點是對學生的學習任務進行設計，設計階段要對應著分析階段五個技能分解分析進行的模塊設計，通過任務分析形成技能簇或任務組對應著學習任務的設計，支持性信息分析對應精制編碼信息呈現形式的設計，主要通過采用促進精制編碼的方法，設置情境導入預習，練習前預先提供利用[2]。非復用性技能分析對應歸納訓練設計，該訓練設計應該要選擇促進歸納的方法。復用性技能分析對應匯編訓練設計，該訓練設計要選擇促進匯編的方法。程序性信息分析對應限制性信息呈現形式的設計，主要通過采用促進限制性編碼的方法，設置課中練習，讓學生在練習過程中直接可用。混合教學設計中的教學環境設計尤其重要，”HTML5 UI設計實訓”課程教學環境主要有三種：線上、線上線下、線下，每種教學環境分別設計教師的教學活動和學生的學習活動，最后合成本門課程的混合教學策略。

(三)開發階段

針對設計階段最后的混合教學策略開發符合相應的課程資源，以數字資源為主，適合線上線下使用，符合職業教育理念，具體呈現的形式有工作過程導向崗位要求的任務單、知識與技能的微課、各種形式的多媒體課件、以職業素養為內容的動畫、以及客觀評價的測試習題庫等，可以利用網絡教學平臺、iPad、平板、智能手機等開展”HTML5 UI設計實訓”課程技能測試。

(四)實施階段

該階段主要是開展混合式教學，分為課前、課中、和課后，在多元化的信息化教學環境中進行教師活動和學生的學習活動，”HTML5 UI設計實訓”課程采用項目式教學，將課程的知識點分解為各個子項目，每個子項目采用任務驅動法進行教學，在課堂中采用線上線下的方式，教師在課堂中可以采用子項目任務的問題情景導入，監督學生的自主學習活動，再通過案例的分析，學生分組學習，自主探究，教師引導，將課程子項目的技術點進行講解，可以采用游戲對戰活動的形式呈現，然后教師布置任務并提供導學案，對學生的任務進行指導學習，解決技能難題，最后學生組內交流，組與組之間PK，互相評價，教師點評總結，最后任務完成。課中的教師活動和學生活動能夠成功離不開課前的準備，主要以線上為主，教師可以通過學習平臺提前發布教學預習視頻讓學生進行自主學習。課后的提升階段也是以線上為主，教師可以發布拓展資料讓學生進行自主學習，通過線上進行輔導答疑，教師可以布置課后項目任務，提供技術評價指標讓學生參考，學生通過平臺進行作品展示，學生在線上進行互評，最后教師選出優秀的作品進行點評， 這樣通過課前、課中和課后三個教學階段的混合式教學，產生了良好的效果[3]。

(五)評價階段

將過程考核的形成性評價與結果考核的終結性評價權重均設為1：1的比例，增加過程考核的形成性評價的比例，隨著課程過程性評價的考核實施，我們應當逐步減少期末測試比重，學生自己感受到學習的快樂、就會以主人翁的心態去嘗試協同學習和通過各種平臺渠道等去獲取 知識與課程崗位所需要的的技能。評價貫徹教學過程的始終，評價后教師要對學生的學習情況及時的反饋，并不斷完善教學設計與教學實施方案，通過這種不斷的迭代，可以促進教學質量的螺旋上升[4]。

二、工作過程導向的”HTML5 UI設計實訓”混合教學設計與實踐的過程

(一)分析階段

1.學習情境分析

計算機應用技術專業”HTML5 UI設計實訓”課程是一門專業核心課，面向計算機信息類、網絡互聯網類企業培養學生規劃網站、建設網站及網頁設計的能力，參照工作過程導向的的課程設計理念，提煉出了9個學習情境，分別是：HTML5離線應用；HTML5 Web Workers多線程處理；HTML5 Geolocation地理位置；CSS3概述；CSS3選擇器；文本字體與顏色；背景與邊框；2D變形；設計動畫。

2.學習者分析

以“學習情境CSS3選擇器”為例，學習者已經學習了CSS3的編碼規范、新增特性和應用CSS3設計網頁界面等內容，但未接觸具體企業的工作場景，不了解選擇器的基本概念，CSS3選擇器的分類和使用方法等；學生對企業的真實項目的實踐學習有很濃厚的興趣，通過企業的項目任務具體工作過程導向，能夠提升學生解決問題的能力。

(二)設計階段

1.學習任務設計

以工作過程為導向，結合4C/ID理論，我們設計4個項目學習任務，分別是：項目1企業宣傳類網站設計以實現，該項目主要是可以通過學生制作個人主頁形式的網站、學校的招生宣傳網站、公司的產品介紹類網站等形式來完成；項目2視頻音頻類網站，具體就是通過HTML5音視頻的制作來呈現網站的宣傳，主要涉及到界面的設計、頁面的布局規劃、測試與運行；項目3學生成績管理系統，該項目主要運用HTML5本地的數據庫功能來完成學生的成績管理系統，主要涉及到需求分析、數據庫設計、單元測試和系統測試；項目4坦克大戰游戲，本項目主要通過HTML5的繪圖功能綜合應用來完成小游戲的制作，主要涉及到游戲總計架構的搭建、游戲模型的構建、編碼實現與測試。

2.學生的角色設計

成立項目組，每組有自己的團隊名稱，成員構成6到7人為宜，每個學生都有自己的崗位職責，整組的任務安排以工作過程為導向，按照崗位要求，學生各司其職，教師給每個學生下具體的工作任務單[5]。

3.教師的角色設計

教師的角色不固定，可以根據教學設計的不同階段擔任不同的崗位職責，配合學生的項目任務的完成，可以出任項目經理，對各個項目組提要求，下達工作過程導向任務單，即對學生提出學習目標的要求，并設置時間節點，定期檢查任務成果；教師還可以出任客戶的角色，將學生的項目任務作為“業務”，學生完成任務后，有客戶驗收，是否滿足業務功能需求，教師的角色由教轉變為導。

(三)開發階段

本階段主要為數字化資源的開發，信息化時代各種教學平臺層出不窮，例如：超星泛雅教學平臺、學習通、云班課、雨課堂、i博導、愛課程等等，我們可以以其中的一種教學平臺為依托來構建框架模型，呈現數字化資源的展示形式，平臺必須具備交互性好、功能穩定流暢、線上線下相結合，可以記錄學習痕跡，并最終形成課程評價分析報告等報表，為混合教學策略的實施奠定基礎。

(四)實施階段

計算機應用技術專業學生入學時會進行分班，在第1學期開設”HTML5 UI設計實訓”課程，我們分別從2018級學生中選擇5個班級按照傳統的教學方式進行考核、2019級學生中選擇3個班級進行傳統+過程性教學的考核評價方式和2020級學生中選擇3個班級進行工作過程導向的混合式教學考核。

(五)評價階段

借助泛雅網絡教學平臺實現了課程技能測試信息化、標準化、無紙化。將超星泛雅網絡教學平臺的線上測試比例設置為四分之三，利用學校機房、實訓室等線下測試比例設置為四分之一，除了實訓室機房上機實訓 ( 課內實訓 ) 為線下測試外， 其他的七種要素項均在泛雅平臺線上由任課教師根據課程性質和平臺功能版面模塊進行考核測試，自動記錄產生形成性評價的結果，最終導出文件。

經過對”HTML5 UI設計實訓”課程的工作過程導向混合教學實施過程實踐，結果表明，師生對該課程混合教學方法比較滿意，大部分學生覺得操作規范、評價合理，在學生中產生了積極的效果。很多學生從排斥到喜歡這種工作導向課程教學方法，學生的主動性提高了，學生的成績自然也就提高了。從學校當中隨機抽取11個班級，以”HTML5 UI設計實訓”同一門課程為例，以工作過程導向混合教學與傳統教學的考核配對樣本進行檢驗，考核結果見表1。

表1 “HTML5 UI設計實訓”工作過程導向混合教學與傳統教學的考核配對樣本檢驗

不同班級采用不同的教學方法后的考核評價數據圖例見圖1，采用工作過程導向混合教學方式后，教師根據主觀喜好隨意送分的現象減少了，使優秀和良好比例的學生有所下降，成績常態化分布，中等和及格比例的學生有所上升，臨時抱佛腳等平時不認真學習的學生成績回歸常態、期末突擊、死記硬背的學生也因為考核方法的實施逐漸較少，這樣導致了圖例中不及格比例略有升高，真正體現了學生的學習情況。

圖1 課程不同教學方式實施效果比照

三、結束語

本研究以”HTML5 UI設計實訓”課程為例，以工作過程導向為主線，結合經典的教學設計模型：ADDIE模型和4C/ID模型，進行”HTML5 UI設計實訓”混合式教學設計，依托超星泛雅網絡教學平臺開展混合式教學實踐。通過”HTML5 UI設計實訓”線上和線下的混合教學，工作過程崗位能力融入課程教學中，學生的學習興趣提高了，滿意度和自主學習能力等各種綜合素質得到了質的提升。