基于HTML5的移動Web技術(shù)

1、基于HTML5的移動Web技術(shù) 摘要：隨著科技的發(fā)展，移動終端已進(jìn)入人們的生活，而傳統(tǒng)的網(wǎng)頁開發(fā)技術(shù)很難適應(yīng)這種小屏幕界面，HTML5的問世在很大程度上解決了這一難題。介紹了HTML5的特性并提出了簡單明了、可訂制性、以用戶為中心的移動Web設(shè)計原則。HTML5新增的視頻、音頻、畫布、離線應(yīng)用等功能為網(wǎng)頁開發(fā)帶來了新的希望和曙光。新技術(shù)不僅能很好地適應(yīng)移動終端界面，而且很大程度上減少了代碼冗余，提高了設(shè)備運行效率。 關(guān)鍵詞：移動互聯(lián)網(wǎng)；HTML5；移動終端；小屏幕界面；移動Web 中圖分類號：TP393文獻(xiàn)標(biāo)識碼：A文章編號文章編號：1672-7800（2013）012-0145-02 作者簡

2、介：王慶（1987-），女，成都理工大學(xué)碩士研究生，研究方向為界面設(shè)計。 0引言 隨著智能機(jī)的出現(xiàn)，我國網(wǎng)民接入互聯(lián)網(wǎng)的方式發(fā)生了翻天覆地的變化。7月17日，中國互聯(lián)網(wǎng)絡(luò)信息中心（CNNIC）發(fā)布了第32次 中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計報告1。報告顯示，截至2013年6月底，我國網(wǎng)民數(shù)量達(dá)到5.91億，互聯(lián)網(wǎng)普及率為44.1%，較2012年底提升2%。與此同時，我國 網(wǎng)民數(shù)量達(dá)4.64億，較2012年底增加4379萬人，網(wǎng)民中使用 上網(wǎng)的人群占比提升至78.5%。3G的普及、無線網(wǎng)絡(luò)的發(fā)展和 應(yīng)用的創(chuàng)新促成了我國 網(wǎng)民數(shù)量的快速提升， 成為我國最大的移動終端。由于 移動終端屏幕較小、運行能力有限，

3、傳統(tǒng)的網(wǎng)頁并不適合設(shè)備直接訪問。隨著HTML5的提出，其跨平臺的特性為移動Web開發(fā)提供了廣闊的前景。 1HTML5介紹 HTML5超文本描述語言是下一代HTML的標(biāo)準(zhǔn)。HTML5有兩大特點：首先強(qiáng)化了 Web 網(wǎng)頁的表現(xiàn)能力，其次追加了本地數(shù)據(jù)庫等相關(guān)功能。所謂的HTML5實際上是指包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合，目前支持HTML5的主流瀏覽器有Google Chrome、Firefox、Internet Explorer 9和10等。 2HTML5新特性 2.1視頻、音頻 當(dāng)我們?yōu)g覽網(wǎng)頁時或多或少都遇到過這樣的問題，比如打開不同的播放器需要安裝不同的插件，甚至

4、更換瀏覽器后同樣也需要安裝插件。現(xiàn)在Web處于嚴(yán)重依賴插件的時代，聽歌、看視頻、購物等都要依賴插件，在不便的同時還存在著許多安全隱患。HTML5新增的視頻、音頻元素，使得這一切變得簡單，我們在觀看視頻、音頻時不再依賴第三方插件，直接點擊播放器就可以得到我們想要的內(nèi)容。目前標(biāo)簽只支持Ogg、MPEG 4、WebM 格式。其中Ogg是指帶有 Theora 視頻編碼和 Vorbis 音頻編碼的Ogg文件；MPEG4是指帶有H.264視頻編碼和AAC音頻編碼的MPEG 4文件；WebM是指帶有VP8視頻編碼和 Vorbis 音頻編碼的 WebM 文件。以下是HTML5實現(xiàn)的一段視頻代碼： Your b

5、rowser does not support the video tag. var _gaq = _gaq | ;_gaq.push(_setAccount, UA-22575914-1);_gaq.push(_setDomainName, .qikan );_gaq.push(_trackPageview);(function () var ga = document.createElement(script); ga.type = text/javascriptsync = true;ga.src = ( s: = tocol ? s:/ssl

6、: :/www) + .google-analytics /ga.js;var s = document.getElementsByTagName(script)0; s.parentNode.insertBefore(ga, s);)();var _userid = ;var _siteid =75;var _istoken = 1;var _model = Model03; WebPageSpeed =250; UrchinTrack(); 目前對于移動終端而言，HTML5的音頻、視頻功能應(yīng)用是有限的。蘋果的iPhone 支持標(biāo)簽，但在一個 頁面上不能完全嵌入視頻數(shù)據(jù)，也不能提供由HTML

7、5定義的控制和訪問水平。智能 提供的是靜態(tài)圖像，當(dāng)用戶訪問視頻時提供QuickTime播放2。IPad雖然能實現(xiàn)標(biāo)簽，但它不能同時管理多個視頻頁面。 2.2表單 現(xiàn)在流行的移動設(shè)備大多采用觸摸方式進(jìn)行輸入，并且有一個虛擬的觸摸鍵盤。由于移動設(shè)備本身屏幕較小，按鍵大小和布局對用戶的影響非常大，過大或過小都會降低用戶體驗感。如果能做到輸入不同的內(nèi)容顯示不同的鍵盤，那么在提高用戶體驗的同時就提高了輸入效率3，HTML5的表單元素很好地解決了這一問題。不同元素與鍵盤的對應(yīng)關(guān)系如表1所示。 表單元素中除了上面幾個新增元素外，還有Date pickers week、time、color等元素。HTML5中

8、的表單組件是對HTML4表單的擴(kuò)展，增加了內(nèi)置表單驗證、輸入框占位符、外部表單關(guān)聯(lián)等4，避免了采用HTML4中的冗余代碼驗證和樣式控制，為網(wǎng)頁開發(fā)帶來了便捷。例如：就定義了一個遵循郵件地址格式的輸入框，在輸入地址時系統(tǒng)會自動辨別格式是否正確，若不正確不允許提交。以前這些相關(guān)驗證都需要很復(fù)雜的代碼才能實現(xiàn)，現(xiàn)在只需幾個簡單的語句就能輕松完成。 2.3畫布 目前要在網(wǎng)頁上繪圖幾乎不可能，就連最基本的圖形都很難實現(xiàn)。HTML5引入的Canvas繪畫功能，為開發(fā)人員提供了動態(tài)產(chǎn)出和圖形渲染功能。開發(fā)人員不再依賴Flash來進(jìn)行動畫繪制，利用Canvas就可以直接在網(wǎng)頁上高效快速地繪制圖形圖表，從而減少

9、網(wǎng)絡(luò)傳輸，提高了效率。Canvas畫布是一個矩形區(qū)域，可以在其中隨意畫圖，也可以加載照片。Canvas元素本身沒有繪畫能力，繪畫工作必須在JavaScript內(nèi)部才能完成。 2.4離線應(yīng)用 互聯(lián)網(wǎng)拉近了彼此的距離，讓世界變成了地球村，網(wǎng)絡(luò)帶給我們的方便不言而喻。眾所周知，Web的應(yīng)用非常強(qiáng)大，但是它存在一個致命的缺陷就是嚴(yán)重依賴網(wǎng)絡(luò)，沒有網(wǎng)絡(luò)的Web就如離開水的魚兒活不下去。雖然現(xiàn)在網(wǎng)絡(luò)無處不在，但是網(wǎng)絡(luò)信號的好壞卻各不相同。我們常常遇到掉線的情況，很多時候掉線會帶來嚴(yán)重的后果，那么有什么辦法能解決這個難題呢？HTML5給我們帶來了希望。HTML5強(qiáng)大的功能就是離線應(yīng)用，將應(yīng)用數(shù)據(jù)緩存到本地瀏

10、覽器中，掉線時一樣可以瀏覽網(wǎng)頁。 其實，離線Web應(yīng)用就是一個URL列5，列表中的URL可以指向HTML、CSS、JavaScript文件、圖片或者其它資源，該列表被稱為Manifest File。通過創(chuàng)建Cache Manifest文件，可以輕松創(chuàng)建Web應(yīng)用的離線版本。當(dāng)使用離線Web時，會引入這一清單，瀏覽器會從清單文件中讀取相應(yīng)的URL信息，并下載相應(yīng)的資源將其緩存到本地。因此，在離線狀態(tài)下訪問Web應(yīng)用時瀏覽器就會自動切換到從本地直接讀取這些資源，從而能夠脫離網(wǎng)絡(luò)使用。 2.5標(biāo)簽和樣式 移動終端因為受到屏幕尺寸和分辨率的限制，無法將普通頁面全屏顯示在一個頁面上，就算通過屏幕縮放技術(shù)

11、6來訪問傳統(tǒng)的網(wǎng)頁也很難得到最佳體驗。不過HTML5已經(jīng)考慮到這點，在網(wǎng)頁頭部加上就可以了。它根據(jù)終端屏幕尺寸來自動調(diào)整網(wǎng)頁大小，從而可以適應(yīng)不同屏幕大小的移動終端設(shè)備。 3移動Web設(shè)計原則 無論是 還是平板電腦都不同于PC機(jī)，這些設(shè)備屏幕較小、運行能力低，若直接移植大屏幕界面的設(shè)計方案，會給用戶帶來不便。為了提高界面設(shè)計效果和用戶體驗，在設(shè)計界面時可以遵循以下原則。 3.1簡潔明了 我們?yōu)g覽網(wǎng)頁時往往一下子就被那些漂亮的圖片所吸引，這是因為圖片對眼睛的吸引遠(yuǎn)遠(yuǎn)大于文字對眼睛的吸引。然而對于小屏幕而言，圖片并不是越多越好，適當(dāng)?shù)膱D片會給人一種欣喜若狂的感覺，起到畫龍點睛的作用，過多的圖片會讓

12、人覺得眼花繚亂，產(chǎn)生視覺疲勞，過多的圖片還會讓人覺得信息雜亂無章，沒有重點。針對終端界面，應(yīng)該把一些圖片、圖形的數(shù)量減少，隱藏不必要的信息。用戶在瀏覽網(wǎng)頁時不是“閑逛”，而是尋找一些有用的信息，因此，要把關(guān)鍵信息布局在中間從而突出主題，讓用戶能快速找到想要的信息。 一般情況下，字號使用912號字體為宜。字體盡量選用羅馬字體或者宋體這些好識別的字體7。由于字體過小，我們可以利用顏色來突出重點或標(biāo)題，但是不宜過多，同一頁面的色彩不要超出3種8。 3.2可訂制性 手持移動終端本身是一個嵌入式系統(tǒng)，根據(jù)市場的定位和用途的不同就會有不同的方案。有的對圖形功能要求嚴(yán)格，有的對定位功能要求精確。因此GUI必

13、須要模塊化設(shè)計，可訂制是它的基本要求。 3.3以用戶為中心 隨著互聯(lián)網(wǎng)的發(fā)展，以用戶為中心以人為本的方式越來越受到關(guān)注。用戶體驗對于一個網(wǎng)站而言比任何商品都重要，具有良好用戶體驗的網(wǎng)頁才能和客戶建立良好關(guān)系。如果用戶瀏覽一個網(wǎng)頁時停留不到5s，這個網(wǎng)站基本上屬于吸引不了用戶的網(wǎng)站。作為開發(fā)者首先要了解用戶的需要，換位思考一下用戶需要什么，在設(shè)計頁面時要多站在用戶的角度思考問題，以人為本，以用戶為中心，這樣設(shè)計出來的頁面才會讓用戶流連忘返。 4結(jié)語 HTML5被越來越多的廠商接受，它是未來網(wǎng)頁制作的主要技術(shù)之一。它的出現(xiàn)，減少了網(wǎng)頁開發(fā)代碼，提高了工作效率，但是，其還存在著一些缺陷，需要不斷改善。相信HTML5未來會給我們帶來更多的驚喜。 參考文獻(xiàn)參考文獻(xiàn)： 2崔玉梅.HTML5與移動平臺J.電腦編程技巧與維護(hù)，2012（18）：66-67. 3邢曉鵬.HTML5核心技術(shù)研究與價值分析J.價值工程，2011，30（22）：157-158. 4宋昭壽，胡忠旭，漆麗娟. HTML5網(wǎng)頁