基于HTML5與CSS3高?；ヂ?lián)網(wǎng)移動端網(wǎng)站優(yōu)化

胡畢松 郭龍 劉順林 彭永鳳 浦婷 段興悅

摘 要：針對互聯(lián)網(wǎng)與移動終端技術(shù)的不斷發(fā)展，人們對移動設(shè)備的需求不斷增加，原有的Web標(biāo)準(zhǔn)已不再適應(yīng)移動端，原有高校網(wǎng)站在移動端已不能提高用戶體驗(yàn)。以傳統(tǒng)PC網(wǎng)站開發(fā)為基礎(chǔ)，為實(shí)現(xiàn)與利用代碼的復(fù)用性，文章使用基于移動設(shè)備的HTML5與CSS3和jQuery Mobile等技術(shù)，構(gòu)建了一個移動端網(wǎng)站，讓其能夠得到多種終端的支持，同時提出了一種使用該技術(shù)提升高校網(wǎng)站在移動端的內(nèi)容、應(yīng)用架構(gòu)和服務(wù)模式的解決方案。

關(guān)鍵詞：HTML5；CSS3；移動瀏覽器；jQuery Mobile；移動終端

中圖分類號：TP316 文獻(xiàn)標(biāo)識碼：A 文章編號：2095-1302（2016）06-00-02

0 引 言

由于移動互聯(lián)網(wǎng)技術(shù)的發(fā)展和移動智能設(shè)備的普及，很多用戶開始選擇在移動端進(jìn)行瀏覽、娛樂和學(xué)習(xí)。據(jù)谷歌2012第一季度與市場調(diào)研機(jī)構(gòu)IPSOS（益普索）對關(guān)于人們?nèi)绾问褂弥悄茉O(shè)備進(jìn)行全世界范圍的調(diào)查，得到的信息包括對移動設(shè)備手機(jī)的普及和使用情況記錄的一些相關(guān)數(shù)據(jù)。人們利用智能設(shè)備進(jìn)行對互聯(lián)網(wǎng)的使用，包括對資源的搜索及視頻的搜索、移動商務(wù)、移動廣告和人們的社交網(wǎng)絡(luò)與網(wǎng)絡(luò)學(xué)習(xí)等。截止目前，中國智能手機(jī)的使用率已達(dá)到90%，它已經(jīng)在人們的生活中扮演著一個重要角色，為此，人們對智能設(shè)備的依賴程度也隨之增加，其中約64%的用戶每天都會用智能手機(jī)訪問互聯(lián)網(wǎng)。在辦公室時、乘坐公共交通工具時、在餐館時或在回家路上等，超過50%的使用者每天都會使用智能移動設(shè)備對互聯(lián)網(wǎng)進(jìn)行至少一次訪問，主要行為包括對搜索引擎的使用，對電子郵件的收發(fā)，登錄社交網(wǎng)站等，越來越多的用戶將在未來更加頻繁的使用智能手機(jī)訪問互聯(lián)網(wǎng)。

隨著移動終端（智能手機(jī)）的不斷擴(kuò)增和使用，顯然PC機(jī)終端（開發(fā)）不能滿足市場需求，越來越多的用戶，特別是在校學(xué)生大多都選擇使用移動瀏覽器如Safari，UC，Opera，Chorme等上網(wǎng)娛樂、辦公。許多豐富的網(wǎng)頁內(nèi)容將在移動瀏覽器端顯示，它支持 www標(biāo)準(zhǔn)協(xié)議，其中主要采用兩種布局來顯示PC網(wǎng)站的內(nèi)容：①通過對網(wǎng)頁的放大或縮小來顯示；②通過自適應(yīng)手機(jī)屏幕寬度，將PC版?zhèn)鹘y(tǒng)網(wǎng)站進(jìn)行重新布局，利用手機(jī)出現(xiàn)的滾動條，對網(wǎng)頁內(nèi)容進(jìn)行查看，但是這樣顯示的內(nèi)容將會被打亂，而布局也隨之變得混亂。面對這種情況，假如摒棄傳統(tǒng)PC版網(wǎng)站的資源，重新開發(fā)新的移動設(shè)備端網(wǎng)站，就需要投入更多的時間、精力、金錢等開發(fā)成本，其中對人力、資源的浪費(fèi)是巨大的。該設(shè)計在不變動PC版網(wǎng)站相關(guān)業(yè)務(wù)及數(shù)據(jù)訪問的基礎(chǔ)上，提出一個基于CSS3+HTML5+jQuery Mobile的新移動技術(shù)實(shí)現(xiàn)平臺的開發(fā)創(chuàng)建，對HTML5相關(guān)核心技術(shù)等的導(dǎo)入，讓移動端平臺的建立實(shí)現(xiàn)跨平臺有了新的思路。

1 設(shè)計思路

本設(shè)計繼續(xù)沿用現(xiàn)在主流的MVC三層架構(gòu)思想進(jìn)行修改設(shè)計，即將該程序分為三個層次，分別是顯示層、業(yè)務(wù)層和數(shù)據(jù)持久層。

（1）界面層：負(fù)責(zé)顯示用戶界面；

（2）業(yè)務(wù)層：根據(jù)用戶需要的業(yè)務(wù)處理相關(guān)業(yè)務(wù)邏輯關(guān)系；

（3）數(shù)據(jù)持久層：對數(shù)據(jù)庫的訪問交互，例如查詢數(shù)據(jù)、插入、刪除和修改數(shù)據(jù)庫中的數(shù)據(jù)。

該方案只增加一個與PC顯示層同層的移動設(shè)備界面層，不改變傳統(tǒng)網(wǎng)站的業(yè)務(wù)邏輯層和數(shù)據(jù)持久層，其應(yīng)用程序架構(gòu)如圖1所示。

其中，網(wǎng)頁顯示主要放在移動界面端，頁面顯示由.aspx文件管理，內(nèi)容包含jQuery Mobile和前端開發(fā)，微軟自帶的服務(wù)器端控件等，后臺使用C#語言編程，通過調(diào)用相應(yīng)的業(yè)務(wù)功能邏輯層實(shí)現(xiàn)功能。移動設(shè)備界面層如圖2所示。

2 移動開發(fā)環(huán)境搭建

開發(fā)工具：Visual Studio 2010或者 Visual Studio2012；

操作系統(tǒng)：Windows 7旗艦版；

服務(wù)器：Internet Information Services；

數(shù)據(jù)庫：Microsoft SQL Server 2008 R2；

開發(fā)語言：C#。

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

3.1 HTML5技術(shù)

HTML5是基于HTML 4.01和XHTML 1.0標(biāo)準(zhǔn)的最新HTML版本，由WHATWG在2004年提出，被W3C組織于2007年接納。2008年1月22日公布了HTML5的第一份正式草案，但HTML5仍處于完善之中，其中HTML5.1是在2016完成的。目前為止，很多瀏覽器都已經(jīng)開始支持HTML5，譬如Safari，Chrome以及火狐瀏覽器等。

HTML5包含了像

3.3 CSS3技術(shù)

CSS是1994年哈坤利本人提出的，那時他與伯特·波斯合作，在一起設(shè)計瀏覽器的同時開展了CSS的設(shè)計工作。之后，CSS便作為第一個含有層疊意識的語言，對很多開發(fā)者、作者、讀者等放出很大的空間，使得他們對設(shè)計的實(shí)現(xiàn)效益得以提高。且于1994在芝加哥的一次會議上向人們展出了CSS，不久之后，兩人便開始籌劃，成立技術(shù)小組，隨后CSS技術(shù)于1996年完成，并在次年12月份CSS作為第一本公開版本被出版。最后在1998年W3C管理下推出CSS2.1版本。它是CSS2的升級版本，在原來的基礎(chǔ)上增加了一些功能。

CSS被稱為層疊樣式表，在網(wǎng)頁界面中可以很輕松的使用。它的特性主要概括為以下四點(diǎn)：

（1）分離網(wǎng)頁的表示層和結(jié)構(gòu)層，讓它們彼此都不會受到對方的影響；

（2）對很多網(wǎng)頁的外觀實(shí)現(xiàn)同時更改；

（3）縮減網(wǎng)頁文件的大?。?/p>

（4）對網(wǎng)頁的響應(yīng)速度以及加載速度等方面起到了向上的作用。

4 結(jié) 語

借助原網(wǎng)站代碼的二次開發(fā)，增加一個移動界面端顯示，為了能夠使該平臺支持不的移動設(shè)備和瀏覽器，利用HTML5和CSS3等技術(shù)實(shí)現(xiàn)跨平臺以提高用戶的交互體驗(yàn)，利用眾多瀏覽器端都可以支持HTML5的趨勢，讓傳統(tǒng)模式網(wǎng)站轉(zhuǎn)向HTML5。對于傳統(tǒng)網(wǎng)站，使用HTML5+CSS3+jQuery Mobile新技術(shù)的開發(fā)平臺創(chuàng)建方法更容易。利用HTML5和CSS3等新移動Web標(biāo)準(zhǔn)，可以實(shí)現(xiàn)用戶借助移動設(shè)備訪問高?；ヂ?lián)網(wǎng)并提供更為友好的服務(wù)的功能，同時借助傳統(tǒng)模式在應(yīng)用架構(gòu)方面進(jìn)行創(chuàng)新，使得在任何平臺、地點(diǎn)、時間都能夠通過移動終端對網(wǎng)站進(jìn)行訪問，閱讀任何內(nèi)容。

參考文獻(xiàn)

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

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

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

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