Bruce Lawson

Kingston University, April 2009

View with Opera!

Open Web Standards: the future

By Bruce Lawson

About Opera

It's a web browser.

various browser logos

What's the difference?

Opera’s vision is to provide the best Internet experience on any device

various Opera-powered devices

About Me

About Me

B.A., Honours English Literature and Language with Drama

Theresa is blind

blind woman with dark glasses

But she can use the Web if it's made with standards (Web Content Accessibility Guidelines)

The big picture

WWW

The big picture

Wealthy Western Web

Indian woman checking mobile phone

A web (pre)history

1989
TBL proposes a project
1992
<img> in Mosaic beta. Now 99.57% (MAMA)
1994
W3C started at MIT
1996
The Browser Wars
1999
WAP, Web Content Accessibility Guidelines (WCAG)
2000
Flash

Modern web history

2000-ish
.com Crash - Time to grow up...
2002
Opera Mobile with Small Screen Rendering
2005
WHAT-WG founded, W3C Mobile Web Initiative starts
2007
W3C adopts WHAT-WG spec as basis for HTML 5
January 22, 2008
First public working draft of HTML 5
2009
WAI-ARIA?
HTML 5: Last Call Working Draft

What is a Standard?

traffic lightUSB plug and socket

Open vs Closed Standards

train on a trolly on differently gauged track

The dangers of a monoculture

South Korea is a nation that at the forefront of technology, an early adopter of ecommerce, leading the world in 3G mobile adoption, in wireless broadband, in wired broadband adoption, as well as in citizen-driven media.

But the Web is in hands of a single corporation.

http://kanai.net/weblog/archive/2007/01/26/00h53m55s

Advantages of Standards

The Web works everywhere - The Web is the platform

Case study - Legal and General

British based financial services company that provides life, health and other insurance, as well as pensions and investments. Its shares trade on the London Stock Exchange as part of the FTSE 100 Index. Major markets include U.K., France, Germany, the Netherlands and the United States: www.landg.com

www.brucelawson.co.uk/pas78

Legal and General's redesign

Open Web Technologies

Jigsaw: three pieces marked HTML, CSS, JavaScript

HTML

Semantic HTML

<h1>This is the main heading</h1>
<h2>This is a sub-heading</h2>
<p>A paragraph about <a href="http://www.opera.com/">something interesting</a>.</p>
<ul>
<li>list item</li>
<li>Another list item</li>
</ul>
<h2>Another heading</h2>
<p>Another paragraph</p>

A simple data table

Person Age
Bruce 42
Shwetank 24
Parminder 13
Sanjay 53

Bad HTML

<table border="1" width="500">
<thead> <tr bgcolor="blue" align="center"><th><font color="white">Person</font></th><th><font color="white">Age</font></th></tr>
</thead> <tbody> <tr bgcolor="white"><td bgcolor="white"><font color="black">Bruce</font></td><td bgcolor="white"><font color="black">42</font></td></tr>
<tr bgcolor="#66FFCC"><td><font color="black">Shwetank</font></td><td><font color="black">24</font></td></tr>
<tr bgcolor="white"><td><font color="black">Parminder</font></td><td><font color="black">13</font></td></tr>
<tr bgcolor="#66FFCC"><td><font color="black">Sanjay</font></td><td><font color="black">53</font></td></tr>
</tbody> </table>

Good HTML

Person Age
Bruce 42
Shwetank 24
Parminder 13
Sanjay 53
<table>
<thead>
<tr><th>Person</th><th>Age</th></tr>
</thead>
<tbody>
<tr><td>Bruce</td><td>42</td></tr>
<tr><td>Shwetank</td><td>24</td></tr>
<tr><td>Parminder</td><td>13</td></tr>
<tr><td>Sanjay</td><td>53</td></tr>
</tbody>
</table>

Cascading stylesheets for presentation

CSS provides a way to abstract styles from meaning. Include it in the head and style the whole site

table {width:500px; border:1px solid white;}
th {background-color:blue; color:white; text-align:center;}
tr {background-color:white; color:black;}
tr:nth-child(even) {background-color:#66FFCC;}

Check out the semantic table

JavaScript for behaviour

Using principles of unobtrusive JavaScript, I'll add Stuart Langridge's Sorttable script:

<script src="sorttable.js"></script>
<table class="sortable">

Check out the sortable table

HTML 5

HTML5: <canvas>

  • Dynamic graphics using scripting (usually JavaScript)
  • First implemented by Apple, now in most browsers
  • Accessibility!
  • Canvas Demo

HTML 5 forms

Do what people really want to do, without scripting, so

See Web Forms Example

Current work: Video

Current way to embed video:

<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/LtfQg4KkR88&hl=en&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="http://www.youtube.com/v/LtfQg4KkR88&hl=en&fs=1" type="application/x-shockwave-flash"
allowfullscreen="true" width="425" height="344"></embed>
</object>

Current work: Video

Super shiny new way

<video src="video.ogv"
  controls
  autoplay
  poster="poster.jpg" 
  width="320" height="240">
    <a href="video.ogv">Download movie</a>
</video>

(Demonstrations need an Opera experimental build.)

Current work: Video

in HTML5
A simple example
Or with some control
and in SVG
Add filters
or animation
and dynamic interaction

Video Politics

Open Web Standards…

  • oppose dominance by one corporation and so promote choice
  • promote inclusion
  • lower development cost - work smarter, not cheaper

Thank you

brucel@opera.com

education@opera.com