HTML5移动应用开发

1.离线缓存为HTML5开发移动应用提供了基础

HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构,可以将数据写入到本机的ROM中,还可以在关闭浏览器后再次打开时恢复数据,以减少网络流量。

同时,这个功能算得上是另一个方向的后台“操作记录”,而不占用任何后台资源,减轻设备硬件压力,增加运行流畅性。

在线app支持边使用边下载离线缓存,或者不下载离线缓存;而离线app必须是下载完离线缓存才能使用。

形象点说,cookie就是存了电话和菜单,想吃什么要叫外卖,等多长时间才能吃到就得看交通情况了;离线缓存就是直接在冰箱里存了食物,想吃就能马上吃到(当然,想吃最新的食物同样可以打电话预定)。

设计师要知道,什么时候让用户下载离线缓存(注意在线和离线app的区别)。

2.专为移动平台定制的表单元素

浏览器中出现的html5表单元素与对应的键盘:

类型 用途 键盘

Text 正常输入内容 标准键盘

Tel 电话号码 数字键盘

Email 电子邮件地址文本框 带有@和.的键盘

url 网页的URL 带有.com和.的键盘

Search 用于搜索引擎,比如在站点顶部显示的搜索框 标准键盘

range 特定值范围内的数值选择器,典型的显示方式是滑动条 滑动条或转盘

只需要简单的声明 <input type=”email”> 即可完成对不同样式键盘的调用,简捷方便。

设计师要知道,用的时候记得告诉研发同事一声!

3.丰富的交互方式支持

提升互动能力:拖拽、撤销历史操作、文本选择等

Transition – 组件的移动效果

Transform – 组件的变形效果

Animation – 将移动和变形加入动画支持

设计师要知道,HTML5提供的交互方式是非常丰富的,至于用不用得上,那是你自己的事儿喽!

4.HTML5使用上的优势

更低的开发及维护成本;

使页面变得更小,减少了用户不必要的支出;而且,性能更好使耗电量更低;

方便升级,打开即可使用最新版本,免去重新下载升级包的麻烦,使用过程中就直接更新了离线缓存。

设计师要知道,用户想要什么,HTML5能提供给用户什么。

5.CSS3 视觉设计师的辅助利器

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

Selector – 更有弹性的选择器

Webfonts – 嵌入式字体

Layout – 多样化的排版选择

Stlying radius gradient shadow – 圆角、渐变、阴影

Border background – 边框的背景支持

使用CSS3来完成部分视觉工作,载入速度快,节省代码及图片,也为用户节约了带宽。

设计师要知道,一个界面里几十张素材图的方式已经太out啦,赶快让CSS3帮你偷懒。

原文发布于微信公众号 - php(phpdaily)

原文发表时间:2014-12-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏BestSDK

【教程】UX中最常用的6个功能性动效,看完自己也成大神了

功能性的动效是指一种微妙且具有清晰合理目的的动画效果。它能减少认知负荷,防止对(界面)变化的忽视、还能帮助用户在界面的空间关系之中建立惯性回忆。更重要的是,动效...

3515
来自专栏phodal

一次超帅的代码生成设计

需求 昨天,我看到这个Badge的时候,我就在想我也会创建一个自己的Badge。 ? 然后,我就可以这样到处粘贴: ? 看样子,我做的效果还是没有上面的好看...

3059
来自专栏携程技术中心

Qnext大会 | React Web——浏览器端复用React Native代码解决方案

原创专栏|杨乾军 ? 自2008年开始接触前端,至今已有8年的前端开发经验,是一名资深前端攻城狮。目前在去哪儿平台事业部前端架构组。 1 背景 ? 一直以来...

3566
来自专栏代码GG之家

android 游戏移植 (一) (文末有福利) | SDL 西游释厄传调试

游戏效果(不是真实画质) 有没有被惊艳到?你的内心肯定会说,我靠,画质这么渣,画面却如此熟悉。对的,就是如此渣渣的画面,却伴随了我们的童年快乐。 下面我们就详细...

2756
来自专栏IMWeb前端团队

深入浅出React(一):React的设计哲学 - 简单之美

本文作者:IMWeb 刘起 原文出处:IMWeb社区 未经同意,禁止转载 编者按:自2013年Facebook发布以来,React吸引了越来越多的开发...

2165
来自专栏晓麦微信小程序

微信小程序textarea 上下移动文本框文字不动的解决方法

搬砖的时候弄了别人写好的页面过来,然后在小程序开发工具上啥事都没有,到了手机上打开就发现文本框都移上去了,文字怎么还留在原地,而且还能编辑,最大的问题是这还是客...

2339
来自专栏葡萄城控件技术团队

Angular vs React 最全面深入对比

如今,Angular和React这两个JavaScript框架可谓红的发紫,同时针对这两个框架的选择变成了当下最容易被问及或者被架构设计者考虑的问题,本文或许无...

2127
来自专栏MixLab科技+设计实验室

如何制作《超简单的AI自测题》

最近更新了一波轻交互的公众号文章: 第一期 超简单的AI自测题 第二期 喵星人密信 第三期 vim答题卡 第四期 猜拳 今天开始陆续更新一些教程《通过svg标签...

3538
来自专栏技术/开源

TypeScript 优秀开源项目大合集

TypeScript出来有段时间了,也冒出了很多用TypeScript开发的优秀开源项目,搜寻了一些基于TypeScript项目,分享给大家:https://g...

5809
来自专栏向治洪

android多屏幕分辨率适配

做android开发,开源嘛,满市场都是凌乱的机型,总少不了适配这样或那样的型号。在这里分享一下自己在开发中用到的方法。 首先要介绍一下drawable-md...

27010

扫码关注云+社区

领取腾讯云代金券