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

Building the Web - now and in the future

Talk contents

Download link

Slides available at:

http://my.opera.com/chrismills

Look for the "Web standards education presentation" post.

Who am I, and what
the hell do I do?

Introductions!

Chris

I'm Chris Mills from the viking hordes of Opera.

A web (pre)history

Web history > pre-dotcom crash

1989
TBL proposes a project
1992
Marc Andreessen uses <img> in Mosaic beta. Now 99.57%
1994
W3C started at MIT
1996
The Browser Wars
1999
WAP, WCAG
2000
Flash

Unpublished 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, DOM, 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 several 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

Canvas Game

(Check out nihilogic.dk for some more cool examples)

HTML 5: Web Forms 2.0

Web standards > Web forms 2.0

More robust forms

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

<input type=range>:

<input type=date>:

HTML 5: contenteditable

Web standards > contenteditable

Various aspects of HTML 5 make the language a lot more interoperable, giving you more freedom to shape the functionality of various elements. For example, take the contenteditable attribute.

contenteditable=""

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

What is Dragonfly?

Dragonfly

Dragonfly

Scope

The cool bit. Looking into a remote device.

Inside Dragonfly

Dragonfly > Inside Dragonfly

What is the mobile web?

Mobile development > What is the mobile web?

Mobile web is vital

Web standards > The mobile web > The future?

  • Grameen Foundation
  • 3bn phones worldwide
  • In China 73m people (29% of all internet users) use only phones
  • ... grew by 45% in the six months to June
  • The number of web pages viewed in June by Opera users was 3 billion, a 300% increase on a year earlier.
  • Biggest growth in Russia, Indonesia, India and South Africa.
  • The playing field is not level on mobile/alternative devices

    Mobile development > Devices

    Desktop is fairly easy these days, but mobile browsers still differ a great deal in capabilities:

    The Opera Mini proxy system

    Mobile development > Opera Mini

    Mini workflow
    1. User requests web page
    2. Request is sent to the Opera Mini servers
    3. Servers retrieve the page and convert it to OBML
    4. OBML is sent to the client and displayed

    Opera Mini advantages

    Mobile development > Opera Mini

    Device constraints #1

    Mobile development > Device constraints

    different screen sizes

    Screen size variance - how usable will your 1024 x 768 design look on a 240 x 320 screen?

    different browser controls

    Device constraints #2

    Mobile development > Device constraints

    Limited/varying controls

    Device constraints #3

    Mobile development > Device constraints

    Aaaaaaand there's more...

    Device advantages to exploit #1

    Mobile development > Device-specific advantages

    Location-based services (LBS)

    <span class="geo">
      <span class="latitude">0.000000</span>
      <span class="longitude">0.000000</span>
    </span>

    Device advantages to exploit #2

    Mobile development > Device-specific advantages

    the Tel: protocol:

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

    Consider the user experience above all

    Mobile development > User experience

    It won't be the same across all devices!

    Test, test, test

    3 approaches to the problem

    Mobile development > How to develop for mobile

    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

    One site to rule them all...

    Mobile development > Optimizing sites

    crap lotr pun

    Optimizing your site for different devices can be done in a number of ways, and it is probably the most practical solution right now

    1. Server-side detection, eg UA string or HTTP header querying
    2. Media types
    3. Media queries

    Server-side detection

    Mobile development > Server-side detection

    Query the UA strings or HTTP headers to identify devices and detect capabilities:

    Opera/9.50 (J2ME/MIDP; Opera Mini/4.0.8462/8;
    U; en)

    Accept-Language: no-bok, no-nyn, en;q=0.8,
    fr;q=0.4

    Open to abuse. At least do capability detection, not
    device detection, and tailor content in stages, not all or nothing.

    Media types

    Mobile development > Media types

    Different CSS for different purposes:

    <link rel="stylesheet" media="screen"
    type="text/css" href="main.css" />
    <link rel="stylesheet" media="print"
    type="text/css" href="print.css" />
    <link rel="stylesheet" media="handheld"
    type="text/css" href="m.css" />

    Also open to abuse by developers, therefore Opera Mini and Mobile now react differently by default.

    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-width: 480px) {
    	img {
    		margin: 10px auto;
    		float: none;
    		display: block;
    	}
    }

    Media queries example.

    Multimedia future

    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>

    Current work: Video

    Experimental stuff > HTML 5 <video>

    in HTML5
    A web example, or a local example
    Or with some control
    and in SVG
    Add filters
    or animation
    and dynamic interaction

    Video Politics

    Experimental stuff > HTML 5 <video> politics

    Opera Education

    Opera education

    End credits!

    Thank you

    cmills@opera.com

    education@opera.com

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