Submit Search
Upload
Html5@taobao
•
26 likes
•
1,774 views
jay li
Follow
html5@taobao from Qcon
Read less
Read more
Technology
Design
Report
Share
Report
Share
1 of 48
Download now
Download to read offline
Recommended
ilovejoomla套件分享 - 破題設計PT Studio
ilovejoomla套件分享 - 破題設計PT Studio
Francis You
Denver CMS Expo Creating CSS template
Denver CMS Expo Creating CSS template
compassdesign
Chicago EXPO Creating a Pure CSS Template in Joomla 1.5
Chicago EXPO Creating a Pure CSS Template in Joomla 1.5
compassdesign
Presentation at Joomla EXPO in May 2008 - Creating a Pure CSS Template in Joomla 1.5
CSD_部落格也是教學平台-嵌入工具實作
CSD_部落格也是教學平台-嵌入工具實作
SCE, PCCU
CSD德國中文學校遠距課程
Oracle Security 101
Oracle Security 101
Dahui Feng
这是我2007年做的一份文档。因为之前分享出来的文件已经找不到了,因而重新上传了一下。 该文档内容有删节,另外,用的时候注意内容的时效性。
The Rules of Scalable database
The Rules of Scalable database
Dahui Feng
深入浅出复合事件处理(CEP)
深入浅出复合事件处理(CEP)
Dahui Feng
蔡学镛先生在 QCon Beijing 2010 分享的PPT。
垂直互联网站点的技术改造
垂直互联网站点的技术改造
Dahui Feng
在 QCon Hangzhou 2012 上的演讲.
Recommended
ilovejoomla套件分享 - 破題設計PT Studio
ilovejoomla套件分享 - 破題設計PT Studio
Francis You
Denver CMS Expo Creating CSS template
Denver CMS Expo Creating CSS template
compassdesign
Chicago EXPO Creating a Pure CSS Template in Joomla 1.5
Chicago EXPO Creating a Pure CSS Template in Joomla 1.5
compassdesign
Presentation at Joomla EXPO in May 2008 - Creating a Pure CSS Template in Joomla 1.5
CSD_部落格也是教學平台-嵌入工具實作
CSD_部落格也是教學平台-嵌入工具實作
SCE, PCCU
CSD德國中文學校遠距課程
Oracle Security 101
Oracle Security 101
Dahui Feng
这是我2007年做的一份文档。因为之前分享出来的文件已经找不到了,因而重新上传了一下。 该文档内容有删节,另外,用的时候注意内容的时效性。
The Rules of Scalable database
The Rules of Scalable database
Dahui Feng
深入浅出复合事件处理(CEP)
深入浅出复合事件处理(CEP)
Dahui Feng
蔡学镛先生在 QCon Beijing 2010 分享的PPT。
垂直互联网站点的技术改造
垂直互联网站点的技术改造
Dahui Feng
在 QCon Hangzhou 2012 上的演讲.
部落格製作與數位圖像編修
部落格製作與數位圖像編修
guest8a0fc8
部落格製作與數位圖像編修
Html5不只是个传说
Html5不只是个传说
czbad
Html5不只是个传说
Developer也可以做出漂亮網站 - Twitter Bootstrap/JQuery Mobile簡介
Developer也可以做出漂亮網站 - Twitter Bootstrap/JQuery Mobile簡介
Fred Lin
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
Joseph Chiang
在北京 2012/9/9 所举办的 SDCC 分享「模块加载策略」
Html5不只是个传说
Html5不只是个传说
Zhi Zhong
HTML5正在快速的进入Web开发的
Google雲端 第一章準備篇
Google雲端 第一章準備篇
gracebrainyu
HTML5概览
HTML5概览
Adam Lu
Blog01
Blog01
catherine906
部落格製作與圖片編修
Joomla架站趣 1031219
Joomla架站趣 1031219
jidca2004
Joomla!3架站,超Easy!簡報檔
淺談使用者體驗UX-從生活中來看魔鬼的細節
淺談使用者體驗UX-從生活中來看魔鬼的細節
Souyi Yang
KSDG-「淺談使用者體驗UX-從生活中來看魔鬼的細節」 KSDG (Kaohsiung Software Developer Group) 高雄軟體開發者社群 議題:淺談使用者體驗UX-從生活中來看魔鬼的細節 主講人:凌誠科技 楊梭逸 日期:2012/07/05(四) 時間:19:30-21:00 地點:高雄軟體園區A棟301室(高雄市前鎮區復興四路12號 A301) 議題說明: 設計,是需隱藏於生活中,不著痕跡的被使用。但有許多原始設計,往往後來被使用者使用過後有所改變。很多造成的原因,在於設計前未由『體驗』的角度去瞭解這個真實的世界許多因子。 本次分享試著藉由講者生活中的觀察,淺談這些設計是如何被我們改變,或是改變我們的生活。並介紹可執行的設計方法論,讓體驗的設計方式是有所依循與評估。 組織介紹: KSDG為高雄從事軟體及網路技術開發者共同交流的社群,設定每次聚會不同議題進行分享及討論。期能藉由常態性之聚會,發展人才資源及交流之聚落。聚會後亦會將相關訊息進行分享,歡迎有興趣的個人或新創公司一起來參與。 名額:30名 費用:免費 報名方式:採本系統線上報名 (報名期限至7月3日) 社群網址:http://www.facebook.com/groups/KSDGroup 其它:備有茶水
Joomla 1031219
Joomla 1031219
o0gary0o
唔係呀哇,咁鬼易 ?
Joomla架站趣 1031219
Joomla架站趣 1031219
jidca2004
Joomla!3架站,超Easy!簡報檔
從雛形到設計-了解您的使用者在想什麼
從雛形到設計-了解您的使用者在想什麼
Souyi Yang
簡報於2011/5/31於屏科大資管系大二「網際網路原理」課程 ,主要為了解使用者的重要性,與雛形(prototyping)的介紹。 本投影片Prototype資料由蔡明哲 (Richard Tsai)整理提供,經同意進行修改與教學使用。
淘宝移动端Web开发实践
淘宝移动端Web开发实践
完颜 小卓
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
ziggear
ASP.NET MVC 善用網路資源快速完打造網站
ASP.NET MVC 善用網路資源快速完打造網站
twMVC
ASP.NET MVC 善用網路資源快速完打造網站
Seo搜尋行銷網戰攻略
Seo搜尋行銷網戰攻略
煜庭 邱
http://blog.seo-tw.org/
[AI / ML] 用 LLM (Large language model) 來整理您的知識庫 @Devfest Taipei 2023
[AI / ML] 用 LLM (Large language model) 來整理您的知識庫 @Devfest Taipei 2023
Johnny Sung
大型語言模型(Large language model, LLM)橫空出世,像個萬事通一樣,改變你我的生活,隨時想到的時候諮詢一下,立馬解決你的心中的疑問,甚至有些鮮少人討論的部份,他都有機會可以解決您的問題。 這樣的專家能夠請他來幫助我們知識庫整理嗎?可以的,他擅長幫你整理半結構化的資料,就讓我們看看能夠有什麼有趣的應用吧! #ai #aigc #bard #chatgpt #langchain #llm 2023.12.16 @ Devfest Taipei 2023
課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)
課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)
Jollen Chen
學習 HTML5 應用程式的第一課: 建立 UI 與學習 JavaScript。本課程由鴻海集團贊助,全程免費,深入淺出、六個小時入門 HTML5。
實戰流網站優化 – 修身篇
實戰流網站優化 – 修身篇
煜庭 邱
實戰流網站優化 – 修身篇
犀牛书第六版
犀牛书第六版
jay li
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
jay li
More Related Content
Similar to Html5@taobao
部落格製作與數位圖像編修
部落格製作與數位圖像編修
guest8a0fc8
部落格製作與數位圖像編修
Html5不只是个传说
Html5不只是个传说
czbad
Html5不只是个传说
Developer也可以做出漂亮網站 - Twitter Bootstrap/JQuery Mobile簡介
Developer也可以做出漂亮網站 - Twitter Bootstrap/JQuery Mobile簡介
Fred Lin
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
Joseph Chiang
在北京 2012/9/9 所举办的 SDCC 分享「模块加载策略」
Html5不只是个传说
Html5不只是个传说
Zhi Zhong
HTML5正在快速的进入Web开发的
Google雲端 第一章準備篇
Google雲端 第一章準備篇
gracebrainyu
HTML5概览
HTML5概览
Adam Lu
Blog01
Blog01
catherine906
部落格製作與圖片編修
Joomla架站趣 1031219
Joomla架站趣 1031219
jidca2004
Joomla!3架站,超Easy!簡報檔
淺談使用者體驗UX-從生活中來看魔鬼的細節
淺談使用者體驗UX-從生活中來看魔鬼的細節
Souyi Yang
KSDG-「淺談使用者體驗UX-從生活中來看魔鬼的細節」 KSDG (Kaohsiung Software Developer Group) 高雄軟體開發者社群 議題:淺談使用者體驗UX-從生活中來看魔鬼的細節 主講人:凌誠科技 楊梭逸 日期:2012/07/05(四) 時間:19:30-21:00 地點:高雄軟體園區A棟301室(高雄市前鎮區復興四路12號 A301) 議題說明: 設計,是需隱藏於生活中,不著痕跡的被使用。但有許多原始設計,往往後來被使用者使用過後有所改變。很多造成的原因,在於設計前未由『體驗』的角度去瞭解這個真實的世界許多因子。 本次分享試著藉由講者生活中的觀察,淺談這些設計是如何被我們改變,或是改變我們的生活。並介紹可執行的設計方法論,讓體驗的設計方式是有所依循與評估。 組織介紹: KSDG為高雄從事軟體及網路技術開發者共同交流的社群,設定每次聚會不同議題進行分享及討論。期能藉由常態性之聚會,發展人才資源及交流之聚落。聚會後亦會將相關訊息進行分享,歡迎有興趣的個人或新創公司一起來參與。 名額:30名 費用:免費 報名方式:採本系統線上報名 (報名期限至7月3日) 社群網址:http://www.facebook.com/groups/KSDGroup 其它:備有茶水
Joomla 1031219
Joomla 1031219
o0gary0o
唔係呀哇,咁鬼易 ?
Joomla架站趣 1031219
Joomla架站趣 1031219
jidca2004
Joomla!3架站,超Easy!簡報檔
從雛形到設計-了解您的使用者在想什麼
從雛形到設計-了解您的使用者在想什麼
Souyi Yang
簡報於2011/5/31於屏科大資管系大二「網際網路原理」課程 ,主要為了解使用者的重要性,與雛形(prototyping)的介紹。 本投影片Prototype資料由蔡明哲 (Richard Tsai)整理提供,經同意進行修改與教學使用。
淘宝移动端Web开发实践
淘宝移动端Web开发实践
完颜 小卓
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
ziggear
ASP.NET MVC 善用網路資源快速完打造網站
ASP.NET MVC 善用網路資源快速完打造網站
twMVC
ASP.NET MVC 善用網路資源快速完打造網站
Seo搜尋行銷網戰攻略
Seo搜尋行銷網戰攻略
煜庭 邱
http://blog.seo-tw.org/
[AI / ML] 用 LLM (Large language model) 來整理您的知識庫 @Devfest Taipei 2023
[AI / ML] 用 LLM (Large language model) 來整理您的知識庫 @Devfest Taipei 2023
Johnny Sung
大型語言模型(Large language model, LLM)橫空出世,像個萬事通一樣,改變你我的生活,隨時想到的時候諮詢一下,立馬解決你的心中的疑問,甚至有些鮮少人討論的部份,他都有機會可以解決您的問題。 這樣的專家能夠請他來幫助我們知識庫整理嗎?可以的,他擅長幫你整理半結構化的資料,就讓我們看看能夠有什麼有趣的應用吧! #ai #aigc #bard #chatgpt #langchain #llm 2023.12.16 @ Devfest Taipei 2023
課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)
課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)
Jollen Chen
學習 HTML5 應用程式的第一課: 建立 UI 與學習 JavaScript。本課程由鴻海集團贊助,全程免費,深入淺出、六個小時入門 HTML5。
實戰流網站優化 – 修身篇
實戰流網站優化 – 修身篇
煜庭 邱
實戰流網站優化 – 修身篇
Similar to Html5@taobao
(20)
部落格製作與數位圖像編修
部落格製作與數位圖像編修
Html5不只是个传说
Html5不只是个传说
Developer也可以做出漂亮網站 - Twitter Bootstrap/JQuery Mobile簡介
Developer也可以做出漂亮網站 - Twitter Bootstrap/JQuery Mobile簡介
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
Html5不只是个传说
Html5不只是个传说
Google雲端 第一章準備篇
Google雲端 第一章準備篇
HTML5概览
HTML5概览
Blog01
Blog01
Joomla架站趣 1031219
Joomla架站趣 1031219
淺談使用者體驗UX-從生活中來看魔鬼的細節
淺談使用者體驗UX-從生活中來看魔鬼的細節
Joomla 1031219
Joomla 1031219
Joomla架站趣 1031219
Joomla架站趣 1031219
從雛形到設計-了解您的使用者在想什麼
從雛形到設計-了解您的使用者在想什麼
淘宝移动端Web开发实践
淘宝移动端Web开发实践
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
ASP.NET MVC 善用網路資源快速完打造網站
ASP.NET MVC 善用網路資源快速完打造網站
Seo搜尋行銷網戰攻略
Seo搜尋行銷網戰攻略
[AI / ML] 用 LLM (Large language model) 來整理您的知識庫 @Devfest Taipei 2023
[AI / ML] 用 LLM (Large language model) 來整理您的知識庫 @Devfest Taipei 2023
課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)
課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)
實戰流網站優化 – 修身篇
實戰流網站優化 – 修身篇
More from jay li
犀牛书第六版
犀牛书第六版
jay li
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
jay li
Jswebapps
Jswebapps
jay li
潜力无限的编程语言Javascript
潜力无限的编程语言Javascript
jay li
Responsive Web UI Design
Responsive Web UI Design
jay li
珍珠奶茶会上的一次分享
深入剖析浏览器
深入剖析浏览器
jay li
淘宝UED前端培训课程
HTML/CSS/JS基础
HTML/CSS/JS基础
jay li
淘宝前端技术培训第二课,HTML/CSS/JS基础
淘宝前端技术巡礼
淘宝前端技术巡礼
jay li
淘宝前端技术
F2e security
F2e security
jay li
中国元素在设计中的应用 -如瑟
中国元素在设计中的应用 -如瑟
jay li
卫银霞 -统计数字会撒谎
卫银霞 -统计数字会撒谎
jay li
编码大全 拔赤
编码大全 拔赤
jay li
小控件、大学问
小控件、大学问
jay li
淘宝旅行控件改版分享
Mobile UI design and Developer
Mobile UI design and Developer
jay li
可适应移动终端屏幕大小的网站UI设计和实现
Javascript autoload
Javascript autoload
jay li
Html5form
Html5form
jay li
Slide
Slide
jay li
Slide
Js doc toolkit
Js doc toolkit
jay li
新业务新员工培训 Banner设计
新业务新员工培训 Banner设计
jay li
夏之 专题设计
夏之 专题设计
jay li
More from jay li
(20)
犀牛书第六版
犀牛书第六版
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
Jswebapps
Jswebapps
潜力无限的编程语言Javascript
潜力无限的编程语言Javascript
Responsive Web UI Design
Responsive Web UI Design
深入剖析浏览器
深入剖析浏览器
HTML/CSS/JS基础
HTML/CSS/JS基础
淘宝前端技术巡礼
淘宝前端技术巡礼
F2e security
F2e security
中国元素在设计中的应用 -如瑟
中国元素在设计中的应用 -如瑟
卫银霞 -统计数字会撒谎
卫银霞 -统计数字会撒谎
编码大全 拔赤
编码大全 拔赤
小控件、大学问
小控件、大学问
Mobile UI design and Developer
Mobile UI design and Developer
Javascript autoload
Javascript autoload
Html5form
Html5form
Slide
Slide
Js doc toolkit
Js doc toolkit
新业务新员工培训 Banner设计
新业务新员工培训 Banner设计
夏之 专题设计
夏之 专题设计
Html5@taobao
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.
9.
HTML 5的兼容性问题
10.
HTML 5的功能用HTML 4同样能实现?!
11.
HTML 5和HTML 4部分功能实现差异
功能 Html 5 Html 4 文档语义化 语义化标签 class/id 语义的命名 视频 video标签 用flash实现 长连接 Web socket 轮询/flash socket 增强的form表单 标签支持 通过js模拟实现 本地存储 Api支持 通过cookies或flash 美观的界面 Css3 图片+冗余标签
12.
功能的降级兼容
HTML 4 HTML 5 JavaScript Flash CSS 2 HTML 4 JavaScript Flash CSS 2
13.
淘宝对HTML5的实践 • 深入挖掘浏览器权限
• 文档语义增强 • 选择性兼容低级浏览器
14.
淘宝“云客服” ——深入挖掘浏览器权限
15.
淘宝“云客服”:类似 web 旺旺的IM客户端(不兼容IE)
16.
传统的 iframe 跨域
17.
HTML 5 的
Cross Document Messaging 跨域
18.
淘宝2011首页
——HTML5 的语义增强
19.
http://www.taobao.com
20.
21.
使用HTML5标签来布局淘宝首页
22.
让ie6/7/8 支持 HTML5
标签 <html> <head> <style> figure { color:orange; } </style> <script>document.createElement("figure");</script> </head> <body> <figure> 淘宝网! </figure> </body> </html>
23.
淘宝网 ie6/7/8 禁用脚本访问量占
0.1%+ 如果ie6/7/8禁用脚本?
24.
<!--[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]-->
25.
如果禁用了 ie 脚本
26.
IE 禁用脚本访问 /?noscript=1 Firefox 禁用脚本 Opera
禁用脚本
27.
IE 6/7/8 禁用脚本用户的选择
• 跟随向导启用脚本 • 进入 html4 标签页面
28.
Kissy 库的开发
——选择性兼容低级浏览器
29.
Kissy Editor 在高级浏览器中的拖拽文件上传
30.
editor.js 中对拖拽文件的处理
31.
Chrome中使用
transition完成动画 IE中使用JavaScript 完成动画 http://docs.kissyui.com/kissy/src/anim/demo.html
32.
anim.js 对transition特性的嗅探
并做降级兼容处理
33.
Kissy Editor优先使用html5本地存储
降级使用flash完成本地存储
34.
editor.js 中本地存储的处理
35.
TODO • 继续挖掘浏览器权限 • 更大范围的语义增强 •
降级兼容老旧浏览器 • More & more…
36.
TODO: “云客服” 使用webSocket
代替 Ajax 轮询
37.
TODO: 新的改版/重构项目会基于 HTML 5语义的标签
38.
Similar HTML 5
APIs JavaScript Adapter HMTL 5 native APIs HTML 4 + JavaScript + Flash… TODO: 通过JavaScript对 HTML 5 进行封装
39.
<script src=“html5-adapter.js”></script> <section>
<label for="header_search_q“>Search</label> <input type="search" autofocus value="tmp"> </label> </section 浏览器嗅探并模拟 html5 控件
40.
HTML 5 form
模拟出的 “HTML 5” form
41.
http://www.flickr.com/photos/pandacat_baby/5436938941/ • User Experience •
Efficiency • Performance
42.
Progressive Enhancement
43.
44.
45.
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/
46.
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
47.
http://www.flickr.com/photos/zhuoqun/5272961407/in/contacts/
Q&A bachi@taobao.com http://jayli.github.com http://ued.taobao.com
Download now