移動互聯網時代高校資源庫建設思路及實踐*

陳銳浩

（深圳職業技術學院 教育技術與信息中心，廣東深圳518055）

移動互聯網時代高校資源庫建設思路及實踐*

陳銳浩

（深圳職業技術學院 教育技術與信息中心，廣東深圳518055）

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

移動互聯網；資源庫；響應式布局；實踐

1 問題分析

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

隨著移動互聯網時代的全面來臨，早期建設的資源平臺和數字資源由于采用的標準和技術都落后了，無法適應移動互聯網的需求．在移動互聯網時代，傳統資源平臺遇到的最大的問題是平臺兼容性問題，主要表現在下面幾方面：

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

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

3）用戶體驗不適合．在以PC為終端的互聯網時代，我們在界面上追求內容的豐富，但是在移動設備為終端的移動互聯網時代，界面需要簡約，資源需要進行微型化設計[5]，才能實現隨時隨地，滿足學習者碎片式的學習需求．

因此在移動互聯網時代，為了使我們的資源平臺及數字資源兼容移動設備，適合移動互聯網的需求，需要對現有的資源平臺進行優化和改進．

2 解決思路

讓傳統的資源平臺支持移動設備，適應移動互聯網的需求是需要解決的主要問題．目前主流的實現方案有2種：

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

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

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

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

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

響應式布局的基本原則如下：

1）彈性網格和布局，采用以比例為基準的網格和布局．

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

3）移動設備優先處理，設計的時候，優先考慮移動設備的兼容性．

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

筆者認為在移動互聯網時代，高校資源系統的開發適合采用跨終端WebApp解決方案，具體的實現方法適合采用響應式布局技術．這種方案，能夠滿足以資源顯示為主的資源庫平臺的需求，而且一次開發，多平臺使用．對于原有的資源系統，只要進行前端重構，管理部分基本可以沿用原有系統，以最小的投入就可以讓原有的資源系統重新煥發生命力．

3 實踐研究

3.1 viewport簡介

移動設備上的viewport就是設備的屏幕上能用來顯示網頁的那一塊區域，即瀏覽器上用來顯示網頁的那部分區域，但viewport又不局限于瀏覽器可視區域的大小，它可以比瀏覽器的可視區域大，也可以比瀏覽器的可視區域小．在默認情況下，移動設備上的viewport都是要大于瀏覽器可視區域的，這是因為考慮到移動設備的分辨率相對于桌面電腦來說都比較小，所以為了能在移動設備上正常顯示那些傳統的為桌面瀏覽器設計的網站，移動設備上的瀏覽器都會把自己默認的viewport設為980px或1024px．但是由于移動設備的尺寸達不到980px，所以我們如果用手機直接打開面向PC的資源系統的頁面，瀏覽器就必須橫向滾動才能把內容顯示完整．

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

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

3.2 響應式布局的原理及實現

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

表1 viewport屬性

圖1 布局效果圖

開發的時候，一般會針對手機、平板和桌面設計3個樣式，有時候為了減少工作量，也可以省去平板樣式．系統在執行的時候，用Media Query來監測瀏覽器的尺寸變化，頁面的結構元素根據Media Query預設的CSS來進行相對應的調整．Media Query通過CSS中的@media進行規則制定，@media有2種使用方法：

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

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

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

//定義樣式內容省略}

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

//定義樣式內容省略

}

@media (max-width：769px){

//定義樣式內容省略}

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

3.3 開發實踐

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

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

頁面內容采用Bootstrap的網格系統進行布局，Bootstrap 包含了一個響應式的、不固定的網格系統，可以隨著設備或viewport大小的增加而適當地擴展到 12 列．以微課程網首頁的資源塊為例，其html代碼如下：

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

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

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

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

});

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

開發的微課程網的界面如圖2所示，左邊為PC打開的界面，右邊為手機上訪問的界面，同一個界面，自適應不同終端．實踐證明，對于功能不復雜，以內容呈現為主的資源庫系統，采用響應式技術開發WebApp是一種可行的選擇．

圖2 微課程界面

參考文獻：

[1] 童衛軍，姜濤．高等職業教育專業教學資源庫平臺建設研究[J]．中國高教研究，2016（1）：107-110．[2] 黎良田，王明友．高職教學資源庫應用現狀與建設改進策略研究[J]．深圳職業技術學院學報，2016（3）：38-43．

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

[4] 徐明，陶秋榮．網絡環境下高校數字資源庫建設與應用現狀調研分析[J]．中國電化教育，2012（5）：83-88．

[5] 李文莉，陳銳浩．移動學習資源的微型化設計與開發實踐研究[J]．深圳職業技術學院學報，2016（3）：30-33．

[6] 劉清堂，胡艦，翟利利，等．跨平臺的多終端設備網頁自適應布局研究及應用[J]．現代教育技術，2016（3）：107-113．

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

[8] 曹芳．將Bootstrap技術應用于CMS建站中[J]．信息技術與信息化，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

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

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