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

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

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

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

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

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

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

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