Have a pizza, let’s talk Web Standards
Thursday, November 4, 2010
zibinWeb Evangelist
twitter:zibinhttp://www.slideshare.net/zibin
Hej hej
Thursday, November 4, 2010
http://mediaarchive.cern.ch/MediaArchive/Photo/Public/1998/9806033/9806033/9806033-A4-at-144-dpi.jpg
God bless Internet
Thursday, November 4, 2010
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
Thursday, November 4, 2010
W3C is WWW’s standards police
Thursday, November 4, 2010
Why do open standards matter?
Red, orange, green...Standards GO!
Thursday, November 4, 2010
13717712538
http://gpssystems.net/wp-content/uploads/2009/11/sao-paulo-traffic-jam.jpg
When Standards go wrong
Thursday, November 4, 2010
Everything you need
Thursday, November 4, 2010
Everything you need...now runs in a browser
Thursday, November 4, 2010
Evolution of HTML
Thursday, November 4, 2010
HTML5 = HTML (with bling)
Thursday, November 4, 2010
TextHTML5
Web Workers
Canvas
Cross Document MessagingWeb Forms
Video
HTML5 and friends
http://www.flickr.com/photos/fuyoh/809640616/sizes/o/
widgets
geolocation
Thursday, November 4, 2010
source: http://zibin.tehais.com/?p=1641
Video
Thursday, November 4, 2010
<embed src="http://player.youku.com/player.php/sid/XMTk1NjY4NDc2/v.swf" quality="high" width="480"
height="400" align="middle" allowScriptAccess="sameDomain" type="application/x-
shockwave-flash"></embed>
Video
Thursday, November 4, 2010
<video src="video.ogg" width="300" height="150" controls></video>
Video
Thursday, November 4, 2010
Canvas
Thursday, November 4, 2010
SVG
Thursday, November 4, 2010
Thursday, November 4, 2010
Text
type="date"
Web Forms
Thursday, November 4, 2010
http://dev.opera.com/articles/view/offline-applications-html5-appcache/
Appcache
Web Storage
WebDB
http://www.flickr.com/photos/bfionline/2380398365/
Thursday, November 4, 2010
Geolocation
www.moteplassen.com
* shamefully taken while surfing a dating site
Thursday, November 4, 2010
Widgets (addons)
Thursday, November 4, 2010
Widgets on desktop, TV, mobile....fridge?
Thursday, November 4, 2010
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
Thursday, November 4, 2010
CSS3 Thursday, November 4, 2010
border-radius aka rounded-corners
border-radius: 25px;
Thursday, November 4, 2010
border-radius aka rounded-corners
border-bottom-left-radius: 40px;border-bottom-right-radius: 40px;
Thursday, November 4, 2010
border-radius aka rounded-corners
border-bottom-left-radius: 40px;border-bottom-right-radius: 40px;
Thursday, November 4, 2010
border-radius aka rounded-corners
Thursday, November 4, 2010
multiple background images
Thursday, November 4, 2010
background: url(rose.png) no-repeat 150px -20px, url(driedrose.png) no-repeat,! ! ! ! ! ! url(fieldsky.jpg) no-repeat;
multiple background images
Thursday, November 4, 2010
box-shadow
box-shadow: 10px 10px 0px #fff;
Thursday, November 4, 2010
box-shadow
box-shadow: 10px 10px 20px #fff;
Thursday, November 4, 2010
Web fontsThursday, November 4, 2010
Thursday, November 4, 2010
text-shadow: #000000 10px 10px 19px;
Thursday, November 4, 2010
text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
Thursday, November 4, 2010
opacity
opacity: 1.0; opacity: 0.2; opacity: 0.5;
Thursday, November 4, 2010
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);
Thursday, November 4, 2010
Challenges to Standards
Thursday, November 4, 2010
Thursday, November 4, 2010
Thursday, November 4, 2010
It’s always about politics
Thursday, November 4, 2010
Money talks
Thursday, November 4, 2010
the right tool, especially for SVG and Canvaslearn from other IDEs.
Thursday, November 4, 2010
Branding, geeks need to learn how to brand technologies
Thursday, November 4, 2010
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)
Thursday, November 4, 2010
Face the real world
4.13%*
* MAMA Report, Jan 2008
myspace, mozilla, google, apple......
Thursday, November 4, 2010
OtW case studies
Thursday, November 4, 2010
Case study: South Korea
Thursday, November 4, 2010
Why?Many sites broke when Vista was released??SSL/TLS Active X
South Koreans are locked into Active X
Thursday, November 4, 2010
Case study: India
Thursday, November 4, 2010
UNICODEEOT 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
Thursday, November 4, 2010
Case study: China
Thursday, November 4, 2010
Bank
Airline
Alipay
most banks, flight bookings, and ebay-like sites need ActiveX
Thursday, November 4, 2010
Future is now
Thursday, November 4, 2010
<Thank you:-)/>
Thursday, November 4, 2010
zibin AT opera.comtwitter: zibin
Q&A
Thursday, November 4, 2010
Creative Commons license imageclaphttp://www.flickr.com/photos/tudor/953584594/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/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/
Thursday, November 4, 2010
Creative Commons license imageGreat 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 StoreyTomato 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.htmlnapkin http://images2.cpcache.com/product/19388882v1_480x480_Front_Color-White.jpgsouth 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/
Thursday, November 4, 2010
Demo & articlebackground 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.html
Presentation referenceintroduction to CSS2.1 and CSS3http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3
Thursday, November 4, 2010
Recommended
