基于HTML5技術(shù)的Web前端設計與開(kāi)發(fā)發(fā)布者：本站     時(shí)間：2020-05-05 12:05:38

隨著(zhù)移動(dòng)終端的快速發(fā)展,移動(dòng)操作系統不斷涌現,從市場(chǎng)份額來(lái)看,目前iOS,Android,WP三大主流移動(dòng)操作系統,但是移動(dòng)前端系統依然面臨著(zhù)用戶(hù)更多更新更高的要求。為了降低開(kāi)發(fā)成本,縮短開(kāi)發(fā)周期,新環(huán)境下的前端設計師和前端開(kāi)發(fā)工程師應在真正理解移動(dòng)Web應用需求的基礎上,努力尋求一種跨平臺的移動(dòng)前端開(kāi)發(fā)解決方案。本文介紹了移動(dòng)Web前端系統的構建流程,并對移動(dòng)前端系統構建中的關(guān)鍵技術(shù)進(jìn)行介紹,把用戶(hù)作為中心,以用戶(hù)為原型進(jìn)行移動(dòng)Web前端系統的開(kāi)發(fā)應用。

一、移動(dòng)Web的發(fā)展現狀

隨著(zhù)移動(dòng)互聯(lián)網(wǎng)的快速發(fā)展,移動(dòng)終端也被廣泛應用,這樣的網(wǎng)絡(luò )現狀有利于推動(dòng)4G發(fā)展,在當前大數據背景下,隨著(zhù)社交、移動(dòng)和位置服務(wù)的深入融合發(fā)展,移動(dòng)互聯(lián)網(wǎng)絡(luò )的發(fā)展更日益迅速。智能移動(dòng)設備被越來(lái)越多的人使用,可以通過(guò)很多方式獲取和推送信息資源的,現代社會(huì )互聯(lián)網(wǎng)用戶(hù)對移動(dòng)前端的要求也越來(lái)越高。HTML5目前是互聯(lián)網(wǎng)核心技術(shù)中應用得較為廣泛的一種,最早產(chǎn)生于20個(gè)世紀90年代初,在移動(dòng)WebApp的開(kāi)發(fā)過(guò)程中,它虧有效地提升用戶(hù)的體驗效果,也可以有效地保障智能手機的兼容性。隨著(zhù)HIML5技術(shù)的飛速發(fā)展,Web開(kāi)發(fā)進(jìn)入一個(gè)質(zhì)的飛躍階段,大不同于先前的Web技術(shù)設計標準,一方面HTML5能表示W(wǎng)eb內容,將Web帶入一個(gè)成熟的應用平臺,用戶(hù)在使用HIML5平臺中,會(huì )使得圖像、音頻、視頻、動(dòng)畫(huà)與移動(dòng)終端的各種交互漸趨標準化,HTML5的強大功能為用戶(hù)提供了全新的使用方法,和更加便捷的應用體驗。

二、HTML5的應用特點(diǎn)

HTML技術(shù)1990年被開(kāi)發(fā)創(chuàng )造,是對傳統Web標準的極大更新,經(jīng)歷了多次更新發(fā)展,其中HTML1主要作用是用于寫(xiě)網(wǎng)頁(yè)框架結構,HTML5就是其在實(shí)踐中不斷發(fā)展更新的最新的規范,有其特有的標簽和語(yǔ)法,使得圖片畫(huà)面形成可以嵌套在程序結構組合,出現在同一頁(yè)面里,實(shí)質(zhì)就是通過(guò)說(shuō)明,按照相關(guān)的指示和語(yǔ)法編出頁(yè)面,最終實(shí)現預設的效果。HTML5應用就是按照這個(gè)新的規范寫(xiě)出的,它兼容了很多以前版本做不到的頁(yè)面內容,將來(lái)肯定是主流。相比較之前的HTML版本,HTML5在全面表現出Web內容的同時(shí),具有以下幾方面的特征:其中之一就是語(yǔ)義結構化標簽,如hgroud、header、footer、section等,有利于使得文檔結構的易讀性和清晰性大大提高。其中之二就是可以支持離線(xiàn)儲存,localStorage可以提供與與cookies相同的對應的功能。通過(guò)IndexedDB模塊對復雜數據進(jìn)行儲存,是利用緩存將文件資料等目標文件下載到本地,這樣用戶(hù)就可在離線(xiàn)的情況下使用移動(dòng)WebApp。其三就是有利于豐富多媒體的功能效果,提升移動(dòng)WebApp的音頻和視頻功能,優(yōu)化它的圖形功能。HTML5的技術(shù)組合包括JavaScript、HTML5和CSS3等模塊,在開(kāi)發(fā)移動(dòng)WebApp的過(guò)程中,通過(guò)轉變常規網(wǎng)頁(yè)技術(shù)構建和它的組織形式,使得戶(hù)帶體驗進(jìn)一步完善提升。

三、以HTML5為基礎開(kāi)發(fā)應用移動(dòng)WebApp的方式

移動(dòng)WebApp能夠實(shí)現對頁(yè)面內容的動(dòng)態(tài)控制更新,其中對系統bug的修復功能效果顯著(zhù),在修改服務(wù)器之后可以直接被用戶(hù)使用新頁(yè)面,它在使用中也會(huì )根據市場(chǎng)的變化情況和用戶(hù)實(shí)際需求不斷進(jìn)行更新,這就要求我們軟件工程師在設計移動(dòng)WebApp技術(shù)的架構時(shí)應盡可能保障其的合理性與科學(xué)性,使得更新影響和維修總成本盡可能降低。移動(dòng)WebApp的前端數據層在后端與UI界面中,可以為用戶(hù)操作優(yōu)化為HTTP請求,實(shí)現對數據的及時(shí)緩存,在模塊更新中減少對系統的影響,筆者認為,對于安卓版本平臺的使用,一方面可以拓寬WebView組件,在HTML5技術(shù)中通過(guò)插件形式的拓展功能和直接在平臺上拓展功能對其進(jìn)行了對應的拓展。二是拓寬系統Webkit,WebCore排版和JavaScript Core是Webkit的兩種搜索引擎,通過(guò)頁(yè)面優(yōu)化來(lái)對HTML5的應用技術(shù)進(jìn)行突破,根君傳統技術(shù),用戶(hù)每點(diǎn)擊一次鏈接就需要刷新一次才能完成,這就要求HTML5改變頁(yè)面元素,提出OPOA解決方案,最終實(shí)現JavaScript腳本順利被執行。在移動(dòng)Web在發(fā)展中一方面可以更好地滿(mǎn)足人們對于“云端”技術(shù)的需求,另一方面可以通過(guò)手機直接獲取如游戲、社交等諸多方面的服務(wù)。不過(guò),實(shí)踐發(fā)展中,它也會(huì )受到多種內外部因素的影響,例如HTML5技術(shù)仍未真正成熟,完全取代傳統技術(shù)的困難仍然較大,在發(fā)展中還需要完善的HTML5的相關(guān)標準,應進(jìn)一步優(yōu)化用戶(hù)獲得的體驗四。