《基于HTML5的交互式課件開發(fā)》短學(xué)期教學(xué)探索與實踐

莫小梅

摘要：結(jié)合《網(wǎng)頁編程基礎(chǔ)》的短學(xué)期項目開發(fā)需求，提出了《基于HTML5的交互式課件開發(fā)》這一短學(xué)期項目名稱。明確了項目的任務(wù)、目標(biāo)及實施步驟。并在項目實踐的過程中對項目的引導(dǎo)、過程管理及項目驗收都進(jìn)行了有益地探索。

關(guān)鍵詞：HTML5；交互式課件；短學(xué)期；教學(xué)；實踐

中圖分類號：G424 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2018）02-0112-03

Exploration and Practice of “HTML5-Based Interactive Courseware Development” Short Term

MO Xiao-mei

（New Media College of Zhejiang Media University， Hangzhou 310018， China）

Abstract： Combined with the Web Programming Basis short term project development needs，proposed the "HTML5-based interactive courseware development" as the short term project name. Identify the tasks， objectives and implementation steps of the project。Made a useful exploration of the project guidance， process management and project acceptance in the course of project practice.

Key words： HTML5； interactive courseware ；short term； teaching； practice

1 概述

《基于HTML5的交互式課件開發(fā)》是浙江傳媒學(xué)院的新媒體學(xué)院第一次開設(shè)短學(xué)期系列項目中的一個項目，所面向的對象是已經(jīng)學(xué)習(xí)過《網(wǎng)頁編程基礎(chǔ)》課程的信息管理與信息系統(tǒng)二年級的學(xué)生。如果說《網(wǎng)頁編程基礎(chǔ)》課程的學(xué)習(xí)使學(xué)生掌握了網(wǎng)頁前端編程的基本理論和基本應(yīng)用，短學(xué)期的項目開發(fā)則更側(cè)重于從一個完整的案例項目的角度培養(yǎng)學(xué)生的綜合技能。綜合性和完整性是短學(xué)期的項目設(shè)計時要考慮的兩個重要因素。由于傳統(tǒng)的網(wǎng)站開發(fā)包括網(wǎng)站的前端和后端兩個部分，如果直接把傳統(tǒng)網(wǎng)站的前端開發(fā)作為短學(xué)期的實踐項目，一方面難以突出和體現(xiàn)網(wǎng)頁前端編程的在客戶端交互方面的技術(shù)優(yōu)勢，另一方面由于網(wǎng)站后端的核心功能無法實現(xiàn)，因此不能形成一個完整的項目。一個不完整的項目會讓參與項目的師生都缺乏動力和成就感，因此也得不到充分有效的鍛煉。

交互式課件開發(fā)是浙江省大學(xué)生多媒體設(shè)計大賽（以下簡稱省賽）的一個固定分類，而微課和課件制作也是中國大學(xué)生計算機設(shè)計大賽（以下簡稱國賽）的一個固定分類，可見課件開發(fā)在各大學(xué)生計算機類學(xué)科競賽中的重要地位。交互式課件作為現(xiàn)代信息技術(shù)在教學(xué)中的運用，由于其更能體現(xiàn)教與學(xué)的雙向互動，越來越深得人心，而交互性課件也日漸成為了以微課為代表的現(xiàn)代教學(xué)改革的重要載體。目前常見的交互式課件開發(fā)技術(shù)包括Adobe Flash系列、3D場景系列、APP移動平臺系列和Web頁面系列等。其中Web頁面系列課件是一種網(wǎng)頁版的課件，它以Web瀏覽器為運行容器，集成多種網(wǎng)頁開發(fā)技術(shù)（HTML、CSS、JavaScript等）進(jìn)行交互。 HTML5作為當(dāng)前Web頁面開發(fā)的新興技術(shù)，以其可跨平臺、實時更新、離線應(yīng)用以及更高的安全性等特點，還有各種新增元素和特性來增強頁面表現(xiàn)能力和用戶交互體驗，尤其適用于交互式課件的開發(fā)。

綜合以上背景，提出《基于HTML5的交互式課件開發(fā)》這一短學(xué)期的項目既能結(jié)合學(xué)科競賽，易于激發(fā)學(xué)生的興趣和動力；同時又由于其技術(shù)上的可行性、完整性和趣味性，可以使學(xué)生充滿信心和探索精神。此外，借助競賽的賽項要求、獎勵機制和評分標(biāo)準(zhǔn)，對調(diào)動學(xué)生學(xué)習(xí)主動性和思維創(chuàng)新性是一種有效補充[1]。學(xué)科競賽所倡導(dǎo)的團隊分工和合作精神也可以在短學(xué)期的分組實踐過程中能得到很好的體現(xiàn)。

2 項目實施的任務(wù)與目標(biāo)[2]

《基于HTML5的交互式課件開發(fā)》項目開發(fā)可以使學(xué)生學(xué)習(xí)和掌握基于HTML5的前端開發(fā)流程及其交互性的應(yīng)用。通過這個項目的實戰(zhàn)訓(xùn)練能夠讓學(xué)生掌握系統(tǒng)的開發(fā)技能，意在讓學(xué)生了解、熟悉、掌握項目的調(diào)研設(shè)計及前端開發(fā)的流程、方法和技巧，并有針對性地加強和提升學(xué)生團隊協(xié)作及項目設(shè)計和開發(fā)的能力。通過短學(xué)期的項目實踐，使學(xué)生達(dá)到以下基本目標(biāo)：

在短學(xué)期的基本目標(biāo)以外，由于本項目同時切合了國賽和省賽主題的這一特點，學(xué)生還可能得到額外收獲：第一，可以為國賽和省賽等相關(guān)賽事集中發(fā)力，累積經(jīng)驗；第二，短學(xué)期的優(yōu)秀作品可以報名參與國賽、省賽及相關(guān)的各項大賽競選。比如，今年課程設(shè)計的優(yōu)秀作品在被學(xué)校推薦參與省賽以外，還被進(jìn)一步推薦參與評選“浙報-阿里”極客計劃項目。學(xué)生在這個過程中既能體會到好的項目計劃的重要性，又能通過對一個好項目的多次打磨和完善，得到有效的鍛煉和快速的成長。

3 項目實施概要

3.1 項目周期及主要步驟

項目總的時間為2+1共3周，其中2周為暑假開始前的最后2周，主要用于開發(fā)。1周為暑假結(jié)束開學(xué)后的第一周，主要用于學(xué)生匯報、評價及成果收集與展示。學(xué)生應(yīng)利用課余時間加班加點保證項目開發(fā)工作的順利進(jìn)展，還可以利用暑假時間進(jìn)一步完善開發(fā)成果。

項目開發(fā)主要分為以下3個步驟：

（1） 自由選定小組，選定課件內(nèi)容、設(shè)計教學(xué)方案

（2） 利用HTML5、CSS3、JavaScript技術(shù)完成頁面設(shè)計和交互功能endprint

（3） 實現(xiàn)作品上線與維護(hù)更新。

3.2 項目開發(fā)的主要過程

（1） 小組討論，確定課件的主題及相關(guān)的功能，完成教學(xué)設(shè)計。

學(xué)生按每小組1-3人的要求自由結(jié)合組隊。組隊時建議學(xué)生結(jié)合自己的興趣、特長和知識面等特點，根據(jù)“異質(zhì)組成，各盡所能，組內(nèi)合作，組間競爭”的原則[3]，并在組隊的同時確定交互式課件項目的選題。通過小組討論進(jìn)一步劃分功能模塊，并結(jié)合目標(biāo)用戶的特點（年齡、職業(yè)等），明確該課件用于幫助用戶解決何種問題。

（2） 明確小組分工，完成頁面設(shè)計和交互功能。

各小組根據(jù)小組成員的能力和特長選定組長，并分配小組成員的分工（如素材收集和美工處理、頁面布局和制作、整體規(guī)劃和編程等）。參考技術(shù)方案如下：

l 主要使用的軟件：Dreamweaver CC等相關(guān)軟件

l 主要框架：bootstrap框架

l 主要使用的技術(shù)：

a） 通過HTML5標(biāo)記添加網(wǎng)頁元素（如文字、圖片、音頻、視頻、動畫等）

b） 通過CSS3樣式表控制網(wǎng)頁各元素的外觀表現(xiàn)（可實現(xiàn)部分的交互功能）

c） 通過JavaScript完成主要的交互功能（如實現(xiàn)頁面動畫、識別用戶操作、即時判斷正誤等）

（3） 實現(xiàn)作品上線與維護(hù)更新。

首先申請免費的網(wǎng)站空間賬號，通過ftp傳輸工具將階段性的作品及最終的成品在空間上及時進(jìn)行更新，并通過不同的主流瀏覽器（如Google Chrome瀏覽器、Internet Explorer瀏覽器等）對項目效果進(jìn)行實測與評估改進(jìn)。

3.3 學(xué)生成績評價考核方式與評分辦法

短學(xué)期訓(xùn)練項目的成績評定根據(jù)選題的難易度、完成情況、設(shè)計報告、學(xué)習(xí)態(tài)度，結(jié)合學(xué)生分析問題、解決問題和實際動手能力以及學(xué)生在組內(nèi)所起的作用等方面綜合考評。成績按百分制評定。

考核標(biāo)準(zhǔn)包括：

（1） 項目完成情況（60%）

（2） 實踐總結(jié)報告（10%）

（3） 平時紀(jì)律和完成情況（平時成績）（10%）

（4） 個人作用系數(shù)（20%）

4 項目探索與心得

4.1 充分發(fā)揮教師的引路人作用

在短學(xué)期的項目確定了以后，教師對整個項目的目的、要求和過程都有較為清晰的思路，而學(xué)生在選題之初往往是相對迷茫的，不知道如何選定項目的主題、模塊、界面，以及實現(xiàn)的方法。這時候，教師就要及時給出總體方向和過程指導(dǎo)，充分發(fā)揮引路人的作用，以盡快把學(xué)生領(lǐng)入門，并指出前進(jìn)的方向。

比如，在第一天的課程中，教師應(yīng)對項目實施的任務(wù)和目標(biāo)、實施周期、項目概要、開發(fā)思路、相關(guān)的學(xué)習(xí)資源、考核的方式及評分要求等方面進(jìn)行全方位的介紹，使學(xué)生對短學(xué)期的項目要求有全局性的了解。同時明確首日任務(wù)清單（包括項目分組、項目的前期調(diào)研工作、素材的準(zhǔn)備工作、軟件的準(zhǔn)備工作，以及項目規(guī)劃書的要求等）。

在指導(dǎo)學(xué)生如何進(jìn)行教學(xué)設(shè)計時，教師通過給學(xué)生提供相關(guān)的大賽網(wǎng)址，引導(dǎo)學(xué)生多觀摩獲獎作品的演示文件，并從中總結(jié)交互式課件中常見的功能模塊（如學(xué)習(xí)內(nèi)容、疑點難點、知識拓展、練習(xí)反饋等）及表現(xiàn)方法，以及總體設(shè)計和布局特點等。

在項目開發(fā)初期，教師為學(xué)生提供主要的軟件（Dreamweaver CC等）及相關(guān)素材和學(xué)習(xí)資源的網(wǎng)址，明確項目的主要技術(shù)方案；在作品制作階段，明確作品的規(guī)范，并及時指出和糾正學(xué)生常見的典型錯誤及解決思路。并做好過程管理，幫助學(xué)生把控項目的總體進(jìn)度，提供現(xiàn)場的答疑和輔導(dǎo)；在作品的維護(hù)與更新階段，教師為學(xué)生介紹2個免費的網(wǎng)站空間資源，提供ftp傳輸工具軟件，并為學(xué)生演示申請空間及作品上傳的相關(guān)步驟和方法。

通過及時有效的引導(dǎo)，使學(xué)生盡快理解項目的目的和方法步驟，并減少失誤，少走彎路，工作效率得到較好的保障和提高。

4.2 結(jié)合工作文檔的形式做好過程管理

由于短學(xué)期項目是一個綜合性的項目，除了對技術(shù)的掌握和運用以外，還要重視相關(guān)文檔（如項目策劃書、暑期計劃書及實踐總結(jié)報告）的編寫工作。其中一個好的項目策劃書至關(guān)重要！它相當(dāng)于一份較完善的項目藍(lán)圖，能讓學(xué)生從一開始就用心調(diào)研，慎重選定項目主題，明確選題目標(biāo)及重點和難點，并對項目的各部分組成結(jié)構(gòu)和交互特色作出清晰的規(guī)劃，為后續(xù)的實際開發(fā)指明方向；同時對組內(nèi)成員合理分工，為整個團隊工作的順利開展打下扎實的基礎(chǔ)。

由于短學(xué)期采用2+1共3周的項目周期，其中前2周與后1周之間有一個暑假的緩沖期。一般情況下要求學(xué)生在暑假前的2周內(nèi)基本完成項目開發(fā)，并鼓勵學(xué)生合理利用暑假時間進(jìn)一步完善開發(fā)成果。但由于暑假時間較長，所處的環(huán)境一般也較為休閑寬松，加上假期親友之間各種社交活動的影響，學(xué)生在沒有計劃的情況下很容易產(chǎn)生拖延和懈怠的情況；此外，小組成員一般也都分散各地，不再具備當(dāng)面交流討論的條件。因此，一個合理可行的暑期工作計劃是很有必要的！它能夠讓整個小組認(rèn)真總結(jié)已完成的工作和未完成的內(nèi)容，并結(jié)合各成員的暑期安排對小組工作和各組員的分工及合作形成合理的統(tǒng)籌計劃，明確各階段的工作內(nèi)容和目標(biāo)，為按時保質(zhì)完成工作提供了有效的保障。

實踐項目總結(jié)書是短學(xué)期的最后一個文檔，也是最重要的、需要存檔備案的文檔。它體現(xiàn)了學(xué)生對短學(xué)期項目開發(fā)作品的系統(tǒng)說明、重點提煉和心得總結(jié)，為今后的論文寫作，以及各種工作報告的撰寫提供了很好的訓(xùn)練，打下了良好的基礎(chǔ)。

4.3 以答辯的形式進(jìn)行項目驗收

本項目以答辯的形式進(jìn)行演示和評分。組長負(fù)責(zé)介紹和演示整個項目情況，包括自己所做的工作，各小組成員則重點講解自己的工作及在小組寫作中所發(fā)揮的作用。演示的過程一方面可以鍛煉小組成員在實際操作及語言表達(dá)方面的項目輸出能力，另一方面教師通過觀看、聆聽和提問的過程可以了解和檢驗項目的完成情況，以及學(xué)生在項目實踐過程中所發(fā)揮的作用、所取得的進(jìn)步和存在的問題，從而對項目的完成情況和學(xué)生在項目開發(fā)過程中的個人作用系數(shù)做出較為客觀合理的評價。endprint

5 總結(jié)

《基于HTML5的交互式課件開發(fā)》是《網(wǎng)頁編程基礎(chǔ)》課程第一次開展的短學(xué)期項目。我們在項目的選定和目的、項目的流程安排以及對學(xué)生的有效引導(dǎo)和過程管理等方面都做了有益地探索。學(xué)生在整個短學(xué)期的過程中對項目的開發(fā)非常投入，學(xué)習(xí)和實踐的氣氛融洽且熱烈，自主學(xué)習(xí)的能力和團隊協(xié)作的精神得到了有效的提高，這在最后的項目驗收階段及學(xué)生的總結(jié)報告中也得到了很好的反應(yīng)。

由于本項目緊密結(jié)合相關(guān)競賽，且有較明顯的應(yīng)用價值。在最后的成果展示中出現(xiàn)了一批從選題、創(chuàng)意及藝術(shù)性和交互性都較為優(yōu)秀的作品。部分作品先在浙江省多媒體設(shè)計大賽的校級選拔賽中獲得前幾名的優(yōu)異成績，并代表學(xué)校被推薦到省里參加競賽，接著又被推薦參與評選“浙報-阿里”極客計劃項目。還有部分優(yōu)秀作品因為選題不在省賽的范圍內(nèi)，但符合國賽的要求，也可以在來年報名參與國賽的選拔。

不僅參與競賽的學(xué)生在在各項選拔賽中收獲滿滿，每位參與本項目的同學(xué)都在不同的角度和不同程度上得到了較全面的鍛煉，收獲到了在課堂學(xué)習(xí)中無法得到的成就感；同時結(jié)合自己的不足，更找到了下一步努力的方向和動力。這就是我們在本次課程短學(xué)期項目開設(shè)之初和整個過程中用心思考，認(rèn)真探索和實踐所得到的最好的肯定和回報！同時，我們也將會在總結(jié)經(jīng)驗的基礎(chǔ)上繼續(xù)思考和提高，以利益更多的學(xué)生。

參考文獻(xiàn)：

[1] 程琳，張晶晶，范嚴(yán)，郭攀. 基于“案例教學(xué)，競賽驅(qū)動”的《網(wǎng)頁網(wǎng)站技術(shù)》課程教學(xué)改革探究[J]. 電腦知識與技術(shù)，2015，11（27）：84-85.

[2] 張趙輝. 《網(wǎng)頁前端技術(shù)》的課程設(shè)計[J]. 山東工業(yè)技術(shù)，2015（3）：310.

[3] 董晨，李繼芳. “分組競賽式教學(xué)法”在網(wǎng)頁設(shè)計課程中的探索與實踐[J]. 計算機教育，2007（10）：113-114+15.

[4] 葉銀蘭. 以多媒體競賽項目為導(dǎo)向，培養(yǎng)高職生網(wǎng)頁設(shè)計創(chuàng)新能力的研究[J]. 科技信息，2010，（16）：27+29.

[5] 李勇. 以學(xué)科競賽促進(jìn)《網(wǎng)頁設(shè)計與制作》課程教學(xué)改革與創(chuàng)新的思考——以參加中國大學(xué)生（文科）計算機設(shè)計大賽為例[J]. 價值工程，2010，29（31）：262-263.

[6] 程代娣. “網(wǎng)頁設(shè)計與制作”課賽融合教學(xué)模式研究[J]. 安慶師范學(xué)院學(xué)報：自然科學(xué)版，2016，22（1）：142-145.

[7] 王立偉. 將技能競賽形式引入《網(wǎng)頁制作》教學(xué)[J]. 天津職業(yè)院校聯(lián)合學(xué)報，2011，13（8）：118-119+122.

[8] 朱喜基. 網(wǎng)頁制作技術(shù)基礎(chǔ)課程的教學(xué)實踐研究[J]. 電腦與電信，2016（Z1）：60-61.endprint