基于移動平臺的校園生活導(dǎo)航服務(wù)網(wǎng)站開發(fā)

許銳思

摘要：智能手機的普及和移動互聯(lián)網(wǎng)的搭建，促進者瀏覽器和網(wǎng)站的發(fā)展，基于移動平臺的網(wǎng)站開發(fā)也越來越熱門。傳統(tǒng)的WAP網(wǎng)站在不斷發(fā)展，適應(yīng)性更強的HTML5網(wǎng)站也應(yīng)運而生。在基于移動開發(fā)平臺的校園服務(wù)導(dǎo)航網(wǎng)站開發(fā)中，采用新技術(shù)和開發(fā)工具更是時代所趨。

關(guān)鍵詞：手機網(wǎng)站；HTML5；移動平臺

中圖分類號：TP393 文獻標(biāo)識碼：A 文章編號：1009-3044（2015）05-0287-02

Development of Campus Life Navigation Service Website based on Mobile Platform

XU Rui-si

（The Department of Information Science & Technology， Guangdong University of Foreign Studies South China Business College， Guangzhou 510545， China）

Abstract：The popularity of smart phones and mobile Internet to build， promote the development of the browser and website. Web development which bases on mobile platform is becoming more and more popular. The traditional WAP site is development in the continuous， more and more adaptive HTML5 site also came into being. In the development of campus service navigation website based on mobile platform， the new technology and the development tools are the trend of the times.

Key words：mobile web site； HTML5； mobile platform

1 引言

近年來，隨著移動互聯(lián)網(wǎng)的蓬勃發(fā)展和智能手機的普及，手機網(wǎng)民的數(shù)量在不斷增長，基于3G技術(shù)的網(wǎng)絡(luò)應(yīng)用也越來越多?；谑謾C小巧、功能強、性能好、使用方便的特性，用戶們都喜歡隨身攜帶，甚至用手機辦公、兼職，例如現(xiàn)在較為流行的“刷單”工作，網(wǎng)上交易，炒股等。由此可見，手機是個很好的信息傳播媒介。在大學(xué)這個科學(xué)前沿地，大部分師生都使用手機來瀏覽信息和相互通信交流。因此，建立一個基于移動平臺的校園生活導(dǎo)航服務(wù)網(wǎng)站，會更有利于學(xué)生、老師之間的交流，同時也會方便了學(xué)生去了解學(xué)校的最新動態(tài)。

2 基于移動平臺的校園生活導(dǎo)航服務(wù)網(wǎng)站開發(fā)的需求

校園是我們學(xué)生學(xué)習(xí)生活的地方，對于新生來說，熟悉新環(huán)境是他們?nèi)雽W(xué)的第一要事。雖然許多學(xué)校信息，師生們都可以在學(xué)校的官網(wǎng)上查看到，但這并不便于師生們隨時隨地了解學(xué)校的資訊。而基于移動平臺的校園生活導(dǎo)航服務(wù)網(wǎng)站卻可以很方便地為師生們提供他們所需要的信息，只要他們有一臺智能手機，能夠聯(lián)網(wǎng)。

對學(xué)校來說，基于移動平臺的校園生活導(dǎo)航服務(wù)網(wǎng)站還能減少學(xué)校發(fā)布信息所需要的人力、物力，有利于學(xué)校活動信息的發(fā)布，同時也方便了學(xué)校對信息的收集和管理。

3 手機網(wǎng)站的發(fā)展

首先，我們要了解一下手機網(wǎng)站，手機網(wǎng)站就是手機能訪問的網(wǎng)站。更準(zhǔn)確地說，它是面向手機用戶為方便手機訪問而建立的網(wǎng)站，也被稱為WAP網(wǎng)站。

WAP是一種向移動終端提供互聯(lián)網(wǎng)內(nèi)容和先進增值服務(wù)的全球統(tǒng)一的開放式協(xié)議標(biāo)準(zhǔn)，它是簡化了的無線Internet協(xié)議。

WAP網(wǎng)站與web網(wǎng)站最明顯的區(qū)別就在于Web網(wǎng)站包含的文字、圖像等信息量都比較多，頁面文件比較大，通常在10K以上，而WAP網(wǎng)站的頁面比較簡潔，頁面文件較小。正如：手機騰訊網(wǎng)首頁也只有 9KB左右，騰訊網(wǎng)的普通網(wǎng)頁就大于100KB。

WAP網(wǎng)站可分為WAP1.X和WAP2.0網(wǎng)站。

WAP1.X功能簡單、界面粗糙， 而基于WAP2.0開發(fā)的手機網(wǎng)站在功能、界面顯示、動態(tài)性和交互性等方面已經(jīng)能夠和普通網(wǎng)站相媲美了。WAP2.0的手機網(wǎng)站可以在電腦上直接用瀏覽器訪問，而WAP1.X的網(wǎng)站，需要模擬器或者給瀏覽器安裝相應(yīng)的插件才能訪問。比如：Firefox安裝WMLBROWSER插件才可訪問WAP1.X的手機網(wǎng)站。

WAP1.X是最初專門用WML語言開發(fā)的一個腳本，它功能簡單，頁面形式主要是文字，受當(dāng)時的網(wǎng)速、帶寬和手機硬部件的限制，不能采用CSS樣式，在顏色的選擇上也只有文字的黑色和連接的藍色，頁面的背景色也不能設(shè)置。當(dāng)時的網(wǎng)頁界面顏色單調(diào)，排版并不美觀。

而WAP2.0主要是采用XHTML開發(fā)，頁面形式豐富，可以采用CSS定義，通過IE也能直接訪問，它能支持任何移動終端完美訪問。其中XHTML是一種置標(biāo)語言，表現(xiàn)方式與HTML相似，只是在語法上更加嚴(yán)謹(jǐn)。

現(xiàn)在，HTML5的面世，使得手機網(wǎng)站的頁面更加美觀，更具吸引力，而且網(wǎng)頁的加載速度也有了很大的提升。

4 網(wǎng)站界面開發(fā)語言介紹

4.1 HTML5的優(yōu)勢

HTML5是萬維網(wǎng)的核心語言、標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用超文本標(biāo)記語言（HTML）的第五次重大修改[1]，它現(xiàn)在正被應(yīng)用于各大網(wǎng)站的網(wǎng)頁編寫。

HTML5融入了許多新穎的標(biāo)簽屬性，淘汰了過時或冗余的屬性。它與CSS3樣式結(jié)合，使得網(wǎng)站的頁面更加美觀、炫麗，此外，它與JavaScript結(jié)合運用，還可以使網(wǎng)頁界面更具動感效果，吸引訪問者的眼球。而且HTML5還有一大特點就是它可以通過標(biāo)簽來控制網(wǎng)站頁面的大小，使得頁面能根據(jù)各類型智能手機的屏幕大小自動調(diào)節(jié)來顯示信息。HTML5網(wǎng)站支持電腦PC端和手機端的訪問，大大方便了網(wǎng)站數(shù)據(jù)的維護。

在本次網(wǎng)站開發(fā)里，我們也采用了HTML5+CSS3的界面布局方式，同時，適當(dāng)?shù)奶砑恿薐S腳本來調(diào)用手機的本地用戶數(shù)據(jù)，來提高網(wǎng)頁的加載速度。

4.2 JQuery的運用

JQuery是一個優(yōu)秀的JavaScript庫。它是輕型的JS庫，兼容了各類瀏覽器。它的一大優(yōu)勢就是，有詳細的文檔說明，還有許多成熟的插件供開發(fā)者使用。JQuery能夠使用戶的html頁面保持代碼和html內(nèi)容分離。它模塊化的使用方式使開發(fā)者可以很輕松的開發(fā)出功能強大的靜態(tài)或動態(tài)網(wǎng)頁[2，3]。在項目里，我們采用了JQuery來設(shè)計各功能模塊的頁面切換效果，同時還通過調(diào)用JQuery里的ajax方法來訪問網(wǎng)站存儲在用戶客戶端的localStorage和sessionStorage數(shù)據(jù)，提高了網(wǎng)站的響應(yīng)速度。

5 網(wǎng)站后臺編程語言選擇

網(wǎng)站后臺的編程語言，我們是采用了PHP語言編寫。PHP是一門腳本語言，語法結(jié)構(gòu)與JSP相似，在html頁面里進行嵌入式編寫，而且可以實現(xiàn)跨平臺運行。這門語言實用性強，運行流暢，語法簡單，方便了網(wǎng)站的后期維護和開發(fā)者對代碼的閱讀。只要在服務(wù)器端搭建好Apache環(huán)境，就能很好運行PHP程序了，而對于客戶端，用戶的手機大部分都是Android系統(tǒng)，PHP程序在Android系統(tǒng)也是完美運行的。

6 數(shù)據(jù)庫設(shè)計

6.1 網(wǎng)站在移動手機端的數(shù)據(jù)存儲

HTML5提供了兩種在客戶端存儲數(shù)據(jù)的方法，那就是localStorage和sessionStorage，這就相當(dāng)于以往我們采用的Cookie和Session數(shù)據(jù)存儲方法。區(qū)別就在于Cookie和Session數(shù)據(jù)存儲的時間比較短，而localStorage和sessionStorage這兩種存儲方法存放的數(shù)據(jù)保留時間長，不易丟失。這使得網(wǎng)頁的再次瀏覽速度更快，甚至在斷網(wǎng)的情況下用戶也能瀏覽到已經(jīng)加載完成的或者近期瀏覽過的網(wǎng)頁的信息。

除此之外，還有一種WebDB存儲本地數(shù)據(jù)的方式。它提供了關(guān)系數(shù)據(jù)庫的基本功能，可以存儲頁面中的交互、復(fù)雜的數(shù)據(jù)。它可以將網(wǎng)站的部分緩存信息存儲在用戶的本地數(shù)據(jù)庫中，此功能相較于localStorage和sessionStorage兩種存儲方式更有條理，同時這些數(shù)據(jù)還可以通過SQLiteSpy軟件打開查看。因為該存儲方式就相當(dāng)于在用戶端建立一個小型的SQLite數(shù)據(jù)庫，該數(shù)據(jù)庫主要是用來存儲用戶習(xí)慣或訪問的歷史記錄。這些信息都會對用戶能夠快速訪問網(wǎng)站起到一個關(guān)鍵的作用，但這些信息并不會占用用戶太多的存儲空間。

6.2 網(wǎng)站數(shù)據(jù)庫設(shè)計

由于這個網(wǎng)站主要是用于校園信息的傳播，信息量較大，所以在數(shù)據(jù)庫的選用方面，我們是采用了SQL server 2008這種中小型數(shù)據(jù)庫。

該數(shù)據(jù)庫運行在微軟數(shù)據(jù)平臺上，功能強大，能夠組織管理任何數(shù)據(jù)，同時它具有很高的安全性、可靠性和可擴展性。

我們對這個校園網(wǎng)站設(shè)立了4個獨立的版塊，根據(jù)E-R圖和數(shù)據(jù)流圖來設(shè)計數(shù)據(jù)表。另外，我們通過對數(shù)據(jù)庫設(shè)置用戶權(quán)限來區(qū)分普通訪客和管理員，并且針對不同的用戶，對網(wǎng)站內(nèi)部信息的管理權(quán)限也作出了相應(yīng)的限制。

7 開發(fā)工具選擇

在這次網(wǎng)站開發(fā)過程中，我們選擇了常用的、功能強大的編程工具eclipse、SQL server 2008數(shù)據(jù)庫管理工具，還有就是采用Opera瀏覽器和Opera Mobile Emulator來調(diào)試網(wǎng)站的運行效果。

8 總結(jié)

在移動互聯(lián)網(wǎng)和信息技術(shù)快速發(fā)展的今天，隨著智能手機的日漸普及，基于移動平臺的網(wǎng)站也逐漸成為了市場的焦點。基于移動平臺的網(wǎng)站的開發(fā)工具在不斷更新，技術(shù)也在日漸成熟。作為開發(fā)者，我們更要敢于嘗試，嘗試用新技術(shù)和工具來開發(fā)，這樣，我們的作品才能具有時代的氣息，跟得上時代的步伐。而網(wǎng)站的整體開發(fā)大致上就劃分為前端頁面開發(fā)和后臺開發(fā)兩個層面，只要需求分析全面，可行性強，數(shù)據(jù)庫設(shè)計完善，網(wǎng)站搭建也就不會太難。通過這次網(wǎng)站開發(fā)，我們懂得了要做開發(fā)，專業(yè)的基礎(chǔ)知識一定要結(jié)實，而且要有一定的開發(fā)經(jīng)驗，還要學(xué)會在網(wǎng)絡(luò)上和書籍里獲取所需知識，善于總結(jié)，團結(jié)合作。

參考文獻：

[1] 懷志和.Android移動網(wǎng)站開發(fā)詳解[M].北京： 清華大學(xué)出版社，2013 .

[2] Adam Freeman.HTML5權(quán)威指南[M].北京：人民郵電出版社，2012.