This slideset is designed for Opera, and some demos use features only available in the Opera Video Builds or Opera 10 alpha. 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...

The notes are not rendered in mobile, print or projection media

Standard futures

Charles McCathieNevile
chaals

Opera Software

Topics

Ads...
Old stuff
MathML, SVG
XmlHttpRequest - a standard
New stuff
ARIA - accessibility
HTML5 - video, canvas, webforms
Widgets - File I/O, Dragonfly
CSS, Webfonts, Canvas3D

Opera: Browsers

Opera the company

Why standards?

"The Web is the platform"

Standards @ Opera

25 employees work on standards

(Web Standards Curriculum)

MathML

SVG

(Scalable Vector Graphics)

Does what it says on the box. The tiger, zoomed, is me at the end of a week of W3C meetings

Standards at work

What it is like to work in W3C - meetings, meetings, feedback, asking people for more feedback (including students), ...

XMLHttpRequest (the "Ax" in Ajax)

ARIA - accessible Web 2.0

HTML 5

Upgrading the train tracks

(+ inline SVG/MathML, new APIs, ...)

Video and canvas

More video demos

in HTML5
The simple example again
With author-styled controls
in SVG
Using filters
Using Animation, (My animation)
Scripts for dynamic interactivity

Video Politics

Web forms

Widgets...

(little web technology applications)

Widgets...

This simple:

<widget>
  <widgetname>Hello</widgetname>
  <width>320</width>
  <height>100</height>
</widget>

(plus an HTML page)

Widgets and Standards

New stuff - File I/O

A real file space for Web applications

Build a video sharing app with BitTorrent?

Dragonfly - widgets plus...

Dragonfly

Developer tools. Think Firebug, evolved.

Scope

The cool bit. Looking into a remote device.

Why Dragonfly?

Inside Dragonfly

(try it in Opera 9.5 +
Tools -> Advanced -> Developer Tools

What Dragonfly does

Developer stuff

DOM inspection
Export current DOM
Live edit the DOM
Step through scripts
Insert breakpoints
Use command line

What else it does

Style inspector
Style sheets
Style rules
Computed style

Wait! There's more...

Error console
CSS errors
SVG errors
Network problems
Mail issues
etc etc

How it works

"Scope" - an inspection API

Typically, all in one instance

2 instances

But you can run 2 instances locally

Go Remote

Or debug across the network

For example, edit my DOM live!

Dragonfly and standards

(standardise Console already!)

A standard scope API?

=> Making good development faster

New stuff in CSS

Web fonts

(get Opera 10 alpha to try this)

Using Web fonts

@font-face {
  font-family: "My SVG font";
  src: url("http://www.myweb.com/fonts/myfont.svg#myFont")
     format("svg"); 
  font-style: normal, italic;
  font-weight: 500;
}

Experiments - 3D <canvas>

Not yet proposed for standardisation

Another test example...

Build links

Video, File I/O, 3Dcanvas demos need an Opera experimental build.

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

Download:

Build links

Webfonts need an Opera 10 alpha build.

To learn more read Desktop Team Blog (at My.Opera.com, of course ;) )

January 2009 builds:

Thank you

There are no foolish questions
Only fools who do not question