http://www.cocoachina.com/webapp/20150906/13344.html

WebApp的实现基础就是HMTL5+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的区别)。

第二特性:音频视频自由嵌入,多媒体形式更为灵活

原生开发方式对于文字和音视频混排的多媒体内容处理相对麻烦,需要拆分开文字、图片、音频、视频,解析对应的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调用手机摄像头和手机相册、通讯录等功能

具体的详细案例,有兴趣的小伙伴们可以前往这里查看具体的教程和案例。

推荐阅读:

玩转HTML5移动页面(动效篇)

玩转HTML5移动页面(优化篇)

HTML5八大特性助力移动WebApp开发的更多相关文章

  1. h5预订酒店项目|html5酒店模板|h5酒店webapp开发

    近几天尝试着使用html5+css3+swiper+jqUI+layerMobile等技术开发了一款仿携程.去哪儿.艺龙webapp酒店预订系统,页面图标统一使用iconfont,仿原生app右侧弹窗 ...

  2. 妙用HTML5的八大特性来开发移动webAPP

    webAPP的实现基础就是html5+js+css3.可是webAPP还是基于浏览器的微站点开发.正是如此,我们必需要深入的了解html5的特性,这样才干方便我们在开发和设计APP的时候.更合理的採用 ...

  3. 前端开发攻城师绝对不可忽视的五个HTML5新特性

    HTML5已经火了一段时间了,相信作为web相关开发工程师,肯定或多或少的了解和尝试过一些HTML5的特性和编程.还记得以前我们介绍过的HTML5新标签. 作为未来前端开发技术的潮流和风向标,HTML ...

  4. 【blade利刃出鞘】一起进入移动端webapp开发吧

    前言 在移动浪潮袭来的时候,小钗有幸进入框架组做webapp框架开发,过程中遇到了移动端的各种坑,也产生了各种激情,就我们公司的发展历程来说 第一阶段:使用传统方式开发移动站点,少量引入HTML5元素 ...

  5. HTML5新特性之CSS+HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

  6. jquery mobile自己定义webapp开发实例(一)——前言篇

    用jquery mobile做了一段时间的webapp开发,准备用自己的一个小demo做一个模块化的分享 点击demo演示 手机演示二维码: 此demo已经是比較老的版本号,用户体验流畅度确实还存在非 ...

  7. 跟我一起玩转Sencha Touch 移动 WebApp 开发1

    跟我一起玩转Sencha Touch 移动 WebApp 开发(一) 1.目录 移动框架简介,为什么选择Sencha Touch? 环境搭建 创建项目框架,框架文件简介 创建简单Tabpanel案例 ...

  8. 移动端WEBAPP开发遇到的坑,以及填坑方案!持续更新~~~~

    前言:在移动端WEBAPP开发中会遇到各种各样的问题,通过此文对遇到的问题做一个归纳总结,方便自己日后查询,也给各位前端开发友人做一个参考.   此文中涉及的问题是本人开发中遇到的,解决方案是本人思考 ...

  9. 移动前端webApp开发点滴积累20140524

    #webApp开发几点体会(移动前端) ##前言 本文旨在记录本人涉足移动webApp开发的几点体会,欢迎分享与指正. ##再见,IE678 移动设备,Android跟iPhone是主流,即使是win ...

随机推荐

  1. 如何收缩Mysql的ibdata1文件

    ibdata1是MySQL数据库中一个数据文件了,你会发现它来越大了,下面我来介绍收缩Mysql的ibdata1文件大小方法. 如果你有使用InnoDB来存储你的Mysql表,使用默认设置应该会碰到个 ...

  2. Redis源码解析:17Resis主从复制之主节点的部分重同步流程及其他

    本文主要讲解主节点部分重同步的实现,以及主从复制中的其他功能.本文是Redis主从复制机制的最后一篇文章. 主节点在收到从节点发来的PSYNC命令之前,主节点的部分重同步流程,与完全重同步流程是一样的 ...

  3. 非常好理解的KNN算法示例

    参考链接:https://www.joinquant.com/post/2227?f=study&m=math:一只兔子帮你理解KNN https://www.joinquant.com/po ...

  4. TZ_13_Hystix的熔断器

    1.作用:当服务繁忙时,如果服务出现异常,不是粗暴的直接报错,而是返回一个友好的提示,虽然拒绝了用户的访问,但是会返回一个结果. 熔断器的三种状态: Closed:关闭状态(断路器关闭),所有请求都正 ...

  5. Vim 日常操作

    显示 # 显示行号 :set nu # 插入:i # 保存并退出:wq   查找 # 最普通的查找:/search # 查找非分号开头的行.[正则表达式](php.ini 很多以分号开头的行,懒得看) ...

  6. php学习知识点框架

    图片来源于知乎,感觉挺全面,通过查看可以更好的了解自己的薄弱知识点,大家共勉.

  7. 读书笔记--Head First PMP目录

    1.引言 2.阻止.约束和项目 3.过程框架 4.项目整合管理 5.范围管理 6.时间管理 7.成本管理 8.质量管理 9.人力资源管理 10.沟通管理 11.项目风险管理 12.采购管理 13.职业 ...

  8. JS---元素隐藏的不同方式

    元素隐藏的不同方式 dispaly, visibility, opacity, height&border 为0 <!DOCTYPE html> <html lang=&qu ...

  9. Could not parse mapping document from resource com/hs/model/StudentModel.hbm.xml

    网上出现这个问题的 lei.hbm.xml配置写错的,文件头应该改为如下,并不是这个问题 <?xml version="1.0"?> <!DOCTYPE hibe ...

  10. CentOS 7安装与配置Tomcat8

    1.下载安装包并上传服务器 2.解压 tar -zxvf apache-tomcat-8.5.16.tar.gz -C /opt/java 3.启动 cd /opt/java/apache-tomca ...