移動web技術應用的發(fā)展趨勢

移動web技術應用的發(fā)展趨勢

隨著3g網(wǎng)絡的普及，移動互聯(lián)網(wǎng)的發(fā)展速度遠遠超過了我們的預期。在移動互聯(lián)網(wǎng)領域,Android、iOS等新技術成為最熱點的話題。與此同時,跨平臺的HTML5已經(jīng)開始威脅Flash在Web上的統(tǒng)治地位。隨著HTML5和CSS3逐漸興起,基于HTML5的應用在未來更有可能對移動互聯(lián)網(wǎng)領域起到巨大的影響。1移動web技術的應用3G網(wǎng)絡的正式商用使得國內(nèi)的移動互聯(lián)網(wǎng)業(yè)務逐漸發(fā)展起來。Android和iPhone等智能手機的出現(xiàn),更讓移動互聯(lián)網(wǎng)領域得到充分的發(fā)揮。未來,移動互聯(lián)網(wǎng)業(yè)務將會朝著多元化的方向發(fā)展。強大的功能、開放的平臺、友好的用戶界面和更好的用戶體驗將使得移動Web技術應用在以下幾個方面:(1)移動廣告:通過移動設備(手機、PSP、平板電腦等)訪問移動應用或移動網(wǎng)頁時顯示的廣告,廣告形式包括:圖片、文字、插播廣告、HTML5、重力感應廣告等。(2)移動搜索:移動設備為終端,進行對普遍互聯(lián)網(wǎng)的搜索,從而實現(xiàn)高速、準確的獲取信息資源。主要實現(xiàn)方式有兩種,一種是使用WAP接入搜索WAP/WEB,一種是3G直接搜索WEB內(nèi)容。(3)移動購物:用戶通過移動設備(如手機)接入無線互聯(lián)網(wǎng)購買商品或服務的業(yè)務。(4)移動社交網(wǎng)絡:用戶通過各種移動智能終端(手機、PSP、平板電腦等)接入移動網(wǎng)絡實現(xiàn)諸如QQ、Faceback、微博等傳統(tǒng)社交網(wǎng)站或應用。(5)多媒體:用戶通過移動設備接入無線網(wǎng)絡享受音樂、電影、動畫等多種服務。(6)移動游戲:在移動設備上為用戶提供基于移動互聯(lián)網(wǎng)的網(wǎng)游服務。2支持web應用移動Web應用以借助移動智能設備的無線網(wǎng)絡接入使用網(wǎng)絡應用服務提供商提供的服務。移動智能設備除具有強大的硬件特性外,更擁有龐大的軟件應用數(shù)量。針對移動Web應用的開發(fā),除基于SDK開發(fā)方式外,還支持Web開發(fā)方式,例如iPhone上的AppStore就是典型的WebApp應用軟件。尤其是HTML5和Webkit的不斷發(fā)展,讓移動Web應用更加強大。2.1tml標準版本HTML5是用于取代1999年所制定的HTML4.01和XHTML1.0標準的HTML標準版本,雖然處于發(fā)展階段,但大部分瀏覽器已經(jīng)支持某些HTML5技術。HTML5強化了Web網(wǎng)頁的表現(xiàn)性能,且追加了本地數(shù)據(jù)庫等Web應用的功能。作為下一代Web技術標準,HTML5標準定義的規(guī)范非常廣泛,目前,已經(jīng)在移動瀏覽器中得到支持。2.2webtorin-it移動智能終端內(nèi)置的移動Web瀏覽器,不同于WAP瀏覽器,不僅可以識別和解釋HTML、CSS、JavaScript等代碼,而且都是基于Webkit核心的。Webkit實際上是一種瀏覽器引擎,同時也是一個開源的項目,起源于KDE,在桌面瀏覽器、Chrome谷歌瀏覽器、Safari瀏覽器都已經(jīng)內(nèi)置了Webkit引擎。并支持HTML5和CSS3特性。在移動端方面,Android平臺手機、iOS平臺的iPhone、BlackBerry手機更是直接將Webkit瀏覽器內(nèi)置到平臺當中。MobileSafari和AndroidBrowser作為兩大平臺內(nèi)置的移動Web瀏覽器,更是繼承了各自桌面端瀏覽器的特點,為用戶提供了更出色的移動Web用戶體驗。3基于html5的移動web頁面開發(fā)3.1web應用程序界面布局特點由于移動智能設備與PC或notebook在硬件配置方面的差異,使得移動Web瀏覽器功能相對有限。屏幕分辨率不高造成無法將普通網(wǎng)頁全屏顯示在移動智能設備上,就算通過屏幕放大縮小來訪問傳統(tǒng)的頁面,但在實際應用中得不到最佳的用戶體驗。HTML5標準為移動Web應用程序提供了優(yōu)秀的頁面體驗,而且AndroidBrowser及iOS對Webkit的良好支持,同時使用CSS3等功能實現(xiàn)原生應用程序的UI界面。通過對Web應用頁面和Facebook在iPhone上UI界面布局方式分析,得出三種基于HTML5語義的常用界面布局,如圖1所示。其中,header、article、footer和nav是HTML5的新語義元素。它們的定義如下:<header>元素定義文檔的頁面組合,通常是一些引導和導航信息,同時可以包含列表、搜索框或主題相關的logo。<article>元素在HTML5規(guī)范中,表示文檔、頁面,用來顯示一塊獨立的文章內(nèi)容,如一則網(wǎng)站新聞、一篇博客文章等。此標簽可以相互嵌套。<footer>元素定義文檔或章節(jié)的末尾部分,通常包含一些章節(jié)的基本信息,如作者信息、相關鏈接及版權信息。<nav>元素定義為用來構建導航,顯示導航鏈接。Nav標簽的主要作用是放入一些當前頁面的主要導航鏈接。3.2正常顯示設備由于PC與移動設備屏幕分辨率的差異,使得傳統(tǒng)網(wǎng)站不能正常顯示于移動設備上。在HTML頁面利用viewport及MediaQueries樣式模塊,可以實現(xiàn)根據(jù)移動設備的屏幕大小,定制網(wǎng)站頁面的跨平臺布局效果。(1)系統(tǒng)黨員個人的認同加工Viewport是Apple為了解決移動版Safari的屏幕分辨率大小問題,專門定義的一個虛擬窗口。主要作用是允許開發(fā)者創(chuàng)建一個虛擬的窗口,并自定義其窗口的大小或縮放功能。不同瀏覽器對viewport窗口的默認大小支持是不同的,具體見表1。在HTML頁面代碼的meta元素中定義的viewport虛擬窗口,主要作用是設置Web頁面適應移動設備的屏幕大小。實現(xiàn)代碼如下:上述代碼的主要作用是自定義虛擬窗口,并指定虛擬窗口寬度為移動設備屏幕寬度,初始縮放比例大小為1倍,同時不允許用戶使用手動縮放功能。代碼中的content屬性可以定義6種參數(shù),分別如下:Width指定虛擬窗口的屏幕寬度大小height指定虛擬窗口的屏幕高度大小initial-scale指定初始縮放比例maximum-scale指定允許用戶縮放的最大比例minimum-scale指定允許用戶縮放的最小比例user-scalable指定是否允許用戶手動縮放(2)平臺使用媒體類型的樣式模塊MediaQueries樣式模塊是實現(xiàn)傳統(tǒng)網(wǎng)頁布局向移動版本網(wǎng)頁布局轉(zhuǎn)換。其在桌面端已得到包括IE9、Firework瀏覽器等大部分現(xiàn)代瀏覽器的支持。在移動平臺來說,基于兩大平臺的Android和iOS的web瀏覽器也都有良好的支持。要使用MediaQueries樣式模塊,需要在HTML頁面的head標簽內(nèi)導入一個CSS樣式表文件。在導入的CSS樣式表文件中需要定義media類型的樣式。MediaQueries的語法規(guī)則如下:使用MediaQueries樣式模塊時必須以”@media”方式開頭。主要參數(shù)功能定義如下:media_query定義查詢關鍵字,可以使用not關鍵字和only關鍵字。not關鍵字表示對后面的樣式表達式執(zhí)行取反操作。only關鍵字作用是讓不支持MediaQueries的設備但能讀取MediaType類型的瀏覽器忽略該樣式。media_type指定設備類型,通常為媒體類型。media_feature定義CSS中的設備特性,大部分移動設備特性都允許接受min/max的前綴。4系統(tǒng)頁面布局本例以具體頁面設計為例,如圖2所示,利用上述技術對頁面布局進行基于viewport和MediaQueries樣式模塊的重構設計,以適應移動Web瀏覽器的屏幕大小。4.1eb頁面測試環(huán)境DreamweaverCS5用于HTML代碼和CSS樣式表文件編輯環(huán)境。OperaMobileEmulator用于移動Web頁面測試環(huán)境。OperaMobileEmulator軟件設置模擬SumSungGalaxyS手機瀏覽器環(huán)境,屏幕分辨率為400pxX800px。在DreamweaverCS5軟件代碼編輯視圖對示例頁面的HTML代碼和頁面樣式表代碼進行重構設計,在頁面meta和head標簽中添加viewport和MediaQueries樣式模塊實現(xiàn)web頁面的移動版應用設計。4.2中文字體代碼(1)重建頁面結構，創(chuàng)建標準移動web頁面在頁面<bdoy>標簽內(nèi)添加基于HTML5的移動web頁面語義元素,(2)添加視圖和屏幕引擎模塊(3)提取對象的浚用<div>標簽對頁面對象進行格式化,并定義單個對象的class,以便在獨立的CSS樣式表文件style.css中引用并設置樣式。具體代碼可以通過Drea