W3C

Web Design and Applications

Web Design and Applications involve the standards for building and Rendering Web pages, including HTML, CSS, SVG, Ajax, and other technologies for Web Applications (“WebApps”). This section also includes information on how make pages accessible to people with disabilities (WCAG), internationalized, and work on mobile devices.

HTML & CSS Header link

HTML and CSS are the fundamental technologies for building Web pages: HTML (html and xhtml) for structure, CSS for style and layout. Find resources for good Web page design as well as helpful tools.

Scripting and Ajax Header link

Standard APIs for client-side Web Application development include those for Geolocation, XMLHttpRequest (Ajax), and mobile widgets. W3C standards for document models (the “DOM”) and technologies such as XBL allow content providers to create interactive documents through scripting.

Graphics Header link

W3C is the home of the widely deployed PNG raster format, SVG vector format, and the Canvas API. WebCGM is a more specialized format used, for example, in the fields of automotive engineering, aeronatics.

Audio and Video Header link

Some of the W3C formats that enable authoring audio and video presentations include HTML, SVG, and SMIL (for synchronization). W3C is also working on a timed text format for captioning and other applications.

Accessibility Header link

W3C’s Web Accessibility Initiative (WAI) has published Web Content Accessibility Guidelines (WCAG) to help authors create content that is accessible to people with disabilities. WAI-ARIA gives authors more tools to create accessible Web Applications by providing additional semantics about widgets and behaviors.

Internationalization Header link

W3C has a mission to design technology that works across cultures and languages. W3C standards such as HTML and XML are built on Unicode, for instance. In addition, W3C has published guidance for authors related to language tags bi-directional (bidi) text, and more.

Mobile Web Header link

W3C promotes “One Web” that is available on any device. W3C’s Mobile Web Best Practices help authors understand how to create content that provides a reasonable experience on a wide variety of devices, contexts, and locations.

Privacy Header link

The Web is a powerful tool for communications and transactions of all sorts. It is important to consider privacy and security implications of the Web as part of technology design. Although technology such as POWDER should empower users to make appropriate privacy decisions and to protect sensitive information, education is also an important element of building trust on the Web.

Math on the Web Header link

Mathematics and formula are used on the Web for business reports, education materials and scientific research. W3C’s MathML enables mathematics to be served, received, and processed on the World Wide Web, just as HTML has enabled this functionality for other types of content.

News Atom

The major change was the addition of detailed information about use of CSS selectors with xml:lang, but there were many other edits (see the list below). Translators should consider retranslating the whole tutorial. [search keys: qa-css-lang]

Read more! »

Web authoring tools ease publication process. Simplicity comes with some loss of control over the generated content. There is hardly anything an authoring tool user may do to improve her content when the W3C mobileOK Checkerreports that pop-up windows should not be used. So what?! I do not have any of these pop-up links in mycontent!

The underlying theme can be updated, but this approach works up to a point when e.g. the post would best be split into multiple pages when delivered on mobile devices. Authoring tools that do not provide content adaptation mechanisms need to be extended to be able to serve mobile-friendly content to mobile devices.

I have been working on an open-source suite of tools written in PHP lately, named mobileOK Pythia, designed to help generate mobileOK content and more generically speaking to help adapt content to fit the properties of the requesting device. Here is a short overview of the outcome of this work. More information (including crucial information about the choice of Pythiaas a name ;)) can be found in the documentation of mobileOK Pythia.

This work is part of the MobiWeb 2.0project supported by the European Union's 7th Research Framework Programme (FP7).

Plug-ins for WordPress and Joomla!

WordPress and Joomla home pages with the mobileOK Pythia plug-in

From a user's point of view, the visual and hopefully useful outcome of this work is the creation of the mobileOK Pythia plug-insfor WordPressand Joomla!that make it possible to generate mobileOK content with these tools.

The plug-ins feature:

  • Device identification: based on WURFL, an open-source DDR published as an XML file, and accessed through a standard DDR Simple APIinterface.
  • Content adaptationto fit the properties of the requesting device in terms of e.g. screen size, script support, page size limit.
  • Theme switching: possibility to switch to a more mobile-friendly theme when the requesting device is identified as mobile.
  • POWDER: a machine-readable mobileOK claim for the Web site can be automatically created and served using a POWDER document. The POWDER document is made discoverable through the addition of a LinkHTTP header field as decribed in the POWDER Primer.
  • W3C mobileOK Checker link: a link to the W3C mobileOK Checkeris added next to the authoring input form to be able to assert the mobile-friendliness of the created content while it is being written.
  • mobileOK theme: a mobileOK template may be installed with the plug-in.

The development of a third plug-in for Moodlehas started but it is still work in progress.

There exist other plug-ins that provide similar functionality (see for instance WordPress Mobile Plugin, WordPress Mobile Pack, Mobilebot 1.0or WAFL: Mobile Content Adaptation). mobileOK Pythia separates tool-specific functionalities from tool-agnostic libraries to ease porting to other tools. In particular, the plug-ins wrap the same extensible libraries:

  • AskPythia to identify and retrieve the properties of the requesting device.
  • TransPythia to adapt content based on the properties of the requesting device.

AskPythia

AskPythia is an open-source conforming implementation of the Device Description Repository Simple APIin PHP. It is not a DDR but a wrapperto existing DDRs.

AskPythia ships with an implementation on top of the WURFL database that maps WURFL capabilities to properties defined in the Device Description Repository Core Vocabulary standard. Support for other DDRs is welcome!

Check AskPythia's documentationfor more information.

TransPythia

TransPythia is a transcoding library that adapts content (HTML, CSS, images) based on the capabilities of the requesting device. The library ships with a set of transcoding actions that are particularly adapted to mobile devices and that may be extended as needed.

Main transformations are:

  • Images conversion and adaptation: adapts images to match the requesting device's list of supported image formats and to fit the screen size. Removes images that cannot be converted or that are still too big for mobile consumption after conversion.
  • Pagination: a generic pagination algorithm that may be used to paginate HTML pages or HTML fragments when the requesting device is identified as a mobile device.
  • Tables linearization: to remove nested tables and linearize tables when the requesting device does not support them.

Check TransPythia's documentationfor more information.

Feedback

If you would like to comment, contribute, report bugs or simply tell us what you think, you are very welcome! Feel free to send an email to the public-mobile-dev@w3.orgmailing-list (with public archives).

The Mobile Web For Social Development (MW4D) Interest Group, part of the Mobile Web Initiative, has published a Group Note of Mobile Web for Social Development Roadmap. This document describes some of the current challenges of deploying development-oriented services on mobile phones. It suggests the most promising directions for lowering barriers to developing, deploying and accessing services on mobile phones and thereby creating an enabling environment for more social-oriented services to appear.

Yesterday, as part of the W3C Technical Plenary day, I got the opportunity to introduce a new tool that I had been working on over the past few weeks, the W3C Cheatsheet for Web developers.

Screenshot of the W3C Cheatsheet on a phone

This cheatsheet aims at providing in a very compact and mobile-friendly format a compilation of useful knowledge extracted from W3C specifications — at this time, CSS, HTML, SVG and XPath —, completed by summaries of guidelines developed at W3C, in particular the WCAG2 accessibility guidelines, the Mobile Web Best Practices, and a number of internationalization tips.

Its main feature is a lookup search box, where one can start typing a keyword and get a list of matching properties/elements/attributes/functions in the above-mentioned specifications, and further details on those when selecting the one of interest.

The early feedback received both from TPAC participants after the demo and from the microblogging community has been really positive and makes me optimistic that this tool is filling a useful role.

This is very much a first release, and there are many aspects that will likely need improvements over time, in particular:

  • I would like the cheatsheet to cover more content — from specifications not yet released as standards as well as from topics not yet covered (e.g. JavaScript interfaces),
  • some people have reported that there might be accessibility problems with the current interface, that I’m eager to fix once I get specific bug reports,
  • the cheatsheet doesn’t work in IE6 (and probably even in later versions), and it would be nice to make it work at least somewhat there.

The code behind the cheatsheetis already publicly available, and I’m hoping others will be interested to join me in developing this tool — I’m fully aware that the first thing that will need to get others involved will be some documentation on the architecture and data formats used in the cheatsheet, and I’m thus hoping to work on that in the upcoming few weeks.

In the meantime, I very much welcome bug reports and suggestions for improvements, either by private email to me ( dom@w3.org) or preferably to the publicly archivedmailing list public-qa-dev@w3.org.

Screenshot of the W3C Cheatsheet on a phone

I’ve been working over the past few weeks on a nifty little tool that summarizes a number of W3C technologies, including the Mobile Web Best Practices, in a mobile-friendly format, called the W3C Cheatsheet.

See my post in the W3C blogto learn more about it, and send your feedback!

The review period for the two Last Call working drafts published by the Mobile Web Best Practices Working Grouplast month ends tomorrow. This is a reminder that the public community is invited to review and comment the drafts:

  • The Guidelines for Web Content Transformation Proxiesprovides guidance to implementers of Content Transformation proxies as to whether and how to transform Web content. This version is the result of returning the document to Last Call based on public feedback received during the first review period.
  • The Mobile Web Application Best Practicesspecifies Best Practices for the development and delivery of Web applications on mobile devices.

Comments should be sent to the public-bpwg-comments@w3.orgmailing-list (with public archives). Thanks in advance!

Rotan Hanrahan will be giving a lightning talk on behalf of Sailesh Sathish at the

Technical Plenary

about Delivery Context interfaces during the first

Lightning Talks

panel. He'll be talking about

DCCI Use Cases and Requirements

.

Full minutes

An updated Authoring Tool Accessibility Guidelines (ATAG) 2.0 Working Draft was published 29 October 2009. It includes a revised supporting note "Implementing ATAG 2.0". ATAG defines how authoring tools should help Web developers produce Web content that is accessible and conforms to Web Content Accessibility Guidelines (WCAG) 2.0. ATAG also defines how to make authoring tools accessible so that people with disabilities can use them. WAI encourages you to review ATAG 2.0 and submit any comments. See: Call for Review: ATAG 2.0 Working Draft updated, Authoring Tool Accessibility Guidelines (ATAG) Overview. Please send comments by 30 November 2009. (2009-10-29)

More than a year ago, we, the Mobile Web Best Practices Working Group, published a Last Call of a document then called Content Transformation Guidelines, and invited the community to review the document. The document provides guidance to Content Transformation proxies as to whether and how to transform Web content.

Many comments were received. They triggered extensive discussions within the group. Finding the right balance between allowing proxies to alter content that would otherwise not display successfully on mobile devices and reducing side-effects such proxies may have on Web applications already designed for mobile devices is no easy task! Significant changes were brought to the document as a result and another Last Call was published a couple of weeks ago under the title Guidelines for Web Content Transformation Proxies 1.0.

We think we have addressed and replied to all the comments, providing rationale when we have not incorporated the suggested changes. We deeply thank last year's commenters, and apologize for the time it took to address the comments!

Once again, we would like to invite the community at large (and in particular mobile Web authors who are impacted by the deployment of such transcoding proxies) to review and comment the document. The Status of This Documentsection contains a list of the changes made in response to user feedback.

The Last Call review period ends on 6 November 2009. Comments should be sent to the public-bpwg-comments@w3.orgpublic mailing-list (with public archives).

Talks and Appearances Header link

See also the full list of W3C Talks and Appearances.

Events Header link

See full list of W3C Events.