《計算機的硬件組成》學習工具制作綜述

特色與亮點

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

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

制作背景

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

設計思路及內容結構

1.設計思路

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

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

2.內容結構

（1）計算機的系統組成

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

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

（2）計算機的基本組成

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

（3）主機箱里有什么

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

（4）主板

主板是承載計算機所有硬件設備運行的平臺，它既是連接各個部件的物理通路，也是各部件之間數據傳輸的邏輯通路。對主板的介紹以計算機屏幕的形式出現，采用計算機的界面來介紹計算機的硬件部件。在主板的界面中，主板圖片是GIF格式，設置“滑動圖片”的提示，拖動鼠標左鍵，即可顯示主板電路的走向，模擬現實電路，讓學生更清晰地認識主板的工作原理。

（5）CPU、顯卡、內存

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

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

（6）輸入設備、輸出設備

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

（7）考眼力

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

（8）測一測

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

關鍵技術處理

1.展示效果

（1）文本打字效果

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

（2）圖片放大展示效果

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

（3）猜卡片游戲效果

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

（4）測試題效果

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

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

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

2.應用的組件

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

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

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

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

文本：文本對象用于在iH5工具中插入一段文本，并可動態記錄和顯示系統運行時所產生的文本數據。

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

頁面：頁面工具為案例添加頁面，可實現翻頁的效果。

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

（3）交互組件（計數器、事件）

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

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

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

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

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

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

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

幕前幕后

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

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

評委印象

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

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

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

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