羅予東，繆偉寧，劉錫鋒，陳偉君

（嘉應(yīng)學(xué)院計(jì)算機(jī)學(xué)院，梅州 514021）

高校實(shí)驗(yàn)室管理平臺(tái)的移動(dòng)應(yīng)用

羅予東，繆偉寧，劉錫鋒，陳偉君

（嘉應(yīng)學(xué)院計(jì)算機(jī)學(xué)院，梅州 514021）

移動(dòng)應(yīng)用為高校信息化應(yīng)用帶來設(shè)計(jì)的全新思維模式，結(jié)合信息管理系統(tǒng)需求對移動(dòng)應(yīng)用進(jìn)行技術(shù)分析，選擇響應(yīng)式WebApp技術(shù)應(yīng)用在“計(jì)算機(jī)實(shí)驗(yàn)室”網(wǎng)站上，采用流式布局策略實(shí)現(xiàn)移動(dòng)端的頁面展現(xiàn)，用戶獲得良好的掌上體驗(yàn)效果，為高校的其他信息系統(tǒng)的移動(dòng)應(yīng)用提供一種借鑒作用。

移動(dòng)應(yīng)用；用戶體驗(yàn)；WebApp；NativeApp；HybridApp

0 引言

移動(dòng)應(yīng)用[1]（Mobile Application,MA），廣義移動(dòng)應(yīng)用包含個(gè)人以及企業(yè)級應(yīng)用。狹義移動(dòng)應(yīng)用指企業(yè)級商務(wù)應(yīng)用。以手機(jī)、平板電腦介質(zhì)為代表的移動(dòng)終端應(yīng)用也就是掌上應(yīng)用將為企業(yè)信息化帶來巨大變革。

在2014年政府工作報(bào)告會(huì)上，李克強(qiáng)總理將“互聯(lián)網(wǎng)+”上升為國家戰(zhàn)略，明確提出要加快推動(dòng)移動(dòng)互聯(lián)網(wǎng)、云計(jì)算、大數(shù)據(jù)、物聯(lián)網(wǎng)等與現(xiàn)代制造業(yè)的結(jié)合與發(fā)展。移動(dòng)應(yīng)用作為移動(dòng)互聯(lián)網(wǎng)最主要的一種表現(xiàn)形式，也作為2014年紅透創(chuàng)投市場的O2O模式的核心載體，其相關(guān)領(lǐng)域的投資熱度在2014年達(dá)到了空前的高度[2]。根據(jù)中國互聯(lián)網(wǎng)絡(luò)信息中心（CNNIC）發(fā)布第37次《中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告》，截至2015年12月，我國手機(jī)網(wǎng)民規(guī)模達(dá)6.20億，較2014年底增加6303萬人。網(wǎng)民中使用手機(jī)上網(wǎng)人群的占比由2014年85.8%提升至90.1%，手機(jī)依然是拉動(dòng)網(wǎng)民規(guī)模增長的首要設(shè)備。僅通過手機(jī)上網(wǎng)的網(wǎng)民達(dá)到1.27億，占整體網(wǎng)民規(guī)模的18.5%。

高校實(shí)驗(yàn)室作為輔助教學(xué)的重要組成部分，是實(shí)現(xiàn)素質(zhì)教育的基地，如何把移動(dòng)互聯(lián)網(wǎng)的創(chuàng)新精神及元素添加到實(shí)驗(yàn)室管理中，形成“移動(dòng)互聯(lián)網(wǎng)+實(shí)驗(yàn)室管理”的創(chuàng)新模式，提升實(shí)驗(yàn)室的管理和使用水平，是響應(yīng)國家戰(zhàn)略具體實(shí)施的任務(wù)。

目前在國內(nèi)尚未有高校實(shí)驗(yàn)室管理平臺(tái)的移動(dòng)應(yīng)用先例，在教育系統(tǒng)中，方碩瑾[3]采用Spring MVC設(shè)計(jì)模式開發(fā)了移動(dòng)App客戶端和Web端后臺(tái)管理系統(tǒng)實(shí)現(xiàn)了對各類教輔書籍進(jìn)行點(diǎn)評和推薦，郝珺[4]建議高校職業(yè)生涯教育部門可以與計(jì)算機(jī)學(xué)院等相關(guān)學(xué)院合作，結(jié)合自己學(xué)校的實(shí)際情況，研發(fā)自己專屬的職業(yè)生涯教育類App應(yīng)用，讓學(xué)生不受時(shí)空限制地享受服務(wù)，李玲[5]認(rèn)為教育移動(dòng)App的廣泛使用創(chuàng)設(shè)了新型的教學(xué)模式，它不僅豐富了現(xiàn)有的教育模式，還為信息化時(shí)代的教育教學(xué)方法不斷注入生機(jī)與活力；田軍[6]介紹了幾種操作便捷、口碑好的移動(dòng)App，如Evernote、云存儲(chǔ)軟件、思維導(dǎo)圖以及社會(huì)性網(wǎng)絡(luò)工具等，將大學(xué)生個(gè)人知識(shí)進(jìn)行有效的管理，開發(fā)大學(xué)生創(chuàng)新思維。單柏[7]分析了移動(dòng)App研發(fā)對校園移動(dòng)化、智能化及信息化的影響，做了基于數(shù)字化校園的移動(dòng)App研發(fā)與應(yīng)用。

Ethan Marcotte[8]在2010年5月份提出了一個(gè)概念：響應(yīng)式布局Responsive Web Design，滿足一個(gè)網(wǎng)站兼容多個(gè)終端訪問，而不是像原生App為各類終端做相應(yīng)的版本。它是為移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的。淘寶、百度、攜程網(wǎng)已經(jīng)應(yīng)用了響應(yīng)式網(wǎng)頁來提高用戶訪問體驗(yàn)了。響應(yīng)式布局追求的是用戶訪問體驗(yàn)，根據(jù)用戶終端設(shè)備的差異、屏幕大小的不同、朝向的不同，設(shè)計(jì)相應(yīng)的網(wǎng)頁，達(dá)到一個(gè)網(wǎng)站兼容多個(gè)終端訪問都有良好的效果。

1 跨終端適配實(shí)現(xiàn)WebApp 的原理

瀏覽器在打開頁面時(shí)會(huì)在傳輸?shù)腍ttp header中設(shè)置User-Agent信息,User-Agent信息包括硬件平臺(tái)、系統(tǒng)軟件、應(yīng)用軟件和用戶個(gè)人偏好。通過獲取User-Agent相關(guān)信息我們就能了解用戶使用的終端設(shè)備的類型，進(jìn)行相應(yīng)的處理來提高用戶訪問體驗(yàn)了。下面是服務(wù)器獲取的User-Agent信息的一個(gè)實(shí)例：

從上面的User-Agent信息可以看出用戶是用Apple iPhone5手機(jī)用Safari瀏覽器來訪問。

1.1 多模板形式

百度準(zhǔn)備了多個(gè)頁面樣式模板，當(dāng)用戶訪問通過https://www.baidu.com/，頁面上的JS會(huì)檢測用戶終端設(shè)備屏幕寬度，來決定使用哪個(gè)樣式模板來呈現(xiàn)頁面。

其實(shí)就是利用window對象的事件處理[9]：當(dāng)頁面onload加載完成；調(diào)用changeCss（）函數(shù)來改變頁面的CSS樣式表。

1.2 跳轉(zhuǎn)形式

通過檢測用戶設(shè)備，引導(dǎo)到不同的網(wǎng)站頁面上去，淘寶有兩種版本，一種是PC版，存放在https://www. taobao.com這個(gè)服務(wù)器上；另外一種是手機(jī)版，存放在https://m.taobao.com這個(gè)服務(wù)器上。

當(dāng)用戶訪問網(wǎng)址https://www.taobao.com的時(shí)候，淘寶的首頁會(huì)檢測用戶訪問的設(shè)備，如果訪問的是PC，那么留在原來的頁面。如果用戶訪問的是手機(jī)，就跳轉(zhuǎn)到https://m.taobao.com這個(gè)網(wǎng)址去。

其實(shí)就是利用device.js的處理函數(shù)進(jìn)行設(shè)備檢測。

如下所示：

1.3 CSS3中媒體查詢，更換樣式表

攜程網(wǎng)采用的策略就是媒體查詢。

media屬性就是媒體查詢的屬性[10]。

min-width:600px；用這個(gè)樣式表的條件，就是屏幕的最小尺寸為600px。大于等于600px的時(shí)候，用pc. css這個(gè)樣式表！

max-width:599px;用這個(gè)樣式表的條件，就是屏幕的最大尺寸為599px。小于等于599px的時(shí)候，用mobile.css這個(gè)樣式表！

1.4 響應(yīng)式解決方案流式布局

媒體查詢有其優(yōu)越性,但也存在一定的局限性，那些僅使用媒體查詢來適應(yīng)不同視口的固定寬度設(shè)計(jì)，只會(huì)從一組CSS媒體查詢規(guī)則突變到另一組,兩者之間沒有任何平滑漸變.為了實(shí)現(xiàn)更靈活的設(shè)計(jì),能在所有視口中完美顯示,需要使用靈活的百分比布局[11]（也被稱之為流式布局，Bootstrap采用的策略http://v3. bootcss.com），這樣才能讓頁面元素根據(jù)視口大小在一個(gè)又一個(gè)媒體查詢之間靈活伸縮修正樣式。

2 響應(yīng)式設(shè)計(jì)在“計(jì)算機(jī)實(shí)驗(yàn)室”網(wǎng)站應(yīng)用

“計(jì)算機(jī)實(shí)驗(yàn)室”網(wǎng)站是一個(gè)我們開發(fā)用于管理計(jì)算機(jī)實(shí)驗(yàn)室的信息系統(tǒng)。實(shí)驗(yàn)室管理人員除了進(jìn)行信息的日常發(fā)布以外，還允許學(xué)生對實(shí)驗(yàn)室課表進(jìn)行詢，了解不同時(shí)間段內(nèi)實(shí)驗(yàn)室的課表的使用情況，從而可以在實(shí)驗(yàn)室空閑的時(shí)候進(jìn)行申請，而不用去找實(shí)驗(yàn)室的管理人員協(xié)商交流，這樣也大大提高實(shí)驗(yàn)室的利用率和管理員與使用者雙方的工作效率。還實(shí)現(xiàn)了對實(shí)驗(yàn)室每個(gè)學(xué)期進(jìn)行人數(shù)的統(tǒng)計(jì)，可以動(dòng)態(tài)統(tǒng)計(jì)實(shí)驗(yàn)室的使用情況。還能通過意見反饋留言給實(shí)驗(yàn)室管理員，使信息傳達(dá)更方便，快捷，能及時(shí)了解實(shí)驗(yàn)室使用的狀況，和對實(shí)驗(yàn)室管理的建議?！坝?jì)算機(jī)實(shí)驗(yàn)室”網(wǎng)站原來是采用MVC模式[12]開發(fā)，它的好處是可以分層開發(fā)，對新的需求較易實(shí)現(xiàn)，新的需求是要實(shí)現(xiàn)在移動(dòng)端界面設(shè)計(jì)，平臺(tái)的功能模塊沒有新的要求，從分層的角度，模型M基本上保持原樣，項(xiàng)目中的視圖V中增加移動(dòng)頁面的設(shè)計(jì)，實(shí)現(xiàn)響應(yīng)式的頁面布局即可，控制器C將后臺(tái)數(shù)據(jù)根據(jù)UA信息重新分配給移動(dòng)端的視圖，增加的代碼很少，整個(gè)項(xiàng)目改造的規(guī)模不大，容易實(shí)現(xiàn)。

2.1 PC端實(shí)現(xiàn)

由于網(wǎng)站采用統(tǒng)一網(wǎng)址：http://lab.jyueka.com進(jìn)行訪問，在原有基于PC端的網(wǎng)頁增加設(shè)備檢測技術(shù)實(shí)現(xiàn)跳轉(zhuǎn)，也就是在頁面的公共Header頭中加入下面代碼，如果客戶用移動(dòng)設(shè)備訪問，則跳轉(zhuǎn)到移動(dòng)頁面，如果不是，留在當(dāng)前頁面：

2.2 移動(dòng)端實(shí)現(xiàn)

移動(dòng)頁面在實(shí)現(xiàn)技術(shù)上，移動(dòng)端主要運(yùn)用的技術(shù)以HTML5+CSS3為主的jQuery Mobile框架，采用了流式布局策略，該流行框架能很好的兼容不同移動(dòng)端的界面，使他們保持一致，用PC端瀏覽則切換到PC端的界面。使不同的設(shè)備都能方便的瀏覽我們的掌上教輔平臺(tái)，做到所有設(shè)備能很好地運(yùn)行。頁面開發(fā)主要使用標(biāo)記，無需或僅需很少JavaScript[13]，注意在移動(dòng)端的頁面需要增加視口元數(shù)據(jù)告訴瀏覽器對網(wǎng)頁進(jìn)行約束。

上面的meta元標(biāo)記定義了id和name的值為viewport，用來約束視口。其中Content屬性是定義約束規(guī)則，用逗號分隔不同的約束規(guī)則[14]。

然后再根據(jù)需求對移動(dòng)端頁面進(jìn)行前端設(shè)計(jì)，再將后臺(tái)控制器傳過來的動(dòng)態(tài)數(shù)據(jù)填充在前端頁面，這樣就為“計(jì)算機(jī)實(shí)驗(yàn)室”網(wǎng)站增加了移動(dòng)端的展現(xiàn)，采用了流式布局策略能夠讓不同的手機(jī)及平板都有良好的界面體驗(yàn)，下圖是網(wǎng)站開發(fā)完成以后的效果圖：

圖1 移動(dòng)端頁面效果圖

3 結(jié)語

移動(dòng)端的應(yīng)用有這幾種[15]：Web App，NativeApp，HybridApp，其中：Native App：Objective-C或Java，學(xué)習(xí)成本高，技術(shù)要求較高，開發(fā)成本大，同時(shí)要滿足Android應(yīng)用和IOS應(yīng)用；Hybrid APP：外殼+Web APP，需安裝，而我們采用的響應(yīng)式Web APP：HTML5+ JS+CSS，優(yōu)點(diǎn)是門檻低，極易上手，迭代快，但缺點(diǎn)是流量較大，移動(dòng)流量跟PC訪問基本一致，另外不能使用移動(dòng)端的硬件設(shè)備如攝像頭、重力感應(yīng)等傳感器等，從計(jì)算機(jī)實(shí)驗(yàn)室網(wǎng)站的需求角度來說，由于校園網(wǎng)目前已經(jīng)實(shí)現(xiàn)了無線網(wǎng)絡(luò)覆蓋，學(xué)生和教師均通過無線校園進(jìn)行訪問，不會(huì)產(chǎn)生流量費(fèi)用，另外，作為CMS系統(tǒng)，一般的應(yīng)用不需要用到移動(dòng)端的硬件設(shè)備，所以選用Web App是較符合需求的。從維護(hù)的角度來說，一旦需求發(fā)生變動(dòng)，NativeApp需要同時(shí)維護(hù)Android和iOS應(yīng)用代碼，Hybrid App也需要重新安裝新的應(yīng)用，而Web APP只需維護(hù)一份代碼，客戶端無需變動(dòng)。從經(jīng)濟(jì)角度來說，NativeApp人力和時(shí)間成本要遠(yuǎn)遠(yuǎn)大于Hybrid App和Web App。計(jì)算機(jī)學(xué)院利用本身的技術(shù)優(yōu)勢將“移動(dòng)互聯(lián)網(wǎng)+實(shí)驗(yàn)室管理”的創(chuàng)新模式予以實(shí)現(xiàn)，是順應(yīng)技術(shù)發(fā)展的潮流，對高校的其他信息管理系統(tǒng)的移動(dòng)應(yīng)用也可以起到一種借鑒作用。

[1]百度百科.移動(dòng)應(yīng)用[EB/OL］．http://baike.baidu.com.

[2]路虹.移動(dòng)互聯(lián)產(chǎn)業(yè)成投資熱土.國際商報(bào),2015-03-25.

[3]方碩瑾.基于移動(dòng)App的教輔書籍點(diǎn)評系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)時(shí)代,2015（8）:39-41.

[4]郝珺.移動(dòng)App_高校職業(yè)生涯教育的新嘗試[J].赤峰學(xué)院學(xué)報(bào),2014,30（8）:227-228.

[5]李玲.教育型移動(dòng)APP的教學(xué)應(yīng)用模式研究[J].中國信息技術(shù)教育,2015（12）:82-84.

[6]田軍.基于移動(dòng)App的大學(xué)生個(gè)人知識(shí)高效管理芻議[J].圖書館界,2015（2）:62-66.

[7]單柏.基于數(shù)字化校園的移動(dòng)App研發(fā)與應(yīng)用[J].電腦知識(shí)與技術(shù),2015（30）:13-14,18.

[8]Ethan Marcotte．Responsive Web Design[EB/OL］．http://www．a(chǎn)listapart．com/articles/responsive-web-design/，2010-05-25．

[9]Frain B．Responsive Web Design with HTML5 and CSS3[M］．Birmingham:Packt Publishing，2012:．

[10]Juhani Lehtimaki.精彩絕倫的Android UI設(shè)計(jì).響應(yīng)式用戶界面與設(shè)計(jì)模式[M]．機(jī)械工業(yè)出版社,2013.

[11]密海英.面向不同設(shè)備的響應(yīng)式網(wǎng)頁設(shè)計(jì)探析[J]．蘇州市職業(yè)大學(xué)學(xué)報(bào),2013,24（2）:34-37.

[12]張樹明．基于響應(yīng)式Web設(shè)計(jì)網(wǎng)頁模板的設(shè)計(jì)與實(shí)現(xiàn)[J]．計(jì)算機(jī)與現(xiàn)代化，2013（6）:125-127.

[13]阮一峰.自適應(yīng)網(wǎng)頁設(shè)計(jì)[EB/OL].http://www.ruany.ifeng.com/blog/2012/05.

[14]羅予東,陳偉君,劉秀湛等.響應(yīng)式移動(dòng)互聯(lián)的中小型企業(yè)網(wǎng)站設(shè)計(jì)[J].計(jì)算機(jī)與現(xiàn)代化,2015（11）:53-55,59.

[15]吳多益.聊聊移動(dòng)端跨平臺(tái)開發(fā)的各種技術(shù)[EB/OL].http://fex.baidu.com/blog/2015/05/cross-mobile/.

繆偉寧，學(xué)生

劉錫鋒,學(xué)生

陳偉君，高級實(shí)驗(yàn)師

Mobile Application for University Laboratory Management Platform

LUO Yu-dong ，MIAO Wei-ning ，LIU Xi-feng ，CHEN Wei-jun
（Department of Computer Science and Technology,Jiaying University,Meizhou514015）

The design of mobile application brings new thinking mode for the application of informatization in universities,analyzes the techniques for mobile application based on the demand of information management system,uses flow layout pages for mobile terminals in Computer Lab website,the response WebApp can greatly improve the user experience,and provide a feasible method for other mobile application of information system in colleges and universities.

Mobile Application;User Experience;WebApp;NativeApp;HybridApp

1007-1423（2017）07-0075-04

10.3969/j.issn.1007-1423.2017.07.019

羅予東（1969-），男，廣東梅州人，高級實(shí)驗(yàn)師，碩士，研究方向?yàn)榫W(wǎng)絡(luò)工程、信息安全

2016-12-29

2017-03-01

國家自然科學(xué)基金資助項(xiàng)目（No.41172028）、2012年廣東省教育部科技部產(chǎn)學(xué)研結(jié)合項(xiàng)目（No.012B090600027）、2014年國家級教育基地項(xiàng)目（No.414B0110）、2016年廣東大學(xué)生科技創(chuàng)新培育專項(xiàng)資金資助項(xiàng)目（No.pdjh2016a0460）