HTML5适合移动应用开发的几大特性

1. 离线缓存 为HTML5开发移动应用提供了基础HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构,可以将数据写入到本机的ROM中,还可以在关闭浏览器后再次打开时恢复数据,以 减少网络流量 。同时,这个功能算得上是另一个方向的后台“操作记录”,而 不占用任何后台资源 ,减轻设备硬件压力,增加运行流畅性。在线app支持边使用边下载离线缓...
移动开发 移动应用 HTML5

产品细节中的情感化设计

原研哉在他的《设计中的设计》中有介绍过这样一个案例:日本机场原来是用一个圆圈和一个方块表示出入的区别,形式简单并且好用,但设计师佐藤雅彦却用一个更“温暖”的方式来重新设计了出入境的印章:入境章是一架向左的飞机,出境章则是个向右的飞机。通过一次次的盖章,将这种“温暖”的情绪传递给每一位进关的旅行者们。在他们的视线与印章相交的那一刻,会将这种温暖转化为小小的惊喜,而不由自主且充满善意的『啊哈』一下。一...
产品设计

微信里经常看到的滑动翻页效果,slide

上个星期我们的产品姐姐让我帮她写个微信里经常看到的滑动翻页效果,今天抽空写了3个小demo(只写了webkit需要chrome模拟手机看 开启touch事件), 故此写个随笔。1、demo1,整个大容器tranlateY(性能应该是最好的,但是如果增删一页的话对css影响很大,如果用sass或less除外)html:!DOCTYPEhtml html head title/title me...
html5 滑动翻 html5

使用HTML5技术控制电脑或手机上的摄像头

移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API,但慢慢的,这些API会出现在桌面电脑上。其中一个应用接口技术就是getUserMedia API,它能让应用开发者访问用户的摄像头或内置相机。下面就让我展示一下如何通过浏览器来访问你的摄像头,并提取截屏图形。HTML代码下面的代码里我写了一部分注释,请阅读:!-- 理想情况下我们应该先判断你的设备...
html5 摄像头 html5技术

Web性能优化之图片优化

HTTP Archieve有个统计,图片内容已经占到了互联网内容总量的62%,也就是说超过一半的流量和时间都用来下载图片。从性能优化的角度看,图片也绝对是优化的热点和重点之一,Google PageSpeed或者Yahoo的14条性能优化规则无不把图片优化作为重要的优化手段,本文覆盖了Web图片优化的方方面面,从基本的图片格式选择、到尚未被广泛支持的响应式图片均有所提及。Google Web Fu...
Web开发 Web性能优化

DIV+CSS规范命名集合

我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法。命名规则说明:1)、所有的命名最好都小写2)、属性的值一定要用双引号()括起来,且一定要有值如class=divcss5,id=divcss53)、每个标签都要有开始和结束,且要有正确的层次,排版有规律工整4)、空元素要有结束的tag或于开始的tag后加上/5)...
规范命名 DIV+CSS

常用的HTML5、CSS3新特性能力检测写法

伴随着今年10月底HTML5标准版的发布,未来使用H5的场景会越来越多,这是令web开发者欢欣鼓舞的事情。然而有一个现实我们不得不看清,那就是IE系列浏览器还占有一大部分市场份额,以IE8、9为主,windows8.1的用户已经用上了IE10/11,而考虑我国的国情,IE6、7依然存留不少。在我们放手用HTML5开发的时候,新特性支持度检测就是必不可少的了。一种方式是用navigator.user...
CSS3新特性 HTML5

13个有用的HTML5、CSS3和jQuery搜索表单教程

添加搜素框或网站搜索功能是为了方便用户能够轻松、快捷地找到自己需要的信息。因此,在网站中添加一个搜索框已经成为网页设计的主流元素之一。添加一个搜索框到网站会使得用户界面更加友好,也能帮助用户轻松愉快地浏览。下面,小编收集了13个有用的CSS3,HTML5和jQuery搜索表单脚本来帮助大家从头开始创建一个搜索框。希望能够帮助到大家,让我们一起来看看吧!脉动的CSS3输入搜索框输入搜索框带有边框和类...
CSS3/jQuery HTML5 搜索表单

在HTML5 Canvas中放入图片和保存为图片的方法

使用JavaScript将图片拷贝进画布要想将图片放入画布里,我们使用canvas元素的drawImage方法:复制代码代码如下://Convertsimagetocanvas;returnsnewcanvaselementfunctionconvertImageToCanvas(image)...使用JavaScript将图片拷贝进画布要想将图片放入画布里,我们使用canvas元素的drawIm...
HTML5 Canvas HTML5

HTML5全局属性和事件

 全局属性和事件能够应用到所有标签元素上,在HTML4中有许多全局属性,比如id,class等。HTML5中又新增了一些特殊功能的全局属性和事件。属性:  HTML5属性能够赋给标签元素含义和语境,下面的全局属性可用于任何 HTML5 元素。属性属性描述contenteditable规定是否允许用户编辑内容。contextmenu规定元素的上下文菜单。draggable规定是否允许用户拖动元素。d...
html5 属性 html5事件