Successfully reported this slideshow.

let's talk web standards

1,241 views

Published on

An evening of informal sharing with University of Oslo

Published in: Technology, News & Politics
  • Be the first to comment

let's talk web standards

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

×