This slideset is designed for Opera, and uses some features only available in the Opera Video Builds. However the basic content should work in any browser.

To see this in presentation mode using Opera, simply select "View" ->"Full Screen". To see how all this is done, view the source...

Opera and future web standards

Contents

Talk contents

A web (pre)history

Web history > pre-dotcom crash

1989
TBL proposes a project
1992
<img> in Mosaic beta. Now 99.57% (MAMA)
1994
W3C started at MIT
1996
The Browser Wars
1999
Web Content Accessibility Guidelines (WCAG)
2000
Flash

Research by Opera's MAMA analyser shows that 99.57% of pages have an image applied by markup of some description

More web history

Web history > mature standards and mobile web

2005
WHAT-WG and W3C Mobile Web Initiative
2007
W3C adopts WHAT-WG spec as basis for HTML 5
January 22, 2008
First public working draft of HTML 5, WCAG 2.0 becomes a recommendation?

2004: WHAT-WG is Web Hypertext Application Technology Working Group. "Work on HTML5 originally started in late 2003, as a proof of concept to show that it was possible to extend HTML4's forms to provide many of the features that XForms 1.0 introduced, without requiring browsers to implement rendering engines that were incompatible with existing HTML Web pages. At this early stage, while the draft was already publicly available, and input was already being solicited from all sources, the specification was only under Opera Software's copyright.

In early 2004, some of the principles that underly this effort, as well as an early draft proposal covering just forms-related features, were presented to the W3C jointly by Mozilla and Opera at a workshop discussing the future of Web Applications on the Web. The proposal was rejected on the grounds that the proposal conflicted with the previously chosen direction for the Web's evolution.

Shortly thereafter, Apple, Mozilla, and Opera jointly announced their intent to continue working on the effort. A public mailing list was created, and the drafts were moved to the WHATWG site. The copyright was subsequently amended to be jointly owned by all three vendors, and to allow reuse of the specifications.

In 2006, the W3C expressed interest in the specification, and created a working group chartered to work with the WHATWG on the development of the HTML5 specifications. The working group opened in 2007. Apple, Mozilla, and Opera allowed the W3C to publish the specifications under the W3C copyright, while keeping versions with the less restrictive license on the WHATWG site." http://www.whatwg.org/specs/web-apps/current-work/multipage/introduction.html#history0

Standards @ Opera

Web standards > Opera involvement

25 employees work on standards

Why standards?

Web standards > Why standards?

  1. The Web works everywhere
  2. Good standards help developers
  3. Good standards help site owners
  4. Good standards help site end-users

"The Web is the platform"

Web Standards Curriculum

Developers can validate; separate content and presentation - means specialisation and maintainability.

For owners, more maintainability; smaller pages; better SEO

Users: light-weight; interoperable; more likely accessible

The current big contenders

Web standards > Future contenders

Some highlights

HTML 5
Anne van Kesteren, Lachlan Hunt, Simon Pieters
CSS 3
Håkon Wium Lie, Anne van Kesteren
ECMAScript 3.1, 4
Chris Pine
SVG
Erik Dahlström

And more!

ECMAscript encompasses JavaScript, JScript and Actionscript

Accessibility

Web standards > Accessibility

Who it affects, how people access and what makes this work:

ARIA

Web standards > Accessibility and Ajax

Ajax = asynchronous JavaScript and XML

- i.e. automatically updating forms, drag 'n' drop, sliders, widgets...
- Issue: Notification of change of state, keyboard access

Accessible Rich Internet Applications (ARIA) is the fix, it describes:

- Roles: what the widget does i.e. slider
- States and properties: a checkbox as checked

See Introduction to ARIA, Gez Lemon

SVG

Technologies > SVG

Scalable Vector Graphics

Chris Wilson of IE has hinted that SVG is on their roadmap: "Vector graphics support is one of the things we'll see next".

For those who don't want to handcode, SVG can be authored with the free open-source Inkscape as well as serveral commercial products.

Inside some SVG

Technologies > SVG code minute hand

<g id="m">

 <line stroke-width="4"

   y2="95" stroke="red" opacity=".9" />

   <animateTransform type="rotate" 

     attributeName="transform"

     repeatCount="indefinite"

     dur="60min" by="360" />

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

Why HTML 5?

Technologies > HTML 5

HTML 4 great for documents...not suited for web apps

HTML 5: <canvas>

Technologies > Canvas

"Immediate" Vector Graphics

(You can't manipulate them)

Serious application

HTML 5: Web Forms 2.0

Technologies > Web forms 2.0

More robust forms

Easier to put together standards control archetypes that are complicated with HTML 4.x.

<input type=date>:

<input type=range>:

Cascading Style Sheets

Technologies > CSS

CSS 2.1 is great...

...but there is a lot of hacking involved to achieve complex design features.

Hence CSS 3 was born, which aims to make popular design features easier to achieve, and give designers more control.

Zebra striping

Technologies > CSS > zebra striping

Before...

tr.odd {background-color:green;}
<tr>…</tr>
<tr class="odd">…</tr>

now..no need for class

tr.nth-child(odd) {background-color:green;}
<tr>…</tr>
<tr>…</tr>

Zebra striping example.

Text shadows

Technologies > CSS > text shadows

It is very easy to set text shadows using CSS 3.

p {
  text-shadow: #777 2px 2px 2px;
}

Let's have a look at a slightly demonic example!

text-shadow: #f00 0px 0px 30px;

Opacity

Technologies > CSS > Opacity

Opacity used to require JavaScript to achieve, but now it can be achieved using a single CSS property. Nice!

opacity: 0.25;

Media queries

Technologies > The mobile web > Media queries

Tailor content to device and set up: screen, print..

Allow you to apply CSS selectively, depending on attributes such as viewport width.

@media all and (max-device-width: 480px) {

  #big-wide-banner { display:none;}
  #narrow-banner {display:block;}
}

Media queries example.

Current work: Video

Experimental stuff > HTML 5 <video>

Current way to embed video:

<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/LtfQg4KkR88&hl=en&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="http://www.youtube.com/v/LtfQg4KkR88&hl=en&fs=1" type="application/x-shockwave-flash"
allowfullscreen="true" width="425" height="344"></embed>
</object>

Current work: Video

Experimental stuff > HTML 5 <video>

Badass sexy new way

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

Current work: Video

Experimental stuff > <abbr>HTML</abbr> 5 <video>

in HTML5
A simple example
Or with some control
and in SVG
Add filters
or animation
and dynamic interaction

New stuff

Technologies > New Opera builds

Some demonstrations need an Opera experimental build.

To learn more read All together now: Video, 3D, File access.

Download:

Opera Dragonfly

Opera Dragonfly

Opera Dragonfly > Inside Opera Dragonfly

What Opera Dragonfly does

Opera Dragonfly > What Opera Dragonfly does

Debug pages
DOM inspector - on the fly
Style inspector 0 style sheets, rules and computed style
Error console - CSS, SVG, network problems, mail etc
Validation

Try it in Opera 9.5 +
Tools -> Advanced -> Developer Tools. Also try the Debug Menu.

Opera Education

Opera education

End credits!

Thank you

hennys@opera.com