HTML5@电子商务.com

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

About Me

• / /

@kavenyan
kavenyan@gmail.com
http://dancewithnet.com

HTML5@Browsers
HTML5 Test Global Taobao
Internet Explorer 6 17 2.91% 37.52%
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

HTML5@Browsers
HTML5 Test Global Taobao


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%

Alipay Security Browsers

https://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_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

NoScript

•Yahoo! : 1%

• Taobao : 0.1%+
• Koubei : 0.3-0.6%

JavaScript

Firefox NoScript

86,650,332

https://addons.mozilla.org/en-US/ﬁrefox/addon/noscript/

JavaScript Firefox NoScript 9000
NoScript NoScript JavaScript
JavaScript

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

Taobao Caipiao

HTML5 JavaScript JavaScript

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

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 ajax
1. ajax detail URL
2.
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 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

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

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

Koubei Practice

• +

• +

• Web Page Web Application

• + + +
+
http://www.slideshare.net/lifesinger/progressive-enhancement-6355326
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyﬁlls

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

HTML5@电子商务.com

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (6)

Similar a HTML5@电子商务.com

Similar a HTML5@电子商务.com (20)

Más de kaven yan

Más de kaven yan (12)

Último

Último (20)

HTML5@电子商务.com