sharpener pencil

Web of Applications

Dave Raggett <dsr@w3.org>

wispy clouds in a blue sky

Google, Mountain View
1st February 2006

Outline of today's talk

The Ubiquitous Web

Ubiquitous. [adj]

  1. (seemingly) present
    everywhere simultaneously.
  2. often encountered
    [Latin ubique everywhere]

Oxford English Dictionary

Ubiquitous Computing

Ubiquitous computing represents a powerful shift in computation, where people live, work, and play in a seamlessly interweaving computing environment. Ubiquitous computing postulates a world where people are surrounded by computing devices and a computing infrastructure that supports us in everything we do.

Mark Weiser, The Computer of the 21st Century, Scientific American, Sept 1991.

Ubiquitous Web

The Ubiquitous Web seeks to broaden the capabilities of browsers to enable new kinds of web applications, particularly those involving coordination with other devices. Some examples include connecting a camera phone to a nearby printer, using a cell phone to give a business presentation with a wireless projector, and viewing your mailbox while listening to your messages.

Ubiquitous Web

These applications involve identifying resources and managing them within the context of an application session. The resources can be remote as in a network printer and projector, or local, as in the estimated battery life, network signal strength, and audio volume level. The Ubiquitous Web will provide a framework for exposing device coordination capabilities to Web applications.

W3C Ubiquitous Web Workshop

Tokyo, March 2006, driven by widespread interest in Web Applications and the potential to go further.

Current Work

IETF Widex Working Group

Developing a protocol for remote user interfaces based upon the Model-View-Controller paradigm, where the UI is expressed in terms of an XML DOM and the protocol is independent of the markup language.

+-----------------------------+            +---------------+
|       Widex Server          |            | Widex Renderer|
| +-------+    .............. |            | +-----------+ |
| |       |    .            .--------------->|           | |
| |       |    .    View    . |  Updates   | |           | |
| |       |    .  (Virtual) .<---------------|           | |
| |       |    .............. |            | |   View    | |
| | Model |                   |            | |           | |
| |       |    +------------+ |            | |           | |
| |       |    |            |<---------------| (XML DOM) | |
| |       |    | Controller | |   Events   | |           | |
| |       |    |            |--------------->|           | |
| +-------+    +------------+ |            | +-----------+ |
+-----------------------------+            +---------------+

See draft-ietf-widex-requirements-00.txt, V. Stirbu (Nokia) and D. Raggett (W3C/Canon), January 12th, 2006

Note: at the request of OMA and several W3C members, W3C has started work on a solution for streaming updates for SVG documents that will also work with other XML languages. Streaming introduces timing related requirements, and the W3C and IETF groups will coordinate their work on this.

What's missing or can be improved upon?

Exposing Device Coordination to the Web

The DOM and Distributed Services

Options for adding speech capabilities

Latency

Using AJAX to add speech

HTTP for Speech Services

Application to ordering Pizza

You get to choose number, type, size and extra toppings!

pepperoni pizza founders pizza chicken pizza all the works pizza

SRGS + SISR → EMMA

   <rule id="order">
      <tag>var index=0; out.pizza = new Array();</tag>
      <item repeat="0-1"><ruleref uri="#start"/></item>
      <item>
        <ruleref uri="#pizza"/>
        <tag>out.pizza[index]=$pizza; index+=1;</tag>
      </item>
      <item repeat="0-">
         <item><token>and</token></item>
         <item>
           <ruleref uri="#pizza"/>
           <tag>out.pizza[index]=$pizza; index+=1;</tag>
         </item>
      </item>
      <item repeat="0-1"><ruleref uri="#stop"/></item>
   </rule>

Pizza Grammar

I would like four small cheese pizzas with olives and peppers

[<start>] [<number>] [<size>] <type> (pizza | pizzas) [with <extras>] [<stop>]

<start> ::= I want | I would like | I'll have | I'd like | I'd love | Give me
<stop> :: thanks | please | if you please
<number> ::= a | one | two | ... | nine
<size> ::= small | medium | large
<type> ::= cheese | pepperoni | sausage
<extras> ::= <topping> [[and] <topping>]*
<topping> ::= mushroom | olives | onions | peppers | tomatoes

<emma:interpretation>
  <pizza>
     <size>small</size>
     <number>4</number>
     <type>cheese</type>
     <topping>olives</topping>
     <topping>peppers</topping>
  </pizza>
</emma:interpretation>

Pizza Grammar

A slightly more complex grammar allows for
several kinds of pizza to be requested at once

Give me a medium pepperoni pizza and a large cheese pizza with peppers and onions.

      <emma:interpretation>
         <pizza>
            <number>1</number>
            <size>medium</size>
            <type>pepperoni</type>
         </pizza>
         <pizza>
            <number>1</number>
            <size>large</size>
            <type>cheese</type>
            <topping>sausage</topping>
            <topping>onions</topping>
         </pizza>
      </emma:interpretation>

Application to Ordering Pizza

Modeling Behavior

Logging

Remarks

Web Presentations

Incremental display of slide contents

For incremental display, use class="incremental", for instance:

which is marked up as follows:

<ul class="incremental"> 
  <li>First bullet point</li> 
  <li>Second bullet point</li> 
  <li>Third bullet point</li> 
</ul> 

You can also set class="incremental" or "non-incremental" on individual elements (except for <br />)

Incremental display of layered images

These can be marked up using CSS relative positioning, e.g.

<div class="incremental" 
 style="margin-left: 10em; position: relative"> 
  <img src="face1.gif" alt="face" 
   style="position: static; vertical-align: bottom"/> 
  <img src="face2.gif" alt="eyes" 
    style="position: absolute; left: 0; top: 0" /> 
  <img src="face3.gif" alt="nose" 
    style="position: absolute; left: 0; top: 0" /> 
  <img src="face4.gif" alt="mouth" 
    style="position: absolute; left: 0; top: 0" /> 
</div> 
face eyes nose mouth

Create outline lists with hidden content

You can make your bullet points or numbered list items into outlines that you can expand or collapse

Future Plans

Recent additions have included a table of contents, and a way to hide and reveal content in the spirit of outline lists. Further work is anticipated on the following:

Future Plans

Web Meetings

Web Chat and Presence

Despite its current momentum, Jabber may not be the long term solution, and we are likely to see solutions that are more closely integrated with the Web. An example of this approach is provided by meebo

Business Opportunities

Business Opportunities

Concluding Remarks

  1. Ubiquitous Web
  2. Speech Enabling Web Pages
  3. Web Presentations
  4. Web Meetings
  5. Business Opportunities
  6. Concluding Remarks

n.b. the handwriting font used in this presentation (TSCu_Comic.ttf) is available free under the Gnu GPL and was created by Thukaram Gopalrao.