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

  • 1,635 views
Uploaded on

Talk by Bruce Lawson at Leeds University 5 May 2011

Talk by Bruce Lawson at Leeds University 5 May 2011

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,635
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
9
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Why Open Web Standards arecool and will save the world. Orthe Web, at least.Bruce Lawson / Leeds University 5 May 2011
  • 2. Web Evangelist at Opera
  • 3. Opera – one browser on many devices
  • 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. Executive Summary:Open Web Standards make the Web open forpeople with disabilities and people without access to the latest expensive hardware.
  • 6. Executive Summary continued:Open Web Standards reduce reliance on any single vendor. Open Web Standards = profit!
  • 7. Open StandardsNot the same thing as Open Source Made out in the open Royalty-free Not tied to one vendor
  • 8. The most important program on your computer is your browser
  • 9. http://www.koreatimes.co.kr/www/news/biz/2010/05/123_52401.html
  • 10. Legal and Generals redesign www.brucelawson.co.uk/pas78
  • 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. 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. 1. new web standards2. adaptive content3. browser as platform
  • 14. 1. new web standards2. adaptive content3. browser as platform
  • 15. HTML5<!DOCTYPE html>
  • 16. HTML5 does not replace HTML 4.01
  • 17. HTML5 has more bling!
  • 18. HTML5 is umbrella term:markup elements and JavaScript APIs
  • 19. Webforms – more powerful form elements
  • 20. standardise commonly-usedrich form elements – without JavaScript
  • 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. <canvas>“scriptable images”
  • 23. <video>
  • 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. <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. <video src=pudding.ogv controls autoplay poster=poster.jpg width=320 height=240> <a href=video.ogv>Download movie</a></video>
  • 27. video as native object...why is it important?● “play nice” with rest of the page● keyboard accessibility built-in● API for controls
  • 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. The politics of codecs
  • 30. audio formats mp3 Ogg/ Vobis wavOpera yes yesChrome yes yesFirefox yes yesSafari yes yesIE9 yes yes
  • 31. 1. new web standards2. adaptive content3. browser as platform
  • 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. 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. 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. “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. 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. 1. new web standards2. adaptive content3. browser as platform
  • 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. W3C Widgets – application development filled with web standards goodness, using browser engine as platform
  • 40. Anatomy of a widget
  • 41. 1. new web standards2. adaptive content3. browser as platform
  • 42. www.opera.com/developer bruce.lawson@opera.com twitter.com@brucel