基于HTML5和.NET的移動學習平臺研究與實現(xiàn)

趙愛美

（山東外貿(mào)職業(yè)學院信息管理系,山東青島266071）

基于HTML5和.NET的移動學習平臺研究與實現(xiàn)

趙愛美

（山東外貿(mào)職業(yè)學院信息管理系,山東青島266071）

針對高校精品課程建設(shè)實際,提出了對傳統(tǒng)網(wǎng)站的改進思路.在不改變業(yè)務(wù)邏輯層和數(shù)據(jù)庫訪問層的基礎(chǔ)上,增加一個移動設(shè)備界面層.設(shè)計方式簡化了移動網(wǎng)站的設(shè)計流程,提高了開發(fā)效率,實現(xiàn)了代碼復(fù)用.同時為了使移動學習平臺可以在多個瀏覽器上運行,并能自適應(yīng)移動設(shè)備的多分辨率,在設(shè)計過程中運用了HTML5和CSS3等新技術(shù),使移動學習平臺的一次開發(fā)適用多種移動終端成為可能.

移動學習；HTML5；CSS3；移動瀏覽器；.NET

隨著移動設(shè)備的普及和移動互聯(lián)網(wǎng)技術(shù)的發(fā)展,越來越多的人選擇使用移動設(shè)備上網(wǎng)學習.百度發(fā)布的2013年第一季度移動報告顯示,繼2012年第三季度移動互聯(lián)網(wǎng)的人均上網(wǎng)時長首次超越PC（傳統(tǒng)電腦）互聯(lián)網(wǎng)之后,一直延續(xù)了快速增長的態(tài)勢,截至2013年3月,移動互聯(lián)網(wǎng)的使用已經(jīng)超過傳統(tǒng)電腦29%[1].目前高校大都擁有一定數(shù)量的國家級、省級、院（校）級精品課程和一些在線學習網(wǎng)站.這些網(wǎng)站大都針對PC機終端（傳統(tǒng)電腦）開發(fā),它們在促進教學、提高學生學習效果方面起到巨大的推動作用.但隨著移動設(shè)備（以智能手機為主）普及,越來越多的大學生選擇使用移動瀏覽器（主要有iPhone的Safari、Android的Chrome、UC瀏覽器、Opera等）上網(wǎng)進行學習.智能手機的移動瀏覽器能夠顯示豐富的網(wǎng)頁內(nèi)容,支持WWW標準協(xié)議,一般采用兩種方式顯示傳統(tǒng)網(wǎng)站內(nèi)容：①放大或縮小顯示網(wǎng)頁.傳統(tǒng)網(wǎng)頁內(nèi)容大而多,如果全部顯示在移動設(shè)備屏幕上,就會使得網(wǎng)頁字體過小,不利于用戶瀏覽.盡管用戶可以根據(jù)需要放大縮小比例來瀏覽感興趣的網(wǎng)頁內(nèi)容,但這需要左右拖動才能看到整個頁面,造成了極大的不便利.②自適應(yīng)手機屏幕.即移動瀏覽器根據(jù)手機屏幕的寬度,將傳統(tǒng)網(wǎng)頁內(nèi)容重新排版,按照從上到下的順序排列顯示,用戶只需操作手機的上下滾動條,就可以瀏覽傳統(tǒng)網(wǎng)頁內(nèi)容.但這種方式會改變原有的布局,造成頁面凌亂不堪.另外,一般傳統(tǒng)網(wǎng)頁含有大量的圖片和文字,如果用移動瀏覽器加載需要等待很多時間,而且移動瀏覽器大都對Flash不支持.

如果完全放棄傳統(tǒng)在線學習網(wǎng)站,開發(fā)新的移動學習平臺需投入較高的開發(fā)成本,這勢必造成人力和資源的巨大浪費.本文在不修改原有傳統(tǒng)學習網(wǎng)站的業(yè)務(wù)邏輯層和數(shù)據(jù)庫訪問層的前提下,提出基于HTML5等新技術(shù)的移動學習平臺創(chuàng)建方法.HTML5技術(shù)的引入使跨平臺移動應(yīng)用開發(fā)成為可能.

1 設(shè)計思路

目前應(yīng)用程序普遍采用三層架構(gòu)進行設(shè)計,即將應(yīng)用程序劃分為界面層（UI）、業(yè)務(wù)邏輯層（BLL）和數(shù)據(jù)訪問層（DAL）.界面層：在瀏覽器（PC瀏覽器和移動設(shè)備瀏覽器）中顯示的用戶界面,根據(jù)需要調(diào)用業(yè)務(wù)邏輯層.業(yè)務(wù)邏輯層：為界面層提供功能調(diào)用,同時根據(jù)需要調(diào)用數(shù)據(jù)訪問層,本層主要處理業(yè)務(wù)邏輯關(guān)系.數(shù)據(jù)訪問層：主要用來實現(xiàn)與數(shù)據(jù)庫（Oracle、SQLServer等）的交互,即完成查詢、插入、刪除和修改數(shù)據(jù)庫中數(shù)據(jù)的功能.

本文在不改變傳統(tǒng)業(yè)務(wù)邏輯層和數(shù)據(jù)庫訪問層的基礎(chǔ)上增加一個移動設(shè)備界面層,如圖1所示.新的移動學習平臺實現(xiàn)了代碼的復(fù)用與重構(gòu).

圖1 應(yīng)用程序的架構(gòu)Fig.1 Application architecture

移動設(shè)備界面層主要負責網(wǎng)頁的顯示,在Visual Studio2005以上的版本中,ASP.NET提供了兩種網(wǎng)頁代碼模型,即單文件模型和代碼隱藏頁模型.其中代碼頁模型將頁面顯示部分與代碼邏輯分離,如圖2所示..aspx文件負責頁面顯示,主要包含技術(shù)HTML5、CSS、Javascrip和服務(wù)器端控件等..aspx.cs文件主要是采用C#代碼,調(diào)用業(yè)務(wù)邏輯層,負責功能的實現(xiàn).

圖2 代碼隱藏頁模型Fig.2 Modelofcode-behind page

2 移動學習平臺的開發(fā)環(huán)境

開發(fā)工具：Visual Studio 2012,也可采用Visual Studio 2010 SP1.VS2010 SP1在最初并沒有附帶HTML5模板,需要手動添加,但在VisualStudio2012中全面支持移動和HTML5.

數(shù)據(jù)庫：SQLServer2008

服務(wù)器：IIS

操作系統(tǒng)：Windows8

開發(fā)語言：C#

3 關(guān)鍵技術(shù)和代碼分析

移動學習平臺的開發(fā)主要包含前端技術(shù)和后端技術(shù)兩個方面.其中后端和傳統(tǒng)學習網(wǎng)站的實現(xiàn)方式基本相同,主要采用了C#語言運用ASP.NET技術(shù)進行實現(xiàn),在文獻[2]中有詳細的介紹.前端技術(shù)主要涉及到HTML5、CSS3、Javascript等技術(shù).

3.1 HTML5技術(shù)

HTML5是W3C組織推出,目前是移動端唯一的Web標準[3-4].它使得一次設(shè)計適用于多種移動終端成為可能,同時HTML5能夠減少瀏覽器對插件（如Adobe Flash等）的依賴,并提供了更多的能有效增強網(wǎng)絡(luò)應(yīng)用的標準集.在移動學習平臺主要應(yīng)用了很多新技術(shù).

3.1.1 結(jié)構(gòu)化標簽HTML5新增加了header、section、article、footer和nav等標簽,在移動學習平臺中充分運用了這些標簽元素,這提高了瀏覽器解釋頁面中元素的速度.由于搜索引擎可以忽略掉＜nav＞元素和＜footer＞元素里的內(nèi)容,所以提高了搜索引擎的效率.

3.1.2 自由嵌入教學視頻HTML5中新增了視頻（video）標簽,使開發(fā)人員無需安裝類似Flash的插件即可以處理視頻.在移動設(shè)備上,原生應(yīng)用（Native App需要在客戶端下載應(yīng)用程序,類似C/S架構(gòu)）對于視頻和文字圖片混排的內(nèi)容處理起來相當麻煩和低效,需要拆分開文字、圖片、視頻等,對不同的素材元素需要使用不同的組件來處理.而在HTML5頁面上,視頻可以自由嵌入,將各種素材放在一起進行處理. video元素主要支持Ogg、MPEG4、WebM格式的視頻文件,表1給出了不同瀏覽器對視頻的支持情況[5].

表1 不同瀏覽器對視頻的支持情況Tab.1 Support to videoby differentbrowsers

如在移動學習平臺中有大量的授課視頻,在＜video＞中可指定多個＜source＞以便鏈接不同格式的視頻.瀏覽器將使用第一個可識別的文件類型：

＜videowidth="320"height="240"controls="controls"＞

＜source src="/movies/learning.ogg"type="video/ogg"＞

＜source src="/movies/learning.mp4"type="video/mp4"＞

對不起,你的瀏覽器不支持該視頻格式.

＜/video＞

3.1.3 本地存儲本地存儲（web storage）類似傳統(tǒng)網(wǎng)站中的cookie,在移動瀏覽器中將數(shù)據(jù)存儲在本地,當退出瀏覽器時數(shù)據(jù)仍然保存,同cookie不同的是,這個數(shù)據(jù)不會被發(fā)送到遠程的服務(wù)器（除非手動發(fā)送）.當網(wǎng)頁加載后可通過JavaScript獲取數(shù)據(jù).本地存儲又分為sessionStorage和localStorage.sessionStorage在用戶瀏覽網(wǎng)頁時,可將數(shù)據(jù)存儲到session中,當用戶關(guān)閉瀏覽器窗口后,數(shù)據(jù)會被刪除.localStorage當用戶關(guān)閉瀏覽器后,數(shù)據(jù)依然存在,下次依然可以使用.如：保存用戶名：window.localStorage.setItem（"name",username）；讀取用戶名：window.localStorage.getItem（"name"）；

3.1.4 離線緩存使用移動設(shè)備,經(jīng)常會遇到網(wǎng)絡(luò)信號不好的情況,保證離線的可用性就成了必須解決的問題.移動學習平臺采用了離線緩存技術(shù),使學生可以在離線情況下繼續(xù)使用移動學習平臺,學習未瀏覽完的內(nèi)容.另外,離線緩存加速了web頁面的加載速度,并且瀏覽器只加載被修改過的資源,因此大大降低了用戶請求對服務(wù)器造成的負載壓力.具體的做法：

（1）定義名字為learning.appcache清單文件,清單文件（manifest file）是用來管理應(yīng)用程序離線緩存的,它實質(zhì)就是一系列的URL列表文件,該列表文件指向頁面當中的HTML、CSS、Javascript、圖片等相關(guān)內(nèi)容.

CACHEMANIFEST

#2012-12-5 Version 1.0

CACHE：

/lesson/index.aspx

/lesson/style.css

/lession/main1.js

/lession/logo.gif

NETWORK：

/login.aspx

FALLBACK：

/lession1.js/lession2.js

以數(shù)字符號#開頭的行是注釋行.CACHE為需要被緩存到本地的資源,NETWORK為永遠不被緩存的資源,FALLBACK中指定網(wǎng)絡(luò)連接時使用第一個資源,否則使用第二個資源.

（2）創(chuàng)建一個ASP.NET一般處理程序Manifest.ashx文件：

＜%@WebHandler Language="C#"Class="Manifest"%＞

…….//自動導入命名空間

public classManifest：IHttpHandler{

public void ProcessRequest（HttpContextcontext）{

//指定輸出文件格式

context.Response.ContentType="text/cache-manifest"；

//輸出文件,假定learning.appcache文件放在根目錄下

context.Response.WriteFile（context.Server.MapPath（"～/learning.appcache"））；}

//定義屬性

public bool IsReusable{get{return true；}}}

（3）在首頁html標簽中添加如下代碼：＜htmlmanifest="Manifest.ashx""＞?

3.2 CSS3Media Query技術(shù)

目前設(shè)備的分辨率有很大的差異,移動學習平臺利用CSS3的MediaQuery技術(shù)自動探測屏幕寬度[6],根據(jù)屏幕寬度加載相應(yīng)的CSS文件.如：

@media screen and（max-width：320px）{……}

@media screen and（max-width：480px）{……}

@media screen and（max-width：960px）{……}

以上為瀏覽器可視部分的寬度分別最大為320 px、480 px、960 px調(diào)用的樣式.

3.3 viewport虛擬窗口

移動設(shè)備的屏幕尺寸和分辨率有很大差異,為了解決這個問題在移動學習平臺的＜head＞＜/head＞中添加了一個＜meta＞標簽如下：

＜metaname="viewport"content="width=device-width,initial-scale=1.0；"/＞

上面代碼的主要作用是定義一個viewport虛擬窗口,虛擬窗口是瀏覽器的內(nèi)容顯示區(qū)域,移動設(shè)備屏幕是設(shè)備的物理顯示區(qū)域.通過代碼指定虛擬窗口寬度（width）為移動設(shè)備屏幕寬度（device-width）,并將初始縮放比例大小設(shè)為1.0.

4 運行效果

本移動學習平臺在多個移動瀏覽器中進行了仿真實驗都能正常運行,傳統(tǒng)學習平臺和移動學習平臺在OperaMobileEmulator首頁運行結(jié)果如圖3所示（320*480）.

圖3 傳統(tǒng)學習平臺和移動學習平臺對比Fig.3 Comparison of the traditional learning platform and mobile learning platform

圖4 學習資源與在線測試Fig.4 Learning resourceand online test

由圖3對比可以看出傳統(tǒng)學習平臺在移動設(shè)備上瀏覽很不方便,字體很小,即使可通過觸屏放大字體,也需要左右拖動才能瀏覽網(wǎng)頁內(nèi)容,用戶體驗度非常不好.圖4給出了移動學習平臺上學習資源和在線測試兩個功能模塊的運行界面,移動學習平臺比較清晰,網(wǎng)頁的加載速度也比較快.

5 小結(jié)

本文在不改變傳統(tǒng)網(wǎng)站業(yè)務(wù)邏輯層和數(shù)據(jù)庫訪問層的情況下,通過增加移動設(shè)備界面層實現(xiàn)了移動學習平臺的設(shè)計.為了能夠使移動學習平臺適用于不同移動設(shè)備和瀏覽器,采用了HTML5和CSS3等技術(shù)實現(xiàn)了跨平臺使用.隨著HTML5技術(shù)的不斷完善,微軟IE9.0+、Chrome、蘋果的safari等瀏覽器都可以支持HTML5,越來越多的傳統(tǒng)網(wǎng)站直接從當前模式向HTML5升級,開發(fā)相應(yīng)的移動網(wǎng)站.

[1]百度開發(fā)者中心.百度移動互聯(lián)網(wǎng)發(fā)展趨勢報告2013Q1[R/OL].（2013-05-14）[2013-0517].http：//developer.baidu.com/report.

[2]趙愛美.基于.NET的多數(shù)據(jù)源系統(tǒng)開發(fā)與應(yīng)用[J].計算機時代,2013（5）：43-45.

[3]陳博,廖軍.移動Web應(yīng)用的能力需求與發(fā)展淺析[J].移動通信,2011（5）：32-35.

[4]崔媛媛.移動Web瀏覽業(yè)務(wù)及關(guān)鍵技術(shù)[J].電信網(wǎng)技術(shù),2011（4）：15-18.

[5]W3School領(lǐng)先的Web教程測試版5.0[EB/OL].[2013-05-10].http：//www.w3school.com.cn/htm l5/htm l_5_video.asp.

[6]唐俊開.HTML5移動Web開發(fā)指南[M].北京：電子工業(yè)出版社,2012.

（責任編輯：盧奇）

Research and im plementation of M-Learning p latform based on HTM L5 and.NET

Zhao Aimei
（Shandong Foreign Trade VocationalCollege,Qingdao266071,China）

With the rapid development ofmobile internet and mobile devices,M-Learning has become an important way for college students to acquire knowledge.This paper focused on practicality situation of college quality course building,put forward ideas to improve on the traditional website.A mobile device interface layer is added without changing the business logic layer and the database access layer.The ideas simplify the design process of mobile website,improve the efficiency of the development and realize reuse of code.In order to run in multiple browsers and multi-resolution adaptivemobile devices,the new technology of HTML5 and CSS3 are used by M-Learning platform which is possible for a variety ofmobile devices.

M-Learning；HTML5；CSS3；mobile browser；.NET

TP311

A

1008-7516（2013）04-0062-05

10.3969/j.issn.1008-7516.2013.04.015

2013-05-30

山東省高?？茖W研究計劃（J13WH71）

趙愛美（1977-）,女,山東鄆城人,碩士,講師.主要從事計算機應(yīng)用和教育技術(shù)研究.