let's talk web standards

  • Published on
    01-Nov-2014

  • View
    1.191

  • Download
    0

Embed Size (px)

DESCRIPTION

An evening of informal sharing with University of Oslo

Transcript

  • 1. Have a pizza, lets talk Web Standards Thursday, November 4, 2010
  • 2. Hej hej zibin Web Evangelist twitter:zibin http://www.slideshare.net/zibin Thursday, November 4, 2010
  • 3. God bless Internet http://mediaarchive.cern.ch/MediaArchive/Photo/Public/1998/9806033/9806033/9806033-A4-at-144-dpi.jpg Thursday, November 4, 2010
  • 4. thats the whole universe WWW 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 Thursday, November 4, 2010
  • 5. W3C is WWWs standards police Thursday, November 4, 2010
  • 6. Why do open Red, orange, green...Standards GO! standards matter? Thursday, November 4, 2010
  • 7. When Standards go wrong 13717712538 http://gpssystems.net/wp-content/uploads/2009/11/sao-paulo-trafc-jam.jpg Thursday, November 4, 2010
  • 8. Everything you need Thursday, November 4, 2010
  • 9. Everything you need...now runs in a browser Thursday, November 4, 2010
  • 10. Evolution of HTML Thursday, November 4, 2010
  • 11. HTML5 = HTML (with bling) Thursday, November 4, 2010
  • 12. Web Workers Web Forms Cross Document Messaging HTML5 widgets Canvas Text Video geolocation HTML5 and friends http://www.ickr.com/photos/fuyoh/809640616/sizes/o/ Thursday, November 4, 2010
  • 13. Video source: http://zibin.tehais.com/?p=1641 Thursday, November 4, 2010
  • 14. Video Thursday, November 4, 2010
  • 15. Video Thursday, November 4, 2010
  • 16. Canvas Thursday, November 4, 2010
  • 17. SVG Thursday, November 4, 2010
  • 18. Thursday, November 4, 2010
  • 19. Web Forms Text type="date" Thursday, November 4, 2010
  • 20. Appcache Web Storage WebDB http://dev.opera.com/articles/view/ofine-applications-html5-appcache/ http://www.ickr.com/photos/bonline/2380398365/ Thursday, November 4, 2010
  • 21. Geolocation * shamefully taken while surng a dating site www.moteplassen.com Thursday, November 4, 2010
  • 22. Widgets (addons) Thursday, November 4, 2010
  • 23. Widgets on desktop, TV, mobile....fridge? Thursday, November 4, 2010
  • 24. WHAT-WG 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 Thursday, November 4, 2010
  • 25. CSS3 Thursday, November 4, 2010
  • 26. border-radius aka rounded-corners border-radius: 25px; Thursday, November 4, 2010
  • 27. border-radius aka rounded-corners border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; Thursday, November 4, 2010
  • 28. border-radius aka rounded-corners border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; Thursday, November 4, 2010
  • 29. border-radius aka rounded-corners Thursday, November 4, 2010
  • 30. multiple background images Thursday, November 4, 2010
  • 31. multiple background images background: url(rose.png) no-repeat 150px -20px, url(driedrose.png) no-repeat,! ! ! ! ! ! url(fieldsky.jpg) no-repeat; Thursday, November 4, 2010
  • 32. box-shadow box-shadow: 10px 10px 0px #fff; Thursday, November 4, 2010
  • 33. box-shadow box-shadow: 10px 10px 20px #fff; Thursday, November 4, 2010
  • 34. Web fonts Thursday, November 4, 2010
  • 35. Thursday, November 4, 2010
  • 36. text-shadow: #000000 10px 10px 19px; Thursday, November 4, 2010
  • 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. opacity opacity: 1.0; opacity: 0.5; opacity: 0.2; Thursday, November 4, 2010
  • 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. Challenges to Standards Thursday, November 4, 2010
  • 41. Thursday, November 4, 2010
  • 42. Thursday, November 4, 2010
  • 43. Its always about politics Thursday, November 4, 2010
  • 44. Money talks Thursday, November 4, 2010
  • 45. the right tool, especially for SVG and Canvas learn from other IDEs. Thursday, November 4, 2010
  • 46. Branding, geeks need to learn how to brand technologies Thursday, November 4, 2010
  • 47. In 2022, HTML5 will reach the W3C Recommendation In 2012, HTML5 will reach the W3C Public Draft Candidate Recommendation Candidate Recommendation Proposed Recommendation Closed Web W3C Recommendation slow is good, fast is good too (two sides to everything) Thursday, November 4, 2010
  • 48. Face the real world 4.13% myspace, mozilla, google, apple...... * * MAMA Report, Jan 2008 Thursday, November 4, 2010
  • 49. OtW case studies Thursday, November 4, 2010
  • 50. Case study: South Korea Thursday, November 4, 2010
  • 51. Many sites broke whenare locked into Active X South Koreans Vista was SSL/T released?? LS tiveX Ac Why? Thursday, November 4, 2010
  • 52. Case study: India Thursday, November 4, 2010
  • 53. legacy issue, sites used EOT fonts which is only supported in IE. Unicode is now the preferred choice but it is complicated to migrate UNICODE EOT FONTS Thursday, November 4, 2010
  • 54. Case study: China Thursday, November 4, 2010
  • 55. most banks, ight bookings, and ebay-like sites need ActiveX Airline Bank Alipay Thursday, November 4, 2010
  • 56. Future is now Thursday, November 4, 2010
  • 57. Thursday, November 4, 2010
  • 58. Q&A zibin AT opera.com twitter: zibin Thursday, November 4, 2010
  • 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. 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....