陳 印

（四川職業(yè)技術學院，四川 遂寧 629000）

隨著“移動互聯(lián)網(wǎng)+”理念的蓬勃發(fā)展，以手機為主流的移動智能終端應用幾乎已成為人們生活和工作不可或缺的一部分，如微信、QQ、滴滴、美團、淘寶APP等。對于大多數(shù)高職院校而言，基本上都建有基于C/S或B/S架構(gòu)、涵蓋校園信息管理、教學管理、科研管理、學生管理以及后勤管理等與教學工作、校園生活密不可分的信息系統(tǒng)，但充分考慮教職員工和學生常用的手機、平板電腦等移動智能終端設備應用及使用習慣的學校并不多，即使有，也只是少量簡單信息推送與查閱等功能，沒有充分發(fā)揮移動智能終端的優(yōu)勢和解決用戶的迫切需求。在這樣的大環(huán)境之下，高職院校信息系統(tǒng)已不能故步自封、依然停留在僅PC端支撐的應用階段，應當針對移動終端設備的特性對其功能及使用方式進行有效的遷移或擴充。Html5為這一切提供了強有力的技術支撐。

1 Html5概述

HTML5是HTML4.01的下一個版本，于2014年10月正式發(fā)布。HTML5之前的HTML標準，適合PC端的WEB程序開發(fā)，并不適用于移動終端設備，或者在移動設備上不能提供良好的用戶體驗。HTML5相對于上一個版本，主要增加了以下幾個主要內(nèi)容和新的特性：新的文檔類型、

1.1 跨平臺

目前移動智能終端設備的系統(tǒng)平臺有蘋果公司的iOS和谷歌公司的Android兩大主流陣營。iOS平臺應用主要使用Objtive-C或Swift語言開發(fā)，而Android平臺主要使用Java語言進行開發(fā)。之前的移動終端APP為了滿足不同的系統(tǒng)平臺支撐，需要分別開發(fā)iOS版和Android版，耗費大量的人力和財力進行重復開發(fā)，這種應用又稱“原生應用”。Html5屬于WEB技術，跨平臺性是其最主要的特征，使用Html5開發(fā)的應用基于Web技術構(gòu)建，運行于移動瀏覽器之中，不受系統(tǒng)平臺限制，這種應用又稱為移動Web應用。[2]

1.2 多媒體

聲音與視頻是多媒體的主要表現(xiàn)形式，Html5中提供了及元素以支撐聲音和視頻的播放。由于不同瀏覽器對文件格式的支持不盡相同，這些標簽里邊允許使用多個標記設置使用不同格式的文件聲音或視頻文件，瀏覽器將根據(jù)實際情況識別第一個可用的文件格式。

1.3 繪圖

Html5提供了及標記用于在網(wǎng)頁上繪制位圖或矢量圖，可用于繪制與動態(tài)數(shù)據(jù)相關的一些統(tǒng)計圖、特殊圖形以及外部圖片等。不過canvas本身并不支持繪圖能力，需要使用JavaScript實現(xiàn)繪圖功能；而svg可通過設置SVG DOM元素來繪制矢量圖，而SVG DOM中的元素值可以使用JavaScript來進行控制。[3]

1.4 數(shù)據(jù)存儲

Html5提供了Web Storage技術，可以通過Local Storage和Session Storage實現(xiàn)對離線數(shù)據(jù)的臨時或永久存儲。如果要存儲結(jié)構(gòu)較為復雜的數(shù)據(jù)，還可以使用基于SQLite開發(fā)的關系型數(shù)據(jù)庫Web SQL Database，以及基于NoSQL的非關系型數(shù)據(jù)庫IndexedDB。[4]

1.5 地理定位

Html5通過Geolocation接口可獲取用戶地理位置信息，包括經(jīng)緯度坐標等，配合百度地圖、谷歌地圖、高德地圖等，可以向用戶呈現(xiàn)可視化的GPS定位信息。瀏覽器的Geolocation對象的getCurrent Position方法用于獲取當前的位置信息，獲取成功之后可用latitude和longitude得到當前位置的緯度和經(jīng)度值。由于定位設計用戶隱私，訪問時，瀏覽器需要向用戶申請授權(quán)。

1.6 移動終端設備及本地系統(tǒng)的訪問

Html5提供了WebRTC技術、Plus技術，以實現(xiàn)對移動終端設備及本地文件系統(tǒng)的訪問。通過這些技術，可以使用JavaScript腳本實現(xiàn)攝像頭及麥克風的調(diào)用、文件的訪問以及通訊錄的訪問等。通過Camera API能夠使用移動終端的攝像頭拍照并呈現(xiàn)圖像到當前網(wǎng)頁。

2 高職院校信息系統(tǒng)功能概述

高職院校信息系統(tǒng)概念較為廣泛，而且不同學校在信息系統(tǒng)功能需求或?qū)嶋H應用中有所不同。但總的來說有以下幾個必不可少的功能子模塊：

2.1 校園信息管理模塊

校園信息管理是高職院校非常重要的新聞、公告等資訊平臺，一般由校園網(wǎng)及專用的綜合網(wǎng)絡辦公系統(tǒng)（如OA協(xié)同辦公系統(tǒng)等）來實現(xiàn)。具體內(nèi)容包括新聞或公告信息的發(fā)布、修改、刪除、審核、展示等功能，其中信息的展示（即瀏覽）功能完全可以擴充到移動終端設備信息系統(tǒng)中。

2.2 教務管理模塊

教務管理是高職院校教學活動管理的核心，一般由專門的教務在線管理系統(tǒng)來實現(xiàn)（如正方管理系統(tǒng)）。主要實現(xiàn)教務處教學班排課、班級管理、學生管理，教師課表的查閱、調(diào)課申請與審核、成績發(fā)布與管理、考勤信息的管理，以及學生課表的查閱、成績的查閱等功能。其中課表查閱、調(diào)課申請與審核、考勤信息管理、成績查閱等功能業(yè)務邏輯較為簡單，對計算機資源要求低，便捷性要求卻較高，適合擴充到移動終端設備信息系統(tǒng)中。

2.3 科研管理模塊

科研工作是培養(yǎng)和鍛煉高職院校師資隊伍科研能力的重要工作，一直以來都很受學校的重視?？蒲泄芾碇饕獙崿F(xiàn)科研項目、論文與專著、教材等科研成果的管理功能。這些科研項目成果的登記、出版物或獲獎證書等的證明材料上傳等使用移動終端操作更為方便。

由于這些功能模塊相對獨立性較強，管理部門重合性小，而且各自內(nèi)部業(yè)務邏輯較為復雜，很多高職院校采用的是多個毫不相關、相互獨立、基于B/S架構(gòu)的WEB系統(tǒng)為各個部門專用。課題所研究的基于移動終端的高職院校信息系統(tǒng)并不是從零開始設計系統(tǒng)，更不是要把整個WEB系統(tǒng)所實現(xiàn)的功能原封不動搬到移動終端之上，而是需要針對移動終端的特點和用戶的合理需求對原有的WEB系統(tǒng)功能進行遷移和擴充。如果要從這些零散的系統(tǒng)中抽取部分功能在移動終端整合為一個綜合的信息系統(tǒng)，需要分別在各個系統(tǒng)中申請并取得單獨授權(quán)。

3 Html5在基于移動終端高職院校信息系統(tǒng)中的應用

Html5技術為基于移動終端的高職院校信息系統(tǒng)的開發(fā)提供了豐富的技術支撐。為便于討論，以下使用“本系統(tǒng)”特指本課題研究的“基于移動終端高職院校信息系統(tǒng)”。

3.1 開發(fā)模式與技術選擇

基于Html5技術的移動Web應用與移動平臺原生應用相比，移動Web應用具有跨平臺的優(yōu)勢，然而由于其運行于瀏覽器容器中，與移動設備API隔離，功能受到一定的限制，它適用于瀏覽、查詢或展示型的應用，在功能復雜或需使用設備API的應用中，僅僅使用Web技術實現(xiàn)難度較大或無法實現(xiàn)，具體表現(xiàn)在：移動應用通常需要訪問的設備功能包括：攝像頭、加速記、地理位置信息、通訊錄、照片庫、存儲卡和媒體播放等，這些功能與硬件或操作系統(tǒng)底層有關，Web應用不具備所需的較高的權(quán)限，因此需要平臺原生技術進行補充，取長補短，使用移動Web技術與系統(tǒng)平臺原生技術相混合的開發(fā)模式。[5]

技術上，前端使用Html5+JavaScript+CSS4技術,服務器端采用Java+MySQL技術與現(xiàn)有的信息系統(tǒng)各分支子系統(tǒng)進行數(shù)據(jù)整合，前端與后端使用JSON實現(xiàn)數(shù)據(jù)交互，最終根據(jù)需要發(fā)布為iOS或Android系統(tǒng)所支持的App即可。

3.2 多媒體展示

本系統(tǒng)中的校園信息模塊，主要實現(xiàn)新聞、公告等在移動終端的展示功能，這些信息中經(jīng)常會使用到圖片、聲音和視頻等多媒體資源，因此必須考慮多媒體文件的展示問題。早期的html版本早已支持圖片的呈現(xiàn)，而聲音和視頻卻必須借助于其他外部插件才能正常展示。Hmtl5標準對此做了有很大的改進，僅使用、元素即可實現(xiàn)音頻、視頻格式的播放。

3.3 文件訪問與上傳

本系統(tǒng)中的科研管理等子模塊需要上傳科研成果證明材料等電子文件，在以往傳統(tǒng)的WEB系統(tǒng)中一般需要使用掃描儀采集電子文件再進行上傳，而在移動終端項目中，就應該充分發(fā)揮其固有的硬件設備特性，直接調(diào)用攝像頭及時拍照上傳。

Html5的input標簽，設置其type為“file”即可輕松實現(xiàn)對移動終端的文件訪問，更為驚喜的是，通過該功能配合JS腳本能夠快速實現(xiàn)在移動終端選擇使用攝像頭在線拍照后及時上傳。如果設置其accept為“image/*”，可用于選擇圖片類型的文件，設置其multiple屬性可支持多文件選擇。JS腳本使用FileReader()方法獲取選擇文件的64位編碼[6]，便于傳輸數(shù)據(jù)到服務器端，如：

其中的datas即是成功讀取所選文件列表中第一個文件得到的64位編碼，其格式形如：

data：image/png;base64,編碼字符串

服務器端接收到數(shù)據(jù)后根據(jù)具體的編程語言解析并存儲為對應格式的文件。由于編碼完畢才能向服務器端發(fā)送數(shù)據(jù)，所以必須協(xié)調(diào)好兩個步驟的執(zhí)行時序。另外，如果一次上傳多個文件，則需要遍歷各個文件并采取恰當?shù)姆绞脚c后端服務器進行數(shù)據(jù)傳遞。

3.4 移動前端與服務器后端數(shù)據(jù)交互

本系統(tǒng)各個模塊將大量使用前后端數(shù)據(jù)交互功能，可使用Html5與jQuery里邊的Ajax技術實現(xiàn)異地無刷新交互。為了使用Ajax，事先需引用Jqeury框架。目前，前端與后端數(shù)據(jù)主要使用json對象進行交互，xml用得比較少。

3.4.1 前端向后端發(fā)送數(shù)據(jù)請求

在WEB前端，使用Html5輸入控件接收用戶輸入數(shù)據(jù)，按照Ajax語法組織并提交數(shù)據(jù)到后端服務器，如：

$.ajax({

type：“post”,//數(shù)據(jù)提交方式，分為 get和post兩種

url：“servlet/test”,//接收請求的服務器后端文件地址

data： {data1：“data1”,data2：“data2”},//從輸入控件提取的數(shù)據(jù)，作為請求參數(shù)提交到服務器后端

dataType：“json”,//后端執(zhí)行請求后以json類型返回響應數(shù)據(jù)

success：analysisData{

//后端響應成功后的回調(diào)函數(shù)，參見3.4.3

});

3.4.2 后端向前端發(fā)送響應數(shù)據(jù)[7]

當服務器后端接收到前端數(shù)據(jù)請求后，按照所使用的編程語言執(zhí)行請求并向前端以json字符串形式發(fā)送響應結(jié)果，不同的語言環(huán)境處理方式略有不同。在JSP中，可使用json-lib包通過json對象封裝鍵值對格式的java數(shù)據(jù)再轉(zhuǎn)化為json字符串輸出，參考代碼如下：

//MyData是java中自定義的類，包含多個屬性

MyData myData1=new MyData(“Value11”,“Value12”,…);

MyData myData2=new MyData(“Value21”,“Value22”,…);

List list=new ArrayList();

list.add(myData1);

list.add(myData2);

JSONArray jsonArray=JSONArray.fromObject(list);//java對象列表轉(zhuǎn)化為json對象數(shù)組

String jsonstr=jsonArray.toString();//json對象數(shù)組轉(zhuǎn)化為json字符串

3.4.3 前端對數(shù)據(jù)進行解析

服務器端成功執(zhí)行前端請求后將回調(diào)前端指定的函數(shù)，并以data參數(shù)將響應結(jié)果返回給前端。前端結(jié)合Html5控件，可按需要對接收到的數(shù)據(jù)進行解析處理，如：

function analysisData(data){

$(“#dataList”).html('');//Html5 前 端數(shù)據(jù)呈現(xiàn)控件

var jsonData=$.parseJSON(data);//將響應結(jié)果轉(zhuǎn)換為json對象

$.each (jsonData,function(index,item){//遍歷解析json對象中的數(shù)據(jù)并以列表形式呈現(xiàn)到DataList

varname1=jsonData[index].Field-Name1;//FieldName由后端服務器發(fā)送回來的數(shù)據(jù)屬性名決定

var name2= jsonData [index].Field-Name2;

$(“#dataList”).html($(“#dataList”).html()+“”+“
”);

});

};

4 結(jié)語

Html5的跨平臺、多媒體、繪圖、數(shù)據(jù)存儲、地理定位、文件訪問等特性，推動了傳統(tǒng)WEB系統(tǒng)向手機、平板電腦等移動終端的功能延伸，為移動終端App的開發(fā)提供了新的技術和新的思路，為基于移動終端的高職院校信息系統(tǒng)的開發(fā)提供了技術支撐。