Html5@taobao
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Html5@taobao

on

  • 12,406 views

html5@taobao from Qcon

html5@taobao from Qcon

Statistics

Views

Total Views
12,406
Views on SlideShare
4,281
Embed Views
8,125

Actions

Likes
24
Downloads
304
Comments
0

31 Embeds 8,125

http://ued.taobao.com 7040
http://lijing00333.wordpress.com 534
http://www.zhuaxia.com 142
http://xianguo.com 100
http://static.slideshare.net 67
http://jayli.github.com 66
http://zhuaxia.com 39
http://beibeiya.wordpress.com 33
http://reader.youdao.com 29
http://jayli.github.io 15
http://cache.baidu.com 15
http://dtop.powereasy.net 9
http://old.xianguo.com 4
http://artdesigner.org 4
http://mailreader.163.com 4
http://localhost 3
http://www.jquery999.com 3
http://www.sudasuda.com 3
http://digg.com 2
url_unknown 2
http://www.itfeed.cn 1
http://www.hbued.com 1
http://cloud.feedly.com 1
http://hbued.com 1
http://www.verious.com 1
http://webcache.googleusercontent.com 1
http://translate.googleusercontent.com 1
http://10.52.63.121 1
http://www.slideshare.net 1
http://www.ma.utexas.edu 1
http://pmomale-ld1 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html5@taobao Presentation Transcript

  • 1. Html 5@taobao 2011-04-10
  • 2. 拔赤 - 前端开发工程师2008.4 - 2009.9 Yahoo!2009.9 - present Taobao http://jayli.github.com
  • 3. HTML 5:
  • 4. HTML 5• 语义化(Semantic)• 本地存储(Offline & Storage)• 设备通用(Device Access)• Web Socket支持(Connectivity)• 多媒体(Multimedia)• 三维、图形和特效(3D/Graphics/Effects)• CSS3• …
  • 5. http://www.planabc.net/demo/html5/ppt.html#slide1 (圆心)
  • 6. HTML 5
  • 7. http://m.taobao.com
  • 8. HTML 5的兼容性问题
  • 9. HTML 5的功能用HTML 4同样能实现?!
  • 10. HTML 5和HTML 4部分功能实现差异 功能 Html 5 Html 4 文档语义化 语义化标签 class/id 语义的命名 视频 video标签 用flash实现 长连接 Web socket 轮询/flash socket增强的form表单 标签支持 通过js模拟实现 本地存储 Api支持 通过cookies或flash 美观的界面 Css3 图片+冗余标签
  • 11. 功能的降级兼容 HTML 4 HTML 5JavaScript Flash CSS 2 HTML 4JavaScript Flash CSS 2
  • 12. 淘宝对HTML5的实践 • 深入挖掘浏览器权限 • 文档语义增强 • 选择性兼容低级浏览器
  • 13. 淘宝“云客服” ——深入挖掘浏览器权限
  • 14. 淘宝“云客服”:类似 web 旺旺的IM客户端(不兼容IE)
  • 15. 传统的 iframe 跨域
  • 16. HTML 5 的 Cross Document Messaging 跨域
  • 17. 淘宝2011首页 ——HTML5 的语义增强
  • 18. http://www.taobao.com
  • 19. 使用HTML5标签来布局淘宝首页
  • 20. 让ie6/7/8 支持 HTML5 标签<html><head><style> figure { color:orange; }</style><script>document.createElement("figure");</script></head><body><figure> 淘宝网!</figure></body></html>
  • 21. 淘宝网 ie6/7/8 禁用脚本访问量占 0.1%+ 如果ie6/7/8禁用脚本?
  • 22. <!--[if lte IE 8]> <noscript><style>.html5-wrappers {display:none !important;}</style><div class="ie-noscript-warning"> 您的浏览器禁用了脚本,请<a href="">查看这里</a> 来启用脚本!或者<a href="/?noscript=1">继续访问</a>.</div></noscript> <![endif]-->
  • 23. 如果禁用了 ie 脚本
  • 24. IE 禁用脚本访问/?noscript=1Firefox 禁用脚本Opera 禁用脚本
  • 25. IE 6/7/8 禁用脚本用户的选择 • 跟随向导启用脚本 • 进入 html4 标签页面
  • 26. Kissy 库的开发 ——选择性兼容低级浏览器
  • 27. Kissy Editor 在高级浏览器中的拖拽文件上传
  • 28. editor.js 中对拖拽文件的处理
  • 29. Chrome中使用 transition完成动画 IE中使用JavaScript 完成动画http://docs.kissyui.com/kissy/src/anim/demo.html
  • 30. anim.js 对transition特性的嗅探 并做降级兼容处理
  • 31. Kissy Editor优先使用html5本地存储 降级使用flash完成本地存储
  • 32. editor.js 中本地存储的处理
  • 33. TODO• 继续挖掘浏览器权限• 更大范围的语义增强• 降级兼容老旧浏览器• More & more…
  • 34. TODO: “云客服” 使用webSocket 代替 Ajax 轮询
  • 35. TODO:新的改版/重构项目会基于HTML 5语义的标签
  • 36. Similar HTML 5 APIs JavaScript Adapter HMTL 5 native APIs HTML 4 + JavaScript + Flash…TODO: 通过JavaScript对 HTML 5 进行封装
  • 37. <script src=“html5-adapter.js”></script><section> <label for="header_search_q“>Search</label> <input type="search" autofocus value="tmp"> </label></section 浏览器嗅探并模拟 html5 控件
  • 38. HTML 5 form 模拟出的“HTML 5” form
  • 39. http://www.flickr.com/photos/pandacat_baby/5436938941/• User Experience• Efficiency• Performance
  • 40. ProgressiveEnhancement
  • 41. ref• http://ued.taobao.com/blog/2011/01/11/ dev-share-for-taobao-new-homepage/• http://www.planabc.net/demo/html5/ppt. html#slide1• http://docs.kissyui.com/• http://dev.w3.org/html5/webstorage/• http://www.w3.org/TR/css3-transitions/
  • 42. http://www.flickr.com/photos/zhuoqun/5272961407/in/contacts/ 鸣谢! 承玉 http://yiminghe.javaeye.com 圆心 http://www.planabc.net 澄净 http://blog.zhaojing.me 完颜 http://www.SMbey0nd.com
  • 43. http://www.flickr.com/photos/zhuoqun/5272961407/in/contacts/ Q&A bachi@taobao.com http://jayli.github.com http://ued.taobao.com