工作過程導(dǎo)向的“HTML5 UI設(shè)計(jì)實(shí)訓(xùn)”混合教學(xué)設(shè)計(jì)與實(shí)踐*

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

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

職業(yè)教育越來越被人們重視，人類的生產(chǎn)生活離不開現(xiàn)代信息技術(shù)的應(yīng)用，特別是“互聯(lián)網(wǎng)+”環(huán)境的出現(xiàn)，各種信息化工具層出不窮，《國家職業(yè)教育改革方案》的出臺，指明了職業(yè)教育的改革方向，工作過程導(dǎo)向的課程開發(fā)理論已經(jīng)很成熟了，但在”HTML5 UI設(shè)計(jì)實(shí)訓(xùn)”課程中的應(yīng)用實(shí)踐少之又少，因此，結(jié)合線上和線下的混合教學(xué)在該課程中的應(yīng)用，促進(jìn)學(xué)生泛在、自主、碎片化、個(gè)性化學(xué)習(xí)[1]。

融合了線上和線下相結(jié)合的混合教學(xué)在職業(yè)院校的課堂教學(xué)中應(yīng)用廣泛，廣大教師也做了一些嘗試和應(yīng)用型的研究，但還存在一些不足，特別是混合教學(xué)設(shè)計(jì)、規(guī)范性、混合性方面的應(yīng)用較少。因此，本研究以”HTML5 UI設(shè)計(jì)實(shí)訓(xùn)”課程為載體，依托ADDIE教學(xué)設(shè)計(jì)模型和4C/ID教學(xué)設(shè)計(jì)模型，參考國內(nèi)外的研究現(xiàn)狀，設(shè)計(jì)出以工作過程為導(dǎo)向的課程混合教學(xué)設(shè)計(jì)架構(gòu)。

一、工作過程導(dǎo)向的”HTML5 UI設(shè)計(jì)實(shí)訓(xùn)”混合教學(xué)設(shè)計(jì)與實(shí)踐的思路

ADDIE模型共有五個(gè)環(huán)節(jié)，將”HTML5 UI設(shè)計(jì)實(shí)訓(xùn)”課程的混合教學(xué)設(shè)計(jì)分為五個(gè)階段。

(一)分析階段

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

(二)設(shè)計(jì)階段

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

(三)開發(fā)階段

針對設(shè)計(jì)階段最后的混合教學(xué)策略開發(fā)符合相應(yīng)的課程資源，以數(shù)字資源為主，適合線上線下使用，符合職業(yè)教育理念，具體呈現(xiàn)的形式有工作過程導(dǎo)向崗位要求的任務(wù)單、知識與技能的微課、各種形式的多媒體課件、以職業(yè)素養(yǎng)為內(nèi)容的動畫、以及客觀評價(jià)的測試習(xí)題庫等，可以利用網(wǎng)絡(luò)教學(xué)平臺、iPad、平板、智能手機(jī)等開展”HTML5 UI設(shè)計(jì)實(shí)訓(xùn)”課程技能測試。

(四)實(shí)施階段

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

(五)評價(jià)階段

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

二、工作過程導(dǎo)向的”HTML5 UI設(shè)計(jì)實(shí)訓(xùn)”混合教學(xué)設(shè)計(jì)與實(shí)踐的過程

(一)分析階段

1.學(xué)習(xí)情境分析

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

2.學(xué)習(xí)者分析

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

(二)設(shè)計(jì)階段

1.學(xué)習(xí)任務(wù)設(shè)計(jì)

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

2.學(xué)生的角色設(shè)計(jì)

成立項(xiàng)目組，每組有自己的團(tuán)隊(duì)名稱，成員構(gòu)成6到7人為宜，每個(gè)學(xué)生都有自己的崗位職責(zé)，整組的任務(wù)安排以工作過程為導(dǎo)向，按照崗位要求，學(xué)生各司其職，教師給每個(gè)學(xué)生下具體的工作任務(wù)單[5]。

3.教師的角色設(shè)計(jì)

教師的角色不固定，可以根據(jù)教學(xué)設(shè)計(jì)的不同階段擔(dān)任不同的崗位職責(zé)，配合學(xué)生的項(xiàng)目任務(wù)的完成，可以出任項(xiàng)目經(jīng)理，對各個(gè)項(xiàng)目組提要求，下達(dá)工作過程導(dǎo)向任務(wù)單，即對學(xué)生提出學(xué)習(xí)目標(biāo)的要求，并設(shè)置時(shí)間節(jié)點(diǎn)，定期檢查任務(wù)成果；教師還可以出任客戶的角色，將學(xué)生的項(xiàng)目任務(wù)作為“業(yè)務(wù)”，學(xué)生完成任務(wù)后，有客戶驗(yàn)收，是否滿足業(yè)務(wù)功能需求，教師的角色由教轉(zhuǎn)變?yōu)閷?dǎo)。

(三)開發(fā)階段

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

(四)實(shí)施階段

計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)學(xué)生入學(xué)時(shí)會進(jìn)行分班，在第1學(xué)期開設(shè)”HTML5 UI設(shè)計(jì)實(shí)訓(xùn)”課程，我們分別從2018級學(xué)生中選擇5個(gè)班級按照傳統(tǒng)的教學(xué)方式進(jìn)行考核、2019級學(xué)生中選擇3個(gè)班級進(jìn)行傳統(tǒng)+過程性教學(xué)的考核評價(jià)方式和2020級學(xué)生中選擇3個(gè)班級進(jìn)行工作過程導(dǎo)向的混合式教學(xué)考核。

(五)評價(jià)階段

借助泛雅網(wǎng)絡(luò)教學(xué)平臺實(shí)現(xiàn)了課程技能測試信息化、標(biāo)準(zhǔn)化、無紙化。將超星泛雅網(wǎng)絡(luò)教學(xué)平臺的線上測試比例設(shè)置為四分之三，利用學(xué)校機(jī)房、實(shí)訓(xùn)室等線下測試比例設(shè)置為四分之一，除了實(shí)訓(xùn)室機(jī)房上機(jī)實(shí)訓(xùn) ( 課內(nèi)實(shí)訓(xùn) ) 為線下測試外， 其他的七種要素項(xiàng)均在泛雅平臺線上由任課教師根據(jù)課程性質(zhì)和平臺功能版面模塊進(jìn)行考核測試，自動記錄產(chǎn)生形成性評價(jià)的結(jié)果，最終導(dǎo)出文件。

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

表1 “HTML5 UI設(shè)計(jì)實(shí)訓(xùn)”工作過程導(dǎo)向混合教學(xué)與傳統(tǒng)教學(xué)的考核配對樣本檢驗(yàn)

不同班級采用不同的教學(xué)方法后的考核評價(jià)數(shù)據(jù)圖例見圖1，采用工作過程導(dǎo)向混合教學(xué)方式后，教師根據(jù)主觀喜好隨意送分的現(xiàn)象減少了，使優(yōu)秀和良好比例的學(xué)生有所下降，成績常態(tài)化分布，中等和及格比例的學(xué)生有所上升，臨時(shí)抱佛腳等平時(shí)不認(rèn)真學(xué)習(xí)的學(xué)生成績回歸常態(tài)、期末突擊、死記硬背的學(xué)生也因?yàn)榭己朔椒ǖ膶?shí)施逐漸較少，這樣導(dǎo)致了圖例中不及格比例略有升高，真正體現(xiàn)了學(xué)生的學(xué)習(xí)情況。

圖1 課程不同教學(xué)方式實(shí)施效果比照

三、結(jié)束語

本研究以”HTML5 UI設(shè)計(jì)實(shí)訓(xùn)”課程為例，以工作過程導(dǎo)向?yàn)橹骶€，結(jié)合經(jīng)典的教學(xué)設(shè)計(jì)模型：ADDIE模型和4C/ID模型，進(jìn)行”HTML5 UI設(shè)計(jì)實(shí)訓(xùn)”混合式教學(xué)設(shè)計(jì)，依托超星泛雅網(wǎng)絡(luò)教學(xué)平臺開展混合式教學(xué)實(shí)踐。通過”HTML5 UI設(shè)計(jì)實(shí)訓(xùn)”線上和線下的混合教學(xué)，工作過程崗位能力融入課程教學(xué)中，學(xué)生的學(xué)習(xí)興趣提高了，滿意度和自主學(xué)習(xí)能力等各種綜合素質(zhì)得到了質(zhì)的提升。