特色與亮點

本學習工具是采用iH52.0版本在線互動編輯工具制作的H5頁面課件。iH5是一款基于云端的網(wǎng)頁交互設(shè)計工具，國內(nèi)極客自主開發(fā)的多媒體互動設(shè)計編輯器，不需要寫代碼就可以實現(xiàn)交互設(shè)計，如互動視頻、網(wǎng)站、動畫、APP、朋友圈營銷活動、H5小游戲、多屏互動等，且一個作品可以兼容所有屏幕與所有瀏覽器。

本學習工具采用交互式的課件形式引導(dǎo)學生學習計算機的硬件組成，通過互動的方式，使學生加強對計算機硬件的認識，進一步了解硬件的作用，并以循序漸進的方式呈現(xiàn)內(nèi)容，符合學生的認知特點。

制作背景

本學習工具應(yīng)用的教材內(nèi)容是人民教育出版社、內(nèi)蒙古教育出版社七年級上冊信息技術(shù)第3章計算機系統(tǒng)初步活動1計算機的硬件組成。在課堂教學中，教師在講述計算機的硬件知識時，大部分采用的是理論教學和實物觀察的教學方法。無論是教學課件，還是實物觀察，與學生交互都較少，內(nèi)容也都枯燥無味，無法激起學生學習硬件的興趣。鑒于此，設(shè)計H5作品，可以讓學生進行交互，加強對硬件知識的理解。

設(shè)計思路及內(nèi)容結(jié)構(gòu)

1.設(shè)計思路

①學習計算機的硬件內(nèi)容經(jīng)常受時間、空間的限制，不能隨時隨地學習。計算機的硬件系統(tǒng)包括主機和外部設(shè)備，主機包括CPU、主板、內(nèi)存、硬盤、聲卡、網(wǎng)卡等。由于這些設(shè)備是在主機里，只有在課堂上才可以實物觀察，平時生活中無法真正接觸，無法實現(xiàn)隨時隨地觀看學習。要打破此限制，可以將硬件設(shè)備以H5頁面的形式呈現(xiàn)，讓學生實現(xiàn)隨時隨地觀看學習。

②大部分計算機的硬件課件與學生互動較少，不能有效激發(fā)學生的學習興趣。網(wǎng)絡(luò)上關(guān)于計算機的硬件課件大部分是以PPT的形式呈現(xiàn)理論知識，屬于靜態(tài)課件。將此課件應(yīng)用于課堂中，會使課堂枯燥無味，學生只能接受消化一部分知識，同時也不利于激發(fā)學生的學習興趣。而設(shè)計H5頁面的計算機硬件課件，能增強互動性。

2.內(nèi)容結(jié)構(gòu)

（1）計算機的系統(tǒng)組成

①以“卡通教師、黑板、課桌和書”的形式呈現(xiàn)本節(jié)課的知識內(nèi)容，是為了更好地貼近課堂教學，營造課堂學習的氛圍，使學生盡快地進入學習狀態(tài)。

②內(nèi)容以“打字機的效果”出現(xiàn)，類似教師粉筆寫字，將本節(jié)課主要的內(nèi)容直觀地呈現(xiàn)出來，使學生能快速了解本節(jié)課的內(nèi)容。

（2）計算機的基本組成

計算機的基本組成包括顯示器、主機、鼠標、鍵盤。H5界面中插入包括顯示器、主機、鼠標和鍵盤的圖片，在圖片上設(shè)置手勢圖標標識點擊的區(qū)域，提示學生點擊，點擊后即可在設(shè)備上出現(xiàn)對應(yīng)的設(shè)備名稱，以此來認識各個設(shè)備的名稱。通過“事件”“透明按鈕”和“動效”，實現(xiàn)點擊出現(xiàn)的效果。

（3）主機箱里有什么

主機箱里有主板、CPU、內(nèi)存、顯卡、聲卡、硬盤、光驅(qū)等。將設(shè)備圖片以兩列進行排布，并設(shè)置手勢“點擊圖片變大”，提示學生點擊圖片，點擊后會出現(xiàn)設(shè)備對應(yīng)的名稱和圖片放大的效果，以便學生清晰地觀看硬件設(shè)備和識記設(shè)備名稱。通過“容器”“時間軸”和“計數(shù)器”實現(xiàn)點擊圖片放大的效果。

（4）主板

主板是承載計算機所有硬件設(shè)備運行的平臺，它既是連接各個部件的物理通路，也是各部件之間數(shù)據(jù)傳輸?shù)倪壿嬐贰χ靼宓慕榻B以計算機屏幕的形式出現(xiàn)，采用計算機的界面來介紹計算機的硬件部件。在主板的界面中，主板圖片是GIF格式，設(shè)置“滑動圖片”的提示，拖動鼠標左鍵，即可顯示主板電路的走向，模擬現(xiàn)實電路，讓學生更清晰地認識主板的工作原理。

（5）CPU、顯卡、內(nèi)存

CPU是中央處理器的簡稱，是計算機的心臟，也是計算機中最重要的組件，它決定計算機的基本性能；顯卡和顯示器構(gòu)成個人計算機的顯示系統(tǒng)，顯卡是顯示器與主機通信的控制電路和接口，是個人計算機操作中實現(xiàn)人機交互的重要設(shè)備；隨機存儲器在CPU運行期間既可讀出信息又可寫入信息，但在斷電后所存的信息就會丟失，只讀存儲器，關(guān)電后存儲器里的信息不會消失。

“CPU、顯卡、內(nèi)存”內(nèi)容以文字和圖片相結(jié)合的形式呈現(xiàn)。CPU配圖是Intel中央處理器的正反面；“顯卡”內(nèi)容以打字機的效果呈現(xiàn)；隨機存儲器和只讀存儲器圖片是根據(jù)隨機存儲器的讀寫功能和只讀存儲器的只讀功能的含義進行配圖。

（6）輸入設(shè)備、輸出設(shè)備

輸入設(shè)備包括鼠標、手寫板、鍵盤、數(shù)碼相機等圖片，設(shè)置“點擊圖像”提示按鈕，三秒后消失，點擊圖片，設(shè)備對應(yīng)的設(shè)備名稱在圖片下方相對應(yīng)地顯示出來。輸出設(shè)備包括顯示器、打印機、音響等，以圖片和文本的形式呈現(xiàn)。

（7）考眼力

“說一說，硬件名稱分別是什么？”六個硬件圖片以三排兩列的形式呈現(xiàn)，學生觀看圖片思考該硬件是什么。為了驗證是否正確，設(shè)置了“點擊圖片看對錯”按鈕，三秒后消失，點擊圖片，即可出現(xiàn)圖片背后的“硬件名稱”，類似猜卡片游戲的形式答題，增加了趣味性。

（8）測一測

“測一測”用于檢驗學生掌握知識的情況，通常以選擇題的形式出現(xiàn)。本學習工具的“測一測”環(huán)節(jié)共有三個選項，當選擇答案后，選中的答案會上下彈跳，以表示此選項為選擇的答案。若選擇的答案是正確的，右下角會出現(xiàn)“√”的標志，若選擇的答案是錯誤的，右下角出現(xiàn)“×”的標志，以此幫助學生判斷正誤。

關(guān)鍵技術(shù)處理

1.展示效果

（1）文本打字效果

通過“文本工具”和“事件”相結(jié)合實現(xiàn)“文本打字效果”。利用文本工具將內(nèi)容輸入，添加事件，當觸發(fā)條件為“對象出現(xiàn)”時，目標對象“文本”的目標動作為“打字效果出現(xiàn)”，時長“2s”（如圖1）。

（2）圖片放大展示效果

通過“時間軸”“計數(shù)器”“軌跡”和“事件”相結(jié)合實現(xiàn)“圖片放大顯示效果”。圖片要實現(xiàn)點擊一次放大、再次點擊縮小的目的，需要添加時間軸，設(shè)置直線軌跡，為計數(shù)器和圖片自身添加事件。圖片添加事件，觸發(fā)對象“圖片”，當觸發(fā)條件為“手指按下”時，目標對象“計數(shù)器”的目標動作為“加1”（如上頁圖2）。計數(shù)器添加事件1，觸發(fā)對象“計數(shù)器”，當觸發(fā)條件“為奇數(shù)”時，目標對象“時間軸”的目標動作為“從頭播放”（如圖3）；再次添加事件2，觸發(fā)對象“計數(shù)器”，當觸發(fā)條件“為偶數(shù)”時，目標對象“時間軸”的目標動作為“反向播放”（如圖4）。

（3）猜卡片游戲效果

要實現(xiàn)“猜卡片游戲”效果，需事先準備卡片的正反面圖片，并將兩個圖片疊放在一起。為頂層的圖片添加事件，觸發(fā)對象“頂層圖片”，當觸發(fā)條件為“手指按下”時，目標對象“圖片”的目標動作為“隱藏”（如圖5）。

（4）測試題效果

通過“透明按鈕”“動效”“事件”相結(jié)合實現(xiàn)“測試題”效果。當點擊正確答案時，題目下方顯示“√”，點擊錯誤答案時，題目下方顯示“×”。在點擊正確答案前，“對或錯”圖片要隱藏，設(shè)置透明按鈕“遮罩”將“對或錯”圖片的區(qū)域選中，并隱藏。當點擊選項時，為選項添加事件組，事件1“選擇彈跳”，目標對象“動效”的目標動作為“開始”（如圖6），目的是顯示出選擇的答案；事件2“顯示打叉”，目標對象“對或錯”圖片的目標動作為“顯示”（如圖7），目的是顯示出“對或錯”圖片；事件3“顯示遮罩”，目標對象“遮罩”的目標動作“顯示”（如圖8），將“遮罩”顯示出來。

（5）提示按鈕閃爍2秒效果

要實現(xiàn)“提示按鈕閃爍2秒”效果，需應(yīng)用“透明按鈕”“事件”和“動效”。為提示按鈕圖片設(shè)置動效，動效類型“閃爍”，時長“2s”。為透明按鈕設(shè)置區(qū)域，添加事件，觸發(fā)條件“點擊（PC中）”，目標對象“提示按鈕圖片”的目標動作為“隱藏”（如圖9）。提示按鈕圖片閃爍2秒后隱藏。

2.應(yīng)用的組件

（1）素材組件（透明按鈕、中文字體、圖片、文本等）

透明按鈕：透明按鈕為iH5工具中專門用于承擔交互功能的透明組件，由于其具有完全透明的外觀，可覆蓋在任意圖文對象上方，充當交互按鈕使用。對于某些尺寸較小、不便觸控的交互組件，通過添加透明按鈕可以擴大交互區(qū)域，優(yōu)化交互體驗。

中文字體：中文字體對象是iH5工具中專門用于插入中文文本的特殊字體工具。其原理是將添加的中文數(shù)據(jù)轉(zhuǎn)化為圖片，從而避免因為不同設(shè)備環(huán)境不同、字庫缺失等問題所造成的顯示差異。

圖片：圖片對象用于在iH5工具中插入單一圖片，支持JPG、JPEG、PNG、GIF格式的圖形素材。

文本：文本對象用于在iH5工具中插入一段文本，并可動態(tài)記錄和顯示系統(tǒng)運行時所產(chǎn)生的文本數(shù)據(jù)。

（2）容器組件（頁面、容器和對象組）

頁面：頁面工具為案例添加頁面，可實現(xiàn)翻頁的效果。

容器和對象組：容器可作為對象管理的工具，同時容器下允許添加子對象。容器和對象組的區(qū)別在于，容器默認創(chuàng)建為寬高都為1，而對象組需要用戶繪制區(qū)域添加。

（3）交互組件（計數(shù)器、事件）

計數(shù)器：計數(shù)器可用于數(shù)值的記錄、分數(shù)的記錄等，也可以作為輔助對象實現(xiàn)其他效果。

事件：事件用于對象之間的控制方式。事件是通過控制A讓B做某件事情。事件的四要素分別是觸發(fā)對象、觸發(fā)條件、目標對象、目標動作。

（4）動畫組件（時間軸、滑動時間軸、動效、軌跡等）

時間軸：時間軸不是媒體素材，它被創(chuàng)建時不可見，也沒有大小。時間軸內(nèi)可控制多個對象的播放過程。

滑動時間軸：滑動時間軸可以添加滑動區(qū)域，可通過滑動控制其他對象的播放過程。

動效：動效可為對象添加動態(tài)效果，動效的本質(zhì)是軌跡，因此可以進行編輯，自定義動效。

軌跡：軌跡可以理解為在時間坐標內(nèi)為對象添加控制點，使對象添加動畫效果。軌跡可單獨添加至對象下，也可配合時間軸、滑動時間軸使用。

幕前幕后

在制作“計算機的硬件組成”H5作品時，前期對教學過程中遇到的重點、難點知識進行梳理，最終將“計算機的硬件組成”作為本學習工具的知識點，主要是由于計算機的硬件組成受到多方面的限制，包括計算機的硬件資源和課件資源等限制，而且內(nèi)容較晦澀難懂，較難掌握。為了突破此壁壘，設(shè)計H5交互頁面，使學生在H5頁面上能夠?qū)崿F(xiàn)隨時隨地進行交互式學習，進一步加強對計算機的硬件組成的理解。

本學習工具應(yīng)用iH5在線編輯工具制作，iH5無需下載，在線即可編輯，而且零代碼。為了更好地進行交互式的設(shè)計，筆者學習了此網(wǎng)站中的案例教學，包括各個組件的應(yīng)用、案例以及iH5特效，如文本打字效果出現(xiàn)、照片放大展示效果、360度物體展示、物理引擎、720全景&地圖、拖動物品等。將計算機的硬件組成知識與iH5的交互式效果相結(jié)合，制作出適合學生學習的交互式課件。在之后的教學中，可以采用iH5在線編輯工具設(shè)計教學課件，寓教于樂，使學生能夠進行交互式的學習，這樣有利于學生對知識的掌握，也能夠吸引學生的注意力和提升學生的學習興趣。

評委印象

張歡老師善于挖掘新工具、新技術(shù)的功能，將其跟學科教育深度融合，把原本用理論教學和實物觀察的計算機硬件部分學習內(nèi)容制作成具有交互功能的H5頁面課件，實現(xiàn)了跨平臺、跨終端的自適應(yīng)使用，讓學生不受時間、空間限制地去學習，并能根據(jù)個體差異調(diào)節(jié)學習進度，實現(xiàn)了個性學習和泛在學習。

該學習工具對學習內(nèi)容進行了系統(tǒng)梳理，通過文本、圖片、音頻、視頻等多種媒體與交互、色彩、創(chuàng)意的有機融合，讓枯燥乏味的內(nèi)容變得趣味橫生；用學生熟悉的場景設(shè)計，貼近課堂教學，有效引導(dǎo)學生進行自主學習，較好地提升了學習的有效性和自覺性。該學習工具還實現(xiàn)了較好的學習交互，通過點擊顯示、猜卡片等方式，跟學生互動，提高學生的學習參與度，幫助學生實現(xiàn)知識建構(gòu)；通過循序漸進的方式呈現(xiàn)教學內(nèi)容，符合學生的認知規(guī)律。

當然，該學習工具也存在一定的不足，如美工設(shè)計與用戶體驗略顯不足，教學內(nèi)容呈現(xiàn)形式的創(chuàng)新性與智能性有待提高。建議：①硬件部分內(nèi)容的學習要做到“虛擬”與“現(xiàn)實”結(jié)合，通過“觸感”提升學生對硬件的直觀體驗；②在頁面課件的基礎(chǔ)上開發(fā)學科主題學習網(wǎng)站，并且逐漸增加學習內(nèi)容，實現(xiàn)系列化開發(fā)。

（點評人：NOC活動評委/重慶市江北區(qū)教師進修學院 曾維義）