陈子舜-Html5 based web app

2,462 views

Published on

陈子舜,腾讯开放平台研发副总监。04年开始学前端,做重构,玩博客。06年入腾讯,做前端,玩空间。11年搞开放,做前端,玩手机。历经的产品不多,搞过PJBlog,QQ空间,接触过农牧场,腾讯开放平台。在7年前端生涯,发现前端技术水很深。从用户体验,性能优化,运营能力,编码效率,作为前端开发,压力越大机会越多,有木有。

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,462
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
91
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

陈子舜-Html5 based web app

  1. 1. 未来 Web App 初探 <ul><li>利用 HTML5 打造 Web APP </li></ul>PuterJam @ tencent 2011
  2. 2. 7 年前 很多人这么称呼我们
  3. 3. <ul><li>页面仔 </li></ul><ul><li>僵尸仔 </li></ul>页面重构 前端开发
  4. 4. <ul><li>毕业梦想 </li></ul><ul><ul><li>成为一个 “ 程序员 ” </li></ul></ul>
  5. 5. Web Application
  6. 6. 早期的 Web APP <ul><li>仅仅是去掉了地址栏的浏览器快捷方式 </li></ul>
  7. 9. <ul><li>HTA 无法跨平台 </li></ul><ul><li>HTA 不适合传播 </li></ul><ul><li>安全性差 </li></ul><ul><li>和桌面结合差 </li></ul><ul><li>不具备可维护性 </li></ul><ul><li>开发效率底 </li></ul><ul><li>...... </li></ul>早期 Web APP 的问题
  8. 10. 理想中的 Web APP <ul><li>云端和桌面的无缝结合 </li></ul><ul><li>极致的 UI 表现 </li></ul><ul><li>跨平台兼容 </li></ul>
  9. 11. 云端和桌面的无缝结合 <ul><li>方便的快捷方式 </li></ul><ul><li>不仅仅是 <input type=&quot;file&quot;/> </li></ul><ul><li>离线应用 </li></ul>
  10. 12. 更方便的快捷方式
  11. 13. 不仅仅是 <input type=&quot;file&quot;/> <ul><li>本地和 Web 之间文件拖拽 </li></ul><ul><li>本地文件流操作 </li></ul><ul><li>更多本地硬件支持 </li></ul><ul><ul><li>麦克风 / 摄像头 </li></ul></ul><ul><ul><li>GPS/AGPS </li></ul></ul><ul><ul><li>方向 / 重力感应器 </li></ul></ul><ul><ul><li>多点触摸 </li></ul></ul>
  12. 17. 是时候提供离线服务了 <ul><li>应用在线安装 </li></ul><ul><ul><li>Application Cache </li></ul></ul><ul><li>用户数据存储 </li></ul><ul><ul><li>Web Storage </li></ul></ul>
  13. 19. <ul><li>7 年前的重构是一门技术 </li></ul><ul><li>现在的重构是一门艺术 </li></ul>
  14. 21. 极致的 UI 表现 <ul><li>更高效的页面布局 </li></ul><ul><li>更少量的图片数量 </li></ul><ul><li>更完美的动画表现 </li></ul>
  15. 22. <ul><li>完美的布局解决方案 </li></ul><ul><ul><li>Css3 Flexible box </li></ul></ul>
  16. 23. <div style=&quot; display: box;box-orient: horizontal; &quot;>    <div id=&quot;left&quot;> ... </div>    <div id=&quot;mid&quot; style=&quot; box-flex: 1 &quot;> ... </div>    <div id=&quot;right&quot;> ... </div> </div> dialog box-pack box-align
  17. 24. 追求 0 图片请求的极致 radius gradient shadow stroke Data URI mask transform appearance reflect
  18. 25. transition
  19. 26. Animation
  20. 27. 从页面仔到动画设计师蜕变
  21. 28. 好处? <ul><li>提升产品口碑 </li></ul><ul><li>提升产品体验 </li></ul><ul><li>提升产品可用性 </li></ul>
  22. 29. 挑战? <ul><li>不断关注和坚持 </li></ul><ul><li>差异化是不可避免的战争 </li></ul><ul><li>HTML5 ~= html + CSS3 + Javascript </li></ul>
  23. 30. 机会? <ul><li>web 是未来 </li></ul>
  24. 31. 我们就是未来!

×