HTML5富交互与社交传播

2014 iWeb 峰会 FEX 数据可视化方向的核心成员 潘征 借助一个案例，分享了 html5 技术在移动端图形可视化领域的应用，不仅向大家展示了 Web 图形技术的酷炫效果，而且向人们展示了 Web 技术可传播性这个优势和社交网络碰撞后所代来的惊人效果。

Transcript

1. 百度FEX HTML5富交互与 社交传播 潘征
2. 移动互联⺴⽹网发展趋势报告（2014Q2）
3. 通过社交⺴⽹网络进⾏行传播 ❖ 微信朋友圈的“刷屏”现象! ❖ 上线两天,PV70万! ❖ 引起了巨⼤大的反响（QQ群瞬间爆满）! ❖ 之前通过PC端的推⼴广并没有如此好的效果（世界杯专题 为例）
5. 传播物料的制作 制作适合移动端 社交传播的⻚页⾯面 你⽤用⼿手机看什么？
6. 你⽤用iPhone4还是iPhone5？ 不同分辨率下的页⾯面展⽰示 标题 页脚 图表区域 中! 间! 部! 分! 根! 据! 屏! 幕! ⾼高! 度! ⾃自! 适! 应
7. 固定最⼩小⾼高度 地址栏是抢夺⾯面积的⼤大⿇麻烦 同⼀一设备上! 不同打开场景的区别
8. 利⽤用重⼒力感应实现封⾯面效果——移动端特有的体验
9. devicemotion事件 accelerationIncludingGravity
10. 图表部分的实现 SVG＋css3动画＋图⽚片
11. 动画效果性能优化 ❖ 尽可能⽤用css3动画代替js更改margin等属性! ❖ 减少页⾯面dom数量
12. 减少⻚页⾯面DOM数量 原本是这样 现在是这样
13. 更低端的情况？ 当 遇上 css3动画 svg 拖动特效 狂拽酷眩的
14. 卡死啦！
15. 低端⼿手机降级⽅方案 ⽤用图⽚片代替复杂的交互，传达信息
16. 然后就可以——
17. 通过UA判断需要加载哪⼀一套⻚页⾯面 ios设备和安卓4.0以上版本加载⾼高端版 其他移动端加载简略版 PC端加载pdf
18. 移动端是传播的⼤大户 ❖ 微信! ❖ 微博! ❖ 百度移动⾸首页
19. 内容＋效果＋平台＝传播 ❖ 好的内容不⼀一定能引起传播! ❖ 通过新颖的形式勾起传播欲望! ❖ 社交⽹网络是传播的天然平台
28. http://shushuo.baidu.com
29. 半⼩小时＝五千万PV 的神话 “硬的”⼩小游戏平台 end.baidu.com
30. “硬的”游戏
31. 流量⾼高峰的引爆点——疯狂⼿手指 扫⼆二维码开始玩疯狂⼿手指
32. 完全没有进⾏行刻意推⼲⼴广 ❖ 朋友圈的病毒式传播! ❖ ⽆无脑＋可分享＋有⼀一定趣味性
33. ——潘征 “Thank you”