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...

Contents

Talk contents

Bruce Lawson

Speaker bio

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
WAP, 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

2000-ish
.com Crash - Time to grow up...
2002
Opera Mobile with Small Screen Rendering
2005
WHAT-WG founded, W3C Mobile Web Initiative starts
2006
Opera Mini launches
2007
W3C adopts WHAT-WG spec as basis for HTML 5
January 22, 2008
First public working draft of HTML 5

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

(Web Standards Curriculum)

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"

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

Which standards?

Web standards > Which standards?

Web standards (W3C etc)
X/HTML, SVG, ECMAScript, CSS, etc
Internet Standards (IETF etc)
HTTP, SMTP
de facto standards
XMLHttpRequest, Widget spec, ARIA

Ajax

Web standards > Ajax

XMLHttpRequest (the "X" in Ajax)

Data request within a page

Widgets...

Web standards > Opera widgets

Little web technology applications that blur the distinction between web and desktop

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

SVG

Web standards > 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

Web standards > SVG code

<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?

Web standards > HTML 5

HTML 5: <canvas>

Web standards > Canvas

"Immediate" Vector Graphics

(You can't manipulate them)

Serious application

HTML 5: Web Forms 2.0

Web standards > 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>:

CSS

Web standards > 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

Web standards > CSS > zebra striping

Before...

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

now..

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

Zebra striping example.

Text shadows

Web standards > 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

Web standards > CSS > Opacity

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

opacity: 0.25;

Standards and mobile

Web standards > The Mobile web

The Web is going mobile

Mobile web is vital

Web standards > The mobile web > The future?

It's vital that the web isn't broken up.

One web vision

Media queries

Web standards > The mobile web > Media queries

CSS 3 constructs

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.

What is Opera Dragonfly?

Opera Dragonfly

Dragonfly

Scope

The cool bit. Looking into a remote device.

Inside Opera Dragonfly

Opera Dragonfly > Inside Opera Dragonfly

What Opera Dragonfly does

Opera Dragonfly > What Opera Dragonfly does > DOM debugging

Developer stuff

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

What else it does

Opera Dragonfly > What Opera Dragonfly does > CSS debugging

Style inspector
Style sheets
Style rules
Computed style

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

Wait! There's more...

Opera Dragonfly > What Opera Dragonfly does > Error console

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

New stuff

New Opera builds

Demonstrations that need an Opera experimental build.

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

Download:

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>

Video Politics

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

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

Opera Education

Opera education

End credits!

Thank you

brucel@opera.com

education@opera.com

There are no foolish questions - only fools who do not question