Web Standards - tomorrow's web today

Henny Swan, Opera Software

Opera: the best web experience everywhere

Who am I?

Henny's blog: iheni.com

Opera

"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:

  1. The way of web standards
  2. Accessibility
  3. HTML5
  4. Scalable Vector Graphics (SVG)
  5. Mobile
  6. CSS3

The way of web standards

Trafic lights - the same the world over

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

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)

Accessibility

Accessibility - often th eelephant in the room

Often the elephant in the room

 

Accessibility - benefits

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

"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)

Accessibility - WAI-ARIA

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

Slider showing

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!

Twitter update box

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:

HTML4 is limited and did not support web applications.

HTML5 - History

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

HTML5 - Skirmishes

Too many cooks...

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

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)

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

Mobile web - uneven landscape

Mobiles differ a lot in capabilities:

Mobile web - limitations

  1. Screen size variance
  2. Limited / varying controls
  3. Different input mechanism - touch and keypad
  4. Lack of memory and processing power
  5. Limited colour palettes
  6. Context

Mobile web - optimization

3 approaches to mobile support:

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

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:

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

  1. Small applications for mobile, TV, hand-helds, desktop and devices
  2. Based on web standards: HTML, CSS, XML, JavaScript, WAI-ARIA
  3. No need for proprietary programming
  4. 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

Opera Dragonfly available in Opera 9.x

The Opera Toolbox

Thank you: ask or question or get in contact

Henny Swan, Opera Software