Why Open Standards Matter in HTML5 and CSS3 Design

< />

HTML5 & CSS3
2010

Thursday, July 29, 2010

zibin
Web Evangelist

twitter:zibin
:zibinone


13717712538
13717712538


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


< />

Video
source: http://zibin.tehais.com/?p=1641


< />

CANVAS
3D?


< />

Web Forms Text


demo


< />

Appcache
http://dev.opera.com/articles/view/ofﬂine-applications-html5-appcache/


< />

Geolocation
Text not html5


< />

Widgets
not html5
Text


HTML5
Semantics
CSS3
Design


< />

CSS3


Borders Background


border-radius

border-radius: 25px;


border-radius

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


border-radius

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


multiple background images


multiple background images

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


box-shadow

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;


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)


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


SVG

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


text-shadow


text-shadow

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


text-shadow

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


Dragonfly

JavaScript
CSS
HTTP Header
DOM


Future is Now


< :-)/>


zibin AT opera.com
www.opera.com/developer ( )
zibin.tehais.com( )
twitter: zibin
slideshare.net/zibin PPT


love
http://www.flickr.com/photos/mar1lyn84/2722712047/sizes/o/
spider web
http://www.flickr.com/photos/luc_viatour/2843025968/sizes/l/in/set-72157614714349217/
now
http://www.gottabemobile.com/2010/01/18/ebook-readers-strike-back-at-publishers-trying-to-
maximize-profits
shadow
http://www.flickr.com/photos/jenny-pics/3115479281/sizes/m/
transitions transform
http://www.flickr.com/photos/28481088@N00/1298930743/
borders and background
http://www.flickr.com/photos/cheekyneedle/178950842/sizes/o/
web fonts
http://www.flickr.com/photos/sekimura/4363831481/sizes/o/
dinosaur
http://www.flickr.com/photos/valerianasolaris/3205069930/sizes/l/
clapping photo
http://splashclubpenguin.files.wordpress.com/2009/03/101606sly_claps.jpg
sun flower
http://www.flickr.com/photos/treyevan/429692359/sizes/l/
transition
http://www.flickr.com/photos/28481088@N00/1290363773/sizes/o/
using internet
http://farm4.static.flickr.com/3295/2676703205_30cc3322d9_b.jpg
me
http://www.douban.com/photos/album/30539339/


Demo &
background and borders articles
http://dev.opera.com/articles/view/css3-border-background-boxshadow/
border-radius flower demo
http://people.opera.com/zibin/css3flower/flower.html
transiitons and transform article
http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/
web fonts article
http://dev.opera.com/articles/view/seven-web-fonts-showcases/
9elements HTML5 demo
http://9elements.com/io/projects/html5/canvas/
David’s photobook demo
http://people.opera.com/dstorey/transforms/image-gallery.html
Geolocation demo
http://people.opera.com/shwetankd/external/demos/demo_geo_googlemap.htm
newspaper
http://people.opera.com/zibin/newspaper/newspaper_test.html#image1


introduction to CSS2.1 and CSS3
http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3


Why Open Standards Matter in HTML5 and CSS3 Design

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (13)

Semelhante a Why Open Standards Matter in HTML5 and CSS3 Design

Semelhante a Why Open Standards Matter in HTML5 and CSS3 Design (20)

Mais de Zi Bin Cheah

Mais de Zi Bin Cheah (14)

Último

Último (20)

Why Open Standards Matter in HTML5 and CSS3 Design