Why Open Web Standards arecool and will save the world. Orthe Web, at least.Bruce Lawson / Leeds University 5 May 2011
Web Evangelist at Opera
Opera – one browser on many devices
"Our goal is to take the one true Web and  make it available to people on their terms."             Jon S. von Tetzchner, ...
Executive Summary:Open Web Standards make the Web open forpeople with disabilities and people without access to the latest...
Executive Summary continued:Open Web Standards reduce reliance on any             single vendor.      Open Web Standards =...
Open StandardsNot the same thing as Open Source       Made out in the open            Royalty-free       Not tied to one v...
The most important program on your     computer is your browser
http://www.koreatimes.co.kr/www/news/biz/2010/05/123_52401.html
Legal and Generals redesign       www.brucelawson.co.uk/pas78
By-products of the redesign:● 30% increase in natural search-engine traffic● 75% reduction in page load time● No more brow...
No money, no honey etc● Savings of £200,000 annually on sitemaintenance● 90% increase in online sales● 100% return on inve...
1. new web standards2. adaptive content3. browser as platform
1. new web standards2. adaptive content3. browser as platform
HTML5<!DOCTYPE html>
HTML5 does not replace HTML 4.01
HTML5 has more bling!
HTML5 is umbrella term:markup elements and JavaScript APIs
Webforms – more powerful form elements
standardise commonly-usedrich form elements – without JavaScript
built-in validation           (of course you should still validate on the server)                 <input type=email>      ...
<canvas>“scriptable images”
<video>
“...extending the language to better support Webapplications, since that is one of the directions the Web isgoing in and i...
<object width="425" height="344">  <param name="movie"value="http://www.example.com/v/9sEI1AUFJKw&hl=en&fs=1&"></param>  <...
<video src=pudding.ogv  controls  autoplay  poster=poster.jpg  width=320 height=240>    <a href=video.ogv>Download movie</...
video as native object...why is it important?● “play nice” with rest of the page● keyboard accessibility built-in● API for...
video formats               webM            Ogg/ Theora    mp4/ h264Opera            yes               yesChrome          ...
The politics of codecs
audio formats          mp3       Ogg/ Vobis   wavOpera                  yes       yesChrome     yes         yesFirefox    ...
1. new web standards2. adaptive content3. browser as platform
Towards a World-Wide Web1.6 billion people are online, yet more than 4billion people — two out of every three peopleon Ear...
China“The proportion of [people] accessing theInternet by mobile increased enormously from39.5% in late 2008 to 46% in Jun...
IndiaThere is one bank branch for every 14,000people, one ATM for every 5000 people but amobile for every 2.3 people in In...
“One Web means making, as far as is reasonable, thesame information and services available to usersirrespective of the dev...
CSS 3 Media Queries:@media screen and       (max-device-width: 480px) {    // insert CSS rules here}http://www.w3.org/TR/c...
1. new web standards2. adaptive content3. browser as platform
“…the browser run-time isperfect…you’re out of writing forWindows Mobile, Android, S60,each of which require testing...wew...
W3C Widgets – application development filled      with web standards goodness,    using browser engine as platform
Anatomy of a widget
1. new web standards2. adaptive content3. browser as platform
www.opera.com/developer   bruce.lawson@opera.com      twitter.com@brucel
Why Open Web Standards are cool and will save the world. Or the Web, at least.
Why Open Web Standards are cool and will save the world. Or the Web, at least.
Why Open Web Standards are cool and will save the world. Or the Web, at least.
Why Open Web Standards are cool and will save the world. Or the Web, at least.
Why Open Web Standards are cool and will save the world. Or the Web, at least.
Why Open Web Standards are cool and will save the world. Or the Web, at least.
Why Open Web Standards are cool and will save the world. Or the Web, at least.
Why Open Web Standards are cool and will save the world. Or the Web, at least.
Why Open Web Standards are cool and will save the world. Or the Web, at least.
Why Open Web Standards are cool and will save the world. Or the Web, at least.
Why Open Web Standards are cool and will save the world. Or the Web, at least.
Why Open Web Standards are cool and will save the world. Or the Web, at least.
Why Open Web Standards are cool and will save the world. Or the Web, at least.
Upcoming SlideShare
Loading in...5
×

Why Open Web Standards are cool and will save the world. Or the Web, at least.

1,734

Published on

Talk by Bruce Lawson at Leeds University 5 May 2011

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,734
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Why Open Web Standards are cool and will save the world. Or the Web, at least.

  1. 1. Why Open Web Standards arecool and will save the world. Orthe Web, at least.Bruce Lawson / Leeds University 5 May 2011
  2. 2. Web Evangelist at Opera
  3. 3. Opera – one browser on many devices
  4. 4. "Our goal is to take the one true Web and make it available to people on their terms." Jon S. von Tetzchner, Opera Co-founder"All I ask is access to the full Web, everywhere. And some more beer." Me
  5. 5. Executive Summary:Open Web Standards make the Web open forpeople with disabilities and people without access to the latest expensive hardware.
  6. 6. Executive Summary continued:Open Web Standards reduce reliance on any single vendor. Open Web Standards = profit!
  7. 7. Open StandardsNot the same thing as Open Source Made out in the open Royalty-free Not tied to one vendor
  8. 8. The most important program on your computer is your browser
  9. 9. http://www.koreatimes.co.kr/www/news/biz/2010/05/123_52401.html
  10. 10. Legal and Generals redesign www.brucelawson.co.uk/pas78
  11. 11. By-products of the redesign:● 30% increase in natural search-engine traffic● 75% reduction in page load time● No more browser-incompatibility problems● Accessible to mobile devices● Time spent to manage content “reduced from5 days to 0.5 days per job”
  12. 12. No money, no honey etc● Savings of £200,000 annually on sitemaintenance● 90% increase in online sales● 100% return on investment in less than 12months.
  13. 13. 1. new web standards2. adaptive content3. browser as platform
  14. 14. 1. new web standards2. adaptive content3. browser as platform
  15. 15. HTML5<!DOCTYPE html>
  16. 16. HTML5 does not replace HTML 4.01
  17. 17. HTML5 has more bling!
  18. 18. HTML5 is umbrella term:markup elements and JavaScript APIs
  19. 19. Webforms – more powerful form elements
  20. 20. standardise commonly-usedrich form elements – without JavaScript
  21. 21. built-in validation (of course you should still validate on the server) <input type=email> <input type=url required> <input type=range min=10 max=100> <input type=date min=2010-01-01 max=2010-12-31><input pattern="[0-9][A-Z]{3}" placeholder="9AAA"> http://people.opera.com/brucel/demo/html5-forms-demo.html
  22. 22. <canvas>“scriptable images”
  23. 23. <video>
  24. 24. “...extending the language to better support Webapplications, since that is one of the directions the Web isgoing in and is one of the areas least well served by HTMLso far. This puts HTML in direct competition with othertechnologies intended for applications deployed over theWeb, in particular Flash and Silverlight.”Ian Hickson, Editor of HTML5http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
  25. 25. <object width="425" height="344"> <param name="movie"value="http://www.example.com/v/9sEI1AUFJKw&hl=en&fs=1&"></param> <param name="allowFullScreen"value="true"></param> <param name="allowscriptaccess"value="always"></param> <embedsrc="http://www.example.com/v/9sEI1AUFJKw&hl=en&fs=1&" type="application/x-shockwave-flash"allowscriptaccess="always" allowfullscreen="true"width="425" height="344"></embed></object>
  26. 26. <video src=pudding.ogv controls autoplay poster=poster.jpg width=320 height=240> <a href=video.ogv>Download movie</a></video>
  27. 27. video as native object...why is it important?● “play nice” with rest of the page● keyboard accessibility built-in● API for controls
  28. 28. video formats webM Ogg/ Theora mp4/ h264Opera yes yesChrome yes yes Nope (Chrome.soon)Firefox Yes (FF4) yesSafari yesIE9 Yes (if installed) yes
  29. 29. The politics of codecs
  30. 30. audio formats mp3 Ogg/ Vobis wavOpera yes yesChrome yes yesFirefox yes yesSafari yes yesIE9 yes yes
  31. 31. 1. new web standards2. adaptive content3. browser as platform
  32. 32. Towards a World-Wide Web1.6 billion people are online, yet more than 4billion people — two out of every three peopleon Earth — have a mobile phone or access toone.www.opera.com/smw/2009/10/
  33. 33. China“The proportion of [people] accessing theInternet by mobile increased enormously from39.5% in late 2008 to 46% in June 2009, whilethe proportion of using desktops and laptopsdecreased”. (close to 150 million people).Statistical Report on Internet Development in China, p25-26, July 2009, www.ccnic.cn
  34. 34. IndiaThere is one bank branch for every 14,000people, one ATM for every 5000 people but amobile for every 2.3 people in India.More people in India have access to a mobilephone than even a proper toilet.
  35. 35. “One Web means making, as far as is reasonable, thesame information and services available to usersirrespective of the device they are using. However, it doesnot mean that exactly the same information is available inexactly the same representation across all devices.”W3C Mobile Web Best Practices http://www.w3.org/TR/mobile-bp/#OneWeb
  36. 36. CSS 3 Media Queries:@media screen and (max-device-width: 480px) { // insert CSS rules here}http://www.w3.org/TR/css3-mediaqueries/Demonstration of Media Queries
  37. 37. 1. new web standards2. adaptive content3. browser as platform
  38. 38. “…the browser run-time isperfect…you’re out of writing forWindows Mobile, Android, S60,each of which require testing...wewant to abstract that.All the cool innovation ishappening inside the browser –you don’t need to write to thenative operating systemanymore.”Mobile Entertainment Market, June, 2009
  39. 39. W3C Widgets – application development filled with web standards goodness, using browser engine as platform
  40. 40. Anatomy of a widget
  41. 41. 1. new web standards2. adaptive content3. browser as platform
  42. 42. www.opera.com/developer bruce.lawson@opera.com twitter.com@brucel
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×