HTML5与Web APP浅谈

开发app实例">
  伴随着移动设备的快速崛起,App市场的发展也日渐迅猛,目前iOS和Android平台的App数量总和也达到100万款之多,据AAWP报道,Windows Phone的应用市场数量已突破8万,晋升成为第三大应用平台。移动数据分析公司Flurry在2011年App趋势报告中显示,人们花费在App上的时间已经超过人们浏览网页的时间。


  未来App的市场呈现一片光明景象,而对于移动开发商来说,不同平台的应用则需要开发不同的App来支持,无论在更新及维护上都需要一定的成本。于是更多人想到了基于HTML5的Web App,目前主流操作系统iOS、Android以及Windows Phone的浏览器都对于html5大部分特性的支持也更加突显HTML5在未来移动设备端的地位。那么HTML5有何前景呢,接下来我们一起来讨论 HTML5和Web App:

  谈到Web App,我们就不得不先想到Native App,目前我们在App Store上下载的ipa以及我们在Google play store或其他网站下载的apk都是属于Native App,那么这种App有什么优势和劣势呢?

  Native App的优势:

  1、优秀的用户体验和华丽的交互操作,能够针对不同平台提供不同用户体验;

  2、可不受网络速度限制,节省带宽成本;

  3、可访问本地硬件设备和资源;

  4、盈利模式明朗。

  Native App的劣势:

  1、不同平台之间的移植麻烦;

  2、维持多个版本的成本比较高;

  3、需要通过第三方审核;

  4、盈利需要与第三方分成。

  针对Native App的不足,Web App很好了弥补了这些劣势,开发商只需了解HTML5、CSS3、js以及Device API即可完成应用在多终端设备和平台的运行,很好的保证了应用跨平台的一致性,相对于Native App开发成本更低,同时更新维护更容易,用户几乎没有安装成本,也更加自由和开放。但任何新技术总是有利有弊,Web App其自身也会遇到在用户体验、UI效果及调用本地设备和资源的相关问题。

  虽然2种模式各有优缺,但随着移动设备及html5的迅猛发展,让微软和乔布斯也意识到:只有HTML5才是web未来。从著名移动云平台公司Appcelerator发布的调查报告可以看到HTML5 Mobile Web已经上升为第4位。


  众所周知,HTML5不仅仅给我们带来了更多语义化的标签,还有canvas绘图、音频视频、本地存储、离线应用、地理位置定位等新特性。

  接下来我们从App的角度来看看HTML5带来的这些特性:

  特性一、Canvas绘图

  Canvas在网页中类似于Flash的作用,是HTML5引入的一个新的标签,但其本身并不具备画图的能力,只是为JavaScript提供一个绘制图像的区域,可以使用JavaScript来绘制图形、编辑图象。如Harmony,基于Canvas的一个绘图工具,使用其提供的独特画笔样式,在 iPhone和Andriod手机上可以绘制一些精美的铅笔素描风格。

  可参考:http://www.html5rocks.com/en/tutorials/canvas/integrating/


  很多HTML5站点也利用Canvas实现绘画功能和在线图像编辑功能,如Sketchpad,一个在线画板,拥有类似Windows 画笔的所有功能;CloudCanvas,基于HTML5的免费在线图像编辑软件,可以实现AI和PS的一些矢量与位图的编辑功能。

  特性二、Local Storage(本地存储)

  我们知道很多App下载安装后,都是基于本地离线缓存运行,而无需请求网站。Web Storage很好的解决了之前Cookie的大小不能超过4K的尴尬和不同浏览器针对每个域名下Cookie数的限制。Web Storage可分为local storage和session storage,local storage提供了5MB的存储空间,而sessiong storage甚至没有限制。不仅在启动App的时候可以加载缓存数据来加快启动和显示速度,还可以减少网络流量,离线运行App。

  Google之前用Google Gears这个浏览器插件来解决网页应用的离线使用,如离线使用Gamil,随着浏览器对HTML5新标准的支持,Gears也逐渐被抛弃。目前 Google Reader利用HTML5离线技术,可以让用户离线阅读订阅的最新浏览过的文章。


  特性三、Geolocation(地理定位)

  Geolocation API是W3C新添加的一个API规范,可以用通过浏览器来获取用户的地理位置。对浏览器版本要求相对较高,目前能支持的浏览器有IE9.0+、 FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+。可以通过 geolocation 下的 getCurrentPosition 方法来获取用户的信息

  navigator.geolocation.getCurrentPosition( getPositionSuccess , getPositionError );

  同时还可以综合GoogleMaps API来监控用户的位置让其在地图上显示用户的准确位置。具体的使用大家可以google下,相应的介绍文档较多,在此不再类述。

  目前移动设备上的定位特性更多的体现在社交类型的LBS应用中,如微信,手机QQ、微博、Google Map等。


  特性四、音频视频

  HTML5定义了两个新的标签video和audio,音视频自由的嵌入页面,让多媒体的形式也更为灵活。特别是在iPhone和iPad对flash的不支持,

  HTML5的音视频显得尤为重要。同时HTML5嵌入代码更简洁,如网站上的视频,调用flash需要很长一段代码:


  那么使用HTML5代码只需一行:


  特性五、对CSS3的更好支持

  CSS3虽然不是HTML5的特性,但对于CSS3的新特性如:border-radius、border-image、box-shadow、 transform、transitions、animation、user-interface等在HTML5浏览器上表现最佳。

  用过Path的同学肯定会对里面的交互表现赞叹不已,


  来看看国外victor用纯CSS3实现的同样动画效果吧。http://namepk.sinaapp.com/blog/path/


  除了上面列举的HTML5特性外,还有很多重要的特性如WebGL、SVG、Form、Web SQL Database、Web Worker、Web Socket、Drag&Drop等,在此不再一一描述,

  目前HTML5的规范还在制定和讨论中,在运用Web App开发过程中仍然会遇到对事件的响应速度页面渲染等性能问题、不同机型及web浏览器内核的兼容性问题、对于移动设备硬件资源的访问等众多问题,业界也出现了很多如PhoneGap、Sencha Touch、Jquery Mobile等移动设备开发框架,同时也有以HTML5+Native加壳方式的App如网易博客Android客户端,各种新技术的尝试和主流浏览器及各大智能机操作系统对HTML5特性的支持,HTML5未来在移动终端的发展无疑让大家更加期待。

  作者:Bobe

  文章来源:腾讯GDC

时间: 2016-04-11

HTML5与Web APP浅谈的相关文章

响应式设计(Response Web Design)浅谈

响应式Web设计,这个话题可能是当下Web设计领域里讨论和应用比较多的话题了,为什么要响应式Web设计?什么是响应式Web设计? Web发展迅速,各种应用和服务层出不穷,现在打开电脑,可能使用最多的程序应该是浏览器了,访问不同的网站,可以满足人们购物,社交,获取新闻资讯,娱乐,等等需求.然而近几年内,移动设备快速崛起,移动互联网慢慢进入人们的生活,预计未来5年内移动设备的使用度会超过桌面计算机.所以需要您的网站不仅要在桌面计算机大尺寸屏幕上可以为用户提供友好的UI和用户体验,同时在小尺寸屏幕上也

[转载] jQuery Mobile 开发 Web App 系列文章目录

首先是jquery mobile api 的中文站点:http://www.jqmapi.com/  然后下面是网上找的一个很好的教程系列文章,转载如下 -------------------------------------------------------------------------------------------------------------------------------- "使用 jQuery Mobile 与 HTML5 开发 Web App"系列

Web App设计浅谈

HTML5技术的强势发展,为互联网带来的最大改变就是: web从"已死"的预言中回过头来给Native app一记沉重的回马枪,web app成为举世瞩目的明星开始走在各大公司研发的时刻表中.Google .微软.苹果三大巨头紧锣密鼓地在web app的研发产品领域圈地设岗,并试图建立以自己为中心的"云"服务平台,企图在web app时代到来的时候充当霸主. 本文将围绕web app的设计,与大家讨论几点设计技巧. 什么是web app? Web app是一种通过网

浅谈Python Web的五大框架

说到Web Framework,Ruby的世界Rails一统江湖,而Python则是一个百花齐放的世界,各种micro-framework.framework不可胜数,不完全列表见: http://wiki.python.org/moin/WebFrameworks. 虽然另一大脚本语言PHP也有不少框架,但远没有Python这么夸张,也正是因为Python Web Framework(Python Web开发框架,以下简称Python框架)太多,所以在Python社区总有关于Python框架孰

浅谈web网站架构演变过程

原文:浅谈web网站架构演变过程 前言 我们以javaweb为例,来搭建一个简单的电商系统,看看这个系统可以如何一步步演变.   该系统具备的功能:   用户模块:用户注册和管理 商品模块:商品展示和管理 交易模块:创建交易和管理    阶段一.单机构建网站 网站的初期,我们经常会在单机上跑我们所有的程序和软件.此时我们使用一个容器,如tomcat.jetty.jboos,然后直接使用JSP/servlet技术,或者使用一些开源的框架如maven+spring+struct+hibernate.

柔弱的APP如何自我保护,浅谈APP防御手段,使用360加固助手加固/签名/多渠道打包/应用市场发布

柔弱的APP如何自我保护,浅谈APP防御手段,使用360加固助手加固/签名/多渠道打包/应用市场发布 由于JAVA和Android的平台型,所以APP很容易被反编译,这对于我们开发者来说,是一个不想要的结果,对于用户来说,就是一个噩耗,而安全性,一直是我们关注的焦点,今天,我们来聊聊这个安全性,和一起玩玩Apk加固! 一.我们为什么要提高APP的安全性 手机已经是不会离开身边了,APP更是重中之重的环节,我们衣食住行,基本上大部分都是靠APP来完成的,这样的话,APP的安全就是一个很大的挑战了,

总结Flash建站经验:浅谈flash web的结构

web 引言 记得我刚接触FLASH那会儿,应该是FLASH6末期吧,国内的flash web还是很少的,牛X的更是屈指可数,而且这个时候所谓的牛X,一般都是指效果很酷,技术强的基本没有.其实这是必然,国内早期的flash web开发者大都是由FLASH动画制作者或是网页设计师转变而来.他们非常热衷于片头和过渡效果,为此不惜牺牲浏览者的等待时间并吃掉浏览者的CPU.这就是为什么现在好多人一谈起flash web就觉得它体积大,效率低的根源了.当然如果是真对个人网站,这也无可厚非,个人网站信息量小

web组件的通信---浅谈事件

web web组件的通信---浅谈事件大家目前开发asp.net程序经常会用到usercontrols即pagelet(.ascx文件).有不少人现在把它当做asp里的include来使用.当然这也是很自然的,但一旦考虑到user controls和他所处的容器web form之间或其他user controls之间的通信,事情好像就比较复杂了.比如说,我有这样一个页面                    User Control(Image Button)User Control(Left

Android安全开发之浅谈网页打开APP

Android安全开发之浅谈网页打开APP 作者:伊樵,呆狐,舟海@阿里聚安全 一.网页打开APP简介 Android有一个特性,可以通过点击网页内的某个链接打开APP,或者在其他APP中通过点击某个链接打开另外一个APP(AppLink),一些用户量比较大的APP,已经通过发布其AppLink SDK,开发者需要申请相应的资格,配置相关内容才能使用.这些都是通过用户自定义的URI scheme实现的,不过背后还是Android的Intent机制.Google的官方文档<Android Inte