久久久久在线观看_又色又爽又黄的免费视频播放_一区中文字幕_日韩电影在线播放

今日頭條 焦點資訊 營銷之道 企業報道 淘寶運營 網站建設 軟件開發 400電話
  當前位置: 首頁 » 資訊 » 焦點資訊 » 正文

妙用html5的八大特性來開發移動webAPP

放大字體  縮小字體 發布日期:2017-04-22  瀏覽次數:349  【去百度看看】
核心提示:webAPP的實現基礎就是html5+js+css3.但是webAPP還是基于瀏覽器的微網站開發。 正式如此,我們必須要深入的了解html5的8大特性,這
  webAPP的實現基礎就是html5+js+css3.但是webAPP還是基于瀏覽器的微網站開發。

       正式如此,我們必須要深入的了解html5的8大特性,這樣才能方便我們在開發和設計APP的時候,更合理的采用原生APP與webAPP的相結合。

       而APP里面最重要的一個分享功能,分享出去的必須是網頁形式的。所以,Html5必須學會。


       為什么說HTML5適合進行移動webAPP開發?

 

       第一特性:離線緩存


       HTML5 Web Storage API可以看做是加強版的cookie,不受數據大小限制,有更好的彈性以及架構,可以將數據寫入到本機的ROM中,還可以在關閉瀏覽器后再次打開時恢復數據,以減少網絡流量。

       Web Storage是HTML5引入的一個非常重要的功能,可以在客戶端本地存儲數據,類似HTML4的cookie,但可實現功能要比cookie強大的多,cookie大小被限制在4KB,Web Storage官方建議為每個網站5MB。

       Web Storage又分為兩種:sessionStorage和localStorage

       從字面意思就可以很清楚的看出來,sessionStorage將數據保存在session中,瀏覽器關閉也就沒了;而localStorage則一直將數據保存在客戶端本地;

       不管是sessionStorage,還是localStorage,可使用的API都相同,常用的有如下幾個(以localStorage為例):

1、保存數據:localStorage.setItem(key,value);

2、讀取數據:localStorage.getItem(key);

3、刪除單個數據:localStorage.removeItem(key);

4、刪除所有數據:localStorage.clear();

5、得到某個索引的key:localStorage.key(index);

       移動APP設計師要知道,什么時候讓用戶下載離線緩存(注意在線和離線app的區別)。

       具體詳細關于webAPP本地存儲的案例教程地址:

       http://blog.csdn.net/hbcui1984/article/details/8466743



       第二特性:音頻視頻自由嵌入,多媒體形式更為靈活 

       原生開發方式對于文字和音視頻混排的多媒體內容處理相對麻煩,需要拆分開文字、圖片、音頻、視頻,解析對應的URL并分別用不同的方式處理。

       HTML5在這個方面完全不受限制,可以完全放在一起進行處理。

       移動APP設計師要知道,如果新聞類、微博類、社交類應用的信息呈現中實現文字與多媒體混排,而不用專門嵌入webview,將是一件多美好的事情,至少現在原生方式實現起來還有困難。

 

       第三特性:地理定位

       地理位置定位,讓定位和導航不再專屬導航軟件,地圖也不用下載非常大的地圖包,可以通過緩存來解決,到哪兒下哪兒,更靈活。

       移動APP設計師要知道,現在嵌入LBS功能的應用越來越多,這也是移動設備與臺式PC相比最大的優勢之一,HTML5能把這個優勢再度擴大化,好好想想怎么在你設計的應用里用上吧!


       第四特性:Canvas繪圖,提升移動平臺的繪圖能力 

       使用Canvas API可以簡單繪制熱點圖收集用戶體驗資料,支持圖片的移動、旋轉、縮放等常規編輯。而且也支持2D和3D。

 

       第五特性:豐富的交互方式

       提升互動能力:拖拽、撤銷歷史操作、文本選擇等。比如

Transition – 組件的移動效果

Transform – 組件的變形效果

Animation – 將移動和變形加入動畫支持

       加上js的動畫效果等等,HTML5提供的交互方式是非常豐富的。各位移動APP設計師盡可能的發揮想象吧!

 

       第六特性:開發及維護成本低,這個相對于原生APP開發來說

       更低的開發及維護成本; 使頁面變得更小,減少了用戶不必要的支出;而且,性能更好使耗電量更低; 方便升級,打開即可使用最新版本,免去重新下載升級包的麻煩,使用過程中就直接更新了離線緩存。

       第七特性:CSS3 視覺設計師的輔助利器的支持。

CSS3支持了字體的嵌入、版面的排版,以及最令人印象深刻的動畫功能。

Selector – 更有彈性的選擇器

Webfonts – 嵌入式字體

Layout – 多樣化的排版選擇

Stlying radius gradient shadow – 圓角、漸變、陰影

Border background – 邊框的背景支持

       使用CSS3來完成部分視覺工作,載入速度快,節省代碼及圖片,也為用戶節約了帶寬。

       這些效果用HTML5實現起來是非常方便的,而如用原生開發,估計讓那些客戶端開發人員為難啦。

 

       第八特性:html5調用手機攝像頭和手機相冊、通訊錄等功能

       具體的詳細案例,有興趣的小伙伴們可以前往這里查看具體的教程和案例。

       http://www.gbtags.com/gb/share/93.htm

 
 
[ 資訊搜索 ]  [ 加入收藏 ]  [ 告訴好友 ]  [ 打印本文 ]  [ 違規舉報 ]  [ 關閉窗口 ]

 
0條 [查看全部]  相關評論

 
網站首頁 | 關于我們 | 聯系方式 | 使用協議 | 版權隱私 | 網站地圖 | 排名推廣 | 廣告服務 | 積分換禮 | 網站留言 | RSS訂閱 | 吉ICP備11001726號-6
企業800網 · 提供技術支持