基于手機(jī)微信的實(shí)驗(yàn)教學(xué)網(wǎng)站

◆應(yīng)繼明 管正華 余康遠(yuǎn) 項(xiàng)紫晴 張航濤

?

基于手機(jī)微信的實(shí)驗(yàn)教學(xué)網(wǎng)站

◆應(yīng)繼明 管正華 余康遠(yuǎn) 項(xiàng)紫晴 張航濤

（溫州醫(yī)科大學(xué)眼視光學(xué)院生物醫(yī)學(xué)工程學(xué)院 浙江 325000）

隨著移動(dòng)互聯(lián)網(wǎng)的快速發(fā)展，微網(wǎng)站的影響力也在逐漸擴(kuò)大。微網(wǎng)站能夠?qū)崿F(xiàn)IOS、android等多平臺(tái)智能手機(jī)操作系統(tǒng)的兼容，手機(jī)上網(wǎng)又是當(dāng)下的潮流，本文將講述利用HTML5構(gòu)建一個(gè)共享型教學(xué)資源服務(wù)平臺(tái)的微網(wǎng)站，手機(jī)用戶可通過微信平臺(tái)訪問該微網(wǎng)站。此微網(wǎng)站實(shí)現(xiàn)實(shí)驗(yàn)教學(xué)資源的共享，使得學(xué)生能夠利用平時(shí)的空閑時(shí)間，自主學(xué)習(xí)需要的教學(xué)內(nèi)容。

HTML5；教學(xué)資源；微網(wǎng)站

0 引言

隨著移動(dòng)互聯(lián)網(wǎng)的快速發(fā)展和智能手機(jī)的普及率的不斷提高，通過手機(jī)上網(wǎng)已經(jīng)成為大多數(shù)人首選的上網(wǎng)方式，而微信作為一種多功能社交app，目前的月活躍用戶數(shù)超過8億，而且大學(xué)生人群中微信的使用率也相當(dāng)?shù)母摺＠迷诖髮W(xué)生中高普及率的智能手機(jī)和微信一起構(gòu)建教學(xué)互動(dòng)平臺(tái)，把傳統(tǒng)教學(xué)方式的優(yōu)勢(shì)與移動(dòng)互聯(lián)網(wǎng)的學(xué)習(xí)優(yōu)勢(shì)結(jié)合起來(lái)，是一個(gè)有價(jià)值的研究方向。

網(wǎng)絡(luò)的教學(xué)平臺(tái)在構(gòu)建數(shù)字化的學(xué)習(xí)環(huán)境中發(fā)揮了重要的支撐作用，是推動(dòng)教學(xué)信息化的快速發(fā)展、拓展教育教學(xué)的深度及廣度的不可或缺的環(huán)境基礎(chǔ)，也是對(duì)有限的教學(xué)資源以及課堂上的面授教學(xué)的有效補(bǔ)充[1]。

實(shí)驗(yàn)教學(xué)由于其學(xué)習(xí)特點(diǎn)，更加注重通過觀察和操作實(shí)物來(lái)掌握相關(guān)知識(shí)點(diǎn)，而非僅通過單純的理論知識(shí)，所以在課后往往難以做到復(fù)習(xí)鞏固。本文所涉及的微網(wǎng)站開發(fā)的主旨是實(shí)驗(yàn)教學(xué)資源的集中與共享。其優(yōu)點(diǎn)是能夠做到詳細(xì)的實(shí)物信息和理論知識(shí)的結(jié)合。學(xué)生在課后訪問微網(wǎng)站即可自主選擇相應(yīng)的實(shí)驗(yàn)進(jìn)行復(fù)習(xí)鞏固。

1 系統(tǒng)整體框架

微信公眾平臺(tái)處理程序及微網(wǎng)站構(gòu)建采用HTML5開發(fā)，開發(fā)環(huán)境選擇Dreamweaver，數(shù)據(jù)庫(kù)采用MySQL，Web應(yīng)用服務(wù)器采用輕云服務(wù)器。

本文研究的微網(wǎng)站是關(guān)于實(shí)驗(yàn)室教學(xué)資源系統(tǒng)的信息總結(jié)與推廣，主界面分為關(guān)于我們、新聞中心、用戶登錄、信息瀏覽、實(shí)驗(yàn)教學(xué)、在線問答、友情鏈接、科研榮譽(yù)、師資概況等九個(gè)模塊。

2 實(shí)現(xiàn)項(xiàng)目所需技術(shù)

2.1 HTML5編程語(yǔ)言

HTML5賦予了網(wǎng)頁(yè)更多的意義和更合理的結(jié)構(gòu)。更加豐富實(shí)用的標(biāo)簽將隨著對(duì)RDFa的微數(shù)據(jù)和微格式等方面的支持，構(gòu)建出對(duì)程序和用戶都更有價(jià)值的數(shù)據(jù)驅(qū)動(dòng)的Web。[2]本地存儲(chǔ)特性（Class: OFFLINE & STORAGE）基于HTML5語(yǔ)言開發(fā)的網(wǎng)頁(yè)APP具有更短的啟動(dòng)時(shí)間、更快的聯(lián)網(wǎng)速度。這些全都得益于HTML5 APP Cache和本地存儲(chǔ)功能。

HTML5新特性主要體現(xiàn)在：語(yǔ)義化標(biāo)記、Form表單增強(qiáng)功能、視頻/音頻、畫布、可編輯內(nèi)容、拖放、文件的數(shù)據(jù)存儲(chǔ)等方面，HTML5其實(shí)是關(guān)于圖像，位置，存儲(chǔ)，速度的優(yōu)化和改進(jìn)。[3]

2.2 Adobe Dreamweaver網(wǎng)頁(yè)編輯軟件

本文開發(fā)選用的網(wǎng)頁(yè)編輯軟件是Adobe Dreamweaver，簡(jiǎn)稱“DW”，是美國(guó)的MACROMEDIA公司開發(fā)的一款集網(wǎng)頁(yè)制作與管理網(wǎng)站于一身的所見即所得的網(wǎng)頁(yè)編輯器。DW是已出現(xiàn)的第一個(gè)針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師的使用而創(chuàng)造的視覺化的網(wǎng)頁(yè)開發(fā)工具。利用它就可以輕松實(shí)現(xiàn)制作跨越平臺(tái)限制和跨越瀏覽器限制的網(wǎng)頁(yè)。

2.3 HTML5+CSS3頁(yè)面布局

HTML5+CSS3具有結(jié)構(gòu)清晰、大大縮短頁(yè)面代碼、提供頁(yè)面瀏覽速度等優(yōu)點(diǎn)[4]。

HTML5并不僅可用來(lái)表示W(wǎng)eb的內(nèi)容，它的新使命更是將Web帶入到一個(gè)成熟的應(yīng)用平臺(tái)，在HTML5平臺(tái)上，能夠?qū)崿F(xiàn)音頻、視頻、圖象、動(dòng)畫以及同電腦的交互標(biāo)準(zhǔn)化。

CSS3對(duì)于Web開發(fā)者來(lái)說(shuō)并不僅是新奇的技術(shù)，更重要的是這個(gè)全新概念的web應(yīng)用給我們帶來(lái)了無(wú)限的可能，同時(shí)也極大地提高了開發(fā)效率。我們不必再依賴用圖片或者Javascript去完成自定義字體、文字背景、圖片透明度、3D動(dòng)畫、色彩漸變、文字陰影、圖片圓角等設(shè)計(jì)。

2.4服務(wù)器選擇

網(wǎng)站服務(wù)器是指在互聯(lián)網(wǎng)數(shù)據(jù)中心中存放網(wǎng)站的服務(wù)器[5]。它主要用于網(wǎng)站互聯(lián)網(wǎng)中的發(fā)布、應(yīng)用，是網(wǎng)絡(luò)應(yīng)用的基礎(chǔ)硬件設(shè)施。

本文所研究的微網(wǎng)站開發(fā)所選用的服務(wù)器是輕云服務(wù)器。輕云服務(wù)器預(yù)裝網(wǎng)站所需運(yùn)行環(huán)境和數(shù)據(jù)庫(kù)，管理方式與虛擬主機(jī)相同，無(wú)需服務(wù)器運(yùn)維人員。獨(dú)立IP，不限流量，獨(dú)享服務(wù)器資源，是網(wǎng)站建設(shè)用戶首選。

2.5微網(wǎng)站實(shí)現(xiàn)

本文研究的試驗(yàn)教學(xué)微網(wǎng)站分為教師登錄與學(xué)生登錄。

教師在登錄之后可通過該微網(wǎng)站平臺(tái)推送通知公告、實(shí)驗(yàn)教學(xué)進(jìn)度、實(shí)驗(yàn)器械信息、課程信息、最新的科研成果，以及通過“在線問答”回復(fù)學(xué)生的提問。

學(xué)生登錄之后可進(jìn)行信息瀏覽（如圖1所示），查看實(shí)驗(yàn)教學(xué)的相關(guān)信息（如圖2所示）進(jìn)行提前預(yù)習(xí)或者鞏固學(xué)習(xí)，另外，通過友情鏈接訪問其它各校內(nèi)網(wǎng)站，也可通過在線問答，提出自己的疑問。（如圖3所示）有助于老師和學(xué)生之間的互動(dòng)交流。

圖1 信息瀏覽界面圖

圖2實(shí)驗(yàn)教學(xué)界面圖

圖3在線問答界面

3 結(jié)束語(yǔ)

本文通過微信及微網(wǎng)站實(shí)現(xiàn)了實(shí)驗(yàn)教學(xué)資源的移動(dòng)端獲取，克服了傳統(tǒng)學(xué)習(xí)方式依賴于時(shí)間與場(chǎng)所的缺點(diǎn)。微信作為一款成功的社交app，以其豐富實(shí)用的功能收獲了超過8億的月活躍用戶，擁有強(qiáng)大的用戶基礎(chǔ)與相當(dāng)?shù)挠绊懥ΑＲ虼耍ㄟ^微信來(lái)推廣微網(wǎng)站繼而實(shí)現(xiàn)實(shí)驗(yàn)教學(xué)資源的共享，具有良好的前景，在推廣使用的過程中將會(huì)受到更多學(xué)生用戶的歡迎，成為移動(dòng)端學(xué)習(xí)的不二選擇。

[1]黃永慧，陳程凱.HTML5在移動(dòng)應(yīng)用開發(fā)上的應(yīng)用前景[J].計(jì)算機(jī)技術(shù)與發(fā)展，2013.

[2]嚴(yán)琦，朱治國(guó).HTML5對(duì)移動(dòng)應(yīng)用的影響[J];信息通信技術(shù)，2012.

[3]施煒.基于HTML5技術(shù)的微網(wǎng)站開發(fā)與實(shí)現(xiàn)[J].黑龍江科技信息，2015.

[4]梁仲智.基于HTML5的跨終端Web生成系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].中山大學(xué)，2013.

[5]宋昭壽，胡忠旭,漆麗娟.HTML5網(wǎng)頁(yè)設(shè)計(jì)探析[J].紅河學(xué)院學(xué)報(bào)，2012.

浙江省大學(xué)生科技創(chuàng)新活動(dòng)計(jì)劃（新苗人才計(jì)劃）項(xiàng)目2016R413030；全國(guó)教育信息技術(shù)研究規(guī)劃課題（146231623）。