let's talk web standards

Have a pizza, let’s talk Web
Standards
Thursday, November 4, 2010

zibin
Web Evangelist
twitter:zibin
http://www.slideshare.net/zibin
Hej hej

http://mediaarchive.cern.ch/MediaArchive/Photo/Public/1998/9806033/9806033/9806033-A4-at-144-dpi.jpg
God bless Internet

http://obamapacman.com/wp-content/uploads/2009/08/First-World-Wide-Web-Server-at-CERN-made-possible-by-Tim-Berners-Lee-hosted-on-Steve-Jobs-NeXT-workstation-
computer-300x225.jpg
that’s the whole universe WWW

W3C is WWW’s standards police

Why do open
standards matter?
Red, orange, green...Standards GO!

13717712538
http://gpssystems.net/wp-content/uploads/2009/11/sao-paulo-traffic-jam.jpg
When Standards go wrong

Everything you need

Everything you need...now runs in a browser

Evolution of HTML

HTML5 = HTML (with bling)

Text
HTML5
Web Workers
Canvas
Cross Document Messaging
Web Forms
Video
HTML5
and friends
http://www.flickr.com/photos/fuyoh/809640616/sizes/o/
widgets
geolocation

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

<video src="video.ogg" width="300" height="150"
controls></video>
Video

Canvas

SVG

Text
type="date"
Web Forms

http://dev.opera.com/articles/view/offline-applications-html5-appcache/
Appcache
Web Storage
WebDB
http://www.flickr.com/photos/bfionline/2380398365/

Geolocation
www.moteplassen.com
* shamefully taken while surfing a dating site

Widgets (addons)

Widgets on desktop,TV, mobile....fridge?

W3C has no intention to extend HTML4 as such. Instead,
further work is focusing on a reformulatoin of HTML in XML
...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
WHAT-WG

CSS3

border-radius aka rounded-corners
border-radius: 25px;

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

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
box-shadow: 10px 10px 0px #fff;

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

Web fonts

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;

opacity
opacity: 1.0; opacity: 0.2;
opacity: 0.5;

rgba／hsla
rgba(255,0,0,1.0);
rgba(255,0,0,0.8);
rgba(255,0,0,0.6);
rgba(255,0,0,0.4);
rgba(255,0,0,0.2);

Challenges to
Standards

It’s always about politics

Money talks

the right tool, especially for SVG and Canvas
learn from other IDEs.

Branding, geeks need to learn how to brand technologies

Closed Web
Public Draft
Candidate Recommendation
Proposed Recommendation
W3C Recommendation
In 2012, HTML5 will
reach the W3C
Candidate
Recommendation
In 2022, HTML5 will
reach the W3C
Recommendation
slow is good, fast is good too (two sides to
everything)

Face the real world
4.13%*
* MAMA Report, Jan 2008
myspace, mozilla, google, apple......

OtW case studies

Case study:
South Korea

Why?
Many sites broke when Vista was
released??
SSL/TLS Active X
South Koreans are locked into Active X

Case study: India

UNICODE
EOT FONTS
legacy issue, sites used EOT fonts which is only supported in IE. Unicode is now the preferred
choice but it is complicated to migrate

Case study: China

Bank
Airline
Alipay
most banks, flight bookings, and ebay-like sites need ActiveX

Future is now

zibin AT opera.com
twitter: zibin
Q&A

Creative Commons license image
clap
http://www.flickr.com/photos/tudor/953584594/
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/
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/

Creative Commons license image
Great Wall of China http://www.flickr.com/photos/smokingpermitted/
padlock http://www.flickr.com/photos/elnicofotos/
stick no bills/tamil http://www.flickr.com/photos/meanestindian/
Killbill http://www.flickr.com/photos/wili/
money http://www.flickr.com/photos/amagill/
baby http://www.flickr.com/photos/mackro/
Open Web Stack by David Storey
Tomato http://www.flickr.com/photos/somemixedstuff/
lego plane http://www.flickr.com/photos/pmiaki/
American express http://www.flickr.com/photos/andresrueda/
bush baby http://bust-the-stress.blogspot.com/2009/01/baby-sitting.html
napkin http://images2.cpcache.com/product/19388882v1_480x480_Front_Color-White.jpg
south korea http://www.flickr.com/photos/bibbit/2948779230/sizes/l/in/photostream/
india http://www.flickr.com/photos/jasleen_kaur/3116354699/sizes/l/in/photostream/

Demo & article
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
Presentation reference
introduction to CSS2.1 and CSS3
http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3

let's talk web standards

More Related Content

Viewers also liked (9)

Similar to let's talk web standards (20)

More from Zi Bin Cheah (12)

Recently uploaded (20)

let's talk web standards