淘宝的HTML5实践


Html 5@taobao 2011-05-28 拔赤 - 前端开发工程师 2008.4 - 2009.9 Yahoo! 2009.9 - present Taobao http://jayli.github.com HTML 5: • 语义化(Semantic) • 本地存储(Offline & Storage) • 设备通用(Device Access) • Web Socket支持(Connectivity) • 多媒体(Multimedia) • 三维、图形和特效(3D/Graphics/Effects) • CSS3 •… HTML 5 http://www.planabc.net/demo/html5/ppt.html#slide1 (圆心) HTML 5 http://m.taobao.com HTML 5的兼容性问题 HTML 5的功能用HTML 4同样能实现?! 功能 Html 5 Html 4 文档语义化 语义化标签 class/id 语义的命名 视频 video标签 用flash实现 长连接 Web socket 轮询/flash socket 增强的form表单标签支持 通过js模拟实现 本地存储 Api支持 通过cookies或flash 美观的界面 Css3 图片+冗余标签 HTML 5和HTML 4部分功能实现差异 HTML 4 JavaScript Flash CSS 2 HTML 4 JavaScript Flash CSS 2 HTML 5 功能的降级兼容 • 深入挖掘浏览器权限 • 文档语义增强 • 选择性兼容低级浏览器 淘宝对HTML5的实践 淘宝“云客服” ——深入挖掘浏览器权限 淘宝“云客服”:类似 web 旺旺的IM客户端(不兼容IE) 传统的 iframe 跨域 HTML 5 的 Cross Document Messaging 跨域 淘宝2011首页 ——HTML5 的语义增强 http://www.taobao.com 使用HTML5标签来布局淘宝首页 让ie6/7/8 支持 HTML5 标签
淘宝网!
淘宝网 ie6/7/8 禁用脚本访问量占 0.1%+ 如果ie6/7/8禁用脚本? 如果禁用了 ie 脚本 IE 禁用脚本访问 /?noscript=1 Firefox 禁用脚本 Opera 禁用脚本 • 跟随向导启用脚本 • 进入 html4 标签页面 IE 6/7/8 禁用脚本用户的选择 Kissy 库的开发 ——选择性兼容低级浏览器 Kissy Editor 在高级浏览器中的拖拽文件上传 editor.js 中对拖拽文件的处理 Chrome中使用 transition完成动画 IE中使用JavaScript 完成动画 http://docs.kissyui.com/kissy/src/anim/demo.html anim.js 对transition特性的嗅探 并做降级兼容处理 Kissy Editor优先使用html5本地存储 降级使用flash完成本地存储 editor.js 中本地存储的处理 • 继续挖掘浏览器权限 • 更大范围的语义增强 • 降级兼容老旧浏览器 • More & more… TODO TODO: “云客服” 使用webSocket 代替 Ajax 轮询 TODO: 新的改版/重构项目会基于 HTML 5语义的标签 HMTL 5 native APIs HTML 4 + JavaScript + Flash… JavaScript Adapter Similar HTML 5 APIs TODO: 通过JavaScript对 HTML 5 进行封装
还剩48页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 6 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

nnbp

贡献于2014-03-09

下载需要 6 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf