小白應該如何來制作HTML5交互課件？

時間：2023-07-05 19:18:02 | 來源：網(wǎng)站運營

時間：2023-07-05 19:18:02 來源：網(wǎng)站運營

小白應該如何來制作HTML5交互課件？： 首先什么才算是好的課件呢？我認為評價課件好壞的首要標準應該是課件知識點是否涵蓋完全，能否完成教學的需要。其次才是課件是否有趣，采用何種表現(xiàn)形式。無論是過去的板書、投影，到前幾年的ppt、flash動態(tài)課件，一直到今天我講的最熱的h5交互課件，傳授知識才是課件的靈魂。
隨著教育2.0的推進，html5技術(shù)在教學應用里越來越重要，h5交互課件正加速淘汰過去的flash課件、steam課件、scorm分屏課件。h5交互課件的制作形式可以說是多種多樣的，總結(jié)起來大致分為三種。
第一種是用傳統(tǒng)的網(wǎng)頁元素（dom）標簽來制作。第二種是用在網(wǎng)頁canvas標簽內(nèi)原生開發(fā)。第三種是用成熟的js引擎搭配canvas開發(fā)。


第一種方法制作的課件，市面上代表產(chǎn)品是“易企秀”，課件更適用于企業(yè)介紹，產(chǎn)品移動端推廣。它的原理是工具封裝css3動畫，讓網(wǎng)頁上的一個個dom元素動態(tài)組合，完成效果。它的優(yōu)點是加載速度快，流暢度高。缺點也很明顯，無法勝任復雜的交互。


第二種方法制作的課件，一般是開發(fā)團隊自己搭建環(huán)境，用html5里canvas畫布標簽，js操作元素，展現(xiàn)在canvas上。缺點是，小團隊缺少經(jīng)驗，開發(fā)效率比較低。


第三種方法，是市面上頭部教育公司（好未來、新東方等）開發(fā)團隊或者教育集團合作的第三方技術(shù)方案提供方最常提供的方法。就是采用成熟的web引擎，搭配動畫，依照具體環(huán)境需求來選擇最合適的引擎來編寫的課件。我所了解的業(yè)內(nèi)課件領域最專業(yè)的課件制作公司之一杭州紅格子網(wǎng)絡科技有限公司（http://www.redgezi.cn），他們有上萬講次上百系列的h5課件制作經(jīng)驗，他們對課件選用哪種引擎有一套嚴格的標準。比如在電子白板上播放的課件，在一體機上播放的課件，或者在移動端上播放的課件，或者是在1v1場景pc上播放的課件，他們都會推薦不同的引擎來用。選用一個引擎，決定著制作的難易，優(yōu)化的方向不同。


選用了合適的引擎之后，就要開始制作了。制作課件，首先要有完善的腳本。一個好的課件，腳本就決定了課件成功的一半。寫的多的腳本，未必就是好腳本。腳本在精，不在繁。腳本要把課件的知識點全部涵蓋，額外的表現(xiàn)形式，更多應該交給制作老師。腳本編寫老師往往夾了太多不是核心的內(nèi)容在課件里，這樣，其實限制了課件制作的發(fā)揮。后面我會講h5交互課件的幾個細節(jié)。
1. 第一講課件的重要性
為什么說，第一講課件決定整體課件的質(zhì)量呢。因為，第一講課件在整體風格上給整個課件定了基調(diào)。在動畫質(zhì)量上，為后續(xù)動畫制作劃了線。
2.交互題目的類型、交互方式
h5交互課件的交互方式有：點擊、拖拽、連線、畫線（畫筆功能）。
3.h5課件的性能
adobe公司發(fā)展的這么多年，flash的性能優(yōu)化到了一定程度。相比flash，h5還是一個比較年輕的技術(shù)，在移動端，尤其是早幾年的智能手機終端上，h5表現(xiàn)并不好。但是，隨著智能終端硬件的升級，h5課件的性能問題已經(jīng)越來越不是問題了。對市面上最近一兩年內(nèi)的硬件，我上面提到的杭州紅格子，他們依然有相應成熟的優(yōu)化方式。