HTML5@电子商务.com
Upcoming SlideShare
Loading in...5
×
 

HTML5@电子商务.com

on

  • 4,148 views

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

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

Statistics

Views

Total Views
4,148
Views on SlideShare
2,908
Embed Views
1,240

Actions

Likes
8
Downloads
72
Comments
0

17 Embeds 1,240

http://dancewithnet.com 860
http://www.slideshare.net 310
http://xianguo.com 27
http://www.kuqin.com 10
url_unknown 9
http://www.feedspot.com 4
https://reader.aol.com 3
http://cache.baidu.com 3
http://127.0.0.1 2
http://dwn3 2
http://blog.rongzhiwang.com 2
http://feed.feedsky.com 2
http://pmomale-ld1 2
http://cloud.feedly.com 1
http://xnny.net 1
http://reader.aol.com 1
http://digg.com 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@电子商务.com HTML5@电子商务.com Document Transcript

  • 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
  • About Me • / / @kavenyan kavenyan@gmail.com http://dancewithnet.com
  • 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
  • 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%
  • Alipay Tips
  • Alipay Security Browsershttps://securitycenter.alipay.com/sc/partner.htm IE Firefox Chrome Safari XP IE9
  • 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
  • NoScript •Yahoo! : 1% • Taobao : 0.1%+ • Koubei : 0.3-0.6% JavaScript
  • Firefox NoScript 86,650,332https://addons.mozilla.org/en-US/firefox/addon/noscript/ JavaScript Firefox NoScript 9000 NoScript NoScript JavaScript JavaScript
  • 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
  • Taobao Caipiao HTML5 JavaScript JavaScript
  • 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
  • User Paths Portal List Detail Buy Btn Pay Btn
  • 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
  • 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
  • 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
  • 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
  • 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
  • Thank You Write Once, Run EveryWhere + Cool“ ” Java HTML + CSS + JavaScript Cool HTML5