基于H-TML5的移動(dòng)端微課設(shè)計(jì)分析以"PS圖像處理"課程為例

袁 芳

(寧夏警官職業(yè)學(xué)院 信息與安防工程系,寧夏 銀川 750021)

基于H-TML5的移動(dòng)端微課設(shè)計(jì)分析以"PS圖像處理"課程為例

袁 芳

(寧夏警官職業(yè)學(xué)院 信息與安防工程系,寧夏 銀川 750021)

當(dāng)前,蓬勃發(fā)展的微課作為一種重要的教育教學(xué)資源和手段,已經(jīng)不再局限于傳統(tǒng)模式,正向著移動(dòng)互聯(lián)領(lǐng)域發(fā)展.文章以"PS圖像處理"課程為例,從基于HTML5技術(shù)的移動(dòng)端微課設(shè)計(jì)的可行性、具體設(shè)計(jì)方法、實(shí)施步驟等方面展開(kāi)論述.

移動(dòng)端微課;HTML5技術(shù);PS圖像處理

微課作為近年來(lái)教育信息化領(lǐng)域研究的熱門(mén)方向,有著深刻的社會(huì)背景、理論基礎(chǔ)和技術(shù)支持.微課作為一種重要的教育教學(xué)資源和手段,在各種各類教育教學(xué)活動(dòng)中得到了廣泛的重視和應(yīng)用.終身教育和個(gè)性化學(xué)習(xí)等社會(huì)需求,要求人們借助現(xiàn)代信息技術(shù)開(kāi)發(fā)更多優(yōu)質(zhì)的、形式豐富、跨平臺(tái)的微課資源.

近年來(lái)在國(guó)內(nèi)蓬勃發(fā)展的微課模式,較為廣泛的形式是以CamtasiaStudio軟件進(jìn)行錄制的視頻,雖然適合于多平臺(tái)播放,但在制作方式、傳播途徑方面面臨著一系列困境,如微課內(nèi)容呈現(xiàn)單一,多以視頻為主;不利于用戶交互、檢索和反饋;對(duì)微課制作者的技術(shù)要求較高,更新繁瑣;限于視頻的體積,傳統(tǒng)微課不利于在移動(dòng)端學(xué)習(xí)等[1].

目前,對(duì)于傳統(tǒng)微課的研究很多,但是關(guān)于移動(dòng)學(xué)習(xí)應(yīng)用以及移動(dòng)端微課的研究較少,移動(dòng)端微課資源、平臺(tái)開(kāi)發(fā)建設(shè)還不完善.在移動(dòng)學(xué)習(xí)越來(lái)越普及的大環(huán)境下,把移動(dòng)端學(xué)習(xí)方式與微課教學(xué)結(jié)合起來(lái),不但能夠搭建出一個(gè)形式多樣、便捷個(gè)性化的移動(dòng)學(xué)習(xí)平臺(tái),更能打破以視頻為主的微課所面臨的困境,是一個(gè)值得探索的研究領(lǐng)域.

1 研究現(xiàn)狀

近年來(lái)興起的HTML5技術(shù),是在傳統(tǒng)超文本標(biāo)記語(yǔ)言(HyperText Markup Language,HTML)基礎(chǔ)上的最新版本,是Web端全新的規(guī)范化標(biāo)準(zhǔn).基于HTML5技術(shù)的微課(簡(jiǎn)稱 H5微課)適合多種平臺(tái),能有效彌補(bǔ)傳統(tǒng)微課作為視頻形式在移動(dòng)端的缺陷,更重要的是HTML5技術(shù)有豐富的交互效果,能夠開(kāi)發(fā)互動(dòng)體驗(yàn)更好的網(wǎng)頁(yè),趣味性強(qiáng),能讓用戶得到更好的學(xué)習(xí)體驗(yàn).

基于微課的基本理念,HTML5微課也是集中圍繞某一具體知識(shí)點(diǎn)或教學(xué)環(huán)節(jié)來(lái)開(kāi)展的,是適合自主學(xué)習(xí)、短小精悍、跨平臺(tái)的教學(xué)資源,特點(diǎn)如下[2]:(1)H5微課具有豐富生動(dòng)的交互功能,有利于學(xué)習(xí)者自主學(xué)習(xí);(2)H5微課易于修改,能夠根據(jù)不同的需求和教學(xué)變化及時(shí)更新;(3)使用H5組件有利于數(shù)據(jù)的收集與及時(shí)反饋,有效地實(shí)施教學(xué)評(píng)價(jià);(4)H5場(chǎng)景式平臺(tái)工具廣泛,制作效率高,技術(shù)門(mén)檻低;(5)H5微課響應(yīng)速度快,有利于學(xué)習(xí)者獲得更好的學(xué)習(xí)體驗(yàn).

目前HTML5技術(shù)較為成熟,主流的開(kāi)發(fā)工具有如下幾種類型:(1)搭建開(kāi)發(fā)環(huán)境,進(jìn)行專業(yè)的HTML5和JavaScript代碼開(kāi)發(fā);(2)選用現(xiàn)成的H5工具平臺(tái),制作交互場(chǎng)景式頁(yè)面,對(duì)于沒(méi)有編程專業(yè)基礎(chǔ)的教師來(lái)說(shuō),這種方法最易上手;(3)軟件類工具,如iSpring,FlipHTML5等轉(zhuǎn)換類工具,Articulate Storyline,Lectora 等課件類開(kāi)發(fā)工具,問(wèn)卷星、問(wèn)卷網(wǎng)等測(cè)試調(diào)查類工具[3].

2 "PS圖像處理"移動(dòng)端微課的設(shè)計(jì)

為了打破傳統(tǒng)教學(xué)的桎梏,探索一套行之有效的微課教學(xué)應(yīng)用模式,本研究擬利用HTML5技術(shù)、輔以社交分享等手段,針對(duì)形式多樣、趣味性強(qiáng)的移動(dòng)端微課的設(shè)計(jì)與開(kāi)發(fā)問(wèn)題開(kāi)展具體研究,探索一系列完整的HTML5互動(dòng)微課設(shè)計(jì)、制作和應(yīng)用解決方案.本研究擬選取寧夏警官職業(yè)學(xué)院信息與安防工程系的基礎(chǔ)必修課、具有可視化特點(diǎn)的"PS圖像處理"課程,來(lái)進(jìn)行若干案例設(shè)計(jì).此課程知識(shí)點(diǎn)繁雜、實(shí)操內(nèi)容多、強(qiáng)調(diào)學(xué)生的綜合應(yīng)用能力,學(xué)習(xí)難度較大.基于此,鼓勵(lì)學(xué)生在課下開(kāi)展移動(dòng)端微課學(xué)習(xí)是對(duì)課堂教學(xué)的有機(jī)補(bǔ)充,有利于提升教學(xué)效果.

2.1 "PS圖像處理"課程

"PS圖像處理"作為眾多計(jì)算機(jī)專業(yè)的必修專業(yè)課,是一門(mén)尤其突出應(yīng)用性和實(shí)操性軟件類課程,強(qiáng)調(diào)學(xué)生的實(shí)戰(zhàn)能力.課程內(nèi)容由淺入深,覆蓋了Photoshop的基礎(chǔ)知識(shí)、使用方法、應(yīng)用技能,除課堂講授、演示外,學(xué)生往往不容易在短時(shí)間內(nèi)理解和掌握其精髓,容易失去耐心和興趣.將"PS圖像處理"課程按照微課的模式進(jìn)行教學(xué)設(shè)計(jì)重構(gòu),形成若干短小、有針對(duì)性的小片段或?qū)ｎ},可以避免軟件說(shuō)明或案例羅列式的生硬.同時(shí),HTML5微課富交互性,容易與學(xué)生建立良好的互動(dòng),激發(fā)其學(xué)習(xí)興趣.

2.2 "PS圖像處理"移動(dòng)端微課設(shè)計(jì)的可行性

目前移動(dòng)端開(kāi)發(fā)技術(shù)及平臺(tái)成熟,如炫頁(yè)、易企秀和iH5等交互式場(chǎng)景平臺(tái),iSpring,FlipHTML5等轉(zhuǎn)換類工具,Articulate Storyline,Lectora 等課件類開(kāi)發(fā)工具,測(cè)試調(diào)查類工具等,都可以開(kāi)發(fā)出形式豐富的符合網(wǎng)絡(luò)課程標(biāo)準(zhǔn)的交互式HTML5微課.

信息與安防工程系智能終端技術(shù)與應(yīng)用專業(yè)開(kāi)設(shè)有"PS圖像處理""網(wǎng)頁(yè)制作""UI設(shè)計(jì)""移動(dòng)公眾平臺(tái)開(kāi)發(fā)""移動(dòng)終端開(kāi)發(fā)""flash動(dòng)畫(huà)制作"等系列課程群,這些為本研究的開(kāi)展提供了強(qiáng)大的專業(yè)及課程群支持.

除此之外,研究團(tuán)隊(duì)師資力量強(qiáng)大,具有豐富的教學(xué)改革經(jīng)驗(yàn)及實(shí)際開(kāi)發(fā)技術(shù)經(jīng)驗(yàn).團(tuán)隊(duì)成員前期在Web前端技術(shù)及微課教學(xué)方向有大量研究,具有學(xué)院信息管理系統(tǒng)、分類招生考試系統(tǒng)等多個(gè)項(xiàng)目的開(kāi)發(fā)經(jīng)驗(yàn),為本研究的開(kāi)展提供了豐富的理論經(jīng)驗(yàn)及實(shí)踐素材.這些無(wú)論是從技術(shù)層面,還是師資層面,都為本研究奠定了堅(jiān)實(shí)的基礎(chǔ),從而能夠從基礎(chǔ)層面保證研究自上而下的實(shí)施.

2.3 "PS圖像處理"移動(dòng)端微課的設(shè)計(jì)方法和步驟

"PS圖像處理"微課的具體開(kāi)發(fā)步驟,可以分為如下幾個(gè)階段.

(1)在文獻(xiàn)查詢、經(jīng)驗(yàn)對(duì)比總結(jié)的基礎(chǔ)上,系統(tǒng)研究HTML5微課的特點(diǎn).針對(duì)"PS圖像處理"課程展開(kāi)研究,梳理課程知識(shí)體系結(jié)構(gòu),進(jìn)行關(guān)鍵知識(shí)點(diǎn)提取,重構(gòu)課程教學(xué)設(shè)計(jì),形成典型案例.

(2)與傳統(tǒng)微課設(shè)計(jì)制作的過(guò)程類似,HTML5微課同樣需要一個(gè)良好的教學(xué)設(shè)計(jì).在全面分析課程特點(diǎn)和學(xué)習(xí)者特征、繼而提煉出關(guān)鍵知識(shí)點(diǎn)的基礎(chǔ)上,選定具體的知識(shí)點(diǎn),確定學(xué)習(xí)目標(biāo),精心設(shè)計(jì)場(chǎng)景、教學(xué)過(guò)程、教學(xué)資源、各個(gè)教學(xué)環(huán)節(jié)后,進(jìn)行微課腳本設(shè)計(jì).值得注意的是,HTML5微課強(qiáng)調(diào)的是交互性,所以在設(shè)計(jì)腳本的過(guò)程中應(yīng)當(dāng)適時(shí)加入合理的動(dòng)畫(huà)、測(cè)試表單、課后練習(xí)、游戲、鏈接跳轉(zhuǎn)等內(nèi)容,這樣才能給學(xué)習(xí)者帶來(lái)豐富的動(dòng)態(tài)效果.

(3)采用合適的技術(shù)手段方法,開(kāi)發(fā)微課案例.以簡(jiǎn)易的HTML5平臺(tái)工具為例,選擇合適的模板,根據(jù)微課設(shè)計(jì)腳本的提示制作各個(gè)場(chǎng)景頁(yè)面.需要交互的內(nèi)容可以根據(jù)整體頁(yè)面布局的情況,選擇合適的組件,如鏈接、測(cè)試、跳轉(zhuǎn)、表單等.除此之外,可以錄制配音在有需要的位置添加,或者整體添加背景音樂(lè).初步完成整個(gè)微課場(chǎng)景后還需要進(jìn)行測(cè)試,及時(shí)發(fā)現(xiàn)問(wèn)題,并進(jìn)行優(yōu)化完善.

(4)將微課案例應(yīng)用到具體教學(xué)過(guò)程中.HTML5微課完成后,將網(wǎng)址和二維碼復(fù)制,發(fā)送到學(xué)生的QQ群、微信群以及網(wǎng)絡(luò)教學(xué)平臺(tái),使學(xué)生隨時(shí)隨觀看移動(dòng)端微課.此時(shí)可以輔以一定的作業(yè)和任務(wù),激勵(lì)學(xué)生課下自主學(xué)習(xí).

(5)通過(guò)教學(xué)實(shí)踐,來(lái)檢驗(yàn)"PS圖像處理"HTML5微課的效果.通過(guò)比較研究、分析調(diào)查等方法,檢驗(yàn)項(xiàng)目成效,歸納總結(jié)經(jīng)驗(yàn).初期以信息與安防工程系信息技術(shù)類專業(yè)一年級(jí)學(xué)生(約150人)為試點(diǎn),來(lái)小范圍實(shí)施并檢驗(yàn)成效,項(xiàng)目成熟后可推廣至更多的學(xué)科,面向全院師生,受益學(xué)生數(shù)量也將隨之覆蓋全院.

3 設(shè)計(jì)創(chuàng)新及意義

本研究基于微課理念而來(lái),與時(shí)俱進(jìn)地契合移動(dòng)學(xué)習(xí)趨勢(shì),同時(shí)貼合大學(xué)生的興趣特點(diǎn),呈現(xiàn)出一種讓學(xué)生容易接受的新型便捷的移動(dòng)學(xué)習(xí)形式,有效帶動(dòng)學(xué)生的關(guān)注點(diǎn),提高其自我學(xué)習(xí)和接受知識(shí)的能力,從而提高課程的學(xué)習(xí)效率.

3.1 創(chuàng)新之處

作為微課資源的一種延伸形式,HTML5微課在本質(zhì)上依然保留了微課本身的教學(xué)特點(diǎn)的同時(shí),其自身也有一些鮮明的特點(diǎn)與創(chuàng)新之處:HTML5微課具備更加生動(dòng)的視覺(jué)聽(tīng)覺(jué)效果,能夠最大限度地提供新媒體控件下的生動(dòng)的教學(xué)體驗(yàn);基于HTML5技術(shù)制作的微課,更易在社交平臺(tái)、SNS社交網(wǎng)絡(luò)中進(jìn)行傳播,具有更大的共享可能;對(duì)比"只能看不能交互"的單一形式的視頻微課來(lái)說(shuō),HTML5微課的場(chǎng)景化模式、富交互特性,有著很大的優(yōu)勢(shì).

3.2 研究意義

"PS圖像處理"移動(dòng)端微課的研究,首先對(duì)于課程本身而言,作為課堂教學(xué)的補(bǔ)充,在未來(lái)有很大發(fā)展空間.其次,在本研究的典型HTML5微課案例的基礎(chǔ)上,進(jìn)一步系列化、規(guī)范化,形成微課程體系,不僅能激勵(lì)教師自身創(chuàng)新和職教能力的發(fā)展,而且對(duì)于其他學(xué)科和課程而言,也有非常廣闊的推廣借鑒意義.

4 結(jié)語(yǔ)

基于HTML5的互動(dòng)微課與移動(dòng)端的有機(jī)結(jié)合,打破了傳統(tǒng)視頻微課交互功能弱的局面,將進(jìn)一步活化教學(xué)內(nèi)容,帶給人豐富的互動(dòng)體驗(yàn),在很大程度上能激發(fā)學(xué)生自主學(xué)習(xí)的興趣和信心,有利于促進(jìn)學(xué)生學(xué)習(xí)方法的轉(zhuǎn)變,同時(shí)對(duì)教師自身的成長(zhǎng)也是一種極好的鍛煉.

[1]冷國(guó)華,蔡志東,許翊.HTML5互動(dòng)微課開(kāi)發(fā)與應(yīng)用[J].鎮(zhèn)江高專學(xué)報(bào),2016(3):37-41.

[2]周媛媛.淺談基于H5工具的課件制作[J].科技風(fēng),2017(4):12.

[3]鄒瑾.HTML5技術(shù)微課資源建設(shè)初探[J].西部學(xué)刊,2017(4):80.

[4]張博,劉云.基于HTML5的視頻監(jiān)控微課設(shè)計(jì)淺析[J].電腦知識(shí)與技術(shù),2016(24):208-209.

Analysis on the design of mobile terminal microlecture based on HTML5:taking "PS Image Processing" course as an example

Yuan Fang
(Information and Security Engineering Department of Ningxia Police Vocational College, Yinchuan 750021, China)

At present, the booming microlecture as an important educational and teaching resource and means, is no longer limited to the traditional mode, and is developing towards the field of mobile Internet. In this paper, taking "PS Image Processing" course as an example,discusses the feasibility, concrete design methods, implementation steps of the design of mobile terminal microlecture based on HTML5.

mobile terminal microlecture; HTML5 technology; PS image processing

袁芳(1984- ),女,寧夏銀川人,助教,碩士;研究方向:圖形圖像處理,網(wǎng)頁(yè)制作,微課教學(xué)等.