More Related Content
Similar to HTML5@电子商务.com (20)
HTML5@电子商务.com
- 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 HTML5
HTML5 HTML5 2005 ajax ajax
ajax HTML5 HTML5
HTML5 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 iPad
HTML5@ .com HTML5 in China HTML5 HTML5 Cool Mozilla
HTML5 in the wild http://paulrouget.com/e/html5inthewild/ HTML5
HTML5 HTML5
HTML5 HTML5
- 2. About Me
• / /
@kavenyan
kavenyan@gmail.com
http://dancewithnet.com
- 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.html
http://www.w3counter.com/globalstats.php
http://coolshell.cn/articles/4795.html
HTML5 HTML5 Test HTML5 Test 400
293 HTML5
- 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 HTML5
2. HTML5 2004 WHATWG 2006 W3C 2001 IE6 HTML5 HTML5
HTML HTML5 HTML5 DTD <!doctype html> HTML5
3. IE6 IE7 IE8 80% IE 90% IE
1. XP 80%
2. IE
IE
4. IE6 40% IE6 50%
- 7. Using Semantic Elements
• IE6-8
• document.createElements(‘section’);
• <section>
<div class=”content section”>
</div>
</section>
http://www.w3.org/wiki/HTML/New_HTML5_Elements
http://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
- 9. Firefox NoScript
86,650,332
https://addons.mozilla.org/en-US/firefox/addon/noscript/
JavaScript Firefox NoScript 9000
NoScript NoScript JavaScript
JavaScript
- 10. Taobao Homepage
http://www.taobao.com/?noscript=1
http://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
- 12. Koubei Practice
• JavaScript
<div class=”section”></div>
• JavaScript
http://www.schema.org/
JavaScript IE5.5 JavaScript
1. JavaScript
HTML5 http://schema.org/ HTML5
2. JavaScript HTML5
3. NoScript
- 14. List to Detail
List Detail ajax List Detail
Amazon 100 1% http://www.slideshare.net/stubbornella/after-yslow-a ajax
1. ajax detail URL
2.
3. SEO
- 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 loading
HTML5 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. More & More
• HTML5 & CSS3
• Offline Cache & Local Storage
• GEO
• Canvas & SVG
• Web Works & Web Socket
• ...
• Code Cola
https://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. Users First
Jeremy Keith
http://www.cn-cuckoo.com/2010/10/21/the-design-of-html5-2151.html
http://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. Koubei Practice
• +
• +
• Web Page Web Application
• + + +
+
http://www.slideshare.net/lifesinger/progressive-enhancement-6355326
https://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. Thank You
Write Once,
Run EveryWhere + Cool
“ ” Java HTML + CSS + JavaScript
Cool HTML5