Web Standards - tomorrow's web today

Henny Swan, Opera Software

Opera: the best web experience everywhere

Who am I?

Web Evangelist Opera, Developer Relations
Co-lead of the Web Standards Project International Liaison Group
Member of the World Wide Web Consortium User Agent Accessibility Guidelines Working Group
Accessibility advocate/bore (depending on your outlook)

Opera

We have one product: a browser
Delivered on multiple devices: desktop, mobile (Opera Mobile and Mini), Nintento Wii, DSi, airplane seats, hand-helds
We believe in web standards and one web

"The web is too vital a platform— for commerce, for business, for society— to be in the hands of any one vendor."Bruce Lawson, Future or Web Design

Opera Mini, Mobile and Unite

What we'll cover today

Tomorrow's web standards today:

The way of web standards
Accessibility
HTML5
Scalable Vector Graphics (SVG)
Mobile
CSS3

The way of web standards

The Web is the platform, standards the framework. Standards help:

Developers: validate; separate content and presentation - helps specialisation, maintainability and future proofing
Site owners: more maintainability, smaller pages, better SEO
End-users: light-weight, findable, interoperable, more likely accessible

Write once, work everywhere

Web standards - open web technologies

Non-proprietary, cross device and cross platform technologies designed to work everywhere: HTML, CSS, SMIL, DOM, ECMAscript, WAI-ARIA, Widgets...

Written by standards bodies such as the World Wide Web Consortium (W3C), Ecma International, International Organization for Standardization (ISO)

HTML describes the meaning and structure of your information (headings, lists, form elements)
CSS outlines presentation (fonts, colours, layout, decoration)
JavaScript outlines behaviour (validation, updates)

Accessibility

Often the elephant in the room

"It's only a few users",
"It's not our client base..."
"Blind people don't use the web, it's a visual medium"
"No return on investment"
"It costs too much"

Accessibility - benefits

Disability covers visual, hearing, mobility, cognitive impairments - arthritis, cancer, multiple sclerosis, heart disease, depression, Downs Syndrome and diabetes.

Additional 10 million users in the UK alone
More usable and findable website
More cross device accessible websites
Cheaper to maintain

"By 2020 58% of people over the age of 50 will have a long term health condition." - Disability Rights Commission

That's you and me; no-one plans on dying young right?

Accessibility - guidelines and standards

From the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI)

Web Content Accessibility Guidelines (WCAG) 2.0 - content
Authoring Tools Accessibility Guidelines (ATAG) 2.0 - HTML editors, content management systems, blogs etc
User Agent Accessibility Guidelines (UAAG) 1.0 - browsers, media players etc
Accessible Rich Internet Applications (WAI-ARIA) - online apps, widgets etc

Accessibility - WAI-ARIA

Provides keyboard accessibility of widgets - navigation, sliders, drag and drop
Access technology support: Jaws 7.1+, WindowEyes 5.5+, NVDA, and Firevox
Browser support: Supported by Opera 9.5+, Firefox 1.5+, IE8 and Safari 4

Intended to work together with HTML5 which provides interaction for web apps

See An Introduction to WAI-ARIA from Gez Lemon

Accessibility - WAI-ARIA roles and states

Role - I am a slider

State - Feeling pretty good actually

<input type="image"

src="thumb.gif" 

alt="How are you doing?" 

role="slider"

aria-valuemin="terrible" 

aria-valuemax="excellent"

aria-valuenow="good"

...aria-labelledby="leffective">

Accessibility - WAI-ARIA live regions

Notifies the screen reader user of updates: polite, assertive, RUDE!

Accessibility - WAI-ARIA landmark roles

Defines areas of a web page that can be identified by screen readers

        <div role="banner">...</div>

        <div role="navigation">...</div>

        <div role="main">...</div>

Banner, navigation and content areas of a page

HTML5 - why?

Editor Ian Hickson describes the purpose of HTML 5 as:

To define existing language in more detail
Extend existing language to better support Web applications

HTML4 is limited and did not support web applications.

HTML5 - History

Started by Opera as a proof of concept instead of XHTML
Web Hypertext Application Technology Working Group (WHATWG) formed 2004 by Opera, Mozilla and Apple
Initially vetoed by W3C it later was adopted 2007 to form the HTML WG
First public working draft published January 2009
Last Call expected November 2009

Will be complete 2022 but you can use new features now as they become supported by browsers.

HTML5 - Skirmishes

Too many cooks...

"XHTML is for winners, HTML5 is for losers"
Accessibility: alt, summary, longdesc, canvas and video
Video politics...no agreement over a patent free codex. Ogg formats Vorbis and Theora objected to by Apple and Nokia

HTML5 - new structural elements

New structural elements: header, nav, article, aside, section and footer

From this... to this...

Support: Not yet officially supported but can be used with CSS display:block.

HTML5 - forms

Reliance on Javascript replaced by HTML5: autofocus, required, datalist, email, url, date, range
Less scripting and coding, lighter pages, consistency across browsers, less build/ maintenance time, more accessible/usable.
Huge potential for mobile web: no need to reliance of JavaScript which is variously supported.
Demo

Support: Opera 9.3 upwards, partial support in Firefox 3.

HTML5 - audio and video

<object width="425" height="344">
<param name="movie" value="http://xx"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="http://www.youtube.com/xxx"
<embed src="http://www.youtube.com/xxx"
allowfullscreen="true" width="425" height="344"></embed>
</object>

Super slinky new way:

<video src="video.ogv"
controls
autoplay
poster="poster.jpg"
width="320" height="240">
<a href="video.ogv">Download movie</a>
</video>

Support: Opera 9.6 video build, Safari 3.1 and Firefox 3.1

HTML5 - video demos

in HTML5: A simple example; Or with some control
Manipulating video in the browser: Add filters; or animation; and dynamic interaction; Dynamic content injection (needs FF3.5)

(Demonstrations need an Opera experimental build, or Firefox 3.5)

HTML5 - canvas

2D drawing element
Uses JavaScript to render graphics on the fly
First implemented by Apple, now in most browsers
No accessibility support (no DOM, no screen reader access)
Canvas game by Patrick H. Lauke: Paranoid 0.1

Support: Opera, Safari, Firefox and Chrome.

Scalable Vector Graphics (SVG)

Scalable Vector Graphics
XML format from W3C
Common in phones
Now in Web Browsers too (except IE)
Can be handwritten (even by dummies)
Images and text can be scaled with no pixelation
Huge accessibility potential, but currently screen readers don't talk to SVG

SVG

 <g id="m">

<line stroke-width="4" y2="95" stroke="red" opacity=".9" />

<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="60min" by="360" />

<circle r="6" fill="red"/>

</g>

SVG v canvas shootout

Canvas is graphics based and has no DOM, hard to make accessible and fallback on complex canvas is insufficient.

SVG is text and more accessible (once screen readers catch up).

Canvas for bling and eye candy, SVG for content

Mobile web - potential

Location based services: see Opera's experimental Geolocation API build

The tel: protocol

<a href="tel:12345678">Call me at 12345678</a>

Convergence of app/services: address book, camera etc
Widgets (more of that later)

Mobile web - uneven landscape

Mobiles differ a lot in capabilities:

The full web - eg Opera Mobile, iPhone WebKit
Constrained browsers — ie WAP limited standards support, or proprietary markup
Proxy-based browsers
Other devices such as games consoles

Mobile web - limitations

Screen size variance
Limited / varying controls
Different input mechanism - touch and keypad
Lack of memory and processing power
Limited colour palettes
Context

Mobile web - optimization

3 approaches to mobile support:

Do nothing except follow web standards
Create a completely separate mobile site
Create one site, but optimize it depending on the device/browser looking at it:

Server-side detection, eg UA string or HTTP header querying
Media types
Media queries

CSS3 - media queries

CSS 2.1 targets rendering with Media types: Print, screen, aural, braille, handheld, projection, tty, tv, and all.

Media queries extend media types: width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, and grid.

Benefit of media queries:

serve styles depending on browser width
one page for all devices (yay!)

Support: Opera Mobile, Opera Mini 4, Opera on the Nintendo Wii, iPhone, Bolt, Iris and the Nokia s60 browser.

CSS3 - media queries

@media screen and (max-height: 280px), screen and (max-device-height: 280px) {

body, html {

height: 280px;

}

.view {

height: 222px;

}

One source of content, multiple delivery mechanisms: detect, adapt deliver

Media queries demo (resize the window to see content reflow)

Optimising SVG icons with media queries by Andreas Bovens

Widgets - mini apps

Web standards goodness comes in small packages

Small applications for mobile, TV, hand-helds, desktop and devices
Based on web standards: HTML, CSS, XML, JavaScript, WAI-ARIA
No need for proprietary programming
Faster, smaller, cheaper, easier

See Opera widgets for downloadable widgets, resources, SDK, and Opera Dragonfly

Demo: Pocket Widget Workshop (needs Opera running or Opera 10.10 downloaded)

Opera Dragonfly

Inbuilt debugging tool: Tools > Advanced > Developer Tools
CSS, DOM, and JavaScript debugging
Console for entering JavaScript commands
Live HTML and CSS editing
Support for multiple languages
Works alongside the Opera debug menu
Released on an open source BSD license
Remote debugging - mobile, TV, widgets

Opera Dragonfly available in Opera 9.x

The Opera Toolbox

Thank you: ask or question or get in contact

Henny Swan, Opera Software