淘宝的HTML5实践

淘宝的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/Grap...

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 进行封装

                    本文档为【淘宝的HTML5实践】，请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑，
                    图片更改请在作品中右键图片并更换，文字修改请直接点击文字进行修改，也可以新增和删除文档中的内容。 
 该文档来自用户分享，如有侵权行为请发邮件ishare@vip.sina.com联系网站客服，我们会及时删除。

                    [版权声明] 本站所有资料为用户分享产生，若发现您的权利被侵害，请联系客服邮件isharekefu@iask.cn，我们尽快处理。

                    本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用。

                    网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
                

下载需要：免费已有0 人下载

立即下载

你可能还喜欢

最新资料

资料动态

专题动态

is_470479

暂无简介~

格式：pdf

大小：5MB

软件：PDF阅读器

页数：49

分类：互联网

上传时间：2011-12-21

浏览量：18

热点搜索

克亚老师表演英语特训营DVD销售信-刘克亚 2022-2023学年河南省洛阳市名校生物七年级第二学期期末学业质量监测试题含解析材料缺陷简介概要教案飞机超疏水表面的防冰性能研究进展_陈凯三年级简单的学生评价评语《信息管理学基础》复习题库及答案山西主要自然灾害简单的承包合同（汇编6篇）完整病历模板. FKD公司人力资源规划制度发黑处理红姐的故事德国交通部(KBA)汽轮/摩轮轮毂安全认证简介高中劳技课《电子制作》的教学探索5 克亚老师表演英语特训营DVD销售信-刘克亚 2022-2023学年河南省洛阳市名校生物七年级第二学期期末学业质量监测试题含解析材料缺陷简介概要教案飞机超疏水表面的防冰性能研究进展_陈凯三年级简单的学生评价评语《信息管理学基础》复习题库及答案山西主要自然灾害简单的承包合同（汇编6篇）完整病历模板. FKD公司人力资源规划制度发黑处理红姐的故事德国交通部(KBA)汽轮/摩轮轮毂安全认证简介高中劳技课《电子制作》的教学探索5