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

SVG

Web standards > SVG

Scalable Vector Graphics

Inside some SVG

Web standards > SVG code

<g id="m">

 <line stroke-width="4"

   y2="95" stroke="red" opacity=".9" />
file://localhost/Users/zibin/Desktop/Opera/test/teststyle.html
   <animateTransform type="rotate" 

     attributeName="transform"

     repeatCount="indefinite"

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

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

Why HTML 5?

HTML 5

HTML 5: <canvas>

Web standards > Canvas

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 3

CSS 3

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.

CSS: Opacity

CSS 3 Opacity

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

opacity: 0.15;

This can now also be done using RGBA or HSLA colours, eg:

p { background-color: rgba(255,0,0,0.15); }

CSS: Text shadows

Web standards > CSS > text shadows

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

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

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

CSS: Zebra striping

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

CSS: 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;}
}

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>

Exciting new way - labs.opera.com

<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

SMIL + SVG

SVG and SMIL

in SMIL + SVG
Yuhu! Here we go!