let's talk web standards
DESCRIPTION
An evening of informal sharing with University of OsloTRANSCRIPT
![Page 1: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/1.jpg)
Have a pizza, let’s talk Web Standards
Thursday, November 4, 2010
![Page 2: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/2.jpg)
zibinWeb Evangelist
twitter:zibinhttp://www.slideshare.net/zibin
Hej hej
Thursday, November 4, 2010
![Page 3: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/3.jpg)
http://mediaarchive.cern.ch/MediaArchive/Photo/Public/1998/9806033/9806033/9806033-A4-at-144-dpi.jpg
God bless Internet
Thursday, November 4, 2010
![Page 4: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/4.jpg)
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
![Page 5: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/5.jpg)
W3C is WWW’s standards police
Thursday, November 4, 2010
![Page 6: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/6.jpg)
Why do open standards matter?
Red, orange, green...Standards GO!
Thursday, November 4, 2010
![Page 7: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/7.jpg)
13717712538
http://gpssystems.net/wp-content/uploads/2009/11/sao-paulo-traffic-jam.jpg
When Standards go wrong
Thursday, November 4, 2010
![Page 8: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/8.jpg)
Everything you need
Thursday, November 4, 2010
![Page 9: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/9.jpg)
Everything you need...now runs in a browser
Thursday, November 4, 2010
![Page 10: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/10.jpg)
Evolution of HTML
Thursday, November 4, 2010
![Page 11: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/11.jpg)
HTML5 = HTML (with bling)
Thursday, November 4, 2010
![Page 12: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/12.jpg)
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
![Page 13: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/13.jpg)
source: http://zibin.tehais.com/?p=1641
Video
Thursday, November 4, 2010
![Page 14: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/14.jpg)
<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
![Page 15: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/15.jpg)
<video src="video.ogg" width="300" height="150" controls></video>
Video
Thursday, November 4, 2010
![Page 16: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/16.jpg)
Canvas
Thursday, November 4, 2010
![Page 17: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/17.jpg)
SVG
Thursday, November 4, 2010
![Page 18: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/18.jpg)
Thursday, November 4, 2010
![Page 19: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/19.jpg)
Text
type="date"
Web Forms
Thursday, November 4, 2010
![Page 20: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/20.jpg)
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
![Page 21: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/21.jpg)
Geolocation
www.moteplassen.com
* shamefully taken while surfing a dating site
Thursday, November 4, 2010
![Page 22: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/22.jpg)
Widgets (addons)
Thursday, November 4, 2010
![Page 23: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/23.jpg)
Widgets on desktop, TV, mobile....fridge?
Thursday, November 4, 2010
![Page 24: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/24.jpg)
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
![Page 25: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/25.jpg)
CSS3 Thursday, November 4, 2010
![Page 26: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/26.jpg)
border-radius aka rounded-corners
border-radius: 25px;
Thursday, November 4, 2010
![Page 27: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/27.jpg)
border-radius aka rounded-corners
border-bottom-left-radius: 40px;border-bottom-right-radius: 40px;
Thursday, November 4, 2010
![Page 28: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/28.jpg)
border-radius aka rounded-corners
border-bottom-left-radius: 40px;border-bottom-right-radius: 40px;
Thursday, November 4, 2010
![Page 29: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/29.jpg)
border-radius aka rounded-corners
Thursday, November 4, 2010
![Page 30: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/30.jpg)
multiple background images
Thursday, November 4, 2010
![Page 31: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/31.jpg)
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
![Page 32: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/32.jpg)
box-shadow
box-shadow: 10px 10px 0px #fff;
Thursday, November 4, 2010
![Page 33: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/33.jpg)
box-shadow
box-shadow: 10px 10px 20px #fff;
Thursday, November 4, 2010
![Page 34: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/34.jpg)
Web fontsThursday, November 4, 2010
![Page 35: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/35.jpg)
Thursday, November 4, 2010
![Page 36: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/36.jpg)
text-shadow: #000000 10px 10px 19px;
Thursday, November 4, 2010
![Page 37: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/37.jpg)
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
![Page 38: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/38.jpg)
opacity
opacity: 1.0; opacity: 0.2; opacity: 0.5;
Thursday, November 4, 2010
![Page 39: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/39.jpg)
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
![Page 40: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/40.jpg)
Challenges to Standards
Thursday, November 4, 2010
![Page 41: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/41.jpg)
Thursday, November 4, 2010
![Page 42: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/42.jpg)
Thursday, November 4, 2010
![Page 43: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/43.jpg)
It’s always about politics
Thursday, November 4, 2010
![Page 44: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/44.jpg)
Money talks
Thursday, November 4, 2010
![Page 45: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/45.jpg)
the right tool, especially for SVG and Canvaslearn from other IDEs.
Thursday, November 4, 2010
![Page 46: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/46.jpg)
Branding, geeks need to learn how to brand technologies
Thursday, November 4, 2010
![Page 47: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/47.jpg)
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
![Page 48: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/48.jpg)
Face the real world
4.13%*
* MAMA Report, Jan 2008
myspace, mozilla, google, apple......
Thursday, November 4, 2010
![Page 49: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/49.jpg)
OtW case studies
Thursday, November 4, 2010
![Page 50: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/50.jpg)
Case study: South Korea
Thursday, November 4, 2010
![Page 51: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/51.jpg)
Why?Many sites broke when Vista was released??SSL/TLS Active X
South Koreans are locked into Active X
Thursday, November 4, 2010
![Page 52: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/52.jpg)
Case study: India
Thursday, November 4, 2010
![Page 53: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/53.jpg)
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
![Page 54: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/54.jpg)
Case study: China
Thursday, November 4, 2010
![Page 55: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/55.jpg)
Bank
Airline
Alipay
most banks, flight bookings, and ebay-like sites need ActiveX
Thursday, November 4, 2010
![Page 56: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/56.jpg)
Future is now
Thursday, November 4, 2010
![Page 57: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/57.jpg)
<Thank you:-)/>
Thursday, November 4, 2010
![Page 58: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/58.jpg)
zibin AT opera.comtwitter: zibin
Q&A
Thursday, November 4, 2010
![Page 59: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/59.jpg)
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
![Page 60: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/60.jpg)
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
![Page 61: let's talk web standards](https://reader034.vdocuments.site/reader034/viewer/2022051608/545676f7b1af9f39378b4efe/html5/thumbnails/61.jpg)
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