陳銳浩

（深圳職業(yè)技術(shù)學(xué)院 教育技術(shù)與信息中心，廣東深圳518055）

移動互聯(lián)網(wǎng)時代高校資源庫建設(shè)思路及實踐*

陳銳浩

（深圳職業(yè)技術(shù)學(xué)院 教育技術(shù)與信息中心，廣東深圳518055）

隨著移動互聯(lián)網(wǎng)的普及，高校原來建設(shè)的各種資源庫系統(tǒng)由于缺乏對移動設(shè)備的支持，面臨淘汰．本文分析了現(xiàn)有資源庫系統(tǒng)存在的問題，提出采用Html5技術(shù)開發(fā)跨終端WebApp的3種方法，包括多套模板方式、多版本跳轉(zhuǎn)方式、響應(yīng)式布局方式．結(jié)合筆者開發(fā)的微課程平臺，重點介紹了響應(yīng)式布局原理及相關(guān)關(guān)鍵技術(shù)，以及如何利用viewport和Bootstrap框架進(jìn)行WebApp開發(fā)，為高校資源庫平臺的升級和建設(shè)提供參考．

移動互聯(lián)網(wǎng)；資源庫；響應(yīng)式布局；實踐

1 問題分析

高校資源庫的建設(shè)經(jīng)歷了幾個階段，在精品課程建設(shè)時代，很多高校就開始了資源庫的建設(shè)，這些資源庫依托于具體的課程建設(shè)，申報精品課程的時候作為成果之一．2010年，教育部啟動職業(yè)教育專業(yè)教學(xué)資源庫建設(shè)項目，作為國家示范高職院校建設(shè)計劃的一部分．2011年，教育部又啟動了精品資源共享課的建設(shè)工作，共享課以原國家精品課程為基礎(chǔ)，優(yōu)化結(jié)構(gòu)、轉(zhuǎn)型升級[1]．為了申報精品資源共享課和專業(yè)資源庫項目，很多高校加大了資源建設(shè)放方面的投入，但是這些投入大量人力和物力建設(shè)的資源，利用率并不高，特別是早期建設(shè)的精品課程的相關(guān)資源．根據(jù)《高校精品課程應(yīng)用調(diào)查及其對精品資源共享課建設(shè)的啟示》[2]一文的調(diào)查，精品課程的使用頻率不高，每天使用多次的學(xué)生僅占1.7%，每天使用1次的占4.1%，每周使用1次的占16.9%．我們建設(shè)的各種類型資源庫也存在系列問題，如資源庫應(yīng)用推廣實效性不強(qiáng)，資源利用率低；資源庫平臺的運(yùn)行、服務(wù)與維護(hù)滯后、部分資源更新跟不上新的技術(shù)發(fā)展等[2-4]．

隨著移動互聯(lián)網(wǎng)時代的全面來臨，早期建設(shè)的資源平臺和數(shù)字資源由于采用的標(biāo)準(zhǔn)和技術(shù)都落后了，無法適應(yīng)移動互聯(lián)網(wǎng)的需求．在移動互聯(lián)網(wǎng)時代，傳統(tǒng)資源平臺遇到的最大的問題是平臺兼容性問題，主要表現(xiàn)在下面幾方面：

1）系統(tǒng)支持不好．傳統(tǒng)的資源平臺系統(tǒng)都是面向桌面的，分辨率至少為1024*768，而移動終端的分辨率達(dá)不到這個水平，像iphone6 plus，屬于寬屏手機(jī)，其顯示的真實尺寸也只有414*736，使用手機(jī)來訪問傳統(tǒng)的資源平臺，無法在屏幕的寬度之內(nèi)顯示完整界面，用戶體驗非常差．而且，一些界面上的事件行為，在手機(jī)上也無法支持，導(dǎo)致功能無法實現(xiàn)．

2）資源無法支持移動設(shè)備．隨著信息技術(shù)的發(fā)展，各種資源也一直在進(jìn)化．如視頻資源，在使用PC時代，先是采用rm格式的視頻，后來又采用flv，wmv等格式．但是到了移動互聯(lián)網(wǎng)時代，這些格式都無法支持手機(jī)播放，最后都統(tǒng)一成mp4格式．如flash資源，作為資源庫的主要特色資源之一，在移動互聯(lián)網(wǎng)時代，由于IOS系統(tǒng)不支持，面臨淘汰．

3）用戶體驗不適合．在以PC為終端的互聯(lián)網(wǎng)時代，我們在界面上追求內(nèi)容的豐富，但是在移動設(shè)備為終端的移動互聯(lián)網(wǎng)時代，界面需要簡約，資源需要進(jìn)行微型化設(shè)計[5]，才能實現(xiàn)隨時隨地，滿足學(xué)習(xí)者碎片式的學(xué)習(xí)需求．

因此在移動互聯(lián)網(wǎng)時代，為了使我們的資源平臺及數(shù)字資源兼容移動設(shè)備，適合移動互聯(lián)網(wǎng)的需求，需要對現(xiàn)有的資源平臺進(jìn)行優(yōu)化和改進(jìn)．

2 解決思路

讓傳統(tǒng)的資源平臺支持移動設(shè)備，適應(yīng)移動互聯(lián)網(wǎng)的需求是需要解決的主要問題．目前主流的實現(xiàn)方案有2種：

方案一，采用Web+App的模式，像運(yùn)行精品資源共享課的愛課程網(wǎng)就是典型的例子．該平臺除了傳統(tǒng)的Web系統(tǒng)，還開發(fā)了面向安卓和蘋果兩大系統(tǒng)的App，這種方式在功能需求方面能夠最大程度滿足用戶的需求，但是平臺開發(fā)工作量比較大．除了開發(fā)傳統(tǒng)的Web系統(tǒng)，還要開發(fā)2個版本的App，而且系統(tǒng)一更新，終端就需要重新安裝．這種方式對開發(fā)者要求比較高，一般需要專業(yè)公司才能勝任，而且開發(fā)費(fèi)用比較高，不適合一般高校的自建資源庫使用，目前主要在國家層面的教育服務(wù)平臺建設(shè)方面使用．

方案二，采用Html5技術(shù)開發(fā)跨終端WebApp，這種方案對開發(fā)者要求低，而且完成一次開發(fā)，即可多平臺使用．Html5不僅可以調(diào)用GPS、陀螺儀等硬件，還支持WebGL、WebVR等技術(shù)．跨終端WebApp解決方案，前端采用的技術(shù)主要是Html5+CSS3，JavaScript為主要開發(fā)語言，后端可以采用任何一種后臺語言．具體的實現(xiàn)方式又包括以下3種：

1）一套系統(tǒng)，多套模板方式：如baidu，我們訪問相同的域名，但是在不同終端，顯示效果完全不一樣．這種方案，需要開發(fā)多套頁面模板程序，用戶訪問的時候，系統(tǒng)判斷用戶的終端情況，調(diào)用不同的頁面模板．

2）多版本，跳轉(zhuǎn)形式：如天貓、淘寶、京東，這些系統(tǒng)，內(nèi)容信息量大，充分考慮到用戶的使用習(xí)慣，都針對移動端專門開發(fā)Html5網(wǎng)站，多版本并存．當(dāng)用戶在手機(jī)上訪問www.jd.com時會自動跳轉(zhuǎn)到Html5版本，地址為：m.jd.com．這種方式，需要開發(fā)多個版本，工作量大，但是適合功能復(fù)雜的系統(tǒng)．

3）響應(yīng)式布局方案：這種方案，只要開發(fā)一個版本，由于采用響應(yīng)式布局技術(shù)，相同的內(nèi)容，在不同終端顯示效果不同．響應(yīng)式布局這個概念是為解決移動互聯(lián)網(wǎng)瀏覽而誕生的，是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網(wǎng)站能夠兼容多個終端，而不是為每個終端做一個特定的版本[6,7]．這種方案，適應(yīng)于頁面結(jié)構(gòu)不復(fù)雜，以資源顯示為主的資源庫平臺，缺陷是由于一個版本就兼容各種終端，對開發(fā)者的要求比較高，而且移動端請求的數(shù)據(jù)量相對大一些．

響應(yīng)式布局的基本原則如下：

1）彈性網(wǎng)格和布局，采用以比例為基準(zhǔn)的網(wǎng)格和布局．

2）彈性圖片及文字，圖片的最大寬度不能超出屏幕的寬度，對于不復(fù)雜的圖片，采用矢量圖，如使用SVG或圖標(biāo)字體．

3）移動設(shè)備優(yōu)先處理，設(shè)計的時候，優(yōu)先考慮移動設(shè)備的兼容性．

采用Html5技術(shù)開發(fā)的跨終端WebApp，可以直接通過手機(jī)端瀏覽器直接訪問，也可以封裝一個外殼，像傳統(tǒng)的App開發(fā)一樣，需要在手機(jī)上安裝應(yīng)用．近兩年，隨著微信的流行，很多WebApp利用微信公眾號作為應(yīng)用入口，所有功能都可以從微信進(jìn)入．

筆者認(rèn)為在移動互聯(lián)網(wǎng)時代，高校資源系統(tǒng)的開發(fā)適合采用跨終端WebApp解決方案，具體的實現(xiàn)方法適合采用響應(yīng)式布局技術(shù)．這種方案，能夠滿足以資源顯示為主的資源庫平臺的需求，而且一次開發(fā)，多平臺使用．對于原有的資源系統(tǒng)，只要進(jìn)行前端重構(gòu)，管理部分基本可以沿用原有系統(tǒng)，以最小的投入就可以讓原有的資源系統(tǒng)重新煥發(fā)生命力．

3 實踐研究

3.1 viewport簡介

移動設(shè)備上的viewport就是設(shè)備的屏幕上能用來顯示網(wǎng)頁的那一塊區(qū)域，即瀏覽器上用來顯示網(wǎng)頁的那部分區(qū)域，但viewport又不局限于瀏覽器可視區(qū)域的大小，它可以比瀏覽器的可視區(qū)域大，也可以比瀏覽器的可視區(qū)域?。谀J(rèn)情況下，移動設(shè)備上的viewport都是要大于瀏覽器可視區(qū)域的，這是因為考慮到移動設(shè)備的分辨率相對于桌面電腦來說都比較小，所以為了能在移動設(shè)備上正常顯示那些傳統(tǒng)的為桌面瀏覽器設(shè)計的網(wǎng)站，移動設(shè)備上的瀏覽器都會把自己默認(rèn)的viewport設(shè)為980px或1024px．但是由于移動設(shè)備的尺寸達(dá)不到980px，所以我們?nèi)绻檬謾C(jī)直接打開面向PC的資源系統(tǒng)的頁面，瀏覽器就必須橫向滾動才能把內(nèi)容顯示完整．

為了讓頁面適合手機(jī)瀏覽，需要設(shè)置viewport的寬度等于設(shè)備的寬度，同時不允許用戶手動縮放．viewport的使用必須借助于meta標(biāo)簽，在meta標(biāo)簽里面進(jìn)行定義和賦值，meta標(biāo)簽在網(wǎng)頁的head里面進(jìn)行定義，具體語法如下：

上面語句把移動頁面的寬度設(shè)置為像設(shè)備一樣的寬度，設(shè)置默認(rèn)的縮放比為1.0，并且禁止用戶縮放．meta viewport標(biāo)簽首先是由蘋果公司在其safari瀏覽器中引入的，有6個屬性，見表1，這些屬性可以同時使用，也可以單獨(dú)使用或混合使用，多個屬性同時使用時用逗號隔開．通過viewport的設(shè)置，可以保證頁面顯示內(nèi)容不超出屏幕的寬度，但是，傳統(tǒng)面向PC的界面在手機(jī)屏幕上顯示會顯得非常小，用戶體驗非常差，這個時候就需要采用響應(yīng)式布局技術(shù)，讓不同終端根據(jù)不同的情況，自適應(yīng)顯示．

3.2 響應(yīng)式布局的原理及實現(xiàn)

其原理是通過CSS3中Media Query（媒介查詢）功能，來判斷我們的終端設(shè)備寬度在多少像素內(nèi)，然后執(zhí)行與之對應(yīng)的CSS樣式．不同終端執(zhí)行的是同一頁面，但是由于執(zhí)行了不同的樣式，所以呈現(xiàn)出不同效果．以筆者開發(fā)的微課程系統(tǒng)的首頁為例，該系統(tǒng)的首頁的布局圖如圖1所示．左邊為PC顯示效果，上面為頁頭，擺放Logo和登錄功能，Logo下面為菜單，菜單下面為翻滾大圖，大圖下面為具體的資源模塊；右邊為手機(jī)顯示效果，在實際應(yīng)用中，由于手機(jī)屏幕的限制，一般都會把菜單放在右上角，默認(rèn)情況下隱藏起來，點擊才會展開，這種模式適合用戶操作習(xí)慣，常見的應(yīng)用都是采用這種方式．由于手機(jī)屏幕比較小，頁面的內(nèi)容向下自動延伸．借助于響應(yīng)式技術(shù)，只要制作一個版本，2個CSS文件，就可以實現(xiàn)該效果．

表1 viewport屬性

圖1 布局效果圖

開發(fā)的時候，一般會針對手機(jī)、平板和桌面設(shè)計3個樣式，有時候為了減少工作量，也可以省去平板樣式．系統(tǒng)在執(zhí)行的時候，用Media Query來監(jiān)測瀏覽器的尺寸變化，頁面的結(jié)構(gòu)元素根據(jù)Media Query預(yù)設(shè)的CSS來進(jìn)行相對應(yīng)的調(diào)整．Media Query通過CSS中的@media進(jìn)行規(guī)則制定，@media有2種使用方法：

1）在link中使用，media前省去@，寫在網(wǎng)頁的head里面，實例如下：

only screen表示限定于顯示器，條件max-width是指渲染界面最大寬度，上面代碼中只要寬度不超出480，則調(diào)用mobile.css樣式，介于481到768中間，則調(diào)用tablet.css，大于768的則調(diào)用desktop.css．這種方法把各種樣式分開存儲，結(jié)構(gòu)比較清晰，但是會增加頁面http的請求次數(shù)，增加頁面負(fù)擔(dān)，所以在CSS3中一般采用內(nèi)嵌的方式，把幾種樣式寫在一個文件中．

2）直接在樣式表中內(nèi)嵌@media，上例中3種設(shè)備的樣式可以定義在一起，語法如下：@media (max-width：480px){

//定義樣式內(nèi)容省略}

@media (min-width：481px) and (max-width：768px){

//定義樣式內(nèi)容省略

}

@media (max-width：769px){

//定義樣式內(nèi)容省略}

通過Media Query的應(yīng)用，實現(xiàn)了響應(yīng)式布局，一個資源庫系統(tǒng)開發(fā)一個版本，只要針對每種終端設(shè)計樣式，就可以適合各種終端，但是這種方式開發(fā)者需要有比較豐富的CSS開發(fā)經(jīng)驗．隨著響應(yīng)式技術(shù)的流行，出現(xiàn)了很多面向移動開發(fā)的開源的成熟框架，如jQueryMobile，BootStrap等，這些框架封裝了大部分功能，降低了開發(fā)難度和工作量．

3.3 開發(fā)實踐

根據(jù)響應(yīng)式原理，一些公司封裝了基于響應(yīng)式技術(shù)的開源框架，利用這些框架，做移動應(yīng)用的時候，不需要再去重復(fù)開發(fā)面向各種終端的CSS文件，只需要引用這些框架，在頁面上設(shè)置參數(shù)就可以實現(xiàn)響應(yīng)式效果．Bootstrap是在這些響應(yīng)式框架中比較優(yōu)秀的一個，它來自Twitter，基于Html5和CSS3開發(fā)的，它在jQuery的基礎(chǔ)上進(jìn)行了更為個性化和人性化的完善，形成一套自己獨(dú)有的網(wǎng)站風(fēng)格，并兼容大部分jQuery插件[8]，目前最新版本為4.0．

面向移動互聯(lián)網(wǎng)的資源平臺，界面相對簡單，除了首頁內(nèi)容相對豐富，欄目頁、內(nèi)容都是比較簡約，側(cè)重于資源的呈現(xiàn)，需要解決圖片、文檔、動畫和視頻等資源的兼容問題．利用響應(yīng)式技術(shù)，我們除了可以把系統(tǒng)做成兼容多終端，還可以把資源做成響應(yīng)式資源，讓資源在不同終端中合理呈現(xiàn)．筆者在開發(fā)微課程網(wǎng)的時候，前端采用Bootstrap框架，利用響應(yīng)式技術(shù)實現(xiàn)多終端的支持，具體方法為在網(wǎng)頁的head標(biāo)簽里面引入如下內(nèi)容：

頁面內(nèi)容采用Bootstrap的網(wǎng)格系統(tǒng)進(jìn)行布局，Bootstrap 包含了一個響應(yīng)式的、不固定的網(wǎng)格系統(tǒng)，可以隨著設(shè)備或viewport大小的增加而適當(dāng)?shù)財U(kuò)展到 12 列．以微課程網(wǎng)首頁的資源塊為例，其html代碼如下：

上面代碼中，container，row，col-xs-12，col-sm-6，col-md-4，col-lg-3都是bootstrap.min.css中的預(yù)定義類，container為寬度，row代表行，行包含列，如果行內(nèi)列大于12，則超出部分作為整體另起一行．col-xs-12、col-sm-6、col-md-4、col-lg-3這幾個類最后的數(shù)字代表列數(shù)，類前綴col-xs-，col-sm-，col-md-，col-lg-分別針對不同分辨率，根據(jù)終端的分辨率自動決定哪個起作用，實現(xiàn)具體的響應(yīng)式布局效果，如在手機(jī)上，類col-xs-12被調(diào)用，則一行只有1列，在分辨率大于1200px的桌面上，col-lg-3被調(diào)用，則一行有4列．

頁面上需要從數(shù)據(jù)庫獲取的數(shù)據(jù)采用異步請求方式獲取，通過javascript生成頁面內(nèi)容，采用這種方式，可以實現(xiàn)前端開發(fā)與后端開發(fā)分離，后端只要根據(jù)前端的需求提交各種數(shù)據(jù)，以文本或JSON格式返回就可以．以右上交的用戶登錄功能為例，其內(nèi)容由下面的javascript語句實現(xiàn)：

jQuery.get('ajax/login.ashx?action=righttopmenu' ,function(data){

$("#righttop").html(data);

});

上面語句通過jQuery.get()方法向ajax/login.ashx?action=righttopmenu這個地址發(fā)送ajax請求，利用回調(diào)函數(shù)把請求返回的內(nèi)容data填充到ID為righttop的頁面對象上．

開發(fā)的微課程網(wǎng)的界面如圖2所示，左邊為PC打開的界面，右邊為手機(jī)上訪問的界面，同一個界面，自適應(yīng)不同終端．實踐證明，對于功能不復(fù)雜，以內(nèi)容呈現(xiàn)為主的資源庫系統(tǒng)，采用響應(yīng)式技術(shù)開發(fā)WebApp是一種可行的選擇．

圖2 微課程界面

參考文獻(xiàn)：

[1] 童衛(wèi)軍，姜濤．高等職業(yè)教育專業(yè)教學(xué)資源庫平臺建設(shè)研究[J]．中國高教研究，2016（1）：107-110．[2] 黎良田，王明友．高職教學(xué)資源庫應(yīng)用現(xiàn)狀與建設(shè)改進(jìn)策略研究[J]．深圳職業(yè)技術(shù)學(xué)院學(xué)報，2016（3）：38-43．

[3] 王娟，劉名卓，祝智庭．高校精品課程應(yīng)用調(diào)查及其對精品資源共享課建設(shè)的啟示[J]．中國電化教育，2013，12：40-46．

[4] 徐明，陶秋榮．網(wǎng)絡(luò)環(huán)境下高校數(shù)字資源庫建設(shè)與應(yīng)用現(xiàn)狀調(diào)研分析[J]．中國電化教育，2012（5）：83-88．

[5] 李文莉，陳銳浩．移動學(xué)習(xí)資源的微型化設(shè)計與開發(fā)實踐研究[J]．深圳職業(yè)技術(shù)學(xué)院學(xué)報，2016（3）：30-33．

[6] 劉清堂，胡艦，翟利利，等．跨平臺的多終端設(shè)備網(wǎng)頁自適應(yīng)布局研究及應(yīng)用[J]．現(xiàn)代教育技術(shù)，2016（3）：107-113．

[7] Marcotte E.Responsive web design[M]．France：Editions Eyrolles，2011．

[8] 曹芳．將Bootstrap技術(shù)應(yīng)用于CMS建站中[J]．信息技術(shù)與信息化，2016（1）：78-81．

Constructive Thinking and Practice of the University Resources System in a Mobile Internet Era

CHEN Ruihao

（Educational Technology and Information Center, Shenzhen Polytechnic, Shenzhen, Guangdong 518055, China）

With an increasing popularity of mobile internet, the original construction of a variety of resources system due to the lack of support for mobile devices, is about to be eliminated. Based on the analysis of the existing problems in the resources system, this paper offers three methods of using Html5 technology to develop Webapp terminals, including multiple sets of templates, multiple versions of jump mode, response type layout. With the micro course platform developed by the author, the responsive layout principle and related key technologies are introduced as how to use viewport and Bootstrap framework for the development of Webapp. Reference for the upgrading and construction of resource platform in colleges and universities is also provided.

mobile internet; resource base; response layout; practice

TP311

：A

：1672-0318（2017）01-0039-06

10.13899/j.cnki.szptxb.2017.01.009

2016-09-05

*項目來源：本文系中央電教館全國教育信息技術(shù)研究“十二五”規(guī)劃重點課題“手機(jī)移動學(xué)習(xí)資源的微型化設(shè)計與開發(fā)實踐研究”（編號：136220985）的階段性成果；校級項目“資源共享課平臺建設(shè)與應(yīng)用研究”（編號：22J370609991）的階段性成果

陳銳浩（1977-），男，廣東潮州人，高級實驗師，碩士，研究方向：教育技術(shù)應(yīng)用、虛擬仿真、軟件開發(fā)．