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

莫小梅

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

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

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

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

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

2 項(xiàng)目實(shí)施的任務(wù)與目標(biāo)[2]

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

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

3 項(xiàng)目實(shí)施概要

3.1 項(xiàng)目周期及主要步驟

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

項(xiàng)目開(kāi)發(fā)主要分為以下3個(gè)步驟：

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

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

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

3.2 項(xiàng)目開(kāi)發(fā)的主要過(guò)程

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

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

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

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

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

l 主要框架：bootstrap框架

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

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

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

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

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

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

3.3 學(xué)生成績(jī)?cè)u(píng)價(jià)考核方式與評(píng)分辦法

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

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

（1） 項(xiàng)目完成情況（60%）

（2） 實(shí)踐總結(jié)報(bào)告（10%）

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

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

4 項(xiàng)目探索與心得

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

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

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

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

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

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

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

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

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

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

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

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

5 總結(jié)

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

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

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

參考文獻(xiàn)：

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

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

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

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

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

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

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

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