《計(jì)算機(jī)的硬件組成》學(xué)習(xí)工具制作綜述

特色與亮點(diǎn)

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

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

制作背景

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

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

1.設(shè)計(jì)思路

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

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

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

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

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

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

（2）計(jì)算機(jī)的基本組成

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

（3）主機(jī)箱里有什么

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

（4）主板

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

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

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

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

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

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

（7）考眼力

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

（8）測(cè)一測(cè)

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

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

1.展示效果

（1）文本打字效果

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

（2）圖片放大展示效果

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

（3）猜卡片游戲效果

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

（4）測(cè)試題效果

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

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

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

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

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

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

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

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

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

（2）容器組件（頁(yè)面、容器和對(duì)象組）

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

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

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

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

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

（4）動(dòng)畫(huà)組件（時(shí)間軸、滑動(dòng)時(shí)間軸、動(dòng)效、軌跡等）

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

滑動(dòng)時(shí)間軸：滑動(dòng)時(shí)間軸可以添加滑動(dòng)區(qū)域，可通過(guò)滑動(dòng)控制其他對(duì)象的播放過(guò)程。

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

軌跡：軌跡可以理解為在時(shí)間坐標(biāo)內(nèi)為對(duì)象添加控制點(diǎn)，使對(duì)象添加動(dòng)畫(huà)效果。軌跡可單獨(dú)添加至對(duì)象下，也可配合時(shí)間軸、滑動(dòng)時(shí)間軸使用。

幕前幕后

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

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

評(píng)委印象

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

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

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

（點(diǎn)評(píng)人：NOC活動(dòng)評(píng)委/重慶市江北區(qū)教師進(jìn)修學(xué)院 曾維義）