Outline

Photo by Elaine Vallet

1. The World Wide Web Consortium
2. Mobile standards, software and tools
3. The Web as platform, on-going works to bridge the gap

The W3C

Leading the Web to its full potential...

• Web Standards
• Consortium, 420 members, from industry and research
• Founded and directed by inventor of the Web, Tim Berners-Lee
• World-wide offices, including Brazil, China, India, Morocco, South Africa, ...

Web standards

Photo by Elaine Vallet

X(HTML), CSS, XML, SVG, PNG, WCAG, RDF, XSLT, ...
Privacy, Semantic Web, Accessibility, eGovernement, Mobile Web, ...

The W3C in practice

Photos by mnadi and psd

The Mobile Web Initiative

Making Web access from a mobile device as simple as Web access from a desktop device.
Tim Berners-Lee, W3C Director and inventor of the Web

• Mobile Web Best Practices
• Device Description
• Test Suites
• Mobile Web for Social Development
• MWI Steering Council

Standards, but also software and tools!

The W3C Markup Validator is probably the most well-known tool...
It's not the only one!

Mobile Web Best Practices - Overview

Mobile Web Best Practices 1.0:

• W3C standard since July 2008
• explains the usual mobile constraints: screen, keyboard, network, ...
• shows the potential of mobile devices: personal, widespread, always on, ...
• 60 best practices to keep in mind when authoring Web content.
• Summarized in handy flipcards!
• Audience: Web site authors (developers, designers, project managers, testers)

The mobileOK mark

• Set of best practices that may be automatically checked
• A mark to claim I took mobile constraints into account
• Solid foundations for Web pages
• One click away with the W3C mobileOK Checker

From Best Practices to mobileOK

The W3C mobileOK Checker

http://validator.w3.org/mobile

• Validation tool.
• To speed up testing on actual devices.
• Educational tool.

Categories and severity

Encourage time-constrained authors
to address critical problems first

Score and page statistics

• All-or-nothing reports discourage users
• Fix an error and watch your score improve!
• Page size includes hidden redirects.

Level of Adherence to Best Practices

Mobile Web Best Practices not followed

Best Practice	Best Practice explained	URIs (%)	Domains (%)
VALID_MARKUP	Create documents that validate to published formal grammars.	77%	87%
MEASURES	Do not use pixel measures and do not use absolute units in markup language attribute values and style sheet property values.	58%	68%
PAGE_SIZE_LIMIT	Ensure that the overall size of page is appropriate to the memory limitations of the device.	54%	66%
CHARACTER_ENCODING_USE	Indicate in the response the character encoding being used.	49%	61%
IMAGES_SPECIFY_SIZE	Specify the size of images in markup, if they have an intrinsic size.	48%	58%
CONTENT_FORMAT_SUPPORT	Send content in a format that is known to be supported by the device.	39%	51%
CACHING	Provide caching information in HTTP responses.	39%	50%
TABLES_LAYOUT	Do not use tables for layout.	34%	38%
POP_UPS	Do not cause pop-ups or other windows to appear and do not change the current window without informing the user.	30%	34%
HTTP_RESPONSE	(Not a real best practice)	27%	33%

Training courses on MWBP

The DDR Simple API

Common API for access to Device Description Repositories

PHP implementation of the DDR Simple API

Generic implementation that may be re-used for access to other DDRs,
simple implementation on top of WURFL
http://dev.w3.org/cvsweb/2009/mobileok-authoring/common/ddrsimpleapi/

The Web Compatibility Test for Mobile Browsers (1/2)

http://www.w3.org/2008/06/mobile-test/

The Web Compatibility Test for Mobile Browsers (2/2)

Tests basic support for common Web technologies

POWDER

Machine-readable claims about a set of resources
http://www.w3.org/TR/powder-primer/

mobileOK POWDER Generator

mobileOK™ is one of the use cases of POWDER
http://i-sieve.com/cgi-bin/mobileOK.cgi

Other tools...

• Link Checker: http://validator.w3.org/checklink
• CSS Validator: http://jigsaw.w3.org/css-validator/
• XML Schema validator: http://www.w3.org/2001/03/webdata/xsv
• Mobile Test Harness: http://www.w3.org/2007/03/mth/harness
• HTML Compatibility Checker for XHTML (public preview): http://qa-dev.w3.org/appc/
• Unicorn, single point of entry (public preview): http://qa-dev.w3.org/unicorn/

The Web as platform...
for mobile devices too

From a classic client-server architecture...

... to an architecture of participation

W3C Widgets

Widgets Packaging and Configuration

Basic widget wrapper:

	<widget xmlns='http://www.w3.org/ns/widgets'>
	  <name>Hello world!</name>
	</widget>
	

Widgets Digital Signature

For signing and verifying widgets

Widgets APIs and Events

	function getDiagonalSize(){
	  var x   = widget.width;  
	  var y   = widget.height;  
	  var hyp = Math.sqrt(x*x + y*y);
	  return hyp;
	}

Widgets Access Requests Policy

Security model controlling network access from within a widget.

Widgets Updates

Auto-update mechanism.

W3C Widget Checker

Alpha unstable version: http://qa-dev.w3.org:8001/widget/
(re-uses the mobileOK Checker library!)

Mobile Web Application Best Practices

Minimize Perceived Latency

What it means

A conservative use of resources will help to minimize the latency of a Web application, but a number of measures can also be used to further minimize the perceived latency.

How to do it

Place JavaScript tags at the bottom of the page.

	
	  <html>
	    <head>
	      [...]
	    </head>
	    <body>
	      [...]
	      <script type="text/javascript" src="script.js"></script>
	    </body>
	  </html>
      

Got threads?

Web Workers

	var worker = new Worker('worker.js');
	worker.onmessage = function (event) {
	  document.getElementById('result').textContent = event.data;
	};
      

Web Storage and Web Database

Web Storage

Persistent data storage of key-value pair data in Web clients:

	sessionStorage.foo='bar';
	localStorage.fooo='bar';
      

Web Database

Query data using SQL in Web clients:

	db.readTransaction(function (t) {
	  t.executeSql('SELECT title, author FROM docs WHERE id=?', [id], function (t, data) {
	    report(data.rows[0].title, data.rows[0].author);
	    });
	  });
      

HTML5 - Offline Web Applications

• Ability for the browser to keep a copy of the files for use offline.
• Described in a manifest file
• Some overlap with widgets, right?

http://www.w3.org/TR/html5/offline.html

HTML5 - New form controls

	<input type="email" >
	<input type="date" >
	<input type="range" >
	<input type="color" >
      

More semantics allow for more automation on mobile devices.

HTML5 - Canvas

• A markup element
• that can be used for rendering graphs
• using Javascript

Canvas vs. SVG?

	
	  // canvas is a reference to a <canvas> element
	  var context = canvas.getContext('2d');
	  context.fillRect(0,0,50,50);
	  canvas.setAttribute('width', '300'); // clears the canvas
	  context.fillRect(0,100,50,50);
	  canvas.width = canvas.width; // clears the canvas
	  context.fillRect(100,0,50,50); // only this square remains
	
      

Geolocation API

Last Call working draft
http://www.w3.org/TR/geolocation-API/
(implementations in Firefox 3.5, Safari Mobile, Google Gears)

	
	function showMap(position) {
	 // Show a map centered at:
	 // - position.coords.latitude
	 // - position.coords.longitude
	}
	
	// One-shot position request.
	navigator.geolocation.getCurrentPosition(showMap);
      

Device APIs

Device APIs and Policy Working Group
http://www.w3.org/2009/dap/

• Calendar
• Contacts
• Camera
• Messaging
• ...

Starting points:

• Nokia APIs
• OMTP BONDI APIs

Not restricted to mobile devices!

Buzz words

• Mobile Web Best Practices
• mobileOK
• DDR Simple API
• POWDER
• Widgets
• Web Workers
• Web Storage
• HTML5
• Geolocation API
• Device APIs

Conclusion (1/2)

If you want to delve into a spec,
there's a tool for that!

Open Source Software at W3C:
http://www.w3.org/Status

Conclusion (2/2)

The Web as platform
is around the corner.

Post-Scriptum

There's just One Web!

The End

Contact

François Daoust <fd@w3.org>

W3C Mobile Web Initiative
http://www.w3.org/2009/Talks/09-overtheair/

Supported by MobiWeb2.0,
funded by European Union's FP7.