基于Web的多媒體CAI課件開發(fā)過程中若干問題的研究和實踐(計算機(jī)論文)

1、基于Web的多媒體CAI課件開發(fā)過程中若干 問題的研究和實踐（計算機(jī)論文）基于eb的多媒體cAI開發(fā)過程中若干問題的研究和實 踐發(fā)布時間：XX-6-11秩名【摘要】基于eb的多媒體cAI是多媒體cAI與eb技術(shù) 的結(jié)合。它將成為網(wǎng)絡(luò)教學(xué)多媒體cAI的主要形式。本文結(jié)合一個實例，介紹了在基于eb的多媒體cAI開發(fā)過程中對頁面進(jìn)行頁面優(yōu)化的原則和方法，并詳細(xì)介紹了中導(dǎo)航、查 詢、測試等關(guān)鍵功能的javaScript 程序?qū)崿F(xiàn)技術(shù)和方法?！娟P(guān)鍵詞】多媒體，cAI，eb,頁面優(yōu)化1.引言傳統(tǒng)類型的或者由于投資成本大，或者由于升級更新困 難，已不能滿足日益發(fā)展的需要。為了解決以上矛盾，伴隨 著eb的出現(xiàn)

2、和eb技術(shù)的發(fā)展，基于 eb的多媒體cAI應(yīng)運 而生了。作為這種全新類型的平臺，eb本身具有統(tǒng)一的協(xié)議標(biāo)準(zhǔn)，良好的跨平臺特性和前所未有的廣泛的覆蓋性的優(yōu)點。 在其上開發(fā)出來的軟件有著統(tǒng)一的良好的GUI界面，能夠支持多種多媒體格式，可提供高度的交互性，與其他的應(yīng)用程 序有著方便良好的接口，特別是本身便以超聯(lián)接作為組織形 式，因此其非常合適作為開發(fā)平臺。另一方面，用以開發(fā)、維護(hù)基于eb的軟件的工具大多可以免費獲得，基于eb的對運行的軟硬件平臺也沒有什么很高的特殊要求，這使得基于 eb的cAI的開發(fā)維護(hù)費用相對低廉；目前種種“所見即所得” 的全圖形化的開發(fā)和維護(hù)工具也使得對開發(fā)維護(hù)人員的技 術(shù)水平要

3、求相對降低；由于各網(wǎng)頁之間相對獨立，因此可以 十分容易的對進(jìn)行升級更新。另外在網(wǎng)絡(luò)教學(xué)中，基于eb頁的可以以網(wǎng)頁為單位在網(wǎng)絡(luò)中傳輸，具有較快的傳輸速 度，在目前較低的帶寬下仍具有較好的應(yīng)用前景?？紤]到基 于eb的多媒體cAI的以上優(yōu)點，我們在對國家教育部重點 項目“博物館類cAI建設(shè)”進(jìn)行總體設(shè)計時選擇了它作為項 目總體方案。但在項目建設(shè)過程中，我們發(fā)現(xiàn)由于目前eb技術(shù)發(fā)展的局限性，使基于eb的方案也存在一些不足，主要是面臨網(wǎng)絡(luò)帶寬、網(wǎng)絡(luò)傳輸速度、平臺兼容性等問題的困 擾。因此，在開發(fā)過程中必須對頁面進(jìn)行優(yōu)化，以使之能夠 在eb上很好的運行。另外，由于相對來說eb是一種全新的開發(fā)平臺，而 eb

4、技術(shù)發(fā)展又非常的快，所以中一些功能如 導(dǎo)航、查詢等的技術(shù)實現(xiàn)便成為開發(fā)過程中突出的技術(shù)難 點。為此，我們在項目開發(fā)過程中，特別在這些方面作了重 點研究，并取得了一定的成果。頁面優(yōu)化的原則和方法頁面優(yōu)化問題雖然涉及到多方面，但其根本的立足點和目的是以下兩個：一個是加快頁面下載速度；另一個則是使頁面能象設(shè)計者所預(yù)先設(shè)想的那樣在用戶眼前顯示，在eb上這主要需要解決一個兼容性的問題。下面就分別從這兩個 目的出發(fā)，討論一下對頁面進(jìn)行優(yōu)化時所依據(jù)的原則和實現(xiàn) 方法。1加快頁面下載速度的優(yōu)化傳統(tǒng)上，在加快頁面下載速度方面所做的努力，僅僅局限于減少多媒體元素的使用數(shù)量和降低使用質(zhì)量，以取得較小的文件大小，從而

5、加快頁面文件在網(wǎng)絡(luò)上的傳輸速度以達(dá) 到加快下載速度的目的.我們認(rèn)為，僅依靠這方面的努力是 遠(yuǎn)遠(yuǎn)不夠的。所謂的頁面下載速度便可分成以下三部分：下 載時間，渲染時間和可視性，好的設(shè)計者應(yīng)通過頁面優(yōu)化在 三這者中找到一個平衡點，進(jìn)而產(chǎn)生理想的下載，從用戶點 擊請求到頁面總體框面顯示僅一眨眼時間，在頁面完全渲染 完前用戶便可以從中搜索自己需要的信息。1.1加快頁面下載的普遍原則）去除不必要的多媒體效果和內(nèi)容：可以用普通按鈕取代圖形動態(tài)按鈕，用靜態(tài)圖像取代GIF動畫，減少圖形化的花哨文字標(biāo)題，這些措施至少可以讓頁面下載時間縮短一 半。）用一切手段減少各種多媒體元素的大小。）優(yōu)先使用相同的圖形或多媒體內(nèi)容

6、：缺省的Netscape和IE都會在RA或硬盤上設(shè)置緩存來保存最近用到的圖形和 文件，如果瀏覽器認(rèn)識相同的文件名，則它會讀緩存，從而 大大提高效率。）提供低帶寬備用內(nèi)容：如果你的文件格式不被認(rèn)識或 瀏覽器關(guān)掉了圖形開關(guān)，這些備用內(nèi)容就可派上用場了。）對不是所有人都有必要或想看到的大型多媒體文件另 置一頁，在原來的頁上僅提供一個按鈕或低分辨率圖形，邊 上注明所鏈接文件的大小和預(yù)計下載時間。1.2對圖形的優(yōu)化處理）減少圖形文件大小：減少文件大小對加快下載速度有 著突出的貢獻(xiàn)，可以通過以下一些方法來減小圖形文件大 小。減小圖形面積-這可以通過剪切圖形或按比例收縮 圖形來實現(xiàn)，要注意的是，按比例收縮后

7、有可能在圖形上出 現(xiàn)一些色斑。注意顏色安排-通過降低色彩深度，使每一象素有 較少的位數(shù)可使文件變小。而在一行內(nèi)不要放入過多顏色將 使文件進(jìn)一步壓縮，這對GIF文件更加有效，因為 GIF僅是顏色的列表，它為每一行設(shè)置一個顏色列表，因此，當(dāng)沿水平方向改變顏色時，應(yīng)盡量使用更多的相同顏色片段；基于 相同的原因，當(dāng)使用連續(xù)色調(diào)時，應(yīng)盡量從頂部向底部延展， 而不要在左右方向上延展。調(diào)整圖像中的對比水平 -大多數(shù)圖像軟件都提供重 潤色選項，如伽瑪較正和加亮/中調(diào)/陰影來改變一個圖像內(nèi)的對比?？s減這些值，通常可以減少文件尺寸抑制抖動-抖動是指用現(xiàn)有調(diào)色板中顏色值來接近 調(diào)色板中沒有的顏色，它傾向于增大GIF

8、文件的大小，通過選擇通用安全216色調(diào)色板和用圖形程序里選擇 “ NoDither” 選項可消除抖動。）在HTL文件中為圖形設(shè)置 IDTH和HEIGHT屬性：用IDTH 和HEIGHT屬性來放大和壓縮圖示面積并不能加快下載，但 它可以使瀏覽器在下載圖片前便確定正確的頁布局，先把文 字和其他后繼內(nèi)容顯示出來，是用戶在下載圖片的同時便可 開始瀏覽。）隨同符號使用 LoSRc屬性：這個屬性允許我們指定另 一個圖形文件，它將首先下載，并在由SRc屬性指定的圖形文件之前顯示出來，一般由它指定一個低分辨率、低色度的 與SRc圖形相同大小的圖形，這樣下載將變快。）使用交錯式GIF和漸進(jìn)式j(luò)PEG:交錯式GI

9、F和漸進(jìn)式 jPEG是對原來圖形標(biāo)準(zhǔn)的擴(kuò)展。其中交錯式GIF向后兼容而漸進(jìn)式j(luò)PEG不能。當(dāng)下載后在頁面上顯示時效果就如同它 是從一套百頁窗后顯露出來一樣。盡管他們不能加快下載速 度，但用戶的感覺卻是加快的。1.3對表格TABLE的優(yōu)化處理雖然用LAyER和在頁面布局時可以做到精確定位， 但那也許只是將來的理想方案。在目前，為了得到一個真正跨瀏覽器，跨平臺的設(shè)計方案，還得用表格進(jìn)行局表格也許是目前網(wǎng)頁中用得最多的布局元素，因此，對 表格的優(yōu)化就顯得特別有價值，雖然這部分優(yōu)化并不能減少 下載時間，但由于瀏覽器需要在填充表格內(nèi)容前完全理解表 格的結(jié)構(gòu)，所以適當(dāng)?shù)谋砀襁\用將大大縮短網(wǎng)頁的渲染時 間。

10、在使用表格時應(yīng)注意做到：）將一個單一的大表格拆成多個小表格：這將加快頁面 顯示速度，尤其當(dāng)頁面很長而用表格進(jìn)行整體布局時更是如 此。）對TABLE、 TD適當(dāng)使用 idth 屬性：在這一點 上應(yīng)注意單元格內(nèi)的內(nèi)容的寬度，你定義的單元格寬度至少 應(yīng)與內(nèi)容寬度一致，以避免瀏覽器的過濾作用對其進(jìn)行兩次 渲染。）千萬不要嵌套表格：這將使表格處理時間以倍速上升，如果一定要嵌套，至少應(yīng)盡使被嵌套表格保持簡單。）不要將太新的擴(kuò)展多媒體元素放入表格：這將使瀏覽 器迅速崩潰。其他多媒體元素的優(yōu)化處理）對動畫部分的優(yōu)化：對 Direct或Authorare動畫應(yīng)盡 量壓縮幀數(shù)，并使用 shareare流式傳輸處理

11、，對一般網(wǎng)頁 上常見的 GIF動畫，F(xiàn)LASH動畫或javaScript 動畫應(yīng)盡量少 用，因為他們一般除裝飾效果外很難有什么其他作用卻會使 頁面尺寸急劇增加。）對背景音樂的優(yōu)化：優(yōu)先選用idi格式，采樣僅需 8位、11Hz即可。如果需要語音朗讀的話，盡可能使用男聲， 這可以采用更低的設(shè)置。盡量將聲音做成可選設(shè)置，優(yōu)先選 用流式聲音傳輸格式。）對腳本程序的優(yōu)化：許多網(wǎng)頁制作者認(rèn)為頁面中的 javaScript 等腳本語言不會使頁面變慢，然而大多數(shù)的腳本 語言都是解釋語言，而非編譯語言，這就意味著他們裝載后 還需被分析，這也構(gòu)成了頁面渲染時間的一部分，在使用腳 本語言時，應(yīng)注意做到：盡量將腳本嵌

12、入頁面中，而不使用SRc屬性，因為這將引起對服務(wù)器的另一次請求，既加重了服務(wù)器負(fù)荷，又延長 了總的下載時間。如果用腳本控制Plug-in或DHTL盡量用一個內(nèi)置的 裝載和運行更快的函數(shù)來替代自己編寫的函數(shù)。.2對兼容性的優(yōu)化在兼容性問題上，既要考慮對各種操作系統(tǒng)和硬件平臺 的兼容性，更要考慮對各種瀏覽器的兼容性。2.1在平臺兼容性上的優(yōu)化當(dāng)在INTERNET上發(fā)布時，你無法設(shè)想你的用戶會在怎 樣配置的機(jī)器上使用怎樣的操作系統(tǒng)，好在eb本身的跨平臺特性已為我們很好地解決了這個問題，使我們免于多次開 發(fā)，但為了使能夠在各種平臺上正常顯示，仍需要我們在定 義潛在用戶群時考慮許多細(xì)節(jié)，包括：顯示器的分

13、辨率和色 深，對音頻和視頻的支持情況，各種平臺上相同字體的差異，各種平臺上顯示調(diào)色板之間的差別等等。2.2在瀏覽器兼容性上的優(yōu)化與由于瀏覽器不兼容帶來的影響相比，由于平臺不兼容 對開發(fā)所帶來的影響幾乎可以忽略不計了，各大主流瀏覽器 開發(fā)廠商或者由于商業(yè)上的考慮而故意制造不兼容情況，如 Netscape和IE ;或者為了追蹤技術(shù)發(fā)展不得不造成新版本 某些部分事實上不向后兼容，如Netscapeunicator4.5 與以前版本對javaScript 的處理；再加上其他難以計數(shù)的各種 非主流瀏覽器，如何消除瀏覽器兼容性對開發(fā)的影響，才是 開發(fā)者所真正要關(guān)心的問題。在這次項目開發(fā)中，考慮到Netsc

14、ape和IE加起來占了瀏覽器使用總數(shù)的90%以上，而且均可以從網(wǎng)上免費得到，所以開發(fā)以IE4.0版為主，同時兼顧Netscape4.0以上版本； 對某些重要的功能，如果兩者需用不兼容技術(shù)實現(xiàn)，則分別 開發(fā)兩個版本，由服務(wù)器對用戶瀏覽器進(jìn)行判別后分別下 載。在腳本語言方面，由于javaScript是唯一大多數(shù)主流瀏覽器均支持的語言，所以成為唯一選擇。由于IE支持所有Netscape擴(kuò)展標(biāo)簽，所以標(biāo)簽選用上優(yōu)先考慮Netscape標(biāo)簽中導(dǎo)航、查詢、測試功能的實現(xiàn)1導(dǎo)航功能的實現(xiàn)在本中導(dǎo)航功能采用以下幾種方案來實現(xiàn)。一種是每一 頁底部均有的導(dǎo)航鈕，這個方案主要提供預(yù)定學(xué)習(xí)順序；一 種是導(dǎo)航圖，它指出

15、用戶現(xiàn)在正處于整個的什么位置；一種 是查詢方案，這個方案提供在整個站點內(nèi)搜索相關(guān)頁的功 能；還有一種便是樹型目錄，它與教材目錄相同，可用于輔 助檢索。樹型導(dǎo)航目錄為單獨的一頁，顯示在左邊的框內(nèi)。 一開始顯示各章標(biāo)題，單擊章標(biāo)題號后目錄展開，顯示這一 章下面的節(jié)的標(biāo)題，未展開的章標(biāo)題及其前的標(biāo)記為藍(lán)色， 展開后標(biāo)記轉(zhuǎn)為紅色，再次點擊已展開的章標(biāo)題后目錄將恢 復(fù)原樣。整個目錄還可擴(kuò)展，在節(jié)標(biāo)題目錄下加入第三層， 用以顯示每一節(jié)下的各小節(jié)標(biāo)題內(nèi)容，樹型導(dǎo)航部分中每個 標(biāo)題點擊后都將在右側(cè)框架中顯示對應(yīng)頁的內(nèi)容。2查詢功能的實現(xiàn)查詢功能其實可以用 FrontPage98內(nèi)置的SearchFor組 件下

16、的ActiveEleents 來實現(xiàn)，其功能非常強(qiáng)大。但目前由 于Frontpage未發(fā)行中文版，因此其對中文的查詢不能很好 的支持。我們現(xiàn)在在中的查詢功能是用javaScript 實現(xiàn)的，它通過維護(hù)一個關(guān)鍵詞及包含頁面URL的對應(yīng)詞典表來實現(xiàn)查詢，整個總頁面數(shù)將在一千頁左右，常用的關(guān)鍵詞有幾百 個,在這種規(guī)模下這個查詢程序的工作仍將是有效的。3測試功能的實現(xiàn)雖然課程考試的題目需要有專門的試題庫系統(tǒng)自動生 成，但每個單元后的練習(xí)題和單元測驗題卻可用網(wǎng)頁加腳本 的形式簡單實現(xiàn)，從而大大減輕服務(wù)器和數(shù)據(jù)庫的負(fù)荷。試 題以選擇題形式出現(xiàn)，選項多少不受限制。程序經(jīng)過簡單改 動還可提供填空題的形式。對基

17、于eb的多媒體cAI發(fā)展方向的一些探討首先，從功能上說，根據(jù)學(xué)生學(xué)習(xí)后取得的效果，可把 分為“知識和技能的獲取”型，“應(yīng)用知識分析和解決問題” 型，“創(chuàng)造性的解決問題”型三種；而從目前開發(fā)情況看， 以類居多，第二類較少，第三類幾乎還是空白。我們認(rèn)為， 在這方面應(yīng)加強(qiáng)研究的力度，應(yīng)加快發(fā)展的步伐。而這需要 教育學(xué)家和計算機(jī)專家的共同努力，關(guān)鍵在于教學(xué)理論和認(rèn) 知模型的創(chuàng)新。其次，從內(nèi)容組織方式來說，目前基本都是通過超鏈接 的方式組織起來的，學(xué)生可以根據(jù)自己的學(xué)習(xí)速度進(jìn)行學(xué) 習(xí)、交叉索引也比較方便，這與以前固定速度的教師傳授或 單一方向的印刷課本相比，當(dāng)然是個較大的進(jìn)步；但各部分 的內(nèi)容及組織結(jié)構(gòu)仍是預(yù)先固定好的，彈性較小。我們認(rèn)為，理想的應(yīng)能夠根據(jù)學(xué)生的知識結(jié)構(gòu)，學(xué)習(xí)類型和學(xué)習(xí)情況動 態(tài)生成學(xué)習(xí)內(nèi)容及組織結(jié)構(gòu)。