Bruce Lawson

India University Tour, 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

What is a Standard?

traffic lightUSB plug and socket

When Standards go wrong

train on a trolly on differently gauged track

India 1994-1995

me dressed as 19th century English soldier on Bollywood film set

What are Open Web Standards?

India is a complicated, fractious, often cacophonous democracy where viewpoints and visions clash and compete. Yet, I have found an astounding consensus around the notions of inclusion and sustainability, grounded in India's unique cultural heritage.

Mira Kamdar Planet India

…like W3c?

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

Write once, work everywhere

Indian businesswoman
“Our technology enables students to learn online on the PC and the mobile. It has been a challenge and a nightmare to make and maintain different front-end software for the mobile and PC environments.

Pavithra Vikram,
Manager, Research & Development
Valued Epistemics Pvt Ltd,
Chennai, India
providers of GREedge

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

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

Get involved!

www.whatwg.org

TV Raman

Open Web Standards…

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

Open Web Standards is the future of the Web

If India can create a knowledge economy that is an economy attuned to the challenges it faces, if it can change the information age into an age of wisdom, it will save itself—and the rest of us too.

Mira Kamdar Planet India

Thank you

brucel@opera.com

education@opera.com

There are no foolish questions - only fools who do not question