HTML5周刊第11期

tag: 游戏营销

HTML5轻游戏营销的商家客户画像

其实从微博起,到微信朋友圈,轻游戏化营销并非是新鲜的事情。比如像可口可乐的集勋章活动,打车或电商类App的红包发放,开宝箱,甚至包括谷歌也会将自己的Logo突然改成吃豆小游戏在当天狂赚眼球。这些都是广义上来讲的游戏化营销手段。所谓游戏化营销也就是利用游戏思维和游戏机制来解决我们商家客户的营销问题或者锁定消费者的过程。

tag: 表单

表单设计的思考

我们几乎每天都会接触形形色色的表单,登录账号、填写信息以获取服务、发布内容等。然而填写表单的过程往往不是特别愉悦的,我们需要消耗时间输入信息,点击提交,可能还需要等待审核;尤其是碰到较为复杂、流程长的表单,如果用户体验较差,很容易让人产生挫败感,在中途选择放弃。

那么,如何提高用户填写表单的效率,防止他们出错或中途流失,提升愉悦度及转化率呢?

利用 HTML5 美化表单

上文总结了一些表单设计的经验,本文则分享了开发上的技巧。HTML5 引入的一些重大改进却同时方便了创建表单的开发人员和填写表单的用户。全新的表单元素、属性、输入类型、基于浏览器的验证、CSS3 样式技术以及 FormData 对象让创建表单变得更轻松,甚至可能更富有趣味性。

tag: 动画

High Performance Animations

现代浏览器在完成以下四种属性的动画时,消耗成本较低: position(位置), scale(比例缩放), rotation(旋转) 和 opacity(透明度)。如果你对其他的属性设置动画,你就需要对你的冒险负责。而且你的动画将可能达不到流畅的60fps

目前,transforms属性是用来制作动画最好的属性,因为GPU可以为繁重的计算工作提供协助。

基于CSS3的WEBAPP横向滑动模式演化

看完上文标题,是否立马觉得技能点+1? 那么问题来了,如果做一个 WEBAPP 横向滑动组件呢?

本文作者展示并阐述四种横向滑动模式的架构布局及CSS设计方案,供大家参考。

tag: 移动开发

移动开发规范概述

以下规范建议,均是Alloyteam在日常开发过程中总结提炼出的经验,规范具备较好的项目实践,强烈推荐使用

这里提供了许多学习方向的关键词,那么咱们先挑其中两点分享

  • 尽可能使用事件代理,避免批量绑定事件

关于编写性能高效的javascript事件的技术

如果平时习惯了把大量事件绑定到具体元素上的同学,那么仔细读几遍这篇文章,一定让你的技能点 +1 的

  • 所有图片必须有进行过压缩

实战响应式图片

图片已经占了 Web 内容的 62%,而且我们每天都在制造更多。如果所有图片内容都能被好好加以利用那的确很赞。但是对小屏或低分辨率屏来说,其中大部分数据都被浪费了。

tag: github 精选

URL Hammer

非常方便用来 解析 和 编辑 链接,如下示例

input:

    http://jser.me:80?from=jser&to=me#hello=world&test=1

output:

    fullpath: http://jser.me:80

    Querys
    from: jser
    to: me

    Fragment
    hello: world
    test: 1

autoprefixer

Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里,使用Can I Use的数据来决定哪些前缀是需要的。

那么我们只需要按照标准来写样式,最后处理一下css文件就会自动补全浏览器前缀了,是不是很萌呀 ^ _________ ^