Web 4.0: Start planning now!

Steven Pemberton, CWI and W3C, Amsterdam

About me

Researcher at the Dutch national research centre CWI (the first European internet site).

Co-designed ABC, the programming language that Python is based on.

In the 80's co-designed what you would now call a browser.

Organised 2 workshops at the first Web conference in 1994.

Co-author of CSS, HTML4, XHTML, XML Events, XForms, etc.

Chair of HTML and Forms working groups.

Until recently, editor-in-Chief of ACM/interactions.

What is this crazy thing called Web 2.0?

A Rose by any other name would smell as sweet...

But what if a rose didn't have a name?

Sapir-Whorf Hypothesis: Connection between thought and language.

If you haven't got a word for it, you can't think it.

If you don't perceive it as a concept, you won't invent a word for it.

For example: Dutch Gezellig

Gezellig

An example: The Meaning of Liff

The Deeper Meaning of Liff: A Dictionary of Things There Aren't Any Words for Yet — But There Ought to Be

By Douglas Adams and John Lloyd

Such as:

An example: The Meaning of Liff

The Deeper Meaning of Liff: A Dictionary of Things There Aren't Any Words for Yet — But There Ought to Be

By Douglas Adams and John Lloyd

Such as:

PEORIA (n.): the fear of peeling too few potatoes

An example: The Meaning of Liff

The Deeper Meaning of Liff: A Dictionary of Things There Aren't Any Words for Yet — But There Ought to Be

By Douglas Adams and John Lloyd

Such as:

PEORIA (n.): the fear of peeling too few potatoes

ABINGER (n.): Person who washes up everything except the frying pan, the cheese grater and the saucepan which the chocolate sauce has been made in.

An example: The Meaning of Liff

The Deeper Meaning of Liff: A Dictionary of Things There Aren't Any Words for Yet — But There Ought to Be

By Douglas Adams and John Lloyd

Such as:

PEORIA (n.): the fear of peeling too few potatoes

ABINGER (n.): Person who washes up everything except the frying pan, the cheese grater and the saucepan which the chocolate sauce has been made in.

DUNGENESS (n.): The uneasy feeling that the plastic handles of the over-loaded supermarket carrier bag you are carrying are getting steadily longer.

Web Examples (with the date of first sighting)

There are new words in use which seem to upset people - "What's so special about that? I've been doing that since 19xx"

Web Examples (with the date of first sighting)

There are new words in use which seem to upset people - "What's so special about that? I've been doing that since 19xx"

Blog (1995)

Web Examples (with the date of first sighting)

There are new words in use which seem to upset people - "What's so special about that? I've been doing that since 19xx"

Blog (1995)
Microformats (1997)

Web Examples (with the date of first sighting)

There are new words in use which seem to upset people - "What's so special about that? I've been doing that since 19xx"

Blog (1995)
Microformats (1997)
Tags (1997)

Web Examples (with the date of first sighting)

There are new words in use which seem to upset people - "What's so special about that? I've been doing that since 19xx"

Blog (1995)
Microformats (1997)
Tags (1997)
Ajax (1999)

Web Examples (with the date of first sighting)

There are new words in use which seem to upset people - "What's so special about that? I've been doing that since 19xx"

Blog (1995)
Microformats (1997)
Tags (1997)
Ajax (1999)
Web 2.0 (all of the above)

Web Examples (with the date of first sighting)

There are new words in use which seem to upset people - "What's so special about that? I've been doing that since 19xx"

Blog (1995)
Microformats (1997)
Tags (1997)
Ajax (1999)
Web 2.0 (all of the above)

These are words that let us talk about things that already existed. They create the concept.

But they also signal the success of work that has gone on in the past. After all the Web was designed for all these things!

What needs a name?

If I think of concepts that relate to W3C work that haven't yet got a name (which of course the Saphir-Whorf Hypothesis doesn't allow me to do), then for instance:

The sort of website that you see at csszengarden, or similar

CSSzengarden post
zengarden post
zengarden worm

SVG as stylesheet using XBL

sidewinder clocks

The clocks here in the markup are of the style 11:30:00, and the SVG stylesheet turns those into the analogue clocks

San Francisco 01:30
New York 04:30
London 10:30
Amsterdam 11:30
Tokyo 18:30

Things that I Hope to see Whorfed in the Future, and Why (2)

Layering semantics over viewable content, like
microformats: see earlier
RDFa: like microformats, making the semantic web more palatable for the Web author.

RDFa

RDFa allows you to layer semantics over the content:

It was reported that
   <span content="2006-09-30">yesterday</span>
   <span content="Tony Blair">the prime minister</span>
 flew to Washington ...

This is a simple example, but RDFa allows you to mark up dates, places, events, and is extensible, so you can easily add other semantics.

Advantages

Once a search engine can derive from the document that the text "the prime minister" means "Tony Blair", then a search for "Tony Blair" can find that page as well, even if it doesn't mention him by name, or a browser might offer additional information, for instance on hovering.

If the browser really knows that something is an address, it can offer to add it to your address book, or find it for you on a map.

If the browser really knows that something is an announcement for an event like a conference, and can identify the sub-parts, it can offer to add it to your agenda, find it on a map, locate hotels, look up flights, ...

But upstream processors can also use the information for other purposes, such as transforming content to different devices.

Things that I Hope to see Whorfed in the Future, and Why (3)

Webapps produced using declarative markup

We live in an exponential world

To demonstrate Moore's Law

Take a piece of paper, divide it in two, and write this year's date in one half:

Paper

2006

Now divide the other half in two vertically, and write the date 18 months ago in one half:

Paper

2006
2004

Now divide the remaining space in half, and write the date 18 months earlier (or in other words 3 years ago) in one half:

Paper

2006
2004
2003

Repeat until your pen is thicker than the space you have to divide in two:

Paper

2006
2004
2003
2001
2000
1998
1997
1995
94
92
91
89
88
86

This demonstrates that your current computer is more powerful than all other computers you have had put together (and the original Macintosh (1984) had tiny amounts of computing power available.)

So how are we using all that extra power?

Badly...

Mostly for pixel pushing.

Most computers spend most of their active life idle.

Our Idle Computers

Twice as idle

Why aren't we using the extra power to make people's (our!) lives better?

(It's not the first time I've said that)

High-level programming languages

Interpreted programming languages

Declarative approach

Applications over the Web

Google maps One of the big advantages of applications over the web is that everyone has always got the most recent version.

One of the disadvantages is how difficult they are to author (Google maps is more than 200k of Javascript)

Diversity of Devices

Japanese moble phone use The world isn't just PC's

There are now more browsers on phones than on personal computers.

There are browsers on many new devices: phones, PDAs, printers, even refrigerators; there are increasing numbers of form factors, sizes, resolutions.

Diversity of Users

Not only do we have diversity of devices, but diversity of users too!
We are all visually impaired at some time or another:

Diversity of Users

Not only do we have diversity of devices, but diversity of users too!
We are all visually impaired at some time or another:

Most applications do not support accessibility in any meaningful way.
Even if you can zoom the text, the menus and dialogue boxes stay just as small.

The need for so called ten-foot interfaces is an admission of lack of accessibility.

By the way: Google is a blind user, and sees only what a blind person sees (which is why text in images, or Flash, are a bad idea, and why spending money on accessibility is a good idea).

Applications over the web

So these are the conditions we are working under.

Ease of use (for the programmer as well as the end user)

Device independence

Accessibility

The cost of producing applications

According to the DoD, 90% of the cost of software is debugging.

According to Fred Brookes, in his classic book The Mythical Man Month, the number of bugs increases quadratically according to code size: L1.5.

In other words, a program that is 10 times longer is 32 times harder to write.

Or put another way: a program that is 10 times smaller needs only 3% of the effort.

Constructing Applications

The problem is, no one writes applications except programmers.

Interesting exception: spreadsheets

Mostly because they use a declarative programming model.

The nice part about declarative programming is that the computer takes care of all the boring fiddly detail.

Views

Views application environment Late 80's after designing a programming language designed on usability principles (ABC - Python is based on it), we designed an 'application environment' that investigated usability at the system level (not just the application level).

This system had an extensible markup language, vector graphics, style sheets, a DOM, client-side scripting...today you would call it a browser (it didn't use TCP/IP though).

It ran on an Atari ST (amongst others).

Programming Clocks

The shortest code I could find of an analogue clock was something over 1000 lines of C (the longest was over 4000 lines):

1000 lines of C code

Clock

Here is the essence of the code used for the Views clock example.

type clock = (h, m, s)
displayed as 
   circled(combined(hhand; mhand; shand; decor))
   shand = line(slength) rotated (s × 60)
   mhand = line(mlength) rotated (m × 60)
   hhand = line(hlength) rotated (h × 30 + m ÷ 2)
   decor = ...
   slength = ...
   ...
clock c
c.s = system:seconds mod 60
c.m = (system:seconds div 60) mod 60
c.h = (system:seconds div 3600) mod 24

Declarative Applications

A world clock written using XForms Some of the most interesting work in this area is being done by xport.net with their Sidewinder rich web browser.

What they have done is combined XHTML, XForms, SVG and XBL. The SVG is essentially a stylesheet for XHTML+XForms content, being applied using XBL. For instance:

The code says:

<xf:output value="..."
    appearance="fp:analogue-clock" class="clock">

The output is then something like 11:30:00, and the SVG turns this into an analogue clock (the XBL keys off the 'appearance' attribute).

Google maps in XForms

Google maps in XForms

Google maps as Declarative Application

Although the example shown above is not quite complete, it does more than Google maps does and yet it is only 25Kbytes of code (instead of the 200+K of Javascript).

Remember, empirically, a program that is an order of magnitude smaller needs only 3% of the effort to build.

Another data point: A major company designs and implements user interfaces for large machinery. It normally takes 30 people 5 years per product. They recently tried XForms: it took 10 people 1 year.

Another data point: two teams (Script, XForms) were asked to come back the next day with estimates of how long it would take to add a certain new functionality. The next day team one said they would need a month to produce an estimate. Team two had already done it.

Advantages

The advantages of this approach are:

Conclusion

Web 2.0 is built on facilities designed into the Web starting in 1995.

Current HTML offers inadequate facilities for the needs of the future web.

New facilities can only be designed after consultation with all parties.

The Web needs to be brought back to its roots of simplicity, device independence and accessibility.