基于H-TML5的移動端微課設計分析以"PS圖像處理"課程為例

袁 芳

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

基于H-TML5的移動端微課設計分析以"PS圖像處理"課程為例

袁 芳

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

當前,蓬勃發展的微課作為一種重要的教育教學資源和手段,已經不再局限于傳統模式,正向著移動互聯領域發展.文章以"PS圖像處理"課程為例,從基于HTML5技術的移動端微課設計的可行性、具體設計方法、實施步驟等方面展開論述.

移動端微課;HTML5技術;PS圖像處理

微課作為近年來教育信息化領域研究的熱門方向,有著深刻的社會背景、理論基礎和技術支持.微課作為一種重要的教育教學資源和手段,在各種各類教育教學活動中得到了廣泛的重視和應用.終身教育和個性化學習等社會需求,要求人們借助現代信息技術開發更多優質的、形式豐富、跨平臺的微課資源.

近年來在國內蓬勃發展的微課模式,較為廣泛的形式是以CamtasiaStudio軟件進行錄制的視頻,雖然適合于多平臺播放,但在制作方式、傳播途徑方面面臨著一系列困境,如微課內容呈現單一,多以視頻為主;不利于用戶交互、檢索和反饋;對微課制作者的技術要求較高,更新繁瑣;限于視頻的體積,傳統微課不利于在移動端學習等[1].

目前,對于傳統微課的研究很多,但是關于移動學習應用以及移動端微課的研究較少,移動端微課資源、平臺開發建設還不完善.在移動學習越來越普及的大環境下,把移動端學習方式與微課教學結合起來,不但能夠搭建出一個形式多樣、便捷個性化的移動學習平臺,更能打破以視頻為主的微課所面臨的困境,是一個值得探索的研究領域.

1 研究現狀

近年來興起的HTML5技術,是在傳統超文本標記語言(HyperText Markup Language,HTML)基礎上的最新版本,是Web端全新的規范化標準.基于HTML5技術的微課(簡稱 H5微課)適合多種平臺,能有效彌補傳統微課作為視頻形式在移動端的缺陷,更重要的是HTML5技術有豐富的交互效果,能夠開發互動體驗更好的網頁,趣味性強,能讓用戶得到更好的學習體驗.

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

目前HTML5技術較為成熟,主流的開發工具有如下幾種類型:(1)搭建開發環境,進行專業的HTML5和JavaScript代碼開發;(2)選用現成的H5工具平臺,制作交互場景式頁面,對于沒有編程專業基礎的教師來說,這種方法最易上手;(3)軟件類工具,如iSpring,FlipHTML5等轉換類工具,Articulate Storyline,Lectora 等課件類開發工具,問卷星、問卷網等測試調查類工具[3].

2 "PS圖像處理"移動端微課的設計

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

2.1 "PS圖像處理"課程

"PS圖像處理"作為眾多計算機專業的必修專業課,是一門尤其突出應用性和實操性軟件類課程,強調學生的實戰能力.課程內容由淺入深,覆蓋了Photoshop的基礎知識、使用方法、應用技能,除課堂講授、演示外,學生往往不容易在短時間內理解和掌握其精髓,容易失去耐心和興趣.將"PS圖像處理"課程按照微課的模式進行教學設計重構,形成若干短小、有針對性的小片段或專題,可以避免軟件說明或案例羅列式的生硬.同時,HTML5微課富交互性,容易與學生建立良好的互動,激發其學習興趣.

2.2 "PS圖像處理"移動端微課設計的可行性

目前移動端開發技術及平臺成熟,如炫頁、易企秀和iH5等交互式場景平臺,iSpring,FlipHTML5等轉換類工具,Articulate Storyline,Lectora 等課件類開發工具,測試調查類工具等,都可以開發出形式豐富的符合網絡課程標準的交互式HTML5微課.

信息與安防工程系智能終端技術與應用專業開設有"PS圖像處理""網頁制作""UI設計""移動公眾平臺開發""移動終端開發""flash動畫制作"等系列課程群,這些為本研究的開展提供了強大的專業及課程群支持.

除此之外,研究團隊師資力量強大,具有豐富的教學改革經驗及實際開發技術經驗.團隊成員前期在Web前端技術及微課教學方向有大量研究,具有學院信息管理系統、分類招生考試系統等多個項目的開發經驗,為本研究的開展提供了豐富的理論經驗及實踐素材.這些無論是從技術層面,還是師資層面,都為本研究奠定了堅實的基礎,從而能夠從基礎層面保證研究自上而下的實施.

2.3 "PS圖像處理"移動端微課的設計方法和步驟

"PS圖像處理"微課的具體開發步驟,可以分為如下幾個階段.

(1)在文獻查詢、經驗對比總結的基礎上,系統研究HTML5微課的特點.針對"PS圖像處理"課程展開研究,梳理課程知識體系結構,進行關鍵知識點提取,重構課程教學設計,形成典型案例.

(2)與傳統微課設計制作的過程類似,HTML5微課同樣需要一個良好的教學設計.在全面分析課程特點和學習者特征、繼而提煉出關鍵知識點的基礎上,選定具體的知識點,確定學習目標,精心設計場景、教學過程、教學資源、各個教學環節后,進行微課腳本設計.值得注意的是,HTML5微課強調的是交互性,所以在設計腳本的過程中應當適時加入合理的動畫、測試表單、課后練習、游戲、鏈接跳轉等內容,這樣才能給學習者帶來豐富的動態效果.

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

(4)將微課案例應用到具體教學過程中.HTML5微課完成后,將網址和二維碼復制,發送到學生的QQ群、微信群以及網絡教學平臺,使學生隨時隨觀看移動端微課.此時可以輔以一定的作業和任務,激勵學生課下自主學習.

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

3 設計創新及意義

本研究基于微課理念而來,與時俱進地契合移動學習趨勢,同時貼合大學生的興趣特點,呈現出一種讓學生容易接受的新型便捷的移動學習形式,有效帶動學生的關注點,提高其自我學習和接受知識的能力,從而提高課程的學習效率.

3.1 創新之處

作為微課資源的一種延伸形式,HTML5微課在本質上依然保留了微課本身的教學特點的同時,其自身也有一些鮮明的特點與創新之處:HTML5微課具備更加生動的視覺聽覺效果,能夠最大限度地提供新媒體控件下的生動的教學體驗;基于HTML5技術制作的微課,更易在社交平臺、SNS社交網絡中進行傳播,具有更大的共享可能;對比"只能看不能交互"的單一形式的視頻微課來說,HTML5微課的場景化模式、富交互特性,有著很大的優勢.

3.2 研究意義

"PS圖像處理"移動端微課的研究,首先對于課程本身而言,作為課堂教學的補充,在未來有很大發展空間.其次,在本研究的典型HTML5微課案例的基礎上,進一步系列化、規范化,形成微課程體系,不僅能激勵教師自身創新和職教能力的發展,而且對于其他學科和課程而言,也有非常廣闊的推廣借鑒意義.

4 結語

基于HTML5的互動微課與移動端的有機結合,打破了傳統視頻微課交互功能弱的局面,將進一步活化教學內容,帶給人豐富的互動體驗,在很大程度上能激發學生自主學習的興趣和信心,有利于促進學生學習方法的轉變,同時對教師自身的成長也是一種極好的鍛煉.

[1]冷國華,蔡志東,許翊.HTML5互動微課開發與應用[J].鎮江高專學報,2016(3):37-41.

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

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

[4]張博,劉云.基于HTML5的視頻監控微課設計淺析[J].電腦知識與技術,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- ),女,寧夏銀川人,助教,碩士;研究方向:圖形圖像處理,網頁制作,微課教學等.