劉 恒,高東懷,寧玉文
(1.西北大學現代教育技術中心,陜西 西安 710069;2.第四軍醫大學網絡中心,陜西 西安 710032)
基于W ordPress的Web標準教學資源庫設計與實現
劉 恒1,高東懷2,寧玉文2
(1.西北大學現代教育技術中心,陜西 西安 710069;2.第四軍醫大學網絡中心,陜西 西安 710032)
本文首先闡述了Word Press開源博客的特點和功能,分析了Web標準及符合Web標準的網頁布局給網站建設帶來的便利;其次參考教學資源庫的主要考察點,提出了構建教學資源庫的金字塔模型和內容模型;最后根據教學資源庫的設計模型以某高校外國語學院西方文化教學資源庫為例進行了實現。
W ordPress;Web標準;教學資源庫;插件
網絡教學資源是開展網絡教育的前提和基礎,隨著網絡教育的逐步拓展,網絡教學資源越來越豐富,教學資源的開發和有效管理成為開展網絡教育的關鍵,建設教學資源庫,為各類學習內容對象提供高效的存儲管理,為各種使用者提供方便快捷的存取功能,為教學管理者提供資源訪問效果評價分析,從而提高教學資源對象的利用率,促進教學資源更好地為教學服務,是推動教學資源建設的一項重要任務。
WordPress是一個使用PHP語言開發的開源博客平臺,用戶可以在支持PHP程序語言和MySQL數據庫的服務器上架設自己的博客系統。也可以把WordPress作為內容管理系統(CMS)使用。按系統提供的規則,對系統程序進行適當修改之后,可以把系統打造成精美論壇、學校門戶等站點。據WordPress官方網站(wordpress.org)的最新統計,全世界超過6億人選擇了使用WordPress開發屬于自己的博客平臺。另外,WordPress是一個免費的開源項目,在GNU通用公共許可證下授權發布。目前最新版本為2011年7月發布的3.2.1版。[1]主要功能如表1所示。

表1 WordPress主要功能[2]
Web標準是由W3C和其他標準化組織共同制定,用來創建和解釋基于Web內容的一系列規范共同組成的標準集合。符合Web標準的網站主要由三部分組成:結構(structure)、表現(presentation)和行為(behavior)。對應的網站標準也分三方面:結構化標準語言,主要包括XHTML和XML;表現標準語言,主要包括CSS;行為標準語言,主要包括對象模型(如W3C DOM)、ECMAScript等。這些標準大部分由W 3C組織起草和發布,也有一些是其他標準組織制訂。[3]利用Web標準構建的網站有代碼量少、可讀性好、易維護、兼容性好、方便分析器解析網頁、便于搜索引擎索引網頁、用戶體驗更流暢等特征。
構建Web標準網站,最典型的特點是采用DIV+CSS的網頁布局模式取代傳統的表格(table)布局。長期以來,企業和高校的網頁布局一般采用的是table布局,其原因是table布局的快速性和簡便性。但由于table標簽本身的含義是網頁上展示結構化數據,進行網頁布局破壞了它原有的語義,導致代碼晦澀難讀。圖1是通過火狐瀏覽器的代碼調試工具firebug瀏覽采用table布局的某網站首頁部分代碼截圖。代碼表示的是網站首頁布局情況,然而從代碼可讀性而言,難以理解其布局含義。圖2為采用Web標準布局的某網站首頁的部分代碼截圖。從代碼對DIV標簽的ID賦值情況可以清晰地明白網頁布局的具體情況,例如,ID值為header的DIV塊代表的是網頁頭部,一般是網頁的主導航部分;ID值為content的DIV塊代表的是網頁主體部分,即網頁主體內容;ID值為footer的DIV塊代表的是網頁尾部,一般為網站的備案信息和版權信息。

通過圖1和圖2的比較可以看出,采用Web標準的網頁布局模式可以提高代碼的可讀性。同時,代碼可讀性的提高,也方便了網站后期代碼維護。
1.教學資源庫的主要考察點
傳統教學中,大部分學習資源分散于教師手中,分散于學生手中的資源也很難實現資源共享。通過構建網絡教學資源庫,將學習資源分類并有組織、有設計地部署在校園網中,方便了教師的輔助教學和學生的自主學習,提高了教學效率。
目前,高校或企業采用的教學資源庫(或稱培訓資源庫)開發模式有瀏覽器/服務器結構(B/S結構)及客戶端/服務器結構(C/S結構)。其中主要是以B/S架構開發的教學資源庫。表2列出了教學資源庫的主要考察點。

表2 教學資源庫的主要考察點
為了方便用戶的訪問和管理員的維護,主要采用B/S軟件開發架構開發系統,這樣用戶只要可以上網,不用在本機上安裝其他專門軟件,就可以方便地進入自主學習。教學資源庫的主要目的是存儲足夠多的學習資源,方便管理員的存儲管理及用戶的使用,不要求很強的交互性。
2.教學資源庫的設計模型
參考教學資源庫的主要考察點,提出了基于資源層、設計層、技術層三個層面構建教學資源庫的金字塔模型,如圖3所示:資源層為教學資源庫提供教學資源;設計層對教學資源合理組織與設計,它包括了以教為主的系統設計方式及以學為主的系統設計方式;技術層選用合適的技術實現下層的設計,它包括了界面設計、開發技術等。其中設計層是一個銜接層,它對下層的教學資源進行合理的組織與設計,為上層的技術選擇提供依據。

根據教學資源庫的功能需求,提出了構建教學資源庫的內容模型,圖4表明教學資源庫系統的建設應從內容展示和用戶交互兩方面進行。內容展示部分,對資源分類構建,每個分類提供圖、文、聲、像(視頻、動畫)四種資源,圖中以四個分類示意,具體進行資源庫構建時應以樹狀結構設計分類圖。用戶交互部分,圖中以常用的留言板、論壇、即時通訊(IM)示意,具體構建教學資源庫時應根據實際情況確定。

使用WordPress二次開發教學資源庫主要完成的任務是WordPress模板開發和WordPress插件開發。圖5所示為某高校外國語學院西方文化教學資源庫系統開發流程圖。

1.基于Web標準的模板開發
Web標準要求網頁內容與網頁表現分離,模板開發中,我們將用于表現網頁布局和效果的CSS代碼和JavaScript代碼單獨置于各自文件目錄中。為了使文檔結構更加合理,將動畫代碼和圖片也單獨置于各自文件目錄中。完成WordPress安裝后,用戶自定義模板中的文件結構如圖6所示。

首頁文件index.php調用CSS文件目錄對應文件完成頁面布局及調用JavaScript文件目錄完成頁面動態效果的具體實現方法如下:

2.W ordPress插件選擇
插件是指一類特定的功能模塊 (通常由第三方開發者實現),它的特點是:當需要它的時候激活它,不需要它的時候禁用或刪除它;且無論是激活還是禁用都不影響系統核心模塊的運行,它是一種非侵入式的模塊化設計,實現了核心程序與插件程序的松散耦合。我們通過選擇WordPress插件,解決了幾個關鍵技術問題。
(1)分頁插件WP-PageNavi
WordPress系統默認在當前頁顯示的文章數超過10篇時,將以分頁方式展示,默認情況下系統以單調的上一頁和下一頁模式顯示分頁。該插件提供了一個更加高級和美觀的分頁提示面板,可以計算總的文章數并加重凸顯當前頁數,每頁顯示的文章數也可以在WordPress管理后臺設置。WP-PageNavi插件使得分頁顯示更加人性化,插件在WordPress官方網站(wordpress.org)提供下載。
(2)視頻插件PJW Mime Config
教學資源庫支持對flv和rmvb格式視頻文件的播放,在模板頁面嵌入播放器代碼,發現系統對視頻文件格式的支持出現問題。該插件提供了在系統后臺設置支持的視頻格式功能。在PHP環境中選擇php.ini文件,打開文件定位到 upload_max_filesize變量并設置合適的值。這樣基本解決了視頻格式及上傳視頻大小限制的問題。插件在WordPress官方網站(wordpress.org)提供下載。
(3)角色管理插件Role Manager
WordPress系統實現了基于角色的訪問控制,系統默認是“管理員、編輯、作者、投稿者、訂閱者”五種角色名稱,很難更改。選用Role Manager插件,將系統默認的角色修改成了系統維護管理員(供開發者維護使用)、責任教師管理員(供負責系統管理的教師使用)、普通教師管理員、學生、訪客五種角色,并分別賦予了相應權限。該插件還允許開發者新建多個角色等級,并為每個等級的角色分配不同的權限,甚至可以為同等級中的某一用戶分配不同的權限。插件在開源軟件發布平臺SourceForge提供下載。
3.系統部署
系統部署采用目前流行的LAMP(Linux+Apache+ MySQL+PHP)模式部署。它是一組常用來搭建動態網站的開源軟件,隨著開源潮流的蓬勃發展,開放源代碼的LAMP已經與Sun公司的Java2平臺企業版(J2EE)以及微軟公司的.NET框架商業軟件形成三足鼎立之勢,從網站的流量上來說,70%以上的訪問流量是LAMP提供的,它已經成為了最強大的網站解決方案。[4]
系統采用了基于客戶機和服務器模式的三層體系結構B/S/S(Browser/Webserver/DatabaseServer),前臺客戶端直接采用瀏覽器,中間服務器是Web服務器,后臺為數據庫服務器。由客戶端在Web頁面發出請求至Web服務器,然后再由中間服務器對數據庫服務器發出請求,客戶端與數據庫服務器不直接聯系,保證了數據的安全性,適合數據信息的發布和查詢,具有跨平臺、界面統一、操作簡單等優點。[5]
教學資源的建設是一項長期而艱巨的任務。無論在理論研究上還是在具體實踐上都需要廣大教師和專家們進一步的探索。[5]隨著LAMP和Web標準的盛行,利用LAMP模式部署符合Web標準的應用將會成為未來的主要發展趨勢之一。高校利用開源軟件二次開發Web應用可以大大節省資金,基于WordPress的多博客系統,能夠初步解決站群建設問題,這為高校網站群的管理提供了一條有益的解決思路。☉
[1]百度百科.W ordPress[EB/OL].[2011-10-27].http: //baike.baidu.com/view/23618.htm.
[2]戴一平.基于W ordPress的CMS分析與設計[J].計算機與現代化,2011(4):79-83.
[3]百度百科.Web標準[EB/OL].[2011-08-23].http: //baike.baidu.com/view/7921.htm.
[4]百度百科.LAMP[EB/OL].[2011-08-29].http:// baike.baidu.com/view/365086.htm.
[5]宋維堂,張淑梅.基于Web2.0理念的高職院校教學資源庫建設研究[J].中國教育信息化,2011(9):31-34.
(編輯:金冉)
B
1673-8454(2012)11-0027-04