HTML5@电子商务.com

4,315
-1

Published on

2011.6.10,HTML5 in China暨首届HTML5原创游戏大赛启动大会的分享主题。

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

No Downloads
Views
Total Views
4,315
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
76
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

HTML5@电子商务.com

  1. 1. HTML5@ .com 2011.06.10 2009 2010 Google Apple Facebook HTML5 4.10 QConBeijing2011 12 HTML5 http://www.qconbeijing.com/schedule.html 4.18 W3CTech “ HTML5” http://www.w3ctech.com/2011/html5 HTML5 HTML5 in China 3 HTML5 7.9 D2 http://developerclub.taobao.com/schedule/ HTML5 HTML5 HTML5HTML5 HTML5 2005 ajax ajax ajax HTML5 HTML5HTML5 Google Reader HTML5 Apple App Store HTML5 phoneGap + HTML5 iPad http://www.mhtml5.com/download/present-on-the-air.pptx iPad Web Mobile Web Android iPhone iPadHTML5@ .com HTML5 in China HTML5 HTML5 Cool Mozilla HTML5 in the wild http://paulrouget.com/e/html5inthewild/ HTML5 HTML5 HTML5 HTML5 HTML5
  2. 2. About Me • / / @kavenyan kavenyan@gmail.com http://dancewithnet.com
  3. 3. HTML5@Browsers HTML5 Test Global Taobao Internet Explorer 6 17 2.91% 37.52% Internet Explorer 7 17 8.73% 5.14% Internet Explorer 8 32 22.29% 40.10% Internet Explorer 9 130 3.76% 3.00% Safari 5.0.3 228 5.43% 0.14% Firefox 3.6 155 11.03% 0.90% Firefox 4.0 255 14.82% Opera 11.10 258 ? 0.14% Chrome 10 288 1.25% 1.90% Chrome 11 293 14.13%http://html5test.com/results.htmlhttp://www.w3counter.com/globalstats.phphttp://coolshell.cn/articles/4795.html HTML5 HTML5 Test HTML5 Test 400 293 HTML5
  4. 4. HTML5@Browsers HTML5 Test Global Taobao Internet Explorer 6 17 2.91% 37.52% Internet Explorer 7 17 8.73% 5.14% Internet Explorer 8 32 22.29% 40.10% Internet Explorer 9 130 3.76% 3.00% Safari 5.0.3 228 5.43% 0.14% Firefox 3.6 155 11.03% 0.90% Firefox 4.0 255 14.82% Opera 11.10 258 ? 0.14% Chrome 10 288 1.25% 1.90% Chrome 11 293 14.13%1. IE6 IE7 IE8 HTML5 HTML5 IE6 3% IE7 9% Google IE6 IE7 http://www.cnbeta.com/articles/144542.htm HTML52. HTML5 2004 WHATWG 2006 W3C 2001 IE6 HTML5 HTML5 HTML HTML5 HTML5 DTD <!doctype html> HTML53. IE6 IE7 IE8 80% IE 90% IE 1. XP 80% 2. IE IE4. IE6 40% IE6 50%
  5. 5. Alipay Tips
  6. 6. Alipay Security Browsershttps://securitycenter.alipay.com/sc/partner.htm IE Firefox Chrome Safari XP IE9
  7. 7. Using Semantic Elements • IE6-8 • document.createElements(‘section’); • <section> <div class=”content section”> </div> </section>http://www.w3.org/wiki/HTML/New_HTML5_Elementshttp://www.nczonline.net/blog/2011/03/22/using-html5-semantic-elements-today/ HTML5 <section> HTML5 HTML IE6 IE7 IE8 1. John Resig JavaScript IE6-8 JavaScript JavaScript 2. JavaScript
  8. 8. NoScript •Yahoo! : 1% • Taobao : 0.1%+ • Koubei : 0.3-0.6% JavaScript
  9. 9. Firefox NoScript 86,650,332https://addons.mozilla.org/en-US/firefox/addon/noscript/ JavaScript Firefox NoScript 9000 NoScript NoScript JavaScript JavaScript
  10. 10. Taobao Homepage http://www.taobao.com/?noscript=1http://ued.taobao.com/blog/2011/05/13/2011-taobao-lottery-index-dev/http://ued.taobao.com/blog/2011/01/11/dev-share-for-taobao-new-homepage/ HTML5 IE6-8 JavaScript JavaScript HTML5
  11. 11. Taobao Caipiao HTML5 JavaScript JavaScript
  12. 12. Koubei Practice • JavaScript <div class=”section”></div> • JavaScripthttp://www.schema.org/ JavaScript IE5.5 JavaScript 1. JavaScript HTML5 http://schema.org/ HTML5 2. JavaScript HTML5 3. NoScript
  13. 13. User Paths Portal List Detail Buy Btn Pay Btn
  14. 14. List to Detail List Detail ajax List Detail Amazon 100 1% http://www.slideshare.net/stubbornella/after-yslow-a ajax1. ajax detail URL2.3. SEO
  15. 15. history.pushState • https://twitter.com/#!/kavenyan • http://waimai.koubei.com/web/ showGoods.html?city=99&storeId=182cfe3479b3463382390fbd967fe4c8 • http://waimai.koubei.com/web/ takeoutgoodsdetail.html?city=99&offerId=10211200000000191 ajax JavaScript twitter 1. url hash URL 2. window.history.hash + iframe 3. API SEO twitter SEO URL https://twitter.com/#!/kavenyan loading JavaScript hash loadingHTML5 history API histroy.pushState histroy.replaceState ajax URL URL hash URL SEO List ajax Detail URL http://waimai.koubei.com/web/takeoutgoodsdetail.html?city=99&offerId=10211200000000191 Detail loading API Chrome Safari Firefox4 ABTest HTML5 HTML5 API http://github.com QConBeijing2011 hax API API HTML5 Cool Cool
  16. 16. More & More • HTML5 & CSS3 • Offline Cache & Local Storage • GEO • Canvas & SVG • Web Works & Web Socket • ... • Code Colahttps://chrome.google.com/webstore/detail/lomkpheldlbkkfiifcbfifipaofnmnkn HTML5 HTML5 CSS3 Cool PhotoShop HTML5 + CSS3 HTML5 + CSS3 HTML5 HTML5 + CSS3 + JavaScript + HTML5 CSS3 Chrome Code Cola HTML5 HTML5 + CSS3 + JavaScript HTML5
  17. 17. Users First Jeremy Keithhttp://www.cn-cuckoo.com/2010/10/21/the-design-of-html5-2151.htmlhttp://v.ku6.com/special/show_4135580/gJcoPDq-JFVncXOp.html Jeremy Keith HTML5 4 W3CTech HTML5 HTML5 HTML5 HTML5 HTML5 HTML5 HTML5 1 NoScript 2 3 HTML5 + CSS3
  18. 18. Koubei Practice • + • + • Web Page Web Application • + + +  +http://www.slideshare.net/lifesinger/progressive-enhancement-6355326https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills HTML5 1. 2. HTML5 HTML5 Modernizr wiki HTML5 HTML5 HTML5 3. Douglas Crockford ajax web page web application 2005 HTML5 API Web App App Web App Google Maps Gmail Facebook Twitter 4. HTML5 Cool HTML5 HTML5 HTML5 HTML5
  19. 19. Thank You Write Once, Run EveryWhere + Cool“ ” Java HTML + CSS + JavaScript Cool HTML5

×