基于HTML5微課平臺的開發與實現

李麗平，薛玉倩

（河北軟件職業技術學院 軟件工程系，河北 保定 071000）

基于HTML5微課平臺的開發與實現

李麗平，薛玉倩

（河北軟件職業技術學院 軟件工程系，河北 保定 071000）

隨著信息技術的高速發展，教學方式與學習方式都逐步多元化，傳統的大單元、大容量的課程資源已不能滿足學習者個性化、碎片化、微型化的學習需求。微課是教育信息化不斷發展的產物，其主題明確，內容精煉，符合學習者的學習需求，為高職教育提供了新的教學方式。構建基于HTML5的微課平臺能將微課更好地應用到“互聯網+教育”的移動學習中，從而提高學生的學習效率，實現教學資源的充分利用。

HTML5；微課；Hybrid APP

0 引言

隨著教育信息化的不斷深入，教育理念與新技術不斷結合，學習者越來越多地通過網絡獲取知識，教育資源也更加數字化、智能化、多媒體化。隨著網絡技術與通訊技術的高速發展，“微博”“微信”等新媒體不斷涌現，當今時代已成為“微時代”。在教育領域，微課正逐漸興起，已成為一種新型的教學資源，推進了教學模式的轉變。微課是針對某個主題或知識而展開的微型視頻教程，其內容呈“點”狀、碎片化。微課教學內容精煉、資源容量豐富，適合互聯網環境下的傳播與共享，加上無線網絡的高速發展與智能手機的普及，微課實現了教師“教”的資源與學生“學”的資源在互聯網的成功對接。微課作為新的教學資源，在高職教育的課程開發及應用中具有廣闊的發展前景。高職教育著重培養高技術技能型人才，所以較為注重操作技能的熟練掌握[1]。但高職教育的實訓課面臨著師資、實訓場地、實訓耗材的限制，而微課的出現使這些問題在一定程序上得到緩解。隨著4G網絡的普及，智能移動終端的應用范圍日益擴大，移動學習已成為學習者一種高效、先進、科學的學習手段。通過教育心理學的研究，學習者精神集中持續時間大約為10分鐘左右，而微課恰恰符合學習者的這種學習特點。而從學習交流來講，微課平臺為學習者提供了信息共享與交流的平臺，激發了學習者的學習動機，促進了其知識的建構。HTML5具有跨平臺性等特點，從而擺脫了對操作系統平臺的依賴，成為主流Web開發的技術標準之一，Web應用、手機游戲、網頁開發帶來了新的發展方向。基于HTML5的微課平臺通過HTML5技術將客戶端界面與網頁組合并入同一流程中，以達到信息的交互與共享，實現了頁面之間的整合嵌入，不僅更好地滿足了學習者自主學習的需求，還輔助教師提高了教學質量[2]。

1 平臺開發相關技術

1.1 Hybrid APP

PC端平臺的開發有BS與CS兩種模式，移動端的開發也可分為直接安裝運行在操作系統上的本地應用開發與基于瀏覽器的Web應用開發。移動端的本地應用有著較好的用戶體驗，Web應用在部署、更新等方面具有優勢。因此綜合兩種模式的優點整合出了混合模式應用。移動APP開發模式主要包括Native APP（原生開發模式）、Web App（網頁開發模式）、Hybrid APP（混合開發模式），三種開發模式特性如表1所示。Hybrid APP開發模式是基于Native APP與Web App兩種開發模式綜合發展而來的模式，它較好地結合了二者的優勢，不僅符合互聯網發展的趨勢，也體現了體驗優勢與低成本優勢。Hybrid APP由于具有跨平臺、低成本開發、良好交互式體驗的優點，成為了移動APP開發的首選模式[3]。

表1 開發模式特性比較表

1.2 Ionic Framework

Ionic Framework是用來構建Hybrid APP的HTML5移動應用開發框架之一。混合型的應用是通過一個小型的HTML5網站，使用客戶端包裹的shell，來實現訪問本地網絡層的工作。混合應用程序在實際應用中擁有純本地應用無法比擬的優勢，特別是在網絡支持方面，并能獲得第三方代碼。Ionic不僅能處理各種UI應用程序的前端用戶界面，還能對本地移動組件的運作進行支持。Ionic擁有移動UI元素與布局，從而實現在IOS和Android環境中獲得原生SDK。Ionic具有構建移動eclipse HTML5開發框架應用程序的固定強大方式[4]。

2 基于HTML5的微課平臺

隨著4G的普及以及教育學、心理學研究的不斷深入，移動學習與課堂學習相結合的學習模式已成為一種教學趨勢。在信息化、移動化的大潮下，學習環境、教學環境、教學資源要逐步適應其發展。現今，我國的微課還主要集中在概念、設計與應用層面，但落地實踐卻是最需要的，基于HTML5的微課平臺就是為了滿足移動化學習的需要以及相應的信息化教學目標而設計的。

2.1 平臺整體設計

為了滿足移動化學習的需要以及相應的信息化教學目標，平臺由用戶管理模塊、課程管理模塊、資源管理模塊、交流學習模塊組成。用戶管理模塊具有用戶注冊與登錄、權限管理、用戶使用記錄的保存與查詢功能；課程管理模塊包含創建、訂閱課程、課程查詢與展示功能；資源管理模塊包括教學資源上傳與檢索功能，教學資源包括微課視頻、PPT、相關教學文檔；交流學習模塊包括發表評論、師生互動功能。平臺框架如圖1所示。

圖1 平臺框架圖

2.2 前端頁面結構設計

基于HTML5的微課平臺采用MVC模式設計系統架構。MVC模式由模型、視圖、控制器組成，在UI設計中有著重要的作用，它把界面拆分成三種不同的角色，每個角色實現自身的功能。MVC模式可使代碼編寫更加整潔、直觀。MVC更有利于分工開發，前端界面和服務端開發可以同時進行，并且可以使界面程序員（HTML5、CSS3、javascript）集中精力于表現形式，而程序員（C#）可以集中精力處理業務邏輯[5]。基于HTML5的微課平臺的開發架構如圖2所示。

圖2 平臺主頁結構

（1）平臺主頁，其內容主要為課程信息。Home－Ctrl控制器通過 CourseService的 getCourseList（）方法從服務器獲取課程列表及基本信息，然后通過VideoService的getVideoList（）方法獲取每門課程的課程數，再通過TeacherService的getTeachter（）方法獲取教師信息。圖3為平臺主頁結構。

（2）視頻播放頁，其功能主要完成所選視頻的播放。VideoCtrl通過CourseService的getCourseList（）方法從服務器獲取課程基本信息，通過VideoService的getVideoComment（）方法獲取評論列表，通過addComment（）添加評論，通過UserService的getUser（）獲得評論者信息。圖4為視頻播放頁結構。

圖3 平臺主頁結構

圖4 視頻播放頁結構

（3）個人主頁，主要用來顯示用戶的相關信息。UserCtrl控制器通過UserService調用getUser（）方法獲取用戶的基本信息。圖5為個人主頁結構。

圖5 個人主頁結構

3 結論

通過對高職教育線上、線下教育運行情況的深入調研，分析了高職教育系統的現實需求，結合當今移動互聯網技術、多媒體技術的發展趨勢以及高職院校的發展現狀，確立了基于HTML5的微課平臺的解決方案。基于HTML5的微課平臺的瀏覽器端界面展示通過HTML5語言來實現，應用JavaScript語言來配合HTML5實現邏輯功能；服務器端只提供部分功能與數據庫接口，平衡了B/S結構的瀏覽器端與服務器端壓力不平衡的瓶頸。HTML5技術使平臺具有較高的工作效率與高可擴展性。基于HTML5的微課平臺提高了學生的學習效率，實現了教學資源的充分利用。

［1］劉威.基于HTML5的旅游移動導覽系統的研究與實現［D］.廣州：華南理工大學，2013.

［2］余勝泉，陳敏.基于學習元平臺的微課設計［J］.開放教育研究，2014，20（1）.

［3］陳川.基于微課程的自主學習支持系統設計與開發［D］.武漢：華中師范大學.2014.

［4］涂頻.基于 HTML5的網頁設計應用［J］.辦公自動化：學術版，2013（18）.

［5］周燕，李育澤，徐義東.基于MOOC理念的微課資源網站設計［J］.現代教育技術，2014（1）.

The Development and Implementation of Micro Platform Based on HTML5

LI Li-ping,XUE Yu-qian

(Software Engineering Department,Hebei Software Institute,Hebei Baoding 071000,China)

With the fast development of society and IT,the way of teaching and learning is diversified;the traditional large units and large capacity curriculum resources can not meet the learner's personalized,fragmented and micro learning needs.Micro lecture is the product of the education informatization,it has clear theme and simplified content,and it can meet the needs of the learners and provide the new teaching method to higher vocational education.The platform can apply the micro lecture to m-learning so as to improve the learning efficiency and make full use of teaching resources.

HTML5;micro lecture;Hybrid APP

TP311

A

1673-2022（2017）03-0001-03

2017－04－17

李麗平（1972-），女，河北邯鄲人，副教授，研究方向為軟件開發與測試；薛玉倩（1978-），女，河北衡水人，副教授，碩士，研究方向為分布計算與并行處理。