html5/css3 in shanghai 2010

2010 上海分享会HTML5 & CSS3

Saturday, August 7, 2010

谢子斌／zibinWeb Evangelist／网络布道者

twitter:zibin

Why do open standards matter?

13717712538

W3C没有继续延伸HTML4的意图，反观未来的工作将着重于重新编写HTML 成XML。W3C has no intention to extend HTML4 as such. Instead, further work is focusing on a reformulatoin of HTML in XML

1999年十一月

...虽然XHTML2源自HTML4，XHTML1.0和XHTML1.1. XHTML2并不会对他们往下兼容。

...while the ancestry of XHTML2 comes from HTML4, XHTML 1.0 and XHTML 1.1. It is not intended to be backward compatible with its earlier versions

2002年八月

350万网页，只有4－5％通过W3C兼容。

2008 年http://dev.opera.com/articles/view/mama-w3c-validator-research-2/

WHAT-WG网页超文本技术工作小组

TextHTML5 语义<谈一谈/>

http://devfiles.myopera.com/articles/572/idlist-url.htm

语义化又怎么样？

TextHTML5 功能<谈一谈/>

height="400" align="middle" allowScriptAccess="sameDomain" type="application/x-

shockwave-flash"></embed>

<谈一谈/>

Videosource: http://zibin.tehais.com/?p=1641

CANVAS<谈一谈/>

SVG<谈一谈/>

TextWeb Forms<谈一谈/>

type="date"

废话少说，demo

Appcache<谈一谈/>

http://dev.opera.com/articles/view/offline-applications-html5-appcache/

应用缓存

TextGeolocation<谈一谈/>

not html5

TextWidgets<谈一谈/>

not html5

W3C StandardsBrowser IndependentRuns on phone, TV, desktop

废话少说，demo

CSS3HTML5Semantics Design

CSS3<谈一谈/>

Borders Background 边框背景

border-radius圆角

border-radius: 25px;

border-bottom-left-radius: 40px;border-bottom-right-radius: 40px;

border-radius圆角

border-bottom-left-radius: 40px;border-bottom-right-radius: 40px;

border-top-left-radius: 10px;border-top-right-radius: 10px;

border-radius圆角

source: http://zibin.tehais.com/?p=1410

多背景图片 multiple background images

background: url(rose.png) no-repeat 150px -20px, url(driedrose.png) no-repeat,! ! ! ! ! ! url(fieldsky.jpg) no-repeat;

多背景图片 multiple background images

阴影效果

box-shadow: 10px 10px 0px #fff;

box-shadow

box-shadow: 10px 10px 20px #fff;

阴影效果 box-shadow

! ! ! ! ! width, height: 100px;! ! ! ! ! box-shadow:10px 10px 20px #ff0000;! ! ! ! ! border-radius:60px;! ! ! !

阴影效果 box-shadow

Transitions Transform

转变

Transitions动态转变

div { -o-transition-property: background-color, width, height; -o-transition-duration: 4s, 8s, 5s; -o-transition-delay: 0s, 0s 2s;}

Transform静态转变

Transform - translate-o-transform: translate(50px, 100px);

移动

Transform - scale-o-transform: scale(2.5);

大小

Transform - skew-o-transform: skew(10deg, 20deg)

歪斜

Transform - rotate-o-transform: rotate(30deg)

转动

网络字型Saturday, August 7, 2010

@font-face { src: url(DeutscheZierschrift.ttf) format("truetype"); font-family: "Zierschrift"; font-style: normal; }

@font-face { ! font-family: Blackout-Midnight; ! src: url(Blackout-Midnight.ttf) format("truetype"); ! }

SVG 网络字型

文字阴影 text-shadow

text-shadow

text-shadow: #000000 10px 10px 19px;

文字阴影

text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;

text-shadow文字阴影

！我现在就想用 Saturday, August 7, 2010

调试工具 JavaScriptCSSHTTP HeaderDOM

Dragonfly

做前端是幸福的。。。

Future is Now未来就是现在

<谢谢:-)/>

zibin AT opera.comwww.opera.com/developer (团队)zibin.tehais.com(个人)twitter: zibin可以在slideshare.net/zibin找到今天的PPT

问答环节

图片lovehttp://www.flickr.com/photos/mar1lyn84/2722712047/sizes/o/spider webhttp://www.flickr.com/photos/luc_viatour/2843025968/sizes/l/in/set-72157614714349217/nowhttp://www.gottabemobile.com/2010/01/18/ebook-readers-strike-back-at-publishers-trying-to-maximize-profitsshadowhttp://www.flickr.com/photos/jenny-pics/3115479281/sizes/m/transitions transformhttp://www.flickr.com/photos/28481088@N00/1298930743/borders and backgroundhttp://www.flickr.com/photos/cheekyneedle/178950842/sizes/o/web fontshttp://www.flickr.com/photos/sekimura/4363831481/sizes/o/dinosaurhttp://www.flickr.com/photos/valerianasolaris/3205069930/sizes/l/clapping photohttp://splashclubpenguin.files.wordpress.com/2009/03/101606sly_claps.jpgsun flowerhttp://www.flickr.com/photos/treyevan/429692359/sizes/l/transitionhttp://www.flickr.com/photos/28481088@N00/1290363773/sizes/o/using internethttp://farm4.static.flickr.com/3295/2676703205_30cc3322d9_b.jpgmehttp://www.douban.com/photos/album/30539339/expohttp://www.flickr.com/photos/simonhua/4660243736/sizes/l/in/photostream/

Demo & 文章background and borders articleshttp://dev.opera.com/articles/view/css3-border-background-boxshadow/border-radius flower demohttp://people.opera.com/zibin/css3flower/flower.htmltransiitons and transform articlehttp://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/web fonts articlehttp://dev.opera.com/articles/view/seven-web-fonts-showcases/9elements HTML5 demohttp://9elements.com/io/projects/html5/canvas/David’s photobook demohttp://people.opera.com/dstorey/transforms/image-gallery.htmlGeolocation demohttp://people.opera.com/shwetankd/external/demos/demo_geo_googlemap.htmnewspaperhttp://people.opera.com/zibin/newspaper/newspaper_test.html#image1

其他参考introduction to CSS2.1 and CSS3http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3

html5/css3 in shanghai 2010

px border

px white

background http

transition http

textshadow textshadow

profits shadow http

borderradius border

dinosaur http

Technology

practical html5+css3 stc

html5 & css3 -- upa iowa

html5 and css3, illustrated complete, 1st...

html5 css3 y javascripts

html5 e css3

html5 css3 jquery basic

introduction to html5 & css3

html5 css3 handbook

html5 css3 basics

presentation about html5 css3

html5 n css3

workshop html5, css3 & github

html5 and css3 shizzle

javascript html5 css3

html5 and css3 today

html5 css3

html5-css3 update

html5 and-css3-overview

css3, html5

rmll2010 html5-css3-english